resolved conflicts from dev

Author: hann7

app/charts/EventChart.tsx

@@ -7,7 +7,7 @@ import { all, solo as soloStyle } from './sizeSwitch';
 interface EventChartProps {
   key: string;
   metric: string;
-  timeList: any[];
+  timeList: any;
   valueList: any;
   sizing: string;
   colourGenerator: Function;
@@ -22,7 +22,8 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
   const { metric, timeList, valueList, sizing, colourGenerator } = props;
 //  console.log('in event chart:');
  // console.log('metric:', metric);
-  // console.log(JSON.stringify(timeList), JSON.stringify(valueList));
+  // console.log(JSON.stringify(timeList))
+  // console.log(JSON.stringify(valueList));
 
   const [solo, setSolo] = useState<SoloStyles | null>(null);
 

app/components/TransferColumns.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect, useRef } from 'react';
+import { useIsMount } from '../context/helpers';
 import 'antd/dist/antd.less';
 import { Switch, Table, Tag, Transfer, Button } from 'antd';
 import { PoweroffOutlined } from '@ant-design/icons';
@@ -63,13 +64,15 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
 
 const TransferColumns = React.memo(() => {
   const [targetKeys, setTargetKeys] = useState([]);
+  const [metricsPool, setMetricsPool] = useState<any[]>([]);
+  const [listReady, setListReady] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [showSearch, setShowSearch] = useState(true);
   const { setSelectedMetrics } = useContext(QueryContext);
-  // const {category_service_datalist} = useContext(HealthContext);
-  //const { datalist } = useContext(EventContext);
+  // const {datalist} = useContext(HealthContext);
+  const { eventDataList } = useContext(EventContext);
 
-  const category_service_datalist = [
+  const datalist = [
     {
       Memory: [
         { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] },
@@ -80,29 +83,10 @@ const TransferColumns = React.memo(() => {
       CPU: [{ books: [{ cpu_temp: [100, 200] }] }, { orders: [{ cpu_temp: [150, 250] }] }],
     },
   ];
-  const datalist = [
-    {
-      Event: [
-        {
-          books: [
-            { broker_metric1: [10, 20] },
-            { broker_metric2: [8, 16] },
-            { broker_metric3: [8, 16] },
-          ],
-        },
-        {
-          orders: [
-            { broker_metric1: [5, 25] },
-            { broker_metric2: [7, 14] },
-            { broker_metric3: [8, 16] },
-          ],
-        },
-      ],
-    },
-  ];
 
-  const appendMetrics = (datalist, metricsPool) => {
-    if (datalist) {
+  const appendMetrics = (eventDataList, datalist) => {
+    let pool: any[] = [];
+    if (datalist && datalist.length > 0) {
       datalist.forEach(category => {
         const tag: string = Object.keys(category)[0]; //Memory
         const serviceObj: {} = category[tag][0]; // { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] }
@@ -113,19 +97,44 @@ const TransferColumns = React.memo(() => {
           const temp = {};
           const metricName: string = Object.keys(element)[0];
           const key = tag + ' | ' + metricName;
-          const title = key;
           temp['key'] = key;
-          temp['title'] = title;
+          temp['title'] = key;
           temp['tag'] = tag;
-          metricsPool.push(temp);
+          pool.push(temp);
         });
       });
+
     }
-    return metricsPool;
+    if (eventDataList && eventDataList.length > 0) {
+      eventDataList.forEach(metric => {
+        const temp = {};
+        const metricName: string = Object.keys(metric)[0];
+        const key = 'Event | ' + metricName;
+        temp['key'] = key;
+        temp['title'] = key;
+        temp['tag'] = 'Event';
+        pool.push(temp);
+      });
+
+    }
+
+    setMetricsPool(pool);
   };
-  let metricsPool = [];
-  metricsPool = appendMetrics(category_service_datalist, metricsPool);
-  metricsPool = appendMetrics(datalist, metricsPool);
+
+  useEffect(() => {
+    if (datalist && datalist.length >0  && eventDataList && eventDataList.length > 0) {
+      setListReady(true);
+    }
+  }, [datalist, eventDataList]);
+
+
+  const isMount = useIsMount();
+
+  useEffect(() => {
+    if (!isMount) {
+      appendMetrics(eventDataList, datalist);
+    }
+  }, [listReady]);
 
   const leftTableColumns = [
     {
@@ -147,7 +156,6 @@ const TransferColumns = React.memo(() => {
 
   const onChange = nextTargetKeys => {
     setTargetKeys(nextTargetKeys);
-    console.log('nextTargetKeys', nextTargetKeys);
   };
 
   const triggerDisable = checked => {
@@ -157,45 +165,43 @@ const TransferColumns = React.memo(() => {
   const triggerShowSearch = checked => {
     setShowSearch(checked);
   };
-  const handleClick = ()=>{
+  const handleClick = () => {
     //setSelectedMetrics
     const temp: any[] = [];
     const categorySet = new Set();
-    for(let i = 0; i < targetKeys.length; i++){
-      let str : string = targetKeys[i];
-      const strArr : string[] = str.split(' | ');
+    for (let i = 0; i < targetKeys.length; i++) {
+      let str: string = targetKeys[i];
+      const strArr: string[] = str.split(' | ');
       const categoryName = strArr[0];
       const metricName = strArr[1];
-      if(categorySet.has(categoryName)){
+      if (categorySet.has(categoryName)) {
         temp.forEach(element => {
-          if(Object.keys(element)[0] === categoryName){
+          if (Object.keys(element)[0] === categoryName) {
             const metricsList: any[] = element[categoryName];
             metricsList.push(metricName);
           }
         });
-      }
-      else{
+      } else {
         categorySet.add(categoryName);
         const newCategory = {};
         newCategory[categoryName] = [metricName];
         temp.push(newCategory);
       }
     }
     setSelectedMetrics(temp);
-  }
+  };
 
   return (
     <>
       <Button
         type="primary"
         onClick={handleClick}
-        shape = 'round'
-        size = 'middle'
+        shape="round"
+        size="middle"
         style={{
           marginLeft: 16,
           marginTop: 330,
-          float: 'right'
-         
+          float: 'right',
         }}
       >
         Get Charts

app/containers/EventContainer.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useContext } from 'react';
 //import EventContext, EventChart
 import { EventContext } from '../context/EventContext';
+import { QueryContext } from '../context/QueryContext';
 import EventChart from '../charts/EventChart';
 import HealthContextProvider from '../context/HealthContext';
 import { transformFile } from '@babel/core';
@@ -14,62 +15,66 @@ interface EventContainerProps {
 const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
   //get eventData from EventContext using react hook useContext
 
-  const { eventData } = useContext(EventContext); //eventData: [{time: xx, m1: xx, m2: xx}, {}, {}..]
+  const { eventDataList, eventTimeList } = useContext(EventContext); 
   const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
+  const { selectedMetrics } = useContext(QueryContext);
+
 
-  //everytime eventData change, create eventChartsArr based on current eventData
   useEffect(() => {
     const temp : JSX.Element[] = [];
-    let i = 0;
-    if (eventData.length > 0) {
-      // console.log("eventData in event container changes:")
-      //console.log(JSON.stringify(eventData));
-      const returns : any[] = transformEventData(eventData);
-      const dataList = returns[0]; //[{m1: [3,6,8...]}, {m2: [3,6,8...]}]
-      const timeList = returns[1]; //[1,2,3,4,...,50]
-      // console.log("datalist:", JSON.stringify(dataList));
-      // console.log("timelist:", JSON.stringify(timeList));
-      
-      dataList.forEach((element, id) => {
-        //element: {m1: [3,6,8...]}
+    if (eventDataList.length > 0) {
+      // console.log("eventDataList in EventContainer:");
+      // console.log(JSON.stringify(eventDataList));
+      // console.log("eventTimeList in EventContainer:");
+      // console.log(JSON.stringify(eventTimeList));
+      let selectedMetricsList : string[] = [];
+      selectedMetrics.forEach(element => {
+        if(Object.keys(element)[0]==='Event'){
+          selectedMetricsList = element['Event'];
+        }
+      });
+
+      eventDataList.forEach((element, id) => {
+      //[{metric1: [3,6,8...]}, {metric2: [3,6,8...]}]  
         const metric: string = Object.keys(element)[0];
         const valueList: any = Object.values(element)[0];
-        const newEventChart = (
-          <EventChart
-            key={`Chart${id}`}
-            metric={metric}
-            timeList={timeList}
-            valueList={valueList}
-            sizing={props.sizing}
-            colourGenerator={props.colourGenerator}
-          />
-        );
+        // console.log("metric in EventContainer:", metric);
+        // console.log("valueList in EventContainer:",valueList);
+        if(selectedMetricsList.includes(metric)){
+          const newEventChart = (
+            <EventChart
+              key={`Chart${id}`}
+              metric={metric}
+              timeList={getSingleTimeList(metric)}
+              valueList={valueList}
+              sizing={props.sizing}
+              colourGenerator={props.colourGenerator}
+            />
+          );
+          
+          temp.push(newEventChart);
+        }
 
-        temp.push(newEventChart);
-       
       }); 
       setEventChartsArr(temp);
     }
-  }, [eventData]);
+  }, [eventDataList, eventTimeList]);
 
-  const transformEventData = (eventData: any) => {
-    const dataList: any[] = [];
-    let timeList: any[] = [];
-    const sampleObj: {} = eventData[0];
-    for (let key in sampleObj) {
-      const keyValueList: {} = {}; //{time: [1,2,3,4,...,50]} //{m1: [3,6,8...]}
-      keyValueList[key] = [];
-      for (let i = 0; i < eventData.length; i++) {
-        const obj: {} = eventData[i];
-        keyValueList[key].push(obj[key]);
-      }
-      if (key === 'time') {
-        timeList = keyValueList[key]; //[1,2,3,4,...,50]
-      } else {
-        dataList.push(keyValueList); //[{m1: [3,6,8...]}, {m2: [3,6,8...]}]
+  const getSingleTimeList = (metricName: string) => {
+    //[{metric1: [3,6,8...]}, {metric2: [3,6,8...]}]  
+    let lst = [];
+    for(let metric of eventTimeList){
+      if(Object.keys(metric)[0] === metricName){
+        lst = metric[metricName];
+        // console.log("timeList in EventContainer:", JSON.stringify(lst));
+        break;
+        
       }
+
     }
-    return [dataList, timeList];
+
+    return lst;
+    
   };
 
   return <div>{eventChartsArr}</div>;

app/containers/GraphsContainer.tsx

@@ -23,6 +23,7 @@ import DockerChart from '../charts/DockerChart';
 import RouteChart from '../charts/RouteChart';
 
 import LogsTable from '../charts/LogsTable';
+//import HealthContainer from './HealthContainer';
 import EventContainer from './EventContainer';
 import QueryContainer from './QueryContainer';
 import HealthContainer from './HealthContainer';
@@ -51,9 +52,9 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
 
   const { servicesData } = useContext(ApplicationContext);
 
-  const { fetchHealthData, setHealthData, services } = useContext(HealthContext);
+  const { fetchHealthData, setDataList, setTimeList, services } = useContext(HealthContext);
   const { setDockerData, dockerData } = useContext(DockerContext);
-  const { fetchEventData, setEventData } = useContext(EventContext);
+  const { fetchEventData, setEventDataList, setEventTimeList } = useContext(EventContext);
   const { fetchCommsData } = useContext(CommsContext);
   const { selectedMetrics } = useContext(QueryContext);
   const { setTimeList, setDataList } = useContext(HealthContext);
@@ -82,11 +83,11 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
 
     return () => {
       if (intervalID) clearInterval(intervalID);
-      setHealthData({});
+      setDataList([]);
+      setTimeList([]);
       setDockerData({});
-      setEventData({});
-      setDataList({});
-      setTimeList({});
+      setEventDataList([]);
+      setEventTimeList([]);
     };
   }, [service, live]);
 
@@ -192,6 +193,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
         ) : (
           <div className="graphs">
             {chart === 'all' && <QueryContainer />}
+<<<<<<< HEAD
             {chart.startsWith('health_') && (
               <HealthContainer
                 colourGenerator={stringToColour}
@@ -202,6 +204,14 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
             {chart.startsWith('event_') && (
               <EventContainer colourGenerator={stringToColour} sizing="solo" />
             )}
+=======
+            {chart.startsWith('health_') 
+            // && (
+            // <HealthContainer colourGenerator={stringToColour} sizing="solo" category={chart.substring(7)}/>
+            // )
+            }
+            {chart.startsWith('event_') && <EventContainer colourGenerator={stringToColour} sizing="solo" />}
+>>>>>>> dev
             {chart === 'docker' && <DockerChart />}
           </div>
         )}