There's a hodge-podge of issues on the Insights dashboard

[Ichimonji10]

There are several issues visible on both the CRC insights dashboard and CRC beta insights dashboard. For testing, I used Firefox 75.0 and Chromium 81.0.4044.113. I've attached screenshots at the bottom of this post.

Insights system inventory:

• The header text is the same font as prose text.
• The blue "i" icon doesn't show a tooltip when hovered or clicked.
• The top link isn't underlined, but following links are.
• Links span the width of the card.

Subscription watch utilization summary:

• The header text is the same font as prose text.
• The card is empty, with no explanation of why.

Patch:

• The header text is the same font as prose text.
• Hovering a mouse cursor over any section of the pie graph produces a popup that covers the pie graph and points off the pie graph.
• The colors on the pie graph don't match the three colors on the legend.
• The colors on the bar graph are hard to distinguish.

Advisor recommendations:

• Hovering a mouse cursor over any section of the bar graph produces a popup that covers the pie graph and points to the wrong section of the pie graph, or doesn't point anywhere at all.
• The colors on the bar graph are hard to distinguish.
• Some links are underlined when moused over. Others are not.
• Some links span the full width of the graph, even when no text is present.
• The "incidents detected" text and the number next to it have differing vertical alignments.

Compliance:

• The pie chart is nonsensical. There is no legend indicating what the sections mean. Hovering a cursor over one section generates a popup with the following text:

  Standard System Security Profile for Red Hat Enterprise Linux 7: 38

  Hovering a cursor over the other section generates a popup with the following text:

  empty: 100

  What's up with that?

• The bottom of the card extends too far downwards.

• There is a large gap between most of the card content and the "more compliance policies" link.

Vulnerability:

• The "CVEs impacting your systems" text and the number next to it have differing vertical alignments.
• Hovering a mouse cursor over any section of the bar graph produces a popup that covers the pie graph and points to the wrong section of the pie graph, or doesn't point anywhere at all.
• The colors on the bar graph are hard to distinguish.
• The meaning of the bottom portion is unclear. What does "1 last 90 days"
  mean? What does "0 last 30 days" mean? Is this for new vulnerabilities?

Remediations:

• The top of the card is pushed down too far.
• What is the purpose of this card? To show which cloud connect jobs have run recently? That's at odds with the rest of this page. Most of the page shows tasks that can be done, whereas this card instead shows what has been done. And this is especially odd because it very much is possible to show a summary of which remediations could be performed.

Page-wide:

• Reducing the horizontal width of the page causes the "compliance" and "remediations" card to overlap the "advisor recommendations" and "vulnerability" cards. (True for Firefox, but not Chromium.)
• The top cards have blue top margins, but the other cards don't. Why?

Firefox screenshot:

Chromium screenshot:

[kybaker]

Top row of cards:

* The header text is the same font as prose text. 

Now that the top row no longer just has information about the infrastructure lets change the font size, weight and style to match the rest of the cards. This should increase the height of the card and push the content down a bit.

[kybaker]

Links Issues

* The top link isn't underlined, but following links are.

• The 'Systems running...' text link in the inventory card does not have an underline or change color on hover like other links in the dashboard.

• Also the blue text under the charts does not have a hover color or underline.

* Links span the width of the card.

• In the top row of cards the links span the whole width of the card. Only the text should be clickable. You can see the area that is clickable highlighted in blue.

[kybaker]

Pie charts

* Hovering a mouse cursor over any section of the pie graph produces a popup that covers the pie graph and points off the pie graph.

Advisory and vulnerability

* Hovering a mouse cursor over any section of the bar graph produces a popup that covers the pie graph and points to the wrong section of the pie graph, or doesn't point anywhere at all.

Th popup on the bar chars should be moved to appear above the bar. I suspect the primary issue is when the tooltip launches to the right it appears to the right over a section the user is not highlighting. I suspect a width limitation causes the arrow to disappear.

The tool tip in the pie chart appears directly over where the user is highlighting data. This causes the arrow to appear inconsistently.

[kybaker]

Patch:
The colors in the legend don't match the colors in the chart. Should adjust the legend color order.

[kybaker]

Advisor card:

1. Number and the 'Incidents detected' text are misaligned. Same issue on the vulnerabilities card.
2. Update the 'Low' severity bar and legend color to --pf-global--palette--gold-200. This will provide more contrast.
3. The text is a lighter weight in the legend. I can not figure out why @christiemolloy

[kybaker]

Add title above published CVEs:

Same font styles as the other titles but 14px font size.

[kybaker]

Compliance card:
If there are 0 systems need to make the pie chart gray. Update the text in the tooltips message. Add the little blue circle which serves as a bit of a legend. Need to change the bottom link to say 'All compliance policies'

If there is only one compliance policy can we have the remediations move up to fill the gap.

[kybaker]

Page-wide:
The cards expand to fill the height of the window. It would be better if the cards had a minimum height and a max height.
Current

New