Merge pull request #9 from brunoportela/notificationAdjusts

brunoportela · web-flow · commit d0d19e9cf413 · 2021-05-11T10:38:34.000-07:00
live update and display error notifications based on last viewed database
diff --git a/app/charts/RequestTypesChart.tsx b/app/charts/RequestTypesChart.tsx
@@ -31,14 +31,14 @@ const RequestTypesChart: React.FC = React.memo(() => {
     let type;
     commsData.forEach((obj: IObject) => {
       type = obj.request;
-      console.log('L34:', type);
+      // console.log('L34:', type);
       if (type in requestTypes) {
         requestTypes[type] += 1;
       } else {
         requestTypes[type] = 0;
         requestTypes[type]++;
       }
-      console.log(requestTypes)
+      // console.log(requestTypes)
     });
 
     return (
@@ -53,7 +53,6 @@ const RequestTypesChart: React.FC = React.memo(() => {
             marker: {
               colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
             },
-            
           },
         ]}
         config={{
@@ -78,7 +77,7 @@ const RequestTypesChart: React.FC = React.memo(() => {
             x: 0.5,
             font: {
               size: 7,
-            }
+            },
           },
         }}
       />
diff --git a/app/charts/ResponseCodesChart.tsx b/app/charts/ResponseCodesChart.tsx
@@ -14,7 +14,7 @@ interface IObj {
 }
 
 type responseCodes = {
-  [key: string]: number
+  [key: string]: number;
 };
 
 const ResponseCodesChart: React.FC = React.memo(() => {
@@ -65,7 +65,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
       }
     });
 
-    console.log(responseCodes);
+    // console.log(responseCodes);
 
     return (
       <Plot
@@ -126,7 +126,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
             x: 0.5,
             font: {
               size: 7,
-            }
+            },
           },
         }}
       />
diff --git a/app/charts/RouteChart.jsx b/app/charts/RouteChart.jsx
@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useContext } from 'react';
-import { CommsContext } from '../context/CommsContext';
 import Graph from 'react-graph-vis';
+import { CommsContext } from '../context/CommsContext';
 
 const RouteChart = React.memo(() => {
   const communicationsData = useContext(CommsContext).commsData;
@@ -26,10 +26,10 @@ const RouteChart = React.memo(() => {
       resObj[element.correlatingid].push({
         microservice: element.microservice,
         time: element.time,
-        request: element.request, //here
+        request: element.request, // here
       });
     }
-    //? What does this else block do?
+    // ? What does this else block do?
   } else {
     for (let i = communicationsData.length - 1; i >= 0; i--) {
       const element = communicationsData[i];
@@ -49,7 +49,6 @@ const RouteChart = React.memo(() => {
     }
   }
 
-
   // Filter the array so that only subarrays w/ len > 1 are kept.
   // (len == 1 means there's only one point in the route. There's no meaningful data to be gained from those.)
   const tracePoints = Object.values(resObj).filter(subArray => subArray.length > 1);
@@ -72,26 +71,26 @@ const RouteChart = React.memo(() => {
   // ======Graphs logic =======//
   const nodeListObj = {};
   const edgeListObj = {};
-  for (let route of tracePoints) {
+  for (const route of tracePoints) {
     for (let i = 0; i < route.length; i += 1) {
       // check if node exists if not then add node
-      let id = route[i].microservice;
+      const id = route[i].microservice;
       if (nodeListObj[id] === undefined) {
-        nodeListObj[id] = { 
-          id: id, 
-          label: id
-        }
+        nodeListObj[id] = {
+          id,
+          label: id,
+        };
       }
       // add edge from node to node (repeat til end)
       if (i !== 0) {
-        let from = route[i - 1].microservice;
-        let to = id;
-        let request = route[i - 1].request; //here
-        let edgeStr = JSON.stringify({ from, to, request })
+        const from = route[i - 1].microservice;
+        const to = id;
+        const { request } = route[i - 1]; // here
+        const edgeStr = JSON.stringify({ from, to, request });
         let duration = new Date(route[i].time) - new Date(route[i - 1].time);
         // only want one edge per route with the average duration
         if (edgeListObj[edgeStr]) {
-          //? wrong math
+          // ? wrong math
           duration = (duration + edgeListObj[edgeStr]) / 2;
         }
         edgeListObj[edgeStr] = duration;
@@ -102,10 +101,12 @@ const RouteChart = React.memo(() => {
   // turn objects into valid arrays to input into graph
   const nodeList = Object.values(nodeListObj);
   const edgeList = [];
-  for (let [edgeStr, duration] of Object.entries(edgeListObj)) {
+  for (const [edgeStr, duration] of Object.entries(edgeListObj)) {
     const edge = JSON.parse(edgeStr);
-    console.log(edge.request)
-    edge.label = edge.request ? `${edge.request} - ${(duration * 10).toFixed(0)} ms` : `${(duration * 10).toFixed(0)} ms` 
+    // console.log(edge.request)
+    edge.label = edge.request
+      ? `${edge.request} - ${(duration * 10).toFixed(0)} ms`
+      : `${(duration * 10).toFixed(0)} ms`;
     edgeList.push(edge);
   }
 
@@ -120,12 +121,12 @@ const RouteChart = React.memo(() => {
       hierarchical: false,
     },
     edges: {
-      color: "#444d56",
+      color: '#444d56',
       physics: true,
       smooth: {
-        type: "curvedCCW",
-        forceDirection: "none",
-        roundness: 0.3
+        type: 'curvedCCW',
+        forceDirection: 'none',
+        roundness: 0.3,
       },
       font: {
         color: '#444d56',
@@ -141,27 +142,38 @@ const RouteChart = React.memo(() => {
         },
         highlight: {
           background: '#fc4039',
-        }
+        },
       },
       shape: 'circle',
       font: {
         color: '#ffffff',
         size: 10,
-        face: 'roboto'
+        face: 'roboto',
       },
-    }
-  }
+    },
+  };
 
   const events = {
-    select: function (event) {
-      let { nodes, edges } = event;
+    select(event) {
+      const { nodes, edges } = event;
     },
   };
 
   return (
-    <div className='traceContainer'>
-      <span id='tracesTitle'>Route Traces</span>
-      <Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontFamily: 'Roboto', boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)', backgroundColor: 'white', borderRadius: '3px' }} />
+    <div className="traceContainer">
+      <span id="tracesTitle">Route Traces</span>
+      <Graph
+        className={classes.paper}
+        graph={graph}
+        options={options}
+        events={events}
+        style={{
+          fontFamily: 'Roboto',
+          boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)',
+          backgroundColor: 'white',
+          borderRadius: '3px',
+        }}
+      />
     </div>
   );
 });
diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx
@@ -56,19 +56,15 @@ const Occupied = React.memo(() => {
   const [index, setIndex] = useState<number>(0);
   const [app, setApp] = useState<string>('');
   const [searchTerm, setSearchTerm] = useState<string>('');
+  const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z'); // init at year 2000
+
   // Dynamic refs
   const delRef = useRef<any>([]);
   useEffect(() => {
     setServicesData([]);
     getApplications();
-    // update communication data from last visited database
-    for (const app of applications) {
-      const temp = commsData;
-      const newComm = fetchCommsData('', true);
-      setCommsData([...temp, newComm])
-    }
   }, []);
-  
+
   // Ask user for deletetion confirmation
   const confirmDelete = (event: ClickEvent, app: string, i: number) => {
     const message = `The application '${app}' will be permanently deleted. Continue?`;
@@ -194,6 +190,19 @@ const Occupied = React.memo(() => {
   }));
 
   let classes = (mode === 'light mode')? useStylesLight({} as StyleProps) : useStylesDark({} as StyleProps) ;
+
+  // update notification count based on statuscode >= 400
+  const notification = commsData.filter((item: { responsestatus: number; }) => item.responsestatus >= 400)
+                                .filter((item: { time: string; }) => {
+                                  const d1 = new Date(item.time);
+                                  const d2 = new Date(clickedAt);
+                                  return d1 > d2;
+                                });
+
+  const updateNotification = () => {
+    const timestamp = new Date();
+    setClickedAt(timestamp.toISOString())
+  }
   return (
     <div className="entireArea">
       <div className="dashboardArea">
@@ -222,10 +231,10 @@ const Occupied = React.memo(() => {
             </div>
 
             
-              <div className="notificationsIconArea">
-                <span className="notificationsTooltip">You have {commsData.length} new alerts</span>
+              <div className="notificationsIconArea" onClick={updateNotification}>
+                <span className="notificationsTooltip">You have {notification ? notification.length : 0} new alerts</span>
                     < NotificationsIcon className="navIcon" id="notificationsIcon" />
-                    <Badge badgeContent={commsData.length} color="secondary"/>
+                    <Badge badgeContent={notification ? notification.length : 0} color="secondary"/>
               </div>
             
 
