Remade transformData to be in a nested object format.

Author: jcpoirier20

app/charts/HealthChart.tsx

@@ -2,7 +2,6 @@ import moment from 'moment';
 import React, { useState } from 'react';
 import Plot from 'react-plotly.js';
 import { all, solo as soloStyle } from './sizeSwitch';
-import { getTime } from '../context/helpers';
 
 interface HealthChartProps {
   key: string;
@@ -31,19 +30,19 @@ type plotlyData = {
 };
 
 const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
-  // 'metrics' is an array of the user-specified metrics as objects
+  // 'metrics' is an array of the user-specified metrics as objects => 'metric name': [metric values]
   const { serviceName, categoryName, metrics, timeList, sizing, colourGenerator } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
   const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
   const reverseTimeArr = timeArr.reverse();
   const re = /_/g;
-  const plotlyDataObjectArray: plotlyData[] = [];
 
+  // this array gets populated once generatePlotlyDataObjects is invoked in `createChart`
+  const plotlyDataObjectArray: plotlyData[] = [];
   // generates an array plotly data objects to add to be passed into our plotly chart's data prop
   const generatePlotlyDataObjects = (metricsArray, timeArray) => {
     console.log('metricsArray: ', metricsArray);
     console.log('timeArray: ', timeArray);
-    // initalize an array of objects for output
     // iterate through the metricsArray
     // each element is an array of num data (y-axis)
     metricsArray.forEach(el => {

app/components/TransferColumns.tsx

@@ -28,15 +28,15 @@ const TransferColumns = React.memo(() => {
   const { mode } = useContext(DashboardContext.DashboardContext);
 
   const eventDataList = eventData.eventDataList;
-  const healthDataList = healthData.healthDataList;
+  const healthDataObject = healthData;
 
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
 
   useEffect(() => {
-    if (healthDataList && healthDataList.length > 0) {
+    if (healthDataObject) {
       setHealthMetricsReady(true);
     }
-  }, [healthDataList]);
+  }, [healthDataObject]);
 
   useEffect(() => {
     if (eventDataList && eventDataList.length > 0) {
@@ -45,7 +45,7 @@ const TransferColumns = React.memo(() => {
   }, [eventDataList]);
 
   useEffect(() => {
-    setHealthMetrics(getMetrics('health', healthDataList));
+    setHealthMetrics(getMetrics('health', healthDataObject));
   }, [healthMetricsReady]);
 
   useEffect(() => {
@@ -65,26 +65,21 @@ const TransferColumns = React.memo(() => {
     }
     // JJ-ADDITION (CAN ALSO JUST ADD OR OPERATOR TO ABOVE CONDITIONAL)
     else if (service === 'kubernetesmetrics') {
-      if (healthDataList && healthDataList.length > 0) {
-        setMetricsPool(getMetrics('health', healthDataList));
+      if (healthDataObject) {
+        setMetricsPool(getMetrics('health', healthDataObject));
       } else if (healthMetricsReady) {
         setMetricsPool(healthMetrics);
       }
     } else if (!service.includes('kafkametrics')) {
-      if (healthDataList && healthDataList.length > 0) {
-        setMetricsPool(getMetrics('health', healthDataList));
+      if (healthDataObject) {
+        setMetricsPool(getMetrics('health', healthDataObject));
       } else if (healthMetricsReady) {
         setMetricsPool(healthMetrics);
       }
     } else {
-      if (
-        healthDataList &&
-        healthDataList.length > 0 &&
-        eventDataList &&
-        eventDataList.length > 0
-      ) {
+      if (healthDataObject && eventDataList && eventDataList.length > 0) {
         setMetricsPool(
-          getMetrics('event', eventDataList).concat(getMetrics('health', healthDataList))
+          getMetrics('event', eventDataList).concat(getMetrics('health', healthDataObject))
         );
       } else if (healthMetricsReady && eventMetricsReady) {
         setMetricsPool(eventMetrics.concat(healthMetrics));

app/containers/HealthContainer.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState, useContext } from 'react';
 import { HealthContext } from '../context/HealthContext';
 import { QueryContext } from '../context/QueryContext';
 import HealthChart from '../charts/HealthChart';
-import { getTime } from '../context/helpers';
 import { useParams } from 'react-router-dom';
 
 interface HealthContainerProps {
@@ -17,24 +16,70 @@ interface Params {
 }
 
 const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
+  /*
+    Pull in all the health data via HealthContext (an object with data and timestamps).
+    Pull in the list of ALL user-selected metrics via QueryContext as strings, even if they don't pertain to this category.
+    Destructure category from props. This category was passed down from the GraphsContainer and creates a new tab in Chronos to view charts pertaining only to the category.
+    Think of each <HealthContainer /> as the new tab in Chronos. It will only create charts pertaining to that category.
+    healthChartsArr is local state that gets updated here with an array of <HealthChart />'s that display user-selected data for the category.
+    `service` is used to determine if we should display our health charts (because kafka and kubernetes specifically don't use HealthChart to display data).
+    */
   const { healthData } = useContext(HealthContext);
   const { selectedMetrics } = useContext(QueryContext);
-  const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
   const { category } = props;
   const { service } = useParams<keyof Params>() as Params;
+  const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
+
+  const filteredHealthDataList: any[] = [];
+  const filteredHealthTimeList: any[] = [];
+
+  // function that filters healthData's list of metric data down to only the data pertaining to the passed in category
+  function filterHealthDataAndTimeByCategory() {
+    const originalHealthDataList = healthData.healthDataList;
+    const originalHealthTimeList = healthData.healthTimeList;
+
+    originalHealthDataList.forEach(categoryObject => {
+      // categoryObject is an object with a key of "Memory", "CPU", "Processes", or "Latency" and a value of an array with one element in it.
+      // each value is another object with a key of whichever services the user has selected to monitor (ex: "books", "customers", "reverse proxy")
+      const dataCategory = Object.keys(categoryObject)[0];
+      if (dataCategory === category) {
+        // if the categories match, iterate over the categoryObject's values which will be an array of services that have metric data for that category
+        // push the services in the matched category to the filteredHealthDataList for use in graph construction
+        const services = categoryObject[dataCategory];
+        services.forEach((service: object) => {
+          filteredHealthDataList.push(service);
+        })
+      }
+    });
+
+    originalHealthTimeList.forEach(categoryObject => {
+      const dataCategory: string = Object.keys(categoryObject)[0];
+      if (dataCategory === category) {
+        const services = Object.values(categoryObject);
+        services.forEach((service) => {
+          filteredHealthTimeList.push(service);
+        })
+      }
+    })
+  };
+
+  // function that filters ALL user-selected metric titles down to ones that pertain to this category
+
+  // function that filters all the healthData (health and timestamp data) pertaining to this category down to only the data matching the metric titles selected by the user
 
   useEffect(() => {
     const temp: JSX.Element[] = [];
     let counter: number = 0;
     const dataList: any[] = healthData.healthDataList;
     const timeList: any[] = healthData.healthTimeList;
-    // dataList and timeList are structured the same, but time holds timestamps. An array of 4 objects. [Memory, CPU, Processes, Latency]
-    // Each element has all its metrics.
-    // console.log('healthData object in state: ', healthData);
+    // dataList and timeList are structured the same, but timeList holds timestamps. An array of 4 objects: [Memory, CPU, Processes, Latency]
     // console.log('dataList in healthcontainer is:', dataList);
     // console.log('timelist in healthcontainer is:', timeList);
 
+    // conditional that verifies data exists before any charts are created
     if (healthData && dataList && timeList && dataList.length > 0 && timeList.length > 0) {
+      // initalize an array to store user-selected metrics
+      // iterates through ALL user-selected metrics and filters it down to metrics that pertain to this category
       let selectedMetricsList: string[] = [];
       selectedMetrics.forEach(element => {
         if (Object.keys(element)[0] === category) {
@@ -52,19 +97,14 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
         The 'category' variable is the specific category passed in to HealthContainer via prop drilling.
         The 'category' is the string Memory, CPU, or others that are in the Category column of the Query Selector interface.
         The 'categoryName' is the string that is Memory/CPU/other inside the metrics data response ('dataList' or 'timelist').
-        When the 'element'/'categoryName' matches the 'category' selected in the Query Selection interface...
-        ... it will dive into that Category object to pull out a chart for each metric selected in the selection interface.
-        selectedMetricsList is derived from the selectedMetrics that were in the QueryContext.
-        selectedMetricsList is how we know which metrics should be made into a chart.
-        selectedMetricsList is the way we can give one chart the multiple metrics being requested.
         */
         if (category === categoryName) {
           const categoryObj: [] = element[categoryName];
           const filteredMetrics: any[] = [];
           for (const metricObj of categoryObj) {
             // serviceName = category (ex. books)
-            const serviceName: string = Object.keys(metricObj)[0]; 
-            console.log('metricObj: ', metricObj)           
+            const serviceName: string = Object.keys(metricObj)[0];
+            console.log('metricObj: ', metricObj);
             const serviceMetricsArr: any[] = Object.values(metricObj).flat();
             console.log('serviceMetricsArr: ', serviceMetricsArr); // -> array of arrays containing numerical data.
             /* serviceMetricsArr = array of all metric objects

app/context/AwsContext.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useState, useEffect, useContext } from 'react';
 import Electron from 'electron';
-import { transformData } from './helpers';
 const { ipcRenderer } = window.require('electron');
 import { ApplicationContext } from './ApplicationContext';
 

app/context/HealthContext.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import Electron from 'electron';
-import { transformData } from './helpers';
+import { transformer } from './helpers';
 const { ipcRenderer } = window.require('electron');
 
 export const HealthContext = React.createContext<any>(null);
@@ -53,7 +53,6 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
             let result: any[];
             if (JSON.stringify(data) !== '{}' && tryParseJSON(data)) {
               result = JSON.parse(data);
-              console.log('the health results before transformation: ', result)
               if (result && result.length && service === Object.keys(result[0])[0]) {
                 resolve(result[0]);
               }
@@ -64,8 +63,9 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
           if (checkServicesComplete(temp, serv)) {
             setServices(serv);
             let transformedData: any = {};
-            transformedData = transformData(temp);
-            console.log('results from fetch health data: ', transformedData);
+            console.log('original data before transformation: ', temp);
+            transformedData = transformer(temp);
+            console.log('data after tranformation: ', transformedData);
             setHealthData(transformedData);
           }
         });