From 0b89ebf6adab805d72a55244be44f13f340381dd Mon Sep 17 00:00:00 2001 From: Marko Simon Date: Thu, 20 Oct 2022 15:53:44 +0200 Subject: [PATCH] refactor code remove unnecessary code/components remove unnecessary styling Signed-off-by: Marko Simon --- plugins/ilert/api-report.md | 9 --- plugins/ilert/src/api/client.ts | 15 ----- plugins/ilert/src/api/index.ts | 1 - plugins/ilert/src/api/types.ts | 6 -- .../ilert/src/components/Alert/AlertLink.tsx | 14 +---- .../src/components/Alert/AlertStatus.tsx | 48 -------------- plugins/ilert/src/components/Alert/index.ts | 1 - .../src/components/AlertsPage/AlertsPage.tsx | 3 +- .../src/components/AlertsPage/AlertsTable.tsx | 63 ++++++------------- .../src/components/AlertsPage/StatusChip.tsx | 7 ++- .../src/components/AlertsPage/TableTitle.tsx | 2 +- .../OnCallSchedulesPage/OnCallShiftItem.tsx | 5 +- .../src/components/Service/ServiceLink.tsx | 14 +---- .../src/components/Service/ServiceStatus.tsx | 57 ----------------- plugins/ilert/src/components/Service/index.ts | 1 - .../components/ServicesPage/ServicesPage.tsx | 3 +- .../components/ServicesPage/ServicesTable.tsx | 55 ++++------------ .../components/ServicesPage/StatusChip.tsx | 9 ++- .../components/StatusPage/StatusPageLink.tsx | 13 +--- .../StatusPage/StatusPageStatus.tsx | 61 ------------------ .../components/StatusPage/StatusPageURL.tsx | 14 +---- .../StatusPage/StatusPageVisibility.tsx | 51 --------------- .../ilert/src/components/StatusPage/index.ts | 1 - .../components/StatusPagePage/StatusChip.tsx | 9 ++- .../StatusPagePage/StatusPagesPage.tsx | 3 +- .../StatusPagePage/StatusPagesTable.tsx | 58 ++++------------- .../StatusPagePage/VisibilityChip.tsx | 6 +- 27 files changed, 83 insertions(+), 446 deletions(-) delete mode 100644 plugins/ilert/src/components/Alert/AlertStatus.tsx delete mode 100644 plugins/ilert/src/components/Service/ServiceStatus.tsx delete mode 100644 plugins/ilert/src/components/StatusPage/StatusPageStatus.tsx delete mode 100644 plugins/ilert/src/components/StatusPage/StatusPageVisibility.tsx diff --git a/plugins/ilert/api-report.md b/plugins/ilert/api-report.md index c1de4f796b..51e2020dee 100644 --- a/plugins/ilert/api-report.md +++ b/plugins/ilert/api-report.md @@ -380,8 +380,6 @@ export interface ILertApi { // (undocumented) createAlert(eventRequest: EventRequest): Promise; // (undocumented) - createService(serviceRequest: ServiceRequest): Promise; - // (undocumented) disableAlertSource(alertSource: AlertSource): Promise; // (undocumented) enableAlertSource(alertSource: AlertSource): Promise; @@ -475,8 +473,6 @@ export class ILertClient implements ILertApi { // (undocumented) createAlert(eventRequest: EventRequest): Promise; // (undocumented) - createService(serviceRequest: ServiceRequest): Promise; - // (undocumented) disableAlertSource(alertSource: AlertSource): Promise; // (undocumented) enableAlertSource(alertSource: AlertSource): Promise; @@ -709,11 +705,6 @@ export interface Service { uptime: Uptime; } -// @public (undocumented) -export type ServiceRequest = { - name: string; -}; - // @public (undocumented) export type ServiceStatus = | typeof OPERATIONAL diff --git a/plugins/ilert/src/api/client.ts b/plugins/ilert/src/api/client.ts index 69b0a171f9..bc438786c7 100644 --- a/plugins/ilert/src/api/client.ts +++ b/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 { - 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 { const init = { headers: JSON_HEADERS, diff --git a/plugins/ilert/src/api/index.ts b/plugins/ilert/src/api/index.ts index 15d2981c20..30120225a4 100644 --- a/plugins/ilert/src/api/index.ts +++ b/plugins/ilert/src/api/index.ts @@ -22,6 +22,5 @@ export type { GetServicesOpts, GetStatusPagesOpts, ILertApi, - ServiceRequest as ServiceRequest, TableState, } from './types'; diff --git a/plugins/ilert/src/api/types.ts b/plugins/ilert/src/api/types.ts index 6d38d48023..6cbea48c5d 100644 --- a/plugins/ilert/src/api/types.ts +++ b/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; @@ -114,7 +109,6 @@ export interface ILertApi { ): Promise; fetchServices(opts?: GetServicesOpts): Promise; - createService(serviceRequest: ServiceRequest): Promise; fetchStatusPages(opts?: GetStatusPagesOpts): Promise; diff --git a/plugins/ilert/src/components/Alert/AlertLink.tsx b/plugins/ilert/src/components/Alert/AlertLink.tsx index 8c526899aa..4382d6608b 100644 --- a/plugins/ilert/src/components/Alert/AlertLink.tsx +++ b/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 ( - - #{alert.id} - - ); + return #{alert.id}; }; diff --git a/plugins/ilert/src/components/Alert/AlertStatus.tsx b/plugins/ilert/src/components/Alert/AlertStatus.tsx deleted file mode 100644 index 9be81205dd..0000000000 --- a/plugins/ilert/src/components/Alert/AlertStatus.tsx +++ /dev/null @@ -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; - -export const AlertStatus = ({ alert }: { alert: Alert }) => { - const classes = useStyles(); - - return ( - -
- {alert.status === 'PENDING' ? : } -
- - ); -}; diff --git a/plugins/ilert/src/components/Alert/index.ts b/plugins/ilert/src/components/Alert/index.ts index a569777b21..265fa23f81 100644 --- a/plugins/ilert/src/components/Alert/index.ts +++ b/plugins/ilert/src/components/Alert/index.ts @@ -14,4 +14,3 @@ * limitations under the License. */ export * from './AlertActionsMenu'; -export * from './AlertStatus'; diff --git a/plugins/ilert/src/components/AlertsPage/AlertsPage.tsx b/plugins/ilert/src/components/AlertsPage/AlertsPage.tsx index c7df9101a5..053b5a4267 100644 --- a/plugins/ilert/src/components/AlertsPage/AlertsPage.tsx +++ b/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 ( diff --git a/plugins/ilert/src/components/AlertsPage/AlertsTable.tsx b/plugins/ilert/src/components/AlertsPage/AlertsTable.tsx index 38ef4f07b1..12f1566276 100644 --- a/plugins/ilert/src/components/AlertsPage/AlertsTable.tsx +++ b/plugins/ilert/src/components/AlertsPage/AlertsTable.tsx @@ -86,31 +86,29 @@ export const AlertsTable = ({ maxWidth: '30%', }; - const idColumn: TableColumn = { + const idColumn: TableColumn = { title: 'ID', field: 'id', highlight: true, cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => , + render: rowData => , }; - const summaryColumn: TableColumn = { + const summaryColumn: TableColumn = { title: 'Summary', field: 'summary', cellStyle: !compact ? xlColumnStyle : undefined, headerStyle: !compact ? xlColumnStyle : undefined, - render: rowData => {(rowData as Alert).summary}, + render: rowData => {rowData.summary}, }; - const sourceColumn: TableColumn = { + const sourceColumn: TableColumn = { title: 'Source', field: 'source', cellStyle: mdColumnStyle, headerStyle: mdColumnStyle, - render: rowData => ( - - ), + render: rowData => , }; - const durationColumn: TableColumn = { + const durationColumn: TableColumn = { title: 'Duration', field: 'reportTime', type: 'datetime', @@ -118,20 +116,17 @@ export const AlertsTable = ({ headerStyle: smColumnStyle, render: rowData => ( - {(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 = ({ ), }; - const respondersColumn: TableColumn = { + const respondersColumn: TableColumn = { title: 'Responders', field: 'responders', cellStyle: !compact ? mdColumnStyle : lgColumnStyle, headerStyle: !compact ? mdColumnStyle : lgColumnStyle, render: rowData => ( - {(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 = ({ ), }; - const priorityColumn: TableColumn = { + const priorityColumn: TableColumn = { title: 'Priority', field: 'priority', cellStyle: smColumnStyle, headerStyle: smColumnStyle, render: rowData => ( - {(rowData as Alert).priority === 'HIGH' ? 'High' : 'Low'} + {rowData.priority === 'HIGH' ? 'High' : 'Low'} ), }; - const statusColumn: TableColumn = { + const statusColumn: TableColumn = { title: 'Status', field: 'status', cellStyle: xsColumnStyle, headerStyle: xsColumnStyle, - render: rowData => , + render: rowData => , }; - const actionsColumn: TableColumn = { + const actionsColumn: TableColumn = { title: '', field: '', cellStyle: xsColumnStyle, headerStyle: xsColumnStyle, render: rowData => ( ), }; - const columns: TableColumn[] = compact + const columns: TableColumn[] = 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 ( ; + export const StatusChip = ({ alert }: { alert: Alert }) => { const label = `${alertStatusLabels[alert.status]}`; diff --git a/plugins/ilert/src/components/AlertsPage/TableTitle.tsx b/plugins/ilert/src/components/AlertsPage/TableTitle.tsx index c610e91d94..9aab95c6f3 100644 --- a/plugins/ilert/src/components/AlertsPage/TableTitle.tsx +++ b/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; diff --git a/plugins/ilert/src/components/OnCallSchedulesPage/OnCallShiftItem.tsx b/plugins/ilert/src/components/OnCallSchedulesPage/OnCallShiftItem.tsx index f9c28430d8..8ef5a990ec 100644 --- a/plugins/ilert/src/components/OnCallSchedulesPage/OnCallShiftItem.tsx +++ b/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 ? ( - {`${shift.user.firstName} ${shift.user.lastName}`} + {ilertApi.getUserInitials(shift.user)} ) : null} diff --git a/plugins/ilert/src/components/Service/ServiceLink.tsx b/plugins/ilert/src/components/Service/ServiceLink.tsx index f8b1e88531..8e7868a2d2 100644 --- a/plugins/ilert/src/components/Service/ServiceLink.tsx +++ b/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 ( - - #{service.id} - - ); + return #{service.id}; }; diff --git a/plugins/ilert/src/components/Service/ServiceStatus.tsx b/plugins/ilert/src/components/Service/ServiceStatus.tsx deleted file mode 100644 index 05923058aa..0000000000 --- a/plugins/ilert/src/components/Service/ServiceStatus.tsx +++ /dev/null @@ -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; - -export const ServiceStatus = ({ service }: { service: Service }) => { - const classes = useStyles(); - - return ( - -
- {service.status === 'OPERATIONAL' ? : } -
- - ); -}; diff --git a/plugins/ilert/src/components/Service/index.ts b/plugins/ilert/src/components/Service/index.ts index 5227f44573..11b2148046 100644 --- a/plugins/ilert/src/components/Service/index.ts +++ b/plugins/ilert/src/components/Service/index.ts @@ -14,4 +14,3 @@ * limitations under the License. */ export * from './ServiceActionsMenu'; -export * from './ServiceStatus'; diff --git a/plugins/ilert/src/components/ServicesPage/ServicesPage.tsx b/plugins/ilert/src/components/ServicesPage/ServicesPage.tsx index e3afd4cc1a..0e012b07a2 100644 --- a/plugins/ilert/src/components/ServicesPage/ServicesPage.tsx +++ b/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 ( diff --git a/plugins/ilert/src/components/ServicesPage/ServicesTable.tsx b/plugins/ilert/src/components/ServicesPage/ServicesTable.tsx index 4ed1d581ae..30a83e4cec 100644 --- a/plugins/ilert/src/components/ServicesPage/ServicesTable.tsx +++ b/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 = { title: 'ID', field: 'id', highlight: true, cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => , + render: rowData => , }; - const nameColumn: TableColumn = { + const nameColumn: TableColumn = { title: 'Name', field: 'name', cellStyle: !compact ? xlColumnStyle : undefined, headerStyle: !compact ? xlColumnStyle : undefined, - render: rowData => {(rowData as Service).name}, + render: rowData => {rowData.name}, }; - const statusColumn: TableColumn = { + const statusColumn: TableColumn = { title: 'Status', field: 'status', cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => , + render: rowData => , }; - const uptimeColumn: TableColumn = { + const uptimeColumn: TableColumn = { title: 'Uptime in the last 90 days', field: 'uptimePercentage', cellStyle: smColumnStyle, headerStyle: smColumnStyle, render: rowData => ( - - {(rowData as Service).uptime.uptimePercentage.p90} - + {rowData.uptime.uptimePercentage.p90} ), }; - const actionsColumn: TableColumn = { + const actionsColumn: TableColumn = { title: '', field: '', cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => , + render: rowData => , }; - const columns: TableColumn[] = compact + const columns: TableColumn[] = 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 (
; + export const StatusChip = ({ service }: { service: Service }) => { const label = `${serviceStatusLabels[service.status]}`; diff --git a/plugins/ilert/src/components/StatusPage/StatusPageLink.tsx b/plugins/ilert/src/components/StatusPage/StatusPageLink.tsx index 60daddf9df..edc6922e0d 100644 --- a/plugins/ilert/src/components/StatusPage/StatusPageLink.tsx +++ b/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 ( - + #{statusPage.id} ); diff --git a/plugins/ilert/src/components/StatusPage/StatusPageStatus.tsx b/plugins/ilert/src/components/StatusPage/StatusPageStatus.tsx deleted file mode 100644 index b40db5d8f3..0000000000 --- a/plugins/ilert/src/components/StatusPage/StatusPageStatus.tsx +++ /dev/null @@ -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; - -export const StatusPageStatus = ({ - statusPage, -}: { - statusPage: StatusPage; -}) => { - const classes = useStyles(); - - return ( - -
- {statusPage.status === 'OPERATIONAL' ? : } -
- - ); -}; diff --git a/plugins/ilert/src/components/StatusPage/StatusPageURL.tsx b/plugins/ilert/src/components/StatusPage/StatusPageURL.tsx index b94903333a..1aaf209770 100644 --- a/plugins/ilert/src/components/StatusPage/StatusPageURL.tsx +++ b/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 ( - - {url} - - ); + return {url}; }; diff --git a/plugins/ilert/src/components/StatusPage/StatusPageVisibility.tsx b/plugins/ilert/src/components/StatusPage/StatusPageVisibility.tsx deleted file mode 100644 index 7c8f63dd35..0000000000 --- a/plugins/ilert/src/components/StatusPage/StatusPageVisibility.tsx +++ /dev/null @@ -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; - -export const StatusPageVisibility = ({ - statusPage, -}: { - statusPage: StatusPage; -}) => { - const classes = useStyles(); - - return ( - -
- {statusPage.visibility === 'PUBLIC' ? : } -
- - ); -}; diff --git a/plugins/ilert/src/components/StatusPage/index.ts b/plugins/ilert/src/components/StatusPage/index.ts index 93ea9deaba..d805811d90 100644 --- a/plugins/ilert/src/components/StatusPage/index.ts +++ b/plugins/ilert/src/components/StatusPage/index.ts @@ -14,4 +14,3 @@ * limitations under the License. */ export * from './StatusPageActionsMenu'; -export * from './StatusPageStatus'; diff --git a/plugins/ilert/src/components/StatusPagePage/StatusChip.tsx b/plugins/ilert/src/components/StatusPagePage/StatusChip.tsx index 50a64de212..5cd785c4cd 100644 --- a/plugins/ilert/src/components/StatusPagePage/StatusChip.tsx +++ b/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; + export const StatusChip = ({ statusPage }: { statusPage: StatusPage }) => { const label = `${statusPageStatusLabels[statusPage.status]}`; diff --git a/plugins/ilert/src/components/StatusPagePage/StatusPagesPage.tsx b/plugins/ilert/src/components/StatusPagePage/StatusPagesPage.tsx index 6e4290c7c9..9d709c5e73 100644 --- a/plugins/ilert/src/components/StatusPagePage/StatusPagesPage.tsx +++ b/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 ( diff --git a/plugins/ilert/src/components/StatusPagePage/StatusPagesTable.tsx b/plugins/ilert/src/components/StatusPagePage/StatusPagesTable.tsx index 8b013fdb35..8e965b42de 100644 --- a/plugins/ilert/src/components/StatusPagePage/StatusPagesTable.tsx +++ b/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 = { title: 'ID', field: 'id', highlight: true, cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => , + render: rowData => , }; - const nameColumn: TableColumn = { + const nameColumn: TableColumn = { title: 'Name', field: 'name', cellStyle: !compact ? xlColumnStyle : undefined, headerStyle: !compact ? xlColumnStyle : undefined, - render: rowData => {(rowData as StatusPage).name}, + render: rowData => {rowData.name}, }; - const urlColumn: TableColumn = { + const urlColumn: TableColumn = { title: 'URL', field: 'url', cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => , + render: rowData => , }; - const visibilityColumn: TableColumn = { + const visibilityColumn: TableColumn = { title: 'Visibility', field: 'visibility', cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => , + render: rowData => , }; - const statusColumn: TableColumn = { + const statusColumn: TableColumn = { title: 'Status', field: 'status', cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => , + render: rowData => , }; - const actionsColumn: TableColumn = { + const actionsColumn: TableColumn = { title: '', field: '', cellStyle: smColumnStyle, headerStyle: smColumnStyle, - render: rowData => ( - - ), + render: rowData => , }; - const columns: TableColumn[] = compact + const columns: TableColumn[] = 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 (
; + export const VisibilityChip = ({ statusPage }: { statusPage: StatusPage }) => { const label = `${statusPageVisibilityLabels[statusPage.visibility]}`;