final changes to dev branch

Author: timlee12

app/components/AwsEC2Graphs.tsx

@@ -5,16 +5,12 @@ 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(() => {
-    if (awsData) setLoadingState(false);
-  }, []);
+  const { awsData, setAwsData, isLoading, setLoadingState } = useContext(AwsContext);
 
   useEffect(() => {
     return () => {
       setAwsData({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] });
+      setLoadingState(true);
     };
   }, []);
 
@@ -38,28 +34,13 @@ const AwsEC2Graphs: React.FC = React.memo(props => {
 
   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${metric}`}
-            renderService={metric}
-            metric={awsData[metric][0]?.unit}
+            renderService={isLoading? 'Loading...' : metric}
+            metric={isLoading ? '' : awsData[metric][0]?.unit}
             timeList={awsData[metric]?.map(el => el.time)}
             valueList={awsData[metric]?.map(el => el.value)}
             colourGenerator={stringToColor}

app/components/AwsECSClusterGraphs.tsx

@@ -3,11 +3,12 @@ import AwsChart from '../charts/AwsChart';
 import { AwsContext } from '../context/AwsContext';
 
 const AwsECSClusterGraphs: React.FC = React.memo(props => {
-  const { awsEcsData, setAwsEcsData } = useContext(AwsContext);
+  const { awsEcsData, setAwsEcsData, setLoadingState } = useContext(AwsContext);
 
   useEffect(() => {
     return () => {
       setAwsEcsData({});
+      setLoadingState(true);
     };
   }, []);
 

app/components/ClusterTable.tsx

@@ -10,7 +10,6 @@ import {
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import { AwsContext } from '../context/AwsContext';
-import cluster from 'cluster';
 
 const useStyles = makeStyles({
   table: {
@@ -77,7 +76,7 @@ const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
               {isLoading ? 'Loading...' : Object.keys(awsEcsData).length - 1}
             </TableCell>
             <TableCell className={classes.body}>
-              {String(activeServices().length) + '/' + String(Object.keys(awsEcsData).length - 1)}
+              {isLoading ? 'Loading...' : String(activeServices().length) + '/' + String(Object.keys(awsEcsData).length - 1)}
             </TableCell>
           </TableBody>
         </Table>

app/components/Occupied.tsx

@@ -57,7 +57,7 @@ interface StyleProps {
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
 const Occupied = React.memo(() => {
-  const { awsData, fetchAwsData, fetchAwsAppInfo } = useContext(AwsContext);
+  const { awsData, fetchAwsData, fetchAwsAppInfo, setLoadingState } = useContext(AwsContext);
   const { setServicesData, app, setApp } = useContext(ApplicationContext);
   const { user, applications, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { commsData } = useContext(CommsContext);

app/containers/SidebarContainer.tsx

@@ -8,13 +8,16 @@ import SettingsIcon from '@material-ui/icons/Settings';
 
 import '../stylesheets/SidebarContainer.scss';
 import { ApplicationContext } from '../context/ApplicationContext';
+import { AwsContext } from '../context/AwsContext';
 
 const SidebarContainer = React.memo(props => {
   const { intervalID } = useContext(ApplicationContext);
+  const { isLoading, setLoadingState } = useContext(AwsContext);
 
-  //stopInterval button -> clear interval when leaving graph containers
-  const stopIntervalOnClick = () => {
+  // clear interval and set loading state to true when leaving graph containers
+  const handleClick = () => {
     if(intervalID) clearInterval(intervalID);
+    if(!isLoading) setLoadingState(true);
   }
 
   return (
@@ -30,7 +33,7 @@ const SidebarContainer = React.memo(props => {
         </div>
         <hr className="line" id="firstLine" />
         <div className="thirdRow">
-          <Link className="sidebar-link" to="/" id="dash" onClick={stopIntervalOnClick}>
+          <Link className="sidebar-link" to="/" id="dash" onClick={handleClick}>
             <ListIcon
               style={{
                 WebkitBoxSizing: 'content-box',
@@ -41,7 +44,7 @@ const SidebarContainer = React.memo(props => {
             />
             &emsp;Dashboard
           </Link>
-          <Link className="sidebar-link" to="/settings" id="settings" onClick={stopIntervalOnClick}>
+          <Link className="sidebar-link" to="/settings" id="settings" onClick={handleClick}>
             <SettingsIcon
               style={{
                 WebkitBoxSizing: 'content-box',
@@ -52,7 +55,7 @@ const SidebarContainer = React.memo(props => {
             />
             &emsp;Settings
           </Link>
-          <Link className="sidebar-link" to="/about" id="about" onClick={stopIntervalOnClick}>
+          <Link className="sidebar-link" to="/about" id="about" onClick={handleClick}>
             <InfoIcon
               style={{
                 WebkitBoxSizing: 'content-box',
@@ -63,7 +66,7 @@ const SidebarContainer = React.memo(props => {
             />
             &emsp;About
           </Link>
-          <Link className="sidebar-link" to="/contact" id="contact" onClick={stopIntervalOnClick}>
+          <Link className="sidebar-link" to="/contact" id="contact" onClick={handleClick}>
             <ContactSupportIcon
               style={{
                 WebkitBoxSizing: 'content-box',

app/context/AwsContext.tsx

@@ -34,7 +34,6 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
     ipcRenderer.send('ec2MetricsRequest', username, index);
     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);
@@ -43,12 +42,10 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
 
   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);
@@ -57,20 +54,18 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
 
   const fetchAwsAppInfo = (username: string, index: number) => {
     ipcRenderer.removeAllListeners('awsAppInfoResponse');
-    setLoadingState(true);
 
     ipcRenderer.send('awsAppInfoRequest', username, index);
     ipcRenderer.on('awsAppInfoResponse', (event: Electron.Event, res: any) => {
       const appInfo = JSON.parse(res);
-      console.log('app info requested from fetchAwsAppInfo: ', appInfo)
 
       setAwsAppInfo(appInfo);
     });
   };
 
   return (
     <AwsContext.Provider
-      value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo, isLoading}}
+      value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo, isLoading, setLoadingState}}
     >
       {children}
     </AwsContext.Provider>