small fixes

packages/app/src/components/catalog/EntityPage.tsx

@@ -70,7 +70,8 @@ import {
   isPluginApplicableToEntity as isPagerDutyAvailable,
   PagerDutyCard,
 } from '@backstage/plugin-pagerduty';
-import { Router as BuildKiteRouter,
+import {
+  Router as BuildKiteRouter,
   isPluginApplicableToEntity as isBuildKiteAvailable,
 } from '@roadiehq/backstage-plugin-buildkite';
 

plugins/pagerduty/src/api/client.ts

@@ -27,13 +27,9 @@ import {
 } from '../components/types';
 import { PagerDutyClient } from './types';
 
-export class UnauthorizedError extends Error {
-  constructor() {
-    super();
-  }
-}
+export class UnauthorizedError extends Error {}
 
-export const pagerDutyApiRef = createApiRef<PagerDutyClientApi>({
+export const pagerDutyApiRef = createApiRef<PagerDutyClient>({
   id: 'plugin.pagerduty.api',
   description: 'Used to fetch data from PagerDuty API',
 });
@@ -65,7 +61,7 @@ export class PagerDutyClientApi implements PagerDutyClient {
     return oncalls;
   }
 
-  triggerPagerDutyAlarm(
+  triggerAlarm(
     integrationKey: string,
     source: string,
     description: string,

plugins/pagerduty/src/api/types.ts

@@ -34,4 +34,14 @@ export interface PagerDutyClient {
    *
    */
   getOnCallByPolicyId(policyId: string): Promise<OnCall[]>;
+
+  /**
+   * Triggers an incident to whoever is on-call.
+   */
+  triggerAlarm(
+    integrationKey: string,
+    source: string,
+    description: string,
+    userName: string,
+  ): Promise<Response>;
 }

plugins/pagerduty/src/assets/pd.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="100px" height="85px" viewBox="0 0 100 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
-    <title>pd_icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="main" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="pd_icon" fill="#7A7A7A" fill-rule="nonzero">
-            <path d="M10.441698,84.9793579 L0,84.9793579 L0,32.5700658 C0,27.1885753 2.20882074,23.9355847 4.05619808,22.1283678 C8.15255655,18.1123301 13.6946886,17.9918489 14.6183773,17.9918489 L31.0439715,17.9918489 C36.9073865,17.9918489 40.2808582,20.3613112 42.1282355,22.36933 C45.7828299,26.3452074 45.8229902,31.4857356 45.7426695,32.8511884 L45.7426695,52.610094 C45.7426695,58.3128675 43.4133676,61.6863392 41.4856695,63.4935561 C37.5097922,67.2284712 32.2487828,67.308792 31.0038111,67.2686316 L10.441698,67.2686316 L10.441698,84.9793579 Z M31.4054149,56.7867732 C31.9676601,56.7867732 33.5339149,56.6261317 34.3772828,55.8229241 C35.0198488,55.2205185 35.3411318,54.1361883 35.3411318,52.5699336 L35.3411318,32.2889432 C35.3411318,31.7266979 35.2206507,30.2407639 34.4174431,29.397396 C33.654396,28.5941885 32.168462,28.433547 31.0439715,28.433547 L14.5380565,28.433547 C10.441698,28.433547 10.441698,31.525896 10.441698,32.5700658 L10.441698,56.7867732 L31.4054149,56.7867732 Z" id="Shape"></path>
-            <path d="M89.2363579,0.200801885 L99.6780559,0.200801885 L99.6780559,52.6502543 C99.6780559,58.0317449 97.4692352,61.2847354 95.6218578,63.0919524 C91.5254993,67.1079901 85.9833673,67.2284712 85.0596786,67.2284712 L68.6340844,67.2284712 C62.7706694,67.2284712 59.3971977,64.859009 57.5498203,62.8509901 C53.895226,58.8751128 53.8550657,53.7345845 53.9353864,52.3691317 L53.9353864,32.6503866 C53.9353864,26.947613 56.2646883,23.5741413 58.1923864,21.7669244 C62.1682637,18.0320093 67.4292731,17.9516886 68.6742448,17.9918489 L89.2363579,17.9918489 L89.2363579,0.200801885 Z M68.272641,28.433547 C67.7103957,28.433547 66.144141,28.5941885 65.3007731,29.397396 C64.6582071,29.9998017 64.3369241,31.0841319 64.3369241,32.6503866 L64.3369241,52.931377 C64.3369241,53.4936223 64.4574052,54.9795562 65.2606127,55.8229241 C66.0236599,56.6261317 67.5095939,56.7867732 68.6340844,56.7867732 L85.1399994,56.7867732 C89.2765182,56.7466128 89.2765182,53.6542638 89.2765182,52.610094 L89.2765182,28.433547 L68.272641,28.433547 Z" id="Shape"></path>
-        </g>
-    </g>
-</svg>

plugins/pagerduty/src/components/Escalation/EscalationUser.tsx

@@ -52,12 +52,12 @@ export const EscalationUser = ({ user }: { user: User }) => {
         secondary={user.email}
       />
       <ListItemSecondaryAction>
-        <Tooltip title="Send e-mail to user" placement="left">
+        <Tooltip title="Send e-mail to user" placement="top">
           <IconButton href={`mailto:${user.email}`}>
             <EmailIcon color="primary" />
           </IconButton>
         </Tooltip>
-        <Tooltip title="View in PagerDuty" placement="left">
+        <Tooltip title="View in PagerDuty" placement="top">
           <IconButton
             href={user.html_url}
             target="_blank"

plugins/pagerduty/src/components/Incident/IncidentListItem.tsx

@@ -84,7 +84,7 @@ export const IncidentListItem = ({ incident }: IncidentListItemProps) => {
         }
       />
       <ListItemSecondaryAction>
-        <Tooltip title="View in PagerDuty" placement="left">
+        <Tooltip title="View in PagerDuty" placement="top">
           <IconButton
             href={user.html_url}
             target="_blank"

plugins/pagerduty/src/components/TriggerButton/TriggerButton.tsx

@@ -28,7 +28,7 @@ const useStyles = makeStyles({
     textTransform: 'uppercase',
     fontWeight: 600,
     letterSpacing: 1.2,
-    lineHeight: 1.1,
+    lineHeight: 1.5,
     '&:hover, &:focus, &.focus': {
       backgroundColor: 'transparent',
       textDecoration: 'none',

plugins/pagerduty/src/components/TriggerDialog/TriggerDialog.tsx

@@ -23,10 +23,19 @@ import {
   DialogActions,
   Button,
   DialogContent,
+  Typography,
+  CircularProgress,
 } from '@material-ui/core';
-import { Progress, useApi, alertApiRef, identityApiRef } from '@backstage/core';
+import {
+  Progress,
+  useApi,
+  alertApiRef,
+  identityApiRef,
+  WarningPanel,
+} from '@backstage/core';
 import { useAsyncFn } from 'react-use';
 import { pagerDutyApiRef } from '../../api';
+import { Alert, AlertTitle } from '@material-ui/lab';
 
 const useStyles = makeStyles({
   warningText: {
@@ -54,9 +63,9 @@ export const TriggerDialog = ({ name, integrationKey, onClose }: Props) => {
     setDescription(event.target.value);
   };
 
-  const [{ value, loading, error }, triggerAlarm] = useAsyncFn(
+  const [{ value, loading, error }, handleTriggerAlarm] = useAsyncFn(
     async (desc: string) => {
-      return await api.triggerPagerDutyAlarm(
+      return await api.triggerAlarm(
         integrationKey,
         window.location.toString(),
         desc,
@@ -82,34 +91,41 @@ export const TriggerDialog = ({ name, integrationKey, onClose }: Props) => {
   }, [value, error, alertApi, onClose, userId]);
 
   return (
-    <Dialog maxWidth="sm" open onClose={onClose} fullWidth>
+    <Dialog maxWidth="md" open onClose={onClose} fullWidth>
       <DialogTitle>
-        This action will send PagerDuty alarms and notifications to on-call
-        people responsible for {name}.
+        This action will trigger an incident for <strong>"{name}"</strong>.
       </DialogTitle>
       <DialogContent>
-        <p className={classes.warningText}>
-          Note: If the issue you are seeing does not need urgent attention,
-          please get in touch with the responsible team using their preferred
-          communications channel. For most views, you can find links to support
-          and information channels by clicking the support button in the top
-          right corner of the page. If the issue is urgent, please don't
-          hesitate to trigger the alert.
-        </p>
-        <p>
+        <Alert severity="info">
+          {/* <AlertTitle>"Note"</AlertTitle> */}
+          <Typography variant="body1" align="justify">
+            If the issue you are seeing does not need urgent attention, please
+            get in touch with the responsible team using their preferred
+            communications channel. You can find information about the owner of
+            this entity in the "About" card. If the issue is urgent, please
+            don't hesitate to trigger the alert.
+          </Typography>
+        </Alert>
+        <Typography
+          variant="body1"
+          style={{ marginTop: '1em' }}
+          gutterBottom
+          align="justify"
+        >
           Please describe the problem you want to report. Be as descriptive as
-          possible. Your Spotify username and a reference to the current page
-          will automatically be sent amended to the alarm so that we can debug
-          the issue and reach out to you if necessary.
-        </p>
+          possible. Your signed in user and a reference to the current page will
+          automatically be amended to the alarm so that the receiver can reach
+          out to you if necessary.
+        </Typography>
         <TextField
           inputProps={{ 'data-testid': 'trigger-input' }}
           id="description"
           multiline
           fullWidth
-          rows="6"
+          rows="4"
           margin="normal"
           label="Problem description"
+          variant="outlined"
           onChange={descriptionChanged}
         />
       </DialogContent>
@@ -119,15 +135,16 @@ export const TriggerDialog = ({ name, integrationKey, onClose }: Props) => {
           id="trigger"
           color="secondary"
           disabled={!description || loading}
-          onClick={() => triggerAlarm(description)}
+          variant="contained"
+          onClick={() => handleTriggerAlarm(description)}
+          endIcon={loading && <CircularProgress size={16} />}
         >
-          Trigger
+          Trigger Incident
         </Button>
-        <Button id="close" onClick={onClose}>
+        <Button id="close" color="primary" onClick={onClose}>
           Close
         </Button>
       </DialogActions>
-      {loading && <Progress />}
     </Dialog>
   );
 };