remove create service

Signed-off-by: Marko Simon <marko@ilert.com>

plugins/ilert/src/components/Service/ServiceNewModal.tsx

@@ -1,136 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { alertApiRef, useApi } from '@backstage/core-plugin-api';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import React from 'react';
-import { ilertApiRef } from '../../api';
-import { useNewService } from '../../hooks/useNewService';
-
-const useStyles = makeStyles(() => ({
-  container: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  formControl: {
-    minWidth: 120,
-    width: '100%',
-  },
-  option: {
-    fontSize: 15,
-    '& > span': {
-      marginRight: 10,
-      fontSize: 18,
-    },
-  },
-  optionWrapper: {
-    display: 'flex',
-    width: '100%',
-  },
-  sourceImage: {
-    height: 22,
-    paddingRight: 4,
-  },
-}));
-
-export const ServiceNewModal = ({
-  isModalOpened,
-  setIsModalOpened,
-  refetchServices,
-}: {
-  isModalOpened: boolean;
-  setIsModalOpened: (open: boolean) => void;
-  refetchServices: () => void;
-}) => {
-  const [{ name, isLoading }, { setName, setIsLoading }] = useNewService();
-  const ilertApi = useApi(ilertApiRef);
-  const alertApi = useApi(alertApiRef);
-  const classes = useStyles();
-
-  const handleClose = () => {
-    setIsModalOpened(false);
-  };
-
-  const handleCreate = () => {
-    setIsLoading(true);
-    setTimeout(async () => {
-      try {
-        await ilertApi.createService({
-          name,
-        });
-        alertApi.post({ message: 'Service created.' });
-        refetchServices();
-      } catch (err) {
-        alertApi.post({ message: err, severity: 'error' });
-      }
-      setIsModalOpened(false);
-    }, 250);
-  };
-
-  const canCreate = !!name;
-
-  return (
-    <Dialog
-      open={isModalOpened}
-      onClose={handleClose}
-      aria-labelledby="create-service-form-title"
-    >
-      <DialogTitle id="create-service-form-title">'New alert'</DialogTitle>
-      <DialogContent>
-        {/* <Alert severity="info">
-          <Typography variant="body1" gutterBottom align="justify">
-            Please describe the problem you want to report. Be as descriptive as
-            possible. Your signed in user and a reference to the current page
-            will automatically be amended to the alarm so that the receiver can
-            reach out to you if necessary.
-          </Typography>
-        </Alert> */}
-        <TextField
-          disabled={isLoading}
-          label="Name"
-          fullWidth
-          margin="normal"
-          variant="outlined"
-          classes={{
-            root: classes.formControl,
-          }}
-          value={name}
-          onChange={event => {
-            setName(event.target.value);
-          }}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          disabled={!canCreate}
-          onClick={handleCreate}
-          color="secondary"
-          variant="contained"
-        >
-          Create
-        </Button>
-        <Button onClick={handleClose} color="primary">
-          Cancel
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};

plugins/ilert/src/components/ServicesPage/ServicesPage.tsx

@@ -20,26 +20,17 @@ import {
   SupportButton,
 } from '@backstage/core-components';
 import { AuthenticationError } from '@backstage/errors';
-import Button from '@material-ui/core/Button';
-import AddIcon from '@material-ui/icons/Add';
 import React from 'react';
 import { useServices } from '../../hooks/useServices';
 import { MissingAuthorizationHeaderError } from '../Errors';
-import { ServiceNewModal } from '../Service/ServiceNewModal';
 import { ServicesTable } from './ServicesTable';
 
 export const ServicesPage = () => {
   const [
     { tableState, services, isLoading, error },
-    { onChangePage, onChangeRowsPerPage, refetchServices, setIsLoading },
+    { onChangePage, onChangeRowsPerPage, setIsLoading },
   ] = useServices(true);
 
-  const [isModalOpened, setIsModalOpened] = React.useState(false);
-
-  const handleCreateNewServiceClick = () => {
-    setIsModalOpened(true);
-  };
-
   if (error) {
     if (error instanceof AuthenticationError) {
       return (
@@ -59,20 +50,6 @@ export const ServicesPage = () => {
   return (
     <Content>
       <ContentHeader title="Services">
-        <Button
-          variant="contained"
-          color="primary"
-          size="small"
-          startIcon={<AddIcon />}
-          onClick={handleCreateNewServiceClick}
-        >
-          Create Service
-        </Button>
-        <ServiceNewModal
-          isModalOpened={isModalOpened}
-          setIsModalOpened={setIsModalOpened}
-          refetchServices={refetchServices}
-        />
         <SupportButton>
           This helps you to bring iLert into your developer portal.
         </SupportButton>

plugins/ilert/src/components/ServicesPage/ServicesTable.tsx

@@ -16,12 +16,11 @@
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
-import { ilertApiRef, TableState } from '../../api';
+import { TableState } from '../../api';
 import { Service } from '../../types';
 import { StatusChip } from './StatusChip';
 
 import { Table, TableColumn } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
 import { ServiceActionsMenu } from '../Service/ServiceActionsMenu';
 import { ServiceLink } from '../Service/ServiceLink';
 
@@ -49,25 +48,24 @@ export const ServicesTable = ({
   onChangeRowsPerPage: (pageSize: number) => void;
   compact?: boolean;
 }) => {
-  const ilertApi = useApi(ilertApiRef);
   const classes = useStyles();
 
-  const xsColumnStyle = {
-    width: '5%',
-    maxWidth: '5%',
-  };
+  // const xsColumnStyle = {
+  //   width: '5%',
+  //   maxWidth: '5%',
+  // };
   const smColumnStyle = {
     width: '10%',
     maxWidth: '10%',
   };
-  const mdColumnStyle = {
-    width: '15%',
-    maxWidth: '15%',
-  };
-  const lgColumnStyle = {
-    width: '20%',
-    maxWidth: '20%',
-  };
+  // const mdColumnStyle = {
+  //   width: '15%',
+  //   maxWidth: '15%',
+  // };
+  // const lgColumnStyle = {
+  //   width: '20%',
+  //   maxWidth: '20%',
+  // };
   const xlColumnStyle = {
     width: '30%',
     maxWidth: '30%',
@@ -91,8 +89,8 @@ export const ServicesTable = ({
   const statusColumn: TableColumn = {
     title: 'Status',
     field: 'status',
-    cellStyle: xsColumnStyle,
-    headerStyle: xsColumnStyle,
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
     render: rowData => <StatusChip service={rowData as Service} />,
   };
   const uptimeColumn: TableColumn = {
@@ -109,8 +107,8 @@ export const ServicesTable = ({
   const actionsColumn: TableColumn = {
     title: '',
     field: '',
-    cellStyle: xsColumnStyle,
-    headerStyle: xsColumnStyle,
+    cellStyle: smColumnStyle,
+    headerStyle: smColumnStyle,
     render: rowData => <ServiceActionsMenu service={rowData as Service} />,
   };