Bug 1804447: Improve display of dashboard panels

[sg00dwin]

Fixes https://bugzilla.redhat.com/show_bug.cgi?id=1804447
multiple issues addressed by switching to flexbox instead of bootstrap grid

• Card height matches height of other cards in its row
• Single stat cards can collapse to min content height, if needed
• Loading state cards are same height as cards with content
• K8s cluster single stat row switched single row of 6 to two rows of 3 cards, which alleviates card title overflow

---

Mobile width greater than phone landscape width, between 567px and 1199px

• allows for 2 column display
• cards always expand to row width

---

Left and right dashboard card edges now align with monitoring-dashboards__header elements

---

Greater than 1200

[openshift-ci-robot]

@sg00dwin: This pull request references Bugzilla bug 1804447, which is invalid:

• expected the bug to target the "4.5.0" release, but it targets "4.4.0" instead

Comment /bugzilla refresh to re-evaluate validity if changes to the Bugzilla bug are made, or edit the title of this pull request to link to a different bug.

In response to this:

Bug 1804447: Improve display of dashboard panels

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.

[sg00dwin]

/bugzilla refresh

[openshift-ci-robot]

@sg00dwin: This pull request references Bugzilla bug 1804447, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target release (4.5.0) matches configured target release for branch (4.5.0)
• bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

/bugzilla refresh

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.

[spadgett]

/approve
/lgtm

[spadgett]

/cherry-pick release-4.4

[openshift-cherrypick-robot]

@spadgett: once the present PR merges, I will cherry-pick it on top of release-4.4 in a new PR and assign it to you.

In response to this:

/cherry-pick release-4.4

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.

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: sg00dwin, spadgett

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

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/public/components/monitoring/OWNERS [spadgett]

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

[openshift-ci-robot]

@sg00dwin: All pull requests linked via external trackers have merged. Bugzilla bug 1804447 has been moved to the MODIFIED state.

In response to this:

Bug 1804447: Improve display of dashboard panels

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.

[openshift-cherrypick-robot]

@spadgett: #4542 failed to apply on top of branch "release-4.4":

error: Failed to merge in the changes.
Using index info to reconstruct a base tree...
M	frontend/public/components/monitoring/_monitoring.scss
M	frontend/public/components/monitoring/dashboards/index.tsx
Falling back to patching base and 3-way merge...
Auto-merging frontend/public/components/monitoring/dashboards/index.tsx
CONFLICT (content): Merge conflict in frontend/public/components/monitoring/dashboards/index.tsx
Auto-merging frontend/public/components/monitoring/_monitoring.scss
Patch failed at 0001 Bug 1804447: Enable better display of dashboard panels

In response to this:

/cherry-pick release-4.4

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.

[spadgett]

#4534 has merged. Let's try again.

/cherry-pick release-4.4

[openshift-cherrypick-robot]

@spadgett: new pull request created: #4553

In response to this:

#4534 has merged. Let's try again.

/cherry-pick release-4.4

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.

[kyoto]

This introduced a bug because there is no longer any padding below the graphs. That means the legends are not visible.

[kyoto]

Simple fix for legends: #4556