Merge pull request #12 from oslabs-beta/graphContainer/refactor

tedpham3 · web-flow · commit a028ae59cd80 · 2024-04-30T16:05:35.000-07:00
Graph container/refactor
diff --git a/__backend-tests__/mockdbsetup.js b/__backend-tests__/mockdbsetup.js
@@ -12,10 +12,10 @@ const connectDB = async () => {
     useNewUrlParser: true,
     useUnifiedTopology: true,
   }).then((result) => {
-    console.log(result.connection.readyState)
-    console.log(result.connection.host)
+    // console.log(result.connection.readyState)
+    // console.log(result.connection.host)
   }).catch((err) => {
-    console.log('Unable to connect to MongoMemoryServer')
+    // console.log('Unable to connect to MongoMemoryServer')
   });
 };
 
diff --git a/app/charts/GrafanaEventChart.tsx b/app/charts/GrafanaEventChart.tsx
@@ -23,19 +23,19 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
     const [type, setType] = useState(['timeserie']);
     const [timeFrame, setTimeFrame] = useState('5m');
 
-    console.log("graphType: ", graphType)
-    console.log("type: ", type)
-    console.log("inside GrafanaEventChart")
+    // console.log("graphType: ", graphType)
+    // console.log("type: ", type)
+    // console.log("inside GrafanaEventChart")
 
-    console.log("metricName: ", metricName)
+    // console.log("metricName: ", metricName)
     let uid = metricName.replace(/.*\/.*\//g, '')
     if (uid.length >= 40) {
         uid = metricName.slice(metricName.length - 39);
     }
 
     let parsedName = metricName.replace(/.*\/.*\//g, '')
-    console.log("uid: ", uid)
-    console.log("parsedName: ", parsedName)
+    // console.log("uid: ", uid)
+    // console.log("parsedName: ", parsedName)
 
     const handleSelectionChange = async (event) => {
         setType([...type, graphType]);
diff --git a/app/components/AwsEC2Graphs.tsx b/app/components/AwsEC2Graphs.tsx
@@ -27,7 +27,7 @@ const AwsEC2Graphs: React.FC = React.memo(props => {
         colour += `00${value.toString(16)}`.substring(-2);
       }
 
-      console.log(colour);
+      // console.log(colour);
       return colour;
     }
   };
diff --git a/app/components/Login.tsx b/app/components/Login.tsx
@@ -25,8 +25,8 @@ const Login = React.memo(() => {
     // inputFields.forEach(input => (input.value = ''));
     const response: boolean | string = ipcRenderer.sendSync('login', { username, password });
     if (typeof (response) === 'string') {
-      console.log('Hi, login successful and response string (mode) is:', response);
-      console.log('Redirected to Occupied from Login.');
+      // console.log('Hi, login successful and response string (mode) is:', response);
+      // console.log('Redirected to Occupied from Login.');
       setUser(username);
       setMode(response);
       navigate('/');
diff --git a/app/components/SignUp.tsx b/app/components/SignUp.tsx
@@ -43,11 +43,11 @@ const SignUp:React.FC = React.memo(() => {
 
     ipcRenderer.invoke('addUser', { username, email, password})
       .then((message) => {
-        console.log('message', message)
+        // console.log('message', message)
         if (message === false) {
           setFailedSignUp(<p>Sorry, your sign up failed. Please try a different username or email</p>)
         } else {
-          console.log('in frontend', username)
+          // console.log('in frontend', username)
           // setUser(username);
           navigate('/login');
           alert('USER CREATED: PLEASE LOG IN')
diff --git a/app/components/TransferColumns.tsx b/app/components/TransferColumns.tsx
@@ -121,7 +121,7 @@ const TransferColumns = React.memo(() => {
   const createSelectedMetricsList = () => {
     const temp: any[] = [];
     const categorySet = new Set();
-    console.log('Inside TransferColumns.txs line 124 targetKeys: ', targetKeys)
+    // console.log('Inside TransferColumns.txs line 124 targetKeys: ', targetKeys)
     for (let i = 0; i < targetKeys.length; i++) {
       const str: string = targetKeys[i];
       const strArr: string[] = str.split(' | ');
@@ -141,7 +141,7 @@ const TransferColumns = React.memo(() => {
         temp.push(newCategory);
       }
     }
-    console.log('temp', temp)
+    // console.log('temp', temp)
     setSelectedMetrics(temp);
   };
 
diff --git a/app/containers/AWSGraphsContainer.tsx b/app/containers/AWSGraphsContainer.tsx
@@ -45,7 +45,7 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
     if (awsLive) {
       setIntervalID(
         setInterval(() => {
-          console.log('intervalId after click live', intervalID);
+          // console.log('intervalId after click live', intervalID);
           fetchAwsAppInfo(user, appIndex);
 
           if (typeOfService === 'AWS/EC2') fetchAwsData(user, appIndex) ;
diff --git a/app/containers/DockerHealthContainer.tsx b/app/containers/DockerHealthContainer.tsx
@@ -114,13 +114,13 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
         const chartData = metricObjects[metricName];
         const token = chartData.token;
        
-        console.log("plotting grafana")
+        // console.log("plotting grafana")
         grafanaChartsArray.push(
           <GrafanaEventChart metricName={metricName} token={token} />);
 
       }
     }
-    console.log(grafanaChartsArray)
+    // console.log(grafanaChartsArray)
     setHealthChartsArr(grafanaChartsArray);
     setCurrChunk(grafanaChartsArray.slice(currIndex, currIndex + chunkSize));
     setCurrIndex(currIndex + chunkSize);
diff --git a/app/containers/EventContainer.tsx b/app/containers/EventContainer.tsx
@@ -56,13 +56,13 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
     const filteredEventData = {};
     // use this array of selected metrics to filter the eventData down to only the metrics we want to see
     const selectedArr = selectedMetrics[0].Event;
-    console.log('selectedArr IS: ', selectedArr)
+    // console.log('selectedArr IS: ', selectedArr)
     // only one service... 'Event'
     for (const service in eventDataObj) {
       filteredEventData[service] = {};
       // define the object of all the metrics
       const serviceMetricsObject = eventDataObj[service];
-      console.log('serviceMetricsObject IS: ', serviceMetricsObject)
+      // console.log('serviceMetricsObject IS: ', serviceMetricsObject)
       // iterate through all the metrics
       for (const metricName in serviceMetricsObject) {
         // if the metric name matches a string in the selectedArr, we add it to our filtered object
@@ -71,7 +71,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
         }
       };
     };
-    console.log('filteredEventData IS: ', filteredEventData)
+    // console.log('filteredEventData IS: ', filteredEventData)
     return filteredEventData;
   };
 
@@ -97,11 +97,11 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
     for (const service in filteredEventDataObj) {
       const metricObject = filteredEventDataObj[service];
       for (const metricName in metricObject) {
-        console.log('metricName IS: ', metricName)
+        // console.log('metricName IS: ', metricName)
         const chartData = metricObject[metricName];
-        console.log('chartData IS: ', chartData)
+        // console.log('chartData IS: ', chartData)
         const token = chartData.token;
-        console.log('token IS: ', token);
+        // console.log('token IS: ', token);
         // plotting using plotly
         // if (!isGrafana) {
         // console.log("plotting plotly")
@@ -117,7 +117,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
         // } else {
 
         // plotting using grafana
-        console.log("plotting grafana")
+        // console.log("plotting grafana")
         grafanaChartsArray.push(
           <GrafanaEventChart metricName={metricName} token={token} />);
 
@@ -126,7 +126,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
     }
     // currently, we only display graph using grafana. It can be implement as a option to choose between ploty and grafana for future iterations
     // if (isGrafana) {
-    console.log(grafanaChartsArray)
+    // console.log(grafanaChartsArray)
     setEventChartsArr(grafanaChartsArray);
     setCurrChunk(grafanaChartsArray.slice(currIndex, currIndex + chunkSize));
     setCurrIndex(currIndex + chunkSize);
diff --git a/app/containers/GrafanaIFrame.tsx b/app/containers/GrafanaIFrame.tsx
@@ -26,7 +26,7 @@ const GrafanaIFrame: React.FC<Props> = ({ awsUrl }) => {
 
   useEffect(() => {
     const url = `${awsUrl}/api/search?folderIds=0`
-    console.log(awsUrl)
+    // console.log(awsUrl)
     const fetchDashboards = async () => {
       const response = await fetch(url, {
         method: 'GET',
diff --git a/app/containers/GraphsContainer/GraphsContainer.tsx b/app/containers/GraphsContainer/GraphsContainer.tsx
@@ -33,6 +33,7 @@ interface Params {
 const GraphsContainer: React.FC = React.memo(() => {
 
   const { app, service } = useParams<keyof Params>() as Params;
+  // console.log({app,service})
   const [ live, setLive ] = useState<boolean>(false);
   const { intervalID, setIntervalID } = useContext(ApplicationContext);
   const { getSavedMetrics } = useContext(ApplicationContext);
@@ -47,6 +48,7 @@ const GraphsContainer: React.FC = React.memo(() => {
   let [inspect, setInspect] = useState<boolean>(false);
 
   useEffect(() => {
+    // console.log({service})
     const serviceArray = service.split(' ');
     // You would think you should add "kubernetesmetrics" into the below for consistency's sake but it makes it  not work correctly, so it has been omitted
     const healthServiceArray = serviceArray.filter(
@@ -69,15 +71,16 @@ const GraphsContainer: React.FC = React.memo(() => {
       );
     } else {
       if (intervalID) clearInterval(intervalID);
+      //this function fetches all the server data from our database
       fetchCommsData(app, live);
       fetchHealthData(healthServiceArray);
-      if (service.includes('kafkametrics')) {
-        fetchEventData('kafkametrics');
-      }
-      // JJ-ADDITION
-      if (service.includes('kubernetesmetrics')) {
-        fetchEventData('kubernetesmetrics');
-      }
+      // if (service.includes('kafkametrics')) {
+      //   fetchEventData('kafkametrics');
+      // }
+      // // JJ-ADDITION
+      // if (service.includes('kubernetesmetrics')) {
+      //   fetchEventData('kubernetesmetrics');
+      // }
       getSavedMetrics();
     }
 
diff --git a/app/containers/Inspect.jsx b/app/containers/Inspect.jsx
@@ -48,7 +48,7 @@ const Inspect = () => {
             .then(r => r.text())
             .then(d3.csvParse)
             .then(data => {
-                console.log(data)
+                // console.log(data)
                 const nodes = [], links = [];
                 data.forEach(({ size, path }) => {
                     const levels = path.split('/'),
diff --git a/app/context/ApplicationContext.tsx b/app/context/ApplicationContext.tsx
@@ -60,7 +60,7 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
    * @params application - is the name of the card taht was clicked on
    */
   const connectToDB = useCallback((username: string, index: number, application: string, URI: string, databaseType: string) => {
-    console.log('Hi, inside ApplicationContext, connectToDB function was invoked.');
+    // console.log('Hi, inside ApplicationContext, connectToDB function was invoked.');
     /* ipcRenderer is referring to electron. The connect string is processed in data.ts inside of the electron folder at the root of the project */
     ipcRenderer.removeAllListeners('databaseConnected');
     ipcRenderer.send('connect', username, index, URI, databaseType);
@@ -84,6 +84,7 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
       data.forEach(el => {
         store[el.metric] = el;
       });
+      console.log({store})
       // console.log('result from getSavedMetrics is: ', store);
       setSavedMetrics(store);
     });
diff --git a/app/context/AwsContext.tsx b/app/context/AwsContext.tsx
@@ -58,11 +58,11 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
     ipcRenderer.removeAllListeners('eksMetricsResponse');
     
     ipcRenderer.send('eksMetricsRequest', username, index);
-    console.log("hi2");
+    // console.log("hi2");
     ipcRenderer.on('eksMetricsResponse', (event: Electron.Event, res: any) => {
-      console.log('response: ', res)
+      // console.log('response: ', res)
       const data = JSON.parse(res);
-      console.log('data: ', data)
+      // console.log('data: ', data)
       setAwsEksData(data);
       setLoadingState(false);
     });
@@ -77,14 +77,14 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
  */
   
   const fetchAwsAppInfo = (username: string, index: number) => {
-    console.log('Hi, AwsContext -> fetchAwsAppInfo was invoked.');
+    // console.log('Hi, AwsContext -> fetchAwsAppInfo was invoked.');
     ipcRenderer.removeAllListeners('awsAppInfoResponse');
-    console.log('fetchAAWSAppInfo was invoked for card index: ', index);
-    console.log('Sending request to ipcMain.on for channel awsAppInfoRequest...');
+    // console.log('fetchAAWSAppInfo was invoked for card index: ', index);
+    // console.log('Sending request to ipcMain.on for channel awsAppInfoRequest...');
     ipcRenderer.send('awsAppInfoRequest', username, index);
     ipcRenderer.on('awsAppInfoResponse', (event: Electron.Event, res: any) => {
       const appInfo = JSON.parse(res);
-      console.log('received response: ', appInfo);
+      // console.log('received response: ', appInfo);
       setAwsAppInfo(appInfo);
     });
   };
diff --git a/app/context/CommsContext.tsx b/app/context/CommsContext.tsx
@@ -50,8 +50,8 @@ const CommsContextProvider: React.FC<Props> = React.memo((props) => {
       ipcRenderer.send('commsRequest');
       ipcRenderer.on('commsResponse', (event: Electron.Event, data: any) => {
         let result: any;
+        //Here we are grabbing all the data from our test database 
         if (tryParseJSON(data)) result = JSON.parse(data);
-        // console.log(data); 
         setCommsData(result);
       });
     }
diff --git a/app/context/DashboardContext.tsx b/app/context/DashboardContext.tsx
@@ -44,7 +44,7 @@ const DashboardContextProvider = React.memo((props: any) => {
   // Initial user will always be the guest
   const [user, setUser] = useState<string>('guest');
   const [applications, setApplications] = useState<string[][]>([]);
-  console.log({applications})
+  // console.log({applications})
   const [mode, setMode] = useState<string>('light');
 
 
@@ -61,7 +61,7 @@ const DashboardContextProvider = React.memo((props: any) => {
       JSON.stringify([name, database, URI, description, typeOfService])
     );
     setApplications(result);
-    console.log('the current application that was added is : ', result);
+    // console.log('the current application that was added is : ', result);
   }, []);
 
   const addAwsApp = useCallback((awsFields: AwsFields) => {
@@ -72,7 +72,7 @@ const DashboardContextProvider = React.memo((props: any) => {
       JSON.stringify([name, 'AWS', region, description, typeOfService, instance, accessKey, secretAccessKey, awsUrl])
     );
     setApplications(result);
-    console.log('the current application that was added is : ', result)
+    // console.log('the current application that was added is : ', result)
   }, []);
 
   const deleteApp = useCallback((index: number) => {
diff --git a/app/context/DockerContext.tsx b/app/context/DockerContext.tsx
@@ -38,11 +38,11 @@ const DockerContextProvider: React.FC<Props> = React.memo((props) => {
     ipcRenderer.on('dockerResponse', (data: any) => {
       let result;
       if (tryParseJSON(data)) {
-        console.log('DockerContext.tsx line 41 result: ', result)
+        // console.log('DockerContext.tsx line 41 result: ', result)
         result = JSON.parse(data);
       }
       const newDockerData = result[0] || {};
-      console.log(newDockerData);
+      // console.log(newDockerData);
       setDockerData(newDockerData);
     });
   }, []);
diff --git a/app/context/EventContext.tsx b/app/context/EventContext.tsx
@@ -56,7 +56,7 @@ const EventContextProvider: React.FC<Props> = React.memo(({ children }) => {
       if (tryParseJSON(data)) {
         const result: object[] = JSON.parse(data);
         if (result && result.length > 0) {
-          console.log('EventContext ln 59 result data: ', result)
+          // console.log('EventContext ln 59 result data: ', result)
           const transformedData: object = eventTransformer(result[0][arg]);
           setEventData(transformedData);
         }
diff --git a/app/context/HealthContext.tsx b/app/context/HealthContext.tsx
diff --git a/app/context/TempCodingHC.tsx b/app/context/TempCodingHC.tsx
diff --git a/app/context/helpers.ts b/app/context/helpers.ts
diff --git a/app/modals/ServicesModal/ServicesModal.tsx b/app/modals/ServicesModal/ServicesModal.tsx
diff --git a/chronos_npm_package/chronos.js b/chronos_npm_package/chronos.js
diff --git a/electron/routes/dashboard.ts b/electron/routes/dashboard.ts
diff --git a/electron/routes/data.ts b/electron/routes/data.ts
diff --git a/electron/routes/dataHelpers.ts b/electron/routes/dataHelpers.ts

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ const AwsEC2Graphs: React.FC = React.memo(props => {`
`27`	`27`	colour += `00${value.toString(16)}`.substring(-2);
`28`	`28`	`}`
`29`	`29`
`30`		`- console.log(colour);`
	`30`	`+ // console.log(colour);`
`31`	`31`	`return colour;`
`32`	`32`	`}`
`33`	`33`	`};`
Original file line number	Diff line number	Diff line change
`@@ -114,13 +114,13 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =`
`114`	`114`	`const chartData = metricObjects[metricName];`
`115`	`115`	`const token = chartData.token;`
`116`	`116`
`117`		`- console.log("plotting grafana")`
	`117`	`+ // console.log("plotting grafana")`
`118`	`118`	`grafanaChartsArray.push(`
`119`	`119`	`<GrafanaEventChart metricName={metricName} token={token} />);`
`120`	`120`
`121`	`121`	`}`
`122`	`122`	`}`
`123`		`- console.log(grafanaChartsArray)`
	`123`	`+ // console.log(grafanaChartsArray)`
`124`	`124`	`setHealthChartsArr(grafanaChartsArray);`
`125`	`125`	`setCurrChunk(grafanaChartsArray.slice(currIndex, currIndex + chunkSize));`
`126`	`126`	`setCurrIndex(currIndex + chunkSize);`