this will add metricProps type

Author: WongJonathann

src/components/tabs/Metrics.tsx

@@ -4,15 +4,14 @@ import React from 'react';
 import { Chart } from 'react-chartjs-2';
 import LineChartDisplay from '../display/LineChartDisplay';
 import { useSelector } from 'react-redux';
-import { ContainerProps, hostStats, containersList } from '../../../types';
-import { RootState, AppDispatch } from '../../renderer/store';
+import {  MetricsProps } from '../../../types';
 
 /**
  * Display general metrics
  *
  * @param {*} props
  */
-const Metrics = (props : any) => {
+const Metrics = (props: MetricsProps) => {
   const fullRunningList = props.runningList;
   const hostStats = useSelector((state: any) => state.containersList.hostStats);
   const cpuData = 100 - hostStats.cpuPerc; 

src/components/views/Admin.tsx

@@ -57,6 +57,7 @@ const AdminView = () => {
   const runningList = useSelector((state: StateType) => state.containersList.runningList);
   const stoppedList = useSelector((state: StateType) => state.containersList.stoppedList);
   const imagesList = useSelector((state: StateType) => state.images.imagesList);
+  const { mem_threshold, cpu_threshold } = useSelector((state: StateType) => state.session);
   // const networkList = useSelector((state: StateType) => state.networkList.networkList);
 
   const arrayOfVolumeNames = useSelector(
@@ -249,7 +250,7 @@ const AdminView = () => {
         <Route
           path='/metrics'
           element={
-            <Metrics runningList={runningList} />
+            <Metrics runningList={runningList} threshold={[cpu_threshold, mem_threshold]}/>
           }
         />
         <Route

src/components/views/UserView.tsx

@@ -56,6 +56,7 @@ const UserView = () => {
   const runningList = useSelector((state: StateType) => state.containersList.runningList);
   const stoppedList = useSelector((state: StateType) => state.containersList.stoppedList);
   const imagesList = useSelector((state: StateType) => state.images.imagesList);
+  const { mem_threshold, cpu_threshold } = useSelector((state: StateType) => state.session);
   // const networkList = useSelector((state: StateType) => state.networkList.networkList);
   const arrayOfVolumeNames = useSelector((state: StateType) => state.volumeList.arrayOfVolumeNames);
   const volumeContainersList = useSelector((state: StateType) => state.volumeList.volumeContainersList);
@@ -237,7 +238,7 @@ const UserView = () => {
         <Route
           path='/metrics'
           element={
-            <Metrics runningList={runningList} />
+            <Metrics runningList={runningList} threshold={[cpu_threshold, mem_threshold]}/>
           }
         />
 

types.ts

@@ -44,6 +44,11 @@ export type ContainerProps = {
     hostStats?: hostStats[];
   }
 
+export type MetricsProps = {
+  runningList: any[];
+  threshold: any[];
+}
+
   // Stopped containers have a Names key and running containers have a Name key
   export type ContainerType = {
     Name?: string;
@@ -251,7 +256,7 @@ interface session {
 export interface containersList {
   runningList: any[],
   stoppedList: any[],
-  hostStats: any,
+  hostStats: string[],
 }
 
 interface imagesList {