opened
jshaughn
username_0
This is related to some smaller issues, like the [time range discussion](https://github.com/kiali/kiali-design/issues/78), the [edge label issue](https://issues.jboss.org/browse/KIALI-2286) and probably the migration to PF4; but this a about the general layout of the upper graph controls and is tied to [KIALI-2321](https://issues.jboss.org/browse/KIALI-2321).

The Jira was generated by @jmazzitelli when he was unable to reduce screen width to his liking without wrapping the elements on the graph toolbar:

![screenshot](https://user-images.githubusercontent.com/2104052/52214307-4ff57000-285f-11e9-9beb-354d1971cd0b.png)

Seeing the amount of whitespace right of the namespace selector, and then again next to the "Graph" header, makes us wonder if we need to take another look at the layout, especially given that we may have more features on the way.
Review of Graph namespace/heading/toolbar layout
issue
created
serenamarie125
username_1
having a separate namespace selector and title bar is consistent with OpenShift.  I don't think that's an issue.

I do think that we need to look at the rest of the information you have here and how it's laid out.  I'd think we could hide some of this (for example the fetching rate) .
comment
created
abonas
username_2
@username_1 are there quick wins here on how to improve this? or only a larger redesign?
comment
created
jshaughn
username_0
@username_2 @username_1 I have played around with this with @jmazzitelli  and have some suggestions:

- Align the "Graph" breadcrumb and the first button below it (this seems consistent with the OS console as well).
- Remove the "Fetching" title and add either a hover tooltip to explain things, or just have the Tour help explain it. (note that not every screen using the duration/refresh widgets has a Tour)
- Change "min" and "sec" to more standard duration notations in the dropdowns.  For example, "Last 1m", "Last 1h", Last "1d", "Every 15s", "Every 5m".
- Remove the clear icon (the X) for find/hide when the input is empty.
- Reduce the  Find/Hide input boxes until we have enough space to handle this resolution (1280x1024)
- Note that we already removed the "Graph Type" title in a previous PR.
- I would also recommend swapping the graph type and display buttons for a more logical ordering.

So, it would look something like this:

![image](https://user-images.githubusercontent.com/2104052/53742792-765ef900-3e67-11e9-90a1-4c38d96806d3.png)
comment
created
jshaughn
username_0
Closing. This work is completed and there are newer designs related to PF4.
comment
closed
jshaughn
username_0
issue