Merge pull request #10 from oslabs-beta/justin/event-metrics

Justin/event metrics

Author: jeffreyNa

app/charts/EventChart.tsx

@@ -5,9 +5,11 @@ import { all, solo as soloStyle } from './sizeSwitch';
 
 interface EventChartProps {
   key: string;
-  metric: string;
-  timeList: any;
-  valueList: any;
+  metricName: string;
+  chartData: {
+    value: string[],
+    time: string[]
+  }
   sizing: string;
   colourGenerator: Function;
 }
@@ -17,8 +19,17 @@ interface SoloStyles {
   width: number;
 }
 
+type PlotlyData = {
+  name: string;
+  x: string[];
+  y: string[];
+  type: string;
+  mode: string;
+  marker: { colors: string[] };
+};
+
 const EventChart: React.FC<EventChartProps> = React.memo(props => {
-  const { metric, timeList, valueList, sizing, colourGenerator } = props;
+  const { metricName, chartData, sizing, colourGenerator } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 
   setInterval(() => {
@@ -27,36 +38,39 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
     }
   }, 20);
 
+  // makes time data human-readable, and reverses it so it shows up correctly in the graph
+  const prettyTimeInReverse = (timeArray: string[]): string[] => {
+    return timeArray.map((el: any) => moment(el).format('kk:mm:ss')).reverse();
+  };
+
+  // removes underscores from metric names to improve their look in the graph
+  const prettyMetricName = (metricName: string): string => {
+    const newName = metricName.replace(/kubernetes-cadvisor\/docker-desktop\//g, '');    
+    return newName.replace(/_/g, ' ');
+  };
+
   const createChart = () => {
-    const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
-    const reverseTimeArr = timeArr.reverse()
-    const hashedColour = colourGenerator(metric);
-    const newMetricName =  metric.replace("kubernetes-cadvisor/docker-desktop/", ""); // this will get rid of the long path
-    const re = /_/g;
-    let plotlyData: {
-      name: any;
-      x: any;
-      y: any;
-      type: any;
-      mode: any;
-      marker: { color: string };
-    };
-    plotlyData = {
-      name: metric,
-      x: reverseTimeArr,
-      y: valueList,
+    const prettyName = prettyMetricName(metricName);
+    const prettyTime = prettyTimeInReverse(chartData.time);
+  
+    const plotlyDataObject: PlotlyData = {
+      name: prettyName,
+      x: prettyTime,
+      y: chartData.value,
       type: 'scattergl',
       mode: 'lines',
-      marker: { color: hashedColour },
+      marker: {
+        colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
+      },
     };
     const sizeSwitch = sizing === 'all' ? all : solo;
 
     return (
       <Plot
-        data={[plotlyData]}
-        config={{ displayModeBar: false }}
+        data={[plotlyDataObject]}
+        config={{ displayModeBar: true }}
         layout={{
-          title: newMetricName.replace(re," "), // this will reaplce all the underscores in the graph titlke,
+          title: prettyName,
           ...sizeSwitch,
           font: {
             color: '#444d56',
@@ -67,10 +81,7 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
           plot_bgcolor: 'white',
           showlegend: true,
           legend: {
-            orientation: 'h',
-            xanchor: 'center',
-            x: 0.5,
-            y: 5,
+            orientation: 'v',
           },
           xaxis: {
             title: 'Time',
@@ -84,7 +95,7 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
           },
           yaxis: {
             rangemode: 'nonnegative',
-            title: metric,
+            title: prettyName,
           },
         }}
       />

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;
@@ -25,7 +26,7 @@ type PlotlyData = {
 };
 
 const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
-  const { dataType, chartData, categoryName, sizing, colourGenerator } = props;
+  const { dataType, serviceName, chartData, categoryName, sizing, colourGenerator } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 
   // makes time data human-readable, and reverses it so it shows up correctly in the graph
@@ -34,8 +35,8 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
   };
 
   // removes underscores from metric names to improve their look in the graph
-  const prettyMetricName = metricName => {
-    return metricName.replaceAll('_', ' ');
+  const prettyMetricName = (metricName: string): string => {
+    return metricName.replace(/_/g, ' ');
   };
 
   // pulls the current service names to be shown in the graph title from chartData
@@ -90,15 +91,14 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
 
   const createChart = () => {
     const dataArray = generatePlotlyDataObjects(chartData);
-    const serviceNames = serviceNamesAsString(chartData);
     const sizeSwitch = sizing === 'all' ? all : solo;
 
     return (
       <Plot
         data={dataArray}
         config={{ displayModeBar: true }}
         layout={{
-          title: `${serviceNames}| ${categoryName}`,
+          title: `${serviceName} || ${categoryName}`,
           ...sizeSwitch,
           font: {
             color: '#444d56',
@@ -123,7 +123,7 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
           },
           yaxis: {
             rangemode: 'nonnegative',
-            title: `${dataType}`,
+            title: dataType,
           },
         }}
       />

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);
@@ -88,7 +86,6 @@ const Occupied = React.memo(() => {
   // Grab services and applications whenever the user changes
   // v10: Runs once when Occupied is memoized, and subsequently when user is updated.
   useEffect(() => {
-    console.log('Hi, inside Occupied.ts useEffect function.');
     setServicesData([]);
     getApplications();
   }, [user]);

app/components/TransferColumns.tsx

@@ -27,94 +27,85 @@ const TransferColumns = React.memo(() => {
   const { service } = useParams<keyof Params>() as Params;
   const { mode } = useContext(DashboardContext.DashboardContext);
 
-  const eventDataList = eventData.eventDataList;
-  const healthDataObject = healthData;
-
   const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
 
-  // console.log('healthMetrics: ', healthMetrics);
-  // console.log('metricsPool: ', metricsPool);
-  // console.log('targetKeys: ', targetKeys);
-  // console.log('eventData: ', eventData);
-  // console.log('eventDataList: ', eventDataList);
-
   useEffect(() => {
-    if (healthDataObject) {
+    if (healthData) {
       setHealthMetricsReady(true);
     }
-  }, [healthDataObject]);
+  }, [healthData]);
 
   useEffect(() => {
-    if (eventDataList && eventDataList.length > 0) {
+    if (eventData) {
       setEventMetricsReady(true);
     }
-  }, [eventDataList]);
+  }, [eventData]);
 
   useEffect(() => {
-    setHealthMetrics(getMetrics('health', healthDataObject));
+    setHealthMetrics(getMetrics('health', healthData));
   }, [healthMetricsReady]);
 
   useEffect(() => {
-    setEventMetrics(getMetrics('event', eventDataList));
+    setEventMetrics(getMetrics('event', eventData));
   }, [eventMetricsReady]);
 
   useEffect(() => {
     if (service === '') {
       return;
     }
     if (service === 'kafkametrics') {
-      if (eventDataList && eventDataList.length > 0) {
-        setMetricsPool(getMetrics('event', eventDataList));
+      if (eventData) {
+        setMetricsPool(getMetrics('event', eventData));
       } else if (eventMetricsReady) {
         setMetricsPool(eventMetrics);
       }
     }
     // 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 (eventData) {
+        setMetricsPool(getMetrics('event', eventData));
+      } else if (eventMetricsReady) {
+        setMetricsPool(eventMetrics);
       }
     } else if (!service.includes('kafkametrics')) {
-      if (healthDataObject) {
-        setMetricsPool(getMetrics('health', healthDataObject));
+      if (healthData) {
+        setMetricsPool(getMetrics('health', healthData));
       } else if (healthMetricsReady) {
         setMetricsPool(healthMetrics);
       }
     } else {
-      if (healthDataObject && eventDataList && eventDataList.length > 0) {
-        setMetricsPool(
-          getMetrics('event', eventDataList).concat(getMetrics('health', healthDataObject))
-        );
+      if (healthData && eventData) {
+        setMetricsPool(getMetrics('event', eventData).concat(getMetrics('health', healthData)));
       } else if (healthMetricsReady && eventMetricsReady) {
         setMetricsPool(eventMetrics.concat(healthMetrics));
       }
     }
   }, [service, eventData, healthData]);
 
   // responsible for parsing data and updating state via setMetricsPool
-  const getMetrics = (type, datalist) => {
+  const getMetrics = (type, dataObject) => {
     let pool: any[] = [];
     if (type === 'event') {
-      datalist.forEach(metric => {
-        const temp = {};
-        const metricName: string = Object.keys(metric)[0];
-        const key = 'Event | ' + metricName;
-        temp['key'] = key;
-        temp['title'] = key;
-        temp['tag'] = 'Event';
-        pool.push(temp);
-      });
+      for (const category in dataObject) {
+        const metricsObjects = dataObject[category];
+        for (const metricName in metricsObjects) {
+          const key = category + ' | ' + metricName;
+          pool.push({
+            key: key,
+            title: key,
+            tag: category,
+          });
+        }
+      }
     } else {
       // iterate throught the healthData object to populate the `Metrics Query` tab with metrics options
       // The pool array wants an object with a specific format in order to populate the selection table
-      for (const service in healthData) {
-        const categoryObjects = healthData[service];
+      for (const service in dataObject) {
+        const categoryObjects = dataObject[service];
         for (const category in categoryObjects) {
           const metricsObjects = categoryObjects[category];
-          for (const metric in metricsObjects) {
-            const key = category + ' | ' + metric;
+          for (const metricName in metricsObjects) {
+            const key = category + ' | ' + metricName;
             pool.push({
               key: key,
               title: key,
@@ -127,17 +118,9 @@ const TransferColumns = React.memo(() => {
     return pool;
   };
 
-  // Justin's alternative 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);
     for (let i = 0; i < targetKeys.length; i++) {
       const str: string = targetKeys[i];
       const strArr: string[] = str.split(' | ');
@@ -157,7 +140,6 @@ const TransferColumns = React.memo(() => {
         temp.push(newCategory);
       }
     }
-    console.log('temp array with requested graphs is: ', temp);
     setSelectedMetrics(temp);
   };
 
@@ -181,10 +163,11 @@ const TransferColumns = React.memo(() => {
   // makes the rows needed for the selection grid
   const rows: any[] = [];
   metricsPool.forEach((el, index) => {
-    const row = {};
-    row['id'] = index;
-    row['tag'] = el.tag;
-    row['title'] = el.title.split(' | ')[1].replace('kubernetes-cadvisor/docker-desktop/', ''); // gets rid of the full path
+    const row = {
+      id: index,
+      tag: el.tag,
+      title: el.title.split(' | ')[1].replace('kubernetes-cadvisor/docker-desktop/', ''),
+    }; // gets rid of the full path
     rows.push(row);
   });
 
@@ -201,7 +184,12 @@ 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>