refactoring fetch health data

Author: mdtagg

app/components/GraphNavBar/GraphNavBar.tsx

@@ -4,7 +4,6 @@ import { ApplicationContext } from '../../context/ApplicationContext'
 import { QueryContext } from '../../context/QueryContext'
 import { CommsContext } from '../../context/CommsContext'
 import { HealthContext } from '../../context/HealthContext'
-import { Link } from 'react-router-dom';
 
 const GraphNavBar = (props) => {
 
@@ -18,6 +17,7 @@ const GraphNavBar = (props) => {
   const navigate = useNavigate();
 
   const routing = (route: string) => {
+    console.log({servicesData})
     if (location.href.includes('communications')) {
       if (prevRoute === '') navigate(`${servicesData[0].microservice}`);
       else navigate(prevRoute);
@@ -50,7 +50,8 @@ const GraphNavBar = (props) => {
         );
       });
     }
-
+    // console.log(selectedMetrics)
+    // console.log(buttonList)
     return buttonList;
   };
 

app/components/TransferColumns.tsx

@@ -16,7 +16,9 @@ interface Params {
 
 const TransferColumns = React.memo(() => {
   const [targetKeys, setTargetKeys] = useState<any[]>([]);
+  // console.log({targetKeys})
   const [metricsPool, setMetricsPool] = useState<any[]>([]);
+  // console.log({metricsPool})
   const [healthMetricsReady, setHealthMetricsReady] = useState(false);
   const [healthMetrics, setHealthMetrics] = useState<any[]>([]);
   const [eventMetricsReady, setEventMetricsReady] = useState(false);
@@ -34,6 +36,7 @@ const TransferColumns = React.memo(() => {
 
   useEffect(() => {
     if (healthData) {
+      console.log({healthData})
       setHealthMetricsReady(true);
     }
   }, [healthData]);
@@ -122,9 +125,10 @@ const TransferColumns = React.memo(() => {
   };
 
   const createSelectedMetricsList = () => {
+
     const temp: any[] = [];
     const categorySet = new Set();
-    // console.log('Inside TransferColumns.txs line 124 targetKeys: ', targetKeys)
+
     for (let i = 0; i < targetKeys.length; i++) {
       const str: string = targetKeys[i];
       const strArr: string[] = str.split(' | ');
@@ -209,6 +213,7 @@ const TransferColumns = React.memo(() => {
             checkboxSelection
             disableSelectionOnClick
             onSelectionModelChange={metricIndeces => {
+              console.log({metricIndeces})
               const metrics: any[] = [];
               metricIndeces.forEach(el => {
                 metrics.push(metricsPool[el].key);

app/containers/GraphsContainer/GraphsContainer.tsx

@@ -102,7 +102,12 @@ const GraphsContainer: React.FC = React.memo(() => {
         inspect={inspect}
         setInspect={setInspect}
       />
-      <Header app={app} service={service} live={live} setLive={setLive} />
+      <Header 
+        app={app} 
+        service={service} 
+        live={live} 
+        setLive={setLive} 
+      />
 
       {inspect && <Inspect />}
 

app/context/HealthContext.tsx

@@ -34,6 +34,7 @@ interface HealthDataObject {
 const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
   const [healthData, setHealthData] = useState<any>({ healthDataList: [], healthTimeList: [] });
   const [services, setServices] = useState<Array<string>>([]);
+  console.log({services})
 
   function tryParseJSON(jsonString: any) {
     try {
@@ -55,46 +56,46 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
    */
 
   const fetchHealthData = useCallback(async servers => {
-    ipcRenderer.removeAllListeners('healthResponse');
+    // ipcRenderer.removeAllListeners('healthResponse');
 
     let temp: HealthDataObject[] = [];
     await Promise.all(servers.map( async (service: string) => {
-      //NOT WORKING HERE
+      ipcRenderer.removeAllListeners('healthResponse');
+      
       try {
         const newPromise: any = await new Promise((resolve, reject) => {
           ipcRenderer.send('healthRequest', `${service}`);
           ipcRenderer.on('healthResponse', (event: Electron.Event, data: string) => {
-            let result: object[];
-            // console.log({data})
-            if (JSON.stringify(data) !== '{}' && tryParseJSON(data)) {
-              result = JSON.parse(data);
-              // console.log({result})
-              // console.log('HealthContext.tsx line 68 result: ', result, 'service', service, 'Obj key', Object.keys(result[0])[0]);
+            //V14: the line does not appear necessary, leaving it here commented out in case another group runs into a problem
+            // if (JSON.stringify(data) !== '{}' && tryParseJSON(data)) {
+              const response = JSON.parse(data);
+              // console.log({response})
+              const [ dbName ] = Object.keys(response[0])
               //result exists, has a length prop, and the service name and database name are same
-              if (result && result.length && `${service}` === Object.keys(result[0])[0]) {
-                resolve(result[0]);
+              console.log({service,dbName})
+              //V14: this block is needed here because of unecessary calls for each service
+              //a prior group was getting the dbName from the response object and since objects dont remember
+              //insertion order they are running all the calls for each service in the array
+              if (response && response.length && `${service}` === dbName) {
+                resolve(response[0]);
               }
-            }
+            // }
           });
         })
         temp.push(newPromise);
-        // console.log('HealthContext.tsx line 80 temp populates?: ', temp, serv)
         if (checkServicesComplete(temp, [`${service}`])) {
+          console.log({temp})
+
           setServices([`${service}`]);
           let transformedData: any = {};
-          // console.log('original healthData before transformation: ', temp);
-          // transformedData = {
-          //   healthDataList: [1,2,3,4,5],
-          //   healthTimeList: [1,2,3,4,5]
-          // } //testing typescript, transformedDATA of type 2 arrays with basic entries?
           transformedData = healthTransformer(temp); //must match the setHealthData STATE format
-          // console.log('healthData after tranformation: ', transformedData);
           setHealthData(transformedData);
         }
         } catch (err) {
-        // console.log("healthcontext.tsx ERROR: ", err);
+        console.log("healthcontext.tsx ERROR: ", err);
       };
     }
+   
     ))
     } , []);
 
@@ -104,9 +105,9 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
     }
     const arr1: string[] = [];
     for (let i = 0; i < temp.length; i++) {
-      arr1.push(Object.keys(temp[i])[0]);
+      const [ serviceName ] = Object.keys(temp[i])
+      arr1.push(serviceName);
     }
-    // console.log('in checkServicesComplete line 139: ', arr1);
     return arr1.sort().toString() === servers.sort().toString();
   };
 

app/context/helpers.ts

@@ -44,6 +44,7 @@ export function healthTransformer(healthData: HealthDataObject[]) {
     // grab the key string from the current service object
     const serviceName = Object.keys(serviceObj)[0];
     const serviceElements = serviceObj[serviceName];
+    console.log(serviceObj)
     // console.log('serviceElements: ', serviceElements);
     // add the serviceName as a key on the serviceMetricsObject and assign it an empty object
     serviceMetricsObject[serviceName] = {};

app/index.scss

@@ -153,19 +153,12 @@ body {
 button {
   font-size: 90%;
   padding: 6px;
-  // border: thin solid #24262f;
   border-radius: 3px;
-  // background-color: #484e63;
   color: #fff;
-  // min-width: 105px;
   transition: 0.2s;
   cursor: pointer;
 }
 
-button:hover {
-  // background-color: #24262f;
-}
-
 // scrollBar styling
 
 /* width */

examples/docker/auth/src/app.ts

@@ -7,7 +7,7 @@ import eventRouter from './routes/event-router';
 import { NotFoundError, errorHandler } from '@chronosrx/common';
 
 import chronosConfig from './chronos-config';
-const Chronos = require('@chronosmicro/tracker');
+const Chronos = require('../chronos_npm_package/chronos.js');
 const chronos = new Chronos(chronosConfig);
 
 chronos.propagate();

examples/docker/auth/src/chronos-config.ts

@@ -19,7 +19,7 @@ const chronosConfig = {
     type: process.env.CHRONOS_DB,
     URI: process.env.CHRONOS_URI,
   },
-  grafanaAPIKey: Bearer process.env.CHRONOS_GRAFANA_API_KEY,
+  grafanaAPIKey: process.env.CHRONOS_GRAFANA_API_KEY,
   notifications: [],
 };
 export default chronosConfig;

examples/docker/client/src/server.js

@@ -4,7 +4,7 @@ const express = require('express');
 const PORT = 5001;
 
 const chronosConfig = require('./chronos-config');
-const Chronos = require('@chronosmicro/tracker');
+const Chronos = require('../chronos_npm_package/chronos.js');
 const chronos = new Chronos(chronosConfig);
 
 chronos.propagate();