created ecs graph component w/ rendered graphs

Co-authored-by: Snow X. Bai <[email protected]>
Co-authored-by: Roberto Meloni <[email protected]>
Co-authored-by: Taylor Zhang <[email protected]>

Author: 4 people

app/components/AwsECSClusterGraphs.tsx

@@ -0,0 +1,67 @@
+import React, { useContext, useEffect } from 'react';
+import AwsChart from '../charts/AwsChart';
+import { AwsContext } from '../context/AwsContext';
+
+const AwsECSClusterGraphs: React.FC = React.memo(props => {
+  const { awsEcsData, setAwsEcsData } = useContext(AwsContext);
+
+  useEffect(() => {
+    return () => {
+      setAwsEcsData({})
+    };
+  }, [])
+
+  const stringToColor = (string: string, recurses = 0) => {
+    if (recurses > 20) return string;
+    function hashString(str: string) {
+      let hash = 0;
+      for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+      }
+      let colour = '#';
+      for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 0xff;
+        colour += `00${value.toString(16)}`.substring(-2);
+      }
+
+      console.log(colour);
+      return colour;
+    }
+  };
+
+  const activeServices = Object.keys(awsEcsData).slice(1).filter(el => awsEcsData[el].CPUUtilization?.value.length > 0)
+  const serviceGraphs = activeServices.map(service => {
+    return (
+      <div className='ecsCharts'>
+        <div id='service-name'>
+          <p>Service Name:</p>
+          <p>{service}</p>
+        </div>
+        <AwsChart 
+          className='chart'
+          renderService='CPU Utilization'
+          metric='Percent'
+          timeList={awsEcsData[service]?.CPUUtilization.time}
+          valueList={awsEcsData[service]?.CPUUtilization.value}
+          colourGenerator={stringToColor}
+        />
+        <AwsChart 
+          className='chart'
+          renderService='Memory Utilization'
+          metric='Percent'
+          timeList={awsEcsData[service]?.MemoryUtilization.time}
+          valueList={awsEcsData[service]?.MemoryUtilization.value}
+          colourGenerator={stringToColor}
+        />
+      </div>
+    )
+  });
+
+  return (
+    <div>
+      {serviceGraphs}
+    </div>
+  );
+});
+
+export default AwsECSClusterGraphs;

app/components/ClusterTable.tsx

@@ -41,9 +41,15 @@ export interface ClusterTableProps {
 
 const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
   const classes = useStyles();
-  const { awsEcsData } = useContext(AwsContext);
+  const { awsEcsData, isLoading } = useContext(AwsContext);
   // const {clusterName, servicesNum, tasksNum, status} = useContext(DashboardContext);
 
+  const activeServices = () => {
+    const serviceNames = Object.keys(awsEcsData).slice(1);
+
+    return serviceNames.filter(el => awsEcsData[el].CPUUtilization?.value.length > 0)
+  };
+
   return (
     <div className="ClusterTable-container">
       <TableContainer component={Paper}>
@@ -59,16 +65,16 @@ const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
           <TableBody>
             <TableCell className={classes.body}>
               <div className={classes.column}>
-                <div>{awsEcsData ? awsEcsData.clusterInfo?.clusterName : 'Loading...'}</div>
+                <div>{isLoading ? 'Loading...': awsEcsData.clusterInfo?.clusterName}</div>
                 <div>
                   <span className="region">{region}</span>
                 </div>
               </div>
             </TableCell>
             {/* <TableCell className={cluster.status === 'active' ? classes.activeCell : undefined}>testactive</TableCell> */}
-            <TableCell className={classes.body}>active</TableCell>
-            <TableCell className={classes.body}>3</TableCell>
-            <TableCell className={classes.body}>0/3</TableCell>
+            <TableCell className={classes.body}>{activeServices().length ? 'active' : 'inactive'}</TableCell>
+            <TableCell className={classes.body}>{isLoading ? 'Loading...' : Object.keys(awsEcsData).length - 1}</TableCell>
+            <TableCell className={classes.body}>{String(activeServices().length) + '/' + String(Object.keys(awsEcsData).length - 1)}</TableCell>
 
             {/* {clusters.map((cluster: Cluster, index: number) => (
             <TableRow key={index}>

app/containers/AWSGraphsContainer.tsx

@@ -8,14 +8,19 @@ import { AwsContext } from '../context/AwsContext';
 import '../stylesheets/AWSGraphsContainer.scss';
 import AwsChart from '../charts/AwsChart';
 import ClusterTable from '../components/ClusterTable';
+import AwsEC2Graphs from '../components/AwsEC2Graphs';
+import AwsECSClusterGraphs from '../components/AwsECSClusterGraphs';
+import { useLocation } from 'react-router-dom';
 
 const AwsGraphsContainer: React.FC = React.memo(props => {
-  const { awsData, setAwsData, awsAppInfo, fetchAwsData, fetchAwsEcsData, fetchAwsAppInfo } = useContext(AwsContext);
+  const { awsData, setAwsData, awsAppInfo, setAwsAppInfo, awsEcsData, setAwsEcsData, fetchAwsData, fetchAwsEcsData, fetchAwsAppInfo } = useContext(AwsContext);
   const { app, appIndex, intervalID, setIntervalID } = useContext(ApplicationContext);
   const { user } = useContext(DashboardContext);
   // const [intervalID, setintervalID] = useState<NodeJS.Timeout | null>(null);
   const [awsLive, setAwsLive] = useState<boolean>(false);
-  const { typeOfService, region } = awsAppInfo;
+  const { region } = awsAppInfo;
+  const { state } = useLocation();
+  const { typeOfService } = state;
 
   useEffect(() => {
     if (awsLive) {
@@ -24,17 +29,17 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
       setIntervalID(
         setInterval(() => {
           console.log('intervalId after click live', intervalID);
-          fetchAwsData(user, appIndex);
           fetchAwsAppInfo(user, appIndex);
-          fetchAwsEcsData(user, appIndex);
+          
+          typeOfService === 'AWS/EC2' ? fetchAwsData(user, appIndex) : fetchAwsEcsData(user, appIndex);
         }, 2000)
       )
     } else {
       console.log('not fetching data')
       if(intervalID) clearInterval(intervalID);
-      fetchAwsData(user, appIndex);
       fetchAwsAppInfo(user, appIndex);
-      fetchAwsEcsData(user, appIndex);
+      
+      typeOfService === 'AWS/EC2' ? fetchAwsData(user, appIndex) : fetchAwsEcsData(user, appIndex);
     }
   }, [awsLive]);
 
@@ -44,6 +49,8 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
 
       if(intervalID) clearInterval(intervalID);
       setAwsData({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
+      setAwsEcsData({});
+      setAwsAppInfo({ typeOfService: '', region: '' });
     }
   }, [])
 
@@ -84,53 +91,14 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
           )}
         </button>
       </div>
-      <div className="cluster-table">
-        {awsAppInfo.typeOfService === 'AWS/ECS' && (
+      {typeOfService === 'AWS/ECS' ? (
+        <div className="cluster-table">
           <ClusterTable typeOfService={typeOfService} region={region} />
-        )}
-      </div>
-      <div className="charts">
-        <AwsChart 
-          className='chart'
-          // key={`Chart${counter}`}
-          renderService="CPU Utilization"
-          metric="Percent"
-          timeList={awsData.CPUUtilization?.map(el => el.time)}
-          valueList={awsData.CPUUtilization?.map(el => el.value)}
-          // sizing={props.sizing}
-          colourGenerator={stringToColor}
-        />
-        <AwsChart 
-          className='chart'
-          // key={`Chart${counter}`}
-          renderService="Network In"
-          metric="Percent"
-          timeList={awsData.NetworkIn?.map(el => el.time)}
-          valueList={awsData.NetworkIn?.map(el => el.value)}
-          // sizing={props.sizing}
-          colourGenerator={stringToColor}
-        />
-        <AwsChart 
-          className='chart'
-          // key={`Chart${counter}`}
-          renderService="Network Out"
-          metric="Percent"
-          timeList={awsData.NetworkOut?.map(el => el.time)}
-          valueList={awsData.NetworkOut?.map(el => el.value)}
-          // sizing={props.sizing}
-          colourGenerator={stringToColor}
-        />
-        <AwsChart 
-          className='chart'
-          // key={`Chart${counter}`}
-          renderService="DiskReadBytes"
-          metric="Percent"
-          timeList={awsData.DiskReadBytes?.map(el => el.time)}
-          valueList={awsData.DiskReadBytes?.map(el => el.value)}
-          // sizing={props.sizing}
-          colourGenerator={stringToColor}
-        />
-      </div>
+          <AwsECSClusterGraphs />
+        </div>
+      ) : (
+        <AwsEC2Graphs />
+      )}
     </div>
   );
   // }

app/context/AwsContext.tsx

@@ -26,6 +26,7 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
   const [awsData, setAwsData] = useState<AwsData>({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
   const [awsEcsData, setAwsEcsData] = useState<any>({});
   const [awsAppInfo, setAwsAppInfo] = useState<AwsAppInfo>({ typeOfService: '', region: '' });
+  const [isLoading, setLoadingState] = useState<boolean>(true);
 
   const fetchAwsData = (username: string, index: number) => {
     ipcRenderer.removeAllListeners('ec2MetricsResponse');
@@ -34,25 +35,29 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
     ipcRenderer.on('ec2MetricsResponse', (event: Electron.Event, res: any) => {
       const data = JSON.parse(res);
       console.log('ec2 data fetched from AWS context is: ', data);
-
+      
       setAwsData(data);
+      setLoadingState(false);
     })
   };
 
   const fetchAwsEcsData = (username: string, index: number) => {
     ipcRenderer.removeAllListeners('ecsMetricsResponse');
+    setLoadingState(true);
 
     ipcRenderer.send('ecsMetricsRequest', username, index);
     ipcRenderer.on('ecsMetricsResponse', (event: Electron.Event, res: any) => {
       const data = JSON.parse(res);
       console.log('ecs data fetched from AWS context is: ', data);
 
       setAwsEcsData(data);
+      setLoadingState(false);
     });
   };
 
   const fetchAwsAppInfo = (username: string, index: number) => {
     ipcRenderer.removeAllListeners('awsAppInfoResponse');
+    setLoadingState(true);
 
     ipcRenderer.send('awsAppInfoRequest', username, index);
     ipcRenderer.on('awsAppInfoResponse', (event: Electron.Event, res: any) => {
@@ -65,7 +70,7 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
 
   return (
     <AwsContext.Provider
-      value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo}}
+      value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo, isLoading}}
     >
       {children}
     </AwsContext.Provider>

app/stylesheets/AWSGraphsContainer.scss

@@ -4,6 +4,19 @@
   margin-top: 40px;
 }
 
+.ecsCharts {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  padding: 10px;
+
+  #service-name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .charts {
   display: grid;
   grid-template-columns: auto auto;