working version, communications now working, no glitches

Author: lu0713

app/charts/RouteChart.jsx app/charts/RouteCopy.jsxapp/charts/RouteChart.jsx renamed to app/charts/RouteCopy.jsx

@@ -1,22 +1,22 @@
-import React, { useContext, useEffect } from 'react';
+import {
+  IconButton,
+  Modal,
+  Card,
+  CardHeader,
+  CardContent,
+  Button,
+  Typography
+} from '@material-ui/core';
+import { Theme, makeStyles } from '@material-ui/core/styles';
+import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+import React, { useContext } from 'react';
 // import OverviewContext from '../context/OverviewContext';
 import { CommsContext } from '../context/CommsContext';
 // import { log } from 'console';
 import Graph from 'react-graph-vis';
 
 const RouteLocations = props => {
   const communicationsData = useContext(CommsContext).commsData;
-  
-  useEffect(() => {
-    const parentNode = document.querySelector('div.chart');
-    const childNode = document.querySelectorAll('canvas')[0];
-    if (parentNode && childNode) {
-      parentNode.append(childNode);
-      childNode.id = `canvasGraph`
-    }
-    return childNode;
-  })
-
   console.log('commdata=======>', communicationsData);
   console.log('try again');
 
@@ -88,19 +88,63 @@ const RouteLocations = props => {
   const tracePoints = Object.values(resObj).filter(subArray => subArray.length > 1);
   console.log('tracepoints =======>', tracePoints);
 
+  const useStyles = makeStyles(theme => ({
+    paper: {
+      height: 280,
+      width: 280,
+      textAlign: 'center',
+      color: '#888888',
+      whiteSpace: 'nowrap',
+      backgroundColor: '#ffffff',
+      borderRadius: 8,
+      border: '0',
+      boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
+      '&:hover, &.Mui-focusVisible': {
+        backgroundColor: `#ccd8e1`,
+        color: '#ffffff',
+      },
+    },
+    hover: {
+      boxShadow: 'none',
+      color: 'transparent'
+    },
+    btnStyle: {
+      position: 'absolute',
+      top: -10,
+      left: -10,
+      margin: '0',
+      color: '#eeeeee',
+      borderRadius: '0',
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'none'
+      }
+    },
+    icon: {
+      width: '75px',
+      height: '75px',
+      boxShadow: 'none',
+    },
+  }));
+  const classes = useStyles({});
+
+
+
+  // ======Graphs logic =======//
   const nodeListObj = {};
   const edgeList = [];
   for (let route of tracePoints) {
     for (let i = 0; i < route.length; i += 1) {
+      const colors = ['#75b6d7', '#cc000', '#fce356', '#888888', '#ccd8e1']
       // check if node exists if not then add node
       let id = route[i].microservice
       if (nodeListObj[id] === undefined) {
-        nodeListObj[id] = { id: id, label: id, color: '#e04141' }
+        nodeListObj[id] = { id: id, label: id, color: { background: '#24d2f1', border: 'white', hover: { background: '#4d55ec', border: 'white' } }, shape: 'circle' }
       }
       // add edge from node 1 to node 2 (repeat til end)
       if (i !== 0) {
-        let duration = new Date(route[i].time) - new Date(route[i-1].time);
-        let edge = { from: route[i - 1].microservice, to: id, label: `${duration} ms`}
+        let duration = new Date(route[i].time) - new Date(route[i - 1].time);
+        let edge = { from: route[i - 1].microservice, to: id, label: `${duration * 100} ms` }
         edgeList.push(edge)
       }
     }
@@ -124,15 +168,20 @@ const RouteLocations = props => {
   //   edges: [{ from: 4, to: 2, label: 'hello' }, { from: 'one', to: 3 }, { from: 2, to: 4 }, { from: 2, to: 5 }]
   // };
   const options = {
+
+    height: '400px',
+    width: '400px',
+    style: 'surface',
     layout: {
       hierarchical: false
     },
     edges: {
       color: "#000000",
-      physics: false,
+      physics: true,
       smooth: {
         type: "curvedCCW",
-        forceDirection: "none"
+        forceDirection: "none",
+        roundness: 0.3
       }
     },
   };
@@ -147,10 +196,11 @@ const RouteLocations = props => {
     }
   };
 
-  
+
   return (
-    <div className="chart">
-      <Graph id="visGraph" graph={graph} options={options} events={events} style={{ height: "640px" }} />
+    <div className='traceContainer'>
+      <span id='trace'>Traces</span>
+      <Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontSize: '8px', color: '#555555', fontFamily: 'Open Sans', boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', backgroundColor: 'white' }} />
     </div>
   );
 };

app/components/About.tsx

@@ -5,25 +5,25 @@ const About: React.FC = () => {
   return (
     <div className="home">
       <div className="blurb">
-        <h3 className="para">About</h3>
-        <p className="para">
+        <h3 className="mainTitle">About</h3>
+        <p className="text">
           The Chronos Team has always had passion for Open Source endeavors that would greatly benefit
           the developer community. With many existing paid options being difficult to use and expensive to operate, Chronos was
           born. Chronos is an all-in-one network and health monitoring tool for your application or
           microservice, containerized or not!
         </p>
         <div className="doya">
-          <h3 className="para">Team Doya</h3><span id="sproutSpan"><img className="sprout" src="../assets/clean-sprout.gif" alt="sprout"></img></span>
+          <h3 className="title">Team Doya</h3><span><img className="sprout" id="sproutSpan" src="../assets/clean-sprout.gif" alt="sprout"></img></span>
           <br/>
           <div>
-            <span className="para">Grace </span><br />
-            <span className="para">Jen </span><br />
-            <span className="para">Patty </span><br />
-            <span className="para">Stella </span><br /><br />
+            <span className="text">Grace </span><br />
+            <span className="text">Jen </span><br />
+            <span className="text">Patty </span><br />
+            <span className="text">Stella </span><br /><br />
           </div>
         </div>
-        <h3 className="para">Contributors</h3>
-        <p className="para">Michael, Ronelle, Todd, Greg
+        <h3 className="title">Contributors</h3>
+        <p className="text">Michael, Ronelle, Todd, Greg
         Brianna, Brian, Alon, Alan
         Ousman, Ben, Chris, Jenae, Tim</p>
       </div>

app/components/Contact.tsx

@@ -33,8 +33,7 @@ const Contact: React.FC = () => {
             <label htmlFor="subject">Subject: &nbsp;</label>
             <input type="text" id="subject" name="subject" placeholder="Subject" />
             <br />
-            <label htmlFor="message">Message: 
-              <span>
+            <label id="messageLabel" htmlFor="message">Message: <span>
                 <textarea id="message" name="message" placeholder="Write something.."></textarea>
               </span>
             </label>

app/components/Copyright.tsx

@@ -15,7 +15,7 @@ const Copyright = () => {
   }))
   const classes = useStyles();
   return (
-  <Typography className={classes.copyright} variant="body2" color="textSecondary" align="center">
+  <Typography className={classes.copyright} variant="body2" align="center">
     {'Copyright © '}
     <Link color="inherit" href="https://chronoslany.com/" target="_blank">
       Team Chronos

app/components/Header.tsx

@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
-import { useHistory } from 'react-router-dom';
-import ListIcon from '@material-ui/icons/Search';
+import { useHistory, Link } from 'react-router-dom';
+import ListIcon from '@material-ui/icons/List';
 import { ApplicationContext } from '../context/ApplicationContext';
 import '../stylesheets/Header.scss';
-import '../stylesheets/Occupied.scss';
 
 export interface HeaderProps {
   app: string[];
@@ -30,8 +29,14 @@ const Header: React.SFC<HeaderProps> = ({ app, service, setLive, live }) => {
           communications
         </option>
       </select>
-      <div className="header-btns">
-        <button onClick={() => history.goBack()}><ListIcon className="icon" id="returnToAppIcon" />Return to Applications</button>
+      <div className="header">
+        <Link className="link" id="return" to="/applications">
+          <span>
+            <ListIcon className="icon" id="returnIcon" />
+          </span>
+          <p id="returnToDash">Dashboard</p>
+        </Link>
+        {/* <button id="returnButton" onClick={() => history.goBack()}><ListIcon className="icon" id="returnIcon" /></button> */}
         <button onClick={() => setLive(!live)}>
           {live ? (
             <div>

app/components/Occupied.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState, useRef } from 'react';
+import React, { useContext, useEffect, useState, useRef, forwardRef } from 'react';
 
 // MATERIAL UI METHODS
 import {
@@ -39,13 +39,13 @@ interface StyleProps {
 };
 type ClickEvent = React.MouseEvent<HTMLElement>;
 
-const Occupied: React.FC = () => {
+const Occupied: React.FC = React.memo(function Occupied (props) {
   const { applications, getApplications, deleteApp } = useContext(DashboardContext);
   const [open, setOpen] = useState<boolean>(false);
   const [addOpen, setAddOpen] = useState<boolean>(false);
   const [index, setIndex] = useState<number>(0);
   const [app, setApp] = useState<string>('');
-  
+  const [searchTerm, setSearchTerm] = useState<string>('Search...');
   // Dynamic refs
   const delRef = useRef<any>([]);
 
@@ -108,18 +108,9 @@ const Occupied: React.FC = () => {
   }));
 
   const classes = useStyles({} as StyleProps);
-  
-  // function append(parent:any, child:any) {
-  //   const parentNode: HTMLElement = document.querySelector(parent);
-  //   const childNode: HTMLElement = document.querySelector(child);
-  //   return parentNode.append(childNode);
-  // };
 
   return (
-    
     <div className="entireArea">
-      <div className="sidebarArea">
-      </div>
       <div className="dashboardArea">
         <header className="mainHeader">
           <section className="header" id="leftHeader">
@@ -129,7 +120,7 @@ const Occupied: React.FC = () => {
           <section className="header" id="rightHeader">
             <form className="form">
               <label className="inputContainer">
-                <input className="form" id="textInput" value="Search..." type="text" name="search" />
+                <input className="form" id="textInput" placeholder={searchTerm} onChange={e => setSearchTerm(e.target.value)} type="text" name="search" />
                 <hr />
               </label>
               <button className="form" id="submitBtn" type="submit">
@@ -149,7 +140,7 @@ const Occupied: React.FC = () => {
             </Button>
           </div>
           {applications.map((app: string[], i: number | any | string | undefined) => (
-            <div className="card" id={`card-${i}`}>
+            <div className="card" key={`card-${i}`} id={`card-${i}`}>
               <Card
                 key={`card-${i}`}
                 className={classes.paper}
@@ -178,12 +169,12 @@ const Occupied: React.FC = () => {
             <AddModal setOpen={setAddOpen} />
           </Modal>
           <Modal open={open} onClose={() => setOpen(false)}>
-            <ServicesModal i={index} app={app} />
+            <ServicesModal key={`key-${index}`} i={index} app={app} />
           </Modal>
         </div>
       </div>
     </div>
   );
-};
+});
 
 export default Occupied;

app/components/Settings.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 const Settings: React.FC = () => {
   return (
     <div className="home">
-      <p>Contact the Chronos Team for anything you'd like to see</p>
+      <p id="settings"></p>
     </div>
   );
 };

app/containers/GraphsContainer.tsx

@@ -14,7 +14,7 @@ import RequestTypesChart from '../charts/RequestTypesChart';
 import ResponseCodesChart from '../charts/ResponseCodesChart';
 import TrafficChart from '../charts/TrafficChart';
 import DockerChart from '../charts/DockerChart';
-import RouteChart from '../charts/RouteChart';
+import RouteCopy from '../charts/RouteCopy';
 import '../stylesheets/GraphsContainer.scss';
 
 export interface Params {
@@ -32,7 +32,7 @@ export interface GraphsContainerProps {
 }
 
 const GraphsContainer: React.SFC<GraphsContainerProps> = () => {
-  const { app, service } = useParams();
+  const { app, service } = useParams<any>();
   const [live, setLive] = useState<boolean>(false);
   const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
 
@@ -73,19 +73,19 @@ const GraphsContainer: React.SFC<GraphsContainerProps> = () => {
             <RequestTypesChart />
             <ResponseCodesChart />
             <TrafficChart />
-            <RouteChart />
+            <RouteCopy />
           </div>
         ) : (
-          <div className="graphs">
-            <SpeedChart />
-            <TemperatureChart />
-            <LatencyChart />
-            <MemoryChart />
-            <ProcessesChart />
-            <DockerChart />
-            {/* <RouteChart /> */}
-          </div>
-        )}
+            <div className="graphs">
+              <SpeedChart />
+              <TemperatureChart />
+              <LatencyChart />
+              <MemoryChart />
+              <ProcessesChart />
+              <DockerChart />
+              {/* <RouteCopy /> */}
+            </div>
+          )}
       </div>
     </>
   );

app/containers/SidebarContainer.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import HomeSharpIcon from '@material-ui/icons/HomeSharp';
+import ListIcon from '@material-ui/icons/List';
 import InfoIcon from '@material-ui/icons/Info';
 import ContactSupportIcon from '@material-ui/icons/ContactSupport';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -45,6 +46,15 @@ const SidebarContainer: React.FC = (): JSX.Element => (
             }} />
            Home
         </Link>
+        <Link className="sidebar-link" to="/applications" id="dash">
+          <ListIcon style={{
+            WebkitBoxSizing: 'content-box',
+            boxShadow: 'none',
+            width: '35px',
+            height: '35px',
+          }} />
+          &emsp;Dashboard
+        </Link>
         <Link className="sidebar-link" to="/about" id="about">
           <InfoIcon style={{
             WebkitBoxSizing: 'content-box',