added ec2 graphs component, deleted npm packages

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

Author: 4 people

app/components/AwsEC2Graphs.tsx

@@ -0,0 +1,105 @@
+import React, { useContext, useEffect, useState } from 'react';
+import AwsChart from '../charts/AwsChart';
+import { AwsContext } from '../context/AwsContext';
+import { CircularProgress } from '@material-ui/core';
+import zIndex from '@material-ui/core/styles/zIndex';
+
+const AwsEC2Graphs: React.FC = React.memo(props => {
+  const { awsData, setAwsData } = useContext(AwsContext);
+  const [isLoading, setLoadingState] = useState<boolean>(true);
+
+  useEffect(() => {
+    console.log('is state loading? ', !!awsData);
+    if(awsData) setLoadingState(false);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      setAwsData({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
+    }
+  }, [])
+
+  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;
+    }
+  };
+
+  return (
+    <div className="charts">
+      {isLoading &&
+        <div style={{ display: 'flex', width: 100, height:100, justifyContent: 'center', position: 'absolute', alignItems: 'center', zIndex: 50}}>
+          <CircularProgress />
+        </div>
+      }
+      {Object.keys(awsData)?.map(metric => {
+        return (
+          <AwsChart 
+            className='chart'
+            // key={`Chart${counter}`}
+            renderService={metric}
+            metric={awsData[metric][0]?.unit}
+            timeList={awsData[metric]?.map(el => el.time)}
+            valueList={awsData[metric]?.map(el => el.value)}
+            // sizing={props.sizing}
+            colourGenerator={stringToColor}
+          />
+        )
+      })}
+      {/* <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>
+  )
+});
+
+export default AwsEC2Graphs;

app/components/ClusterTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import {
   Table,
   TableBody,
@@ -41,6 +41,7 @@ export interface ClusterTableProps {
 
 const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
   const classes = useStyles();
+  const { awsEcsData } = useContext(AwsContext);
   // const {clusterName, servicesNum, tasksNum, status} = useContext(DashboardContext);
 
   return (
@@ -58,7 +59,7 @@ const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
           <TableBody>
             <TableCell className={classes.body}>
               <div className={classes.column}>
-                <div>test</div>
+                <div>{awsEcsData ? awsEcsData.clusterInfo?.clusterName : 'Loading...'}</div>
                 <div>
                   <span className="region">{region}</span>
                 </div>

app/components/Occupied.tsx

@@ -57,7 +57,7 @@ interface StyleProps {
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
 const Occupied = React.memo(() => {
-  const { awsData, fetchAwsData } = useContext(AwsContext);
+  const { awsData, fetchAwsData, fetchAwsAppInfo } = useContext(AwsContext);
   const { setServicesData, app, setApp } = useContext(ApplicationContext);
   const { user, applications, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { commsData } = useContext(CommsContext);
@@ -103,7 +103,8 @@ const Occupied = React.memo(() => {
       if (selectedService === 'AWS' || selectedService === 'AWS/EC2' || selectedService === 'AWS/ECS') {
         setAppIndex(i);
         setApp(selectedApp);
-        navigate(`/aws/:${app}`);
+        console.log('the selected AWS service is: ', selectedService)
+        navigate(`/aws/:${app}`, { state: { typeOfService: selectedService }});
       } else {
         setAppIndex(i);
         setApp(selectedApp);

app/context/AwsContext.tsx

@@ -10,10 +10,22 @@ interface Props {
   children: any;
 }
 
+interface AwsData {
+  CPUUtilization: [],
+  NetworkIn: [],
+  NetworkOut: [],
+  DiskReadBytes: []
+}
+
+interface AwsAppInfo {
+  typeOfService: string,
+  region: string
+}
+
 const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
-  const [awsData, setAwsData] = useState<any>({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
-  const [awsEcsData, setAwsEcsData] = useState<any>({ CPUUtilization: [], MemoryUtilization: [] });
-  const [awsAppInfo, setAwsAppInfo] = useState<any>({ typeOfService: '', region: '' });
+  const [awsData, setAwsData] = useState<AwsData>({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
+  const [awsEcsData, setAwsEcsData] = useState<any>({});
+  const [awsAppInfo, setAwsAppInfo] = useState<AwsAppInfo>({ typeOfService: '', region: '' });
 
   const fetchAwsData = (username: string, index: number) => {
     ipcRenderer.removeAllListeners('ec2MetricsResponse');
@@ -53,7 +65,7 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
 
   return (
     <AwsContext.Provider
-      value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData, awsEcsData, setAwsEcsData, awsAppInfo, fetchAwsAppInfo}}
+      value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo}}
     >
       {children}
     </AwsContext.Provider>