[Metrics UI] inventory view cleanup

[katrin-freihofner]

During a review I found a couple of things we should improve to polish our UI.

1. Responsive behavior

The actions in the header area could fit into a single line.

On smaller screens, the filter elements are getting bigger and are not aligned nicely. I think we should try to keep them in 1-2 rows.

The loading indicator is wrapped to a new line. I suggest to have it in a single line.

On smaller screens, elements overlap and are not readable.

2. Timeline

The "show/hide timeline" button does not have a background and can therefore be hard to read (especially in the table view).

3. CPU usage > 2000 %

Are we sure that there can be a CPU usage > 2000 %?

5. Waffle map legend

The waffle map legend is not aligned properly.

6. Wording

Should this maybe say "Unable to show historical data"?

Please use sentence case and units in all popovers.

Label: Log rate
Unit: Logs/s???

Label: Load
Unit: ???

I also suggest removing the milliseconds as they seem to be 0 anyhow.

7. Saved views

If a user has no saved views, I suggest changing Current view - No view selected to Save this view

Screenshots from the current Master branch.

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[formgeist]

Can I add another to this issue? I found the legend for the average metric doesn't match the visualization. I reckon this should use the full visualization color, used for the line in the area. Is that a Elastic Charts legend config?

[Zacqary]

If a user has no saved views, I suggest changing Current view - No view selected to Save this view

Not sure that works with the default interaction:

That said, when I'm getting into the No view selected state and I open Manage Views, it shows me:

@phillipb Is there a reason why it should be showing No view selected instead of Default view?

[Zacqary]

3. CPU usage > 2000 %
   Are we sure that there can be a CPU usage > 2000 %?

Is this on our shared cluster? The inventory view should only be displaying whatever data it gets from Elasticsearch, so I'd imagine the issue is somewhere in the data being reported. I'd want to check, though.

[katrin-freihofner]

cc @hbharding

[jasonrhodes]

@Zacqary in the interest of our release schedule, please feel free to separate out the simple, low-risk quick wins here that count as visual bugs so we can get them in for 7.10 -- we can move anything else that needs more investigation, or is higher risk, to a separate ticket and do it for 7.11.

[Zacqary]

On smaller screens, the filter elements are getting bigger and are not aligned nicely. I think we should try to keep them in 1-2 rows.

I'm able to get them to line up in 1 row, but getting them to wrap to 2 is proving elusive. And the 1 row layout isn't good enough:

I feel like getting this to work is going to require a more fundamental refactor of how we're composing this element with EUI. There's a lot of interacting EuiFlexGroups here.

[Zacqary]

With @hbharding's help, managed to get the filter wrapping to work

[hbharding]

Thanks @Zacqary - I'm checking out your PRs and will leave any additional comments I have there.

[hbharding]

Re: Saved Views saying "No view selected" - I wasn't aware this was possible / didn't account for it my designs. When I last worked on this, It was my understanding that, by default, the "Default" view would be used when users access the page. Users can change the default view by creating a new view, and setting that as the default. Is it possible to change this behavior? How does one get into a "no view selected" state?

[hbharding]

Not sure if you caught this one... The view toggle button looks like it has a z-index issue. It appears on top of the "saved view" flyout

[Zacqary]

@hbharding Looks like an issue with EuiButtonGroup interacting with EuiFlyout. I'll open an issue and see if I can add a workaround to our app

[Zacqary]

How does one get into a "no view selected" state?

It happens on page load, and you have to click it and select Default view to get out of it. Refreshing the page doesn't preserve the selection.

Maybe we should consider this a bug. I'll open an issue.

EDIT: Tracking in #79902