Skip to content

Commit 3515b64

Browse files
chrisronlineelasticmachine
chrisronline
and
elasticmachine
authored
[7.x] [Monitoring] Design/UI improvements (#76946) (#78313)
* [Monitoring] Design/UI improvements (#76946) * UI tweaks * Add more page titles * Respect pagination settings * Update snapshot * Fix loc issues * Update node listing * Fix tests * Update icon * Update jobs label * More label changes * Fix tests * Fix tests * PR feedback * Improve responsive design here * PR feedback * Fix tests * Fix test and i18n * Remove unused translations * Fix tests * Tweaks # Conflicts: # x-pack/plugins/monitoring/public/components/apm/instance/instance.js # x-pack/plugins/monitoring/public/components/apm/instances/instances.js # x-pack/plugins/monitoring/public/components/apm/overview/index.js # x-pack/plugins/monitoring/public/components/beats/overview/__snapshots__/overview.test.js.snap # x-pack/plugins/monitoring/public/components/beats/overview/overview.js # x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__tests__/__snapshots__/cells.test.js.snap # x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js * Fix tests Co-authored-by: Elastic Machine <[email protected]>
1 parent 2def830 commit 3515b64

File tree

63 files changed

+856
-461
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+856
-461
lines changed

‎x-pack/plugins/monitoring/public/angular/app_modules.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,6 @@ import { licenseProvider } from '../services/license';
4141
// @ts-ignore
4242
import { titleProvider } from '../services/title';
4343
// @ts-ignore
44-
import { monitoringBeatsBeatProvider } from '../directives/beats/beat';
45-
// @ts-ignore
46-
import { monitoringBeatsOverviewProvider } from '../directives/beats/overview';
47-
// @ts-ignore
4844
import { monitoringMlListingProvider } from '../directives/elasticsearch/ml_job_listing';
4945
// @ts-ignore
5046
import { monitoringMainProvider } from '../directives/main';
@@ -153,8 +149,6 @@ function createMonitoringAppServices() {
153149
function createMonitoringAppDirectives() {
154150
angular
155151
.module('monitoring/directives', [])
156-
.directive('monitoringBeatsBeat', monitoringBeatsBeatProvider)
157-
.directive('monitoringBeatsOverview', monitoringBeatsOverviewProvider)
158152
.directive('monitoringMlListing', monitoringMlListingProvider)
159153
.directive('monitoringMain', monitoringMainProvider);
160154
}

‎x-pack/plugins/monitoring/public/components/apm/instance/instance.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66

77
import React from 'react';
8+
import { FormattedMessage } from '@kbn/i18n/react';
89
import { MonitoringTimeseriesContainer } from '../../chart';
910
import {
1011
EuiFlexItem,
@@ -14,6 +15,7 @@ import {
1415
EuiPageBody,
1516
EuiFlexGroup,
1617
EuiPageContent,
18+
EuiScreenReaderOnly,
1719
} from '@elastic/eui';
1820
import { Status } from './status';
1921

@@ -40,20 +42,26 @@ export function ApmServerInstance({ summary, metrics, ...props }) {
4042

4143
const charts = seriesToShow.map((data, index) => (
4244
<EuiFlexItem style={{ minWidth: '45%' }} key={index}>
43-
<EuiPanel>
44-
<MonitoringTimeseriesContainer series={data} {...props} />
45-
</EuiPanel>
45+
<MonitoringTimeseriesContainer series={data} {...props} />
4646
</EuiFlexItem>
4747
));
4848

4949
return (
5050
<EuiPage>
5151
<EuiPageBody>
52+
<EuiScreenReaderOnly>
53+
<h1>
54+
<FormattedMessage
55+
id="xpack.monitoring.apm.instance.heading"
56+
defaultMessage="APM server instance"
57+
/>
58+
</h1>
59+
</EuiScreenReaderOnly>
60+
<EuiPanel>
61+
<Status stats={summary} />
62+
</EuiPanel>
63+
<EuiSpacer size="m" />
5264
<EuiPageContent>
53-
<EuiPanel>
54-
<Status stats={summary} />
55-
</EuiPanel>
56-
<EuiSpacer size="m" />
5765
<EuiFlexGroup wrap>{charts}</EuiFlexGroup>
5866
</EuiPageContent>
5967
</EuiPageBody>

‎x-pack/plugins/monitoring/public/components/apm/instances/instances.js‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,18 @@
66

77
import React, { Fragment } from 'react';
88
import moment from 'moment';
9+
import { FormattedMessage } from '@kbn/i18n/react';
910
import { uniq, get } from 'lodash';
1011
import { EuiMonitoringTable } from '../../table';
11-
import { EuiLink, EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiPanel } from '@elastic/eui';
12+
import {
13+
EuiLink,
14+
EuiPage,
15+
EuiPageBody,
16+
EuiPageContent,
17+
EuiSpacer,
18+
EuiPanel,
19+
EuiScreenReaderOnly,
20+
} from '@elastic/eui';
1221
import { Status } from './status';
1322
import { formatMetric } from '../../../lib/format_number';
1423
import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
@@ -139,11 +148,19 @@ export function ApmServerInstances({ apms, setupMode }) {
139148
return (
140149
<EuiPage>
141150
<EuiPageBody>
151+
<EuiScreenReaderOnly>
152+
<h1>
153+
<FormattedMessage
154+
id="xpack.monitoring.apm.instances.heading"
155+
defaultMessage="APM Instances"
156+
/>
157+
</h1>
158+
</EuiScreenReaderOnly>
159+
<EuiPanel>
160+
<Status stats={data.stats} />
161+
</EuiPanel>
162+
<EuiSpacer size="m" />
142163
<EuiPageContent>
143-
<EuiPanel>
144-
<Status stats={data.stats} />
145-
</EuiPanel>
146-
<EuiSpacer size="m" />
147164
{setupModeCallout}
148165
<EuiMonitoringTable
149166
className="apmInstancesTable"

‎x-pack/plugins/monitoring/public/components/apm/overview/index.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66

77
import React from 'react';
8+
import { FormattedMessage } from '@kbn/i18n/react';
89
import { MonitoringTimeseriesContainer } from '../../chart';
910
import {
1011
EuiSpacer,
@@ -14,6 +15,7 @@ import {
1415
EuiPageBody,
1516
EuiPanel,
1617
EuiPageContent,
18+
EuiScreenReaderOnly,
1719
} from '@elastic/eui';
1820
import { Status } from '../instances/status';
1921

@@ -36,20 +38,26 @@ export function ApmOverview({ stats, metrics, ...props }) {
3638

3739
const charts = seriesToShow.map((data, index) => (
3840
<EuiFlexItem style={{ minWidth: '45%' }} key={index}>
39-
<EuiPanel>
40-
<MonitoringTimeseriesContainer series={data} {...props} />
41-
</EuiPanel>
41+
<MonitoringTimeseriesContainer series={data} {...props} />
4242
</EuiFlexItem>
4343
));
4444

4545
return (
4646
<EuiPage>
4747
<EuiPageBody>
48+
<EuiScreenReaderOnly>
49+
<h1>
50+
<FormattedMessage
51+
id="xpack.monitoring.apm.overview.heading"
52+
defaultMessage="APM server overview"
53+
/>
54+
</h1>
55+
</EuiScreenReaderOnly>
56+
<EuiPanel>
57+
<Status stats={stats} />
58+
</EuiPanel>
59+
<EuiSpacer size="m" />
4860
<EuiPageContent>
49-
<EuiPanel>
50-
<Status stats={stats} />
51-
</EuiPanel>
52-
<EuiSpacer size="s" />
5361
<EuiFlexGroup wrap>{charts}</EuiFlexGroup>
5462
</EuiPageContent>
5563
</EuiPageBody>

‎x-pack/plugins/monitoring/public/components/beats/beat/beat.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,9 @@ export function Beat({ summary, metrics, ...props }) {
133133
<EuiPageBody>
134134
<EuiPanel>
135135
<SummaryStatus metrics={summarytStatsTop} data-test-subj="beatSummaryStatus01" />
136+
</EuiPanel>
137+
<EuiSpacer size="m" />
138+
<EuiPanel>
136139
<SummaryStatus metrics={summarytStatsBot} data-test-subj="beatSummaryStatus02" />
137140
</EuiPanel>
138141
<EuiSpacer size="m" />

‎x-pack/plugins/monitoring/public/components/beats/listing/listing.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
EuiSpacer,
1414
EuiLink,
1515
EuiScreenReaderOnly,
16+
EuiPanel,
1617
} from '@elastic/eui';
1718
import { Stats } from '../../beats';
1819
import { formatMetric } from '../../../lib/format_number';
@@ -153,9 +154,11 @@ export class Listing extends PureComponent {
153154
/>
154155
</h1>
155156
</EuiScreenReaderOnly>
156-
<EuiPageContent>
157+
<EuiPanel>
157158
<Stats stats={stats} />
158-
<EuiSpacer size="m" />
159+
</EuiPanel>
160+
<EuiSpacer size="m" />
161+
<EuiPageContent>
159162
{setupModeCallOut}
160163
<EuiMonitoringTable
161164
className="beatsTable"

0 commit comments

Comments
 (0)