From 49938595bcc8b54a0074bc8d34a8c8b5b4f94382 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Mon, 30 Nov 2020 18:31:35 +0100 Subject: [PATCH] improve updating incident list, refactor code, update tests, move types, rename types file --- plugins/pagerduty/README.md | 3 ++- plugins/pagerduty/src/api/client.ts | 13 +++++----- plugins/pagerduty/src/api/types.ts | 24 ++++++++++++++++++ .../components/Escalation/EscalationUser.tsx | 4 +-- .../components/Incident/IncidentListItem.tsx | 4 +-- .../components/Incident/Incidents.test.tsx | 6 ++--- .../src/components/Incident/Incidents.tsx | 12 +++------ .../src/components/PagerDutyIcon.tsx | 4 +-- .../src/components/PagerdutyCard.tsx | 16 ++++++------ .../TriggerDialog/TriggerDialog.test.tsx | 14 ++++++----- .../TriggerDialog/TriggerDialog.tsx | 24 +++++++++--------- .../src/components/{types.tsx => types.ts} | 25 ------------------- 12 files changed, 71 insertions(+), 78 deletions(-) rename plugins/pagerduty/src/components/{types.tsx => types.ts} (74%) diff --git a/plugins/pagerduty/README.md b/plugins/pagerduty/README.md index b3e0b9f4e6..7a886627e3 100644 --- a/plugins/pagerduty/README.md +++ b/plugins/pagerduty/README.md @@ -57,7 +57,8 @@ createApiFactory({ deps: { discoveryApi: discoveryApiRef }, factory: ({ discoveryApi }) => new PagerDutyClientApi({ - discoveryApi: discoveryApi + discoveryApi: discoveryApi, + eventUrl: "https://events.pagerduty.com/v2" //to override the default value }), }), ``` diff --git a/plugins/pagerduty/src/api/client.ts b/plugins/pagerduty/src/api/client.ts index 7b453b7298..ab65514466 100644 --- a/plugins/pagerduty/src/api/client.ts +++ b/plugins/pagerduty/src/api/client.ts @@ -15,17 +15,16 @@ */ import { createApiRef } from '@backstage/core'; +import { Service, Incident, OnCall } from '../components/types'; import { - Service, - Incident, - RequestOptions, - ClientApiConfig, + PagerDutyClient, + TriggerAlarmRequest, ServicesResponse, IncidentsResponse, OnCallsResponse, - OnCall, -} from '../components/types'; -import { PagerDutyClient, TriggerAlarmRequest } from './types'; + ClientApiConfig, + RequestOptions, +} from './types'; export class UnauthorizedError extends Error {} diff --git a/plugins/pagerduty/src/api/types.ts b/plugins/pagerduty/src/api/types.ts index 17c2067818..2231cc6991 100644 --- a/plugins/pagerduty/src/api/types.ts +++ b/plugins/pagerduty/src/api/types.ts @@ -15,6 +15,7 @@ */ import { Incident, OnCall, Service } from '../components/types'; +import { DiscoveryApi } from '@backstage/core'; export type TriggerAlarmRequest = { integrationKey: string; @@ -47,3 +48,26 @@ export interface PagerDutyClient { */ triggerAlarm(request: TriggerAlarmRequest): Promise; } + +export type ServicesResponse = { + services: Service[]; +}; + +export type IncidentsResponse = { + incidents: Incident[]; +}; + +export type OnCallsResponse = { + oncalls: OnCall[]; +}; + +export type ClientApiConfig = { + eventsUrl?: string; + discoveryApi: DiscoveryApi; +}; + +export type RequestOptions = { + method: string; + headers: HeadersInit; + body?: BodyInit; +}; diff --git a/plugins/pagerduty/src/components/Escalation/EscalationUser.tsx b/plugins/pagerduty/src/components/Escalation/EscalationUser.tsx index 642c9ecd96..3847896e89 100644 --- a/plugins/pagerduty/src/components/Escalation/EscalationUser.tsx +++ b/plugins/pagerduty/src/components/Escalation/EscalationUser.tsx @@ -27,7 +27,7 @@ import { } from '@material-ui/core'; import Avatar from '@material-ui/core/Avatar'; import EmailIcon from '@material-ui/icons/Email'; -import PagerdutyIcon from '../PagerDutyIcon'; +import { PagerDutyIcon } from '../PagerDutyIcon'; import { User } from '../types'; const useStyles = makeStyles({ @@ -69,7 +69,7 @@ export const EscalationUser = ({ user }: Props) => { rel="noopener noreferrer" color="primary" > - + diff --git a/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx b/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx index 7a97dad281..488631b834 100644 --- a/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx +++ b/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx @@ -29,7 +29,7 @@ import { import { StatusError, StatusWarning } from '@backstage/core'; import moment from 'moment'; import { Incident } from '../types'; -import PagerdutyIcon from '../PagerDutyIcon'; +import { PagerDutyIcon } from '../PagerDutyIcon'; const useStyles = makeStyles({ denseListIcon: { @@ -96,7 +96,7 @@ export const IncidentListItem = ({ incident }: Props) => { rel="noopener noreferrer" color="primary" > - + diff --git a/plugins/pagerduty/src/components/Incident/Incidents.test.tsx b/plugins/pagerduty/src/components/Incident/Incidents.test.tsx index 6baa410021..3eef24cc6a 100644 --- a/plugins/pagerduty/src/components/Incident/Incidents.test.tsx +++ b/plugins/pagerduty/src/components/Incident/Incidents.test.tsx @@ -37,7 +37,7 @@ describe('Incidents', () => { {}} /> , @@ -101,7 +101,7 @@ describe('Incidents', () => { {}} /> , @@ -131,7 +131,7 @@ describe('Incidents', () => { {}} /> , diff --git a/plugins/pagerduty/src/components/Incident/Incidents.tsx b/plugins/pagerduty/src/components/Incident/Incidents.tsx index 1d4ec3a1a6..4b229fb4bc 100644 --- a/plugins/pagerduty/src/components/Incident/Incidents.tsx +++ b/plugins/pagerduty/src/components/Incident/Incidents.tsx @@ -25,27 +25,21 @@ import { Alert } from '@material-ui/lab'; type Props = { serviceId: string; - shouldRefreshIncidents: boolean; - setShouldRefreshIncidents: (shouldRefreshIncidents: boolean) => void; + refreshIncidents: Boolean; }; -export const Incidents = ({ - serviceId, - shouldRefreshIncidents, - setShouldRefreshIncidents, -}: Props) => { +export const Incidents = ({ serviceId, refreshIncidents }: Props) => { const api = useApi(pagerDutyApiRef); const [{ value: incidents, loading, error }, getIncidents] = useAsyncFn( async () => { - setShouldRefreshIncidents(false); return await api.getIncidentsByServiceId(serviceId); }, ); useEffect(() => { getIncidents(); - }, [shouldRefreshIncidents, getIncidents]); + }, [refreshIncidents, getIncidents]); if (error) { return ( diff --git a/plugins/pagerduty/src/components/PagerDutyIcon.tsx b/plugins/pagerduty/src/components/PagerDutyIcon.tsx index 36f6e1989d..67cfc0036a 100644 --- a/plugins/pagerduty/src/components/PagerDutyIcon.tsx +++ b/plugins/pagerduty/src/components/PagerDutyIcon.tsx @@ -17,7 +17,7 @@ import React from 'react'; import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; -const SvgPd = (props: SvgIconProps) => +export const PagerDutyIcon = (props: SvgIconProps) => React.createElement( SvgIcon, props, @@ -25,5 +25,3 @@ const SvgPd = (props: SvgIconProps) => , ); - -export default SvgPd; diff --git a/plugins/pagerduty/src/components/PagerdutyCard.tsx b/plugins/pagerduty/src/components/PagerdutyCard.tsx index 333e042f82..ac309e8a95 100644 --- a/plugins/pagerduty/src/components/PagerdutyCard.tsx +++ b/plugins/pagerduty/src/components/PagerdutyCard.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ import React, { useState } from 'react'; -import { useApi } from '@backstage/core'; +import { useApi, Progress } from '@backstage/core'; import { Entity } from '@backstage/catalog-model'; import { Button, @@ -34,7 +34,6 @@ import { PagerDutyIcon } from './PagerDutyIcon'; import AlarmAddIcon from '@material-ui/icons/AlarmAdd'; import { TriggerDialog } from './TriggerDialog'; import { MissingTokenError } from './MissingTokenError'; -import { Progress } from '@backstage/core'; const useStyles = makeStyles(theme => ({ links: { @@ -72,9 +71,7 @@ export const PagerDutyCard = ({ entity }: Props) => { const classes = useStyles(); const api = useApi(pagerDutyApiRef); const [showDialog, setShowDialog] = useState(false); - const [shouldRefreshIncidents, setShouldRefreshIncidents] = useState( - false, - ); + const [refreshIncidents, setRefreshIncidents] = useState(false); const integrationKey = entity.metadata.annotations![ PAGERDUTY_INTEGRATION_KEY ]; @@ -129,6 +126,10 @@ export const PagerDutyCard = ({ entity }: Props) => { ), }; + const onTriggerRefresh = () => { + setRefreshIncidents(true); + }; + return ( { { handleDialog={handleDialog} name={entity.metadata.name} integrationKey={integrationKey} - setShouldRefreshIncidents={setShouldRefreshIncidents} + onTriggerRefresh={onTriggerRefresh} /> diff --git a/plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.test.tsx b/plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.test.tsx index 440621dcf6..3d2a48b419 100644 --- a/plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.test.tsx +++ b/plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.test.tsx @@ -71,7 +71,7 @@ describe('TriggerDialog', () => { handleDialog={() => {}} name={entity.metadata.name} integrationKey="abc123" - setShouldRefreshIncidents={() => {}} + onTriggerRefresh={() => {}} /> , ), @@ -93,11 +93,13 @@ describe('TriggerDialog', () => { fireEvent.click(triggerButton); }); expect(mockTriggerAlarmFn).toHaveBeenCalled(); - expect(mockTriggerAlarmFn).toHaveBeenCalledWith( - entity!.metadata!.annotations!['pagerduty.com/integration-key'], - window.location.toString(), + expect(mockTriggerAlarmFn).toHaveBeenCalledWith({ + integrationKey: entity!.metadata!.annotations![ + 'pagerduty.com/integration-key' + ], + source: window.location.toString(), description, - 'guest@example.com', - ); + userName: 'guest@example.com', + }); }); }); diff --git a/plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.tsx b/plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.tsx index e6bb6d107d..4717b8fece 100644 --- a/plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.tsx +++ b/plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.tsx @@ -35,7 +35,7 @@ type Props = { integrationKey: string; showDialog: boolean; handleDialog: () => void; - setShouldRefreshIncidents: (shouldRefreshIncidents: boolean) => void; + onTriggerRefresh: () => void; }; export const TriggerDialog = ({ @@ -43,22 +43,22 @@ export const TriggerDialog = ({ integrationKey, showDialog, handleDialog, - setShouldRefreshIncidents, + onTriggerRefresh, }: Props) => { const alertApi = useApi(alertApiRef); const identityApi = useApi(identityApiRef); - const userId = identityApi.getUserId(); + const userName = identityApi.getUserId(); const api = useApi(pagerDutyApiRef); const [description, setDescription] = useState(''); const [{ value, loading, error }, handleTriggerAlarm] = useAsyncFn( - async (desc: string) => - await api.triggerAlarm( + async (description: string) => + await api.triggerAlarm({ integrationKey, - window.location.toString(), - desc, - userId, - ), + source: window.location.toString(), + description, + userName, + }), ); const descriptionChanged = ( @@ -70,9 +70,9 @@ export const TriggerDialog = ({ useEffect(() => { if (value) { alertApi.post({ - message: `Alarm successfully triggered by ${userId}`, + message: `Alarm successfully triggered by ${userName}`, }); - setShouldRefreshIncidents(true); + onTriggerRefresh(); handleDialog(); } @@ -82,7 +82,7 @@ export const TriggerDialog = ({ severity: 'error', }); } - }, [value, error, alertApi, handleDialog, userId, setShouldRefreshIncidents]); + }, [value, error, alertApi, handleDialog, userName, onTriggerRefresh]); if (!showDialog) { return null; diff --git a/plugins/pagerduty/src/components/types.tsx b/plugins/pagerduty/src/components/types.ts similarity index 74% rename from plugins/pagerduty/src/components/types.tsx rename to plugins/pagerduty/src/components/types.ts index 5e5ee0a61b..a93791fe8e 100644 --- a/plugins/pagerduty/src/components/types.tsx +++ b/plugins/pagerduty/src/components/types.ts @@ -14,8 +14,6 @@ * limitations under the License. */ -import { DiscoveryApi } from '@backstage/core'; - export type Incident = { id: string; title: string; @@ -58,26 +56,3 @@ export type User = { html_url: string; name: string; }; - -export type ServicesResponse = { - services: Service[]; -}; - -export type IncidentsResponse = { - incidents: Incident[]; -}; - -export type OnCallsResponse = { - oncalls: OnCall[]; -}; - -export type RequestOptions = { - method: string; - headers: HeadersInit; - body?: BodyInit; -}; - -export type ClientApiConfig = { - eventsUrl?: string; - discoveryApi: DiscoveryApi; -};