[6.x] [Monitoring] Monitoring eui (#27064)

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,133 @@
+/*
+ * 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';
+import { injectI18n } from '@kbn/i18n/react';
+
+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'
+  },
+]);
+
+const AlertsUI = ({ alerts, angular, sorting, pagination, onTableChange, intl }) => {
+  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: intl.formatMessage({
+            id: 'xpack.monitoring.alerts.filterAlertsPlaceholder',
+            defaultMessage: 'Filter Alerts…'
+          })
+
+        },
+      }}
+      onTableChange={onTableChange}
+    />
+  );
+};
+
+export const Alerts = injectI18n(AlertsUI);

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/apm/instance/instance.js

@@ -12,7 +12,8 @@ import {
   EuiSpacer,
   EuiPage,
   EuiPageBody,
-  EuiFlexGroup
+  EuiFlexGroup,
+  EuiPageContent
 } from '@elastic/eui';
 import { Status } from './status';
 
@@ -46,13 +47,15 @@ export function ApmServerInstance({ summary, metrics, ...props }) {
   ));
 
   return (
-    <EuiPage style={{ backgroundColor: 'white' }}>
+    <EuiPage>
       <EuiPageBody>
-        <Status stats={summary}/>
-        <EuiSpacer size="s"/>
-        <EuiFlexGroup wrap>
-          {charts}
-        </EuiFlexGroup>
+        <EuiPageContent>
+          <Status stats={summary}/>
+          <EuiSpacer size="s"/>
+          <EuiFlexGroup wrap>
+            {charts}
+          </EuiFlexGroup>
+        </EuiPageContent>
       </EuiPageBody>
     </EuiPage>
   );

x-pack/plugins/monitoring/public/components/apm/instance/status.js

@@ -29,31 +29,31 @@ function StatusUI({ stats, intl }) {
         defaultMessage: 'Name',
       }),
       value: name,
-      dataTestSubj: 'name'
+      'data-test-subj': 'name'
     },
     {
       label: intl.formatMessage({
         id: 'xpack.monitoring.apm.instance.status.outputLabel',
         defaultMessage: 'Output',
       }),
       value: output,
-      dataTestSubj: 'output'
+      'data-test-subj': 'output'
     },
     {
       label: intl.formatMessage({
         id: 'xpack.monitoring.apm.instance.status.versionLabel',
         defaultMessage: 'Version',
       }),
       value: version,
-      dataTestSubj: 'version'
+      'data-test-subj': 'version'
     },
     {
       label: intl.formatMessage({
         id: 'xpack.monitoring.apm.instance.status.uptimeLabel',
         defaultMessage: 'Uptime',
       }),
       value: formatMetric(uptime, 'time_since'),
-      dataTestSubj: 'uptime'
+      'data-test-subj': 'uptime'
     },
     {
       label: intl.formatMessage({
@@ -65,7 +65,7 @@ function StatusUI({ stats, intl }) {
         defaultMessage: '{timeOfLastEvent} ago' }, {
         timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE)
       }),
-      dataTestSubj: 'timeOfLastEvent',
+      'data-test-subj': 'timeOfLastEvent',
     }
   ];