Skip to content
This repository has been archived by the owner on Apr 28, 2020. It is now read-only.

Commit

Permalink
Dashboard, Utilization: Render in narrow container
Browse files Browse the repository at this point in the history 
The Utilization component renders different sub-component structure
for a narrow container.
  • Loading branch information
@mareklibra
mareklibra committed Apr 5, 2019
1 parent 5fd1d0d commit 544ce69
Show file tree
Hide file tree
Showing 7 changed files with 218 additions and 391 deletions.
14 changes: 14 additions & 0 deletions sass/components/Dashboard/utilization.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,20 @@
}
}

.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;
}
Expand Down
100 changes: 16 additions & 84 deletions src/components/ClusterOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,54 +20,20 @@ exports[`<Utilization /> renders correctly 1`] = `
class="kubevirt-utilization__items"
>
<div
class="kubevirt-utilization__item"
style="position:relative;height:100%"
>
<div
class="row"
>
<div
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
>
CPU
</div>
<div
class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
>
50 %
</div>
<div
class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
>
<div
class=" chart-pf-sparkline"
/>
</div>
</div>
class=""
style="height:100%"
/>
</div>
<div
class="kubevirt-utilization__item"
style="position:relative;height:100%"
>
<div
class="row"
>
<div
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
>
Memory
</div>
<div
class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
>
30 KB
</div>
<div
class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
>
<div
class=" chart-pf-sparkline"
/>
</div>
</div>
class=""
style="height:100%"
/>
</div>
</div>
</div>
Expand All @@ -94,54 +60,20 @@ exports[`<Utilization /> renders correctly in Loading state 1`] = `
class="kubevirt-utilization__items"
>
<div
class="kubevirt-utilization__item"
style="position:relative;height:100%"
>
<div
class="row"
>
<div
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
>
CPU
</div>
<div
class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
/>
<div
class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
>
<div>
<div
class="spinner spinner-md blank-slate-pf-icon"
/>
</div>
</div>
</div>
class=""
style="height:100%"
/>
</div>
<div
class="kubevirt-utilization__item"
style="position:relative;height:100%"
>
<div
class="row"
>
<div
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
>
Memory
</div>
<div
class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
/>
<div
class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
>
<div>
<div
class="spinner spinner-md blank-slate-pf-icon"
/>
</div>
</div>
</div>
class=""
style="height:100%"
/>
</div>
</div>
</div>
Expand Down
130 changes: 85 additions & 45 deletions src/components/Dashboard/Utilization/UtilizationItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,107 @@
import React from 'react';
import PropTypes from 'prop-types';
import bounds from 'react-bounds';

import { Col, Row, SparklineChart } from 'patternfly-react';

import { MEDIA_QUERY_SM, MEDIA_QUERY_EXCLUSIVE_DEVIATION } 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,
class _UtilizationItem extends React.PureComponent {
static bounds() {
return {
standard: {
minWidth: MEDIA_QUERY_SM,
},
tick: {
count: 3,
narrow: {
maxWidth: MEDIA_QUERY_SM - MEDIA_QUERY_EXCLUSIVE_DEVIATION,
},
},
x: {
show: false,
},
};
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',
render() {
const { isBound, id, title, data, maxY, unit, isLoading, LoadingComponent } = this.props;

const axis = {
y: {
show: true,
padding: {
top: 0,
bottom: 0,
},
tick: {
count: 3,
},
},
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 />;
}

if (isBound('narrow')) {
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>
);
}

UtilizationItem.defaultProps = {
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}>
{actual}
</Col>
<Col className="kubevirt-utilization__item-chart" lg={7} md={7} sm={7} xs={7}>
{chart}
</Col>
</Row>
</div>
);
}
}

_UtilizationItem.defaultProps = {
maxY: null,
data: null,
LoadingComponent: InlineLoading,
isLoading: false,
};

UtilizationItem.propTypes = {
_UtilizationItem.propTypes = {
isBound: PropTypes.func.isRequired, // injected by react-bounds
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
data: PropTypes.array,
Expand All @@ -72,3 +110,5 @@ UtilizationItem.propTypes = {
LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
isLoading: PropTypes.bool,
};

export const UtilizationItem = bounds.wrap(_UtilizationItem);
4 changes: 2 additions & 2 deletions src/components/Dashboard/Utilization/tests/UtilizationBody.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { mount } from 'enzyme';

import { UtilizationBody } from '../UtilizationBody';
import { default as UtilizationItemFixture } from '../fixtures/UtilizationItem.fixture';
Expand All @@ -13,7 +13,7 @@ const testUtilizationBody = () => (

describe('<UtilizationBody />', () => {
it('renders correctly', () => {
const component = shallow(testUtilizationBody());
const component = mount(testUtilizationBody());
expect(component).toMatchSnapshot();
});
});
4 changes: 2 additions & 2 deletions src/components/Dashboard/Utilization/tests/UtilizationItem.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { mount } from 'enzyme';

import { UtilizationItem } from '../UtilizationItem';
import { default as UtilizationItemFixtures } from '../fixtures/UtilizationItem.fixture';
Expand All @@ -10,7 +10,7 @@ const testItem = ({ props }) => <UtilizationItem {...props} />;
describe('<UtilizationItem />', () => {
it('renders correctly', () => {
UtilizationItemFixtures.forEach(fixture => {
const component = shallow(testItem(fixture));
const component = mount(testItem(fixture));
expect(component).toMatchSnapshot();
});
});
Expand Down
Loading

0 comments on commit 544ce69

Please sign in to comment.