fetching aws data to frontend

Author: timlee12

app/components/Occupied.tsx

@@ -46,6 +46,7 @@ import '../stylesheets/Occupied.scss';
 import { DashboardContext } from '../context/DashboardContext';
 import { ApplicationContext } from '../context/ApplicationContext';
 import { CommsContext } from '../context/CommsContext';
+import { AwsContext } from '../context/AwsContext';
 
 // TYPESCRIPT
 interface StyleProps {
@@ -55,6 +56,7 @@ interface StyleProps {
 
 
 const Occupied = React.memo(() => {
+  const { awsData, fetchAwsData } = useContext(AwsContext);
   const { setServicesData, app, setApp } = useContext(ApplicationContext);
   const { user, applications, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { commsData } = useContext(CommsContext);
@@ -89,6 +91,7 @@ const Occupied = React.memo(() => {
       setApp(selectedApp);
       setServicesData([]);
       setServiceModalOpen(true);
+      fetchAwsData();
     }
   };
 

app/components/Splash.tsx

@@ -3,9 +3,9 @@ import '../stylesheets/Splash.scss';
 
 const Splash: React.FC = React.memo((props) => {
   const [visible, setVisible] = useState(false);
-  // useEffect(() => {
-  //   setTimeout(() => setVisible(false), 4000);
-  // }, []);
+  useEffect(() => {
+    setTimeout(() => setVisible(false), 4000);
+  }, []);
 
   return (
     <>

app/containers/DashboardContainer.tsx

@@ -9,14 +9,15 @@ import DashboardContextProvider from '../context/DashboardContext';
 import DockerContextProvider from '../context/DockerContext';
 import EventContextProvider from '../context/EventContext';
 import QueryContextProvider from '../context/QueryContext';
+import AwsContextProvider from '../context/AwsContext';
 import '../stylesheets/Dashboard.scss';
 
 const DashboardContainer = React.memo(() => {
   const [visible, setVisible] = useState(true);
 
-  // useEffect(() => {
-  //   setTimeout(() => setVisible(true), 4000);
-  // }, []);
+  useEffect(() => {
+    setTimeout(() => setVisible(true), 4000);
+  }, []);
 
   return (
     <>
@@ -30,8 +31,10 @@ const DashboardContainer = React.memo(() => {
                   <HealthContextProvider>
                     <EventContextProvider>
                       <QueryContextProvider>
-                        <SidebarContainer />
-                        <MainContainer />
+                        <AwsContextProvider>
+                          <SidebarContainer />
+                          <MainContainer />
+                        </AwsContextProvider>
                       </QueryContextProvider>
                     </EventContextProvider>
                   </HealthContextProvider>

app/context/AwsContext.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback, useState } from 'react';
+import Electron from 'electron';
+import { transformData } from './helpers';
+const { ipcRenderer } = window.require('electron');
+
+export const AwsContext = React.createContext<any>(null);
+
+interface Props {
+  children: any;
+}
+
+const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
+  const [awsData, setAwsData] = useState<any>({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
+
+  const fetchAwsData = useCallback(() => {
+    console.log('i am here in fetchawsdata!!!')
+    ipcRenderer.send('awsMetricsRequest');
+
+    console.log('i am between the send and on!!!!!!!')
+    ipcRenderer.on('awsMetricsResponse', (event: Electron.Event, data: any) => {
+      console.log('data fetched from awsContext', data);
+      // setAwsData(data);
+    })
+
+    console.log('i am after the ipcrender!!!!')
+  },[]);
+
+  return (
+    <AwsContext.Provider
+      value={{ awsData, fetchAwsData }}
+    >
+      {children}
+    </AwsContext.Provider>
+  );
+});
+
+export default AwsContextProvider;

app/context/helpers.js

@@ -2,7 +2,6 @@
 /* eslint-disable camelcase */
 import { useRef, useEffect } from 'react';
 
-console.log('category list at start is: ', categoryList);
 let categoryList = [];
 
 export function transformData(healthData) {

electron/routes/data.ts

@@ -17,6 +17,7 @@ import MetricsModel from '../models/MetricsModel';
 
 const mongoFetch = fetchData.mongoFetch;
 const postgresFetch = fetchData.postgresFetch;
+const AWS = require('aws-sdk');
 
 require('dotenv').config();
 // Initiate pool variable for SQL setup
@@ -307,6 +308,73 @@ ipcMain.on('kubernetesRequest', async (message) => {
     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: 'AKIAU4VDDZOHUKZLQREU',
+      secretAccessKey: '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'
+    });
+    
+    const metricsNamesArray = ['CPUUtilization', 'NetworkIn', 'NetworkOut', 'DiskReadBytes'];
+    const awsData = {};
+    
+    metricsNamesArray.forEach(metric => {
+      const params = {
+        EndTime: new Date(),
+        MetricName: metric,
+        Namespace: 'AWS/EC2',
+        Period: 60,
+        StartTime: new Date(new Date().getTime() - 60*60*1000),
+        Statistics: ['Average'],
+        Dimensions: [{ 
+          Name: 'InstanceId',
+          Value: 'i-0c5656a0366bc6027'
+        }]
+      }
+      
+      const fetchData = async () => {
+        try {
+          const data = await cloudwatch.getMetricStatistics(params).promise();
+          // console.log(data)
+          
+          const newData = data.Datapoints.map((el, i) => {
+            let transformedData = {};
+          
+            transformedData['time'] = data.Datapoints[i].Timestamp,
+            transformedData['metric'] = data.Label,
+            transformedData['value'] = data.Datapoints[i].Average,
+            transformedData['unit'] = data.Datapoints[i].Unit
+            
+            // console.log(transformedData);
+            // arrayTest.push(transformedData);
+            return transformedData;
+          })
+  
+          awsData[metric] = newData;
+          // console.log(awsData)
+    
+          return awsData; // final returned data
+        } catch (err) {
+          console.log(err);
+        }
+      }
+  
+      fetchData().then(data => {
+        console.log(data)
+  
+        message.sender.send('awsMetricsResponse', JSON.stringify(data)) // send data to frontend
+      })
+    })
+  } catch (err) {
+    console.log('Error in "awsMetricsRequest" event', message);
+    message.sender.send('awsMetricsResponse', { CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] });
+  }
 });
 
 

examples/aws/data.js

@@ -0,0 +1,96 @@
+const AWS = require('aws-sdk');
+const path = require('path');
+require('dotenv').config({
+  path: path.resolve(__dirname, './.env')
+});
+
+
+const awsHelpers = {};
+
+awsHelpers.getAwsMetrics = async () => {
+  
+  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 = {};
+  
+  metricsNamesArray.forEach(metric => {
+    const params = {
+      EndTime: new Date(),
+      MetricName: metric,
+      Namespace: 'AWS/EC2',
+      Period: 60,
+      StartTime: new Date(new Date().getTime() - 60*60*1000),
+      Statistics: ['Average'],
+      Dimensions: [{ 
+        Name: 'InstanceId',
+        Value: 'i-0c5656a0366bc6027'
+      }]
+    }
+    
+    const fetchData = async () => {
+      try {
+        const data = await cloudwatch.getMetricStatistics(params).promise();
+        // console.log(data)
+        
+        const newData = data.Datapoints.map((el, i) => {
+          let transformedData = {};
+        
+          transformedData['time'] = data.Datapoints[i].Timestamp,
+          transformedData['metric'] = data.Label,
+          transformedData['value'] = data.Datapoints[i].Average,
+          transformedData['unit'] = data.Datapoints[i].Unit
+          
+          // console.log(transformedData);
+          // arrayTest.push(transformedData);
+          return transformedData;
+        })
+
+        awsData[metric] = newData;
+        // console.log(awsData)
+ 
+        return awsData; // final returned data
+      } catch (err) {
+        console.log(err);
+      }
+    }
+
+    fetchData().then(data => {
+      console.log(data)
+
+      // send data to frontend
+    })
+  })
+}
+
+
+
+// awsHelpers.getAwsMetrics();
+// console.log(Promise.resolve(final))
+// console.log(final);
+
+
+
+
+// const metricStatisticsObject = {};
+
+// awsHelpers.getMetricStatistics = async () => {
+//   try{
+//     const data = await cloudwatch.getMetricStatistics(CPUUtilization).promise();
+    
+//     metricStatisticsObject[CPUUtilization.MetricName] = data;
+//     return metricStatisticsObject;
+//   }catch(err){
+//     console.log(err);
+//   }
+// };
+// getMetricStatistics().then(metricStatisticsObject =>{
+//   console.log(metricStatisticsObject[CPUUtilization.MetricName].Datapoints.map(datapoint => datapoint.Average))
+// })
+
+
+module.exports = awsHelpers;