merged with Taylor branch

Author: timlee12

app/components/Occupied.tsx

@@ -45,6 +45,7 @@ import { DashboardContext } from '../context/DashboardContext';
 import { ApplicationContext } from '../context/ApplicationContext';
 import { CommsContext } from '../context/CommsContext';
 import { AwsContext } from '../context/AwsContext';
+import { useNavigate } from 'react-router-dom';
 
 // TYPESCRIPT
 interface StyleProps {
@@ -65,6 +66,9 @@ const Occupied = React.memo(() => {
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z');
 
+  // const [showAwsContainer, setShowAwsContainer] = useState(false);
+  const navigate = useNavigate();
+
   // Grab services and applications whenever the user changes
   useEffect(() => {
     setServicesData([]);
@@ -81,15 +85,23 @@ const Occupied = React.memo(() => {
   };
 
   // Handle clicks on Application cards
-  const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
-    console.log(selectedApp, i);
+  const handleClick = (
+    event: ClickEvent,
+    selectedApp: string,
+    selectedService: string,
+    i: number
+  ) => {
+    //delRaf refers to the delete button
     if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
-      console.log('the application that you clicked is: ', selectedApp)
-      setIndex(i);
-      setApp(selectedApp);
-      setServicesData([]);
-      setServiceModalOpen(true);
-      fetchAwsData();
+      if (selectedService === 'AWS') {
+        navigate(`/aws/:${app}`);
+        fetchAwsData();
+      } else {
+        setIndex(i);
+        setApp(selectedApp);
+        setServicesData([]);
+        setServiceModalOpen(true);
+      }
     }
   };
 
@@ -281,7 +293,7 @@ const Occupied = React.memo(() => {
                     key={`card-${i}`}
                     className={classes.paper}
                     variant="outlined"
-                    onClick={event => handleClick(event, application[0], i)}
+                    onClick={event => handleClick(event, application[0], application[3], i)}
                   >
                     <div className="databaseIconContainer">
                       <div className="databaseIconHeader">
@@ -333,7 +345,6 @@ const Occupied = React.memo(() => {
                   </Card>
                 </div>
               ))}
-
           <Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
             <AddModal setOpen={setAddModalOpen} />
           </Modal>

app/containers/AWSGraphsContainer.tsx

@@ -1,19 +1,20 @@
 /* eslint-disable no-bitwise */
 import React, { useEffect, useState, useContext } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
 import { ApplicationContext } from '../context/ApplicationContext';
 import * as DashboardContext from '../context/DashboardContext';
 import lightAndDark from '../components/Styling';
 import { useQuery } from 'react-query';
 import { AwsContext } from '../context/AwsContext';
 
-const AwsGraphsContainer: React.FC = React.memo(props => {
+import '../stylesheets/AWSGraphsContainer.scss';
+
+const AWSGraphsContainer: React.FC = React.memo(props => {
   const { awsData, fetchAwsData, setAwsData } = useContext(AwsContext);
 
   useEffect(() => {
     fetchAwsData();
-  })
-  
+  });
+
   // const { data, status, isLoading } = useQuery('awsData', fetchAwsData);
 
   //   if(status === 'loading') {
@@ -25,13 +26,16 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
   //   }
 
   //   else {
-      return (
-        <div className='test-container'>
-          <p>AWS TEST DATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
-          <p>Here is our data: {awsData}</p>
-        </div>
-      )
-    // }
+  return (
+    <div className="AWS-container">
+      <p>
+        AWS TEST
+        DATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+      </p>
+      <p>Here is our data: {awsData}</p>
+    </div>
+  );
+  // }
 });
 
-export default AwsGraphsContainer;
+export default AWSGraphsContainer;

app/containers/MainContainer.tsx

@@ -9,12 +9,13 @@ import GraphsContainer from './GraphsContainer';
 import { DashboardContext } from '../context/DashboardContext';
 import SignUp from '../components/SignUp';
 import Login from '../components/Login';
+import AwsGraphsContainer from '../containers/AWSGraphsContainer';
+
 import '../stylesheets/MainContainer.scss';
 
 const MainContainer = React.memo(() => {
   const { mode } = useContext(DashboardContext);
-  const currentModeCSS =
-    mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
+  const currentModeCSS = mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
 
   return (
     <>
@@ -27,11 +28,12 @@ const MainContainer = React.memo(() => {
             <Route path="/about" element={<About />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/settings" element={<Settings />} />
+            <Route path="/applications/:app/:service" element={<GraphsContainer />} />
+            <Route path="/aws/:app" element={<AwsGraphsContainer />} />
             <Route
-              path="/applications/:app/:service"
-              element={<GraphsContainer />}
+              path="*"
+              element={<h1 style={{ color: 'red', fontSize: '200px' }}>Not Found</h1>}
             />
-            <Route path="*" element={<h1 style={{color: 'red', fontSize: '200px'}}>Not Found</h1>} />
           </Routes>
         </div>
       </div>

app/context/ApplicationContext.tsx

@@ -37,7 +37,8 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
   }
 
   const fetchServicesNames = useCallback((application: string) => {
-    setApp(application);
+    console.log('app when fetch services name', application);
+    // setApp(application);
 
     ipcRenderer.send('servicesRequest');
 
@@ -65,8 +66,8 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
       const store: object = {};
       data.forEach(el => {
         store[el.metric] = el;
-      })
-      console.log('result from getSavedMetrics is: ', store)
+      });
+      console.log('result from getSavedMetrics is: ', store);
       setSavedMetrics(store);
     });
   }, []);

app/stylesheets/AWSGraphsContainer.scss

@@ -0,0 +1,5 @@
+@import './constants.scss';
+
+.AWS-container {
+  margin-top: 40px;
+}

electron/Main.ts

@@ -9,7 +9,7 @@ let win: Electron.BrowserWindow;
 
 /**
  * @desc createWindow sets up the environment of the window (dimensions, port, initial settings)
-*/
+ */
 const createWindow = () => {
   win = new BrowserWindow({
     width: 1920,

electron/routes/data.ts

@@ -20,7 +20,7 @@ const postgresFetch = fetchData.postgresFetch;
 const AWS = require('aws-sdk');
 
 require('dotenv').config({
-  path: path.join(__dirname, './.env')
+  path: path.join(__dirname, './.env'),
 });
 // Initiate pool variable for SQL setup
 let pool: any;
@@ -116,7 +116,6 @@ ipcMain.on('commsRequest', async (message: Electron.IpcMainEvent) => {
   } catch (error) {
     // Catch errors
     console.log('Error in "commsRequest" event: ', error);
-
   }
 });
 
@@ -126,14 +125,12 @@ ipcMain.on('commsRequest', async (message: Electron.IpcMainEvent) => {
  */
 ipcMain.on('healthRequest', async (message: Electron.IpcMainEvent, service: string) => {
   try {
-
     let result: any;
 
     // Mongo Database
     if (currentDatabaseType === 'MongoDB') {
       result = await mongoFetch(service);
     }
-    
 
     // SQL Database
     if (currentDatabaseType === 'SQL') {
@@ -224,53 +221,55 @@ ipcMain.on('updateSavedMetrics', async (message: Electron.IpcMainEvent, args: Ob
     if (currentDatabaseType === 'MongoDB' && args.length) {
       // Update the 'selected' option for each metric
       args.forEach(async (el: any) => {
-        await MetricsModel.updateOne({ metric: el.metric }, {
-          $set: {
-            selected: el.selected
+        await MetricsModel.updateOne(
+          { metric: el.metric },
+          {
+            $set: {
+              selected: el.selected,
+            },
           }
-        })
-      })
+        );
+      });
       // let result = await MetricsModel.update();
     }
     if (currentDatabaseType === 'SQL' && args.length) {
       args.forEach(async (el: any) => {
-        await pool.query(`UPDATE metrics SET selected=${el.selected} WHERE metric='${el.metric}'`)
-      })
+        await pool.query(`UPDATE metrics SET selected=${el.selected} WHERE metric='${el.metric}'`);
+      });
     }
+  } catch (err) {
+    if (err) console.error(err);
   }
-
-  catch (err) {
-    if (err) console.error(err)
-  }
-})
-
-
-
-
+});
 
 /**
  * @event   eventRequest/EventResponse
- * @desc    
+ * @desc
  */
 
-
 // start fetch
 function extractWord(str: string) {
-  const res :any[] = [];
+  const res: any[] = [];
   const arr = str.split('\n'); // `/\n/`
   for (const element of arr) {
-    if (element && element.length !== 0 && element[0] !== '#' && element.substring(0, 3) !== 'jmx' && element.substring(0, 4) !== '\'jmx') {
+    if (
+      element &&
+      element.length !== 0 &&
+      element[0] !== '#' &&
+      element.substring(0, 3) !== 'jmx' &&
+      element.substring(0, 4) !== "'jmx"
+    ) {
       const metric = element.split(' ')[0];
       const metricValue = Number(element.split(' ')[1]);
       const time = Date.now();
-      const temp = {'metric': metric, 'category': 'Event', 'value': metricValue, 'time': time };
+      const temp = { metric: metric, category: 'Event', value: metricValue, time: time };
       res.push(temp);
     }
   }
   return res;
 }
 
-ipcMain.on('kafkaRequest', async (message) => {
+ipcMain.on('kafkaRequest', async message => {
   try {
     let result: any;
     // Mongo Database
@@ -280,7 +279,7 @@ ipcMain.on('kafkaRequest', async (message) => {
     // SQL Database
     if (currentDatabaseType === 'SQL') {
       // Get last 50 documents. If less than 50 get all
-    result = await postgresFetch('kafkametrics', pool);
+      result = await postgresFetch('kafkametrics', pool);
     }
 
     message.sender.send('kafkaResponse', JSON.stringify(result));
@@ -292,7 +291,7 @@ ipcMain.on('kafkaRequest', async (message) => {
 });
 
 // JJ-ADDITION
-ipcMain.on('kubernetesRequest', async (message) => {
+ipcMain.on('kubernetesRequest', async message => {
   try {
     let result: any;
     // Mongo Database
@@ -302,27 +301,27 @@ ipcMain.on('kubernetesRequest', async (message) => {
     // SQL Database
     if (currentDatabaseType === 'SQL') {
       // Get last 50 documents. If less than 50 get all
-    result = await postgresFetch('kubernetesmetrics', pool);
+      result = await postgresFetch('kubernetesmetrics', pool);
     }
     message.sender.send('kubernetesResponse', JSON.stringify(result));
   } catch (error) {
     // Catch errors
     console.log('Error in "kubernetesRequest" event', message);
     message.sender.send('kubernetesResponse', {});
   }
-})
+});
 
 ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
   try {
     // message.sender.send('awsMetricsResponse', 'hello from chronos team')
     // console.log('i am inside the ipcmain')
-    
+
     const cloudwatch = new AWS.CloudWatch({
       region: 'us-west-1',
       accessKeyId: process.env.AWS_ACCESS_KEY,
       secretAccessKey: process.env.AWS_SECRET_KEY
     });
-    
+
     const metricsNamesArray = ['CPUUtilization', 'NetworkIn', 'NetworkOut', 'DiskReadBytes'];
     // const awsData = {};
     const paramsArray = metricsNamesArray.map(metric => {
@@ -333,7 +332,7 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
         Period: 60,
         StartTime: new Date(new Date().getTime() - 60*60*1000),
         Statistics: ['Average'],
-        Dimensions: [{ 
+        Dimensions: [{
           Name: 'InstanceId',
           Value: 'i-0c5656a0366bc6027'
         }]
@@ -351,12 +350,12 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
 
         const newData = data.Datapoints.map((el, index: number) => {
           let transformedData = {};
-        
+
           transformedData['time'] = data.Datapoints[index].Timestamp,
           transformedData['metric'] = data.Label,
           transformedData['value'] = data.Datapoints[index].Average,
           transformedData['unit'] = data.Datapoints[index].Unit
-          
+
           return transformedData;
         });
 
@@ -365,7 +364,7 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
 
       return fetched;
     };
-    
+
     fetchData().then(data => {
       message.sender.send('awsMetricsResponse', JSON.stringify(data)) // send data to frontend
     })
@@ -375,6 +374,4 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
   }
 });
 
-
-
 // end fetch