[Monitoring] Cluster alerts table to EUI (#26031)

* Convert cluster alerts page to use EUI tables. Also adds baseline support for all monitoring tables

* Fix tests

* Remove these two files

* Keep the original table but offer a new one so existing UIs still work

* Use different base table controller for the EUI table

* Use EUI specific asc and desc constants

x-pack/plugins/monitoring/common/constants.js

@@ -51,6 +51,8 @@ export const NORMALIZED_DERIVATIVE_UNIT = '1s';
  * Values for column sorting in table options
  * @type {number} 1 or -1
  */
+export const EUI_SORT_ASCENDING = 'asc';
+export const EUI_SORT_DESCENDING = 'desc';
 export const SORT_ASCENDING = 1;
 export const SORT_DESCENDING = -1;
 

x-pack/plugins/monitoring/public/components/alerts/alerts.js

@@ -0,0 +1,126 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { capitalize } from 'lodash';
+import { formatDateTimeLocal } from '../../../common/formatting';
+import { formatTimestampToDuration } from '../../../common';
+import { CALCULATE_DURATION_SINCE, EUI_SORT_DESCENDING } from '../../../common/constants';
+import { mapSeverity } from './map_severity';
+import { Tooltip } from 'plugins/monitoring/components/tooltip';
+import { FormattedAlert } from 'plugins/monitoring/components/alerts/formatted_alert';
+import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
+import { EuiHealth, EuiIcon } from '@elastic/eui';
+
+const linkToCategories = {
+  'elasticsearch/nodes': 'Elasticsearch Nodes',
+  'elasticsearch/indices': 'Elasticsearch Indices',
+  'kibana/instances': 'Kibana Instances',
+  'logstash/instances': 'Logstash Nodes',
+};
+const getColumns = (kbnUrl, scope) => ([
+  {
+    name: 'Status',
+    field: 'metadata.severity',
+    sortable: true,
+    render: severity => {
+      const severityIcon = mapSeverity(severity);
+
+      return (
+        <Tooltip text={severityIcon.title} placement="bottom" trigger="hover">
+          <EuiHealth color={severityIcon.color} data-test-subj="alertIcon" aria-label={severityIcon.title}>
+            { capitalize(severityIcon.value) }
+          </EuiHealth>
+        </Tooltip>
+      );
+    }
+  },
+  {
+    name: 'Resolved',
+    field: 'resolved_timestamp',
+    sortable: true,
+    render: (resolvedTimestamp) => {
+      const resolution = {
+        icon: null,
+        text: 'Not Resolved'
+      };
+
+      if (resolvedTimestamp) {
+        resolution.text = `${formatTimestampToDuration(resolvedTimestamp, CALCULATE_DURATION_SINCE)} ago`;
+      } else {
+        resolution.icon = <EuiIcon type="alert" size="m" aria-label="Not Resolved" />;
+      }
+
+      return (
+        <span>
+          { resolution.icon } { resolution.text }
+        </span>
+      );
+    },
+  },
+  {
+    name: 'Message',
+    field: 'message',
+    sortable: true,
+    render: (message, alert) => (
+      <FormattedAlert
+        prefix={alert.prefix}
+        suffix={alert.suffix}
+        message={message}
+        metadata={alert.metadata}
+        changeUrl={target => {
+          scope.$evalAsync(() => {
+            kbnUrl.changePath(target);
+          });
+        }}
+      />
+    )
+  },
+  {
+    name: 'Category',
+    field: 'metadata.link',
+    sortable: true,
+    render: link => linkToCategories[link] ? linkToCategories[link] : 'General'
+  },
+  {
+    name: 'Last Checked',
+    field: 'update_timestamp',
+    sortable: true,
+    render: timestamp => formatDateTimeLocal(timestamp)
+  },
+  {
+    name: 'Triggered',
+    field: 'timestamp',
+    sortable: true,
+    render: timestamp => formatTimestampToDuration(timestamp, CALCULATE_DURATION_SINCE) + ' ago'
+  },
+]);
+
+export const Alerts = ({ alerts, angular, sorting, pagination, onTableChange }) => {
+  return (
+    <EuiMonitoringTable
+      className="alertsTable"
+      rows={alerts}
+      columns={getColumns(angular.kbnUrl, angular.scope)}
+      sorting={{
+        ...sorting,
+        sort: {
+          ...sorting.sort,
+          field: 'metadata.severity',
+          direction: EUI_SORT_DESCENDING,
+        }
+      }}
+      pagination={pagination}
+      search={{
+        box: {
+          incremental: true,
+          placeholder: 'Filter Alerts...'
+        },
+      }}
+      onTableChange={onTableChange}
+    />
+  );
+};

x-pack/plugins/monitoring/public/components/alerts/index.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { Alerts } from './alerts';

x-pack/plugins/monitoring/public/components/table/eui_table.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import {
+  EuiInMemoryTable
+} from '@elastic/eui';
+
+export class EuiMonitoringTable extends React.PureComponent {
+  render() {
+    const {
+      rows: items,
+      search = {},
+      columns: _columns,
+      ...props
+    } = this.props;
+
+    if (search.box && !search.box['data-test-subj']) {
+      search.box['data-test-subj'] = 'monitoringTableToolBar';
+    }
+
+    const columns = _columns.map(column => {
+      if (!column['data-test-subj']) {
+        column['data-test-subj'] = 'monitoringTableHasData';
+      }
+      return column;
+    });
+
+    return (
+      <div data-test-subj={`${this.props.className}Container`}>
+        <EuiInMemoryTable
+          items={items}
+          search={search}
+          columns={columns}
+          {...props}
+        />
+      </div>
+    );
+  }
+}

x-pack/plugins/monitoring/public/components/table/index.js

@@ -5,4 +5,5 @@
  */
 
 export { MonitoringTable } from './table';
-export { tableStorageGetter, tableStorageSetter } from './storage';
+export { EuiMonitoringTable } from './eui_table';
+export { tableStorageGetter, tableStorageSetter, euiTableStorageGetter, euiTableStorageSetter } from './storage';

x-pack/plugins/monitoring/public/components/table/storage.js

@@ -33,3 +33,26 @@ export const tableStorageSetter = keyPrefix => {
     return localStorageData;
   };
 };
+
+export const euiTableStorageGetter = keyPrefix => {
+  return storage => {
+    const localStorageData = storage.get(STORAGE_KEY) || {};
+    const sort = get(localStorageData, [ keyPrefix, 'sort' ]);
+    const page  = get(localStorageData, [ keyPrefix, 'page' ]);
+
+    return { page, sort };
+  };
+};
+
+export const euiTableStorageSetter = keyPrefix => {
+  return (storage, { sort, page }) => {
+    const localStorageData = storage.get(STORAGE_KEY) || {};
+
+    set(localStorageData, [ keyPrefix, 'sort' ], sort || undefined); // don`t store empty data
+    set(localStorageData, [ keyPrefix, 'page' ], page || undefined);
+
+    storage.set(STORAGE_KEY, localStorageData);
+
+    return localStorageData;
+  };
+};