ui/escalation-policy: Add Alerts sub-page

test/integration/service.spec.ts

@@ -185,6 +185,28 @@ test('Alerts', async ({ page, isMobile }) => {
   await expect(page.getByTestId('service-recent-events')).toContainText(
     'Closed',
   )
+
+  // Validate availability from EP page
+  await page.locator('a[href^="/escalation-policies/"]').click()
+  await page
+    .getByRole('link', {
+      name: 'Manage alerts specific to services using this policy',
+    })
+    .click()
+
+  // Wait for data-ql=true and data-ql-ready=true
+  await page.waitForSelector('[data-ql="true"][data-ql-ready="true"]')
+  await expect(page.getByText('No results')).toBeVisible()
+
+  await page.getByRole('tab', { name: 'CLOSED' }).click()
+  // ensure the tab has aria-selected=true
+  await expect(
+    page.getByRole('tab', { name: 'CLOSED', selected: true }),
+  ).toBeVisible()
+
+  await expect(
+    page.getByRole('link', { name: ' CLOSED ' + summary }),
+  ).toBeVisible()
 })
 
 test('Metric', async ({ page, isMobile }) => {

web/src/app/alerts/AlertsList.tsx

@@ -22,11 +22,11 @@ import { NotificationContext } from '../main/SnackbarNotification'
 import ReactGA from 'react-ga4'
 import { useConfigValue } from '../util/RequireConfig'
 import AlertFeedbackDialog from './components/AlertFeedbackDialog'
+import { Target } from 'web/src/schema'
 
-interface AlertsListProps {
-  serviceID: string
+type AlertsListProps = {
   secondaryActions?: ReactElement
-}
+} & ({ serviceID: string } | { policyID: string })
 
 interface MutationVariables {
   input: MutationVariablesInput
@@ -124,6 +124,9 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
   const [fullTime] = useURLParam('fullTime', false)
   const [filter] = useURLParam<string>('filter', 'active')
 
+  const serviceID = 'serviceID' in props ? props.serviceID : ''
+  const policyID = 'policyID' in props ? props.policyID : ''
+
   useEffect(() => {
     if (analyticsID && event.length)
       ReactGA.event({ category: 'Bulk Alert Action', action: event })
@@ -139,19 +142,46 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
         }
       }
     `,
-    variables: { id: props.serviceID || '' },
-    pause: !props.serviceID,
+    variables: { id: serviceID },
+    pause: !serviceID,
   })
 
+  // query for current policy name if props.policyID is provided
+  const [policyInfoQuery] = useQuery({
+    query: gql`
+      query ($id: ID!) {
+        escalationPolicy(id: $id) {
+          id
+          name
+          assignedTo {
+            id
+            type
+          }
+        }
+      }
+    `,
+    variables: { id: policyID },
+    pause: !policyID,
+  })
+  const policyServiceIDs: string[] = (
+    policyInfoQuery.data?.escalationPolicy.assignedTo ?? []
+  )
+    .filter((a: Target) => a.type === 'service')
+    .map((a: Target) => a.id)
+
   // alerts list query variables
   const variables = {
     input: {
       filterByStatus: getStatusFilter(filter),
       first: 25,
-      // default to favorites only, unless viewing alerts from a service's page
-      favoritesOnly: !props.serviceID && !allServices,
-      includeNotified: !props.serviceID, // keep service list alerts specific to that service,
-      filterByServiceID: props.serviceID ? [props.serviceID] : null,
+      // default to favorites only, unless viewing alerts from a service or policy page
+      favoritesOnly: !serviceID && !policyID && !allServices,
+      includeNotified: !serviceID && !policyID, // keep service list alerts specific to that service,
+      filterByServiceID: serviceID
+        ? [serviceID]
+        : policyID
+          ? policyServiceIDs
+          : null,
     },
   }
 
@@ -250,9 +280,12 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
       return `Showing ${filter} alerts for all services.`
     }
 
-    if (props.serviceID && serviceNameQuery.data?.service?.name) {
+    if (serviceID && serviceNameQuery.data?.service?.name) {
       return `Showing ${filter} alerts for the service ${serviceNameQuery.data.service.name}.`
     }
+    if (policyID && policyInfoQuery.data?.escalationPolicy?.name) {
+      return `Showing ${filter} alerts for all services using the policy ${policyInfoQuery.data.escalationPolicy.name}.`
+    }
   }
 
   /*
@@ -298,7 +331,7 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
   return (
     <React.Fragment>
       <Grid container direction='column' spacing={2}>
-        <ServiceNotices serviceID={props.serviceID} />
+        <ServiceNotices serviceID={serviceID} />
         <Grid item>
           <QueryList
             query={alertsListQuery}
@@ -311,8 +344,7 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
               title: `${a.alertID}: ${a.status
                 .toUpperCase()
                 .replace('STATUS', '')}`,
-              subText:
-                (props.serviceID ? '' : a.service.name + ': ') + a.summary,
+              subText: (serviceID ? '' : a.service.name + ': ') + a.summary,
               action: (
                 <ListItemText
                   className={classes.alertTimeContainer}
@@ -330,13 +362,14 @@ export default function AlertsList(props: AlertsListProps): React.JSX.Element {
             variables={variables}
             secondaryActions={
               props?.secondaryActions ?? (
-                <AlertsListFilter serviceID={props.serviceID} />
+                <AlertsListFilter allowShowAll={!serviceID && !policyID} />
               )
             }
             renderCreateDialog={(onClose) => (
               <CreateAlertDialog
-                serviceID={props.serviceID}
+                serviceID={serviceID}
                 onClose={onClose}
+                onlyIDs={policyID ? policyServiceIDs : undefined}
               />
             )}
             createLabel='Alert'

web/src/app/alerts/CreateAlertDialog/CreateAlertDialog.tsx

@@ -40,6 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 export default function CreateAlertDialog(props: {
   onClose: () => void
   serviceID?: string
+  onlyIDs?: string[]
 }): React.JSX.Element {
   const classes = useStyles()
   const [step, setStep] = useState(0)
@@ -156,6 +157,7 @@ export default function CreateAlertDialog(props: {
             onChange={(newValue: Value) => setValue(newValue)}
             disabled={loading}
             errors={fieldErrors(error)}
+            onlyIDs={props.onlyIDs}
           />
         )
       }

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

@@ -24,6 +24,8 @@ interface CreateAlertFormProps {
   // Enables functionality to remove an incoming value at it's index from
   // an array field if the new value is falsey.
   removeFalseyIdxs?: boolean
+
+  onlyIDs?: string[]
 }
 
 // TODO: remove this interface once FormContainer.js has been converted to TS
@@ -44,7 +46,7 @@ export function CreateAlertForm({
         <FormField
           required
           render={(props: CreateAlertServiceSelectProps) => (
-            <CreateAlertServiceSelect {...props} />
+            <CreateAlertServiceSelect {...props} only={otherProps.onlyIDs} />
           )}
           name='serviceIDs'
         />

web/src/app/alerts/CreateAlertDialog/StepContent/CreateAlertServiceSelect.tsx

@@ -73,6 +73,7 @@ export interface CreateAlertServiceSelectProps {
   value: string[]
   onChange: (val: string[]) => void
   error?: Error
+  only?: string[]
 }
 
 export function CreateAlertServiceSelect(
@@ -94,6 +95,7 @@ export function CreateAlertServiceSelect(
         favoritesFirst: true,
         omit: value,
         first: 15,
+        only: props.only,
       },
     },
   })

web/src/app/alerts/components/AlertsListFilter.tsx

@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 interface AlertsListFilterProps {
-  serviceID: string
+  allowShowAll?: boolean
 }
 
 function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
@@ -74,7 +74,7 @@ function AlertsListFilter(props: AlertsListFilterProps): React.JSX.Element {
 
   function renderFilters(): React.JSX.Element {
     let favoritesFilter = null
-    if (!props.serviceID) {
+    if (props.allowShowAll) {
       favoritesFilter = (
         <FormControlLabel
           control={

web/src/app/escalation-policies/PolicyAlertsList.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import AlertsList from '../alerts/AlertsList'
+
+export default function ServiceAlerts(props: {
+  policyID: string
+}): JSX.Element {
+  return <AlertsList policyID={props.policyID} />
+}

web/src/app/escalation-policies/PolicyDetails.tsx

@@ -5,12 +5,13 @@ import { Edit, Delete } from '@mui/icons-material'
 import PolicyStepsQuery from './PolicyStepsQuery'
 import PolicyDeleteDialog from './PolicyDeleteDialog'
 import { QuerySetFavoriteButton } from '../util/QuerySetFavoriteButton'
-import DetailsPage from '../details/DetailsPage'
+import DetailsPage, { LinkStatus } from '../details/DetailsPage'
 import PolicyEditDialog from './PolicyEditDialog'
 import { GenericError, ObjectNotFound } from '../error-pages'
 import Spinner from '../loading/components/Spinner'
 import { EPAvatar } from '../util/avatars'
 import { Redirect } from 'wouter'
+import { Target } from 'web/src/schema'
 
 const query = gql`
   query ($id: ID!) {
@@ -24,10 +25,38 @@ const query = gql`
         message
         details
       }
+
+      assignedTo {
+        id
+        type
+      }
+    }
+  }
+`
+const alertStatusQuery = gql`
+  query policyAlertStatusQuery($serviceIDs: [ID!]!) {
+    alerts(
+      input: {
+        filterByStatus: [StatusAcknowledged, StatusUnacknowledged]
+        filterByServiceID: $serviceIDs
+        first: 1
+      }
+    ) {
+      nodes {
+        id
+        status
+      }
     }
   }
 `
 
+const alertStatus = (a: { status: string }[]): LinkStatus | null => {
+  if (!a) return null
+  if (!a.length) return 'ok'
+  if (a[0].status === 'StatusUnacknowledged') return 'err'
+  return 'warn'
+}
+
 export default function PolicyDetails(props: {
   policyID: string
 }): React.JSX.Element {
@@ -40,6 +69,14 @@ export default function PolicyDetails(props: {
       id: props.policyID,
     },
   })
+  const [alertStatusResult] = useQuery({
+    query: alertStatusQuery,
+    variables: {
+      serviceIDs: _data?.escalationPolicy?.assignedTo
+        .filter((a: Target) => a.type === 'service')
+        .map((a: Target) => a.id),
+    },
+  })
 
   const data = _.get(_data, 'escalationPolicy', null)
 
@@ -80,6 +117,12 @@ export default function PolicyDetails(props: {
           />,
         ]}
         links={[
+          {
+            label: 'Alerts',
+            status: alertStatus(alertStatusResult.data?.alerts?.nodes),
+            url: 'alerts',
+            subText: 'Manage alerts specific to services using this policy',
+          },
           {
             label: 'Services',
             url: 'services',

web/src/app/lists/QueryList.tsx

@@ -226,7 +226,7 @@ export default function QueryList(props: QueryListProps): React.JSX.Element {
   }
 
   return (
-    <Grid container spacing={2}>
+    <Grid container spacing={2} data-ql='true' data-ql-ready={!isLoading}>
       {renderList()}
       {!props.infiniteScroll && (
         <PageControls

web/src/app/main/AppRoutes.tsx

@@ -45,6 +45,7 @@ import AdminSwitchoverGuide from '../admin/switchover/AdminSwitchoverGuide'
 import UniversalKeyPage from '../services/UniversalKey/UniversalKeyPage'
 import { useExpFlag } from '../util/useExpFlag'
 import AdminMaint from '../admin/AdminMaint'
+import PolicyAlertsList from '../escalation-policies/PolicyAlertsList'
 
 // ParamRoute will pass route parameters as props to the route's child.
 function ParamRoute(props: RouteProps): React.JSX.Element {
@@ -96,6 +97,7 @@ export const routes: Record<string, JSXElementConstructor<any>> = {
   '/escalation-policies': PolicyList,
   '/escalation-policies/:policyID': PolicyDetails,
   '/escalation-policies/:policyID/services': PolicyServicesQuery,
+  '/escalation-policies/:policyID/alerts': PolicyAlertsList,
 
   '/services': ServiceList,
   '/services/:serviceID': ServiceDetails,

web/src/app/schedules/temp-sched/TempSchedShiftsList.tsx

@@ -189,11 +189,7 @@ export default function TempSchedShiftsList({
 
           let diffColor = ''
           const compare = (compareWith: Shift[]): boolean => {
-            console.log()
             const res = compareWith.find((val) => {
-              // console.log('shiftStart: ', DateTime.fromISO(s.start))
-              // console.log('compareVal: ', DateTime.fromISO(val.start), '\n')
-
               return (
                 DateTime.fromISO(s.start).toISO() ===
                   DateTime.fromISO(val.start).toISO() &&

web/src/app/services/ServiceAlerts.tsx

@@ -51,7 +51,7 @@ export default function ServiceAlerts(props: {
   const secondaryActions = (
     <Grid className={classes.filter} container spacing={2} alignItems='center'>
       <Grid item>
-        <AlertsListFilter serviceID={props.serviceID} />
+        <AlertsListFilter />
       </Grid>
       <Grid item>
         <ButtonGroup variant='outlined'>

web/src/app/util/QuerySetFavoriteButton.tsx

@@ -78,7 +78,6 @@ export function QuerySetFavoriteButton({
         isFavorite={isFavorite}
         loading={!data && fetching}
         onClick={() => {
-          console.log(toTitleCase(type))
           commit(
             {
               input: { target: { id, type }, favorite: !isFavorite },