kumahq / kuma-gui

🐻 A GUI built on Vue.js for use with Kuma.
https://kuma.io/
Apache License 2.0
38 stars 20 forks source link

Consider adding traffic cards to summary drawers #2772

Open johncowen opened 1 month ago

johncowen commented 1 month ago

Description

TLDR; Add "traffic cards" to our summary drawers


From a UX perspective its sometimes harder to compare individual DPPs because for certain pieces of information we make you click backwards and forwards between the listing page and the detail page.

It would be much easier to compare data (i.e. does this DPP send or receive traffic) if we could show that data in the summary drawers, but we also have to be careful how we present data in a small space such as our summary drawers.

In regards to comparing amount of traffic between different DPPs of a Service, in some instances such as a Delegated Gateway we don't necessary need to be careful of space - we only need to show outbound traffic

In other instances (such as non-delegated gateways and sidecars) we now have more patterns to use within our GUI, in this case "sticky tabs within drawers" (sticky meaning a selected tab will remain selected between different instances of a drawer). We could use this pattern to add [Inbound] and [Outbound] sticky tabs to the drawers meaning as a user I could then easily click around on several DPPs in a list and immediately see the traffic without losing my place or getting confused as to where I am (see related https://github.com/kumahq/kuma-gui/issues/2770)

michaelbeaumont commented 1 month ago

triage: what about the cost of making these calls more often? could we require a click but not change pages?