11/* eslint-disable no-tabs */
22/* eslint-disable react/prop-types */
3- import React from 'react' ;
4- import { convertToMetricsArr } from '../helper/parseContainerFormat' ;
5- import { Chart } from 'react-chartjs-2' ;
6- import LineChartDisplay from '../display/LineChartDisplay' ;
7- import { useSelector } from 'react-redux' ;
3+ import React from 'react'
4+ import { convertToMetricsArr } from '../helper/parseContainerFormat'
5+ import { Chart } from 'react-chartjs-2'
6+ import LineChartDisplay from '../display/LineChartDisplay'
7+ import { useSelector } from 'react-redux'
88
99/**
1010 * Display general metrics
1111 *
1212 * @param {* } props
1313 */
1414const Metrics = ( props ) => {
15- const hostStats = useSelector ( ( state ) => state . containersList . hostStats ) ;
16- const fullRunningList = props . runningList ;
15+ const hostStats = useSelector ( ( state ) => state . containersList . hostStats )
16+ const fullRunningList = props . runningList
1717 // const result = convertToMetricsArr(props.runningList)
18- const result = hostStats ;
19- const cpuData = 100 - result . cpuPerc ; // .toFixed(2) // 60%
20- const memoryData = 100 - result . memPerc ; // .toFixed(2)
21- const cpuThreshold = props . threshold [ 0 ] ;
22- const memThreshold = props . threshold [ 1 ] ;
18+ const result = hostStats
19+ const cpuData = 100 - result . cpuPerc // .toFixed(2) // 60%
20+ const memoryData = 100 - result . memPerc // .toFixed(2)
21+ const cpuThreshold = props . threshold [ 0 ]
22+ const memThreshold = props . threshold [ 1 ]
2323
24- let cpuFails = 0 ;
25- let memFails = 0 ;
24+ let cpuFails = 0
25+ let memFails = 0
2626
2727 // used to monitor threshold and fail counts
2828 for ( const each of fullRunningList ) {
29- const cpu = parseFloat ( each [ 'CPUPerc' ] . replace ( / ( [ % ] ) + / g, '' ) ) ;
30- const memory = parseFloat ( each [ 'MemPerc' ] . replace ( / ( [ % ] ) + / g, '' ) ) ;
31- if ( cpu >= cpuThreshold ) cpuFails ++ ;
32- if ( memory >= memThreshold ) memFails ++ ;
29+ const cpu = parseFloat ( each [ 'CPUPerc' ] . replace ( / ( [ % ] ) + / g, '' ) )
30+ const memory = parseFloat ( each [ 'MemPerc' ] . replace ( / ( [ % ] ) + / g, '' ) )
31+ if ( cpu >= cpuThreshold ) cpuFails ++
32+ if ( memory >= memThreshold ) memFails ++
3333 }
3434
3535 const cpu = {
3636 labels : [ `Available: ${ cpuData } , `Usage: ${ result . cpuPerc } ] ,
3737 datasets : [
3838 {
3939 label : 'CPU' ,
40- backgroundColor : [ 'rgba(44, 130, 201, 1) ' , 'rgba(19, 221, 29, 1) ' ] ,
40+ backgroundColor : [ '#4594ce ' , '#67f267 ' ] ,
4141 data : [ cpuData , result . cpuPerc ] ,
4242 } ,
4343 ] ,
44- } ;
44+ }
4545
4646 const memory = {
4747 labels : [ `Available: ${ memoryData } , `Usage: ${ result . memPerc } ] ,
4848 datasets : [
4949 {
5050 label : 'Memory' ,
51- backgroundColor : [ 'rgba(44, 130, 201, 1) ' , 'rgba(19, 221, 29, 1) ' ] ,
51+ backgroundColor : [ '#4594ce ' , '#67f267 ' ] ,
5252 data : [ memoryData , result . memPerc ] ,
5353 } ,
5454 ] ,
55- } ;
55+ }
5656
5757 const memOptions = {
5858 responsive : true ,
@@ -63,18 +63,18 @@ const Metrics = (props) => {
6363 legend : { display : false } ,
6464 datalabels : {
6565 formatter : ( value , ctx ) => {
66- let sum = 0 ;
67- const dataArr = ctx . chart . data . datasets [ 0 ] . data ;
66+ let sum = 0
67+ const dataArr = ctx . chart . data . datasets [ 0 ] . data
6868 dataArr . map ( ( data ) => {
69- sum += data ;
70- } ) ;
71- const percentage = ( value * 100 ) / sum + '%' ;
72- return percentage ;
69+ sum += data
70+ } )
71+ const percentage = ( value * 100 ) / sum + '%'
72+ return percentage
7373 } ,
7474 color : '#fff' ,
7575 } ,
7676 } ,
77- } ;
77+ }
7878
7979 const cpuOptions = {
8080 responsive : true ,
@@ -85,26 +85,26 @@ const Metrics = (props) => {
8585 legend : { display : false } ,
8686 datalabels : {
8787 formatter : ( value , ctx ) => {
88- let sum = 0 ;
89- const dataArr = ctx . chart . data . datasets [ 0 ] . data ;
88+ let sum = 0
89+ const dataArr = ctx . chart . data . datasets [ 0 ] . data
9090 dataArr . map ( ( data ) => {
91- sum += data ;
92- } ) ;
93- const percentage = ( value * 100 ) / sum + '%' ;
94- return percentage ;
91+ sum += data
92+ } )
93+ const percentage = ( value * 100 ) / sum + '%'
94+ return percentage
9595 } ,
9696 color : '#fff' ,
9797 } ,
9898 } ,
99- } ;
99+ }
100100
101101 return (
102102 < div className = "renderContainers" >
103103 < div className = "header" >
104104 < h1 className = "tabTitle" > Metrics</ h1 >
105105 </ div >
106106 < div className = "metric-section-title" >
107- < h3 > Host Metrics</ h3 >
107+ < h3 className = "container-heading" > Host Metrics</ h3 >
108108 </ div >
109109 < div className = "aggregate-conatiner" >
110110 < div className = "pieChart" >
@@ -123,7 +123,10 @@ const Metrics = (props) => {
123123 </ div >
124124 < div className = "legend-section" >
125125 < div className = "usage-box" > </ div >
126- < p className = "legend-text" > Usage { Math . round ( result . cpuPerc ) } %</ p >
126+ < p className = "legend-text" >
127+ { ' ' }
128+ Usage { Math . round ( result . cpuPerc ) } %
129+ </ p >
127130 </ div >
128131 </ div >
129132 </ div >
@@ -140,11 +143,17 @@ const Metrics = (props) => {
140143 < div className = "legend-container" >
141144 < div className = "legend-section" >
142145 < div className = "avaliable-box" > </ div >
143- < p className = "legend-text" > Available { Math . round ( memoryData ) } %</ p >
146+ < p className = "legend-text" >
147+ { ' ' }
148+ Available { Math . round ( memoryData ) } %
149+ </ p >
144150 </ div >
145151 < div className = "legend-section" >
146152 < div className = "usage-box" > </ div >
147- < p className = "legend-text" > Usage { Math . round ( result . memPerc ) } %</ p >
153+ < p className = "legend-text" >
154+ { ' ' }
155+ Usage { Math . round ( result . memPerc ) } %
156+ </ p >
148157 </ div >
149158 </ div >
150159 </ div >
@@ -178,7 +187,7 @@ const Metrics = (props) => {
178187 for more information on these metrics
179188 </p> */ }
180189 </ div >
181- ) ;
182- } ;
190+ )
191+ }
183192
184- export default Metrics ;
193+ export default Metrics
0 commit comments