mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Monitoring] use react components for Kibana directives (#19379)
* kibana cluster status directive use react component * fix some functional test failures
This commit is contained in:
Tim Sullivan
GitHub
parent
8fd613ffdb
commit
6eea4eae0f
11 changed files with 158 additions and 91 deletions
|
|
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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]);
|
||||
});
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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]);
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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`;
|
||||
|
|
|
|||
|
|
@ -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`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue