paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 43 Packages Projects Releases Wiki Activity

fix: use @backstage/core-components, address PR feedback from @freben

Browse Source 
Signed-off-by: Isaiah Thiessen <isaiah.thiessen@telus.com>
This commit is contained in:
Isaiah Thiessen
2022-08-11 14:43:37 -07:00
parent 9d6d2530c1
commit 444a188d95
10 changed files with 46 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/dynatrace/src/api/DynatraceClient.ts
+9 -3
View File
@@ -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<DynatraceProblems | undefined> {
if (!dynatraceEntityId) {
throw new Error('Dynatrace entity Id is required');
throw new Error('Dynatrace entity id is required');
}
return this.callApi('problems', {
plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx
+11 -7
View File
@@ -50,14 +50,18 @@ export const DynatraceTab = () => {
<Page themeId="tool">
<Content>
<Grid container spacing={2}>
<Grid item xs={12} lg={12}>
<ProblemsList
dynatraceEntityId={dynatraceEntityId}
dynatraceBaseUrl={dynatraceBaseUrl}
/>
</Grid>
{dynatraceEntityId ? (
<Grid item xs={12} lg={12}>
<ProblemsList
dynatraceEntityId={dynatraceEntityId}
dynatraceBaseUrl={dynatraceBaseUrl}
/>
</Grid>
) : (
''
)}
{syntheticsIds
.replace(' ', '')
?.replace(' ', '')
.split(',')
.map(id => {
return (
plugins/dynatrace/src/components/EmptyState/EmptyState.tsx
-46
View File
@@ -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 (
<Grid
container
justifyContent="space-around"
direction="row"
alignItems="center"
spacing={2}
>
<Grid item xs={4}>
<Typography variant="h5">{message}</Typography>
</Grid>
<Grid item xs={4}>
<img
src={EmptyStateImage}
alt="EmptyState"
data-testid="emptyStateImg"
/>
</Grid>
</Grid>
);
};
plugins/dynatrace/src/components/EmptyState/index.ts
-17
View File
@@ -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';
plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
+7 -5
View File
@@ -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}
/>
) : (
<EmptyState message="No Problems to Report!" />
<EmptyState title="No Problems to Report!" missing="data" />
);
};
@@ -53,7 +55,7 @@ export const ProblemsList = (props: ProblemsListProps) => {
if (loading) {
return <Progress />;
} else if (error) {
return <Alert severity="error">{error.message}</Alert>;
return <ResponseErrorPanel error={error} />;
}
return (
<InfoCard
plugins/dynatrace/src/components/Problems/ProblemsTable/ProblemsTable.tsx
+6 -5
View File
@@ -24,6 +24,10 @@ type ProblemsTableProps = {
dynatraceBaseUrl: string;
};
const parseTimestamp = (timestamp: number | undefined) => {
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<DynatraceProblem>) =>
new Date(row.startTime || 0).toLocaleString(),
render: (row: Partial<DynatraceProblem>) => parseTimestamp(row.startTime),
},
{
title: 'End Time',
field: 'endTime',
render: (row: Partial<DynatraceProblem>) =>
row.endTime === -1
? 'ongoing'
: new Date(row.endTime || 0).toLocaleString(),
row.endTime === -1 ? 'ongoing' : parseTimestamp(row.endTime),
},
];
plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx
+3 -4
View File
@@ -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 <Progress />;
} else if (error) {
return <Alert severity="error">{error.message}</Alert>;
return <ResponseErrorPanel error={error} />;
}
const deepLinkPrefix = dynatraceMonitorPrefixes(
`${syntheticsId.match(/(.+)-/)![1]}`,
`${syntheticsId.split('-')[0]}`,
);
const lastFailed = value?.locationsExecutionResults.map(l => {
plugins/dynatrace/src/components/Synthetics/SyntheticsLocation/SyntheticsLocation.tsx
+3 -4
View File
@@ -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 <Progress />;
} else if (error) {
return <Alert severity="error">{error.message}</Alert>;
return <ResponseErrorPanel error={error} />;
}
return (
plugins/dynatrace/src/constants.ts
+1 -2
View File
@@ -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';
plugins/dynatrace/src/plugin.ts
+6 -2
View File
@@ -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.