From de92f9b1b713133dfeb913a4f7003c76ce0b9fa7 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Thu, 31 Jan 2019 14:32:04 -0600 Subject: [PATCH] Monitoring design touchup (#29479) * UI design touchup for 7.0 * clean up chart titles and beta icon * Make shard list wrap on IE11 * wrap table cells with much content * fix title height above graphs on ie11 * update tests and snapshots * update functional test for node detail * fixing more functional tests --- x-pack/plugins/monitoring/public/_hacks.scss | 18 ++-- .../alerts/__tests__/map_severity.js | 6 +- .../public/components/alerts/map_severity.js | 6 +- .../public/components/beats/beat/beat.js | 14 +-- .../chart/monitoring_timeseries_container.js | 16 ++-- .../cluster/overview/alerts_panel.js | 27 +++--- .../components/cluster/overview/apm_panel.js | 2 +- .../cluster/overview/beats_panel.js | 2 +- .../cluster/overview/elasticsearch_panel.js | 2 +- .../cluster/overview/kibana_panel.js | 2 +- .../cluster/overview/logstash_panel.js | 65 ++++++++------ .../elasticsearch/index/advanced.js | 13 +-- .../components/elasticsearch/index/index.js | 13 +-- .../elasticsearch/indices/indices.js | 7 +- .../components/elasticsearch/node/advanced.js | 13 +-- .../components/elasticsearch/node/node.js | 13 +-- .../__snapshots__/cells.test.js.snap | 90 +++++++------------ .../components/elasticsearch/nodes/cells.js | 65 +++++++------- .../components/elasticsearch/nodes/nodes.js | 7 +- .../elasticsearch/overview/overview.js | 14 +-- .../shard_activity/source_destination.js | 4 +- .../shard_allocation/_shard_allocation.scss | 11 ++- .../public/components/license/index.js | 2 +- .../components/logstash/listing/listing.js | 8 +- .../public/components/logstash/node/node.js | 14 +-- .../components/logstash/overview/overview.js | 14 +-- .../pipeline_listing/pipeline_listing.js | 8 +- .../__snapshots__/summary_status.test.js.snap | 23 ++--- .../summary_status/summary_status.js | 7 +- .../public/directives/chart/_chart.scss | 7 -- .../elasticsearch/ml_job_listing/index.js | 7 +- .../public/directives/main/index.html | 4 +- .../public/views/kibana/instance/index.js | 22 +++-- .../public/views/kibana/instances/index.js | 8 +- .../public/views/kibana/overview/index.js | 8 +- .../views/logstash/node/advanced/index.js | 14 +-- .../public/views/logstash/node/index.js | 14 +-- .../apps/monitoring/beats/beat_detail.js | 22 ++--- .../apps/monitoring/beats/listing.js | 4 +- .../apps/monitoring/beats/overview.js | 4 +- .../monitoring/elasticsearch/index_detail.js | 30 +++---- .../apps/monitoring/elasticsearch/indices.js | 14 +-- .../monitoring/elasticsearch/node_detail.js | 48 +++++----- .../apps/monitoring/elasticsearch/nodes.js | 28 +++--- .../apps/monitoring/elasticsearch/overview.js | 14 +-- .../apps/monitoring/kibana/instance.js | 8 +- .../apps/monitoring/kibana/instances.js | 10 +-- .../apps/monitoring/kibana/overview.js | 10 +-- .../apps/monitoring/logstash/pipelines.js | 8 +- 49 files changed, 386 insertions(+), 384 deletions(-) diff --git a/x-pack/plugins/monitoring/public/_hacks.scss b/x-pack/plugins/monitoring/public/_hacks.scss index 8a09f1a39a63..d46d298f7aca 100644 --- a/x-pack/plugins/monitoring/public/_hacks.scss +++ b/x-pack/plugins/monitoring/public/_hacks.scss @@ -1,7 +1,10 @@ +@import '@elastic/eui/src/components/header/variables'; + #monitoring-app { - // SASSTODO: We need background colors till more of Kibana is converted - .tab-no-data, .tab-overview, .tab-license { + // SASSTODO: We need background colors till more of Kibana is converted + monitoring-main { background: $euiColorLightestShade; + height: calc(100vh - #{$euiHeaderChildSize}); } // SASSTODO: PUI tooltips can be replaced with EuiToolTip @@ -15,14 +18,13 @@ } // SASSTODO: Remove font awesome - .betaIcon { + .monTabs--icon { + margin-left: $euiSizeXS; color: $euiColorDarkShade; + font-size: $euiFontSize; } - // SASSTOD: Remove this, it comes from xpack_main/styles/main.less and was imported into monitoring - .xpack-breadcrumbs { - min-height: 37px; - padding: 8px 10px; - margin: 0; + .monCallout--meta { + margin-top: $euiSize; } } diff --git a/x-pack/plugins/monitoring/public/components/alerts/__tests__/map_severity.js b/x-pack/plugins/monitoring/public/components/alerts/__tests__/map_severity.js index f681f8d5e552..13734f1d96f2 100644 --- a/x-pack/plugins/monitoring/public/components/alerts/__tests__/map_severity.js +++ b/x-pack/plugins/monitoring/public/components/alerts/__tests__/map_severity.js @@ -13,7 +13,7 @@ describe('mapSeverity', () => { const low = { value: 'low', color: 'warning', - iconType: 'dot', + iconType: 'iInCircle', title: 'Low severity alert', }; @@ -30,7 +30,7 @@ describe('mapSeverity', () => { const medium = { value: 'medium', color: 'warning', - iconType: 'dot', + iconType: 'alert', title: 'Medium severity alert', }; @@ -47,7 +47,7 @@ describe('mapSeverity', () => { const high = { value: 'high', color: 'danger', - iconType: 'dot', + iconType: 'bell', title: 'High severity alert', }; diff --git a/x-pack/plugins/monitoring/public/components/alerts/map_severity.js b/x-pack/plugins/monitoring/public/components/alerts/map_severity.js index 2b3f34889340..a63e113df084 100644 --- a/x-pack/plugins/monitoring/public/components/alerts/map_severity.js +++ b/x-pack/plugins/monitoring/public/components/alerts/map_severity.js @@ -41,21 +41,21 @@ export function mapSeverity(severity) { mapped = { value: i18n.translate('xpack.monitoring.alerts.lowSeverityName', { defaultMessage: 'low' }), color: 'warning', - iconType: 'dot' + iconType: 'iInCircle' }; break; case 1: mapped = { value: i18n.translate('xpack.monitoring.alerts.mediumSeverityName', { defaultMessage: 'medium' }), color: 'warning', - iconType: 'dot' + iconType: 'alert' }; break; default: // severity >= 2000 mapped = { value: i18n.translate('xpack.monitoring.alerts.highSeverityName', { defaultMessage: 'high' }), color: 'danger', - iconType: 'dot' + iconType: 'bell' }; break; } diff --git a/x-pack/plugins/monitoring/public/components/beats/beat/beat.js b/x-pack/plugins/monitoring/public/components/beats/beat/beat.js index bc281c1bb703..e6a868d93433 100644 --- a/x-pack/plugins/monitoring/public/components/beats/beat/beat.js +++ b/x-pack/plugins/monitoring/public/components/beats/beat/beat.js @@ -7,7 +7,7 @@ import React from 'react'; import { MonitoringTimeseriesContainer } from '../../chart'; import { formatMetric } from '../../../lib/format_number'; -import { EuiFlexItem, EuiPage, EuiPageBody, EuiFlexGrid, EuiSpacer, EuiPageContent } from '@elastic/eui'; +import { EuiFlexItem, EuiPage, EuiPageBody, EuiFlexGrid, EuiSpacer, EuiPageContent, EuiPanel } from '@elastic/eui'; import { injectI18n } from '@kbn/i18n/react'; import { SummaryStatus } from '../../summary_status'; @@ -98,7 +98,7 @@ function BeatUi({ summary, metrics, intl, ...props }) { return ( - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js index 4a48424f9ed0..c0e485a0d00c 100644 --- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js +++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js @@ -37,11 +37,12 @@ function MonitoringTimeseriesContainerUI({ series, onBrush, intl }) { return ( - - - - - + + + + +

+ { getTitle(series) }{ units ? ` (${units})` : '' } -

- { getTitle(series) }{ units ? ` (${units})` : '' } -

- + diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js index de0318ea3f50..224c40d0ec68 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js @@ -18,7 +18,6 @@ import { EuiTitle, EuiButton, EuiText, - EuiTextColor, EuiSpacer, EuiCallOut, } from '@elastic/eui'; @@ -62,17 +61,15 @@ function AlertsPanelUi({ alerts, changeUrl, intl }) { changeUrl={changeUrl} /> -

- - - +

+

@@ -85,13 +82,13 @@ function AlertsPanelUi({ alerts, changeUrl, intl }) {
- -

+ +

-

+

diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js index d031f6a57e02..3983b6d7aa7a 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js @@ -39,7 +39,7 @@ function ApmPanelUi(props) { url="apm" title={props.intl.formatMessage({ id: 'xpack.monitoring.cluster.overview.apmPanel.apmTitle', defaultMessage: 'APM' })} > - + diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js index 1909698d5296..93d1bdf747a3 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js @@ -52,7 +52,7 @@ function BeatsPanelUi(props) { url="beats" title={props.intl.formatMessage({ id: 'xpack.monitoring.cluster.overview.beatsPanel.beatsTitle', defaultMessage: 'Beats' })} > - + diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js index a87e5b7232cc..93c1596b6dbc 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js @@ -82,7 +82,7 @@ function ElasticsearchPanelUi(props) { title="Elasticsearch" extras={licenseText} > - + diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js index e7e6e08717b2..d8cc9478e219 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js @@ -41,7 +41,7 @@ function KibanaPanelUi(props) { title={props.intl.formatMessage({ id: 'xpack.monitoring.cluster.overview.kibanaPanel.kibanaTitle', defaultMessage: 'Kibana' })} > - + diff --git a/x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js b/x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js index 6742df901771..6d47ff8381e9 100644 --- a/x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js +++ b/x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js @@ -11,6 +11,7 @@ import { LOGSTASH } from '../../../../common/constants'; import { EuiFlexGrid, + EuiFlexGroup, EuiFlexItem, EuiLink, EuiTitle, @@ -19,7 +20,7 @@ import { EuiDescriptionListTitle, EuiDescriptionListDescription, EuiHorizontalRule, - EuiToolTip + EuiIconTip, } from '@elastic/eui'; import { FormattedMessage, injectI18n } from '@kbn/i18n/react'; @@ -39,7 +40,7 @@ function LogstashPanelUi(props) { title={props.intl.formatMessage({ id: 'xpack.monitoring.cluster.overview.logstashPanel.logstashTitle', defaultMessage: 'Logstash' })} > - + @@ -128,33 +129,39 @@ function LogstashPanelUi(props) { - -

- - - - - { props.pipeline_count }) }} - /> - -

- + + + +

+ + { props.pipeline_count }) }} + /> + +

+ + + + + + diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js b/x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js index e64b488635e9..e18ec198a07a 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js @@ -9,6 +9,7 @@ import { EuiPage, EuiPageContent, EuiPageBody, + EuiPanel, EuiSpacer, EuiFlexGrid, EuiFlexItem, @@ -38,17 +39,19 @@ export const AdvancedIndex = ({ return ( - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js index 395fd3084e5e..01141494a313 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js @@ -9,6 +9,7 @@ import { EuiPage, EuiPageContent, EuiPageBody, + EuiPanel, EuiSpacer, EuiFlexGrid, EuiFlexItem, @@ -36,17 +37,19 @@ export const Index = ({ return ( - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js b/x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js index dceb2e2ab4e8..fd878f1b4d02 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/indices/indices.js @@ -16,6 +16,7 @@ import { EuiPage, EuiPageContent, EuiPageBody, + EuiPanel, EuiSwitch, EuiSpacer, } from '@elastic/eui'; @@ -148,9 +149,11 @@ const ElasticsearchIndicesUI = ({ return ( - + - + + + - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js b/x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js index 2cb8db083a81..3cb1f021e19e 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/node/node.js @@ -12,6 +12,7 @@ import { EuiSpacer, EuiFlexGrid, EuiFlexItem, + EuiPanel, } from '@elastic/eui'; import { NodeDetailStatus } from '../node_detail_status'; import { MonitoringTimeseriesContainer } from '../../chart'; @@ -36,17 +37,19 @@ export const Node = ({ return ( - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap index f737d2d435c0..678e96ee0a87 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap @@ -10,94 +10,68 @@ exports[`Node Listing Metric Cell should format N/A as the metric for an offline exports[`Node Listing Metric Cell should format a non-percentage metric 1`] = `
-

+

+ 206.3 GB  + +

-

-

- 206.3 GB  - -

+ 206.5 GB max
-
- 206.5 GB max -
-
- 206.3 GB min -
+ 206.3 GB min
-

`; exports[`Node Listing Metric Cell should format a percentage metric 1`] = `
-

+

+ 0%  + +

-

-

- 0%  - -

+ 2% max
-
- 2% max -
-
- 0% min -
+ 0% min
-

`; diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js index 11a0ba22dce6..9b462d00d287 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js @@ -7,7 +7,7 @@ import React from 'react'; import { get } from 'lodash'; import { formatMetric } from '../../../lib/format_number'; -import { EuiStat, EuiText, EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiText, EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; function OfflineCell() { @@ -38,40 +38,35 @@ function MetricCell({ isOnline, metric = {}, isPercent, ...props }) { const format = get(metric, 'metric.format'); return ( - - - -

- { metricVal(lastVal, format, isPercent) } -   - -

- - - - - {i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.maxText', { - defaultMessage: '{metric} max', - values: { - metric: metricVal(maxVal, format, isPercent) - } - })} - - - {i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.minText', { - defaultMessage: '{metric} min', - values: { - metric: metricVal(minVal, format, isPercent) - } - })} - - - - )} - /> + + + +

+ { metricVal(lastVal, format, isPercent) } +   + +

+ + + + + {i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.maxText', { + defaultMessage: '{metric} max', + values: { + metric: metricVal(maxVal, format, isPercent) + } + })} + + + {i18n.translate('xpack.monitoring.elasticsearch.nodes.cells.minText', { + defaultMessage: '{metric} min', + values: { + metric: metricVal(minVal, format, isPercent) + } + })} + + + ); } diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js index 185c37c9be12..99dfa0be64d4 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js @@ -17,6 +17,7 @@ import { EuiPage, EuiPageContent, EuiPageBody, + EuiPanel, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { injectI18n } from '@kbn/i18n/react'; @@ -207,9 +208,11 @@ function ElasticsearchNodesUI({ clusterStatus, nodes, showCgroupMetricsElasticse return ( - + - + + + - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/source_destination.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/source_destination.js index 291152c835c4..972adb8d96ff 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/source_destination.js +++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/source_destination.js @@ -11,14 +11,14 @@ import { SourceTooltip } from './source_tooltip'; export const SourceDestination = (props) => { const { sourceName, targetName, targetTransportAddress } = props; return ( - + {sourceName} - + - + diff --git a/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js b/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js index 2670501dab57..73ab862b4f0e 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js +++ b/x-pack/plugins/monitoring/public/components/logstash/listing/listing.js @@ -5,7 +5,7 @@ */ import React, { PureComponent } from 'react'; -import { EuiPage, EuiLink, EuiPageBody, EuiPageContent, EuiSpacer } from '@elastic/eui'; +import { EuiPage, EuiLink, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer } from '@elastic/eui'; import { formatPercentageUsage, formatNumber } from '../../../lib/format_number'; import { ClusterStatus } from '..//cluster_status'; import { EuiMonitoringTable } from '../../table'; @@ -125,9 +125,11 @@ class ListingUI extends PureComponent { return ( - + - + + + - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/components/logstash/overview/overview.js b/x-pack/plugins/monitoring/public/components/logstash/overview/overview.js index 09d48c797149..27725f93fd94 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/overview/overview.js +++ b/x-pack/plugins/monitoring/public/components/logstash/overview/overview.js @@ -5,7 +5,7 @@ */ import React, { PureComponent } from 'react'; -import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; import { ClusterStatus } from '../cluster_status'; import { MonitoringTimeseriesContainer } from '../../chart'; @@ -21,17 +21,19 @@ export class Overview extends PureComponent { return ( - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js index 73a78434e711..8bb69f6a9ef4 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_listing/pipeline_listing.js @@ -7,7 +7,7 @@ import React, { Component } from 'react'; import moment from 'moment'; import { partialRight } from 'lodash'; -import { EuiPage, EuiLink, EuiPageBody, EuiPageContent, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiPage, EuiLink, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { formatMetric } from '../../../lib/format_number'; import { ClusterStatus } from '../cluster_status'; import { Sparkline } from 'plugins/monitoring/components/sparkline'; @@ -148,9 +148,11 @@ class PipelineListingUI extends Component { return ( - + {this.renderStats()} - + + +

- Status: + Status

- Documents: + Documents

-

`; @@ -102,7 +99,7 @@ exports[`Summary Status Component should allow status to be optional 1`] = ` class="euiText euiText--small euiStat__description" >

- Free Disk Space: + Free Disk Space

- Documents: + Documents

-

`; @@ -157,7 +151,7 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = ` class="euiText euiText--small euiStat__description" >

- Status: + Status

- Free Disk Space: + Free Disk Space

- Documents: + Documents

-

`; diff --git a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js index 6f4d164de5d7..c5e859f2a790 100644 --- a/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js +++ b/x-pack/plugins/monitoring/public/components/summary_status/summary_status.js @@ -7,7 +7,7 @@ import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { isEmpty, capitalize } from 'lodash'; -import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiHorizontalRule } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiStat } from '@elastic/eui'; import { StatusIcon } from '../status_icon/index.js'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -22,7 +22,7 @@ const wrapChild = ({ label, value, ...props }, index) => ( title={value} titleSize="s" textAlign="left" - description={label ? `${label}:` : ''} + description={label ? `${label}` : ''} /> ); @@ -70,7 +70,7 @@ const StatusIndicator = ({ status, isOnline, IconComponent }) => { titleSize="s" textAlign="left" description={i18n.translate('xpack.monitoring.summaryStatus.statusDescription', { - defaultMessage: 'Status:', + defaultMessage: 'Status', })} /> @@ -84,7 +84,6 @@ export function SummaryStatus({ metrics, status, isOnline, IconComponent = Defau {metrics.map(wrapChild)} - ); } diff --git a/x-pack/plugins/monitoring/public/directives/chart/_chart.scss b/x-pack/plugins/monitoring/public/directives/chart/_chart.scss index 75e30ed81efe..0ceb10107cc1 100644 --- a/x-pack/plugins/monitoring/public/directives/chart/_chart.scss +++ b/x-pack/plugins/monitoring/public/directives/chart/_chart.scss @@ -6,13 +6,6 @@ margin-bottom: $euiSize; } -.monChart__tooltipTrigger { - float: right; - position: relative; - top: $euiSizeXS; - right: $euiSize; -} - .monChart__tooltipLabel, .monChart__tooltipValue { text-align: left; diff --git a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js index bb63dc321627..78a04c8c9f4f 100644 --- a/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js +++ b/x-pack/plugins/monitoring/public/directives/elasticsearch/ml_job_listing/index.js @@ -17,6 +17,8 @@ import { EuiPage, EuiPageContent, EuiPageBody, + EuiPanel, + EuiSpacer, } from '@elastic/eui'; import { ClusterStatus } from '../../../components/elasticsearch/cluster_status'; import { i18n } from '@kbn/i18n'; @@ -131,8 +133,11 @@ uiModule.directive('monitoringMlListing', kbnUrl => { - + + + + - + - + - + - - + + + + + + - - + + - - + + - + diff --git a/x-pack/plugins/monitoring/public/views/kibana/instances/index.js b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js index fe0b738b2336..d2bf3c677f0f 100644 --- a/x-pack/plugins/monitoring/public/views/kibana/instances/index.js +++ b/x-pack/plugins/monitoring/public/views/kibana/instances/index.js @@ -11,7 +11,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; import { MonitoringViewBaseEuiTableController } from '../../'; import { getPageData } from './get_page_data'; import template from './index.html'; -import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLink } from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, EuiLink } from '@elastic/eui'; import { ClusterStatus } from '../../../components/kibana/cluster_status'; import { EuiMonitoringTable } from '../../../components/table'; import { KibanaStatusIcon } from '../../../components/kibana/status_icon'; @@ -148,9 +148,11 @@ uiRoutes.when('/kibana/instances', { - + - + + + - + - + + + - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/plugins/monitoring/public/views/logstash/node/index.js b/x-pack/plugins/monitoring/public/views/logstash/node/index.js index b7ebeb8be8aa..62820a42ac49 100644 --- a/x-pack/plugins/monitoring/public/views/logstash/node/index.js +++ b/x-pack/plugins/monitoring/public/views/logstash/node/index.js @@ -14,7 +14,7 @@ import { routeInitProvider } from 'plugins/monitoring/lib/route_init'; import template from './index.html'; import { timefilter } from 'ui/timefilter'; import { DetailStatus } from 'plugins/monitoring/components/logstash/detail_status'; -import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; +import { EuiPage, EuiPageBody, EuiPageContent, EuiPanel, EuiSpacer, EuiFlexGrid, EuiFlexItem } from '@elastic/eui'; import { MonitoringTimeseriesContainer } from '../../../components/chart'; import { I18nProvider } from '@kbn/i18n/react'; import { MonitoringViewBaseController } from '../../base_controller'; @@ -86,18 +86,20 @@ uiRoutes.when('/logstash/node/:uuid', { - + - - + + + + {metricsToShow.map((metric, index) => ( - + - + ))} diff --git a/x-pack/test/functional/apps/monitoring/beats/beat_detail.js b/x-pack/test/functional/apps/monitoring/beats/beat_detail.js index d9a9b08de0dd..2eab9f635483 100644 --- a/x-pack/test/functional/apps/monitoring/beats/beat_detail.js +++ b/x-pack/test/functional/apps/monitoring/beats/beat_detail.js @@ -36,17 +36,17 @@ export default function ({ getService, getPageObjects }) { it('cluster status bar shows correct information', async () => { expect(await detail.getSummary()).to.eql({ - name: 'Name:\ntsullivan.local-1-17', - version: 'Version:\n7.0.0-alpha1', - type: 'Type:\nDuckbeat', - host: 'Host:\ntsullivan.local', - output: 'Output:\nElasticsearch', - configReloads: 'Config reloads:\n0', - uptime: 'Uptime:\n6 minutes', - eventsTotal: 'Events total:\n17', - eventsEmitted: 'Events emitted:\n17', - eventsDropped: 'Events dropped:\n0', - bytesWritten: 'Bytes sent:\n18.3 KB', + name: 'Name\ntsullivan.local-1-17', + version: 'Version\n7.0.0-alpha1', + type: 'Type\nDuckbeat', + host: 'Host\ntsullivan.local', + output: 'Output\nElasticsearch', + configReloads: 'Config reloads\n0', + uptime: 'Uptime\n6 minutes', + eventsTotal: 'Events total\n17', + eventsEmitted: 'Events emitted\n17', + eventsDropped: 'Events dropped\n0', + bytesWritten: 'Bytes sent\n18.3 KB', }); }); diff --git a/x-pack/test/functional/apps/monitoring/beats/listing.js b/x-pack/test/functional/apps/monitoring/beats/listing.js index 0194f1162511..f9f4a20f5ebc 100644 --- a/x-pack/test/functional/apps/monitoring/beats/listing.js +++ b/x-pack/test/functional/apps/monitoring/beats/listing.js @@ -39,8 +39,8 @@ export default function ({ getService, getPageObjects }) { duckbeat: 1, sheepbeat: 1, winlogbeat: 1, - totalEvents: 'Total Events:\n699.9k', - bytesSent: 'Bytes Sent:\n427.9 MB', + totalEvents: 'Total Events\n699.9k', + bytesSent: 'Bytes Sent\n427.9 MB', }); }); diff --git a/x-pack/test/functional/apps/monitoring/beats/overview.js b/x-pack/test/functional/apps/monitoring/beats/overview.js index bfd405893956..f24c9e427094 100644 --- a/x-pack/test/functional/apps/monitoring/beats/overview.js +++ b/x-pack/test/functional/apps/monitoring/beats/overview.js @@ -43,8 +43,8 @@ export default function ({ getService, getPageObjects }) { duckbeat: 1, sheepbeat: 1, winlogbeat: 1, - totalEvents: 'Total Events:\n699.9k', - bytesSent: 'Bytes Sent:\n427.9 MB', + totalEvents: 'Total Events\n699.9k', + bytesSent: 'Bytes Sent\n427.9 MB', }); }); diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/index_detail.js b/x-pack/test/functional/apps/monitoring/elasticsearch/index_detail.js index a2074c215da9..dd0ea8f03ab4 100644 --- a/x-pack/test/functional/apps/monitoring/elasticsearch/index_detail.js +++ b/x-pack/test/functional/apps/monitoring/elasticsearch/index_detail.js @@ -42,11 +42,11 @@ export default function ({ getService, getPageObjects }) { await indicesList.clickRowByName('avocado-tweets-2017.10.02'); expect(await indexDetail.getSummary()).to.eql({ - dataSize: 'Total:\n8.8 MB', - dataSizePrimaries: 'Primaries:\n4.4 MB', - documentCount: 'Documents:\n628', - totalShards: 'Total Shards:\n10', - unassignedShards: 'Unassigned Shards:\n0', + dataSize: 'Total\n8.8 MB', + dataSizePrimaries: 'Primaries\n4.4 MB', + documentCount: 'Documents\n628', + totalShards: 'Total Shards\n10', + unassignedShards: 'Unassigned Shards\n0', health: 'Health: green', }); }); @@ -55,11 +55,11 @@ export default function ({ getService, getPageObjects }) { await indicesList.clickRowByName('relocation_test'); expect(await indexDetail.getSummary()).to.eql({ - dataSize: 'Total:\n4.8 KB', - dataSizePrimaries: 'Primaries:\n4.8 KB', - documentCount: 'Documents:\n1', - totalShards: 'Total Shards:\n1', - unassignedShards: 'Unassigned Shards:\n0', + dataSize: 'Total\n4.8 KB', + dataSizePrimaries: 'Primaries\n4.8 KB', + documentCount: 'Documents\n1', + totalShards: 'Total Shards\n1', + unassignedShards: 'Unassigned Shards\n0', health: 'Health: green', }); }); @@ -68,11 +68,11 @@ export default function ({ getService, getPageObjects }) { await indicesList.clickRowByName('phone-home'); expect(await indexDetail.getSummary()).to.eql({ - dataSize: 'Total:\n1.2 MB', - dataSizePrimaries: 'Primaries:\n657.6 KB', - documentCount: 'Documents:\n10', - totalShards: 'Total Shards:\n10', - unassignedShards: 'Unassigned Shards:\n1', + dataSize: 'Total\n1.2 MB', + dataSizePrimaries: 'Primaries\n657.6 KB', + documentCount: 'Documents\n10', + totalShards: 'Total Shards\n10', + unassignedShards: 'Unassigned Shards\n1', health: 'Health: yellow', }); }); diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/indices.js b/x-pack/test/functional/apps/monitoring/elasticsearch/indices.js index 58ec00cf6db1..2dea5db65598 100644 --- a/x-pack/test/functional/apps/monitoring/elasticsearch/indices.js +++ b/x-pack/test/functional/apps/monitoring/elasticsearch/indices.js @@ -32,13 +32,13 @@ export default function ({ getService, getPageObjects }) { it('should have an Elasticsearch cluster summary with correct info', async () => { expect(await esClusterSummaryStatus.getContent()).to.eql({ - nodesCount: 'Nodes:\n1', - indicesCount: 'Indices:\n19', - memory: 'Memory:\n267.7 MB / 676.8 MB', - totalShards: 'Total Shards:\n46', - unassignedShards: 'Unassigned Shards:\n23', - documentCount: 'Documents:\n4,535', - dataSize: 'Data:\n8.6 MB', + nodesCount: 'Nodes\n1', + indicesCount: 'Indices\n19', + memory: 'Memory\n267.7 MB / 676.8 MB', + totalShards: 'Total Shards\n46', + unassignedShards: 'Unassigned Shards\n23', + documentCount: 'Documents\n4,535', + dataSize: 'Data\n8.6 MB', health: 'Health: red', }); }); diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/node_detail.js b/x-pack/test/functional/apps/monitoring/elasticsearch/node_detail.js index 1bf5dd28277a..1cb6902948a1 100644 --- a/x-pack/test/functional/apps/monitoring/elasticsearch/node_detail.js +++ b/x-pack/test/functional/apps/monitoring/elasticsearch/node_detail.js @@ -40,14 +40,14 @@ export default function ({ getService, getPageObjects }) { await nodesList.clickRowByResolver('jUT5KdxfRbORSCWkb5zjmA'); expect(await nodeDetail.getSummary()).to.eql({ - transportAddress: 'Transport Address:\n127.0.0.1:9300', - jvmHeap: 'JVM Heap:\n29%', - freeDiskSpace: 'Free Disk Space:\n173.9 GB', - documentCount: 'Documents:\n24.8k', - dataSize: 'Data:\n50.4 MB', - indicesCount: 'Indices:\n20', - shardsCount: 'Shards:\n38', - nodeType: 'Type:\nMaster Node', + transportAddress: 'Transport Address\n127.0.0.1:9300', + jvmHeap: 'JVM Heap\n29%', + freeDiskSpace: 'Free Disk Space\n173.9 GB', + documentCount: 'Documents\n24.8k', + dataSize: 'Data\n50.4 MB', + indicesCount: 'Indices\n20', + shardsCount: 'Shards\n38', + nodeType: 'Type\nMaster Node', status: 'Status: Online', }); }); @@ -56,14 +56,14 @@ export default function ({ getService, getPageObjects }) { await nodesList.clickRowByResolver('bwQWH-7IQY-mFPpfoaoFXQ'); expect(await nodeDetail.getSummary()).to.eql({ - transportAddress: 'Transport Address:\n127.0.0.1:9302', - jvmHeap: 'JVM Heap:\n17%', - freeDiskSpace: 'Free Disk Space:\n173.9 GB', - documentCount: 'Documents:\n240', - dataSize: 'Data:\n1.4 MB', - indicesCount: 'Indices:\n4', - shardsCount: 'Shards:\n4', - nodeType: 'Type:\nNode', + transportAddress: 'Transport Address\n127.0.0.1:9302', + jvmHeap: 'JVM Heap\n17%', + freeDiskSpace: 'Free Disk Space\n173.9 GB', + documentCount: 'Documents\n240', + dataSize: 'Data\n1.4 MB', + indicesCount: 'Indices\n4', + shardsCount: 'Shards\n4', + nodeType: 'Type\nNode', status: 'Status: Online', }); }); @@ -91,14 +91,14 @@ export default function ({ getService, getPageObjects }) { await nodesList.clickRowByResolver('1jxg5T33TWub-jJL4qP0Wg'); expect(await nodeDetail.getSummary()).to.eql({ - transportAddress: 'Transport Address:\n127.0.0.1:9302', - jvmHeap: 'JVM Heap:\nN/A', - freeDiskSpace: 'Free Disk Space:\nN/A', - documentCount: 'Documents:\nN/A', - dataSize: 'Data:\nN/A', - indicesCount: 'Indices:\nN/A', - shardsCount: 'Shards:\nN/A', - nodeType: 'Type:\nOffline Node', + transportAddress: 'Transport Address\n127.0.0.1:9302', + jvmHeap: 'JVM Heap\nN/A', + freeDiskSpace: 'Free Disk Space\nN/A', + documentCount: 'Documents\nN/A', + dataSize: 'Data\nN/A', + indicesCount: 'Indices\nN/A', + shardsCount: 'Shards\nN/A', + nodeType: 'Type\nOffline Node', status: 'Status: Offline', }); }); diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/nodes.js b/x-pack/test/functional/apps/monitoring/elasticsearch/nodes.js index c20050c9b4bc..4b15576572ce 100644 --- a/x-pack/test/functional/apps/monitoring/elasticsearch/nodes.js +++ b/x-pack/test/functional/apps/monitoring/elasticsearch/nodes.js @@ -33,13 +33,13 @@ export default function ({ getService, getPageObjects }) { it('should have an Elasticsearch Cluster Summary Status with correct info', async () => { expect(await esClusterSummaryStatus.getContent()).to.eql({ - nodesCount: 'Nodes:\n2', - indicesCount: 'Indices:\n20', - memory: 'Memory:\n696.6 MB / 1.3 GB', - totalShards: 'Total Shards:\n79', - unassignedShards: 'Unassigned Shards:\n7', - documentCount: 'Documents:\n25,758', - dataSize: 'Data:\n100.0 MB', + nodesCount: 'Nodes\n2', + indicesCount: 'Indices\n20', + memory: 'Memory\n696.6 MB / 1.3 GB', + totalShards: 'Total Shards\n79', + unassignedShards: 'Unassigned Shards\n7', + documentCount: 'Documents\n25,758', + dataSize: 'Data\n100.0 MB', health: 'Health: yellow', }); }); @@ -203,13 +203,13 @@ export default function ({ getService, getPageObjects }) { it('should have an Elasticsearch Cluster Summary Status with correct info', async () => { expect(await esClusterSummaryStatus.getContent()).to.eql({ - nodesCount: 'Nodes:\n3', - indicesCount: 'Indices:\n20', - memory: 'Memory:\n575.3 MB / 2.0 GB', - totalShards: 'Total Shards:\n80', - unassignedShards: 'Unassigned Shards:\n5', - documentCount: 'Documents:\n25,927', - dataSize: 'Data:\n101.6 MB', + nodesCount: 'Nodes\n3', + indicesCount: 'Indices\n20', + memory: 'Memory\n575.3 MB / 2.0 GB', + totalShards: 'Total Shards\n80', + unassignedShards: 'Unassigned Shards\n5', + documentCount: 'Documents\n25,927', + dataSize: 'Data\n101.6 MB', health: 'Health: yellow', }); }); diff --git a/x-pack/test/functional/apps/monitoring/elasticsearch/overview.js b/x-pack/test/functional/apps/monitoring/elasticsearch/overview.js index 3f1d9ca10d67..1597bc6be046 100644 --- a/x-pack/test/functional/apps/monitoring/elasticsearch/overview.js +++ b/x-pack/test/functional/apps/monitoring/elasticsearch/overview.js @@ -32,13 +32,13 @@ export default function ({ getService, getPageObjects }) { it('should have an Elasticsearch Cluster Summary Status with correct info', async () => { expect(await esClusterSummaryStatus.getContent()).to.eql({ - nodesCount: 'Nodes:\n3', - indicesCount: 'Indices:\n20', - memory: 'Memory:\n575.3 MB / 2.0 GB', - totalShards: 'Total Shards:\n80', - unassignedShards: 'Unassigned Shards:\n5', - documentCount: 'Documents:\n25,927', - dataSize: 'Data:\n101.6 MB', + nodesCount: 'Nodes\n3', + indicesCount: 'Indices\n20', + memory: 'Memory\n575.3 MB / 2.0 GB', + totalShards: 'Total Shards\n80', + unassignedShards: 'Unassigned Shards\n5', + documentCount: 'Documents\n25,927', + dataSize: 'Data\n101.6 MB', health: 'Health: yellow', }); }); diff --git a/x-pack/test/functional/apps/monitoring/kibana/instance.js b/x-pack/test/functional/apps/monitoring/kibana/instance.js index df69604e50a5..c6f6fb4aaa5c 100644 --- a/x-pack/test/functional/apps/monitoring/kibana/instance.js +++ b/x-pack/test/functional/apps/monitoring/kibana/instance.js @@ -36,10 +36,10 @@ export default function ({ getService, getPageObjects }) { it('should have Instance Summary Status showing correct info', async () => { expect(await instance.getSummary()).to.eql({ - transportAddress: 'Transport Address:\ntsullivan.local:5601', - osFreeMemory: 'OS Free Memory:\n1.5 GB', - version: 'Version:\n7.0.0-alpha1', - uptime: 'Uptime:\n3 minutes', + transportAddress: 'Transport Address\ntsullivan.local:5601', + osFreeMemory: 'OS Free Memory\n1.5 GB', + version: 'Version\n7.0.0-alpha1', + uptime: 'Uptime\n3 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 88de1abd7a31..b79f67152b85 100644 --- a/x-pack/test/functional/apps/monitoring/kibana/instances.js +++ b/x-pack/test/functional/apps/monitoring/kibana/instances.js @@ -32,11 +32,11 @@ export default function ({ getService, getPageObjects }) { it('should have Kibana Cluster Summary Status showing correct info', async () => { expect(await kibanaClusterSummaryStatus.getContent()).to.eql({ - instances: 'Instances:\n1', - memory: 'Memory:\n219.6 MB / 1.4 GB', - requests: 'Requests:\n174', - connections: 'Connections:\n174', - maxResponseTime: 'Max. Response Time:\n2203 ms', + instances: 'Instances\n1', + memory: 'Memory\n219.6 MB / 1.4 GB', + requests: 'Requests\n174', + connections: 'Connections\n174', + maxResponseTime: 'Max. Response Time\n2203 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 2cedd2ba5a67..90a8bebe9021 100644 --- a/x-pack/test/functional/apps/monitoring/kibana/overview.js +++ b/x-pack/test/functional/apps/monitoring/kibana/overview.js @@ -32,11 +32,11 @@ export default function ({ getService, getPageObjects }) { it('should have Kibana Cluster Summary Status showing correct info', async () => { expect(await kibanaClusterSummaryStatus.getContent()).to.eql({ - instances: 'Instances:\n1', - memory: 'Memory:\n219.6 MB / 1.4 GB', - requests: 'Requests:\n174', - connections: 'Connections:\n174', - maxResponseTime: 'Max. Response Time:\n2203 ms', + instances: 'Instances\n1', + memory: 'Memory\n219.6 MB / 1.4 GB', + requests: 'Requests\n174', + connections: 'Connections\n174', + maxResponseTime: 'Max. Response Time\n2203 ms', health: 'Health: green', }); }); diff --git a/x-pack/test/functional/apps/monitoring/logstash/pipelines.js b/x-pack/test/functional/apps/monitoring/logstash/pipelines.js index 29d20493280e..0bca058467fa 100644 --- a/x-pack/test/functional/apps/monitoring/logstash/pipelines.js +++ b/x-pack/test/functional/apps/monitoring/logstash/pipelines.js @@ -32,10 +32,10 @@ export default function ({ getService, getPageObjects }) { it('should have Logstash Cluster Summary Status showing correct info', async () => { expect(await lsClusterSummaryStatus.getContent()).to.eql({ - nodeCount: 'Nodes:\n2', - memoryUsed: 'Memory:\n528.4 MB / 1.9 GB', - eventsInTotal: 'Events Received:\n117.9k', - eventsOutTotal: 'Events Emitted:\n111.9k' + nodeCount: 'Nodes\n2', + memoryUsed: 'Memory\n528.4 MB / 1.9 GB', + eventsInTotal: 'Events Received\n117.9k', + eventsOutTotal: 'Events Emitted\n111.9k' }); });