refactor code

remove unnecessary code/components
remove unnecessary styling

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

plugins/ilert/api-report.md

@@ -380,8 +380,6 @@ export interface ILertApi {
   // (undocumented)
   createAlert(eventRequest: EventRequest): Promise<boolean>;
   // (undocumented)
-  createService(serviceRequest: ServiceRequest): Promise<boolean>;
-  // (undocumented)
   disableAlertSource(alertSource: AlertSource): Promise<AlertSource>;
   // (undocumented)
   enableAlertSource(alertSource: AlertSource): Promise<AlertSource>;
@@ -475,8 +473,6 @@ export class ILertClient implements ILertApi {
   // (undocumented)
   createAlert(eventRequest: EventRequest): Promise<boolean>;
   // (undocumented)
-  createService(serviceRequest: ServiceRequest): Promise<boolean>;
-  // (undocumented)
   disableAlertSource(alertSource: AlertSource): Promise<AlertSource>;
   // (undocumented)
   enableAlertSource(alertSource: AlertSource): Promise<AlertSource>;
@@ -709,11 +705,6 @@ export interface Service {
   uptime: Uptime;
 }
 
-// @public (undocumented)
-export type ServiceRequest = {
-  name: string;
-};
-
 // @public (undocumented)
 export type ServiceStatus =
   | typeof OPERATIONAL

plugins/ilert/src/api/client.ts

@@ -40,7 +40,6 @@ import {
   GetServicesOpts,
   GetStatusPagesOpts,
   ILertApi,
-  ServiceRequest,
 } from './types';
 
 /** @public */
@@ -507,20 +506,6 @@ export class ILertClient implements ILertApi {
     return response;
   }
 
-  async createService(serviceRequest: ServiceRequest): Promise<boolean> {
-    const init = {
-      method: 'POST',
-      headers: JSON_HEADERS,
-      body: JSON.stringify({
-        // apiKey: eventRequest.integrationKey,
-        name: serviceRequest.name,
-      }),
-    };
-
-    const response = await this.fetch('/api/services', init);
-    return response;
-  }
-
   async fetchStatusPages(opts?: GetStatusPagesOpts): Promise<StatusPage[]> {
     const init = {
       headers: JSON_HEADERS,

plugins/ilert/src/api/index.ts

@@ -22,6 +22,5 @@ export type {
   GetServicesOpts,
   GetStatusPagesOpts,
   ILertApi,
-  ServiceRequest as ServiceRequest,
   TableState,
 } from './types';

plugins/ilert/src/api/types.ts

@@ -69,11 +69,6 @@ export type EventRequest = {
   source: string;
 };
 
-/** @public */
-export type ServiceRequest = {
-  name: string;
-};
-
 /** @public */
 export interface ILertApi {
   fetchAlerts(opts?: GetAlertsOpts): Promise<Alert[]>;
@@ -114,7 +109,6 @@ export interface ILertApi {
   ): Promise<Schedule>;
 
   fetchServices(opts?: GetServicesOpts): Promise<Service[]>;
-  createService(serviceRequest: ServiceRequest): Promise<boolean>;
 
   fetchStatusPages(opts?: GetStatusPagesOpts): Promise<StatusPage[]>;
 

plugins/ilert/src/components/Alert/AlertLink.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { ilertApiRef } from '../../api';
 import { Alert } from '../../types';
@@ -21,23 +20,12 @@ import { Alert } from '../../types';
 import { Link } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles({
-  link: {
-    lineHeight: '22px',
-  },
-});
-
 export const AlertLink = ({ alert }: { alert: Alert | null }) => {
   const ilertApi = useApi(ilertApiRef);
-  const classes = useStyles();
 
   if (!alert) {
     return null;
   }
 
-  return (
-    <Link className={classes.link} to={ilertApi.getAlertDetailsURL(alert)}>
-      #{alert.id}
-    </Link>
-  );
+  return <Link to={ilertApi.getAlertDetailsURL(alert)}>#{alert.id}</Link>;
 };

plugins/ilert/src/components/Alert/AlertStatus.tsx

@@ -1,48 +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 { StatusError, StatusOK } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import React from 'react';
-import { ACCEPTED, Alert, PENDING, RESOLVED } from '../../types';
-
-const useStyles = makeStyles({
-  denseListIcon: {
-    marginRight: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export const alertStatusLabels = {
-  [RESOLVED]: 'Resolved',
-  [ACCEPTED]: 'Accepted',
-  [PENDING]: 'Pending',
-} as Record<string, string>;
-
-export const AlertStatus = ({ alert }: { alert: Alert }) => {
-  const classes = useStyles();
-
-  return (
-    <Tooltip title={alert.status} placement="top">
-      <div className={classes.denseListIcon}>
-        {alert.status === 'PENDING' ? <StatusError /> : <StatusOK />}
-      </div>
-    </Tooltip>
-  );
-};

plugins/ilert/src/components/Alert/index.ts

@@ -14,4 +14,3 @@
  * limitations under the License.
  */
 export * from './AlertActionsMenu';
-export * from './AlertStatus';

plugins/ilert/src/components/AlertsPage/AlertsPage.tsx

@@ -19,7 +19,6 @@ import {
   ResponseErrorPanel,
   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';
@@ -48,7 +47,7 @@ export const AlertsPage = () => {
   };
 
   if (error) {
-    if (error instanceof AuthenticationError) {
+    if (error.name === 'AuthenticationError') {
       return (
         <Content>
           <MissingAuthorizationHeaderError />

plugins/ilert/src/components/AlertsPage/AlertsTable.tsx

@@ -86,31 +86,29 @@ export const AlertsTable = ({
     maxWidth: '30%',
   };
 
-  const idColumn: TableColumn = {
+  const idColumn: TableColumn<Alert> = {
     title: 'ID',
     field: 'id',
     highlight: true,
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => <AlertLink alert={rowData as Alert} />,
+    render: rowData => <AlertLink alert={rowData} />,
   };
-  const summaryColumn: TableColumn = {
+  const summaryColumn: TableColumn<Alert> = {
     title: 'Summary',
     field: 'summary',
     cellStyle: !compact ? xlColumnStyle : undefined,
     headerStyle: !compact ? xlColumnStyle : undefined,
-    render: rowData => <Typography>{(rowData as Alert).summary}</Typography>,
+    render: rowData => <Typography>{rowData.summary}</Typography>,
   };
-  const sourceColumn: TableColumn = {
+  const sourceColumn: TableColumn<Alert> = {
     title: 'Source',
     field: 'source',
     cellStyle: mdColumnStyle,
     headerStyle: mdColumnStyle,
-    render: rowData => (
-      <AlertSourceLink alertSource={(rowData as Alert).alertSource} />
-    ),
+    render: rowData => <AlertSourceLink alertSource={rowData.alertSource} />,
   };
-  const durationColumn: TableColumn = {
+  const durationColumn: TableColumn<Alert> = {
     title: 'Duration',
     field: 'reportTime',
     type: 'datetime',
@@ -118,20 +116,17 @@ export const AlertsTable = ({
     headerStyle: smColumnStyle,
     render: rowData => (
       <Typography noWrap>
-        {(rowData as Alert).status !== 'RESOLVED'
+        {rowData.status !== 'RESOLVED'
           ? humanizeDuration(
-              Interval.fromDateTimes(
-                dt.fromISO((rowData as Alert).reportTime),
-                dt.now(),
-              )
+              Interval.fromDateTimes(dt.fromISO(rowData.reportTime), dt.now())
                 .toDuration()
                 .valueOf(),
               { units: ['h', 'm', 's'], largest: 2, round: true },
             )
           : humanizeDuration(
               Interval.fromDateTimes(
-                dt.fromISO((rowData as Alert).reportTime),
-                dt.fromISO((rowData as Alert).resolvedOn),
+                dt.fromISO(rowData.reportTime),
+                dt.fromISO(rowData.resolvedOn),
               )
                 .toDuration()
                 .valueOf(),
@@ -140,14 +135,14 @@ export const AlertsTable = ({
       </Typography>
     ),
   };
-  const respondersColumn: TableColumn = {
+  const respondersColumn: TableColumn<Alert> = {
     title: 'Responders',
     field: 'responders',
     cellStyle: !compact ? mdColumnStyle : lgColumnStyle,
     headerStyle: !compact ? mdColumnStyle : lgColumnStyle,
     render: rowData => (
       <Typography>
-        {(rowData as Alert).responders.map((value, i, arr) => {
+        {rowData.responders.map((value, i, arr) => {
           return (
             ilertApi.getUserInitials(value.user) +
             (arr.length - 1 !== i ? ', ' : '')
@@ -156,39 +151,39 @@ export const AlertsTable = ({
       </Typography>
     ),
   };
-  const priorityColumn: TableColumn = {
+  const priorityColumn: TableColumn<Alert> = {
     title: 'Priority',
     field: 'priority',
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
     render: rowData => (
       <Typography noWrap>
-        {(rowData as Alert).priority === 'HIGH' ? 'High' : 'Low'}
+        {rowData.priority === 'HIGH' ? 'High' : 'Low'}
       </Typography>
     ),
   };
-  const statusColumn: TableColumn = {
+  const statusColumn: TableColumn<Alert> = {
     title: 'Status',
     field: 'status',
     cellStyle: xsColumnStyle,
     headerStyle: xsColumnStyle,
-    render: rowData => <StatusChip alert={rowData as Alert} />,
+    render: rowData => <StatusChip alert={rowData} />,
   };
-  const actionsColumn: TableColumn = {
+  const actionsColumn: TableColumn<Alert> = {
     title: '',
     field: '',
     cellStyle: xsColumnStyle,
     headerStyle: xsColumnStyle,
     render: rowData => (
       <AlertActionsMenu
-        alert={rowData as Alert}
+        alert={rowData}
         onAlertChanged={onAlertChanged}
         setIsLoading={setIsLoading}
       />
     ),
   };
 
-  const columns: TableColumn[] = compact
+  const columns: TableColumn<Alert>[] = compact
     ? [
         summaryColumn,
         durationColumn,
@@ -206,26 +201,9 @@ export const AlertsTable = ({
         statusColumn,
         actionsColumn,
       ];
-  let tableStyle: React.CSSProperties = {};
-  if (compact) {
-    tableStyle = {
-      width: '100%',
-      maxWidth: '100%',
-      minWidth: '0',
-      height: 'calc(100% - 10px)',
-      boxShadow: 'none !important',
-      borderRadius: 'none !important',
-    };
-  } else {
-    tableStyle = {
-      width: '100%',
-      maxWidth: '100%',
-    };
-  }
 
   return (
     <Table
-      style={tableStyle}
       options={{
         sorting: false,
         search: !compact,
@@ -260,7 +238,6 @@ export const AlertsTable = ({
       totalCount={alertsCount}
       onPageChange={onChangePage}
       onRowsPerPageChange={onChangeRowsPerPage}
-      // localization={{ header: { actions: undefined } }}
       columns={columns}
       data={alerts}
       isLoading={isLoading}

plugins/ilert/src/components/AlertsPage/StatusChip.tsx

@@ -16,7 +16,6 @@
 import { Chip, withStyles } from '@material-ui/core';
 import React from 'react';
 import { ACCEPTED, Alert, PENDING, RESOLVED } from '../../types';
-import { alertStatusLabels } from '../Alert/AlertStatus';
 
 const ResolvedChip = withStyles({
   root: {
@@ -41,6 +40,12 @@ const PendingChip = withStyles({
   },
 })(Chip);
 
+export const alertStatusLabels = {
+  [RESOLVED]: 'Resolved',
+  [ACCEPTED]: 'Accepted',
+  [PENDING]: 'Pending',
+} as Record<string, string>;
+
 export const StatusChip = ({ alert }: { alert: Alert }) => {
   const label = `${alertStatusLabels[alert.status]}`;
 

plugins/ilert/src/components/AlertsPage/TableTitle.tsx

@@ -22,7 +22,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React from 'react';
 import { ACCEPTED, AlertStatus, PENDING, RESOLVED } from '../../types';
-import { alertStatusLabels } from '../Alert/AlertStatus';
+import { alertStatusLabels } from './StatusChip';
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;

plugins/ilert/src/components/OnCallSchedulesPage/OnCallShiftItem.tsx

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { useApi } from '@backstage/core-plugin-api';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
@@ -20,6 +21,7 @@ import Typography from '@material-ui/core/Typography';
 import RepeatIcon from '@material-ui/icons/Repeat';
 import { DateTime as dt } from 'luxon';
 import React from 'react';
+import { ilertApiRef } from '../../api';
 import { Shift } from '../../types';
 import { ShiftOverrideModal } from '../Shift/ShiftOverrideModal';
 
@@ -48,6 +50,7 @@ export const OnCallShiftItem = ({
   refetchOnCallSchedules: () => void;
 }) => {
   const classes = useStyles();
+  const ilertApi = useApi(ilertApiRef);
   const [isModalOpened, setIsModalOpened] = React.useState(false);
 
   const handleOverride = () => {
@@ -71,7 +74,7 @@ export const OnCallShiftItem = ({
       {shift && shift.user ? (
         <Grid item sm={12}>
           <Typography variant="subtitle1" noWrap>
-            {`${shift.user.firstName} ${shift.user.lastName}`}
+            {ilertApi.getUserInitials(shift.user)}
           </Typography>
         </Grid>
       ) : null}

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

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { ilertApiRef } from '../../api';
 import { Service } from '../../types';
@@ -21,23 +20,12 @@ import { Service } from '../../types';
 import { Link } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles({
-  link: {
-    lineHeight: '22px',
-  },
-});
-
 export const ServiceLink = ({ service }: { service: Service | null }) => {
   const ilertApi = useApi(ilertApiRef);
-  const classes = useStyles();
 
   if (!service) {
     return null;
   }
 
-  return (
-    <Link className={classes.link} to={ilertApi.getServiceDetailsURL(service)}>
-      #{service.id}
-    </Link>
-  );
+  return <Link to={ilertApi.getServiceDetailsURL(service)}>#{service.id}</Link>;
 };

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

@@ -1,57 +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 { StatusError, StatusOK } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import React from 'react';
-import {
-  DEGRADED,
-  MAJOR_OUTAGE,
-  OPERATIONAL,
-  PARTIAL_OUTAGE,
-  Service,
-  UNDER_MAINTENANCE,
-} from '../../types';
-
-const useStyles = makeStyles({
-  denseListIcon: {
-    marginRight: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export const serviceStatusLabels = {
-  [OPERATIONAL]: 'Operational',
-  [UNDER_MAINTENANCE]: 'Under maintenance',
-  [DEGRADED]: 'Degraded',
-  [PARTIAL_OUTAGE]: 'Partial outage',
-  [MAJOR_OUTAGE]: 'Major outage',
-} as Record<string, string>;
-
-export const ServiceStatus = ({ service }: { service: Service }) => {
-  const classes = useStyles();
-
-  return (
-    <Tooltip title={service.status} placement="top">
-      <div className={classes.denseListIcon}>
-        {service.status === 'OPERATIONAL' ? <StatusError /> : <StatusOK />}
-      </div>
-    </Tooltip>
-  );
-};

plugins/ilert/src/components/Service/index.ts

@@ -14,4 +14,3 @@
  * limitations under the License.
  */
 export * from './ServiceActionsMenu';
-export * from './ServiceStatus';

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

@@ -19,7 +19,6 @@ import {
   ResponseErrorPanel,
   SupportButton,
 } from '@backstage/core-components';
-import { AuthenticationError } from '@backstage/errors';
 import React from 'react';
 import { useServices } from '../../hooks/useServices';
 import { MissingAuthorizationHeaderError } from '../Errors';
@@ -32,7 +31,7 @@ export const ServicesPage = () => {
   ] = useServices(true);
 
   if (error) {
-    if (error instanceof AuthenticationError) {
+    if (error.name === 'AuthenticationError') {
       return (
         <Content>
           <MissingAuthorizationHeaderError />

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

@@ -50,91 +50,59 @@ export const ServicesTable = ({
 }) => {
   const classes = useStyles();
 
-  // 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 xlColumnStyle = {
     width: '30%',
     maxWidth: '30%',
   };
-
-  const idColumn: TableColumn = {
+  const idColumn: TableColumn<Service> = {
     title: 'ID',
     field: 'id',
     highlight: true,
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => <ServiceLink service={rowData as Service} />,
+    render: rowData => <ServiceLink service={rowData} />,
   };
-  const nameColumn: TableColumn = {
+  const nameColumn: TableColumn<Service> = {
     title: 'Name',
     field: 'name',
     cellStyle: !compact ? xlColumnStyle : undefined,
     headerStyle: !compact ? xlColumnStyle : undefined,
-    render: rowData => <Typography>{(rowData as Service).name}</Typography>,
+    render: rowData => <Typography>{rowData.name}</Typography>,
   };
-  const statusColumn: TableColumn = {
+  const statusColumn: TableColumn<Service> = {
     title: 'Status',
     field: 'status',
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => <StatusChip service={rowData as Service} />,
+    render: rowData => <StatusChip service={rowData} />,
   };
-  const uptimeColumn: TableColumn = {
+  const uptimeColumn: TableColumn<Service> = {
     title: 'Uptime in the last 90 days',
     field: 'uptimePercentage',
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
     render: rowData => (
-      <Typography>
-        {(rowData as Service).uptime.uptimePercentage.p90}
-      </Typography>
+      <Typography>{rowData.uptime.uptimePercentage.p90}</Typography>
     ),
   };
-  const actionsColumn: TableColumn = {
+  const actionsColumn: TableColumn<Service> = {
     title: '',
     field: '',
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => <ServiceActionsMenu service={rowData as Service} />,
+    render: rowData => <ServiceActionsMenu service={rowData} />,
   };
 
-  const columns: TableColumn[] = compact
+  const columns: TableColumn<Service>[] = compact
     ? [nameColumn, statusColumn, uptimeColumn, actionsColumn]
     : [idColumn, nameColumn, statusColumn, uptimeColumn, actionsColumn];
-  let tableStyle: React.CSSProperties = {};
-  if (compact) {
-    tableStyle = {
-      width: '100%',
-      maxWidth: '100%',
-      minWidth: '0',
-      height: 'calc(100% - 10px)',
-      boxShadow: 'none !important',
-      borderRadius: 'none !important',
-    };
-  } else {
-    tableStyle = {
-      width: '100%',
-      maxWidth: '100%',
-    };
-  }
 
   return (
     <Table
-      style={tableStyle}
       options={{
         sorting: false,
         search: !compact,
@@ -161,7 +129,6 @@ export const ServicesTable = ({
       page={tableState.page}
       onPageChange={onChangePage}
       onRowsPerPageChange={onChangeRowsPerPage}
-      // localization={{ header: { actions: undefined } }}
       columns={columns}
       data={services}
       isLoading={isLoading}

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

@@ -23,7 +23,6 @@ import {
   Service,
   UNDER_MAINTENANCE,
 } from '../../types';
-import { serviceStatusLabels } from '../Service/ServiceStatus';
 
 const OperationalChip = withStyles({
   root: {
@@ -62,6 +61,14 @@ const MajorOutageChip = withStyles({
   },
 })(Chip);
 
+const serviceStatusLabels = {
+  [OPERATIONAL]: 'Operational',
+  [UNDER_MAINTENANCE]: 'Under maintenance',
+  [DEGRADED]: 'Degraded',
+  [PARTIAL_OUTAGE]: 'Partial outage',
+  [MAJOR_OUTAGE]: 'Major outage',
+} as Record<string, string>;
+
 export const StatusChip = ({ service }: { service: Service }) => {
   const label = `${serviceStatusLabels[service.status]}`;
 

plugins/ilert/src/components/StatusPage/StatusPageLink.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { ilertApiRef } from '../../api';
 import { StatusPage } from '../../types';
@@ -21,29 +20,19 @@ import { StatusPage } from '../../types';
 import { Link } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles({
-  link: {
-    lineHeight: '22px',
-  },
-});
-
 export const StatusPageLink = ({
   statusPage,
 }: {
   statusPage: StatusPage | null;
 }) => {
   const ilertApi = useApi(ilertApiRef);
-  const classes = useStyles();
 
   if (!statusPage) {
     return null;
   }
 
   return (
-    <Link
-      className={classes.link}
-      to={ilertApi.getStatusPageDetailsURL(statusPage)}
-    >
+    <Link to={ilertApi.getStatusPageDetailsURL(statusPage)}>
       #{statusPage.id}
     </Link>
   );

plugins/ilert/src/components/StatusPage/StatusPageStatus.tsx

@@ -1,61 +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 { StatusError, StatusOK } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import React from 'react';
-import {
-  DEGRADED,
-  MAJOR_OUTAGE,
-  OPERATIONAL,
-  PARTIAL_OUTAGE,
-  StatusPage,
-  UNDER_MAINTENANCE,
-} from '../../types';
-
-const useStyles = makeStyles({
-  denseListIcon: {
-    marginRight: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export const statusPageStatusLabels = {
-  [OPERATIONAL]: 'Operational',
-  [UNDER_MAINTENANCE]: 'Under maintenance',
-  [DEGRADED]: 'Degraded',
-  [PARTIAL_OUTAGE]: 'Partial outage',
-  [MAJOR_OUTAGE]: 'Major outage',
-} as Record<string, string>;
-
-export const StatusPageStatus = ({
-  statusPage,
-}: {
-  statusPage: StatusPage;
-}) => {
-  const classes = useStyles();
-
-  return (
-    <Tooltip title={statusPage.status} placement="top">
-      <div className={classes.denseListIcon}>
-        {statusPage.status === 'OPERATIONAL' ? <StatusError /> : <StatusOK />}
-      </div>
-    </Tooltip>
-  );
-};

plugins/ilert/src/components/StatusPage/StatusPageURL.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { ilertApiRef } from '../../api';
 import { StatusPage } from '../../types';
@@ -21,19 +20,12 @@ import { StatusPage } from '../../types';
 import { Link } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles({
-  link: {
-    lineHeight: '22px',
-  },
-});
-
 export const StatusPageURL = ({
   statusPage,
 }: {
   statusPage: StatusPage | null;
 }) => {
   const ilertApi = useApi(ilertApiRef);
-  const classes = useStyles();
 
   if (!statusPage) {
     return null;
@@ -41,9 +33,5 @@ export const StatusPageURL = ({
 
   const url = ilertApi.getStatusPageURL(statusPage);
 
-  return (
-    <Link className={classes.link} to={`https://${url}`}>
-      {url}
-    </Link>
-  );
+  return <Link to={`https://${url}`}>{url}</Link>;
 };

plugins/ilert/src/components/StatusPage/StatusPageVisibility.tsx

@@ -1,51 +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 { StatusError, StatusOK } from '@backstage/core-components';
-import { makeStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import React from 'react';
-import { PRIVATE, PUBLIC, StatusPage } from '../../types';
-
-const useStyles = makeStyles({
-  denseListIcon: {
-    marginRight: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export const statusPageVisibilityLabels = {
-  [PUBLIC]: 'Public',
-  [PRIVATE]: 'Private',
-} as Record<string, string>;
-
-export const StatusPageVisibility = ({
-  statusPage,
-}: {
-  statusPage: StatusPage;
-}) => {
-  const classes = useStyles();
-
-  return (
-    <Tooltip title={statusPage.visibility} placement="top">
-      <div className={classes.denseListIcon}>
-        {statusPage.visibility === 'PUBLIC' ? <StatusError /> : <StatusOK />}
-      </div>
-    </Tooltip>
-  );
-};

plugins/ilert/src/components/StatusPage/index.ts

@@ -14,4 +14,3 @@
  * limitations under the License.
  */
 export * from './StatusPageActionsMenu';
-export * from './StatusPageStatus';

plugins/ilert/src/components/StatusPagePage/StatusChip.tsx

@@ -23,7 +23,6 @@ import {
   StatusPage,
   UNDER_MAINTENANCE,
 } from '../../types';
-import { statusPageStatusLabels } from '../StatusPage/StatusPageStatus';
 
 const OperationalChip = withStyles({
   root: {
@@ -62,6 +61,14 @@ const MajorOutageChip = withStyles({
   },
 })(Chip);
 
+const statusPageStatusLabels = {
+  [OPERATIONAL]: 'Operational',
+  [UNDER_MAINTENANCE]: 'Under maintenance',
+  [DEGRADED]: 'Degraded',
+  [PARTIAL_OUTAGE]: 'Partial outage',
+  [MAJOR_OUTAGE]: 'Major outage',
+} as Record<string, string>;
+
 export const StatusChip = ({ statusPage }: { statusPage: StatusPage }) => {
   const label = `${statusPageStatusLabels[statusPage.status]}`;
 

plugins/ilert/src/components/StatusPagePage/StatusPagesPage.tsx

@@ -19,7 +19,6 @@ import {
   ResponseErrorPanel,
   SupportButton,
 } from '@backstage/core-components';
-import { AuthenticationError } from '@backstage/errors';
 import React from 'react';
 import { useStatusPages } from '../../hooks/useStatusPages';
 import { MissingAuthorizationHeaderError } from '../Errors';
@@ -32,7 +31,7 @@ export const StatusPagesPage = () => {
   ] = useStatusPages(true);
 
   if (error) {
-    if (error instanceof AuthenticationError) {
+    if (error.name === 'AuthenticationError') {
       return (
         <Content>
           <MissingAuthorizationHeaderError />

plugins/ilert/src/components/StatusPagePage/StatusPagesTable.tsx

@@ -52,74 +52,60 @@ export const StatusPagesTable = ({
 }) => {
   const classes = useStyles();
 
-  // 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 xlColumnStyle = {
     width: '30%',
     maxWidth: '30%',
   };
 
-  const idColumn: TableColumn = {
+  const idColumn: TableColumn<StatusPage> = {
     title: 'ID',
     field: 'id',
     highlight: true,
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => <StatusPageLink statusPage={rowData as StatusPage} />,
+    render: rowData => <StatusPageLink statusPage={rowData} />,
   };
-  const nameColumn: TableColumn = {
+  const nameColumn: TableColumn<StatusPage> = {
     title: 'Name',
     field: 'name',
     cellStyle: !compact ? xlColumnStyle : undefined,
     headerStyle: !compact ? xlColumnStyle : undefined,
-    render: rowData => <Typography>{(rowData as StatusPage).name}</Typography>,
+    render: rowData => <Typography>{rowData.name}</Typography>,
   };
-  const urlColumn: TableColumn = {
+  const urlColumn: TableColumn<StatusPage> = {
     title: 'URL',
     field: 'url',
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => <StatusPageURL statusPage={rowData as StatusPage} />,
+    render: rowData => <StatusPageURL statusPage={rowData} />,
   };
-  const visibilityColumn: TableColumn = {
+  const visibilityColumn: TableColumn<StatusPage> = {
     title: 'Visibility',
     field: 'visibility',
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => <VisibilityChip statusPage={rowData as StatusPage} />,
+    render: rowData => <VisibilityChip statusPage={rowData} />,
   };
-  const statusColumn: TableColumn = {
+  const statusColumn: TableColumn<StatusPage> = {
     title: 'Status',
     field: 'status',
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => <StatusChip statusPage={rowData as StatusPage} />,
+    render: rowData => <StatusChip statusPage={rowData} />,
   };
-  const actionsColumn: TableColumn = {
+  const actionsColumn: TableColumn<StatusPage> = {
     title: '',
     field: '',
     cellStyle: smColumnStyle,
     headerStyle: smColumnStyle,
-    render: rowData => (
-      <StatusPageActionsMenu statusPage={rowData as StatusPage} />
-    ),
+    render: rowData => <StatusPageActionsMenu statusPage={rowData} />,
   };
 
-  const columns: TableColumn[] = compact
+  const columns: TableColumn<StatusPage>[] = compact
     ? [nameColumn, statusColumn, urlColumn, actionsColumn]
     : [
         idColumn,
@@ -129,26 +115,9 @@ export const StatusPagesTable = ({
         visibilityColumn,
         actionsColumn,
       ];
-  let tableStyle: React.CSSProperties = {};
-  if (compact) {
-    tableStyle = {
-      width: '100%',
-      maxWidth: '100%',
-      minWidth: '0',
-      height: 'calc(100% - 10px)',
-      boxShadow: 'none !important',
-      borderRadius: 'none !important',
-    };
-  } else {
-    tableStyle = {
-      width: '100%',
-      maxWidth: '100%',
-    };
-  }
 
   return (
     <Table
-      style={tableStyle}
       options={{
         sorting: false,
         search: !compact,
@@ -175,7 +144,6 @@ export const StatusPagesTable = ({
       page={tableState.page}
       onPageChange={onChangePage}
       onRowsPerPageChange={onChangeRowsPerPage}
-      // localization={{ header: { actions: undefined } }}
       columns={columns}
       data={statusPages}
       isLoading={isLoading}

plugins/ilert/src/components/StatusPagePage/VisibilityChip.tsx

@@ -16,7 +16,6 @@
 import { Chip, withStyles } from '@material-ui/core';
 import React from 'react';
 import { PRIVATE, PUBLIC, StatusPage } from '../../types';
-import { statusPageVisibilityLabels } from '../StatusPage/StatusPageVisibility';
 
 const PrivateChip = withStyles({
   root: {
@@ -34,6 +33,11 @@ const PublicChip = withStyles({
   },
 })(Chip);
 
+const statusPageVisibilityLabels = {
+  [PUBLIC]: 'Public',
+  [PRIVATE]: 'Private',
+} as Record<string, string>;
+
 export const VisibilityChip = ({ statusPage }: { statusPage: StatusPage }) => {
   const label = `${statusPageVisibilityLabels[statusPage.visibility]}`;