11/* eslint-disable no-tabs */
22/* eslint-disable react/prop-types */
33import React from 'react' ;
4- import { convertToMetricsArr } from '../helper/parseContainerFormat' ;
54import { Chart } from 'react-chartjs-2' ;
65import LineChartDisplay from '../display/LineChartDisplay' ;
76import { useSelector } from 'react-redux' ;
7+ import { MetricsProps } from '../../../types' ;
88
99/**
1010 * Display general metrics
1111 *
1212 * @param {* } props
1313 */
14- const Metrics = ( props ) => {
15- const hostStats = useSelector ( ( state ) => state . containersList . hostStats ) ;
14+ const Metrics = ( props : MetricsProps ) => {
1615 const fullRunningList = props . runningList ;
17- // 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)
16+ const hostStats = useSelector ( ( state : any ) => state . containersList . hostStats ) ;
17+ const cpuData = 100 - hostStats . cpuPerc ;
18+ const memoryData = 100 - hostStats . memPerc ;
2119 const cpuThreshold = props . threshold [ 0 ] ;
2220 const memThreshold = props . threshold [ 1 ] ;
2321
24- let cpuFails = 0 ;
25- let memFails = 0 ;
22+ let cpuFails = 0
23+ let memFails = 0
2624
2725 // used to monitor threshold and fail counts
2826 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 ++ ;
27+ const cpu = parseFloat ( each [ 'CPUPerc' ] . replace ( / ( [ % ] ) + / g, '' ) )
28+ const memory = parseFloat ( each [ 'MemPerc' ] . replace ( / ( [ % ] ) + / g, '' ) )
29+ if ( cpu >= cpuThreshold ) cpuFails ++
30+ if ( memory >= memThreshold ) memFails ++
3331 }
3432
3533 const cpu = {
36- labels : [ `Available: ${ cpuData } , `Usage: ${ result . cpuPerc } ] ,
34+ labels : [ `Available: ${ cpuData } , `Usage: ${ hostStats . cpuPerc } ] ,
3735 datasets : [
3836 {
3937 label : 'CPU' ,
40- backgroundColor : [ 'rgba(44, 130, 201, 1) ' , 'rgba(19, 221, 29, 1) ' ] ,
41- data : [ cpuData , result . cpuPerc ] ,
38+ backgroundColor : [ '#4594ce ' , '#67f267 ' ] ,
39+ data : [ cpuData , hostStats . cpuPerc ] ,
4240 } ,
4341 ] ,
44- } ;
42+ }
4543
4644 const memory = {
47- labels : [ `Available: ${ memoryData } , `Usage: ${ result . memPerc } ] ,
45+ labels : [ `Available: ${ memoryData } , `Usage: ${ hostStats . memPerc } ] ,
4846 datasets : [
4947 {
5048 label : 'Memory' ,
51- backgroundColor : [ 'rgba(44, 130, 201, 1) ' , 'rgba(19, 221, 29, 1) ' ] ,
52- data : [ memoryData , result . memPerc ] ,
49+ backgroundColor : [ '#4594ce ' , '#67f267 ' ] ,
50+ data : [ memoryData , hostStats . memPerc ] ,
5351 } ,
5452 ] ,
55- } ;
53+ }
5654
5755 const memOptions = {
5856 responsive : true ,
@@ -62,10 +60,10 @@ const Metrics = (props) => {
6260 tooltips : { enabled : true , mode : 'index' } ,
6361 legend : { display : false } ,
6462 datalabels : {
65- formatter : ( value , ctx ) => {
63+ formatter : ( value : number , ctx : any ) => {
6664 let sum = 0 ;
6765 const dataArr = ctx . chart . data . datasets [ 0 ] . data ;
68- dataArr . map ( ( data ) => {
66+ dataArr . map ( ( data : any ) => {
6967 sum += data ;
7068 } ) ;
7169 const percentage = ( value * 100 ) / sum + '%' ;
@@ -74,7 +72,7 @@ const Metrics = (props) => {
7472 color : '#fff' ,
7573 } ,
7674 } ,
77- } ;
75+ }
7876
7977 const cpuOptions = {
8078 responsive : true ,
@@ -84,10 +82,10 @@ const Metrics = (props) => {
8482 tooltips : { enabled : false } ,
8583 legend : { display : false } ,
8684 datalabels : {
87- formatter : ( value , ctx ) => {
85+ formatter : ( value : number , ctx : any ) => {
8886 let sum = 0 ;
8987 const dataArr = ctx . chart . data . datasets [ 0 ] . data ;
90- dataArr . map ( ( data ) => {
88+ dataArr . map ( ( data : any ) => {
9189 sum += data ;
9290 } ) ;
9391 const percentage = ( value * 100 ) / sum + '%' ;
@@ -96,15 +94,15 @@ const Metrics = (props) => {
9694 color : '#fff' ,
9795 } ,
9896 } ,
99- } ;
97+ }
10098
10199 return (
102100 < div className = "renderContainers" >
103101 < div className = "header" >
104102 < h1 className = "tabTitle" > Metrics</ h1 >
105103 </ div >
106104 < div className = "metric-section-title" >
107- < h3 > Host Metrics</ h3 >
105+ < h3 className = "container-heading" > Host Metrics</ h3 >
108106 </ div >
109107 < div className = "aggregate-conatiner" >
110108 < div className = "pieChart" >
@@ -123,7 +121,7 @@ const Metrics = (props) => {
123121 </ div >
124122 < div className = "legend-section" >
125123 < div className = "usage-box" > </ div >
126- < p className = "legend-text" > Usage { Math . round ( result . cpuPerc ) } %</ p >
124+ < p className = "legend-text" > Usage { Math . round ( hostStats . cpuPerc ) } %</ p >
127125 </ div >
128126 </ div >
129127 </ div >
@@ -140,11 +138,14 @@ const Metrics = (props) => {
140138 < div className = "legend-container" >
141139 < div className = "legend-section" >
142140 < div className = "avaliable-box" > </ div >
143- < p className = "legend-text" > Available { Math . round ( memoryData ) } %</ p >
141+ < p className = "legend-text" >
142+ { ' ' }
143+ Available { Math . round ( memoryData ) } %
144+ </ p >
144145 </ div >
145146 < div className = "legend-section" >
146147 < div className = "usage-box" > </ div >
147- < p className = "legend-text" > Usage { Math . round ( result . memPerc ) } %</ p >
148+ < p className = "legend-text" > Usage { Math . round ( hostStats . memPerc ) } %</ p >
148149 </ div >
149150 </ div >
150151 </ div >
@@ -178,7 +179,7 @@ const Metrics = (props) => {
178179 for more information on these metrics
179180 </p> */ }
180181 </ div >
181- ) ;
182- } ;
182+ )
183+ }
183184
184- export default Metrics ;
185+ export default Metrics
0 commit comments