Add tab for multi arch in history page

[Joxit]

Feature

This PR add the support for multi-arch images.

Screenshoot

@bjj: This style is OK for you ?

closes #130

[bjj]

Looks good. I assume the hardcoded arch list is just to make the mockup?

[Joxit]

Yes, this is a mock for the style only, I will continue the PR ASAP 😄

[Joxit]

I added the behaviour for multi arch images. Can you test it ?

[bjj]

Built with:

docker build -t joxit/docker-registry-ui:static -f static.dockerfile https://github.com/Joxit/docker-registry-ui.git#feat/multi-arch

Notes:

• Each time I go to the history page, I don't see tabs until I reload once. If I keep reloading, I keep getting tabs. If I go back to the image list and hit the history icon again, I have no tabs.
• When switching tabs, the sort order of the elements below changes sometimes. Some of the layers are created in the same second, but the order changes even for items with distinct creation times.

Other than that, it seems to work, and show me different things for the different archs.

(side note: it would be nice if "created" and "created by" (and other common fields) appeared in the same layout in each history block to make scanning by eye easier)

[Joxit]

Thank you for your feedback !
I have the same behaviour, I know how to fix the first one, the second is a bit weird 🤷‍♂️ I'm on it !

So the order will be Created => Created by => id for example ?

[bjj]

I'm not sure what the best order is. Created by / Created time seem like good places to start. Anything that makes it easier to scan down the list than this:

[Joxit]

I think I fixed the two issues!

The new order is Created, Created By, Size and then ID.
Created and Created By are always present.
ID and Size are always present together.
I like the ID in the left side on full screen and sticky in the same zone.

Here is the result:

[bjj]

Last change fixes all of the issues I saw. Tabs appear on first load, and order is stable when flipping tabs. It's much easier to flip between them to see what's changing, and easier to skim down the list to find the relevant history 👍

[Joxit]

Yeaaah cool ! 😄 thank you again for your feedback !