diff --git a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx new file mode 100644 index 0000000000..3dadacadfb --- /dev/null +++ b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx @@ -0,0 +1,294 @@ +/* + * 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 { + InfoCard, + StatusError, + StatusWarning, + StatusOK, +} 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'; + +const useStyles = makeStyles({ + buttonContainer: {}, + denseListIcon: { + marginRight: 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + svgButtonImage: { + height: '1em', + }, +}); + +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[]; +}; + +type Props = { + entity: Entity; +}; + +export const PagerDutyServiceCard = ({ entity }: Props) => { + // TODO: fetch this data + const mockData: PagerDutyData = { + pagerDutyServices: [ + { + activeIncidents: [ + { + id: 'id', + title: 'something happened', + status: 'triggered', + createdAt: '2020:01:01', + homepageUrl: 'url', + assignees: [ + { + name: 'name', + }, + ], + }, + ], + escalationPolicy: [ + { + email: 'user@example.com', + name: 'Name', + homepageUrl: 'https://spotify.pagerduty.com/users/FOO', + id: 'user id', + }, + ], + id: 'id', + name: 'name', + homepageUrl: 'https://spotify.pagety.com/service-directory/BAR', + }, + ], + }; + + return ( + + + + ); +}; + +export const isPluginApplicableToEntity = (entity: Entity) => true; diff --git a/plugins/pagerduty/src/components/pd.svg b/plugins/pagerduty/src/components/pd.svg new file mode 100644 index 0000000000..237ffa2011 --- /dev/null +++ b/plugins/pagerduty/src/components/pd.svg @@ -0,0 +1,13 @@ + + + + pd_icon + Created with Sketch. + + + + + + + + diff --git a/plugins/pagerduty/src/index.ts b/plugins/pagerduty/src/index.ts index 224e293890..b24018887a 100644 --- a/plugins/pagerduty/src/index.ts +++ b/plugins/pagerduty/src/index.ts @@ -14,3 +14,7 @@ * limitations under the License. */ export { plugin } from './plugin'; +export { + isPluginApplicableToEntity, + PagerDutyServiceCard, +} from './components/PagerDutyServiceCard';