changed awsChart component name, removed console logs

Author: timlee12

app/App.tsx

@@ -2,18 +2,13 @@ import React, { useState } from 'react';
 import Splash from './components/Splash';
 import DashboardContainer from './containers/DashboardContainer';
 import './stylesheets/scrollBar.scss';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { ReactQueryDevtools } from 'react-query/devtools'
-
-const queryClient = new QueryClient();
 
 const App: React.FC = React.memo(() => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools initialIsOpen={false} />
+    <div>
       <Splash />
       <DashboardContainer />
-    </QueryClientProvider>
+    </div>
 
   )
 });

app/charts/AwsCpuChart.tsx renamed to app/charts/AwsChart.tsx

@@ -7,7 +7,7 @@ import { useQuery } from 'react-query';
 import { AwsContext } from '../context/AwsContext';
 
 import '../stylesheets/AWSGraphsContainer.scss';
-import AwsCpuChart from '../charts/AwsCpuChart';
+import AwsChart from '../charts/AwsChart';
 
 const AwsGraphsContainer: React.FC = React.memo(props => {
   const { awsData, awsAppInfo, fetchAwsData, fetchAwsAppInfo } = useContext(AwsContext);
@@ -22,15 +22,11 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
 
       setIntervalID(
         setInterval(() => {
-          console.log('intervalId after click live', intervalID)
           fetchAwsData(user, appIndex);
           fetchAwsAppInfo(user, appIndex);
-        }, 2000)
+        }, 10000)
       )
-
-      console.log('intervalId after click live', intervalID)
     } else {
-      console.log('interval id after stop live', intervalID)
       console.log('not fetching data')
       if(intervalID) clearInterval(intervalID);
       fetchAwsData(user, appIndex);
@@ -40,9 +36,7 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
 
   useEffect(() => {
     return () => {
-      console.log('changed page, shut down fetching');
-      console.log('intervalId when unmounting ', intervalID)
-
+      console.log('unmounting, shut down fetch process');
       if(intervalID) clearInterval(intervalID);
     }
   }, [])
@@ -82,17 +76,17 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
         </button>
       </div>
       <div className="charts">
-        <AwsCpuChart 
+        <AwsChart 
           className='chart'
           // key={`Chart${counter}`}
           renderService='CPU Utilization'
-          metric='Percent'
+          metric={awsData.CPUUtilization[0]?.unit}
           timeList={awsData.CPUUtilization?.map(el => el.time)}
           valueList={awsData.CPUUtilization?.map(el => el.value)}
           // sizing={props.sizing}
           colourGenerator={stringToColor}
         />
-        <AwsCpuChart 
+        <AwsChart 
           className='chart'
           // key={`Chart${counter}`}
           renderService='Network In'
@@ -102,7 +96,7 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
           // sizing={props.sizing}
           colourGenerator={stringToColor}
         />
-        <AwsCpuChart 
+        <AwsChart 
           className='chart'
           // key={`Chart${counter}`}
           renderService='Network Out'
@@ -112,7 +106,7 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
           // sizing={props.sizing}
           colourGenerator={stringToColor}
         />
-        <AwsCpuChart 
+        <AwsChart 
           className='chart'
           // key={`Chart${counter}`}
           renderService='DiskReadBytes'

app/containers/AWSGraphsContainer.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useState, useEffect, useContext } from 'react';
 import Electron from 'electron';
 import { transformData } from './helpers';
 const { ipcRenderer } = window.require('electron');
-import { useQuery } from 'react-query';
 import { ApplicationContext } from './ApplicationContext';
 
 export const AwsContext = React.createContext<any>(null);

app/context/AwsContext.tsx

@@ -76,19 +76,21 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
             <option value="AWS/ECS">Elastic Container Service (ECS)</option>
           </select>
         </div>
-        <div>
-          <label htmlFor="instance">
-            Instance/Cluster Name<span>*</span>
-          </label>
-          <input
-            id="aws-instance"
-            name="instance"
-            value={instance}
-            onChange={e => handleChange(e)}
-            placeholder="AWS Instance/Cluster Name"
-            required
-          />
-        </div>
+        {typeOfService === 'AWS/EC2' &&
+          <div>
+            <label htmlFor="instance">
+              Instance/Cluster Name<span>*</span>
+            </label>
+            <input
+              id="aws-instance"
+              name="instance"
+              value={instance}
+              onChange={e => handleChange(e)}
+              placeholder="AWS Instance/Cluster Name"
+              required
+            />
+          </div>
+        }
         <div>
           <label htmlFor="region">
             Region<span>*</span>

app/modals/AwsModal.tsx

@@ -14,15 +14,13 @@ class User {
   password: string;
   email: string;
   services: string[][];
-  cloudServices: string[][];
   mode: string;
 
   constructor(username: string, password: string, email: string) {
     this.username = username;
     this.password = this.hashPassword(password);
     this.email = email;
     this.services = [];
-    this.cloudServices = [];
     this.mode = 'light';
   }