Merge pull request #8 from xkiso/master

Fix latency issue with communications

Author: lu0713

app/components/Occupied.tsx

@@ -69,6 +69,7 @@ const Occupied: React.FC = React.memo(function Occupied (props) {
     if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
       setIndex(i);
       setApp(selectedApp);
+      setServicesData([]);
       setOpen(true);
     }
   };

app/containers/GraphsContainer.tsx

@@ -31,7 +31,7 @@ export interface GraphsContainerProps {
   };
 }
 
-const GraphsContainer: React.SFC<GraphsContainerProps> = () => {
+const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(function GraphsContainer (props) {
   const { app, service } = useParams<any>();
   const [live, setLive] = useState<boolean>(false);
   const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
@@ -88,6 +88,6 @@ const GraphsContainer: React.SFC<GraphsContainerProps> = () => {
       </div>
     </>
   );
-};
+});
 
 export default GraphsContainer;

app/context/CommsContext.tsx

@@ -16,13 +16,14 @@ const CommsContextProvider: React.FC = ({ children }) => {
   const [currentApp, setCurrentApp] = useState('');
 
   // Fetches all data related to communication for a particular app
-  const fetchCommsData = (app: string, live: boolean) => {
+  const fetchCommsData = React.useCallback((app: string, live: boolean) => {
     /**
      * Caches results of requesting communication data for a specific app
      * Communication data will be the same across the microservices. Prevents
      * fetch requests that result in repeating data 
      */
     if (app !== currentApp || live) {
+      ipcRenderer.removeAllListeners('commsResponse');
       setCurrentApp(app)
       ipcRenderer.send('commsRequest', app);
       ipcRenderer.on('commsResponse', (event: Electron.Event, data: any) => {
@@ -32,7 +33,7 @@ const CommsContextProvider: React.FC = ({ children }) => {
         setCommsData(result);
       });
     }
-  };
+  }, []);
 
   return (
     <CommsContext.Provider value={{ commsData, setCommsData, fetchCommsData }}>

app/context/DockerContext.tsx

@@ -18,6 +18,7 @@ const DockerContextProvider: React.FC = ({ children }) => {
 
   // Fetches all data related to a particular app
   const fetchDockerData = (service: string) => {
+    ipcRenderer.removeAllListeners('dockerResponse');
     ipcRenderer.send('dockerRequest', service);
 
     ipcRenderer.on('dockerResponse', (event: Electron.Event, data: any) => {

app/context/HealthContext.tsx

@@ -15,6 +15,7 @@ const HealthContextProvider: React.FC = ({ children }) => {
 
   // Fetches all data related to a particular app
   const fetchHealthData = (service: string) => {
+    ipcRenderer.removeAllListeners('healthResponse');
     ipcRenderer.send('healthRequest', service);
     ipcRenderer.on('healthResponse', (event: Electron.Event, data: any) => {
       let result: any;

electron/user/settings.json

@@ -8,26 +8,12 @@
       "Online bookstore with that keeps track of orders and customers",
       "Jun 28, 2020 4:58 PM"
     ],
-    [
-      "myMongo",
-      "MongoDB",
-      "mongodb+srv://chronos:[email protected]/chronos?retryWrites=true&w=majority",
-      "E-commerce website for buying and selling clothes",
-      "Jul 01, 2020 10:33 PM"
-    ],
     [
       "ToddDB",
       "MongoDB",
       "mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority",
       "Web app deployed on AWS",
       "Jul 3, 2020 7:12AM"
-    ],
-    [
-      "pattyDB",
-      "MongoDB",
-      "mongodb+srv://chronos:[email protected]/chronos?retryWrites=true&w=majority",
-      "dummy microservice: books/customer/orders/reverse-proxy",
-      "Jul 3, 2020 11:12AM"
     ]
   ],
   "splash": true

package.json

@@ -13,7 +13,7 @@
     "test:electron": "jest --detectOpenHandles ./__tests__/electron/*",
     "test:app": "jest ./__tests__/app/*",
     "both": "npm run start & sleep 5 && npm run electron",
-    "both:tsc": "nodemon --watch ./app & npm run start & sleep 5 && npm run electron",
+    "both:tsc": "nodemon --watch ./app & (npm run start && sleep 5 && npm run electron)",
     "both:dev": "npm run start & nodemon --watch ./electron --exec 'npm run electron'",
     "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
     "create-installer-mac": "electron-installer-dmg ./release-builds/chronos-darwin-x64/chronos.app/ Chronos",