slight adjustments to EventContext and EventContainer.

Improvements to HealthChart logic to accommodate multiple services selected.

Author: jcpoirier20

app/charts/HealthChart.tsx

@@ -6,6 +6,7 @@ import { all, solo as soloStyle } from './sizeSwitch';
 interface HealthChartProps {
   key: string;
   dataType: string;
+  serviceName: string;
   chartData: object;
   categoryName: string;
   sizing: string;
@@ -52,21 +53,15 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
     const arrayOfPlotlyDataObjects: PlotlyData[] = [];
     // iterate through the chartData
     for (const serviceName in chartDataObj) {
-      console.log('SERVICENAME: ', serviceName);
       // define the metrics for this service
       const metrics = chartDataObj[serviceName];
-      console.log('METRICS: ', metrics);
       // loop through the list of metrics for the current service
       for (const metricName in metrics) {
-        console.log('METRICNAME: ', metricName);
         // define the value and time arrays; allow data to be reassignable in case we need to convert the bytes data into megabytes
         let dataArray = metrics[metricName].value;
-        console.log('DATAARRAY: ', dataArray);
         const timeArray = metrics[metricName].time;
-        console.log('TIMEARRAY: ', timeArray);
         // specifically for `Megabyte` types, convert the original data of bytes into a value of megabytes before graphing
         if (dataType === 'Memory in Megabytes' || dataType === 'Cache in Megabytes') {
-          console.log('DATATYPE: ', dataType);
           dataArray = dataArray.map(value => (value / 1000000).toFixed(2));
         }
         // create the plotly object
@@ -80,7 +75,6 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
             colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
           },
         };
-        console.log('PLOTLYDATAOBJECT: ', plotlyDataObject)
         // push the dataObject into the arrayOfPlotlyDataObjects
         arrayOfPlotlyDataObjects.push(plotlyDataObject);
       }
@@ -98,6 +92,7 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
   const createChart = () => {
     const dataArray = generatePlotlyDataObjects(chartData);
     const serviceNames = serviceNamesAsString(chartData);
+    console.log('serviceNames: ', serviceNames);
     const sizeSwitch = sizing === 'all' ? all : solo;
 
     return (

app/components/Occupied.tsx

@@ -62,8 +62,6 @@ type ClickEvent = React.MouseEvent<HTMLElement>;
 
 //v10: Memoized function, witouth any props. Should theoretically be called only once.
 const Occupied = React.memo(() => {
-  console.log('Hi, inside Occupied. Memoize function invoked');
-
   const { awsData, fetchAwsData, fetchAwsAppInfo, setLoadingState } = useContext(AwsContext);
   const { setServicesData, app, setApp } = useContext(ApplicationContext);
   // const { user, getApplications, deleteApp, mode } = useContext(DashboardContext);

app/components/TransferColumns.tsx

@@ -37,6 +37,7 @@ const TransferColumns = React.memo(() => {
   // console.log('targetKeys: ', targetKeys);
   // console.log('eventData: ', eventData);
   // console.log('eventDataList: ', eventDataList);
+  // console.log('event metrics: ', eventMetrics);
 
   useEffect(() => {
     if (healthDataObject) {
@@ -71,10 +72,10 @@ const TransferColumns = React.memo(() => {
     }
     // JJ-ADDITION (CAN ALSO JUST ADD OR OPERATOR TO ABOVE CONDITIONAL)
     else if (service === 'kubernetesmetrics') {
-      if (healthDataObject) {
-        setMetricsPool(getMetrics('health', healthDataObject));
-      } else if (healthMetricsReady) {
-        setMetricsPool(healthMetrics);
+      if (eventDataList && eventDataList.length > 0) {
+        setMetricsPool(getMetrics('event', eventDataList));
+      } else if (eventMetricsReady) {
+        setMetricsPool(eventMetrics);
       }
     } else if (!service.includes('kafkametrics')) {
       if (healthDataObject) {
@@ -127,14 +128,14 @@ const TransferColumns = React.memo(() => {
     return pool;
   };
 
-  // Justin's alternative to  getCharts (b/c getCharts is just saving the user-selected metrics into QueryContext)
+  // Justin's alternative idea to  getCharts (b/c getCharts is just saving the user-selected metrics into QueryContext)
   // getCharts takes data that already exists in state as an array of strings, and makes it into an array of objects, just to save it to QueryContext state
   // the selectedMetrics from QueryContext is used in TransferColumns, EventContainer, GraphsContainer, and HealthContainer
   // const saveSelectedMetrics = () => {
   //   // iterate over the targetKeys array
   // }
 
-  const getCharts = () => {
+  const createSelectedMetricsList = () => {
     const temp: any[] = [];
     const categorySet = new Set();
     console.log('targetKeys is: ', targetKeys);
@@ -157,7 +158,7 @@ const TransferColumns = React.memo(() => {
         temp.push(newCategory);
       }
     }
-    console.log('temp array with requested graphs is: ', temp);
+    console.log('temp array with requested metrics is: ', temp);
     setSelectedMetrics(temp);
   };
 
@@ -201,7 +202,7 @@ const TransferColumns = React.memo(() => {
   return (
     <>
       <div id="getChartsContainer">
-        <Button id="getCharts" onClick={getCharts} variant="contained" color="primary">
+        <Button id="getCharts" onClick={createSelectedMetricsList} variant="contained" color="primary">
           Get Charts
         </Button>
       </div>
@@ -219,6 +220,7 @@ const TransferColumns = React.memo(() => {
               metricIndeces.forEach(el => {
                 metrics.push(metricsPool[el].key);
               });
+              console.log('targetKeys is set to: ', metrics);
               setTargetKeys(metrics);
             }}
           />

app/containers/GraphsContainer.tsx

@@ -28,21 +28,11 @@ interface Params {
   service: string;
 }
 
-// interface GraphsContainerProps {
-//   match: {
-//     path: string;
-//     url: string;
-//     isExact: boolean;
-//     params: Params;
-//   };
-// }
-
 const GraphsContainer: React.FC = React.memo(props => {
   const navigate = useNavigate();
   const { app, service } = useParams<keyof Params>() as Params;
   const [live, setLive] = useState<boolean>(false);
   const { intervalID, setIntervalID } = useContext(ApplicationContext);
-  // const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
   const { servicesData, getSavedMetrics } = useContext(ApplicationContext);
   const { fetchHealthData, setHealthData, services } = useContext(HealthContext);
   const { setDockerData, dockerData } = useContext(DockerContext);
@@ -59,7 +49,7 @@ const GraphsContainer: React.FC = React.memo(props => {
     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((value: string) => value !== 'kafkametrics');
+    const healthServiceArray = serviceArray.filter((value: string) => value !== 'kafkametrics' && value !== 'kubernetesmetrics');
     if (live) {
       setIntervalID(
         setInterval(() => {
@@ -157,7 +147,6 @@ const GraphsContainer: React.FC = React.memo(props => {
 
   const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents();
   console.log('selected metrics: ', selectedMetrics);
-  console.log('chart: ', chart);
 
   return (
     <>

app/containers/HealthContainer.tsx

@@ -39,7 +39,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
   */
   const filterSelectedMetricsAndHealthData = (): DataObject => {
     // define a filtered health data object for output
-    // define an array of filteredMetricNames
+    // define an array of filteredMetricNames for later use
     const filteredHealthData = {};
     const filteredMetricNames: string[] = [];
     // iterate over the selectedMetrics from QueryContext
@@ -113,6 +113,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
     const typeGroupedObject = {};
     // iterate over the services in the healthData object
     for (const serviceName in filteredHealthData) {
+      console.log('service name in datatype function: ', serviceName);
       // save the filtered metrics of the current service to a variable
       // define the types of each metric in the metrics object as an array
       const metrics: object = filteredHealthData[serviceName];
@@ -122,46 +123,53 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
       // iterate over the types array and assign the typeGroupedObject a key of type, with a value of an object
       // then assign that newly created object a key of the current service and a value of an object
       typesArray.forEach((metricType: string) => {
-        typeGroupedObject[metricType] = {};
+        if (!typeGroupedObject[metricType]) {
+          // if the metric type doesn't exist, initalize it
+          typeGroupedObject[metricType] = {};
+        } // if it does exist alread, add the service name to it
         typeGroupedObject[metricType][serviceName] = {};
-      })
-      // iterate over the metrics object
+      });
+      // iterate over the metrics object of the current service
       for (const metric in metrics) {
         // define the current metric's type
         const metricType: string = defineDataValueType(metric);
         // store the current metric and its value in the typeGrouped object at the appropriate type and serviceName
         typeGroupedObject[metricType][serviceName][metric] = metrics[metric];
       }
     }
-    
+
     return typeGroupedObject;
   };
 
   // function to generate charts using the type-sorted data
   const generateCharts = sortedData => {
     const chartsArray: JSX.Element[] = [];
     const keymaker = () => {
-      return Math.floor(Math.random()*1000)
-    }
-    // iterate over the sortedData and create a chart for each data type
+      return Math.floor(Math.random() * 1000);
+    };
+    // iterate over the sortedData and create a chart for each data type and each service of that data
     for (const dataType in sortedData) {
-      // pass down the value of the current data type object
-      const chartData = sortedData[dataType];
-      console.log('dataType: ', dataType, 'chartData: ', chartData);
-      chartsArray.push(
-        <HealthChart
-          key={'H' + keymaker()}
-          dataType={dataType}
-          chartData={sortedData[dataType]}
-          categoryName={`${category}`}
-          sizing={props.sizing}
-          colourGenerator={props.colourGenerator}
-        />
-      );
+      const serviceObjects = sortedData[dataType];
+      for (const serviceName in serviceObjects) {
+        // pass down the value of the current data type object
+        const chartData = serviceObjects[serviceName];
+        console.log('dataType: ', dataType, 'chartData: ', chartData);
+        chartsArray.push(
+          <HealthChart
+            key={'H' + keymaker()}
+            dataType={dataType}
+            serviceName={serviceName}
+            chartData={sortedData[dataType]}
+            categoryName={`${category}`}
+            sizing={props.sizing}
+            colourGenerator={props.colourGenerator}
+          />
+        );
+      }
     }
     setHealthChartsArr(chartsArray);
   };
-  
+
   useEffect(() => {
     // returns an object containing only the healthData for the current category and the metrics the User selected
     const filteredHealthData = filterSelectedMetricsAndHealthData();

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.removeAllListeners('databaseConnected');
     ipcRenderer.send('connect', username, index, URI, databaseType);
     ipcRenderer.on('databaseConnected', (event: Electron.Event, data: any) => {

app/context/HealthContext.tsx

@@ -62,9 +62,9 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
           if (checkServicesComplete(temp, serv)) {
             setServices(serv);
             let transformedData: any = {};
-            console.log('original data before transformation: ', temp);
+            console.log('original healthData before transformation: ', temp);
             transformedData = transformer(temp);
-            console.log('data after tranformation: ', transformedData);
+            console.log('healthData after tranformation: ', transformedData);
             setHealthData(transformedData);
           }
         });