mohsenasm / swarm-dashboard

A Simple Monitoring Dashboard for Docker Swarm Cluster

MIT License

162 stars 26 forks source link

Design improvements #6

Closed charypar closed 7 years ago

charypar commented 7 years ago

Apply suggestions from #4.

to do

[x] better colours
[x] fix spacing

charypar commented 7 years ago

How is this spacing @clmntnbrn?

clmntnbrn commented 7 years ago

👍

clmntnbrn commented 7 years ago

How do you feel about the contrast between the bg colour of the rows? As in, there barely is any...

clmntnbrn commented 7 years ago

Also the outer indicator line (white one) starts way above the table, is this intentional? The app_api doesn't have a dot on it's line, and I'm not sure if it should or not - the behaviour of a line running by a row label with no dot doesn't happen anywhere else. But I may not understand because I don't understand what the dashboard is telling me 😉

charypar commented 7 years ago

I'm not sure about the contrast either - wanted to make the rows (services) a little easier to distinguish, but I'm not sure it's really working... any ideas?

The T-cap is intentionally above the table (maybe not high enough?), because it signifies that network is the one that takes connections from the outside.

The dots mean a connection to the network. The services just happen to be ordered in a way that the situation of network going past with no connection doesn't happen anywhere but the white one, with larger stacks and more complex networking setup, that would happen more often.

I was thinking about also drawing a horizontal line from the service name to the dot, to make it more obvious. Not yet sure whether I want to draw a single line through all of the connection, or move the dots vertically a little and draw parallel lines for each dot...

clmntnbrn commented 7 years ago

Hmm it's a tricky one. I've played with the colours in the swarm.html you gave me and there are these two solutions:

changing the contrast of the rows (maybe not this colour though, I haven't worked it out yet)

adding keylines (not going full width, I just couldn't be bothered to fix that 😉 )

clmntnbrn commented 7 years ago

Putting aside the colours etc, how do you feel about this spacing:

I just changed the margin on the td li to be margin: 12px 6px;

charypar commented 7 years ago

Ok, I made the spacing a little more airy, I think I'm happy with it now. Going to merge this. We should probably open an issue for a longer term discussion about design changes, I feel like the look may be evolving for a while :)