From f4cb62dffb2662b9ad893c984e95cfe8b8581171 Mon Sep 17 00:00:00 2001 From: Matthew Carleton Date: Wed, 17 Apr 2019 15:06:47 -0300 Subject: [PATCH 1/9] details/charts --- sass/components/ClusterOverview/health.scss | 4 ++++ sass/components/Dashboard/capacity.scss | 8 ++------ sass/components/Dashboard/detail.scss | 17 +++++++++-------- .../StorageOverview/data-resiliency.scss | 2 +- src/components/Dashboard/Details/DetailsBody.js | 2 +- 5 files changed, 17 insertions(+), 16 deletions(-) diff --git a/sass/components/ClusterOverview/health.scss b/sass/components/ClusterOverview/health.scss index 4cd0b140c..5712baf74 100644 --- a/sass/components/ClusterOverview/health.scss +++ b/sass/components/ClusterOverview/health.scss @@ -3,4 +3,8 @@ @media only screen and (min-width: 768px) { grid-gap: 0; } + + .pf-l-grid-item { + height: 100%; + } } diff --git a/sass/components/Dashboard/capacity.scss b/sass/components/Dashboard/capacity.scss index 7fc64e599..ff50e5fb4 100644 --- a/sass/components/Dashboard/capacity.scss +++ b/sass/components/Dashboard/capacity.scss @@ -8,9 +8,8 @@ display: flex; flex-direction: column; text-align: center; - flex-grow: 0; - width: 11em; - height: 15em; + justify-content: space-between; + flex: 0 1 100px; } .kubevirt-capacity__item-title { @@ -30,8 +29,5 @@ display: flex; flex-direction: column; - svg { - overflow: visible; - } } /* stylelint-enable */ diff --git a/sass/components/Dashboard/detail.scss b/sass/components/Dashboard/detail.scss index f74051740..1d62da24e 100644 --- a/sass/components/Dashboard/detail.scss +++ b/sass/components/Dashboard/detail.scss @@ -1,20 +1,21 @@ .kubevirt-detail__card { margin-bottom: 1rem; } - +.kubevirt-detail__list { + display: flex; + flex-wrap: wrap; +} .kubevirt-detail__item-title { - float: left; - clear: left; - // width: 150px; - margin-bottom: 5px; - font-size: 14px; + font-size: 0.875rem; text-transform: capitalize; + flex-basis: 100%; } .kubevirt-detail__item-value { - margin: 0 0 5px 160px; - font-size: 14px; + font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + flex-basis: 100%; + margin-bottom: 8px; } diff --git a/sass/components/StorageOverview/data-resiliency.scss b/sass/components/StorageOverview/data-resiliency.scss index a038577c6..7bf6b6b7d 100644 --- a/sass/components/StorageOverview/data-resiliency.scss +++ b/sass/components/StorageOverview/data-resiliency.scss @@ -22,7 +22,7 @@ } .kubevirt-data-resiliency__icon-error { - color: red; + color: #c9190b; } .kubevirt-data-resiliency__status-title-ok { diff --git a/src/components/Dashboard/Details/DetailsBody.js b/src/components/Dashboard/Details/DetailsBody.js index fca6f736f..b56dbb097 100644 --- a/src/components/Dashboard/Details/DetailsBody.js +++ b/src/components/Dashboard/Details/DetailsBody.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -export const DetailsBody = ({ children }) =>
{children}
; +export const DetailsBody = ({ children }) =>
{children}
; DetailsBody.propTypes = { children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired, From 7f4412090d27554c95c6f42c2989b3e15fabf60d Mon Sep 17 00:00:00 2001 From: Matthew Carleton Date: Wed, 17 Apr 2019 15:58:56 -0300 Subject: [PATCH 2/9] linting fix --- sass/components/Dashboard/detail.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/sass/components/Dashboard/detail.scss b/sass/components/Dashboard/detail.scss index 1d62da24e..2d54adb4c 100644 --- a/sass/components/Dashboard/detail.scss +++ b/sass/components/Dashboard/detail.scss @@ -1,10 +1,12 @@ .kubevirt-detail__card { margin-bottom: 1rem; } + .kubevirt-detail__list { display: flex; flex-wrap: wrap; } + .kubevirt-detail__item-title { font-size: 0.875rem; text-transform: capitalize; From 3e0dd127d53caf0971bba4d90c7210fe9737c3a8 Mon Sep 17 00:00:00 2001 From: Matthew Carleton Date: Wed, 17 Apr 2019 21:40:52 -0300 Subject: [PATCH 3/9] more linting --- sass/components/Dashboard/capacity.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/sass/components/Dashboard/capacity.scss b/sass/components/Dashboard/capacity.scss index ff50e5fb4..8ed95ae46 100644 --- a/sass/components/Dashboard/capacity.scss +++ b/sass/components/Dashboard/capacity.scss @@ -28,6 +28,5 @@ .kubevirt-capacity__graph { display: flex; flex-direction: column; - } /* stylelint-enable */ From 9ebd01038ed186a883e84c89471aff11528c83ea Mon Sep 17 00:00:00 2001 From: Rastislav Wagner Date: Thu, 18 Apr 2019 13:14:10 +0200 Subject: [PATCH 4/9] Update snapshots --- .../Details/tests/__snapshots__/Details.test.js.snap | 4 +++- .../tests/__snapshots__/ClusterOverview.test.js.snap | 4 +++- .../Details/tests/__snapshots__/DetailsBody.test.js.snap | 4 +++- .../Details/tests/__snapshots__/Details.test.js.snap | 4 +++- .../tests/__snapshots__/StorageOverview.test.js.snap | 4 +++- 5 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/ClusterOverview/Details/tests/__snapshots__/Details.test.js.snap b/src/components/ClusterOverview/Details/tests/__snapshots__/Details.test.js.snap index 1a8ced9f3..a9081970d 100644 --- a/src/components/ClusterOverview/Details/tests/__snapshots__/Details.test.js.snap +++ b/src/components/ClusterOverview/Details/tests/__snapshots__/Details.test.js.snap @@ -16,7 +16,9 @@ exports[`
renders correctly 1`] = `
-
+
diff --git a/src/components/ClusterOverview/tests/__snapshots__/ClusterOverview.test.js.snap b/src/components/ClusterOverview/tests/__snapshots__/ClusterOverview.test.js.snap index 7fcc8816e..2889ccbf4 100644 --- a/src/components/ClusterOverview/tests/__snapshots__/ClusterOverview.test.js.snap +++ b/src/components/ClusterOverview/tests/__snapshots__/ClusterOverview.test.js.snap @@ -26,7 +26,9 @@ exports[` renders correctly with Provider 1`] = `
-
+
diff --git a/src/components/Dashboard/Details/tests/__snapshots__/DetailsBody.test.js.snap b/src/components/Dashboard/Details/tests/__snapshots__/DetailsBody.test.js.snap index 8a9670fda..1a038d9e7 100644 --- a/src/components/Dashboard/Details/tests/__snapshots__/DetailsBody.test.js.snap +++ b/src/components/Dashboard/Details/tests/__snapshots__/DetailsBody.test.js.snap @@ -1,7 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` renders correctly 1`] = ` -
+
diff --git a/src/components/StorageOverview/Details/tests/__snapshots__/Details.test.js.snap b/src/components/StorageOverview/Details/tests/__snapshots__/Details.test.js.snap index 5daaf367c..b45601eb8 100644 --- a/src/components/StorageOverview/Details/tests/__snapshots__/Details.test.js.snap +++ b/src/components/StorageOverview/Details/tests/__snapshots__/Details.test.js.snap @@ -16,7 +16,9 @@ exports[`
renders correctly 1`] = `
-
+
diff --git a/src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap b/src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap index a127c9b9d..b997e6e74 100644 --- a/src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap +++ b/src/components/StorageOverview/tests/__snapshots__/StorageOverview.test.js.snap @@ -26,7 +26,9 @@ exports[` renders correctly with Provider 1`] = `
-
+
From 87e4c92a224264ecbd67e85879f36dbe1ebc91f2 Mon Sep 17 00:00:00 2001 From: Matthew Carleton Date: Tue, 23 Apr 2019 12:36:24 -0300 Subject: [PATCH 5/9] update health.scss --- sass/components/ClusterOverview/health.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/sass/components/ClusterOverview/health.scss b/sass/components/ClusterOverview/health.scss index aa9ae8b28..0fd780e26 100644 --- a/sass/components/ClusterOverview/health.scss +++ b/sass/components/ClusterOverview/health.scss @@ -7,7 +7,8 @@ .pf-l-grid-item { height: 100%; - .kubevirt-dashboard__card { - min-height: 120px; + .kubevirt-dashboard__card { + min-height: 120px; + } } } From 4ef2edf350cfde92c2cb88b09ab71cb190957131 Mon Sep 17 00:00:00 2001 From: Matthew Carleton Date: Wed, 24 Apr 2019 09:53:38 -0300 Subject: [PATCH 6/9] css updates --- sass/components/ClusterOverview/health.scss | 9 +++++---- sass/components/Dashboard/capacity.scss | 10 +++++++++- sass/components/Dashboard/events.scss | 3 ++- src/components/StorageOverview/Capacity/Capacity.js | 12 ++++++++---- 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/sass/components/ClusterOverview/health.scss b/sass/components/ClusterOverview/health.scss index 0fd780e26..47d031be7 100644 --- a/sass/components/ClusterOverview/health.scss +++ b/sass/components/ClusterOverview/health.scss @@ -4,11 +4,12 @@ grid-gap: 0; } - .pf-l-grid-item { + .kubevirt-dashboard__card { + min-height: 120px; height: 100%; + } - .kubevirt-dashboard__card { - min-height: 120px; - } + .pf-l-grid-item { + height: 100%; } } diff --git a/sass/components/Dashboard/capacity.scss b/sass/components/Dashboard/capacity.scss index 8ed95ae46..4a12eba3b 100644 --- a/sass/components/Dashboard/capacity.scss +++ b/sass/components/Dashboard/capacity.scss @@ -9,7 +9,7 @@ flex-direction: column; text-align: center; justify-content: space-between; - flex: 0 1 100px; + flex: 0 1 120px; } .kubevirt-capacity__item-title { @@ -28,5 +28,13 @@ .kubevirt-capacity__graph { display: flex; flex-direction: column; + + svg { + overflow: visible; + } +} + +.kubevirt-capacity__card { + height: 100%; } /* stylelint-enable */ diff --git a/sass/components/Dashboard/events.scss b/sass/components/Dashboard/events.scss index 9a12655da..c9ec4b6db 100644 --- a/sass/components/Dashboard/events.scss +++ b/sass/components/Dashboard/events.scss @@ -6,6 +6,7 @@ max-height: 400px; margin-top: 15px; + .co-sysevent__icon-box { display: none; } @@ -60,7 +61,7 @@ /* stylelint-enable */ .kubevirt-events__card-body { - margin: 0; + margin: 0 -15px 0 0; padding: 0; overflow-y: auto; } diff --git a/src/components/StorageOverview/Capacity/Capacity.js b/src/components/StorageOverview/Capacity/Capacity.js index ac845480d..8964684f3 100644 --- a/src/components/StorageOverview/Capacity/Capacity.js +++ b/src/components/StorageOverview/Capacity/Capacity.js @@ -15,8 +15,8 @@ import { formatBytes } from '../../../utils'; import { getCapacityStats } from '../../../selectors'; import { CapacityBody } from '../../Dashboard/Capacity/CapacityBody'; -export const Capacity = ({ capacityTotal, capacityUsed, LoadingComponent }) => ( - +export const Capacity = ({ capacityTotal, capacityUsed, LoadingComponent, className }) => ( + Capacity @@ -40,14 +40,18 @@ Capacity.defaultProps = { capacityTotal: null, capacityUsed: null, LoadingComponent: InlineLoading, + className: null, }; Capacity.propTypes = { capacityTotal: PropTypes.object, capacityUsed: PropTypes.object, LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + className: PropTypes.string, }; -export const CapacityConnected = () => ( - {props => } +export const CapacityConnected = ({ className }) => ( + + {props => } + ); From baf54d438bfac1d2200ec649689398e6ee91b193 Mon Sep 17 00:00:00 2001 From: Rastislav Wagner Date: Wed, 24 Apr 2019 15:31:54 +0200 Subject: [PATCH 7/9] update snapshots --- sass/components/Dashboard/events.scss | 1 - src/components/StorageOverview/Capacity/Capacity.js | 10 +++------- .../Capacity/tests/__snapshots__/Capacity.test.js.snap | 4 ++-- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/sass/components/Dashboard/events.scss b/sass/components/Dashboard/events.scss index c9ec4b6db..2982a6315 100644 --- a/sass/components/Dashboard/events.scss +++ b/sass/components/Dashboard/events.scss @@ -6,7 +6,6 @@ max-height: 400px; margin-top: 15px; - .co-sysevent__icon-box { display: none; } diff --git a/src/components/StorageOverview/Capacity/Capacity.js b/src/components/StorageOverview/Capacity/Capacity.js index 8964684f3..221065962 100644 --- a/src/components/StorageOverview/Capacity/Capacity.js +++ b/src/components/StorageOverview/Capacity/Capacity.js @@ -15,7 +15,7 @@ import { formatBytes } from '../../../utils'; import { getCapacityStats } from '../../../selectors'; import { CapacityBody } from '../../Dashboard/Capacity/CapacityBody'; -export const Capacity = ({ capacityTotal, capacityUsed, LoadingComponent, className }) => ( +export const Capacity = ({ capacityTotal, capacityUsed, LoadingComponent }) => ( Capacity @@ -40,18 +40,14 @@ Capacity.defaultProps = { capacityTotal: null, capacityUsed: null, LoadingComponent: InlineLoading, - className: null, }; Capacity.propTypes = { capacityTotal: PropTypes.object, capacityUsed: PropTypes.object, LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), - className: PropTypes.string, }; -export const CapacityConnected = ({ className }) => ( - - {props => } - +export const CapacityConnected = () => ( + {props => } ); diff --git a/src/components/StorageOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap b/src/components/StorageOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap index d6d3d5af9..ccc5fdee2 100644 --- a/src/components/StorageOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap +++ b/src/components/StorageOverview/Capacity/tests/__snapshots__/Capacity.test.js.snap @@ -2,7 +2,7 @@ exports[` renders correctly 1`] = `
renders correctly 1`] = ` exports[` renders correctly in Loading state 1`] = `
Date: Wed, 24 Apr 2019 11:29:10 -0300 Subject: [PATCH 8/9] updates --- sass/components/Dashboard/events.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/sass/components/Dashboard/events.scss b/sass/components/Dashboard/events.scss index 2982a6315..5a6483830 100644 --- a/sass/components/Dashboard/events.scss +++ b/sass/components/Dashboard/events.scss @@ -63,6 +63,7 @@ margin: 0 -15px 0 0; padding: 0; overflow-y: auto; + overflow-x: hidden; } .kubevirt-events__card-header { From b4d3b335539470341faaea0341b59fe5c407d619 Mon Sep 17 00:00:00 2001 From: Matthew Carleton Date: Wed, 24 Apr 2019 11:49:49 -0300 Subject: [PATCH 9/9] update events --- sass/components/Dashboard/events.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/sass/components/Dashboard/events.scss b/sass/components/Dashboard/events.scss index 5a6483830..7f7b1a57d 100644 --- a/sass/components/Dashboard/events.scss +++ b/sass/components/Dashboard/events.scss @@ -52,6 +52,10 @@ .co-sysevent__subheader > *:not(:first-child) { margin-left: 6px; } + + .co-sysevent-stream__status-box-empty { + margin-right: 15px; + } } .kubevirt-events__timestamp i {