From 82fbe62743b45cbab7d3bac590532f1baabdbb64 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Tue, 20 Oct 2020 11:21:18 +0200 Subject: [PATCH] splitted up component to separate files --- .../pagerduty/src/components/Escalation.tsx | 112 ++++++++ .../pagerduty/src/components/Incidents.tsx | 120 +++++++++ .../src/components/PagerDutyServiceCard.tsx | 253 ++---------------- plugins/pagerduty/src/components/types.tsx | 27 ++ 4 files changed, 280 insertions(+), 232 deletions(-) create mode 100644 plugins/pagerduty/src/components/Escalation.tsx create mode 100644 plugins/pagerduty/src/components/Incidents.tsx create mode 100644 plugins/pagerduty/src/components/types.tsx diff --git a/plugins/pagerduty/src/components/Escalation.tsx b/plugins/pagerduty/src/components/Escalation.tsx new file mode 100644 index 0000000000..217b93a400 --- /dev/null +++ b/plugins/pagerduty/src/components/Escalation.tsx @@ -0,0 +1,112 @@ +/* + * Copyright 2020 Spotify AB + * + * 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 { + List, + ListSubheader, + ListItem, + ListItemIcon, + ListItemSecondaryAction, + Tooltip, + ListItemText, + makeStyles, + IconButton, +} from '@material-ui/core'; +import UserIcon from '@material-ui/icons/Person'; +import EmailIcon from '@material-ui/icons/Email'; +import { StatusWarning } from '@backstage/core'; +import Pagerduty from './pd.svg'; +import { PagerDutyUserData } from './types'; + +const useStyles = makeStyles({ + denseListIcon: { + marginRight: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + svgButtonImage: { + height: '1em', + }, +}); + +type EscalationUserProps = { + user: PagerDutyUserData; +}; + +const EscalationUser = ({ user }: EscalationUserProps) => { + const classes = useStyles(); + return ( + + + + + + + + + + + + + + View in PagerDuty + + + + + ); +}; + +const EscalationUsersEmptyState = () => { + const classes = useStyles(); + return ( + + +
+ +
+ + + + ); +}; + +type EscalationPolicyProps = { + escalation: PagerDutyUserData[]; +}; + +export const EscalationPolicy = ({ escalation }: EscalationPolicyProps) => ( + Escalation Policy}> + {escalation.length ? ( + escalation.map((user, index) => ( + + )) + ) : ( + + )} + +); diff --git a/plugins/pagerduty/src/components/Incidents.tsx b/plugins/pagerduty/src/components/Incidents.tsx new file mode 100644 index 0000000000..6f6d194a77 --- /dev/null +++ b/plugins/pagerduty/src/components/Incidents.tsx @@ -0,0 +1,120 @@ +/* + * Copyright 2020 Spotify AB + * + * 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 { + List, + ListItem, + ListItemIcon, + ListItemSecondaryAction, + Tooltip, + ListItemText, + makeStyles, + IconButton, + ListSubheader, +} from '@material-ui/core'; +import { StatusError, StatusWarning, StatusOK } from '@backstage/core'; +import Pagerduty from './pd.svg'; +import moment from 'moment'; + +const useStyles = makeStyles({ + denseListIcon: { + marginRight: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + svgButtonImage: { + height: '1em', + }, +}); + +const IncidentsEmptyState = () => { + const classes = useStyles(); + return ( + + +
+ +
+ + + + ); +}; + +type IncidentListProps = { + incidents: any; +}; + +const IncidentList = ({ incidents }: IncidentListProps) => { + const classes = useStyles(); + return incidents.map((incident: any) => ( + + + +
+ {incident.status === 'triggered' ? ( + + ) : ( + + )} +
+ + + + Created {moment(incident.createdAt).fromNow()}, assigned to{' '} + {(incident.assignees.length && incident.assignees[0].name) || + 'nobody'} + + } + /> + + + + View in PagerDuty + + + + + )); +}; + +type IncidentsProps = { + incidents: Array; +}; + +export const Incidents = ({ incidents }: IncidentsProps) => ( + Incidents}> + {incidents.length ? ( + + ) : ( + + )} + +); diff --git a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx index 3dadacadfb..cd51c4bcee 100644 --- a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx +++ b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx @@ -14,237 +14,17 @@ * limitations under the License. */ import React from 'react'; -import { - InfoCard, - StatusError, - StatusWarning, - StatusOK, -} from '@backstage/core'; +import { InfoCard, MissingAnnotationEmptyState } from '@backstage/core'; import { Entity } from '@backstage/catalog-model'; -import { - List, - ListSubheader, - ListItem, - ListItemIcon, - ListItemSecondaryAction, - Tooltip, - ListItemText, - makeStyles, - IconButton, -} from '@material-ui/core'; -import moment from 'moment'; -import Pagerduty from './pd.svg'; -import UserIcon from '@material-ui/icons/Person'; -import EmailIcon from '@material-ui/icons/Email'; +import { Grid, Button } from '@material-ui/core'; +import { Incidents } from './Incidents'; +import { EscalationPolicy } from './Escalation'; +import { PagerDutyData } from './types'; -const useStyles = makeStyles({ - buttonContainer: {}, - denseListIcon: { - marginRight: 0, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - }, - svgButtonImage: { - height: '1em', - }, -}); +const PAGERDUTY_INTEGRATION_KEY = 'pagerduty.com/integration-key'; -type IncidentListProps = { - incidents: any; -}; - -const IncidentList = ({ incidents }: IncidentListProps) => { - const classes = useStyles(); - return incidents.map((incident: any) => ( - - - -
- {incident.status === 'triggered' ? ( - - ) : ( - - )} -
- - - - Created {moment(incident.createdAt).fromNow()}, assigned to{' '} - {(incident.assignees.length && incident.assignees[0].name) || - 'nobody'} - - } - /> - - - - View in PagerDuty - - - - - )); -}; - -const IncidentsEmptyState = () => { - const classes = useStyles(); - return ( - - -
- -
- - - - ); -}; - -type IncidentsProps = { - incidents: Array; -}; -export const Incidents = ({ incidents }: IncidentsProps) => ( - Incidents}> - {incidents.length ? ( - - ) : ( - - )} - -); - -type EscalationProps = { - escalation: PagerDutyUserData[]; -}; - -const EscalationUsers = ({ escalation }: EscalationProps) => { - const classes = useStyles(); - const escalations = escalation.map((user, index) => ( - - - - - - - - - - - - - - View in PagerDuty - - - - - )); - return
{escalations}
; -}; - -const EscalationUsersEmptyState = () => { - const classes = useStyles(); - return ( - - -
- -
- - - - ); -}; - -const EscalationPolicy = ({ escalation }: EscalationProps) => ( - Escalation Policy}> - {escalation.length ? ( - - ) : ( - - )} - -); - -type CardBodyProps = { - entity: Entity; - data: PagerDutyData; -}; - -const CardBody = ({ entity, data }: CardBodyProps) => { - const { pagerDutyServices } = data; - const classes = useStyles(); - - if (!pagerDutyServices.length) { - return ( -
- 'The specified PagerDuty integration key does not match any PagerDuty - service.' -
- ); - } - - const { activeIncidents, escalationPolicy } = pagerDutyServices[0]; - - return ( - <> - - -
- {/* */} -
- - ); -}; - -type PagerDutyIncident = { - id: string; - title: string; - status: string; - createdAt: string; - homepageUrl: string; - assignees: Partial[]; -}; - -type PagerDutyUserData = { - email: string; - name: string; - homepageUrl: string; - id: string; -}; - -type PagerDutyServicesData = { - activeIncidents: PagerDutyIncident[]; - escalationPolicy: PagerDutyUserData[]; - id: string; - name: string; - homepageUrl: string; -}; - -type PagerDutyData = { - pagerDutyServices: PagerDutyServicesData[]; -}; +export const isPluginApplicableToEntity = (entity: Entity) => + Boolean(entity.metadata.annotations?.[PAGERDUTY_INTEGRATION_KEY]); type Props = { entity: Entity; @@ -284,11 +64,20 @@ export const PagerDutyServiceCard = ({ entity }: Props) => { ], }; - return ( + const { activeIncidents, escalationPolicy } = mockData.pagerDutyServices[0]; + + return isPluginApplicableToEntity(entity) ? ( + + ) : ( - + + + + {/* */} + + ); }; - -export const isPluginApplicableToEntity = (entity: Entity) => true; diff --git a/plugins/pagerduty/src/components/types.tsx b/plugins/pagerduty/src/components/types.tsx new file mode 100644 index 0000000000..b3b94f0200 --- /dev/null +++ b/plugins/pagerduty/src/components/types.tsx @@ -0,0 +1,27 @@ +export type PagerDutyIncident = { + id: string; + title: string; + status: string; + createdAt: string; + homepageUrl: string; + assignees: Partial[]; +}; + +export type PagerDutyUserData = { + email: string; + name: string; + homepageUrl: string; + id: string; +}; + +export type PagerDutyServicesData = { + activeIncidents: PagerDutyIncident[]; + escalationPolicy: any; // PagerDutyUserData[]; + id: string; + name: string; + homepageUrl: string; +}; + +export type PagerDutyData = { + pagerDutyServices: PagerDutyServicesData[]; +};