Dashboard, Utilization: Render in narrow container

The Utilization component renders different sub-component structure for a narrow container.
kubevirt · Apr 5, 2019 · e953526 · e953526
1 parent d1e65fd
commit e953526
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 9 deletions.
diff --git a/sass/components/Dashboard/utilization.scss b/sass/components/Dashboard/utilization.scss
@@ -8,6 +8,21 @@
   }
 }
 
+.kubevirt-utilization__item-narrow {
+  border-bottom: 1px solid #d1d1d1;
+  font-size: 1.333em; // aligned with the Inventory card
+
+  .row:first-of-type {
+    margin-bottom: 0.5em;
+    margin-top: 1em;
+  }
+
+  .row {
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+  }
+}
+
 .kubevirt-utilization__item-actual {
   text-align: right;
 }

diff --git a/src/components/Dashboard/Utilization/UtilizationItem.js b/src/components/Dashboard/Utilization/UtilizationItem.js
@@ -6,7 +6,7 @@ import { Col, Row, SparklineChart } from 'patternfly-react';
 import { InlineLoading } from '../../Loading';
 import { NOT_AVAILABLE } from './strings';
 
-export const UtilizationItem = ({ id, title, data, maxY, unit, isLoading, LoadingComponent }) => {
+export const UtilizationItem = ({ id, title, data, maxY, unit, isLoading, LoadingComponent, isNarrow }) => {
   const axis = {
     y: {
       show: true,
@@ -27,14 +27,35 @@ export const UtilizationItem = ({ id, title, data, maxY, unit, isLoading, Loadin
   }
 
   let actual;
-  let chartData;
-  if (!isLoading && data) {
-    actual = Math.round(data[data.length - 1]);
-    chartData = {
+  let chart = NOT_AVAILABLE;
+  if (isLoading) {
+    chart = <LoadingComponent />;
+  } else if (data) {
+    const chartData = {
       columns: [[unit, ...data.map(val => val.toFixed(1))]],
       unload: true,
       type: 'area',
     };
+    actual = `${Math.round(data[data.length - 1])} ${unit}`;
+    chart = <SparklineChart id={id} data={chartData} axis={axis} unloadBeforeLoad />;
+  }
+
+  if (isNarrow) {
+    return (
+      <div className="kubevirt-utilization__item-narrow">
+        <Row>
+          <Col lg={6} md={6} sm={6} xs={6}>
+            {title}
+          </Col>
+          <Col className="kubevirt-utilization__item-actual" lg={6} md={6} sm={6} xs={6}>
+            {actual}
+          </Col>
+        </Row>
+        <Row>
+          <Col>{chart}</Col>
+        </Row>
+      </div>
+    );
   }
 
   return (
@@ -44,12 +65,10 @@ export const UtilizationItem = ({ id, title, data, maxY, unit, isLoading, Loadin
           {title}
         </Col>
         <Col className="kubevirt-utilization__item-actual" lg={3} md={3} sm={3} xs={3}>
-          {isLoading || !data || `${actual} ${unit}`}
+          {actual}
         </Col>
         <Col className="kubevirt-utilization__item-chart" lg={7} md={7} sm={7} xs={7}>
-          {isLoading && <LoadingComponent />}
-          {!isLoading && data && <SparklineChart id={id} data={chartData} axis={axis} unloadBeforeLoad />}
-          {!isLoading && !data && NOT_AVAILABLE}
+          {chart}
         </Col>
       </Row>
     </div>
@@ -61,6 +80,7 @@ UtilizationItem.defaultProps = {
   data: null,
   LoadingComponent: InlineLoading,
   isLoading: false,
+  isNarrow: false,
 };
 
 UtilizationItem.propTypes = {
@@ -71,4 +91,5 @@ UtilizationItem.propTypes = {
   maxY: PropTypes.number,
   LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   isLoading: PropTypes.bool,
+  isNarrow: PropTypes.bool,
 };
diff --git a/src/components/Dashboard/Utilization/fixtures/UtilizationItem.fixture.js b/src/components/Dashboard/Utilization/fixtures/UtilizationItem.fixture.js
@@ -20,4 +20,15 @@ export default [
       unit: '%',
     },
   },
+  {
+    component: UtilizationItem,
+    props: {
+      id: 'item-id',
+      title: 'title',
+      data: [10, 0, 15, 100, 5],
+      maxY: 100,
+      unit: '%',
+      isNarrow: true,
+    },
+  },
 ];
diff --git a/src/components/Dashboard/Utilization/tests/__snapshots__/UtilizationBody.test.js.snap b/src/components/Dashboard/Utilization/tests/__snapshots__/UtilizationBody.test.js.snap
@@ -17,6 +17,7 @@ exports[`<UtilizationBody /> renders correctly 1`] = `
     }
     id="item-id"
     isLoading={false}
+    isNarrow={false}
     maxY={null}
     title="title"
     unit="%"

diff --git a/src/components/Dashboard/Utilization/tests/__snapshots__/UtilizationItem.test.js.snap b/src/components/Dashboard/Utilization/tests/__snapshots__/UtilizationItem.test.js.snap
@@ -246,3 +246,127 @@ exports[`<UtilizationItem /> renders correctly 2`] = `
   </Row>
 </div>
 `;
+
+exports[`<UtilizationItem /> renders correctly 3`] = `
+<div
+  className="kubevirt-utilization__item-narrow"
+>
+  <Row
+    bsClass="row"
+    componentClass="div"
+  >
+    <Col
+      bsClass="col"
+      componentClass="div"
+      lg={6}
+      md={6}
+      sm={6}
+      xs={6}
+    >
+      title
+    </Col>
+    <Col
+      bsClass="col"
+      className="kubevirt-utilization__item-actual"
+      componentClass="div"
+      lg={6}
+      md={6}
+      sm={6}
+      xs={6}
+    >
+      5 %
+    </Col>
+  </Row>
+  <Row
+    bsClass="row"
+    componentClass="div"
+  >
+    <Col
+      bsClass="col"
+      componentClass="div"
+    >
+      <SparklineChart
+        area={
+          Object {
+            "zerobased": true,
+          }
+        }
+        axis={
+          Object {
+            "x": Object {
+              "show": false,
+            },
+            "y": Object {
+              "max": 100,
+              "padding": Object {
+                "bottom": 0,
+                "top": 0,
+              },
+              "show": true,
+              "tick": Object {
+                "count": 3,
+              },
+            },
+          }
+        }
+        className="chart-pf-sparkline"
+        color={
+          Object {
+            "pattern": Array [
+              "#0088ce",
+              "#39a5dc",
+              "#3f9c35",
+              "#ec7a08",
+              "#cc0000",
+            ],
+          }
+        }
+        data={
+          Object {
+            "columns": Array [
+              Array [
+                "%",
+                "10.0",
+                "0.0",
+                "15.0",
+                "100.0",
+                "5.0",
+              ],
+            ],
+            "type": "area",
+            "unload": true,
+          }
+        }
+        id="item-id"
+        legend={
+          Object {
+            "show": false,
+          }
+        }
+        point={
+          Object {
+            "focus": Object {
+              "expand": Object {
+                "r": 4,
+              },
+            },
+            "r": 1,
+          }
+        }
+        size={
+          Object {
+            "height": 60,
+          }
+        }
+        tooltip={
+          Object {
+            "contents": [Function],
+          }
+        }
+        type="area"
+        unloadBeforeLoad={true}
+      />
+    </Col>
+  </Row>
+</div>
+`;