Alert dashboard update on monitor

public/pages/Dashboard/containers/Dashboard.js

@@ -32,10 +32,10 @@ import { EuiBasicTable, EuiButton, EuiHorizontalRule, EuiIcon } from '@elastic/e
 import ContentPanel from '../../../components/ContentPanel';
 import DashboardEmptyPrompt from '../components/DashboardEmptyPrompt';
 import DashboardControls from '../components/DashboardControls';
-import { columns, alertColumns } from '../utils/tableUtils';
-import { OPENSEARCH_DASHBOARDS_AD_PLUGIN } from '../../../utils/constants';
+import { columns, alertColumns, bucketColumns, queryColumns } from '../utils/tableUtils';
+import { MONITOR_TYPE, OPENSEARCH_DASHBOARDS_AD_PLUGIN } from '../../../utils/constants';
 import { backendErrorNotification } from '../../../utils/helpers';
-import { groupAlertsByTrigger } from '../utils/helpers';
+import { groupAlertsByTrigger, insertGroupByColumn } from '../utils/helpers';
 
 const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50];
 const DEFAULT_QUERY_PARAMS = {
@@ -196,7 +196,7 @@ export default class Dashboard extends Component {
       };
       const queryParamsString = queryString.stringify(params);
       location.search;
-      const { httpClient, history, notifications } = this.props;
+      const { httpClient, history, notifications, perAlertView } = this.props;
       history.replace({ ...this.props.location, search: queryParamsString });
       httpClient.get('../api/alerting/alerts', { query: params }).then((resp) => {
         if (resp.ok) {
@@ -208,6 +208,13 @@ export default class Dashboard extends Component {
             totalTriggers: alertsByTriggers.length,
             alertsByTriggers,
           });
+          if (!perAlertView) {
+            const alertsByTriggers = groupAlertsByTrigger(alerts);
+            this.setState({
+              totalTriggers: alertsByTriggers.length,
+              alertsByTriggers,
+            });
+          }
         } else {
           console.log('error getting alerts:', resp);
           backendErrorNotification(notifications, 'get', 'alerts', resp.err);
@@ -318,9 +325,23 @@ export default class Dashboard extends Component {
       totalAlerts,
       totalTriggers,
     } = this.state;
-    const { monitorIds, detectorIds, onCreateTrigger } = this.props;
-    const perAlertView = typeof onCreateTrigger === 'function';
+    const {
+      monitorIds,
+      detectorIds,
+      onCreateTrigger,
+      perAlertView,
+      monitorType,
+      groupBy,
+    } = this.props;
     const totalItems = perAlertView ? totalAlerts : totalTriggers;
+    const isBucketMonitor = monitorType === MONITOR_TYPE.BUCKET_LEVEL;
+
+    const columnType = perAlertView
+      ? isBucketMonitor
+        ? insertGroupByColumn(groupBy)
+        : queryColumns
+      : alertColumns;
+
     const pagination = {
       pageIndex: page,
       pageSize: size,
@@ -357,6 +378,11 @@ export default class Dashboard extends Component {
       return actions;
     };
 
+    const getItemId = (item) => {
+      if (perAlertView && isBucketMonitor) return item.id;
+      return `${item.triggerID}-${item.version}`;
+    };
+
     return (
       <ContentPanel
         title={perAlertView ? 'Alerts' : 'Alerts by triggers'}
@@ -385,8 +411,8 @@ export default class Dashboard extends Component {
            * because the next getAlerts have the same id
            * $id-$version will correctly remove selected items
            * */
-          itemId={(item) => `${item.triggerID}-${item.version}`}
-          columns={perAlertView ? columns : alertColumns}
+          itemId={getItemId}
+          columns={columnType}
           pagination={pagination}
           sorting={sorting}
           isSelectable={true}

public/pages/Dashboard/utils/helpers.js

@@ -9,7 +9,9 @@
  * GitHub history for details.
  */
 
+import _ from 'lodash';
 import { EMPTY_ALERT_LIST } from './constants';
+import { bucketColumns } from './tableUtils';
 
 export function groupAlertsByTrigger(alerts) {
   let alertsByTriggers = new Map();
@@ -59,3 +61,16 @@ export function addAlert(alertList, newAlert) {
   //Compare start time and last updated time
   return alertList;
 }
+
+export function insertGroupByColumn(groupBy) {
+  let result = _.cloneDeep(bucketColumns);
+  groupBy.map((fieldName) =>
+    result.splice(0, 0, {
+      field: `agg_alert_content.bucket.key.${fieldName}`,
+      name: fieldName,
+      sortable: false,
+      truncateText: false,
+    })
+  );
+  return result;
+}

public/pages/Dashboard/utils/tableUtils.js

@@ -38,17 +38,7 @@ const renderTime = (time) => {
   return DEFAULT_EMPTY_DATA;
 };
 
-const renderAggAlertContent = (keys) => {
-  return keys.length
-    ? keys
-        .map((item) => {
-          return item;
-        })
-        .join(', ')
-    : '-';
-};
-
-export const columns = [
+export const queryColumns = [
   {
     field: 'start_time',
     name: 'Alert start time',
@@ -65,16 +55,6 @@ export const columns = [
     render: renderTime,
     dataType: 'date',
   },
-  {
-    field: 'monitor_name',
-    name: 'Monitor name',
-    sortable: true,
-    truncateText: true,
-    textOnly: true,
-    render: (name, alert) => (
-      <EuiLink href={`${PLUGIN_NAME}#/monitors/${alert.monitor_id}`}>{name}</EuiLink>
-    ),
-  },
   {
     field: 'trigger_name',
     name: 'Trigger name',
@@ -107,12 +87,51 @@ export const columns = [
     render: renderTime,
     dataType: 'date',
   },
+];
+
+export const bucketColumns = [
+  {
+    field: 'start_time',
+    name: 'Alert start time',
+    sortable: true,
+    truncateText: false,
+    render: renderTime,
+    dataType: 'date',
+  },
   {
-    field: 'agg_alert_content',
-    name: 'Aggregation alert content',
+    field: 'end_time',
+    name: 'Alert last updated',
     sortable: true,
     truncateText: false,
-    render: (content) => (content ? renderAggAlertContent(content.bucket_keys) : '-'),
+    render: (endTime, alert) => {
+      const ackTime = alert.acknowledged_time;
+      return renderTime(Math.max(endTime, ackTime));
+    },
+    dataType: 'date',
+  },
+  {
+    field: 'state',
+    name: 'State',
+    sortable: false,
+    truncateText: false,
+    render: (state, alert) => {
+      const stateText =
+        typeof state !== 'string' ? DEFAULT_EMPTY_DATA : _.capitalize(state.toLowerCase());
+      return state === ALERT_STATE.ERROR ? `${stateText}: ${alert.error_message}` : stateText;
+    },
+  },
+  {
+    field: 'trigger_name',
+    name: 'Trigger name',
+    sortable: true,
+    truncateText: true,
+    textOnly: true,
+  },
+  {
+    field: 'severity',
+    name: 'Severity',
+    sortable: false,
+    truncateText: false,
   },
 ];
 

public/pages/Home/Home.js

@@ -110,7 +110,12 @@ export default class Home extends Component {
               exact
               path="/dashboard"
               render={(props) => (
-                <Dashboard {...props} httpClient={httpClient} notifications={notifications} />
+                <Dashboard
+                  {...props}
+                  httpClient={httpClient}
+                  notifications={notifications}
+                  perAlertView={false}
+                />
               )}
             />
             <Route

public/pages/MonitorDetails/containers/MonitorDetails.js

@@ -50,6 +50,7 @@ import {
   TRIGGER_ACTIONS,
   OPENSEARCH_DASHBOARDS_AD_PLUGIN,
   MONITOR_INPUT_DETECTOR_ID,
+  MONITOR_GROUP_BY,
 } from '../../../utils/constants';
 import { migrateTriggerMetadata } from './utils/helpers';
 import { backendErrorNotification } from '../../../utils/helpers';
@@ -245,6 +246,7 @@ export default class MonitorDetails extends Component {
     const { action } = queryString.parse(location.search);
     const updatingMonitor = action === MONITOR_ACTIONS.UPDATE_MONITOR;
     const detectorId = get(monitor, MONITOR_INPUT_DETECTOR_ID, undefined);
+    const groupBy = get(monitor, MONITOR_GROUP_BY);
     if (loading) {
       return (
         <EuiFlexGroup justifyContent="center" alignItems="center" style={{ marginTop: '100px' }}>
@@ -354,6 +356,9 @@ export default class MonitorDetails extends Component {
           location={location}
           history={history}
           notifications={notifications}
+          monitorType={monitor.monitor_type}
+          perAlertView={true}
+          groupBy={groupBy}
         />
       </div>
     );

public/utils/constants.js

@@ -80,3 +80,5 @@ export const MONITOR_INPUT_DETECTOR_ID = `inputs.${INPUTS_DETECTOR_ID}`;
 export const AD_PREVIEW_DAYS = 7;
 
 export const MAX_QUERY_RESULT_SIZE = 200;
+
+export const MONITOR_GROUP_BY = 'ui_metadata.search.groupBy';