[feature] status icon of application page

[dgc1980]

rather than opening each application to see if it is running.

a status icon on each application showing if it is running or not.

[LLxD]

Hey! I can work on that if no one is working on it already! 👍

[andrasbacsai]

Lets go, @LLxD ! Thanks! 🙂

[marconneves]

@LLxD and @andrasbacsai this is finished? Already?

[LLxD]

In an update, I think @andrasbacsai introduced this feature, maybe we can close this issue! Let's wait for his answer to ensure this 🚀

[MartinKavik]

Hey guys! Just a feedback for the design (should I create a new issue?):

I'm slightly colorblind (like 8% of men) and I can't notice failed apps/services at first glance on the dashboard. Also the color dots are too close to the next app/service so it's a bit confusing imho.

I would probably appreciate at least a symbol like a check mark when everything runs as expected and an exclamation mark when the app is dead. Also perhaps a (red) border around the failed apps/services would make them immediately noticeable.

Thanks! And let me know when you want some help with it 🙂

[BOTKooper]

:wave: hey guys, what do you think about this approach? less pretty then current badges but definitely more readable

https://user-images.githubusercontent.com/26670144/222305736-eb26f30e-1659-4fba-8aba-ccb7ad4ed314.mov

upd: made it look less ugly

https://user-images.githubusercontent.com/26670144/222505655-19696701-3450-4960-bdcf-d409f3675df2.mov

[MartinKavik]

@BOTKooper I like the second version, nice! Your eyes still have to jump from the type icon/logo to status and then back to the left to see the container name when you are searching for failed apps and that red cross in the right top corner looks a bit like a delete / close button but it resolves my color problem and looks better I think :)

[BOTKooper]

@MartinKavik Glad to hear that!

that red cross in the right top corner looks a bit like a delete / close button

Yeah, I see that... I think IBM Carbon suggestions for status indicators will work like a charm here (meaning "replacing material icons"), but i'm not sure yet what is a position of core team members about bringing this icon package of theirs for such a small thing

@andrasbacsai any thoughts on this?

[BOTKooper]

Peek into Carbon icons and reduced animation (no more spinner for "loading" status)

https://user-images.githubusercontent.com/26670144/222548618-38b93a0f-763d-43eb-99ae-5756ff9f7ad3.mov

Not sure which one of checkmarks works better 🤔

without outline	with outline

[MartinKavik]

@BOTKooper I like the without outline version better because it's more distinguishable from other icons, especially from the error icon. Also it doesn't attract so much attention like other icons which is good - most of time you don't care about the containers that work as expected.

A question: What the In progress icon (the first one) represent? I wasn't thinking too much about it but perhaps we'll need to visualize also states like "it's active and a new image is building" (two icons: checkmark + in progress) and then restarting (only an icon for restarting, perhaps that two arrows from your older design), etc. Just thinking :slightly_smiling_face:

[BOTKooper]

A question: What the In progress icon (the first one) represent?

It's kinda like a loader, looks like possible statuses are 'stopped' | 'error' | 'running' | 'degraded' | 'building' | 'healthy' and we're "assigning" service 'loading' status as placeholder while that api call for status resolves. So it will not be present on fully loaded page in 99% of cases (meaning "unless internet connection dropped")

Just found out that I didn't include all of the statuses from different parts of the app, so here is updated version (with preview of expected loading state for all services)

https://user-images.githubusercontent.com/26670144/222780130-01a3c2b4-936b-4656-9141-c51f22eee21e.mov

fun fact: this is accessible with screen-reader 😉

[MartinKavik]

Nice. I was asking about the state "it's active/dead and a new image is building" because (my) Rust apps may compile for more than half an hour and you wouldn't be able to see that your container is dead if you see only the building icon. So perhaps two icons shown at once will be needed - one for the current container status and one for the build status.

[BOTKooper]

Nice. I was asking about the state "it's active/dead and a new image is building" because (my) Rust apps may compile for more than half an hour and you wouldn't be able to see that your container is dead if you see only the building icon. So perhaps two icons shown at once will be needed - one for the current container status and one for the build status.

Well, since I'm only "re-colouring" current behaviour that's looking like separate feature request, lets keep the scope of this one at simple colored circle -> icons and create separate one for that

[andrasbacsai]

I'm closing this issue, because tracking features will be moved to GitHub discussions. Github issues will be only for bugs.

Version 4 is in full focus. v3 related issues will be closed, if it is not a critical bug.

Thanks for your understanding.