[Monitoring] Design/UI improvements #76946

chrisronline · 2020-09-08T13:58:00Z

Resolves #77492

Adds headlines to each page, like:

and how it looks with the Setup Mode button:

Improves numbers in listing tables

Show deltas in the ES nodes listing table differently

Update labels

Jobs -> Machine learning jobs

APM -> APM Server

System indices -> Filter by system indices

elasticmachine · 2020-09-15T14:24:52Z

Pinging @elastic/stack-monitoring (Team:Monitoring)

igoristic · 2020-09-15T17:56:15Z

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/index.js

@@ -30,6 +30,9 @@ uiRoutes.when('/elasticsearch/ccr', {
        title: i18n.translate('xpack.monitoring.elasticsearch.ccr.routeTitle', {
          defaultMessage: 'Elasticsearch - Ccr',
        }),
+        pageTitle: i18n.translate('xpack.monitoring.elasticsearch.ccr.pageTitle', {
+          defaultMessage: 'Elasticsearch Ccr',


I think we should use one/same title for title and pageTitle, and also Ccr should be CCR

igoristic · 2020-09-15T17:56:20Z

x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js

@@ -48,6 +48,15 @@ uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
      $scope.$watch(
        () => this.data,
        (data) => {
+          this.setPageTitle(
+            i18n.translate('xpack.monitoring.elasticsearch.ccr.shard.pageTitle', {
+              defaultMessage: 'Elasticsearch Ccr Shard - Index: {followerIndex} Shard: {shardId}',


Suggested change

defaultMessage: 'Elasticsearch Ccr Shard - Index: {followerIndex} Shard: {shardId}',

defaultMessage: 'Elasticsearch CCR Shard - Index: {followerIndex} Shard: {shardId}',

katrin-freihofner · 2020-09-16T11:10:12Z

@chrisronline thank you for these improvements! During my review, I found some minor things to improve. Please let me know if that makes sense:

Responsive overview page

Can we please also improve the responsive behavior of the overview page:

APM overview

Clicking on "Overview" under "APM server" brings me to a page with the title "APM overview" and the breadcrumbs "APM". I think we should use "APM server overview" consistently.

Can we please remove the nested panels on this view:

Preview without nesting:

chrisronline · 2020-09-16T17:27:09Z

@katrin-freihofner Thanks for the great feedback. I made the requested changes and this PR is ready for another round!

chrisronline · 2020-09-17T13:06:33Z

@elasticmachine merge upstream

igoristic

Everything looks good 👍 ...so long as the tests are fixed and CI is green

Also, I think we should change all instances of Ccr to CCR

katrin-freihofner · 2020-09-23T11:59:52Z

This looks good.

I only found this issue with the documents count:

I suggest having a two column layout if the screen gets that narrow (with two rows).

Also, I would place the up/down trend arrow next to the number, like this:

kibanamachine · 2020-09-23T15:06:50Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 494517d

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
monitoring	626	+7	619

async chunks size

id	value	diff	baseline
monitoring	1.2MB	+12.2KB	1.1MB

History

💚 Build #76324 succeeded 659c222
💔 Build #75216 failed e6c3608
💔 Build #75181 failed 0f4cb65
💔 Build #74931 failed 4853349
💔 Build #74895 failed cffb241

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* [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 <elasticmachine@users.noreply.github.com>

chrisronline · 2020-09-24T14:56:28Z

Backport:

7.x: 3515b64

Closes #194838 ## Summary This PR wraps up the change made in #76946 (issue #77492) The change was about relabeling the "Show system indices" toggle showing below to "Filter for system indices", but when no indices show up, the warning message still contains the old text, i.e. "Show system indices" ![Image](https://github.com/user-attachments/assets/9c3003a8-5689-4d3a-8175-8e707d1ec40a) ![Image](https://github.com/user-attachments/assets/cfdd9ba1-d87d-47ae-afb9-4fa81473230d) ### Checklist - [X] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [X] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [X] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

chrisronline added 10 commits August 25, 2020 15:14

UI tweaks

59b7ec8

Merge remote-tracking branch 'elastic/master' into monitoring/ui

a0fdc44

Add more page titles

19926cc

Merge remote-tracking branch 'elastic/master' into monitoring/ui

5bf97fc

Respect pagination settings

e544af6

Update snapshot

5511653

Fix loc issues

4ad65ea

Merge remote-tracking branch 'elastic/master' into monitoring/ui

72e794b

Merge remote-tracking branch 'elastic/master' into monitoring/ui

b50e793

Update node listing

efa901d

chrisronline mentioned this pull request Sep 15, 2020

[Monitoring] Usage collection #75878

Merged

Fix tests

69a4646

chrisronline self-assigned this Sep 15, 2020

chrisronline added review Team:Monitoring Stack Monitoring team v7.10.0 v8.0.0 release_note:enhancement labels Sep 15, 2020

chrisronline requested review from igoristic and katrin-freihofner September 15, 2020 14:24

chrisronline marked this pull request as ready for review September 15, 2020 14:24

chrisronline requested a review from a team as a code owner September 15, 2020 14:24

chrisronline requested a review from a team September 15, 2020 14:24

chrisronline added 3 commits September 15, 2020 10:29

Update icon

dc69527

Update jobs label

df4de05

More label changes

c733fe6

cchaos removed the request for review from a team September 15, 2020 16:54

igoristic reviewed Sep 15, 2020

View reviewed changes

chrisronline added 5 commits September 16, 2020 10:41

Fix tests

640c04b

PR feedback

6abdfa5

Improve responsive design here

9dcc403

PR feedback

a6425ae

Fix tests

cffb241

chrisronline requested review from katrin-freihofner and igoristic September 16, 2020 17:27

chrisronline added 2 commits September 16, 2020 14:23

Merge remote-tracking branch 'elastic/master' into monitoring/ui

aef8056

Fix test and i18n

4853349

chrisronline added 2 commits September 17, 2020 10:15

Remove unused translations

5ee2a22

Merge remote-tracking branch 'elastic/master' into monitoring/ui

e6c3608

chrisronline force-pushed the monitoring/ui branch from 0f4cb65 to e6c3608 Compare September 17, 2020 14:20

igoristic approved these changes Sep 21, 2020

View reviewed changes

chrisronline added 2 commits September 22, 2020 15:52

Merge remote-tracking branch 'elastic/master' into monitoring/ui

e2480b6

Fix tests

659c222

katrin-freihofner approved these changes Sep 23, 2020

View reviewed changes

Tweaks

494517d

chrisronline merged commit c07a512 into elastic:master Sep 23, 2020

chrisronline deleted the monitoring/ui branch September 23, 2020 15:48

chrisronline mentioned this pull request Sep 23, 2020

[7.x] [Monitoring] Design/UI improvements (#76946) #78313

Merged

This was referenced Oct 3, 2024

[Monitoring] Fix "Show system indices" description #194838

Closed

[Monitoring] Fix system index label in Stack Monitoring screen #194839

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Monitoring] Design/UI improvements #76946

[Monitoring] Design/UI improvements #76946

chrisronline commented Sep 8, 2020 •

edited

Loading

elasticmachine commented Sep 15, 2020

igoristic Sep 15, 2020

igoristic Sep 15, 2020

katrin-freihofner commented Sep 16, 2020

chrisronline commented Sep 16, 2020

chrisronline commented Sep 17, 2020

igoristic left a comment

katrin-freihofner commented Sep 23, 2020

kibanamachine commented Sep 23, 2020

chrisronline commented Sep 24, 2020

	defaultMessage: 'Elasticsearch Ccr Shard - Index: {followerIndex} Shard: {shardId}',
	defaultMessage: 'Elasticsearch CCR Shard - Index: {followerIndex} Shard: {shardId}',

[Monitoring] Design/UI improvements #76946

[Monitoring] Design/UI improvements #76946

Conversation

chrisronline commented Sep 8, 2020 • edited Loading

Adds headlines to each page, like:

Improves numbers in listing tables

Show deltas in the ES nodes listing table differently

Update labels

Jobs -> Machine learning jobs

APM -> APM Server

System indices -> Filter by system indices

elasticmachine commented Sep 15, 2020

igoristic Sep 15, 2020

Choose a reason for hiding this comment

igoristic Sep 15, 2020

Choose a reason for hiding this comment

katrin-freihofner commented Sep 16, 2020

Responsive overview page

APM overview

chrisronline commented Sep 16, 2020

chrisronline commented Sep 17, 2020

igoristic left a comment

Choose a reason for hiding this comment

katrin-freihofner commented Sep 23, 2020

kibanamachine commented Sep 23, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

History

chrisronline commented Sep 24, 2020

chrisronline commented Sep 8, 2020 •

edited

Loading