Dashboard Utilization card #1732

rawagner · 2019-06-17T14:37:28Z

@TheRealJon I've extracted Area chart component which is not using prometheus hook so it can be reused by Dashboard too. Same as I did in #1723 for Gauge.

openshift-ci-robot · 2019-06-17T14:37:44Z

Hi @rawagner. Thanks for your PR.

I'm waiting for a openshift member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

rawagner · 2019-07-02T13:58:14Z

/ok-to-test

vojtechszocs · 2019-07-02T14:08:32Z

frontend/public/components/dashboard/grid.tsx

Maybe PF-React also provides such media size breakpoints, so we can reuse them?

I couldnt find those breakpoints anywhere in PF :/

They are in the @patternfly/react-tokens package.

CSS Variable React Token Value

--pf-global--breakpoint--xs global_breakpoint_xs 0

--pf-global--breakpoint--sm global_breakpoint_sm 576px

--pf-global--breakpoint--md global_breakpoint_md 768px

--pf-global--breakpoint--lg global_breakpoint_lg 992px

--pf-global--breakpoint--xl global_breakpoint_xl 1200px

--pf-global--breakpoint--2xl global_breakpoint_2xl 1450px

@TheRealJon thanks, im using global_breakpoints from PF in latest update

vojtechszocs · 2019-07-02T14:11:36Z

frontend/public/components/dashboards-page/overview-dashboard/capacity-card.tsx

Nit: cq => pluginQuery

vojtechszocs · 2019-07-02T14:15:42Z

frontend/public/components/dashboards-page/overview-dashboard/utilization-card.tsx

Can we extract this into public/components/dashboards-page/overview-dashboard/queries.ts as utilizationQueries?

In other words, we should put all queries in one place for easier maintenance and consistency.

ok, I put those into public/components/dashboards-page/overview-dashboard/queries.ts as utilizationQueries

vojtechszocs · 2019-07-02T14:18:57Z

frontend/public/components/dashboards-page/overview-dashboard/utilization-card.tsx

Nit: unnatural newline, I'd remove it or add one after both const declarations.

rawagner · 2019-07-02T14:29:09Z

@vojtechszocs addressed all your comments

rawagner · 2019-07-08T18:05:48Z

@TheRealJon Thank you! I will take a look at that date formatting in a follow-on

spadgett · 2019-07-08T19:45:23Z

/approve

vojtechszocs · 2019-07-08T20:36:47Z

frontend/public/components/dashboard/grid.tsx

Looking at node_modules/@patternfly/react-tokens/dist/js/index.js the exported objects looks like

{"name":"--pf-global--breakpoint--lg","value":"992px","var":"var(--pf-global--breakpoint--lg)"}

so if value changes its CSS unit from px to something else our layout will probably break.. (not sure we can do anything to prevent that)

I was looking at this too. One (small) problem I have with using these breakpoint vars is that we are using breakpoints against the width of an element (instead of the viewport). Seems a bit arbitrary, and maybe a bit confusing since it will cause reflow at different viewport widths than everything else. I don't think it's a huge deal, which is why I didn't leave a comment originally, but since it came up 😆

vojtechszocs · 2019-07-08T20:45:33Z

/lgtm

openshift-bot · 2019-07-09T00:04:05Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T03:23:05Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T03:32:12Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T03:45:05Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T04:10:58Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T04:24:13Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T05:02:59Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T05:15:58Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T05:42:01Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T05:55:08Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T06:07:58Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T06:22:14Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2019-07-09T06:46:59Z

/retest

Please review the full test history for this PR and help us cut down flakes.

atiratree · 2019-07-09T08:22:50Z

/lgtm

openshift-ci-robot · 2019-07-09T08:22:59Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: rawagner, spadgett, suomiy, TheRealJon, vojtechszocs

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [spadgett,vojtechszocs]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-bot · 2019-07-09T09:36:00Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-ci-robot requested review from christianvogt and jcaianirh June 17, 2019 14:37

spadgett added this to the v4.2 milestone Jun 17, 2019

openshift-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 17, 2019

rawagner force-pushed the dashboard-utilization-2 branch 2 times, most recently from a4dbf6f to 30696b4 Compare June 18, 2019 12:35

openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 18, 2019

rawagner force-pushed the dashboard-utilization-2 branch from 30696b4 to b085840 Compare June 18, 2019 12:43

openshift-ci-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 23, 2019

rawagner force-pushed the dashboard-utilization-2 branch 4 times, most recently from 1f50ada to e1858f5 Compare June 27, 2019 11:49

openshift-ci-robot removed the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jun 27, 2019

rawagner force-pushed the dashboard-utilization-2 branch from e1858f5 to ba754e6 Compare June 27, 2019 13:36

rawagner changed the title ~~WIP: Dashboard Utilization card~~ Dashboard Utilization card Jun 27, 2019

openshift-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jun 27, 2019

rawagner force-pushed the dashboard-utilization-2 branch 2 times, most recently from 741a5e5 to a57a8cc Compare July 1, 2019 17:55

openshift-ci-robot added ok-to-test Indicates a non-member PR verified by an org member that is safe to test. and removed needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. labels Jul 2, 2019

vojtechszocs suggested changes Jul 2, 2019

View reviewed changes

rawagner force-pushed the dashboard-utilization-2 branch from a57a8cc to c649911 Compare July 2, 2019 14:27

vojtechszocs mentioned this pull request Jul 2, 2019

Health and Details card for ceph dashboard #1803

Merged

openshift-ci-robot assigned TheRealJon Jul 8, 2019

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jul 8, 2019

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jul 8, 2019

vojtechszocs approved these changes Jul 8, 2019

View reviewed changes

openshift-ci-robot assigned vojtechszocs Jul 8, 2019

Add utilization card

ac0d0e7

rawagner force-pushed the dashboard-utilization-2 branch from 37837b6 to ac0d0e7 Compare July 9, 2019 06:47

openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Jul 9, 2019

openshift-ci-robot assigned atiratree Jul 9, 2019

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jul 9, 2019

openshift-merge-robot merged commit 4b08faa into openshift:master Jul 9, 2019

CSS Variable	React Token	Value
--pf-global--breakpoint--xs	global_breakpoint_xs	0
--pf-global--breakpoint--sm	global_breakpoint_sm	576px
--pf-global--breakpoint--md	global_breakpoint_md	768px
--pf-global--breakpoint--lg	global_breakpoint_lg	992px
--pf-global--breakpoint--xl	global_breakpoint_xl	1200px
--pf-global--breakpoint--2xl	global_breakpoint_2xl	1450px

Dashboard Utilization card #1732

Dashboard Utilization card #1732

Uh oh!

Conversation

rawagner commented Jun 17, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

openshift-ci-robot commented Jun 17, 2019

Uh oh!

rawagner commented Jul 2, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TheRealJon Jul 8, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rawagner commented Jul 2, 2019

Uh oh!

rawagner commented Jul 8, 2019

Uh oh!

spadgett commented Jul 8, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vojtechszocs commented Jul 8, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

atiratree commented Jul 9, 2019

Uh oh!

openshift-ci-robot commented Jul 9, 2019

Uh oh!

openshift-bot commented Jul 9, 2019

Uh oh!

Reviewers

Assignees

Labels

rawagner commented Jun 17, 2019 •

edited

Loading

TheRealJon Jul 8, 2019 •

edited

Loading