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

Commit d016e5b

Browse files
mareklibramareklibra
committed
Utilization: Add Disk IO RW chart
1 parent 55596c4 commit d016e5b

File tree

5 files changed

+302
-6
lines changed

5 files changed

+302
-6
lines changed

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

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { InlineLoading } from '../../Loading';
1212
import { UtilizationBody } from '../../Dashboard/Utilization/UtilizationBody';
1313
import { UtilizationItem } from '../../Dashboard/Utilization/UtilizationItem';
1414
import { getCapacityStats, getUtilizationVectorStats } from '../../../selectors';
15-
import { formatBytes } from '../../../utils';
15+
import { formatBytes, formatNetTraffic } from '../../../utils';
1616

1717
const getMemoryData = (memoryUtilization, memoryTotal) => {
1818
let memoryStats;
@@ -35,17 +35,40 @@ const getMemoryData = (memoryUtilization, memoryTotal) => {
3535
};
3636
};
3737

38+
const getThroughputData = iorw => {
39+
let iorwStats;
40+
let maxValueConverted;
41+
42+
const iorwRaw = getUtilizationVectorStats(iorw);
43+
if (iorwRaw) {
44+
const maxValue = Math.max(...iorwRaw);
45+
maxValueConverted = formatNetTraffic(maxValue, undefined, 1);
46+
iorwStats = iorwRaw.map(rws => formatNetTraffic(rws, maxValueConverted.unit, 1).value);
47+
} else {
48+
maxValueConverted = formatNetTraffic(0); // 0 Bps
49+
iorwStats = null;
50+
}
51+
52+
return {
53+
unit: maxValueConverted.unit,
54+
values: iorwStats,
55+
maxValue: maxValueConverted.value,
56+
};
57+
};
58+
3859
export const Utilization = ({
3960
cpuUtilization,
4061
memoryUtilization,
4162
memoryTotal,
4263
storageTotal,
4364
storageUsed,
65+
storageIORW,
4466
LoadingComponent,
4567
}) => {
4668
const cpuStats = getUtilizationVectorStats(cpuUtilization);
4769
const memoryData = getMemoryData(memoryUtilization, memoryTotal);
4870
const storageUsageData = getMemoryData(storageUsed, storageTotal);
71+
const diskIORWData = getThroughputData(storageIORW);
4972

5073
return (
5174
<DashboardCard>
@@ -72,6 +95,15 @@ export const Utilization = ({
7295
LoadingComponent={LoadingComponent}
7396
isLoading={!(memoryUtilization && memoryTotal)}
7497
/>
98+
<UtilizationItem
99+
unit={diskIORWData.unit}
100+
id="diskIORW"
101+
title="Disk IO R/W"
102+
data={diskIORWData.values}
103+
maxY={diskIORWData.maxValue}
104+
LoadingComponent={LoadingComponent}
105+
isLoading={!storageIORW}
106+
/>
75107
<UtilizationItem
76108
unit={storageUsageData.unit}
77109
id="diskUsage"
@@ -93,6 +125,7 @@ Utilization.defaultProps = {
93125
memoryTotal: null,
94126
storageTotal: null,
95127
storageUsed: null,
128+
storageIORW: null,
96129
LoadingComponent: InlineLoading,
97130
};
98131

@@ -102,6 +135,7 @@ Utilization.propTypes = {
102135
memoryTotal: PropTypes.object,
103136
storageTotal: PropTypes.object,
104137
storageUsed: PropTypes.object,
138+
storageIORW: PropTypes.object,
105139
LoadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
106140
};
107141

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,21 @@ export const utilizationStats = {
6161
],
6262
},
6363
},
64+
storageIORW: {
65+
data: {
66+
result: [
67+
{
68+
values: [
69+
[time0, 0],
70+
[time0 + 10, 200],
71+
[time0 + 20, 500],
72+
[time0 + 30, 300],
73+
[time0 + 40, 1000],
74+
],
75+
},
76+
],
77+
},
78+
},
6479
};
6580

6681
export default {

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

Lines changed: 249 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -464,12 +464,12 @@ exports[`<Utilization /> renders correctly 1`] = `
464464
<div
465465
class="kubevirt-utilization__item-narrow-title col-lg-6 col-md-6 col-sm-6 col-xs-6"
466466
>
467-
Disk Usage
467+
Disk IO R/W
468468
</div>
469469
<div
470470
class="kubevirt-utilization__item-actual item-actual--narrow col-lg-6 col-md-6 col-sm-6 col-xs-6"
471471
>
472-
5 Ki
472+
1 KBps
473473
</div>
474474
</div>
475475
<div
@@ -509,6 +509,224 @@ exports[`<Utilization /> renders correctly 1`] = `
509509
/>
510510
</clipPath>
511511
</defs>
512+
<g>
513+
<path
514+
d="M40,55L105,47.92233009708738L170,37.30582524271845L235,44.38349514563107L300,19.611650485436897L300,55L235,55L170,55L105,55L40,55Z"
515+
role="presentation"
516+
shape-rendering="auto"
517+
style="fill:#bee1f4;fill-opacity:0.4;stroke:none;stroke-width:2"
518+
/>
519+
<path
520+
d="M40,55L105,47.92233009708738L170,37.30582524271845L235,44.38349514563107L300,19.611650485436897"
521+
role="presentation"
522+
shape-rendering="auto"
523+
style="fill:none;fill-opacity:0.4;stroke:#39a5dc;stroke-width:2"
524+
/>
525+
</g>
526+
</g>
527+
<g
528+
role="presentation"
529+
>
530+
<line
531+
role="presentation"
532+
shape-rendering="auto"
533+
style="stroke:#72767b;fill:transparent;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
534+
vector-effect="non-scaling-stroke"
535+
x1="40"
536+
x2="40"
537+
y1="10"
538+
y2="55"
539+
/>
540+
<g
541+
role="presentation"
542+
>
543+
<line
544+
role="presentation"
545+
shape-rendering="auto"
546+
style="stroke:none;fill:none;pointer-events:painted"
547+
vector-effect="non-scaling-stroke"
548+
x1="40"
549+
x2="300"
550+
y1="55"
551+
y2="55"
552+
/>
553+
<line
554+
role="presentation"
555+
shape-rendering="auto"
556+
style="stroke:transparent;fill:transparent;size:1px"
557+
vector-effect="non-scaling-stroke"
558+
x1="40"
559+
x2="39"
560+
y1="55"
561+
y2="55"
562+
/>
563+
<text
564+
direction="inherit"
565+
dx="0"
566+
dy="3.55"
567+
x="29"
568+
y="55"
569+
>
570+
<tspan
571+
dx="0"
572+
style="font-size:10px;font-family:'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif;letter-spacing:normal;padding:10px;fill:#282d33;stroke:transparent"
573+
text-anchor="end"
574+
x="29"
575+
>
576+
0
577+
</tspan>
578+
</text>
579+
</g>
580+
<g
581+
role="presentation"
582+
>
583+
<line
584+
role="presentation"
585+
shape-rendering="auto"
586+
style="stroke:none;fill:none;pointer-events:painted"
587+
vector-effect="non-scaling-stroke"
588+
x1="40"
589+
x2="300"
590+
y1="37.30582524271845"
591+
y2="37.30582524271845"
592+
/>
593+
<line
594+
role="presentation"
595+
shape-rendering="auto"
596+
style="stroke:transparent;fill:transparent;size:1px"
597+
vector-effect="non-scaling-stroke"
598+
x1="40"
599+
x2="39"
600+
y1="37.30582524271845"
601+
y2="37.30582524271845"
602+
/>
603+
<text
604+
direction="inherit"
605+
dx="0"
606+
dy="3.55"
607+
x="29"
608+
y="37.30582524271845"
609+
>
610+
<tspan
611+
dx="0"
612+
style="font-size:10px;font-family:'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif;letter-spacing:normal;padding:10px;fill:#282d33;stroke:transparent"
613+
text-anchor="end"
614+
x="29"
615+
>
616+
0.5
617+
</tspan>
618+
</text>
619+
</g>
620+
<g
621+
role="presentation"
622+
>
623+
<line
624+
role="presentation"
625+
shape-rendering="auto"
626+
style="stroke:none;fill:none;pointer-events:painted"
627+
vector-effect="non-scaling-stroke"
628+
x1="40"
629+
x2="300"
630+
y1="19.611650485436897"
631+
y2="19.611650485436897"
632+
/>
633+
<line
634+
role="presentation"
635+
shape-rendering="auto"
636+
style="stroke:transparent;fill:transparent;size:1px"
637+
vector-effect="non-scaling-stroke"
638+
x1="40"
639+
x2="39"
640+
y1="19.611650485436897"
641+
y2="19.611650485436897"
642+
/>
643+
<text
644+
direction="inherit"
645+
dx="0"
646+
dy="3.55"
647+
x="29"
648+
y="19.611650485436897"
649+
>
650+
<tspan
651+
dx="0"
652+
style="font-size:10px;font-family:'Gill Sans', 'Gill Sans MT', 'Ser­avek', 'Trebuchet MS', sans-serif;letter-spacing:normal;padding:10px;fill:#282d33;stroke:transparent"
653+
text-anchor="end"
654+
x="29"
655+
>
656+
1
657+
</tspan>
658+
</text>
659+
</g>
660+
</g>
661+
</svg>
662+
<div
663+
style="z-index:99;position:absolute;top:0;left:0;width:100%;height:100%"
664+
>
665+
<svg
666+
height="60"
667+
style="overflow:visible;width:100%;height:100%"
668+
viewBox="0 0 300 60"
669+
width="300"
670+
/>
671+
</div>
672+
</div>
673+
</div>
674+
</div>
675+
</div>
676+
<div
677+
class="kubevirt-utilization__item-narrow"
678+
>
679+
<div
680+
class="row"
681+
>
682+
<div
683+
class="kubevirt-utilization__item-narrow-title col-lg-6 col-md-6 col-sm-6 col-xs-6"
684+
>
685+
Disk Usage
686+
</div>
687+
<div
688+
class="kubevirt-utilization__item-actual item-actual--narrow col-lg-6 col-md-6 col-sm-6 col-xs-6"
689+
>
690+
5 Ki
691+
</div>
692+
</div>
693+
<div
694+
class="row"
695+
>
696+
<div
697+
class="kubevirt-utilization__item-chart kubevirt-utilization__item-chart--narrow"
698+
>
699+
<div
700+
class="VictoryContainer"
701+
style="height:100%;width:100%;user-select:none;pointer-events:none;touch-action:none;position:relative"
702+
>
703+
<svg
704+
aria-labelledby="victory-container-7-title victory-container-7-desc"
705+
height="60"
706+
role="img"
707+
style="pointer-events:all;width:100%;height:100%"
708+
viewBox="0 0 300 60"
709+
width="300"
710+
>
711+
<g
712+
clip-path="url(#victory-clip-8)"
713+
style="height:100%;width:100%;user-select:none"
714+
>
715+
<defs>
716+
<clipPath
717+
id="victory-clip-8"
718+
>
719+
<rect
720+
height="45"
721+
role="presentation"
722+
shape-rendering="auto"
723+
vector-effect="non-scaling-stroke"
724+
width="260"
725+
x="40"
726+
y="10"
727+
/>
728+
</clipPath>
729+
</defs>
512730
<g>
513731
<path
514732
d="M40,51.46116504854369L105,44.383495145631066L170,40.84466019417476L235,26.689320388349515L300,37.30582524271845L300,55L235,55L170,55L105,55L40,55Z"
@@ -755,6 +973,35 @@ exports[`<Utilization /> renders correctly in Loading state 1`] = `
755973
</div>
756974
</div>
757975
</div>
976+
<div
977+
class="kubevirt-utilization__item-narrow"
978+
>
979+
<div
980+
class="row"
981+
>
982+
<div
983+
class="kubevirt-utilization__item-narrow-title col-lg-6 col-md-6 col-sm-6 col-xs-6"
984+
>
985+
Disk IO R/W
986+
</div>
987+
<div
988+
class="kubevirt-utilization__item-actual item-actual--narrow col-lg-6 col-md-6 col-sm-6 col-xs-6"
989+
/>
990+
</div>
991+
<div
992+
class="row"
993+
>
994+
<div
995+
class="kubevirt-utilization__item-chart kubevirt-utilization__item-chart--narrow"
996+
>
997+
<div>
998+
<div
999+
class="spinner spinner-md blank-slate-pf-icon"
1000+
/>
1001+
</div>
1002+
</div>
1003+
</div>
1004+
</div>
7581005
<div
7591006
class="kubevirt-utilization__item-narrow"
7601007
>

0 commit comments

Comments
 (0)