alerts: create alerts for multiple services at once

util/errutil/maperror.go

@@ -27,6 +27,8 @@ func MapDBError(err error) error {
 			return validation.NewFieldError("RemoveUserID", "user does not exist")
 		case "user_overrides_tgt_schedule_id_fkey":
 			return validation.NewFieldError("TargetID", "schedule does not exist")
+		case "alerts_services_id_fkey":
+			return validation.NewFieldError("ServiceID", "service does not exist")
 		}
 	case "23505": // unique constraint
 		if strings.HasPrefix(dbErr.ConstraintName, dbErr.TableName+"_name") || dbErr.ConstraintName == "auth_basic_users_username_key" {
@@ -41,6 +43,9 @@ func MapDBError(err error) error {
 		if dbErr.ConstraintName == "heartbeat_monitor_name_service_id" {
 			return validation.NewFieldError("Name", "heartbeat monitor already exists with that name")
 		}
+		if dbErr.ConstraintName == "idx_no_alert_duplicates" {
+			return validation.NewFieldError("", "duplicate alert already exists")
+		}
 	case "23514": // check constraint
 		newErr := mapLimitError(dbErr)
 		if newErr != nil {

web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.js

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react'
+import p from 'prop-types'
+import {
+  makeStyles,
+  Button,
+  Grid,
+  Stepper,
+  Step,
+  StepLabel,
+  Typography,
+} from '@material-ui/core'
+import OpenInNewIcon from '@material-ui/icons/OpenInNew'
+import _ from 'lodash-es'
+
+import { useCreateAlerts } from './useCreateAlerts'
+import { fieldErrors, allErrors } from '../../util/errutil'
+import FormDialog from '../../dialogs/FormDialog'
+import { CreateAlertForm } from './StepContent/CreateAlertForm'
+import { CreateAlertReview } from './StepContent/CreateAlertReview'
+
+const pluralize = num => (num !== 1 ? 's' : '')
+
+const useStyles = makeStyles(theme => ({
+  dialog: {
+    [theme.breakpoints.up('md')]: {
+      height: '65vh',
+    },
+  },
+  flexGrow: {
+    flexGrow: 1,
+  },
+}))
+
+export default function CreateAlertDialog(props) {
+  const classes = useStyles()
+  const [step, setStep] = useState(0)
+  const [value, setValue] = useState({
+    summary: '',
+    details: '',
+    serviceIDs: props.serviceID ? [props.serviceID] : [],
+  })
+  const [mutate, { data, loading, error }, getSvcID] = useCreateAlerts(value)
+
+  const fieldErrs = fieldErrors(error)
+  const hasValidationError = fieldErrs.some(e =>
+    ['summary', 'details'].includes(e.field),
+  )
+
+  useEffect(() => {
+    if (hasValidationError) {
+      setStep(0)
+    }
+  }, [hasValidationError])
+
+  const hasCompleted = Boolean(data) && !hasValidationError
+  const currentStep = loading ? 2 : step
+
+  const stepTitles = props.serviceID
+    ? ['Alert Info', 'Confirm']
+    : ['Alert Info', 'Service Selection', 'Confirm']
+
+  const onNext = () => {
+    if (currentStep === 0 && props.serviceID) {
+      setStep(currentStep + 2)
+    } else if (currentStep < 2) {
+      setStep(currentStep + 1)
+    }
+  }
+
+  let review, reviewTitle
+  if (hasCompleted) {
+    const createdAlertIDs = _.chain(data)
+      .values()
+      .filter()
+      .map(a => a.id)
+      .value()
+
+    const failedServices = allErrors(error).map(e => ({
+      id: getSvcID(e.path),
+      message: e.message,
+    }))
+
+    const failMessage = failedServices.length
+      ? `(${failedServices.length} failed)`
+      : ''
+
+    const titleMessage = `Successfully created ${
+      createdAlertIDs.length
+    } alert${pluralize(createdAlertIDs.length)} ${failMessage}`
+
+    reviewTitle = (
+      <Grid container>
+        <Grid item>
+          <Typography>{titleMessage}</Typography>
+        </Grid>
+        <Grid item className={classes.flexGrow} />
+        <Grid item>
+          <Button
+            variant='contained'
+            color='primary'
+            size='small'
+            endIcon={<OpenInNewIcon />}
+            href={`/alerts?allServices=1&filter=all&search=${encodeURIComponent(
+              value.summary,
+            )}`}
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            Monitor Alerts
+          </Button>
+        </Grid>
+      </Grid>
+    )
+
+    review = (
+      <CreateAlertReview
+        createdAlertIDs={createdAlertIDs}
+        failedServices={failedServices}
+      />
+    )
+  }
+
+  return (
+    <FormDialog
+      title='Create New Alert'
+      alert={hasCompleted}
+      primaryActionLabel={hasCompleted ? 'Done' : null}
+      onClose={props.onClose}
+      loading={loading}
+      subTitle={
+        reviewTitle || (
+          <Stepper activeStep={currentStep}>
+            {stepTitles.map((title, idx) => (
+              <Step key={idx}>
+                <StepLabel>{title}</StepLabel>
+              </Step>
+            ))}
+          </Stepper>
+        )
+      }
+      form={
+        review || (
+          <CreateAlertForm
+            activeStep={currentStep}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+            disabled={loading}
+            errors={fieldErrors(error)}
+          />
+        )
+      }
+      PaperProps={{ className: classes.dialog }}
+      onSubmit={() => (hasCompleted ? props.onClose() : mutate())}
+      onNext={currentStep < 2 ? onNext : null}
+      onBack={currentStep > 0 ? () => setStep(currentStep - 1) : null}
+    />
+  )
+}
+
+CreateAlertDialog.propTypes = {
+  onClose: p.func.isRequired,
+  serviceID: p.string,
+}

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertConfirm.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Typography, Grid, Divider } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { ServiceChip } from '../../../util/Chips'
+import { FormField } from '../../../forms'
+import Markdown from '../../../util/Markdown'
+
+const useStyles = makeStyles({
+  itemContent: {
+    marginTop: '0.5em',
+  },
+  itemTitle: {
+    paddingBottom: 0,
+  },
+  markdown: {
+    '& p': {
+      marginBlockStart: 0,
+      marginBlockEnd: 0,
+      whiteSpace: 'pre-wrap',
+    },
+  },
+})
+
+export function CreateAlertConfirm() {
+  const classes = useStyles()
+
+  const renderItem = ({ name, label, value, children }) => (
+    <Grid item xs={12}>
+      <Typography
+        variant='subtitle1'
+        component='h3'
+        className={classes.itemTitle}
+      >
+        {label}
+      </Typography>
+
+      <Divider />
+
+      <div className={classes.itemContent}>
+        {children ||
+          (name === 'details' ? (
+            <Typography
+              variant='body1'
+              className={classes.markdown}
+              component={Markdown}
+              value={value}
+            />
+          ) : (
+            <Typography variant='body1' component='p'>
+              {value}
+            </Typography>
+          ))}
+      </div>
+    </Grid>
+  )
+
+  return (
+    <Grid container spacing={2}>
+      <FormField name='summary' label='Summary' required render={renderItem} />
+      <FormField name='details' label='Details' render={renderItem} />
+
+      <FormField
+        label='Selected Services'
+        name='serviceIDs'
+        render={({ value, ...otherProps }) =>
+          renderItem({
+            ...otherProps,
+            label: `Selected Services (${value.length})`,
+            children: value.map(id => (
+              <ServiceChip
+                key={id}
+                clickable={false}
+                id={id}
+                style={{ margin: 3 }}
+                onClick={e => e.preventDefault()}
+              />
+            )),
+          })
+        }
+      />
+    </Grid>
+  )
+}

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertForm.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import p from 'prop-types'
+import { FormContainer, FormField } from '../../../forms'
+import { CreateAlertInfo } from './CreateAlertInfo'
+import { CreateAlertServiceSelect } from './CreateAlertServiceSelect'
+import { CreateAlertConfirm } from './CreateAlertConfirm'
+
+export function CreateAlertForm(props) {
+  const { activeStep, ...otherProps } = props
+
+  return (
+    <FormContainer optionalLabels {...otherProps}>
+      {activeStep === 0 && <CreateAlertInfo />}
+      {activeStep === 1 && (
+        <FormField
+          required
+          render={props => <CreateAlertServiceSelect {...props} />}
+          name='serviceIDs'
+        />
+      )}
+      {activeStep === 2 && <CreateAlertConfirm />}
+    </FormContainer>
+  )
+}
+
+CreateAlertForm.propTypes = {
+  activeStep: p.number.isRequired,
+  value: p.shape({
+    summary: p.string,
+    details: p.string,
+    serviceIDs: p.arrayOf(p.string),
+  }),
+  errors: p.arrayOf(
+    p.shape({
+      field: p.oneOf(['summary', 'details', 'serviceID']).isRequired,
+      message: p.string.isRequired,
+    }),
+  ),
+}

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertInfo.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Grid, TextField } from '@material-ui/core'
+import { FormField } from '../../../forms'
+
+export function CreateAlertInfo() {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <FormField
+          fullWidth
+          label='Alert Summary'
+          name='summary'
+          required
+          component={TextField}
+        />
+      </Grid>
+      <Grid item xs={12}>
+        <FormField
+          fullWidth
+          multiline
+          rows={7}
+          variant='outlined'
+          placeholder='Alert Details'
+          name='details'
+          component={TextField}
+        />
+      </Grid>
+    </Grid>
+  )
+}