Added comments, removed redundant variables.

Co-authored-by: beezoo10 <[email protected]>
Co-authored-by: jeffreyNa <[email protected]>

Author: 3 people

app/containers/GraphsContainer.tsx

@@ -156,8 +156,9 @@ const GraphsContainer: React.FC = React.memo(props => {
   };
 
   const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents();
-  console.log({GraphsContainer: selectedMetrics})
-  console.log({GraphsContainer: chart});
+  console.log('selected metrics: ', {GraphsContainer: selectedMetrics})
+  console.log('chart: ', { GraphsContainer: chart });
+  
   return (
     <>
       <nav id="navigationBar">

app/containers/HealthContainer.tsx

@@ -44,23 +44,25 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
 
       datalist.forEach((element: {}) => {
         const categoryName: string = Object.keys(element)[0];
-        // 'element' is the category found in the datalist response from the server query for metrics data
-        // the above forEach method loops through the different categories
-        // 'category' variable is the specific category passed in to HealthContainer via prop drilling
-        // 'category' is the string Memory, CPU, or others that are in the Category column of the Query Selector interface
-        // '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
+        /*
+        'element' is the category found in the datalist response from the server query for metrics data.
+        The above forEach method loops through the different categories.
+        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];
           for (const metricObj of categoryObj) {
             const serviceName: string = Object.keys(metricObj)[0];
-            const serviceValArr: any[] = Object.values(metricObj);
-            const serviceVals: any[] = serviceValArr[0];
-            for (const serviceMetric of serviceVals) {
+            const serviceMetricsArr: any[] = Object.values(metricObj).flat();
+            console.log('serviceMetricsArr: ', serviceMetricsArr); // -> array of objects.
+            for (const serviceMetric of serviceMetricsArr) {
               const metric: string = Object.keys(serviceMetric)[0];
               const valueList = Object.values(serviceMetric)[0];
               const newTimeList: any = getTime(timelist, serviceName, metric, categoryName);