Ceph » mgr » Dashboard

What¶

The use case would be to achieve what is described here:

Current
¶

Proposed¶

How¶

New Angular component or directive that creates a Bootstrap badge with a background color that depends on the text of the badge:

<cd-label>Primary</cd-label>
<cd-label>Secondary</cd-label>

In the above example, the primary and secondary labels would have different background colors. The color depends on the contents (text) of the label.

There's a specific use case here: sometimes badges/labels can be used for key-value expressions. In that very case, probably we might not want to change the color with the value, and only with the key. And example of this would be labels like mon: 1, where we want the mon part to be colored always with the same colour even if the count is 1, 2, 3...

For that latter use case we could derive a new component from the above:

<cd-kv-label key="mon">1</cd-kv-label>
<cd-kv-label key="osd">100</cd-kv-label>

For deriving the color from the text there could be multiple approaches:

• Random color based on the hash, like colorhash library and demo.
• However the above will result in potentially any color (even those not matching our current theme), so a solution would be to provide a bucketed solution. The input to the component is the string to hash a max-colors input (e.g.: 10). Then: hash(string) mod max-colors. Instead of directly setting the CSS background color property, the component sets a class cd-label-color-0, cd-label-color-1 ... cd-label-color-9, and then we can customize the colors by defining that CSS classes.