UI: Improve usability with many subscriptions

[jessesuen]

Proposed Feature

I created a Kargo example that deploys GCP's microservices-demo, which has 12 image repository subscriptions. With that many image repositories, the UI doesn't scale well in some parts.

1. Tree becomes vertically too tall

With that many subscriptions, the tree becomes very tall. While it's possible to hide the subscriptions, you do still want to see what is being subscribed to and need to show them. I wonder if we could show the subscriptions in multiple columns instead of a single one, once the height reaches a certain point.

2. Last image fragment name is not shown in pipeline

This is not necessarily a problem with many subscriptions, but in this example, all the images come from same image registry. But only the last fragment is different (e.g. adservice vs. cartservice):

• us-central1-docker.pkg.dev/google-samples/microservices-demo/adservice
• us-central1-docker.pkg.dev/google-samples/microservices-demo/cartservice

The last fragment is typically the most important part of the image name (since most of the time the image registry is the same for all of the images), but it is not shown in UI.

3. Last image fragment name is not shown in Freight drawer view

This is the same problem as 2, but in the pull out drawer after clicking on a Freight

4. Last image fragment name is not shown in Freight assembly view

This is same problem as 2, but in the freight assembly view

5. Overlapping components in Freight assembly view

The tag selection box overlaps the images row:

6. Freight does not show all artifacts

Technically its possible to use your mouse wheel to scroll through the artifacts when hovering over a Freight, but it's not obvious that this is possible. Perhaps we should indicate that there are many artifacts and just show an icon, without showing the actual value (similar to what the Stage does).

7. Stage artifact icon overflow

I have 12 docker containers, but only 10 are shown on the Stage:

12 subscriptions might be an extreme example, but here we don't have a way to hover over all 12 icons. I suggest that we start wrapping the icons at ~8 or so items

[Brightside56]

Freight assembly view

In case of freight assembly I often need to create freight that differs from the previous one by one/two artifacts from 5-10, but for this I need to search and select proper version for each artifact. Option "create freight like this" could help a lot

[krancour]

In case of freight assembly I often need to create freight that differs from the previous one by one/two artifacts from 5-10, but for this I need to search and select proper version for each artifact. Option "create freight like this" could help a lot

@Brightside56 I recall you mentioning that once before and I thought we had an open issue for that, but cannot find it. Opening one.

[Brightside56]

@krancour #2756 - this one can be closed I think

[antoine-sncf]

We have the same issue with the vertical group of the warehouse (we have 3 warehouses : app / capa/ stack, the last one is a warehouse with 50 images/charts ).
We're encountering a HUGE memory consumption in the browser (i suspect it's related to the warehouse subscriptions but haven't had enougth time to identify the source of the issue.) Tried to clean, only 5 freights, 3 stages, didn't improve

Regarding the mentionned points, here are the things we were thinking:

1. Group is closeby default when more than 5 subscription ?
2. Agreed only last fragment is worth the repository server itself is not interesting
3. Same as 2, having a list (table) would be nice too
4. Same as 2
5. Same as 2 (with option to display full url ?)
6. Perhaps being able to define what item you want to show (2 max?) for easier tracking
7. Agreed, but could also be display by "priorities" like previous point