Upgrade Checker - Design PR

[cchaos]

I apologize for any bad JavaScript, hopefully, you can understand the intent and do a clean up.

Here were a few items that still need to finalized:

1. Overview stats & all clear message

(Gail is working on text changes)

2. All clear message per deprecation tabs

I added an all clear message if there are no issues in these tabs, however, it's not quite hooked up right because it will show if you remove all severity types via the filters.

3. Extra list functionality

I added a filter bar and expand/collapse buttons to the top of the lists that need to actually be hooked up (if possible).

4. Action buttons

I couldn't move the action buttons so I added a placeholder location "Action button here".

5. Severity indicators

It looked like each severity had it's own description that didn't change base on the issue type, so instead of displaying this description repetitively, I moved the description to be a tooltip around the badge.

Also, since only the 'by index' grouping actually has multiple issues and severities, I removed the numbers from the other groupings. However, I think you can go ahead and list all severities when grouping by index instead of just showing the highest severity.

A couple questions:

a. Are you thinking of adding any pagination to the list of issues?
b. Is there any way to format the details? It's really hard to read as a long string
c. Can the details be really long? Should we consider truncating those?

I still need to:

• Style the all clear states, they're good as placeholders for now
• Browser check

[joshdover]

Wow this looks 1000x better. Answers to your questions:

a. Are you thinking of adding any pagination to the list of issues?

Hadn't thought about pagination, but could be added easily. Anything you think we should do specifically for that or do you think using the EUI pagination component works well for this page?

b. Is there any way to format the details? It's really hard to read as a long string

The details string comes straight from Elasticsearch, so we don't have much control here. We could definitely suggest some changes to the format though. Once we have ES actually returning real data, we'll be able to see what those details messages look like.

c. Can the details be really long? Should we consider truncating those?

Unknown so far. The ES team has started to implement a few checks for 6.x and so far there aren't any long ones, but they have a lot of deprecations to catch up on still. I'll keep an eye on these as they go in and either see if we can't make them short or adapt our UI if needed (maybe truncated with a "Expand" button?). Though it might make sense to just go ahead and implement a UI solution now so its more future-proof. What do you think?

---

Couple of my questions:

• Should both summary tiles on the front page ("2 cluster issues") be present if there is say 1 index issue and 0 cluster issues or should only the index one be shown in that case?
• For the action button, there is one problem. We won't have a single action button that fixes an issue for multiple indices. This pattern won't quite work since we have multiple indices that each need to be addressed individually:

I think we either need to add the action button when you group by index and/or we need to move the action button into the table of indices so the admin can take the action for each index. Thoughts?

[cchaos]

a. Pagination: Yes, I just using the EuiPagination component will work
c. I agree, that having the table row expand to show all would be the best way to truncate that.

---

1. Yes, both stats should be present even if one has 0 issues.
2. It's fine to move the action button to be per index

[joshdover]

Great, I can make those changes! Do you want me to go ahead and merge this and start updating it? We can pull in the "all clear" states later.

[cchaos]

Yep, sounds good! Thanks @joshdover !