[Upgrade Assistant] Redesign overview page by alisonelizabeth · Pull Request #95346 · elastic/kibana

alisonelizabeth · 2021-03-24T18:06:02Z

This PR implements the first phase of the Upgrade Assistant redesign: a new Overview page and the start to distinguish between Elasticsearch and other stack (i.e., Kibana) deprecations.

Other notable changes:

Client-side routing
Breadcrumbs
Changed the behavior of the "level" filter buttons for ES deprecations. Instead of filtering by "all" or "critical", we now display all deprecations by default and the user can toggle the filters on and off for "critical" and "warning".

What's next

After this PR is merged, I will open up a subsequent PR to incorporate Kibana deprecations (I felt the changes were too large to include here). The UX will be updated to look something like this:

I have not changed the UX for the list of ES deprecations or reindexing flow. This will addressed in a separate PR.
We've discussed enhancing the overview page by including a "highlights" section that showcases new features in 8.0. This will come as I gain more information on the type of content we wish to show here.

How to test/review

Note for 7.13, users will still see the "coming soon" prompt. In order to test these changes, you will need to disable that functionality. In x-pack/plugins/upgrade_assistant/common/constants.ts, set UA_READONLY_MODE to false.

You can add some mock deprecation data by modifying the response returned from getUpgradeAssistantStatus() in x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts. I've created a gist with some mock data: https://gist.github.com/alisonelizabeth/f093c1464ffd90f9781c42399c758ab4.

General design feedback (with the understanding that this is the first iteration 😄)
Verify deprecation logging toggle
Verify routing/breadcrumbs
Verify "level" filter functionality on ES deprecations page
Verify no regressions in ES deprecations list (i.e., search still works, toggle accordions, etc.)

Screenshots

// Note: This warning callout was pre-existing. It may or may not be applicable anymore depending on which release we decide to re-enable UA. I decided to leave for now.

…act_router

…erview-redesign

sebelga · 2021-04-13T15:49:21Z

.../upgrade_assistant/public/application/components/es_deprecations/deprecation_tab_content.tsx

-          onFilterChange={changeFilter}
-          onSearchChange={changeSearch}
+          onFilterChange={(filter: LevelFilterOption) => setCurrentFilter(filter)}
+          onSearchChange={(newSearch: string) => setSearch(newSearch)}


Or directly onSearchChange={setSearch} 😊

mdefazio · 2021-04-13T17:09:58Z

This was pre-existing behavior. I also considered changing it, but it gets a bit tricky if a user has some accordions opened and some closed - what should the toggle state be at that point? @mdefazio do you know if we have any existing patterns to follow for something like this?

@alisonelizabeth I'm not sure of a consistent pattern we have for accordions collapsing/expanding across Kibana (we should! and now have it on our "Needs guidelines" list). I'm inclined to say keep the existing behavior. While more clunky, 2 separate buttons is quite obvious. So we can absolutely streamline this, but I'd like to see if we can get some collective thoughts (hopefully quickly) around this that we can apply everywhere.

.../plugins/upgrade_assistant/public/application/components/es_deprecations/es_deprecations.tsx

...gins/upgrade_assistant/public/application/components/overview/deprecation_logging_toggle.tsx

x-pack/plugins/upgrade_assistant/public/application/components/overview/overview.tsx

.../upgrade_assistant/public/application/components/es_deprecations/deprecation_tab_content.tsx

debadair · 2021-04-13T22:27:54Z

.../upgrade_assistant/public/application/components/es_deprecations/deprecation_tab_content.tsx

+            <p>
+              <FormattedMessage
+                id="xpack.upgradeAssistant.checkupTab.noIssues.nextStepsDetail"
+                defaultMessage="Check the {overviewTabButton} for next steps."


Does the reference to "steps" here still make sense?

Good point. I changed this to: Check the Overview page for other Stack deprecations. Happy to make any additional changes!

x-pack/plugins/upgrade_assistant/public/application/components/overview/es_stats.tsx

debadair · 2021-04-13T22:46:03Z

x-pack/plugins/upgrade_assistant/public/application/lib/es_deprecation_errors.ts

+    'xpack.upgradeAssistant.esDeprecationErrors.partiallyUpgradedWarningMessage',
+    {
+      defaultMessage:
+        'One or more Elasticsearch nodes have a newer version of Elasticsearch than Kibana.',


This reads like Kibana has a version of Elasticsearch.

Suggested change

'One or more Elasticsearch nodes have a newer version of Elasticsearch than Kibana.',

'Upgrade Kibana to the same version as your Elasticsearch cluster. One or more nodes in the cluster is running <version xyz> .',

We currently don't have access to the version in this context. It's something we can support, but I think I'd prefer to do so in a separate PR. For now, I've updated this to:

Upgrade Kibana to the same version as your Elasticsearch cluster. One or more nodes in the cluster is running a different version than Kibana.

x-pack/plugins/upgrade_assistant/public/application/lib/es_deprecation_errors.ts

…/es_deprecations/es_deprecations.tsx Co-authored-by: debadair <debadair@elastic.co>

…/overview/deprecation_logging_toggle.tsx Co-authored-by: debadair <debadair@elastic.co>

…/overview/overview.tsx Co-authored-by: debadair <debadair@elastic.co>

…/es_deprecations/deprecation_tab_content.tsx Co-authored-by: debadair <debadair@elastic.co>

…/overview/overview.tsx Co-authored-by: debadair <debadair@elastic.co>

…recation_errors.ts Co-authored-by: debadair <debadair@elastic.co>

…/es_deprecations/deprecation_tab_content.tsx Co-authored-by: debadair <debadair@elastic.co>

…/overview/es_stats.tsx Co-authored-by: debadair <debadair@elastic.co>

…recation_errors.ts Co-authored-by: debadair <debadair@elastic.co>

alisonelizabeth · 2021-04-14T01:02:04Z

Thanks for the copy review @debadair! I applied your suggestions and responded to your comment about the message mentioning "steps" on the overview page.

alisonelizabeth · 2021-04-14T14:04:09Z

@elasticmachine merge upstream

kibanamachine · 2021-04-14T16:11:49Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`upgradeAssistant`	70	72	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`upgradeAssistant`	117.9KB	119.5KB	+1.6KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	379.7KB	379.9KB	+173.0B
`upgradeAssistant`	29.9KB	30.2KB	+312.0B
total			+485.0B

History

💔 Build #119588 failed 2bca115
💔 Build #119485 failed f33f353
💔 Build #119481 failed 1accb03
💔 Build #119484 failed 7b5817d
💚 Build #119202 succeeded 797acc4

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

alisonelizabeth · 2021-04-14T16:21:28Z

I'm going to go ahead and merge this PR. I'm going to leave the deprecation toggle as-is for now, as the UX will likely change again once we support deprecation log indexing (#79208).

alisonelizabeth added 6 commits March 18, 2021 14:47

add client routing

a41eff6

Merge branch 'master' of https://github.com/elastic/kibana into ua/re…

b516947

…act_router

revert unnecessary changes

7e376f4

Merge branch 'master' of https://github.com/elastic/kibana into ua/re…

06119e4

…act_router

Merge branch 'master' of https://github.com/elastic/kibana into ua/re…

0028260

…act_router

wip - implement new overview page

a512f09

alisonelizabeth added v8.0.0 Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more t// Feature:Upgrade Assistant v7.13.0 labels Mar 24, 2021

alisonelizabeth mentioned this pull request Mar 24, 2021

[Upgrade Assistant] Add client-side routing #94973

Closed

alisonelizabeth added the release_note:skip Skip the PR/issue when compiling release notes label Mar 24, 2021

alisonelizabeth added 18 commits March 24, 2021 15:55

cleanup tabs

a102edf

add breadcrumbs

495d36e

add back support for enabling deprecation logging

e846b58

fix doc links

3baa035

add back telemetry

adf3560

add badge to tabs + update error handling for stats

cc4f2a0

clean up error handling

e49bf62

fix i18n

58bc473

Merge branch 'master' of https://github.com/elastic/kibana into ua/ov…

ca6392e

…erview-redesign

cleanup

a7f6ca9

Merge branch 'master' of https://github.com/elastic/kibana into ua/ov…

90f0413

…erview-redesign

update tests

97dc646

update api docs

65097c6

Merge branch 'master' of https://github.com/elastic/kibana into ua/ov…

9f9c191

…erview-redesign

update upgraded error icon

c878787

Merge branch 'master' of https://github.com/elastic/kibana into ua/ov…

a7018d7

…erview-redesign

address design feedback on ES page

f7acf28

address design feedback on overview page

4ab619c

sebelga reviewed Apr 13, 2021

View reviewed changes

debadair reviewed Apr 13, 2021

View reviewed changes

alisonelizabeth and others added 13 commits April 13, 2021 20:11

Update x-pack/plugins/upgrade_assistant/public/application/components…

0ca2431

…/es_deprecations/es_deprecations.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/components…

1bd17d8

…/es_deprecations/es_deprecations.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/components…

73e91a0

…/overview/deprecation_logging_toggle.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/components…

b3dbf13

…/overview/deprecation_logging_toggle.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/components…

fbca18a

…/overview/overview.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/components…

1fc66ad

…/es_deprecations/deprecation_tab_content.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/components…

e35d3e6

…/overview/overview.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/lib/es_dep…

d936566

…recation_errors.ts Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/lib/es_dep…

9356de0

…recation_errors.ts Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/components…

e45ec2d

…/es_deprecations/deprecation_tab_content.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/components…

54f89c7

…/overview/es_stats.tsx Co-authored-by: debadair <debadair@elastic.co>

Update x-pack/plugins/upgrade_assistant/public/application/lib/es_dep…

1accb03

…recation_errors.ts Co-authored-by: debadair <debadair@elastic.co>

address copy feedback

7b5817d

alisonelizabeth added 2 commits April 13, 2021 21:24

fix i18n

f33f353

update tests

2bca115

Merge branch 'master' into ua/overview-redesign

95b7e18

alisonelizabeth merged commit 813681e into elastic:master Apr 14, 2021

alisonelizabeth deleted the ua/overview-redesign branch April 14, 2021 16:21

alisonelizabeth mentioned this pull request Apr 14, 2021

[7.x] [Upgrade Assistant] Redesign overview page (#95346) #97143

Merged

alisonelizabeth added a commit that referenced this pull request Apr 14, 2021

[Upgrade Assistant] Redesign overview page (#95346) (#97143)

b841351

alisonelizabeth mentioned this pull request Apr 15, 2021

Clarify message in upgrade assistant #32058

Closed

cjcenizal mentioned this pull request Sep 16, 2021

Improve error states for Upgrade Assistant deprecation issues #112457

Merged

5 tasks

	'One or more Elasticsearch nodes have a newer version of Elasticsearch than Kibana.',
	'Upgrade Kibana to the same version as your Elasticsearch cluster. One or more nodes in the cluster is running <version xyz> .',

Conversation

alisonelizabeth commented Mar 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to test/review

Screenshots

Uh oh!

sebelga Apr 13, 2021

Choose a reason for hiding this comment

Uh oh!

mdefazio commented Apr 13, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

debadair Apr 13, 2021

Choose a reason for hiding this comment

Uh oh!

alisonelizabeth Apr 14, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

debadair Apr 13, 2021

Choose a reason for hiding this comment

Uh oh!

alisonelizabeth Apr 14, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alisonelizabeth commented Apr 14, 2021

Uh oh!

alisonelizabeth commented Apr 14, 2021

Uh oh!

kibanamachine commented Apr 14, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

alisonelizabeth commented Apr 14, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

alisonelizabeth commented Mar 24, 2021 •

edited

Loading