diff --git a/plugins/pagerduty/src/components/Escalation.tsx b/plugins/pagerduty/src/components/Escalation.tsx index 19c6a15096..f53f79af41 100644 --- a/plugins/pagerduty/src/components/Escalation.tsx +++ b/plugins/pagerduty/src/components/Escalation.tsx @@ -29,8 +29,8 @@ import { import UserIcon from '@material-ui/icons/Person'; import EmailIcon from '@material-ui/icons/Email'; import { StatusWarning } from '@backstage/core'; -import Pagerduty from '../assets/pd.svg'; -import { Oncall, PagerDutyEscalationPolicy } from './types'; +import { Oncall } from './types'; +import PagerdutyIcon from './Pd'; const useStyles = makeStyles({ denseListIcon: { @@ -45,7 +45,7 @@ const useStyles = makeStyles({ }, }); -const EscalationUser = ({ user }: PagerDutyEscalationPolicy) => { +const EscalationUser = ({ user }: Oncall) => { const classes = useStyles(); return ( @@ -56,7 +56,7 @@ const EscalationUser = ({ user }: PagerDutyEscalationPolicy) => { - + @@ -64,12 +64,9 @@ const EscalationUser = ({ user }: PagerDutyEscalationPolicy) => { href={user.html_url} target="_blank" rel="noopener noreferrer" + color="primary" > - View in PagerDuty + diff --git a/plugins/pagerduty/src/components/Incidents.tsx b/plugins/pagerduty/src/components/Incidents.tsx index dd3301904d..512836422c 100644 --- a/plugins/pagerduty/src/components/Incidents.tsx +++ b/plugins/pagerduty/src/components/Incidents.tsx @@ -25,11 +25,12 @@ import { makeStyles, IconButton, ListSubheader, + Link, } from '@material-ui/core'; import { StatusError, StatusWarning, StatusOK } from '@backstage/core'; -import Pagerduty from '../assets/pd.svg'; import moment from 'moment'; import { Incident } from '../components/types'; +import PagerdutyIcon from './Pd'; const useStyles = makeStyles({ denseListIcon: { @@ -64,6 +65,7 @@ type IncidentListItemProps = { const IncidentListItem = ({ incident }: IncidentListItemProps) => { const classes = useStyles(); + const user = incident.assignments[0].assignee; return ( @@ -82,8 +84,9 @@ const IncidentListItem = ({ incident }: IncidentListItemProps) => { secondary={ Created {moment(incident.created_at).fromNow()}, assigned to{' '} - {(incident?.assignments[0]?.assignee?.summary && - incident.assignments[0].assignee.summary) || + {(incident?.assignments[0]?.assignee?.summary && ( + {user.summary} + )) || 'nobody'} } @@ -91,15 +94,12 @@ const IncidentListItem = ({ incident }: IncidentListItemProps) => { - View in PagerDuty + diff --git a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx index 54713b8ecd..4fd4691458 100644 --- a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx +++ b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx @@ -14,15 +14,16 @@ * limitations under the License. */ import React from 'react'; -import { InfoCard, useApi } from '@backstage/core'; +import { useApi } from '@backstage/core'; import { Entity } from '@backstage/catalog-model'; -import { Grid, LinearProgress } from '@material-ui/core'; +import { LinearProgress } from '@material-ui/core'; import { Incidents } from './Incidents'; import { EscalationPolicy } from './Escalation'; import { TriggerButton } from './TriggerButton'; import { useAsync } from 'react-use'; import { Alert } from '@material-ui/lab'; import { pagerDutyApiRef } from '../api/pagerDutyClient'; +import { PagerdutyCard } from './PagerdutyCard'; export const PAGERDUTY_INTEGRATION_KEY = 'pagerduty.com/integration-key'; @@ -71,19 +72,26 @@ export const PagerDutyServiceCard = ({ entity }: Props) => { return ; } - const link = { + const pagerdutyLink = { title: 'View in PagerDuty', - link: value!.homepageUrl, + href: value!.homepageUrl, + }; + + const triggerAlarm = { + title: 'Trigger Alarm', + action: , }; return ( - - - - - - - {/* todo show something when we dont have token */} - + + + + + } + > ); }; diff --git a/plugins/pagerduty/src/components/PagerdutyCard.tsx b/plugins/pagerduty/src/components/PagerdutyCard.tsx new file mode 100644 index 0000000000..2af4d2e4bc --- /dev/null +++ b/plugins/pagerduty/src/components/PagerdutyCard.tsx @@ -0,0 +1,132 @@ +import React from 'react'; +import { + Card, + CardHeader, + CardContent, + Divider, + Link, + makeStyles, +} from '@material-ui/core'; +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 + +const useStyles = makeStyles(theme => ({ + links: { + margin: theme.spacing(2, 0), + display: 'grid', + gridAutoFlow: 'column', + gridAutoColumns: 'min-content', + gridGap: theme.spacing(3), + }, + link: { + display: 'grid', + justifyItems: 'center', + gridGap: 4, + textAlign: 'center', + }, + label: { + fontSize: '0.7rem', + textTransform: 'uppercase', + fontWeight: 600, + letterSpacing: 1.2, + }, + trigger: { + color: theme.palette.secondary.main, + }, + svgButtonImage: { + height: '1.5em', + color: theme.palette.primary.main, + }, +})); + +type SubHeaderProps = { + ViewPagerduty: { title: string; href: string }; + TriggerAlarm: { title: string; action: React.ReactNode }; +}; + +type PagerdutyCardProps = { + title: string; + subheader: SubHeaderProps; + content: React.ReactNode; +}; + +type VerticalIconProps = { + label: string; + href?: string; + action?: React.ReactNode; + icon?: React.ReactNode; +}; + +const VerticalIcon = ({ + label, + href, + icon = , + action, +}: VerticalIconProps) => { + const classes = useStyles(); + if (action) { + return ( + <> + + {icon} + {action} + + + ); + } + return ( + <> + + {icon} + {label} + + + ); +}; +export const PagerdutyCard = ({ + title, + subheader, + content, +}: PagerdutyCardProps) => { + const classes = useStyles(); + const getSubheader = ({ ViewPagerduty, TriggerAlarm }: SubHeaderProps) => { + return ( + + ); + }; + + return ( + + + + {content} + + ); +}; diff --git a/plugins/pagerduty/src/components/Pd.tsx b/plugins/pagerduty/src/components/Pd.tsx new file mode 100644 index 0000000000..3698d0a1c4 --- /dev/null +++ b/plugins/pagerduty/src/components/Pd.tsx @@ -0,0 +1,27 @@ +// import React from 'react'; +// import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; + +// const SvgPd = (props: SvgIconProps) => +// React.createElement( +// SvgIcon, +// props, +// +// +// , +// ); + +// export default SvgPd; + +import React from 'react'; +import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'; + +const SvgPd = (props: SvgIconProps) => + React.createElement( + SvgIcon, + props, + + + , + ); + +export default SvgPd; diff --git a/plugins/pagerduty/src/components/TriggerButton.tsx b/plugins/pagerduty/src/components/TriggerButton.tsx index eb051e68fa..48bed68e2e 100644 --- a/plugins/pagerduty/src/components/TriggerButton.tsx +++ b/plugins/pagerduty/src/components/TriggerButton.tsx @@ -15,17 +15,34 @@ */ import React, { useState } from 'react'; -import { Button } from '@material-ui/core'; +import { Button, makeStyles } from '@material-ui/core'; import { TriggerDialog } from './TriggerDialog'; import { Entity } from '@backstage/catalog-model'; import { PAGERDUTY_INTEGRATION_KEY } from './PagerDutyServiceCard'; +const useStyles = makeStyles({ + triggerAlarm: { + paddingTop: 0, + paddingBottom: 0, + fontSize: '0.7rem', + textTransform: 'uppercase', + fontWeight: 600, + letterSpacing: 1.2, + lineHeight: 1.1, + '&:hover, &:focus, &.focus': { + backgroundColor: 'transparent', + textDecoration: 'none', + }, + }, +}); + type Props = { entity: Entity; }; export const TriggerButton = ({ entity }: Props) => { const [showDialog, setShowDialog] = useState(false); + const classes = useStyles(); const handleDialog = () => { setShowDialog(!showDialog); @@ -34,12 +51,11 @@ export const TriggerButton = ({ entity }: Props) => { return ( <> {showDialog && ( { the issue and reach out to you if necessary.

{