Event chart generator and interface defn's complete.

Author: jcpoirier20

app/charts/EventChart.tsx

@@ -3,13 +3,15 @@ import React, { useState } from 'react';
 import Plot from 'react-plotly.js';
 import { all, solo as soloStyle } from './sizeSwitch';
 
+interface ChartData {
+  value: string[];
+  time: string[];
+}
+
 interface EventChartProps {
   key: string;
-  metric: string;
-  timeList: any;
-  valueList: any;
-  sizing: string;
-  colourGenerator: Function;
+  metricName: string;
+  chartData: ChartData
 }
 
 interface SoloStyles {
@@ -18,7 +20,7 @@ interface SoloStyles {
 }
 
 const EventChart: React.FC<EventChartProps> = React.memo(props => {
-  const { metric, timeList, valueList, sizing, colourGenerator } = props;
+  const { metricName, chartData  } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 
   setInterval(() => {

app/containers/EventContainer.tsx

@@ -20,92 +20,63 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
   // eventChartsArr contains all charts of all metrics
   const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
 
-  
-
-
   /*
-  Chronos11 -- Unfortunately, eventData is not in a good place for UI/UX purposes.
-  The eventData object has a key of 'Event' and a value of an object with hundreds of keys as metric names 
-  with their associated values and timestamps due to the way kubernetes metrics are being tracked/logged in the database. 
+  Chronos11 -- Unfortunately, eventData is not in a good place for UI/UX purposes. These charts are being rendered 1:1 with the list of metrics (over 500).
   These metrics are scraped and generated by Prometheus, and should be sent to a Grafana instance
-  to be displayed with a Grafana dashboard, but we didn't realize this until we were too close to launch to fix it.
-  For now, the 'selectedMetrics' array is still an array with one object on it with a key of 'event', and a value of an array with
-  the hundreds of metric names as strings inside. The eventData is an object with the key of event, and a value of an object with
-  the hundreds of metrics as keys, and their values as the metrics and timestamps.
+  to be displayed with a Grafana dashboard, but we didn't realize this was happening until we were too close to launch to fix it.
   It would be wonderful if a future iteration could manipulate the prometheus configuration in the kubernetes example to send its data
   to an instance of Grafana, and integrate Grafana's dashboard into Chronos to visualize the data.
   */
 
-  const filterSelectedEventMetricsandData = () => {
+  const filterSelectedEventMetricsandData = eventDataObj => {
     const filteredEventData = {};
     // there's only one element in the selected metrics array for now...
-    // selectedMetrics is... [{Event: ['hundreds', 'of', 'metric', 'names', 'as', 'strings']}]
+    // selectedMetrics is... [{Event: ['metric', 'names', 'as', 'strings']}]
     // use this array of selected metrics to filter the eventData down to only the metrics we want to see
     const selectedArr = selectedMetrics[0].Event;
     // only one service... 'Event'
-    for (const service in eventData) {
+    for (const service in eventDataObj) {
       filteredEventData[service] = {};
       // define the object of all the metrics
-      const serviceMetricsObject = eventData[service];
+      const serviceMetricsObject = eventDataObj[service];
       // 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
         if (selectedArr.includes(metricName)) {
-          filteredEventData[service][metricName] = serviceMetricsObject[metricName]
+          filteredEventData[service][metricName] = serviceMetricsObject[metricName];
         }
       }
     }
     return filteredEventData;
-  }
-
-  const generateEventCharts = () => {
-    
-  }
+  };
 
+  // iterate over the filtered event data to build an array of charts, then set the event charts array state
+  const generateEventCharts = filteredEventDataObj => {
+    const chartsArray: JSX.Element[] = [];
+    const keymaker = () => {
+      return Math.floor(Math.random() * 1000);
+    };
+    for (const service in filteredEventDataObj) {
+      const metricObject = filteredEventDataObj[service];
+      for (const metricName in metricObject) {
+        const chartData = metricObject[metricName];
+        chartsArray.push(
+          <EventChart
+            key={'E' + keymaker()}
+            metricName={metricName}
+            chartData={chartData}
+          />
+        );
+      }
+    }
+    setEventChartsArr(chartsArray);
+  };
+  // invoke the filter and generate functions to render charts
   useEffect(() => {
-    const temp: JSX.Element[] = [];
-    filterSelectedEventMetricsandData();
-    // if (eventData && eventDataList.length > 0 && eventTimeList.length > 0) {
-    //   let selectedMetricsList: string[] = [];
-    //   selectedMetrics.forEach(element => {
-    //     if (Object.keys(element)[0] === 'Event') {
-    //       selectedMetricsList = element['Event'];
-    //     }
-    //   });
-
-    //   eventDataList.forEach((element, id) => {
-    //     const metric: string = Object.keys(element)[0];
-    //     const valueList: any = Object.values(element)[0];
-    //     if (selectedMetricsList.includes(metric)) {
-    //       const newEventChart = (
-    //         <EventChart
-    //           key={`Chart${id}`}
-    //           metric={metric}
-    //           timeList={getSingleTimeList(metric)}
-    //           valueList={valueList}
-    //           sizing={props.sizing}
-    //           colourGenerator={props.colourGenerator}
-    //         />
-    //       );
-
-    //       temp.push(newEventChart);
-    //     }
-    //   });
-    //   setEventChartsArr(temp);
-    // }
+    const filteredEventData = filterSelectedEventMetricsandData(eventData);
+    generateEventCharts(filteredEventData);
   }, [eventData, service]);
 
-  // const getSingleTimeList = (metricName: string) => {
-  //   let lst = [];
-  //   for (let metric of eventTimeList) {
-  //     if (Object.keys(metric)[0] === metricName) {
-  //       lst = metric[metricName];
-  //       break;
-  //     }
-  //   }
-  //   return lst;
-  // };
-
   return (
     <div>
       {service.includes('kafkametrics') || service.includes('kubernetesmetrics')
@@ -115,4 +86,4 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
   );
 });
 
-export default EventContainer;
+export default EventContainer;

app/containers/HealthContainer.tsx

@@ -153,21 +153,13 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
       for (const serviceName in serviceObjects) {
         // pass down the value of the current data type and service
         const chartData = serviceObjects[serviceName];
-        console.log(
-          'dataType: ',
-          dataType,
-          'service name: ',
-          serviceName,
-          'chartData: ',
-          chartData
-        );
         chartsArray.push(
           <HealthChart
             key={'H' + keymaker()}
             dataType={dataType}
             serviceName={serviceName}
             chartData={chartData}
-            categoryName={`${category}`}
+            categoryName={category}
             sizing={props.sizing}
             colourGenerator={props.colourGenerator}
           />