finish front-end (not communication)

Author: curiousyang

app/components/Header.tsx

@@ -65,7 +65,7 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
       <h1 className="microserviceTitle">{app}</h1>
 
       {selectModal && <div className="filter" onClick={dropdownClickHandler}></div>}
-
+      <div><span>select services to display</span></div>
       <div className={selectModal ? 'dropdown active' : 'dropdown'}>
         <div
           className={selectModal ? 'select disabled' : 'select'}

app/components/TransferColumns.tsx

@@ -8,7 +8,7 @@ import { QueryContext } from '../context/QueryContext';
 import { HealthContext } from '../context/HealthContext';
 import { EventContext } from '../context/EventContext';
 import AvQueuePlayNext from 'material-ui/svg-icons/av/queue-play-next';
-import { useIsMount } from '../context/helpers';
+
 
 const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
   <Transfer {...restProps}>
@@ -80,7 +80,7 @@ const TransferColumns = React.memo(() => {
 
   const eventDataList = eventData.eventDataList;
   const healthDataList = healthData.healthDataList;
-  const isMount = useIsMount();
+
 
   useEffect(()=>{
     if(healthDataList && healthDataList.length >0){
@@ -111,9 +111,7 @@ const TransferColumns = React.memo(() => {
 
 
   useEffect(()=>{
-    // if(isMount){//skip first render
-    //   return;
-    // }
+
     console.log("current service:", service);
     console.log("healthData in else:", healthDataList.length);
     console.log("eventData in else:", eventDataList.length);
@@ -128,7 +126,7 @@ const TransferColumns = React.memo(() => {
       if(eventDataList && eventDataList.length >0){
         setMetricsPool(getMetrics('event',eventDataList));
       }
-      else{
+      else if(eventMetricsReady){
         setMetricsPool(eventMetrics);
       }
 
@@ -142,9 +140,6 @@ const TransferColumns = React.memo(() => {
       else if(healthMetricsReady){
         setMetricsPool(healthMetrics);
       }
-      else{
-        return;
-      }
 
     }
     else{
@@ -158,13 +153,10 @@ const TransferColumns = React.memo(() => {
         console.log("set concat metrics:", JSON.stringify(eventMetrics.concat(healthMetrics)));
         setMetricsPool(eventMetrics.concat(healthMetrics));
       }
-      
-      console.log("here");
-      
-     
     }
 
-  },[service, healthMetricsReady, eventMetricsReady])
+  // },[service, healthMetricsReady, eventMetricsReady])
+},[service, eventData, healthData])
 
   const getMetrics = (type, datalist) =>{
     let pool: any[] = [];
@@ -285,7 +277,7 @@ const TransferColumns = React.memo(() => {
         rightColumns={rightTableColumns}
         listStyle={{
           width: 700,
-          height: 700,
+          height: 1000,
         }}
       />
       <Switch

app/context/HealthContext.tsx

@@ -42,38 +42,34 @@ const HealthContextProvider: React.FC = React.memo(({ children }) => {
 
     Promise.all(
       serv.map((service: string) =>{
-        // if(service !== 'kafkametrics'){
+
 
         return new Promise((resolve, reject) => {
-       //   console.log('serv in healthcontext:', JSON.stringify(serv));
+ 
           ipcRenderer.send('healthRequest', service);
           ipcRenderer.on('healthResponse', (event: Electron.Event, data: string) => {
-
+            console.log("data in healthcontext:", JSON.stringify(data));
             let result: any[];
-            if (tryParseJSON(data)) {
-        //      console.log("data in HealthContext:", data);
+            if (JSON.stringify(data) !== '{}' && tryParseJSON(data)) {
               result = JSON.parse(data);
               if (result && result.length && service === Object.keys(result[0])[0]) {
-       //         console.log("in the resolve!!");
+
                 resolve(result[0]);
               }
             }
+           
 
           });
 
         }).then((dt: any) => {
 
             temp.push(dt);
-          //  console.log("temp is:", JSON.stringify(temp));
 
           if (checkServicesComplete(temp, serv)) {
 
             setServices(serv);
             let transformedData : any = {};
             transformedData = transformData(temp);
-          //  console.log("temp", temp);
-          //  console.log("serv", serv);
-          //  console.log('transformedData:', JSON.stringify(transformedData));
             setHealthData(transformedData);
 
           }