[Monitoring] use react components for Kibana directives (#19379) (#19432)

* kibana cluster status directive use react component

* fix some functional test failures

x-pack/plugins/monitoring/public/components/kibana/cluster_status/index.js

@@ -0,0 +1,65 @@
+/*
+ * 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, { Fragment } from 'react';
+import { SummaryStatus } from '../../summary_status';
+import { KibanaStatusIcon } from '../status_icon';
+import { formatMetric } from '../../../lib/format_number';
+
+export function ClusterStatus({ stats }) {
+  const {
+    concurrent_connections: connections,
+    count: instances,
+    memory_limit: memLimit,
+    memory_size: memSize,
+    requests_total: requests,
+    response_time_max: maxResponseTime,
+    status,
+  } = stats;
+
+  const children = [
+    {
+      label: 'Instances',
+      value: instances,
+      dataTestSubj: 'instances'
+    },
+    {
+      label: 'Memory',
+      value: formatMetric(memSize, 'byte') + ' / ' + formatMetric(memLimit, 'byte'),
+      dataTestSubj: 'memory'
+    },
+    {
+      label: 'Requests',
+      value: requests,
+      dataTestSubj: 'requests'
+    },
+    {
+      label: 'Connections',
+      value: connections,
+      dataTestSubj: 'connections'
+    },
+    {
+      label: 'Max. Response Time',
+      value: formatMetric(maxResponseTime, '0', 'ms'),
+      dataTestSubj: 'maxResponseTime'
+    }
+  ];
+
+  const IconComponent = ({ status }) => (
+    <Fragment>
+      Status: <KibanaStatusIcon status={status} />
+    </Fragment>
+  );
+
+  return (
+    <SummaryStatus
+      children={children}
+      status={status}
+      IconComponent={IconComponent}
+      data-test-subj="kibanaClusterStatus"
+    />
+  );
+}

x-pack/plugins/monitoring/public/components/kibana/detail_status/index.js

@@ -0,0 +1,57 @@
+/*
+ * 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, { Fragment } from 'react';
+import { SummaryStatus } from '../../summary_status';
+import { KibanaStatusIcon } from '../status_icon';
+import { formatMetric } from '../../../lib/format_number';
+
+export function DetailStatus({ stats }) {
+  const {
+    transport_address: transportAddress,
+    os_memory_free: osFreeMemory,
+    version,
+    uptime,
+    status
+  } = stats;
+
+  const children = [
+    {
+      value: transportAddress,
+      dataTestSubj: 'transportAddress'
+    },
+    {
+      label: 'OS Free Memory',
+      value: formatMetric(osFreeMemory, 'byte'),
+      dataTestSubj: 'osFreeMemory'
+    },
+    {
+      label: 'Version',
+      value: version,
+      dataTestSubj: 'version'
+    },
+    {
+      label: 'Uptime',
+      value: formatMetric(uptime, 'time_since'),
+      dataTestSubj: 'uptime'
+    }
+  ];
+
+  const IconComponent = ({ status }) => (
+    <Fragment>
+      Status: <KibanaStatusIcon status={status} />
+    </Fragment>
+  );
+
+  return (
+    <SummaryStatus
+      children={children}
+      status={status}
+      IconComponent={IconComponent}
+      data-test-subj="kibanaDetailStatus"
+    />
+  );
+}

x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.html

@@ -1,40 +0,0 @@
-<div class="monitoring-summary-status" role="status">
-  <div
-    class="monitoring-summary-status__content"
-    data-test-subj="kibanaSummaryStatus"
-  >
-    <div>Instances:
-      <strong data-test-subj="instances">
-        {{ status.count }}
-      </strong>
-    </div>
-    <div>Memory:
-      <strong data-test-subj="memory">
-        {{ status.memory_size|formatNumber:'byte' }} / {{ status.memory_limit|formatNumber:'byte' }}
-      </strong>
-    </div>
-    <div>Requests:
-      <strong data-test-subj="requests">
-        {{ status.requests_total }}
-      </strong>
-    </div>
-    <div>Connections:
-      <strong data-test-subj="connections">
-        {{ status.concurrent_connections|formatNumber:'int_commas' }}
-      </strong>
-    </div>
-    <div>Max. Response Time:
-      <strong data-test-subj="maxResponseTime">
-        {{ status.response_time_max }} ms
-      </strong>
-    </div>
-    <div class="monitoring-summary-status__status-indicator">
-      Health:
-      <monitoring-kibana-status-icon
-        status="status.status"
-        title="Overall status of Kibana instances in the cluster: {{ status.status }}"
-      ></monitoring-kibana-status-icon>
-      {{ status.status|capitalize }}
-    </div>
-  </div>
-</div>

x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js

@@ -4,16 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
+import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
-import template from './index.html';
+import { ClusterStatus } from 'plugins/monitoring/components/kibana/cluster_status';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringClusterStatusKibana', () => {
   return {
     restrict: 'E',
-    template,
     scope: {
-      status: '='
-    }
+      status: '=',
+    },
+    link(scope, $el) {
+      scope.$watch('status', status => {
+        render(<ClusterStatus stats={status} />, $el[0]);
+      });
+    },
   };
 });

x-pack/plugins/monitoring/public/directives/kibana/summary/index.html

@@ -1,27 +0,0 @@
-<div class="monitoring-summary-status" role="status">
-  <div
-    class="monitoring-summary-status__content"
-    data-test-subj="kibanaInstanceStatus"
-  >
-    <div>
-      <strong data-test-subj="transportAddress">{{ kibana.transport_address }}</strong>
-    </div>
-    <div>OS Free Memory:
-      <strong data-test-subj="osFreeMemory">{{ kibana.os_memory_free|formatNumber:'byte' }}</strong>
-    </div>
-    <div>Version:
-      <strong data-test-subj="version">{{ kibana.version }}</strong>
-    </div>
-    <div>Uptime:
-      <strong data-test-subj="uptime">{{ kibana.uptime|formatNumber:'time_since' }}</strong>
-    </div>
-    <div class="monitoring-summary-status__status-indicator">
-      Health:
-      <monitoring-kibana-status-icon
-        status="kibana.status"
-        title="Status of this Kibana instance: {{ kibana.status }}"
-      ></monitoring-kibana-status-icon>
-      {{ kibana.status|capitalize }}
-    </div>
-  </div>
-</div>

x-pack/plugins/monitoring/public/directives/kibana/summary/index.js

@@ -4,16 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
+import { render } from 'react-dom';
 import { uiModules } from 'ui/modules';
-import template from './index.html';
+import { DetailStatus } from 'plugins/monitoring/components/kibana/detail_status';
 
 const uiModule = uiModules.get('monitoring/directives', []);
 uiModule.directive('monitoringKibanaSummary', () => {
   return {
     restrict: 'E',
-    template: template,
     scope: {
       kibana: '='
+    },
+    link(scope, $el) {
+      scope.$watch('kibana', kibana => {
+        render(<DetailStatus stats={kibana} />, $el[0]);
+      });
     }
   };
 });

x-pack/test/functional/apps/monitoring/kibana/instance.js

@@ -34,12 +34,12 @@ export default function ({ getService, getPageObjects }) {
       await tearDown();
     });
 
-    it('Kibana Instance Summary Status shows correct info', async () => {
+    it('should have Instance Summary Status showing correct info', async () => {
       expect(await instance.getSummary()).to.eql({
         transportAddress: 'tsullivan.local:5601',
-        osFreeMemory: '1.5 GB',
-        version: '7.0.0-alpha1',
-        uptime: '3 minutes',
+        osFreeMemory: 'OS Free Memory: 1.5 GB',
+        version: 'Version: 7.0.0-alpha1',
+        uptime: 'Uptime: 3 minutes',
         health: 'Health: green',
       });
     });

x-pack/test/functional/apps/monitoring/kibana/instances.js

@@ -30,13 +30,13 @@ export default function ({ getService, getPageObjects }) {
       await tearDown();
     });
 
-    it('Kibana Cluster Summary Status shows correct info', async () => {
+    it('should have Kibana Cluster Summary Status showing correct info', async () => {
       expect(await kibanaClusterSummaryStatus.getContent()).to.eql({
-        instances: '1',
-        memory: '219.6 MB / 1.4 GB',
-        requests: '174',
-        connections: '174',
-        maxResponseTime: '2203 ms',
+        instances: 'Instances: 1',
+        memory: 'Memory: 219.6 MB / 1.4 GB',
+        requests: 'Requests: 174',
+        connections: 'Connections: 174',
+        maxResponseTime: 'Max. Response Time: 2203 ms',
         health: 'Health: green',
       });
     });

x-pack/test/functional/apps/monitoring/kibana/overview.js

@@ -30,13 +30,13 @@ export default function ({ getService, getPageObjects }) {
       await tearDown();
     });
 
-    it('Kibana Cluster Summary Status shows correct info', async () => {
+    it('should have Kibana Cluster Summary Status showing correct info', async () => {
       expect(await kibanaClusterSummaryStatus.getContent()).to.eql({
-        instances: '1',
-        memory: '219.6 MB / 1.4 GB',
-        requests: '174',
-        connections: '174',
-        maxResponseTime: '2203 ms',
+        instances: 'Instances: 1',
+        memory: 'Memory: 219.6 MB / 1.4 GB',
+        requests: 'Requests: 174',
+        connections: 'Connections: 174',
+        maxResponseTime: 'Max. Response Time: 2203 ms',
         health: 'Health: green',
       });
     });

x-pack/test/functional/services/monitoring/kibana_instance.js

@@ -10,7 +10,7 @@ export function MonitoringKibanaInstanceProvider({ getService }) {
 
   const SUBJ_INSTANCE_PAGE = 'kibanaInstancePage';
 
-  const SUBJ_SUMMARY = 'kibanaInstanceStatus';
+  const SUBJ_SUMMARY = 'kibanaDetailStatus';
   const SUBJ_SUMMARY_TRANSPORT_ADDRESS = `${SUBJ_SUMMARY} transportAddress`;
   const SUBJ_SUMMARY_OS_FREE_MEMORY = `${SUBJ_SUMMARY} osFreeMemory`;
   const SUBJ_SUMMARY_VERSION = `${SUBJ_SUMMARY} version`;

x-pack/test/functional/services/monitoring/kibana_summary_status.js

@@ -7,7 +7,7 @@
 export function MonitoringKibanaSummaryStatusProvider({ getService }) {
   const testSubjects = getService('testSubjects');
 
-  const SUBJ_SUMMARY = 'kibanaSummaryStatus';
+  const SUBJ_SUMMARY = 'kibanaClusterStatus';
   const SUBJ_SUMMARY_INSTANCES = `${SUBJ_SUMMARY} instances`;
   const SUBJ_SUMMARY_MEMORY = `${SUBJ_SUMMARY} memory`;
   const SUBJ_SUMMARY_REQUESTS = `${SUBJ_SUMMARY} requests`;