Redesign state badge widget on tiles

[raviks789]

resolves #303

requires Icinga/ipl-web#63

[flourish86]

I'm sorry, the original mockup still was done with the legacy theme.

Not sure, if it's just me. But compared to the mockups this doesn't look quite right, yet.

Here's a screenshot from how it looks in my Browser.

Could you please change the following:

• The Total count should be moved into the badge
• Please remove the dark transparent background
• The badges or badge groups

We should also combine handled and not-handled objects of the same state into a badge-group, like it has been done in the footer of the icingadb-web lists (e.g. Hosts).

Please take a look:

We should also combine the badges by color (e.g. CRITICAL/DOWN) as this is otherwise hard to grasp, especially when there's many different badges.

Here's another mockup with the dark mode:

If you have any further questions, feel free to ask. 😊

[flourish86]

Please address the mentioned changes, otherwise it looks fine.👌 Thanks!

[flourish86]

Looks perfect to me. Thanks! 👍

[nilmerg]

I've ensured compatibility with v2.10 now and cleaned up a bit. Note that Icinga/ipl-web#63 is required for this to work now.

Though, I believe some changes in the UI are not thought through enough:

• The total children count is placed at a weird location. The count belongs to the direct children. It's not the total of all states that are shown on the right. Best to be seen in the lower left tile. I think this confuses users an we'll get certainly reports that this number is too low. I think we should place the total count where it was previously.
• The OK states we're not shown previously. Now if there's everything green, like in the tiles below, they look somewhat off to me. I'd propose to not show them like before.

[flourish86]

As discussed in our meeting, we should change the badges counts to the following:

• We will only show problems, so everything, but ok/up
• We will refer to nodes (Host/Service/Process) for the states, so there will be max. one badge for every state
• As a consequence the sum of the state badges items will be max. the number of the total amount.
• To clarify this we label the total number of node “[n] Nodes”

This is how this would then for example look in the end.