Better Key Metrics Display

[ArneTR]

We want to add more key metrics directly in the quick view of the Dashboard.

Currently the values provide limited value for new users, as they lack some expected components (CPU, DRAM etc) and show however some harder to understand values (Embodied Carbon Machine, Operational carbon machine).

In this idea we want to list power values for CPU, DRAM, GPU, SDD/HDD and Network directly in the quick view.
Furthmore for each value the carbon should also be directly highlighted.

Adding just more values looks gruesome.

here is a design idea to make it more columnar. The idea is to show power and carbon directly.

Hiding detailes like the split of embodied and operational in the detailed metrics.
What somehow needs to be put somewhere is the phase runtime stil ...

@ribalba what do you think?

[ribalba]

I like the idea of cleaning it up a little. I couldn't get the code to work so please find attached my take. I would make the title grey as you did.

I don't like the orange for all the numbers as the eye can't settle. Also I don't like that the CO2eq is the same size as the values. The values will be very small in most cases and people will not really know what 0.4 gCO2eq really means.

I like the icons and the title.

[ArneTR]

OMG this looks so much better. Thank you! Will do a new design concept and post.

[ArneTR]

Two new design ideas. One generated with ChatGPT and some iteration.

The other with https://lovable.dev/

Looking forward to your feedback @ribalba @davidkopp

I also incorporated the idea from David to keep network in a separate box, as it is more an impact, not a direct emission

[davidkopp]

In general:

• the second design looks much prettier
• order of the "Energy/Power/CO2" tabs / buttons: Semantically it would make more sense to have the order Power, Energy, CO2

Specific to the second design:

• I only dislike the individual buttons for Energy/Power/CO2 for each component. I would prefer to have these buttons at one place (e.g. under the title "Hardware Components") and if changed all components are changed.
• at the displayed +- changes values, it would be helpful to also be able to see it as percentages (like it is already currently the case in the comparison view).

Regarding the network values:

• Separating the network from the hardware components is good!
• displaying the SCI score next to the network impact and embodied carbon impact could be confusing, because the SCI score will include the embodied carbon impact, but we may remove the network impact from it
• I would even prefer, if the network related values would be displayed in a completely separate row.

Proposal with 3 rows:

1. Hardware Components (like displayed in the second design)
2. Network
   • Data Transferred (MB)
   • Network Energy
   • Network CO2
3. Impacts
   • Phase Duration
   • Embodied Carbon
   • Operational Carbon (= machine co2 value)
   • SCI Score

Regarding the data transferred (not specific to the redesign, but another idea for improvement):
It would be great to have two different values, one for the inter-service communication and one for the client-server communication. At least in some usage scenarios it could be differentiated by the communication that happens between the container that is used in the flows with other containers and the communication that happens between containers that are not part of the flows. If that would be possible, the calculation of the networks energy consumption could be also improved.

[ribalba]

@ArneTR can you share the code?

[ribalba]

I now have two designs:

one with the menu at the top which I prefer as it looks cleaner and we also have that for the flows. I have also cleaned up the cards and added a ? field so we can show detailed information.

Feedback welcome.

[ArneTR]

Two is more clear I feel, although it introduces also an "unexpected " UI element.

I also see this failing harder on mobile ... how does that even look? Can you add a mobile screenshot?

Idea: What works great is uploading a screenshot to lovable and ask for "more nice UI/UX variations". Althogh the HTML is unusable it generates good ideas ... and is free

[ribalba]

Mobile: I still need to add a little space but you get the idea. You can make the menu stackable

https://fomantic-ui.com/collections/grid.html#stackable

[ArneTR]

looks digestable to me. The goal for mobile is anyway only to be usable and not fully polished I would argue. GMT displays far to much data to be fully usable on mobile only.

I think this can move forward now.

[ribalba]

After implementing this I felt really weird and not the feel of the page. Here is an updated version. This now uses the same menu as the main page. Except it points which makes it a little clearer. IMHO. What do you think? Colours are not final just to guide the eye a little.

Also I decided to include network energy/ power and carbon into the hardware section.

[davidkopp]

Looks good :) But I still don't like that the network component is part of the hardware row. Placing network next to the hardware components implies wrong conclusions on the end user side. In contrast to the hardware values, the network value is only estimated, depends on many parameters and assumes a global operation.
Therefore I would still vote for having an own row only for network related metrics.

[ribalba]

I agree. With the new design quite easy to change. Here is the new design. Icons still need updating.

[ArneTR]

I t looks neat, but can we get to less rows? 2 rows should be the cap IMHO. Does that fit?

[ribalba]

[ArneTR]

Looks good!