Show replica status, closes #272

[Phillezi]

272

Shows the status of a deployments replicas, (if replicas > 1)

The different statuses

• Ready: Amount gotten from readyReplicas for replicas that are ready, no current action (showed in green)
• Occupied: Amount gotten from availableReplicas - readyReplicas for replicas that are doing something (showed in blue)
• Unavailable: Amount gotten from unavailableReplicas for replicas that are unavailable. (showed in red)
• Desired: Amount gotten from desiredReplicas - (availableReplicas + unavailableReplicas) for replicas that the user wants but doesnt exist. (showed in grey[800], light grey on dark-mode and dark grey on light mode)

What have i done

• I created a component ReplicaStatus.tsx that is displayed inside the Edit.tsx top bar that gets rendered if the resource.type is deployment and there are > 1 replicas on that deployment.
• Added i18n locale entries in en.json and se.json for the labels used to describe the statuses.

Screenshots

Deployments with short names

Deployments with longer names

Heres how it looks with more statuses

With many replicas

i18n locale status labels

[pierrelefevre]

Huh seems my commit didn't make it, but I edited the spacing to 1 (brings the button closer to the Status view, and added size="small" to the IconButton.

[pierrelefevre]

I wonder if it might be beneficial to remove the black border when showing many replicas, seems it gets pretty aliased otherwise?

[Phillezi]

Hi! Thanks for the feedback

• Updated the button size and the spacing.
• Changed from MenuItemto Typography(not clickable anymore) .
• Added a header to the dropdown with i18n locale.

Does this look good, or should i change anything?

Havent done the border removal on large amounts yet, but will start with that now

[pierrelefevre]

Nice! Maybe some more margin below the header would look good, could base it off the Menu component

[pierrelefevre]

Nice! Maybe some more margin below the header would look good, could base it off the Menu component

(divider might be unnecessary but do whatever looks best to you :D)

[Phillezi]

Added some more margin and changed the color of the divider, looks like this now:

Edit, forgot to mention:

If there are 20 or more replicas the gap/border gets removed:

[pierrelefevre]

Looking good! This will be a great addition to the console. Thanks for your work :)

[Phillezi]

Thanks! :)