From 444a188d95ea196c9781f3a5f54f04ce97b1e10d Mon Sep 17 00:00:00 2001 From: Isaiah Thiessen Date: Thu, 11 Aug 2022 14:43:37 -0700 Subject: [PATCH] fix: use @backstage/core-components, address PR feedback from @freben Signed-off-by: Isaiah Thiessen --- plugins/dynatrace/src/api/DynatraceClient.ts | 12 +++-- .../components/DynatraceTab/DynatraceTab.tsx | 18 +++++--- .../src/components/EmptyState/EmptyState.tsx | 46 ------------------- .../src/components/EmptyState/index.ts | 17 ------- .../Problems/ProblemsList/ProblemsList.tsx | 12 +++-- .../Problems/ProblemsTable/ProblemsTable.tsx | 11 +++-- .../SyntheticsCard/SyntheticsCard.tsx | 7 ++- .../SyntheticsLocation/SyntheticsLocation.tsx | 7 ++- plugins/dynatrace/src/constants.ts | 3 +- plugins/dynatrace/src/plugin.ts | 8 +++- 10 files changed, 46 insertions(+), 95 deletions(-) delete mode 100644 plugins/dynatrace/src/components/EmptyState/EmptyState.tsx delete mode 100644 plugins/dynatrace/src/components/EmptyState/index.ts diff --git a/plugins/dynatrace/src/api/DynatraceClient.ts b/plugins/dynatrace/src/api/DynatraceClient.ts index 1aabd3fb6d..a31253bcb5 100644 --- a/plugins/dynatrace/src/api/DynatraceClient.ts +++ b/plugins/dynatrace/src/api/DynatraceClient.ts @@ -64,7 +64,10 @@ export class DynatraceClient implements DynatraceApi { throw new Error('Dynatrace syntheticId is required'); } - return this.callApi(`synthetic/execution/${syntheticsId}/FAILED`, {}); + return this.callApi( + `synthetic/execution/${encodeURIComponent(syntheticsId)}/FAILED`, + {}, + ); } async getDynatraceSyntheticLocationInfo( @@ -74,14 +77,17 @@ export class DynatraceClient implements DynatraceApi { throw new Error('Dynatrace syntheticLocationId is required'); } - return this.callApi(`synthetic/locations/${syntheticLocationId}`, {}); + return this.callApi( + `synthetic/locations/${encodeURIComponent(syntheticLocationId)}`, + {}, + ); } async getDynatraceProblems( dynatraceEntityId: string, ): Promise { if (!dynatraceEntityId) { - throw new Error('Dynatrace entity Id is required'); + throw new Error('Dynatrace entity id is required'); } return this.callApi('problems', { diff --git a/plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx b/plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx index 3e137f4109..59886a121d 100644 --- a/plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx +++ b/plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx @@ -50,14 +50,18 @@ export const DynatraceTab = () => { - - - + {dynatraceEntityId ? ( + + + + ) : ( + '' + )} {syntheticsIds - .replace(' ', '') + ?.replace(' ', '') .split(',') .map(id => { return ( diff --git a/plugins/dynatrace/src/components/EmptyState/EmptyState.tsx b/plugins/dynatrace/src/components/EmptyState/EmptyState.tsx deleted file mode 100644 index 87d0099499..0000000000 --- a/plugins/dynatrace/src/components/EmptyState/EmptyState.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright 2022 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 React from 'react'; -import { Grid, Typography } from '@material-ui/core'; -import EmptyStateImage from '../../assets/emptystate.svg'; - -type EmptyStateProps = { - message: string; -}; - -export const EmptyState = (props: EmptyStateProps) => { - const { message } = props; - return ( - - - {message} - - - EmptyState - - - ); -}; diff --git a/plugins/dynatrace/src/components/EmptyState/index.ts b/plugins/dynatrace/src/components/EmptyState/index.ts deleted file mode 100644 index 0037560be4..0000000000 --- a/plugins/dynatrace/src/components/EmptyState/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright 2022 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. - */ - -export { EmptyState } from './EmptyState'; diff --git a/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx b/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx index ef6a2ed173..8fb3f67934 100644 --- a/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx +++ b/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx @@ -15,12 +15,14 @@ */ import React from 'react'; import useAsync from 'react-use/lib/useAsync'; -import { Progress } from '@backstage/core-components'; -import Alert from '@material-ui/lab/Alert'; +import { + Progress, + ResponseErrorPanel, + EmptyState, +} from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; import { ProblemsTable } from '../ProblemsTable'; import { dynatraceApiRef, DynatraceProblem } from '../../../api'; -import { EmptyState } from '../../EmptyState'; import { InfoCard } from '@backstage/core-components'; type ProblemsListProps = { @@ -38,7 +40,7 @@ const cardContents = ( dynatraceBaseUrl={dynatraceBaseUrl} /> ) : ( - + ); }; @@ -53,7 +55,7 @@ export const ProblemsList = (props: ProblemsListProps) => { if (loading) { return ; } else if (error) { - return {error.message}; + return ; } return ( { + return timestamp ? new Date(timestamp).toLocaleString() : 'N/A'; +}; + export const ProblemsTable = (props: ProblemsTableProps) => { const { problems, dynatraceBaseUrl } = props; const columns: TableColumn[] = [ @@ -60,16 +64,13 @@ export const ProblemsTable = (props: ProblemsTableProps) => { { title: 'Start Time', field: 'startTime', - render: (row: Partial) => - new Date(row.startTime || 0).toLocaleString(), + render: (row: Partial) => parseTimestamp(row.startTime), }, { title: 'End Time', field: 'endTime', render: (row: Partial) => - row.endTime === -1 - ? 'ongoing' - : new Date(row.endTime || 0).toLocaleString(), + row.endTime === -1 ? 'ongoing' : parseTimestamp(row.endTime), }, ]; diff --git a/plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx b/plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx index 1b73e51313..531d7ef72f 100644 --- a/plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx +++ b/plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx @@ -15,8 +15,7 @@ */ import React from 'react'; import useAsync from 'react-use/lib/useAsync'; -import { Progress } from '@backstage/core-components'; -import Alert from '@material-ui/lab/Alert'; +import { Progress, ResponseErrorPanel } from '@backstage/core-components'; import { InfoCard } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; import { dynatraceApiRef } from '../../../api'; @@ -50,11 +49,11 @@ export const SyntheticsCard = (props: SyntheticsCardProps) => { if (loading) { return ; } else if (error) { - return {error.message}; + return ; } const deepLinkPrefix = dynatraceMonitorPrefixes( - `${syntheticsId.match(/(.+)-/)![1]}`, + `${syntheticsId.split('-')[0]}`, ); const lastFailed = value?.locationsExecutionResults.map(l => { diff --git a/plugins/dynatrace/src/components/Synthetics/SyntheticsLocation/SyntheticsLocation.tsx b/plugins/dynatrace/src/components/Synthetics/SyntheticsLocation/SyntheticsLocation.tsx index e72995158c..4d328210cb 100644 --- a/plugins/dynatrace/src/components/Synthetics/SyntheticsLocation/SyntheticsLocation.tsx +++ b/plugins/dynatrace/src/components/Synthetics/SyntheticsLocation/SyntheticsLocation.tsx @@ -16,8 +16,7 @@ import React from 'react'; import useAsync from 'react-use/lib/useAsync'; -import { Progress } from '@backstage/core-components'; -import Alert from '@material-ui/lab/Alert'; +import { Progress, ResponseErrorPanel } from '@backstage/core-components'; import { useApi } from '@backstage/core-plugin-api'; import { Chip } from '@material-ui/core'; import { dynatraceApiRef } from '../../../api'; @@ -28,7 +27,7 @@ type SyntheticsLocationProps = { key: string; }; -const failedInLastXHours = (timestamp: Date, offset: number): Boolean => { +const failedInLastXHours = (timestamp: Date, offset: number): boolean => { if (offset < 0 || offset > 24) throw new Error('offset must be between 0 and 24'); return timestamp > new Date(new Date().getTime() - 1000 * 60 * 60 * offset); @@ -59,7 +58,7 @@ export const SyntheticsLocation = (props: SyntheticsLocationProps) => { if (loading) { return ; } else if (error) { - return {error.message}; + return ; } return ( diff --git a/plugins/dynatrace/src/constants.ts b/plugins/dynatrace/src/constants.ts index 8f504db1f4..c4cc48d48a 100644 --- a/plugins/dynatrace/src/constants.ts +++ b/plugins/dynatrace/src/constants.ts @@ -14,5 +14,4 @@ * limitations under the License. */ export const DYNATRACE_ID_ANNOTATION = 'dynatrace.com/dynatrace-entity-id'; -export const DYNATRACE_SYNTHETICS_ANNOTATION = - 'dynatrace.com/dynatrace-synthetics-ids'; +export const DYNATRACE_SYNTHETICS_ANNOTATION = 'dynatrace.com/synthetics-ids'; diff --git a/plugins/dynatrace/src/plugin.ts b/plugins/dynatrace/src/plugin.ts index fc1778b45c..26ecb1aba1 100644 --- a/plugins/dynatrace/src/plugin.ts +++ b/plugins/dynatrace/src/plugin.ts @@ -23,7 +23,10 @@ import { } from '@backstage/core-plugin-api'; import { Entity } from '@backstage/catalog-model'; -import { DYNATRACE_ID_ANNOTATION } from './constants'; +import { + DYNATRACE_ID_ANNOTATION, + DYNATRACE_SYNTHETICS_ANNOTATION, +} from './constants'; import { rootRouteRef } from './routes'; @@ -55,7 +58,8 @@ export const dynatracePlugin = createPlugin({ * @param entity {Entity} - The entity to check for the dynatrace id annotation. */ export const isDynatraceAvailable = (entity: Entity) => - Boolean(entity.metadata.annotations?.[DYNATRACE_ID_ANNOTATION]); + Boolean(entity.metadata.annotations?.[DYNATRACE_ID_ANNOTATION]) || + Boolean(entity.metadata.annotations?.[DYNATRACE_SYNTHETICS_ANNOTATION]); /** * Creates a routable extension for the dynatrace plugin tab.