Skip to content

[6.x] Monitoring design touchup (#29479) #29764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryankeairns merged 2 commits into from
Feb 4, 2019
Merged

[6.x] Monitoring design touchup (#29479) #29764

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a44352f
Monitoring design touchup (#29479)
Jan 31, 2019
c425767
Merge branch '6.x' into backport/6.x/pr-29479
Feb 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions x-pack/plugins/monitoring/public/_hacks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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;
}
}
6 changes: 3 additions & 3 deletions x-pack/plugins/monitoring/public/components/alerts/__tests__/map_severity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ describe('mapSeverity', () => {
const low = {
value: 'low',
color: 'warning',
iconType: 'dot',
iconType: 'iInCircle',
title: 'Low severity alert',
};

Expand All @@ -30,7 +30,7 @@ describe('mapSeverity', () => {
const medium = {
value: 'medium',
color: 'warning',
iconType: 'dot',
iconType: 'alert',
title: 'Medium severity alert',
};

Expand All @@ -47,7 +47,7 @@ describe('mapSeverity', () => {
const high = {
value: 'high',
color: 'danger',
iconType: 'dot',
iconType: 'bell',
title: 'High severity alert',
};

Expand Down
6 changes: 3 additions & 3 deletions x-pack/plugins/monitoring/public/components/alerts/map_severity.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
14 changes: 8 additions & 6 deletions x-pack/plugins/monitoring/public/components/beats/beat/beat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -98,7 +98,7 @@ function BeatUi({ summary, metrics, intl, ...props }) {
return (
<EuiPage>
<EuiPageBody>
<EuiPageContent>
<EuiPanel>
<SummaryStatus
metrics={summarytStatsTop}
data-test-subj="beatSummaryStatus01"
Expand All @@ -107,15 +107,17 @@ function BeatUi({ summary, metrics, intl, ...props }) {
metrics={summarytStatsBot}
data-test-subj="beatSummaryStatus02"
/>
<EuiSpacer size="m"/>
<EuiFlexGrid columns={2} gutterSize="none">
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index} style={{ width: '50%' }}>
<EuiFlexItem key={index}>
<MonitoringTimeseriesContainer
series={metric}
{...props}
/>
<EuiSpacer size="m"/>
<EuiSpacer />
</EuiFlexItem>
))}
</EuiFlexGrid>
Expand Down
16 changes: 7 additions & 9 deletions x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,12 @@ function MonitoringTimeseriesContainerUI({ series, onBrush, intl }) {

return (
<EuiFlexGroup direction="column" gutterSize="s">
<EuiFlexItem>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center" style={{ flexGrow: 0 }}>
<EuiFlexItem>
<EuiTitle tabIndex="0">
<Fragment>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="s" tabIndex="0">
<h2>
{ getTitle(series) }{ units ? ` (${units})` : '' }
<EuiScreenReaderOnly>
<span>
<FormattedMessage
Expand All @@ -50,10 +51,7 @@ function MonitoringTimeseriesContainerUI({ series, onBrush, intl }) {
/>
</span>
</EuiScreenReaderOnly>
<h2>
{ getTitle(series) }{ units ? ` (${units})` : '' }
</h2>
</Fragment>
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
27 changes: 12 additions & 15 deletions x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
EuiTitle,
EuiButton,
EuiText,
EuiTextColor,
EuiSpacer,
EuiCallOut,
} from '@elastic/eui';
Expand Down Expand Up @@ -62,17 +61,15 @@ function AlertsPanelUi({ alerts, changeUrl, intl }) {
changeUrl={changeUrl}
/>
<EuiText size="xs">
<p data-test-subj="alertMeta">
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.monitoring.cluster.overview.alertsPanel.lastCheckedTimeText"
defaultMessage="Last checked {updateDateTime} (triggered {duration} ago)"
values={{
updateDateTime: formatDateTimeLocal(item.update_timestamp),
duration: formatTimestampToDuration(item.timestamp, CALCULATE_DURATION_SINCE)
}}
/>
</EuiTextColor>
<p data-test-subj="alertMeta" className="monCallout--meta">
<FormattedMessage
id="xpack.monitoring.cluster.overview.alertsPanel.lastCheckedTimeText"
defaultMessage="Last checked {updateDateTime} (triggered {duration} ago)"
values={{
updateDateTime: formatDateTimeLocal(item.update_timestamp),
duration: formatTimestampToDuration(item.timestamp, CALCULATE_DURATION_SINCE)
}}
/>
</p>
</EuiText>
</EuiCallOut>
Expand All @@ -85,13 +82,13 @@ function AlertsPanelUi({ alerts, changeUrl, intl }) {
<div data-test-subj="clusterAlertsContainer">
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle>
<h2>
<EuiTitle size="s">
<h4>
<FormattedMessage
id="xpack.monitoring.cluster.overview.alertsPanel.topClusterTitle"
defaultMessage="Top cluster alerts"
/>
</h2>
</h4>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/monitoring/public/components/cluster/overview/apm_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function ApmPanelUi(props) {
url="apm"
title={props.intl.formatMessage({ id: 'xpack.monitoring.cluster.overview.apmPanel.apmTitle', defaultMessage: 'APM' })}
>
<EuiFlexGrid columns={2}>
<EuiFlexGrid columns={4}>
<EuiFlexItem>
<EuiPanel paddingSize="m">
<EuiTitle size="s">
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/monitoring/public/components/cluster/overview/beats_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function BeatsPanelUi(props) {
url="beats"
title={props.intl.formatMessage({ id: 'xpack.monitoring.cluster.overview.beatsPanel.beatsTitle', defaultMessage: 'Beats' })}
>
<EuiFlexGrid columns={2}>
<EuiFlexGrid columns={4}>
<EuiFlexItem>
<EuiPanel paddingSize="m">
<EuiTitle size="s">
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function ElasticsearchPanelUi(props) {
title="Elasticsearch"
extras={licenseText}
>
<EuiFlexGrid columns={3}>
<EuiFlexGrid columns={4}>

<EuiFlexItem>
<EuiPanel paddingSize="m">
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/monitoring/public/components/cluster/overview/kibana_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function KibanaPanelUi(props) {
title={props.intl.formatMessage({
id: 'xpack.monitoring.cluster.overview.kibanaPanel.kibanaTitle', defaultMessage: 'Kibana' })}
>
<EuiFlexGrid columns={2}>
<EuiFlexGrid columns={4}>
<EuiFlexItem>
<EuiPanel paddingSize="m">
<EuiTitle size="s">
Expand Down
65 changes: 36 additions & 29 deletions x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { LOGSTASH } from '../../../../common/constants';

import {
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiLink,
EuiTitle,
Expand All @@ -19,7 +20,7 @@ import {
EuiDescriptionListTitle,
EuiDescriptionListDescription,
EuiHorizontalRule,
EuiToolTip
EuiIconTip,
} from '@elastic/eui';
import { FormattedMessage, injectI18n } from '@kbn/i18n/react';

Expand All @@ -39,7 +40,7 @@ function LogstashPanelUi(props) {
title={props.intl.formatMessage({
id: 'xpack.monitoring.cluster.overview.logstashPanel.logstashTitle', defaultMessage: 'Logstash' })}
>
<EuiFlexGrid columns={3}>
<EuiFlexGrid columns={4}>
<EuiFlexItem>
<EuiPanel paddingSize="m">
<EuiTitle size="s">
Expand Down Expand Up @@ -128,33 +129,39 @@ function LogstashPanelUi(props) {

<EuiFlexItem>
<EuiPanel paddingSize="m">
<EuiTitle size="s">
<h3>
<EuiLink
onClick={goToPipelines}
data-test-subj="lsPipelines"
aria-label={props.intl.formatMessage({
id: 'xpack.monitoring.cluster.overview.logstashPanel.pipelineCountLinkAriaLabel',
defaultMessage: 'Logstash Pipelines (beta feature): {pipelineCount}' },
{ pipelineCount: props.pipeline_count }
)}
>
<EuiToolTip
content={props.intl.formatMessage({
id: 'xpack.monitoring.cluster.overview.logstashPanel.betaFeatureTooltip',
defaultMessage: 'Beta Feature' })}
position="bottom"
>
<span className="kuiIcon fa-flask betaIcon" />
</EuiToolTip>
<FormattedMessage
id="xpack.monitoring.cluster.overview.logstashPanel.pipelinesCountLinkLabel"
defaultMessage="Pipelines: {pipelineCount}"
values={{ pipelineCount: (<span data-test-subj="number_of_logstash_pipelines">{ props.pipeline_count }</span>) }}
/>
</EuiLink>
</h3>
</EuiTitle>
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h3>
<EuiLink
onClick={goToPipelines}
data-test-subj="lsPipelines"
aria-label={props.intl.formatMessage({
id: 'xpack.monitoring.cluster.overview.logstashPanel.pipelineCountLinkAriaLabel',
defaultMessage: 'Logstash Pipelines (beta feature): {pipelineCount}' },
{ pipelineCount: props.pipeline_count }
)}
>
<FormattedMessage
id="xpack.monitoring.cluster.overview.logstashPanel.pipelinesCountLinkLabel"
defaultMessage="Pipelines: {pipelineCount}"
values={{ pipelineCount: (<span data-test-subj="number_of_logstash_pipelines">{ props.pipeline_count }</span>) }}
/>
</EuiLink>
</h3>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIconTip
content={props.intl.formatMessage({
id: 'xpack.monitoring.cluster.overview.logstashPanel.betaFeatureTooltip',
defaultMessage: 'Beta feature' })}
position="bottom"
type="beaker"
aria-label="Beta feature"
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiHorizontalRule margin="m" />
<EuiDescriptionList type="column">
<EuiDescriptionListTitle>
Expand Down
13 changes: 8 additions & 5 deletions x-pack/plugins/monitoring/public/components/elasticsearch/index/advanced.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
EuiPage,
EuiPageContent,
EuiPageBody,
EuiPanel,
EuiSpacer,
EuiFlexGrid,
EuiFlexItem,
Expand Down Expand Up @@ -38,17 +39,19 @@ export const AdvancedIndex = ({
return (
<EuiPage>
<EuiPageBody>
<EuiPageContent>
<EuiPanel>
<IndexDetailStatus stats={indexSummary} />
<EuiSpacer size="m"/>
<EuiFlexGrid columns={2} gutterSize="none">
</EuiPanel>
<EuiSpacer size="m" />
<EuiPageContent>
<EuiFlexGrid columns={2} gutterSize="s">
{metricsToShow.map((metric, index) => (
<EuiFlexItem key={index} style={{ width: '50%' }}>
<EuiFlexItem key={index}>
<MonitoringTimeseriesContainer
series={metric}
{...props}
/>
<EuiSpacer size="m"/>
<EuiSpacer />
</EuiFlexItem>
))}
</EuiFlexGrid>
Expand Down
Loading