[Monitoring] Elasticsearch monitoring to EUI

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',
     }
   ];
 

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

@@ -29,15 +29,15 @@ function StatusUI({ stats, intl }) {
         defaultMessage: 'Servers',
       }),
       value: total,
-      dataTestSubj: 'total'
+      'data-test-subj': 'total'
     },
     {
       label: intl.formatMessage({
         id: 'xpack.monitoring.apm.instances.status.totalEventsLabel',
         defaultMessage: 'Total Events',
       }),
       value: formatMetric(totalEvents, '0.[0]a'),
-      dataTestSubj: 'totalEvents'
+      'data-test-subj': 'totalEvents'
     },
     {
       label: intl.formatMessage({
@@ -49,7 +49,7 @@ function StatusUI({ stats, intl }) {
         defaultMessage: '{timeOfLastEvent} ago' }, {
         timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE)
       }),
-      dataTestSubj: 'timeOfLastEvent',
+      'data-test-subj': 'timeOfLastEvent',
     }
   ];
 

x-pack/plugins/monitoring/public/components/beats/beat/beat.js

@@ -7,8 +7,9 @@
 import React from 'react';
 import { MonitoringTimeseriesContainer } from '../../chart';
 import { formatMetric } from '../../../lib/format_number';
-import { EuiFlexItem, EuiFlexGroup, EuiPage, EuiPageBody, EuiFlexGrid, EuiSpacer } from '@elastic/eui';
+import { EuiFlexItem, EuiPage, EuiPageBody, EuiFlexGrid, EuiSpacer, EuiPageContent } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n/react';
+import { SummaryStatus } from '../../summary_status';
 
 function BeatUi({ summary, metrics, intl, ...props }) {
 
@@ -23,122 +24,90 @@ function BeatUi({ summary, metrics, intl, ...props }) {
     metrics.beat_handles,
   ];
 
-  const wrapChild = ({ label, value, dataTestSubj }, index) => (
-    <EuiFlexItem
-      key={`summary-status-item-${index}`}
-      grow={false}
-      data-test-subj={dataTestSubj}
-    >
-      <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
-        <EuiFlexItem grow={false}>
-          {label ? label + ': ' : null}
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <strong>{value}</strong>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  );
-
   const summarytStatsTop = [
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.nameLabel', defaultMessage: 'Name' }),
       value: summary.name,
-      dataTestSubj: 'name'
+      'data-test-subj': 'name'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.hostLabel', defaultMessage: 'Host' }),
       value: summary.transportAddress,
-      dataTestSubj: 'host'
+      'data-test-subj': 'host'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.versionLabel', defaultMessage: 'Version' }),
       value: summary.version,
-      dataTestSubj: 'version'
+      'data-test-subj': 'version'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.typeLabel', defaultMessage: 'Type' }),
       value: summary.type,
-      dataTestSubj: 'type'
+      'data-test-subj': 'type'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.outputLabel', defaultMessage: 'Output' }),
       value: summary.output,
-      dataTestSubj: 'output'
+      'data-test-subj': 'output'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.configReloadsLabel', defaultMessage: 'Config reloads' }),
       value: formatMetric(summary.configReloads, 'int_commas'),
-      dataTestSubj: 'configReloads'
+      'data-test-subj': 'configReloads'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.uptimeLabel', defaultMessage: 'Uptime' }),
       value: formatMetric(summary.uptime, 'time_since'),
-      dataTestSubj: 'uptime'
+      'data-test-subj': 'uptime'
     },
   ];
 
   const summarytStatsBot = [
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.eventsTotalLabel', defaultMessage: 'Events total' }),
       value: formatMetric(summary.eventsTotal, 'int_commas'),
-      dataTestSubj: 'eventsTotal'
+      'data-test-subj': 'eventsTotal'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.eventsEmittedLabel', defaultMessage: 'Events emitted' }),
       value: formatMetric(summary.eventsEmitted, 'int_commas'),
-      dataTestSubj: 'eventsEmitted'
+      'data-test-subj': 'eventsEmitted'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.eventsDroppedLabel', defaultMessage: 'Events dropped' }),
       value: formatMetric(summary.eventsDropped, 'int_commas'),
-      dataTestSubj: 'eventsDropped'
+      'data-test-subj': 'eventsDropped'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.bytesSentLabel', defaultMessage: 'Bytes sent' }),
       value: formatMetric(summary.bytesWritten, 'byte'),
-      dataTestSubj: 'bytesWritten'
+      'data-test-subj': 'bytesWritten'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.handlesLimitSoftLabel', defaultMessage: 'Handles limit (soft)' }),
       value: formatMetric(summary.handlesSoftLimit, 'byte'),
-      dataTestSubj: 'handlesLimitSoft'
+      'data-test-subj': 'handlesLimitSoft'
     },
     {
       label: intl.formatMessage({ id: 'xpack.monitoring.beats.instance.handlesLimitHardLabel', defaultMessage: 'Handles limit (hard)' }),
       value: formatMetric(summary.handlesHardLimit, 'byte'),
-      dataTestSubj: 'handlesLimitHard'
+      'data-test-subj': 'handlesLimitHard'
     },
   ];
 
   return (
-    <div>
-      <div className="monSummaryStatus" role="status">
-        <div {...props}>
-          <EuiFlexGroup gutterSize="none" alignItems="center" data-test-subj="beatSummaryStatus01">
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup>
-                {summarytStatsTop.map(wrapChild)}
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </div>
-      </div>
-
-      <div className="monSummaryStatus" role="status">
-        <div {...props}>
-          <EuiFlexGroup gutterSize="none" alignItems="center" data-test-subj="beatSummaryStatus02">
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup>
-                {summarytStatsBot.map(wrapChild)}
-              </EuiFlexGroup>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </div>
-      </div>
-
-      <EuiPage style={{ backgroundColor: 'white' }}>
-        <EuiPageBody>
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageContent>
+          <SummaryStatus
+            metrics={summarytStatsTop}
+            data-test-subj="beatSummaryStatus01"
+          />
+          <SummaryStatus
+            metrics={summarytStatsBot}
+            data-test-subj="beatSummaryStatus02"
+          />
+          <EuiSpacer size="m"/>
           <EuiFlexGrid columns={2} gutterSize="none">
             {metricsToShow.map((metric, index) => (
               <EuiFlexItem key={index} style={{ width: '50%' }}>
@@ -150,9 +119,9 @@ function BeatUi({ summary, metrics, intl, ...props }) {
               </EuiFlexItem>
             ))}
           </EuiFlexGrid>
-        </EuiPageBody>
-      </EuiPage>
-    </div>
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
   );
 }
 

x-pack/plugins/monitoring/public/components/beats/stats.js

@@ -4,80 +4,51 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { get } from 'lodash';
 import React from 'react';
 import { formatMetric } from 'plugins/monitoring/lib/format_number';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { SummaryStatus } from '../summary_status';
 
 export function Stats({ stats }) {
-  const types = stats.types.map(({ type, count }, index) => {
-    return (
-      <EuiFlexItem
-        key={`type-${index}`}
-        data-test-subj="typeCount"
-        data-test-type-count={type + ':' + count}
-        grow={false}
-      >
-        <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
-          <EuiFlexItem grow={false}>
-            {type ? type + ': ' : null}
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <strong>{formatMetric(count, 'int_commas')}</strong>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    );
+  const {
+    total,
+    types,
+    stats: {
+      bytesSent,
+      totalEvents,
+    }
+  } = stats;
+
+  const metrics = [
+    {
+      label: 'Total Beats',
+      value: formatMetric(total, 'int_commas'),
+      'data-test-subj': 'totalBeats'
+    },
+  ];
+
+  metrics.push(...types.map(({ type, count }) => ({
+    label: type,
+    value: formatMetric(count, 'int_commas'),
+    'data-test-subj': 'typeCount',
+    'data-test-type-count': `${type}:${count}`
+  })));
+
+  metrics.push({
+    label: 'Total Events',
+    value: formatMetric(totalEvents, '0.[0]a'),
+    'data-test-subj': 'totalEvents'
   });
 
-  return (
-    <div className="monSummaryStatus" role="status" data-test-subj="beatsSummaryStatus">
-
-      <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <FormattedMessage
-            id="xpack.monitoring.beats.overview.totalBeatsLabel"
-            defaultMessage="Total Beats"
-          />
-          :&nbsp;
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <strong data-test-subj="totalBeats">
-            {formatMetric(get(stats, 'total'), 'int_commas')}
-          </strong>
-        </EuiFlexItem>
-
-        {types}
-
-        <EuiFlexItem grow={false}>
-          <FormattedMessage
-            id="xpack.monitoring.beats.overview.totalEventsLabel"
-            defaultMessage="Total Events"
-          />
-          :&nbsp;
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <strong data-test-subj="totalEvents">
-            {formatMetric(get(stats, 'stats.totalEvents'), '0.[0]a')}
-          </strong>
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <FormattedMessage
-            id="xpack.monitoring.beats.overview.bytesSentLabel"
-            defaultMessage="Bytes Sent"
-          />
-          :&nbsp;
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <strong data-test-subj="bytesSent">
-            {formatMetric(get(stats, 'stats.bytesSent'), 'byte')}
-          </strong>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+  metrics.push({
+    label: 'Bytes Sent',
+    value: formatMetric(bytesSent, 'byte'),
+    'data-test-subj': 'bytesSent'
+  });
 
-    </div>
+  return (
+    <SummaryStatus
+      metrics={metrics}
+      data-test-subj="beatsSummaryStatus"
+    />
   );
 }