[Upgrade Assistant] Overview page redesign

[sabarasaba]

Fixes: #79208

Summary

Improve Upgrade Assistant overview page with more comprehensive instructions, documentation links and add links to observability and discovery to allow users to better understand their deprecation logs.

Upper limit for review logs step

Error for review logs step stats panel

Just one stat shown for review logs step stats panel

How to test

1. To enable UA, set xpack.upgrade_assistant.readonly: false in your kibana.yml
2. Start elasticsearch with yarn es snapshot --license=trial
3. Start kibana with yarn start
4. Navigate to UA and enable the toggle to start collecting logs
5. In order to see logs, navigate around kibana for a bit and then come back to UA and you should be able to see a few logs in the Discovery or Observability apps.

How to test cloud related changes

When running Kibana locally add following values to kibana.yml file to simulate Cloud environment

xpack.cloud.id: 'remote-deployment:dXMtY2VudHJhbDEuZ2NwLm'
xpack.cloud.base_url: 'https://staging.found.no/deployments/d74e0a97f269463ca2ec05dcbe703662'

How to test toggle error messages

• Initial load error: If you edit this line locally and replace deprecation_logging with fake_deprecation_logging it should return a 404 error.
• Update load error: If you edit this line locally and replace deprecation_logging with fake_deprecation_logging it should return a 404 error.

[sabarasaba]

@elasticmachine merge upstream

[cjcenizal]

Great work @sabarasaba! I'd like to get this merged ASAP to unblock other work on the Overview page, e.g. the step for reminding the users to back up their data. I left a number of comments, but I'd be happy to see them addressed after merging. I think it's OK to expedite this merge since this work is behind a feature flag.

[cjcenizal]

@sabarasaba Since this feature is behind a flag I think we can skip release notes for it.

[elasticmachine]

Pinging @elastic/kibana-stack-management (Team:Stack Management)

[afharo]

Codeowner review: Core changes LGTM! Only adding new doclinks

[sabarasaba]

@elasticmachine merge upstream

[alisonelizabeth]

Awesome work @sabarasaba! This is looking really great.

Most of my review comments are fairly minor. However, I did find one bug that I'd like to see addressed before approving. It looks like the label for the stats box was updated to show "warning" deprecations, but the actual code that determined this number was not. In other words, the count is still showing total deprecations even though the UI label makes it appear as though it's representative of warning. I believe this affects both ES and Kibana deprecations.

A few other comments:

• The Discover and Observability links aren't working for me 🤔. I'm going to bootstrap again and see if it's a problem on my end. Will report back if I can reproduce consistently.
• Can you remind me the name of the config to "fake" being on cloud so I can test step 3 when cloud is enabled?
• [nit] It was a little hard to tell that part of the error was clickable (only knew to click it after looking through the code). /cc @dborodyansky

[alisonelizabeth]

@dborodyansky / @debadair I'd like to get your feedback on something.

I'm a little concerned on how and where we use the term "warning".

• On the overview page, the stats boxes are broken up by "Critical" and "Warning" deprecations

• When there are no deprecations (includes both critical and warning), we say "No warnings. Good to go!"

• On the drilldown page, we only call out "Critical" deprecations with a badge. The page title is also "Elasticsearch deprecation warnings"

I may be overthinking this 😄 , but do either of you think this may cause confusion to a user?

[alisonelizabeth]

Also - @sabarasaba I believe the merge conflicts are due to #105998 being merged. Let me know if you need help addressing this!

[dborodyansky]

I'm a little concerned on how and where we use the term "warning".

@alisonelizabeth, In my opinion, this doesn't flag much potential user confusion but eager to learn from other perspectives. We consistently label as "warnings", and "critical (warning)" is an additional signifier to promote attention. We don't explicitly label "critical warnings" instead of just "critical" on the cards for brevity, but I believe this comes across as implied. Open to input as always.

[alisonelizabeth]

The Discover and Observability links aren't working for me 🤔. I'm going to bootstrap again and see if it's a problem on my end. Will report back if I can reproduce consistently.

Looks like there might be an issue here. Took a quick look, and it seems the problem is http is undefined in external_links.ts

  const { http } = useKibana().services;
  const logStreamUrl = http?.basePath?.prepend(
    `/app/logs/stream?sourceId=${DEPRECATION_LOGS_SOURCE_ID}`
  );

It doesn't look like http is included in the kibana context.

const services: AppServicesContext = { discover, data, cloud };

export interface AppServicesContext {
  cloud?: CloudSetup;
  discover: DiscoverStart;
  data: DataPublicPluginStart;
}

[dborodyansky]

@sabarasaba Layout looks great! Nice responsive adjustments for narrower viewports as well 👍 . Small suggestion on narrow view would be to wrap the Documentation button lower than the header content.

That said, if the general "Documentation" link is still warranted, we may want to consider stacking docs links together as such:

Discover and Observability links do not work for me. Also unsure how to test conditional states such as:

• Cloud version of step 3
• Error state for deprecation logging switch.

Please let me know if I am missing something to test above scenarios. Great work!

[sabarasaba]

Thanks for reviewing @alisonelizabeth! I've addressed most of the comments, left a few more screenshots and provided steps for testing cloud related stuff.

[sabarasaba]

Thanks for reviewing @dborodyansky! I agree with the cloud link being a bit too spaced out when the viewport is less than 770px, and since I don't think any of our apps is much usable below the 1000px mark I think we can defer this for later if you are ok with that?

I've added steps for testing the cloud related step and for being able to see an error message for the toggle.

[alisonelizabeth]

Latest LGTM! Confirmed Discover/Observability links are now working correctly and the deprecation stats now reflect the correct numbers.

Found a small typo when retesting and left a nit about how to add a class to EuiTooltip.

[dborodyansky]

Thank you for the additional steps @sabarasaba. Agree we could defer additional responsive enhancements. I added a small spacing suggestion for the deprecation logging switch and error. Great work!

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 3a28ace
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
upgradeAssistant	91	103	+12

Async chunks

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

id	before	after	diff
upgradeAssistant	159.8KB	170.1KB	+10.3KB

Page load bundle

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

id	before	after	diff
core	424.7KB	424.8KB	+116.0B
upgradeAssistant	29.3KB	29.8KB	+481.0B
total			+597.0B

History

• 💚 Build #146185 succeeded bf3f1bb
• 💚 Build #146171 succeeded e1a6202eff4fe8e9570c4bff6a592ebcd399094f
• 💔 Build #146163 failed 545c1420c285af8f5eee56f414bd6eca735aea11
• 💚 Build #145637 succeeded 567e4d6912cf0e60559f0fc7d727a8e56efd2252
• 💔 Build #145609 failed 3898326198ffefa6b7352f51eb2cdc30bbcfb55e

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

cc @sabarasaba