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

Commit 125f995

Browse files
mareklibramareklibra
committed
ClusterOverview: refactor Utilization card and connect
Utilization card is refactored to split concern between ClusterOverview and Dashboard components. Connected to real data. So far CPU only, others will follow.
1 parent e98b86f commit 125f995

File tree

20 files changed

+553
-162
lines changed

20 files changed

+553
-162
lines changed

‎sass/_components.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
@import './components/Dashboard/inventory';
2424
@import './components/Dashboard/detail';
2525
@import './components/Dashboard/capacity';
26+
@import './components/Dashboard/utilization';
2627
@import './components/ClusterOverview/cluster-overview';
2728
@import './components/ClusterOverview/events';
2829
@import './components/ClusterOverview/consumers';
2930
@import './components/ClusterOverview/health';
3031
@import './components/ClusterOverview/compliance';
31-
@import './components/ClusterOverview/utilization';
3232
@import './components/CreateBaremetalHostDialog/create-baremetal-host-dialog';
3333

3434
/*

‎sass/components/ClusterOverview/utilization.scss

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎sass/components/Dashboard/utilization.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.kubevirt-utilization__item {
2+
border-bottom: 1px solid #d1d1d1;
3+
font-size: 1.333em; // aligned with the Inventory card
4+
5+
.row {
6+
display: flex;
7+
align-items: center;
8+
}
9+
}
10+
11+
.kubevirt-utilization__item-actual {
12+
text-align: right;
13+
}
14+
15+
.kubevirt-utilization__item-chart {
16+
border-left-width: 1px;
17+
border-left-style: solid;
18+
border-left-color: rgb(209, 209, 209);
19+
}

‎src/components/ClusterOverview/ClusterOverview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import ComplianceConnected from './Compliance/Compliance';
1212
import EventsConnected from './Events/Events';
1313
import { InventoryConnected } from './Inventory/Inventory';
1414
import { CapacityConnected } from './Capacity/Capacity';
15-
import UtilizationConnected from './Utilization/Utilization';
15+
import { UtilizationConnected } from './Utilization/Utilization';
1616
import TopConsumersConnected from './TopConsumers/TopConsumers';
1717

1818
const MainCards = () => (

‎src/components/ClusterOverview/Utilization/Utilization.js

Lines changed: 34 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { SparklineChart, Row, Col } from 'patternfly-react';
32
import PropTypes from 'prop-types';
43

54
import {
@@ -8,74 +7,46 @@ import {
87
DashboardCardHeader,
98
DashboardCardTitle,
109
} from '../../Dashboard/DashboardCard';
11-
import { ClusterOverviewContextGenericConsumer } from '../ClusterOverviewContext';
12-
13-
const UtilizationItem = ({ id, title, data, unit }) => (
14-
<div className="kubevirt-utilization__item">
15-
<Row>
16-
<Col lg={2} md={2} sm={2} xs={2}>
17-
<h2>{title}</h2>
18-
</Col>
19-
<Col lg={3} md={3} sm={3} xs={3}>
20-
<h2>{`${data[data.length - 1]} ${unit}`}</h2>
21-
</Col>
22-
<Col lg={7} md={7} sm={7} xs={7}>
23-
<SparklineChart
24-
id={id}
25-
data={{
26-
columns: [[unit, ...data]],
27-
unload: true,
28-
type: 'area',
29-
}}
30-
unloadBeforeLoad
31-
/>
32-
</Col>
33-
</Row>
34-
</div>
35-
);
36-
37-
UtilizationItem.propTypes = {
38-
id: PropTypes.string.isRequired,
39-
title: PropTypes.string.isRequired,
40-
data: PropTypes.array.isRequired,
41-
unit: PropTypes.string.isRequired,
10+
import { ClusterOverviewContext } from '../ClusterOverviewContext';
11+
import { InlineLoading } from '../../Loading';
12+
import { UtilizationBody } from '../../Dashboard/Utilization/UtilizationBody';
13+
import { UtilizationItem } from '../../Dashboard/Utilization/UtilizationItem';
14+
import { getUtilizationCpuStats } from '../../../selectors';
15+
16+
export const Utilization = ({ cpuUtilization, LoadingComponent }) => {
17+
const cpuStats = getUtilizationCpuStats(cpuUtilization);
18+
return (
19+
<DashboardCard>
20+
<DashboardCardHeader>
21+
<DashboardCardTitle>Cluster Utilization</DashboardCardTitle>
22+
</DashboardCardHeader>
23+
<DashboardCardBody>
24+
<UtilizationBody>
25+
<UtilizationItem
26+
unit="%"
27+
id="cpu"
28+
title="CPU"
29+
data={cpuStats}
30+
maxY={100}
31+
LoadingComponent={LoadingComponent}
32+
isLoading={!(cpuUtilization && cpuStats.length > 0)}
33+
/>
34+
</UtilizationBody>
35+
</DashboardCardBody>
36+
</DashboardCard>
37+
);
4238
};
4339

44-
class UtilizationBody extends React.PureComponent {
45-
render() {
46-
const { stats } = this.props;
47-
return Object.keys(stats).map(key => (
48-
<UtilizationItem id={key} key={key} title={stats[key].title} data={stats[key].data} unit={stats[key].unit} />
49-
));
50-
}
51-
}
52-
53-
UtilizationBody.propTypes = {
54-
stats: PropTypes.object.isRequired,
55-
};
56-
57-
export const Utilization = ({ stats, loaded }) => (
58-
<DashboardCard>
59-
<DashboardCardHeader>
60-
<DashboardCardTitle>Cluster utilization</DashboardCardTitle>
61-
</DashboardCardHeader>
62-
<DashboardCardBody isLoading={!loaded}>
63-
<UtilizationBody stats={stats} />
64-
</DashboardCardBody>
65-
</DashboardCard>
66-
);
67-
6840
Utilization.defaultProps = {
69-
loaded: false,
41+
cpuUtilization: null,
42+
LoadingComponent: InlineLoading,
7043
};
7144

7245
Utilization.propTypes = {
73-
stats: PropTypes.object.isRequired,
74-
loaded: PropTypes.bool,
46+
cpuUtilization: PropTypes.object,
47+
LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
7548
};
7649

77-
const UtilizationConnected = () => (
78-
<ClusterOverviewContextGenericConsumer Component={Utilization} dataPath="utilizationStats" />
50+
export const UtilizationConnected = () => (
51+
<ClusterOverviewContext.Consumer>{props => <Utilization {...props} />}</ClusterOverviewContext.Consumer>
7952
);
80-
81-
export default UtilizationConnected;

‎src/components/ClusterOverview/Utilization/fixtures/Utilization.fixture.js

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
import { Utilization } from '../Utilization';
22

3-
import { utilizationStats } from '../..';
3+
const time0 = 1000;
4+
5+
export const utilizationStats = {
6+
cpuUtilization: {
7+
data: {
8+
result: [
9+
{
10+
values: [[time0, 0], [time0 + 10, 10], [time0 + 20, 15], [time0 + 30, 100], [time0 + 40, 50]],
11+
},
12+
],
13+
},
14+
},
15+
};
416

517
export default {
618
component: Utilization,
7-
props: { ...utilizationStats },
19+
props: { utilizationStats },
820
};

‎src/components/ClusterOverview/Utilization/tests/Utilization.test.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { render } from 'enzyme';
44
import { Utilization } from '../Utilization';
55
import { default as UtilizationFixtures } from '../fixtures/Utilization.fixture';
66

7-
const testUtilizationOverview = () => <Utilization {...UtilizationFixtures.props} />;
8-
97
describe('<Utilization />', () => {
108
it('renders correctly', () => {
11-
const component = render(testUtilizationOverview());
9+
const component = render(<Utilization {...UtilizationFixtures.props} />);
10+
expect(component).toMatchSnapshot();
11+
});
12+
it('renders correctly in Loading state', () => {
13+
const component = render(<Utilization />);
1214
expect(component).toMatchSnapshot();
1315
});
1416
});

‎src/components/ClusterOverview/Utilization/tests/__snapshots__/Utilization.test.js.snap

Lines changed: 57 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -10,96 +10,87 @@ exports[`<Utilization /> renders correctly 1`] = `
1010
<h2
1111
class="card-pf-title"
1212
>
13-
Cluster utilization
13+
Cluster Utilization
1414
</h2>
1515
</div>
1616
<div
1717
class="card-pf-body"
1818
>
1919
<div
20-
class="kubevirt-utilization__item"
20+
class="kubevirt-utilization__items"
2121
>
2222
<div
23-
class="row"
23+
class="kubevirt-utilization__item"
2424
>
2525
<div
26-
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
26+
class="row"
2727
>
28-
<h2>
28+
<div
29+
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
30+
>
2931
CPU
30-
</h2>
31-
</div>
32-
<div
33-
class="col-lg-3 col-md-3 col-sm-3 col-xs-3"
34-
>
35-
<h2>
36-
10 %
37-
</h2>
38-
</div>
39-
<div
40-
class="col-lg-7 col-md-7 col-sm-7 col-xs-7"
41-
>
32+
</div>
4233
<div
43-
class=" chart-pf-sparkline"
44-
/>
45-
</div>
46-
</div>
47-
</div>
48-
<div
49-
class="kubevirt-utilization__item"
50-
>
51-
<div
52-
class="row"
53-
>
54-
<div
55-
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
56-
>
57-
<h2>
58-
I/O
59-
</h2>
60-
</div>
61-
<div
62-
class="col-lg-3 col-md-3 col-sm-3 col-xs-3"
63-
>
64-
<h2>
65-
20000 MBps
66-
</h2>
67-
</div>
68-
<div
69-
class="col-lg-7 col-md-7 col-sm-7 col-xs-7"
70-
>
34+
class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
35+
>
36+
NaN %
37+
</div>
7138
<div
72-
class=" chart-pf-sparkline"
73-
/>
39+
class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
40+
>
41+
<div
42+
class=" chart-pf-sparkline"
43+
/>
44+
</div>
7445
</div>
7546
</div>
7647
</div>
48+
</div>
49+
</div>
50+
`;
51+
52+
exports[`<Utilization /> renders correctly in Loading state 1`] = `
53+
<div
54+
class="card-pf kubevirt-dashboard__card"
55+
>
56+
<div
57+
class="card-pf-heading kubevirt-dashboard__card-heading"
58+
>
59+
<h2
60+
class="card-pf-title"
61+
>
62+
Cluster Utilization
63+
</h2>
64+
</div>
65+
<div
66+
class="card-pf-body"
67+
>
7768
<div
78-
class="kubevirt-utilization__item"
69+
class="kubevirt-utilization__items"
7970
>
8071
<div
81-
class="row"
72+
class="kubevirt-utilization__item"
8273
>
8374
<div
84-
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
85-
>
86-
<h2>
87-
Latency
88-
</h2>
89-
</div>
90-
<div
91-
class="col-lg-3 col-md-3 col-sm-3 col-xs-3"
92-
>
93-
<h2>
94-
3.5 ms
95-
</h2>
96-
</div>
97-
<div
98-
class="col-lg-7 col-md-7 col-sm-7 col-xs-7"
75+
class="row"
9976
>
10077
<div
101-
class=" chart-pf-sparkline"
102-
/>
78+
class="col-lg-2 col-md-2 col-sm-2 col-xs-2"
79+
>
80+
CPU
81+
</div>
82+
<div
83+
class="kubevirt-utilization__item-actual col-lg-3 col-md-3 col-sm-3 col-xs-3"
84+
>
85+
NaN %
86+
</div>
87+
<div
88+
class="kubevirt-utilization__item-chart col-lg-7 col-md-7 col-sm-7 col-xs-7"
89+
>
90+
<div
91+
class=" chart-pf-sparkline"
92+
/>
93+
</div>
10394
</div>
10495
</div>
10596
</div>

‎src/components/ClusterOverview/fixtures/ClusterOverview.fixture.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { healthData } from '../Health/fixtures/Health.fixture';
55
import { eventsData } from '../Events/fixtures/Events.fixture';
66
import { consumersData } from '../TopConsumers/fixtures/TopConsumers.fixture';
77
import { capacityStats } from '../Capacity/fixtures/Capacity.fixture';
8+
import { utilizationStats } from '../Utilization/fixtures/Utilization.fixture';
89
import { clusterDetailsData } from '../Details/fixtures/Details.fixture';
910

10-
import { complianceData, utilizationStats } from '..';
11+
import { complianceData } from '..';
1112

1213
import { ClusterOverviewContext } from '../ClusterOverviewContext';
1314

‎src/components/ClusterOverview/index.js

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,3 @@ export const complianceData = {
1010
},
1111
loaded: true,
1212
};
13-
14-
export const utilizationStats = {
15-
stats: {
16-
cpuStats: {
17-
title: 'CPU',
18-
unit: '%',
19-
data: [20, 50, 15, 70, 10],
20-
},
21-
ioStats: {
22-
title: 'I/O',
23-
unit: 'MBps',
24-
data: [12000, 10000, 5000, 20000],
25-
},
26-
latencyStats: {
27-
title: 'Latency',
28-
unit: 'ms',
29-
data: [2.5, 1, 20, 3.5],
30-
},
31-
},
32-
loaded: true,
33-
};

0 commit comments

Comments
 (0)