From 2be408a226e6ba7924057c0294b29fae4cb97406 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Wed, 11 Nov 2020 16:48:44 +0100 Subject: [PATCH] recator UI and remove comments --- plugins/pagerduty/src/api/pagerDutyClient.ts | 12 ++++----- plugins/pagerduty/src/assets/emptystate.svg | 26 +++++++++++++++++++ .../src/components/Escalation.test.tsx | 4 +-- .../pagerduty/src/components/Escalation.tsx | 25 +++++++++++++----- .../pagerduty/src/components/Incidents.tsx | 19 +++++++++++--- .../src/components/PagerDutyServiceCard.tsx | 2 +- .../src/components/PagerdutyCard.tsx | 11 +------- plugins/pagerduty/src/components/Pd.tsx | 14 ---------- plugins/pagerduty/src/components/types.tsx | 10 +++---- 9 files changed, 74 insertions(+), 49 deletions(-) create mode 100644 plugins/pagerduty/src/assets/emptystate.svg diff --git a/plugins/pagerduty/src/api/pagerDutyClient.ts b/plugins/pagerduty/src/api/pagerDutyClient.ts index 09abaf856c..d0cb3719d6 100644 --- a/plugins/pagerduty/src/api/pagerDutyClient.ts +++ b/plugins/pagerduty/src/api/pagerDutyClient.ts @@ -22,8 +22,8 @@ import { PagerDutyClientConfig, ServicesResponse, IncidentResponse, - OncallsResponse, - Oncall, + OnCallsResponse, + OnCall, } from '../components/types'; export const pagerDutyApiRef = createApiRef({ @@ -34,7 +34,7 @@ export const pagerDutyApiRef = createApiRef({ interface PagerDutyClient { getServiceByIntegrationKey(integrationKey: string): Promise; getIncidentsByServiceId(serviceId: string): Promise; - getOncallByPolicyId(policyId: string): Promise; + getOnCallByPolicyId(policyId: string): Promise; } export class PagerDutyClientApi implements PagerDutyClient { @@ -67,16 +67,16 @@ export class PagerDutyClientApi implements PagerDutyClient { return incidents; } - async getOncallByPolicyId(policyId: string): Promise { + async getOnCallByPolicyId(policyId: string): Promise { if (!this.config?.token) { throw new Error('Missing token'); } const params = `include[]=users&escalation_policy_ids[]=${policyId}`; const url = `${this.API_URL}/oncalls?${params}`; - const { oncalls } = await this.getByUrl(url); + const { onCalls } = await this.getByUrl(url); - return oncalls; + return onCalls; } triggerPagerDutyAlarm( diff --git a/plugins/pagerduty/src/assets/emptystate.svg b/plugins/pagerduty/src/assets/emptystate.svg new file mode 100644 index 0000000000..57b35238dd --- /dev/null +++ b/plugins/pagerduty/src/assets/emptystate.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/pagerduty/src/components/Escalation.test.tsx b/plugins/pagerduty/src/components/Escalation.test.tsx index db52e36f4a..13e2687b04 100644 --- a/plugins/pagerduty/src/components/Escalation.test.tsx +++ b/plugins/pagerduty/src/components/Escalation.test.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { render } from '@testing-library/react'; import { EscalationPolicy } from './Escalation'; import { wrapInTestApp } from '@backstage/test-utils'; -import { Oncall } from './types'; +import { OnCall } from './types'; -export const escalations: Oncall[] = [ +export const escalations: OnCall[] = [ { user: { name: 'person1', diff --git a/plugins/pagerduty/src/components/Escalation.tsx b/plugins/pagerduty/src/components/Escalation.tsx index f53f79af41..56c2c27a03 100644 --- a/plugins/pagerduty/src/components/Escalation.tsx +++ b/plugins/pagerduty/src/components/Escalation.tsx @@ -25,11 +25,12 @@ import { ListItemText, makeStyles, IconButton, + Typography, } from '@material-ui/core'; -import UserIcon from '@material-ui/icons/Person'; +import Avatar from '@material-ui/core/Avatar'; import EmailIcon from '@material-ui/icons/Email'; import { StatusWarning } from '@backstage/core'; -import { Oncall } from './types'; +import { OnCall } from './types'; import PagerdutyIcon from './Pd'; const useStyles = makeStyles({ @@ -43,16 +44,26 @@ const useStyles = makeStyles({ svgButtonImage: { height: '1em', }, + listItemPrimary: { + fontWeight: 'bold', + }, }); -const EscalationUser = ({ user }: Oncall) => { +const EscalationUser = ({ user }: OnCall) => { const classes = useStyles(); return ( - + - + + {user.name} + + } + secondary={user.email} + /> @@ -89,11 +100,11 @@ const EscalationUsersEmptyState = () => { }; type EscalationPolicyProps = { - escalation: Oncall[]; + escalation: OnCall[]; }; export const EscalationPolicy = ({ escalation }: EscalationPolicyProps) => ( - Escalation Policy}> + ON CALL}> {escalation.length ? ( escalation.map((item, index) => ( diff --git a/plugins/pagerduty/src/components/Incidents.tsx b/plugins/pagerduty/src/components/Incidents.tsx index 512836422c..52247b8f06 100644 --- a/plugins/pagerduty/src/components/Incidents.tsx +++ b/plugins/pagerduty/src/components/Incidents.tsx @@ -26,6 +26,7 @@ import { IconButton, ListSubheader, Link, + Typography, } from '@material-ui/core'; import { StatusError, StatusWarning, StatusOK } from '@backstage/core'; import moment from 'moment'; @@ -43,6 +44,12 @@ const useStyles = makeStyles({ svgButtonImage: { height: '1em', }, + listItemPrimary: { + fontWeight: 'bold', + }, + listItemIcon: { + minWidth: '1em', + }, }); const IncidentsEmptyState = () => { @@ -67,8 +74,8 @@ const IncidentListItem = ({ incident }: IncidentListItemProps) => { const classes = useStyles(); const user = incident.assignments[0].assignee; return ( - - + +
{incident.status === 'triggered' ? ( @@ -80,7 +87,11 @@ const IncidentListItem = ({ incident }: IncidentListItemProps) => { + {incident.title} + + } secondary={ Created {moment(incident.created_at).fromNow()}, assigned to{' '} @@ -112,7 +123,7 @@ type IncidentsProps = { }; export const Incidents = ({ incidents }: IncidentsProps) => ( - Incidents}> + INCIDENTS}> {incidents.length ? ( incidents.map((incident, index) => ( diff --git a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx index 4fd4691458..5bb7c9b5a9 100644 --- a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx +++ b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx @@ -47,7 +47,7 @@ export const PagerDutyServiceCard = ({ entity }: Props) => { const service = services[0]; const incidents = await api.getIncidentsByServiceId(service.id); - const oncalls = await api.getOncallByPolicyId(service.escalation_policy.id); + const oncalls = await api.getOnCallByPolicyId(service.escalation_policy.id); return { incidents, diff --git a/plugins/pagerduty/src/components/PagerdutyCard.tsx b/plugins/pagerduty/src/components/PagerdutyCard.tsx index 2af4d2e4bc..539bf69540 100644 --- a/plugins/pagerduty/src/components/PagerdutyCard.tsx +++ b/plugins/pagerduty/src/components/PagerdutyCard.tsx @@ -10,7 +10,6 @@ import { import LinkIcon from '@material-ui/icons/Link'; import ReportProblemIcon from '@material-ui/icons/ReportProblem'; import classnames from 'classnames'; -import Pagerduty from '../assets/pd.svg'; import PagerdutyIcon from './Pd'; // TODO: create a general component to use it in pagerduty and aboutCard @@ -100,15 +99,7 @@ export const PagerdutyCard = ({ - // View in PagerDuty - - } + icon={} > -// React.createElement( -// SvgIcon, -// props, -// -// -// , -// ); - -// export default SvgPd; - import React from 'react'; import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; diff --git a/plugins/pagerduty/src/components/types.tsx b/plugins/pagerduty/src/components/types.tsx index ca06e79510..dec8f18739 100644 --- a/plugins/pagerduty/src/components/types.tsx +++ b/plugins/pagerduty/src/components/types.tsx @@ -32,7 +32,7 @@ export type Service = { name: string; html_url: string; integrationKey: string; - escalation_policy: Oncall; + escalation_policy: OnCall; }; export type ResponseService = { @@ -40,7 +40,7 @@ export type ResponseService = { more: boolean; }; -export type ResponseOncall = { +export type ResponseOnCall = { id: string; name: string; email: string; @@ -65,8 +65,8 @@ export type IncidentResponse = { incidents: Incident[]; }; -export type OncallsResponse = { - oncalls: Oncall[]; +export type OnCallsResponse = { + onCalls: OnCall[]; }; export type User = { @@ -77,6 +77,6 @@ export type User = { name: string; }; -export type Oncall = { +export type OnCall = { user: User; };