add TriggerButton and TriggerDialog, refactor them

plugins/pagerduty/src/components/PagerDutyServiceCard.tsx

@@ -16,10 +16,11 @@
 import React from 'react';
 import { InfoCard, MissingAnnotationEmptyState } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
-import { Grid, Button } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import { Incidents } from './Incidents';
 import { EscalationPolicy } from './Escalation';
 import { PagerDutyData } from './types';
+import { TriggerButton } from './TriggerButton';
 
 const PAGERDUTY_INTEGRATION_KEY = 'pagerduty.com/integration-key';
 
@@ -64,19 +65,25 @@ export const PagerDutyServiceCard = ({ entity }: Props) => {
     ],
   };
 
-  const { activeIncidents, escalationPolicy } = mockData.pagerDutyServices[0];
+  const {
+    activeIncidents,
+    escalationPolicy,
+    homepageUrl,
+  } = mockData.pagerDutyServices[0];
+
+  const link = {
+    title: 'View in PagerDuty',
+    link: homepageUrl,
+  };
 
   return isPluginApplicableToEntity(entity) ? (
     <MissingAnnotationEmptyState annotation={PAGERDUTY_INTEGRATION_KEY} />
   ) : (
-    <InfoCard title="PagerDuty">
+    <InfoCard title="PagerDuty" deepLink={link}>
       <Incidents incidents={activeIncidents} />
       <EscalationPolicy escalation={escalationPolicy} />
       <Grid container item xs={12} justify="flex-end">
-        {/* <TriggerButton component={entity} /> */}
-        <Button variant="contained" color="primary">
-          Trigger Alarm
-        </Button>
+        <TriggerButton entity={entity} />
       </Grid>
     </InfoCard>
   );

plugins/pagerduty/src/components/TriggerButton.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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, { useState } from 'react';
+import { Button } from '@material-ui/core';
+import { TriggerDialog } from './TriggerDialog';
+import { Entity } from '@backstage/catalog-model';
+
+type Props = {
+  entity: Entity;
+};
+
+export const TriggerButton = ({ entity }: Props) => {
+  const [showDialog, setShowDialog] = useState<boolean>(false);
+
+  const handleDialog = () => {
+    setShowDialog(!showDialog);
+  };
+
+  // const onTriggerAlarm = async (description: string) => {
+  //   try {
+  //     //TODO: call method from pagerduty client
+  //     alertApi.post({
+  //       message: `Alarm successfully triggered by ${userId}`,
+  //     });
+  //   } catch (error) {
+  //     alertApi.post({
+  //       message: `Failed to trigger alarm, ${error.message}`,
+  //       severity: 'error',
+  //     });
+  //     throw error;
+  //   }
+  // };
+
+  return (
+    <>
+      <Button
+        size="small"
+        variant="contained"
+        color="secondary"
+        onClick={handleDialog}
+      >
+        Trigger alarm
+      </Button>
+      {showDialog && (
+        <TriggerDialog
+          name={entity.metadata.name}
+          integrationKey="someKey"
+          // onTrigger={onTriggerAlarm}
+          onClose={handleDialog}
+        />
+      )}
+    </>
+  );
+};

plugins/pagerduty/src/components/TriggerDialog.tsx

@@ -0,0 +1,131 @@
+/*
+ * 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, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  TextField,
+  makeStyles,
+  DialogActions,
+  Button,
+  DialogContent,
+  FormControl,
+  FormHelperText,
+} from '@material-ui/core';
+import { Progress, useApi, alertApiRef, identityApiRef } from '@backstage/core';
+import { useAsyncFn } from 'react-use';
+
+const useStyles = makeStyles({
+  warningText: {
+    border: '1px solid rgba(245, 155, 35, 0.5)',
+    backgroundColor: 'rgba(245, 155, 35, 0.2)',
+    padding: '0.5em 1em',
+  },
+});
+
+type Props = {
+  name: string;
+  integrationKey: string;
+  onClose: () => void;
+};
+
+export const TriggerDialog = ({ name, integrationKey, onClose }: Props) => {
+  const classes = useStyles();
+  const [description, setDescription] = useState<string>('');
+  const alertApi = useApi(alertApiRef);
+  const identityApi = useApi(identityApiRef);
+  const userId = identityApi.getUserId();
+
+  const descriptionChanged = (event: any) => {
+    setDescription(event.target.value);
+  };
+
+  const promiseFunc = () =>
+    new Promise((resolve, reject) => {
+      setTimeout(() => {
+        reject('Inside test await');
+      }, 1000);
+    });
+
+  const [{ value, loading, error }, triggerAlarm] = useAsyncFn(async () => {
+    return await promiseFunc();
+  });
+
+  useEffect(() => {
+    if (value) {
+      alertApi.post({
+        message: `Alarm successfully triggered by ${userId}`,
+      });
+      onClose();
+    }
+
+    if (error) {
+      alertApi.post({
+        message: `Failed to trigger alarm, ${error.message}`,
+        severity: 'error',
+      });
+    }
+  }, [value, error]);
+
+  return (
+    <Dialog maxWidth="sm" open={true} onClose={onClose} fullWidth={true}>
+      <DialogTitle>
+        This action will send PagerDuty alarms and notifications to on-call
+        people responsible for {name}.
+      </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>
+          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>
+        <TextField
+          id="description"
+          multiline
+          fullWidth
+          rows="6"
+          margin="normal"
+          label="Problem description"
+          onChange={descriptionChanged}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          id="trigger"
+          color="secondary"
+          disabled={!description || loading}
+          onClick={triggerAlarm}
+        >
+          Trigger
+        </Button>
+        <Button id="close" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+      {loading && <Progress />}
+    </Dialog>
+  );
+};