Merge branch 'graph-work' into dev

Author: williamowen65

app/charts/LatencyChart.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import Plot from 'react-plotly.js';
+import moment from 'moment';
 import { HealthContext } from '../context/HealthContext';
 import { all, solo as soloStyle } from './sizeSwitch';
 
@@ -14,6 +15,40 @@ interface SoloStyles {
 
 const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
   const { healthData } = useContext(HealthContext);
+  const [data, setData] = useState<Array<Array<string | (string | number)[]>>>([]);
+
+useEffect(() => {
+    if (healthData.length) {
+      const tempArr: ((string | number)[] | string)[][] = [];
+      // loop over each
+      healthData.forEach(
+        (service: { 
+          time: string[]; 
+          latency: (string | number)[]; 
+          service: string[] 
+        }) => {
+          let timeArr: string[] = [];
+          // perform this when we 'setTime'
+          if (service.time !== undefined) {
+            timeArr = service.time.map((el: any) => moment(el).format('kk:mm:ss'));
+          }
+
+          const temp: [string[], (string | number)[], string] = [
+            timeArr,
+            service.latency,
+            service.service[0],
+          ];
+          tempArr.push(temp);
+        }
+      );
+      setData(tempArr);
+    }
+  }, [healthData]);
+
+  // FOR CHECKING
+  // useEffect(() => {
+  //   console.log(data);
+  // }, [data]);
 
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 
@@ -26,21 +61,36 @@ const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) =>
   const createChart = () => {
     const yAxis: Array<number> = healthData.latency;
 
+    let plotlyData: {
+      name: any;
+      x: any;
+      y: any;
+      type: any;
+      mode: any;
+      marker: { color: string };
+    }[] = [];
+    
+    plotlyData = data.map(dataArr => {
+      // eslint-disable-next-line no-bitwise
+      const randomColor = `#${(((1 << 24) * Math.random()) | 0).toString(16)}`;
+      
+      return {
+        name: dataArr[2],
+        x: data[0][0],
+        y: dataArr[1],
+        type: 'scattergl',
+        mode: 'lines',
+        marker: { color: randomColor }
+      };
+    });
+
+    
     const sizeSwitch = sizing === 'all' ? all : solo;
 
-    console.log(sizeSwitch);
 
     return (
       <Plot
-        data={[
-          {
-            name: 'CPU Latency',
-            type: 'scattergl',
-            y: yAxis,
-            mode: 'lines',
-            marker: { color: '#fc4039' },
-          },
-        ]}
+        data={[...plotlyData]}
         layout={{
           title: 'Latency',
           ...sizeSwitch,
@@ -59,7 +109,7 @@ const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) =>
             y: 5,
           },
           xaxis: {
-            title: 'Time Elapsed (min)',
+            title: 'Time',
             tickmode: 'linear',
             tick0: 0,
             dtick: 10,

app/charts/ProcessesChart.tsx

@@ -1,3 +1,8 @@
+/** FOR THE NEXT TEAM
+ * You should probably take a look and fix the legend for the graph.
+ * Can compare services, but hard to tell which points of data belong to which server. 
+*/
+
 /* eslint-disable no-useless-concat */
 import React, { useContext, useState, useEffect } from 'react';
 import Plot from 'react-plotly.js';
@@ -32,6 +37,8 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) =
 
     useEffect(() => {
       if (healthData.length) {
+        const tempArr: [string, string[], string[], string[]][] = [];
+
         // loop over each
         healthData.forEach(
           (service: {
@@ -46,12 +53,12 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) =
               service.blockedprocesses,
               service.sleepingprocesses,
             ];
-            setData(data.concat([temp]));
+            tempArr.push(temp);
+
+            
           }
         );
-        // temp = [ string, [], [], [] ]
-        // setTime(healthData[0].time); //push
-        // setCpuSpeed(healthData[0].cpuspeed); //push
+        setData(tempArr);
       }
     }, [healthData]);
 

app/charts/SpeedChart.tsx

@@ -1,3 +1,7 @@
+/** FOR THE NEXT TEAM
+ * Currently, data for multiple servers overlap, as we wanted. However, if using the dummy MongoDB data, the lines technically do not overlap since it only records speeds for one server at a time. However, we expect that, when running on a proper app, speeds from all servers will be recorded.
+ */
+
 import React, { useContext, useEffect, useState } from 'react';
 import Plot from 'react-plotly.js';
 import moment from 'moment';
@@ -25,10 +29,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
           let timeArr: string[] = [];
           // perform this when we 'setTime'
           if (service.time !== undefined) {
-            timeArr = service.time.map((el: any) => moment(el).format('hh:mm:ss A'));
-            service.time.forEach((el, i) => {
-              // console.log(el, timeArr[i]);
-            });
+            timeArr = service.time.map((el: any) => moment(el).format('kk:mm:ss'));
           }
 
           const temp: [string[], (string | number)[], string] = [
@@ -40,14 +41,12 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
         }
       );
       setData(tempArr);
-      // setTime(healthData[0].time); //push
-      // setCpuSpeed(healthData[0].cpuspeed); //push
     }
   }, [healthData]);
 
-  useEffect(() => {
-    console.log(data);
-  }, [data]);
+  // useEffect(() => {
+  //   console.log(data);
+  // }, [data]);
 
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 

app/charts/TemperatureChart.tsx

@@ -15,40 +15,79 @@ interface SoloStyles {
 
 const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
   const { healthData } = useContext(HealthContext);
-  const { time, cputemp } = healthData;
+  const [data, setData] = useState<Array<Array<string | (string | number)[]>>>([]);
+  
+  useEffect(() => {
+    if (healthData.length) {
+      const tempArr: ((string | number)[] | string)[][] = [];
+      // loop over each
+      healthData.forEach(
+        (service: { 
+          time: string[]; 
+          cputemp: (string | number)[]; 
+          service: string[] 
+        }) => {
+          let timeArr: string[] = [];
+          // perform this when we 'setTime'
+          if (service.time !== undefined) {
+            timeArr = service.time.map((el: any) => moment(el).format('kk:mm:ss'));
+          }
 
-  const createChart = () => {
-    const yAxis = cputemp;
-    let month: undefined | string;
-    let timeArr: undefined | [number];
-    if (time !== undefined && cputemp !== undefined) {
-      timeArr = time.map((el: string) => moment(el).format('hh:mm A'));
-      month = moment(time[0]).format('MMM Do');
+          const temp: [string[], (string | number)[], string] = [
+            timeArr,
+            service.cputemp,
+            service.service[0],
+          ];
+          tempArr.push(temp);
+        }
+      );
+      setData(tempArr);
     }
+  }, [healthData]);
 
-    const [solo, setSolo] = useState<SoloStyles | null>(null);
+  const [solo, setSolo] = useState<SoloStyles | null>(null);
 
     setInterval(() => {
       if (solo != soloStyle) {
         setSolo(soloStyle);
       }
     }, 20);
 
+
+  const createChart = () => {
+
+    
+    let plotlyData: {
+      name: any;
+      x: any;
+      y: any;
+      type: any;
+      fillcolor: any;
+      mode: any;
+      showlegend: any;
+    }[] = [];
+    
+    plotlyData = data.map(dataArr => {
+      // eslint-disable-next-line no-bitwise
+      const randomColor = `#${(((1 << 24) * Math.random()) | 0).toString(16)}`;
+   
+      return {
+        name: dataArr[2],
+        x: data[0][0],
+        y: dataArr[1],
+        fillcolor: randomColor,
+        type: 'scatter',
+        mode: 'lines',
+        showlegend: true,
+      };
+    });
+    
     const sizeSwitch = sizing === 'all' ? all : solo;
 
     return (
       <Plot
         data={[
-          {
-            type: 'scatter',
-            fill: 'tozeroy',
-            mode: 'lines',
-            fillcolor: '#4b54ea',
-            x: timeArr,
-            y: yAxis,
-            name: 'CPU Temperature',
-            showlegend: true,
-          },
+         ...plotlyData
         ]}
         config={{ responsive: true }}
         layout={{

app/components/Applications.tsx

@@ -103,7 +103,7 @@ const Applications: React.FC = React.memo(() => {
                     ref={element => {
                       delRef.current[i] = element;
                     }}
-                    className={classes.iconbutton}
+                    className={classes.iconbutton + "deleteBtn"}
                     aria-label="Delete"
                     onClick={event => confirmDelete(event, application[0], i)}
                   >

app/components/Header.tsx

@@ -72,7 +72,7 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
       <div className={selectModal ? 'dropdown active' : 'dropdown'}>
         <div
           className={selectModal ? 'select disabled' : 'select'}
-          onClick={() => !selectModal ? dropdownClickHandler : () => {}}
+          onClick={() => (!selectModal ? dropdownClickHandler() : () => {})}
         >
           {service}
         </div>
@@ -91,16 +91,7 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
                 />
               </label>
             ))}
-            <label htmlFor="communications" className="select">
-              communications
-              <input
-                type="checkbox"
-                value={'communications'}
-                id={'communications'}
-                name={'communications'}
-                onChange={() => history.replace('communications')}
-              />
-            </label>
+
             <button className="service-button" onClick={handleServices}>
               {selectedServices.length === 0 && 'Select Service'}
               {selectedServices.length === 1 && 'Display Single'}