From 6eea4eae0fdcdc99208fc0408a9668ff88686719 Mon Sep 17 00:00:00 2001 From: Tim Sullivan Date: Thu, 24 May 2018 18:05:51 -0700 Subject: [PATCH] [Monitoring] use react components for Kibana directives (#19379) * kibana cluster status directive use react component * fix some functional test failures --- .../components/kibana/cluster_status/index.js | 65 +++++++++++++++++++ .../components/kibana/detail_status/index.js | 57 ++++++++++++++++ .../kibana/cluster_status/index.html | 40 ------------ .../directives/kibana/cluster_status/index.js | 14 ++-- .../directives/kibana/summary/index.html | 27 -------- .../public/directives/kibana/summary/index.js | 10 ++- .../apps/monitoring/kibana/instance.js | 8 +-- .../apps/monitoring/kibana/instances.js | 12 ++-- .../apps/monitoring/kibana/overview.js | 12 ++-- .../services/monitoring/kibana_instance.js | 2 +- .../monitoring/kibana_summary_status.js | 2 +- 11 files changed, 158 insertions(+), 91 deletions(-) create mode 100644 x-pack/plugins/monitoring/public/components/kibana/cluster_status/index.js create mode 100644 x-pack/plugins/monitoring/public/components/kibana/detail_status/index.js delete mode 100644 x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.html delete mode 100644 x-pack/plugins/monitoring/public/directives/kibana/summary/index.html diff --git a/x-pack/plugins/monitoring/public/components/kibana/cluster_status/index.js b/x-pack/plugins/monitoring/public/components/kibana/cluster_status/index.js new file mode 100644 index 000000000000..3a92daff46fe --- /dev/null +++ b/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 }) => ( + + Status: + + ); + + return ( + + ); +} diff --git a/x-pack/plugins/monitoring/public/components/kibana/detail_status/index.js b/x-pack/plugins/monitoring/public/components/kibana/detail_status/index.js new file mode 100644 index 000000000000..83d04fdb187a --- /dev/null +++ b/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 }) => ( + + Status: + + ); + + return ( + + ); +} diff --git a/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.html b/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.html deleted file mode 100644 index d8edd487a749..000000000000 --- a/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.html +++ /dev/null @@ -1,40 +0,0 @@ -
-
-
Instances: - - {{ status.count }} - -
-
Memory: - - {{ status.memory_size|formatNumber:'byte' }} / {{ status.memory_limit|formatNumber:'byte' }} - -
-
Requests: - - {{ status.requests_total }} - -
-
Connections: - - {{ status.concurrent_connections|formatNumber:'int_commas' }} - -
-
Max. Response Time: - - {{ status.response_time_max }} ms - -
-
- Health: - - {{ status.status|capitalize }} -
-
-
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js b/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js index 92da0af8b6e9..1582966b5951 100644 --- a/x-pack/plugins/monitoring/public/directives/kibana/cluster_status/index.js +++ b/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(, $el[0]); + }); + }, }; }); diff --git a/x-pack/plugins/monitoring/public/directives/kibana/summary/index.html b/x-pack/plugins/monitoring/public/directives/kibana/summary/index.html deleted file mode 100644 index e35d727cd52e..000000000000 --- a/x-pack/plugins/monitoring/public/directives/kibana/summary/index.html +++ /dev/null @@ -1,27 +0,0 @@ -
-
-
- {{ kibana.transport_address }} -
-
OS Free Memory: - {{ kibana.os_memory_free|formatNumber:'byte' }} -
-
Version: - {{ kibana.version }} -
-
Uptime: - {{ kibana.uptime|formatNumber:'time_since' }} -
-
- Health: - - {{ kibana.status|capitalize }} -
-
-
diff --git a/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js b/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js index b11066a951f9..1077ed579420 100644 --- a/x-pack/plugins/monitoring/public/directives/kibana/summary/index.js +++ b/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(, $el[0]); + }); } }; }); diff --git a/x-pack/test/functional/apps/monitoring/kibana/instance.js b/x-pack/test/functional/apps/monitoring/kibana/instance.js index ef5890fe4e3a..9429bc97e807 100644 --- a/x-pack/test/functional/apps/monitoring/kibana/instance.js +++ b/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', }); }); diff --git a/x-pack/test/functional/apps/monitoring/kibana/instances.js b/x-pack/test/functional/apps/monitoring/kibana/instances.js index 5733b21eaf5e..7372ff816d98 100644 --- a/x-pack/test/functional/apps/monitoring/kibana/instances.js +++ b/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', }); }); diff --git a/x-pack/test/functional/apps/monitoring/kibana/overview.js b/x-pack/test/functional/apps/monitoring/kibana/overview.js index 233ec99513ea..a1e884f90b2f 100644 --- a/x-pack/test/functional/apps/monitoring/kibana/overview.js +++ b/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', }); }); diff --git a/x-pack/test/functional/services/monitoring/kibana_instance.js b/x-pack/test/functional/services/monitoring/kibana_instance.js index 2b43de3bb5ce..718482ea32cb 100644 --- a/x-pack/test/functional/services/monitoring/kibana_instance.js +++ b/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`; diff --git a/x-pack/test/functional/services/monitoring/kibana_summary_status.js b/x-pack/test/functional/services/monitoring/kibana_summary_status.js index de92050bf107..37ea0339cde0 100644 --- a/x-pack/test/functional/services/monitoring/kibana_summary_status.js +++ b/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`;