[Uptime] Monitor status alert use url as instance

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_instances.tsx

@@ -7,7 +7,7 @@
 import React, { Fragment, useState } from 'react';
 import moment, { Duration } from 'moment';
 import { i18n } from '@kbn/i18n';
-import { EuiBasicTable, EuiHealth, EuiSpacer, EuiSwitch } from '@elastic/eui';
+import { EuiBasicTable, EuiHealth, EuiSpacer, EuiSwitch, EuiToolTip } from '@elastic/eui';
 // @ts-ignore
 import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/lib/services';
 import { padStart, chunk } from 'lodash';
@@ -47,13 +47,21 @@ export const alertInstancesTableColumns = (
     sortable: false,
     truncateText: true,
     'data-test-subj': 'alertInstancesTableCell-instance',
+    render: (value: string) => {
+      return (
+        <EuiToolTip anchorClassName={'eui-textTruncate'} content={value}>
+          <span>{value}</span>
+        </EuiToolTip>
+      );
+    },
   },
   {
     field: 'status',
     name: i18n.translate(
       'xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.status',
       { defaultMessage: 'Status' }
     ),
+    width: '100px',
     render: (value: AlertInstanceListItemStatus, instance: AlertInstanceListItem) => {
       return (
         <EuiHealth color={value.healthColor}>
@@ -67,6 +75,7 @@ export const alertInstancesTableColumns = (
   },
   {
     field: 'start',
+    width: '200px',
     render: (value: Date | undefined, instance: AlertInstanceListItem) => {
       return value ? moment(value).format('D MMM YYYY @ HH:mm:ss') : '';
     },
@@ -88,11 +97,13 @@ export const alertInstancesTableColumns = (
       { defaultMessage: 'Duration' }
     ),
     sortable: false,
+    width: '100px',
     'data-test-subj': 'alertInstancesTableCell-duration',
   },
   {
     field: '',
     align: RIGHT_ALIGNMENT,
+    width: '60px',
     name: i18n.translate(
       'xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.mute',
       { defaultMessage: 'Mute' }
@@ -180,6 +191,7 @@ export function AlertInstances({
         })}
         columns={alertInstancesTableColumns(onMuteAction, readOnly)}
         data-test-subj="alertInstancesList"
+        tableLayout="fixed"
       />
     </Fragment>
   );

x-pack/plugins/uptime/server/lib/alerts/__tests__/status_check.test.ts

@@ -1205,10 +1205,10 @@ describe('status check alert', () => {
     it('creates a set of unique IDs from a list of composite unique objects', () => {
       expect(getUniqueIdsByLoc(downItems, availItems)).toEqual(
         new Set<string>([
-          'firstharrisburg',
-          'firstfairbanks',
-          'secondharrisburg',
-          'secondfairbanks',
+          'first-harrisburg',
+          'first-fairbanks',
+          'second-harrisburg',
+          'second-fairbanks',
         ])
       );
     });

x-pack/plugins/uptime/server/lib/alerts/status_check.ts

@@ -31,11 +31,21 @@ import { UMServerLibs } from '../lib';
 
 const { MONITOR_STATUS } = ACTION_GROUP_DEFINITIONS;
 
+const getMonIdByLoc = (monitorId: string, location: string) => {
+  return monitorId + '-' + location;
+};
+
 const uniqueDownMonitorIds = (items: GetMonitorStatusResult[]): Set<string> =>
-  items.reduce((acc, { monitorId, location }) => acc.add(monitorId + location), new Set<string>());
+  items.reduce(
+    (acc, { monitorId, location }) => acc.add(getMonIdByLoc(monitorId, location)),
+    new Set<string>()
+  );
 
 const uniqueAvailMonitorIds = (items: GetMonitorAvailabilityResult[]): Set<string> =>
-  items.reduce((acc, { monitorId, location }) => acc.add(monitorId + location), new Set<string>());
+  items.reduce(
+    (acc, { monitorId, location }) => acc.add(getMonIdByLoc(monitorId, location)),
+    new Set<string>()
+  );
 
 export const getUniqueIdsByLoc = (
   downMonitorsByLocation: GetMonitorStatusResult[],
@@ -157,6 +167,21 @@ export const getStatusMessage = (
   return statusMessage + availabilityMessage;
 };
 
+const getInstanceId = (monitorInfo: Ping, monIdByLoc: string) => {
+  const normalizeText = (txt: string) => {
+    // replace url and name special characters with -
+    return txt.replace(/[^A-Z0-9]+/gi, '_').toLowerCase();
+  };
+  const urlText = normalizeText(monitorInfo.url?.full || '');
+
+  const monName = normalizeText(monitorInfo.monitor.name || '');
+
+  if (monName) {
+    return `${monName}_${urlText}_${monIdByLoc}`;
+  }
+  return `${urlText}_${monIdByLoc}`;
+};
+
 export const statusCheckAlertFactory: UptimeAlertTypeFactory = (_server, libs) =>
   uptimeAlertWrapper({
     id: 'xpack.uptime.alerts.monitorStatus',
@@ -290,7 +315,9 @@ export const statusCheckAlertFactory: UptimeAlertTypeFactory = (_server, libs) =
         for (const monitorLoc of downMonitorsByLocation) {
           const monitorInfo = monitorLoc.monitorInfo;
 
-          const alertInstance = alertInstanceFactory(MONITOR_STATUS.id + monitorLoc.location);
+          const alertInstance = alertInstanceFactory(
+            getInstanceId(monitorInfo, monitorLoc.location)
+          );
 
           const monitorSummary = getMonitorSummary(monitorInfo);
           const statusMessage = getStatusMessage(monitorInfo);
@@ -320,19 +347,21 @@ export const statusCheckAlertFactory: UptimeAlertTypeFactory = (_server, libs) =
       const mergedIdsByLoc = getUniqueIdsByLoc(downMonitorsByLocation, availabilityResults);
 
       mergedIdsByLoc.forEach((monIdByLoc) => {
-        const alertInstance = alertInstanceFactory(MONITOR_STATUS.id + monIdByLoc);
-
         const availMonInfo = availabilityResults.find(
-          ({ monitorId, location }) => monitorId + location === monIdByLoc
+          ({ monitorId, location }) => getMonIdByLoc(monitorId, location) === monIdByLoc
         );
 
         const downMonInfo = downMonitorsByLocation.find(
-          ({ monitorId, location }) => monitorId + location === monIdByLoc
+          ({ monitorId, location }) => getMonIdByLoc(monitorId, location) === monIdByLoc
         )?.monitorInfo;
 
-        const monitorSummary = getMonitorSummary(downMonInfo || availMonInfo?.monitorInfo!);
+        const monitorInfo = downMonInfo || availMonInfo?.monitorInfo!;
+
+        const monitorSummary = getMonitorSummary(monitorInfo);
         const statusMessage = getStatusMessage(downMonInfo!, availMonInfo!, availability);
 
+        const alertInstance = alertInstanceFactory(getInstanceId(monitorInfo, monIdByLoc));
+
         alertInstance.replaceState({
           ...updateState(state, true),
           ...monitorSummary,