Dashboard, Utilization: Render in narrow container (#314)

* Add react-measure@2.x dependency
kubevirt · Apr 8, 2019 · 2d2dc0d · 2d2dc0d
1 parent 1084c0a
commit 2d2dc0d
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 1,810 deletions.
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "lodash": "4.x",
     "react-dnd": "2.6.x",
     "react-dnd-html5-backend": "5.0.x",
+    "react-measure": "2.x",
     "react-responsive": "6.1.x",
     "reactabular-dnd": "8.16.x"
   },

diff --git a/sass/components/Dashboard/utilization.scss b/sass/components/Dashboard/utilization.scss
@@ -8,10 +8,28 @@
   }
 }
 
+.kubevirt-utilization__item-narrow {
+  border-bottom: 1px solid #d1d1d1;
+  font-size: 1.333em; // aligned with the Inventory card
+
+  .row {
+    margin-right: 0.25em;
+  }
+
+  .row:first-of-type {
+    margin-bottom: 0.5em;
+    margin-top: 1em;
+  }
+}
+
 .kubevirt-utilization__item-actual {
   text-align: right;
 }
 
+.kubevirt-utilization__item-narrow-chart {
+  text-align: center;
+}
+
 .kubevirt-utilization__item-chart {
   border-left-width: 1px;
   border-left-style: solid;

diff --git a/src/components/ClusterOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap b/src/components/ClusterOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap
@@ -20,23 +20,27 @@ exports[`<Utilization /> renders correctly 1`] = `
       class="kubevirt-utilization__items"
     >
       <div
-        class="kubevirt-utilization__item"
+        class="kubevirt-utilization__item-narrow"
       >
         <div
           class="row"
         >
           <div
-            class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
+            class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
           >
             CPU
           </div>
           <div
-            class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
+            class="kubevirt-utilization__item-actual col-lg-6 col-md-6 col-sm-6 col-xs-6"
           >
             50 %
           </div>
+        </div>
+        <div
+          class="row"
+        >
           <div
-            class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
+            class="kubevirt-utilization__item-narrow-chart"
           >
             <div
               class=" chart-pf-sparkline"
@@ -45,23 +49,27 @@ exports[`<Utilization /> renders correctly 1`] = `
         </div>
       </div>
       <div
-        class="kubevirt-utilization__item"
+        class="kubevirt-utilization__item-narrow"
       >
         <div
           class="row"
         >
           <div
-            class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
+            class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
           >
             Memory
           </div>
           <div
-            class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
+            class="kubevirt-utilization__item-actual col-lg-6 col-md-6 col-sm-6 col-xs-6"
           >
             30 KB
           </div>
+        </div>
+        <div
+          class="row"
+        >
           <div
-            class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
+            class="kubevirt-utilization__item-narrow-chart"
           >
             <div
               class=" chart-pf-sparkline"
@@ -94,21 +102,25 @@ exports[`<Utilization /> renders correctly in Loading state 1`] = `
       class="kubevirt-utilization__items"
     >
       <div
-        class="kubevirt-utilization__item"
+        class="kubevirt-utilization__item-narrow"
       >
         <div
           class="row"
         >
           <div
-            class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
+            class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
           >
             CPU
           </div>
           <div
-            class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
+            class="kubevirt-utilization__item-actual col-lg-6 col-md-6 col-sm-6 col-xs-6"
           />
+        </div>
+        <div
+          class="row"
+        >
           <div
-            class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
+            class="kubevirt-utilization__item-narrow-chart"
           >
             <div>
               <div
@@ -119,21 +131,25 @@ exports[`<Utilization /> renders correctly in Loading state 1`] = `
         </div>
       </div>
       <div
-        class="kubevirt-utilization__item"
+        class="kubevirt-utilization__item-narrow"
       >
         <div
           class="row"
         >
           <div
-            class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
+            class="col-lg-6 col-md-6 col-sm-6 col-xs-6"
           >
             Memory
           </div>
           <div
-            class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
+            class="kubevirt-utilization__item-actual col-lg-6 col-md-6 col-sm-6 col-xs-6"
           />
+        </div>
+        <div
+          class="row"
+        >
           <div
-            class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
+            class="kubevirt-utilization__item-narrow-chart"
           >
             <div>
               <div

diff --git a/src/components/Dashboard/Utilization/UtilizationItem.js b/src/components/Dashboard/Utilization/UtilizationItem.js
@@ -1,60 +1,110 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import Measure from 'react-measure';
 
 import { Col, Row, SparklineChart } from 'patternfly-react';
 
+import { MEDIA_QUERY_SM } from '../../../utils';
+
 import { InlineLoading } from '../../Loading';
 import { NOT_AVAILABLE } from './strings';
 
-export const UtilizationItem = ({ id, title, data, maxY, unit, isLoading, LoadingComponent }) => {
-  const axis = {
-    y: {
-      show: true,
-      padding: {
-        top: 0,
-        bottom: 0,
-      },
-      tick: {
-        count: 3,
-      },
-    },
-    x: {
-      show: false,
+export class UtilizationItem extends React.PureComponent {
+  state = {
+    dimensions: {
+      width: -1,
     },
   };
-  if (maxY) {
-    axis.y.max = maxY;
-  }
 
-  let actual;
-  let chartData;
-  if (!isLoading && data) {
-    actual = Math.round(data[data.length - 1]);
-    chartData = {
-      columns: [[unit, ...data.map(val => val.toFixed(1))]],
-      unload: true,
-      type: 'area',
+  onResize = contentRect => {
+    this.setState({ dimensions: contentRect.bounds });
+  };
+
+  render() {
+    const { id, title, data, maxY, unit, isLoading, LoadingComponent } = this.props;
+    const { width } = this.state.dimensions;
+
+    const axis = {
+      y: {
+        show: true,
+        padding: {
+          top: 0,
+          bottom: 0,
+        },
+        tick: {
+          count: 3,
+          format: v => `${v} ${unit}`,
+        },
+      },
+      x: {
+        show: false,
+      },
     };
-  }
+    if (maxY) {
+      axis.y.max = maxY;
+    }
 
-  return (
-    <div className="kubevirt-utilization__item">
-      <Row>
-        <Col lg={2} md={2} sm={2} xs={2}>
-          {title}
-        </Col>
-        <Col className="kubevirt-utilization__item-actual" lg={3} md={3} sm={3} xs={3}>
-          {isLoading || !data || `${actual} ${unit}`}
-        </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}
-        </Col>
-      </Row>
-    </div>
-  );
-};
+    let actual;
+    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 />;
+    }
+
+    let topClass;
+    let rows;
+    if (width < MEDIA_QUERY_SM) {
+      topClass = 'kubevirt-utilization__item-narrow';
+      rows = (
+        <Fragment>
+          <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 className="kubevirt-utilization__item-narrow-chart">{chart}</Col>
+          </Row>
+        </Fragment>
+      );
+    } else {
+      topClass = 'kubevirt-utilization__item';
+      rows = (
+        <Row>
+          <Col lg={2} md={2} sm={2} xs={2}>
+            {title}
+          </Col>
+          <Col className="kubevirt-utilization__item-actual" lg={3} md={3} sm={3} xs={3}>
+            {actual}
+          </Col>
+          <Col className="kubevirt-utilization__item-chart" lg={7} md={7} sm={7} xs={7}>
+            {chart}
+          </Col>
+        </Row>
+      );
+    }
+
+    return (
+      <Measure bounds onResize={this.onResize}>
+        {({ measureRef }) => (
+          <div ref={measureRef} className={topClass}>
+            {rows}
+          </div>
+        )}
+      </Measure>
+    );
+  }
+}
 
 UtilizationItem.defaultProps = {
   maxY: null,

diff --git a/src/components/Dashboard/Utilization/tests/UtilizationBody.test.js b/src/components/Dashboard/Utilization/tests/UtilizationBody.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'enzyme';
 
 import { UtilizationBody } from '../UtilizationBody';
 import { default as UtilizationItemFixture } from '../fixtures/UtilizationItem.fixture';
@@ -13,7 +13,7 @@ const testUtilizationBody = () => (
 
 describe('<UtilizationBody />', () => {
   it('renders correctly', () => {
-    const component = shallow(testUtilizationBody());
+    const component = render(testUtilizationBody());
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/components/Dashboard/Utilization/tests/UtilizationItem.test.js b/src/components/Dashboard/Utilization/tests/UtilizationItem.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'enzyme';
 
 import { UtilizationItem } from '../UtilizationItem';
 import { default as UtilizationItemFixtures } from '../fixtures/UtilizationItem.fixture';
@@ -10,7 +10,7 @@ const testItem = ({ props }) => <UtilizationItem {...props} />;
 describe('<UtilizationItem />', () => {
   it('renders correctly', () => {
     UtilizationItemFixtures.forEach(fixture => {
-      const component = shallow(testItem(fixture));
+      const component = render(testItem(fixture));
       expect(component).toMatchSnapshot();
     });
   });