Show pod metrics donut to right of sparkline

[spadgett]

Place the pod metrics donut to the right of the sparkline at wider screen widths to make better use of the screen space. At mobile, still place the donut above the sparkline.

Fixes https://bugzilla.redhat.com/show_bug.cgi?id=1387286
Fixes #912

@jwforres PTAL
@smarterclayton @stevekuznetsov @jupierce CC

[jwforres]

what does it look like with the network metrics that don't have a donut, i assume the sparklines are all the same width?

[spadgett]

@jwforres

[jwforres]

hmm the horizontal line makes network look like a part of the same section as cpu

[spadgett]

the horizontal line makes network look like a part of the same section as cpu

Let me see what I can do.

[spadgett]

@jwforres How about this?

[spadgett]

Hold, need to make some updates for the monitoring page, which has the sidebar

[spadgett]

Updated for the monitoring page

[jwforres]

Thats definitely better although i think i would reduce the spacing between Network and the bar, probably half as much. Its definitely larger than the space between the numbers and the bars on the other two.

[jwforres]

I can't decide but I wonder if it would look better to move the number information directly to the right of the header, like CPU - 500[etc]

and then match the header font size and number font size

[spadgett]

We do show small "Container Metrics" or "Pod Metrics" text by the header if there is more than one container, although we could move that.

[spadgett]

I can't decide but I wonder if it would look better to move the number information directly to the right of the header, like CPU - 500[etc]

[spadgett]

Or if we just bump the font size for the metric label

[jwforres]

yeah inline at the same font size it looks weirdly likes its part of the header, dont like it :-\

I can't decide on the larger header size, feels a little overwhelming, @ajacobs21e opinion?

[stevekuznetsov]

Maybe the "X available" could be on top of the doughnut and "in use" could come after the "x millicores" inside of the doughnut?

[stevekuznetsov]

As both are only set up if quota is on, right?

[spadgett]

Here is the Patternfly style for reference:

http://www.patternfly.org/pattern-library/cards/utilization-trend-card/#/api

[jwforres]

Eh, maybe just stick with the smaller header then.

…

On Mon, Dec 5, 2016 at 2:28 PM, Sam Padgett ***@***.***> wrote: Here is the Patternfly style for reference: http://www.patternfly.org/pattern-library/cards/ utilization-trend-card/#/api — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#983 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABZk7QEFCX54fdYLQ4OxJ5UrOfTVWNo0ks5rFGX7gaJpZM4LEO-c> .

[spadgett]

Tightened the spacing under the Network header

[jwforres]

Do the horizontal lines going all the way across look strange when none of the donuts are there?

[spadgett]

Do the horizontal lines going all the way across look strange when none of the donuts are there?

I only include them when there's at least one donut. And the sparklines are 100% width when there are no donuts.

[spadgett]

If we always want the lines, this is how it looks:

[jwforres]

im ok with either of those, though i think i prefer with the lines

[spadgett]

i think i prefer with the lines

Let me add them to deployment metrics in that case to be consistent

[spadgett]

Added "Used" inside the donut.

[spadgett]

Updated, @jwforres PTAL

[jwforres]

[merge]

[openshift-bot]

Evaluated for origin web console merge up to a6e9dcb

[openshift-bot]

Origin Web Console Merge Results: SUCCESS (https://ci.openshift.redhat.com/jenkins/job/test_pull_requests_origin_web_console/806/) (Base Commit: eb259ce)