Skip to content

Commit

Permalink
[Monitoring] Elasticsearch monitoring to EUI (#26217)
Browse files Browse the repository at this point in the history 
* Convert cluster alerts page to use EUI tables. Also adds baseline support for all monitoring tables

* Fix tests

* Remove these two files

* Keep the original table but offer a new one so existing UIs still work

* Use different base table controller for the EUI table

* Use EUI specific asc and desc constants

* Update summary status

* ES nodes

* Indices page

* ML job listing

* Fix tests up

* Node listing page

* Advanced node page

* Advanced index

* Fix tests

* Fix onBrush

* Cluster listing page

* Update snapshots

* Fix functional tests

* Fix more tests

* Remove commented out code
  • Loading branch information
@chrisronline
chrisronline authored Dec 12, 2018
1 parent 48a425c commit 481dd13
Show file tree
Hide file tree
Showing 78 changed files with 1,833 additions and 1,692 deletions.
10 changes: 5 additions & 5 deletions x-pack/plugins/monitoring/public/components/apm/instance/status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -65,7 +65,7 @@ function StatusUI({ stats, intl }) {
defaultMessage: '{timeOfLastEvent} ago' }, {
timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE)
}),
dataTestSubj: 'timeOfLastEvent',
'data-test-subj': 'timeOfLastEvent',
}
];

Expand Down
6 changes: 3 additions & 3 deletions x-pack/plugins/monitoring/public/components/apm/instances/status.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -49,7 +49,7 @@ function StatusUI({ stats, intl }) {
defaultMessage: '{timeOfLastEvent} ago' }, {
timeOfLastEvent: formatTimestampToDuration(+moment(timeOfLastEvent), CALCULATE_DURATION_SINCE)
}),
dataTestSubj: 'timeOfLastEvent',
'data-test-subj': 'timeOfLastEvent',
}
];

Expand Down
91 changes: 30 additions & 61 deletions x-pack/plugins/monitoring/public/components/beats/beat/beat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {

Expand All @@ -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%' }}>
Expand All @@ -150,9 +119,9 @@ function BeatUi({ summary, metrics, intl, ...props }) {
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiPageBody>
</EuiPage>
</div>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
);
}

Expand Down
107 changes: 39 additions & 68 deletions x-pack/plugins/monitoring/public/components/beats/stats.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
);
}
Loading

0 comments on commit 481dd13

Please sign in to comment.