Skip to content

Commit 3f6ce7b

Browse files
FredwardsFredwards
authored
Merge pull request #19 from oslabs-beta/ys/updateEventContext
update graph container, event context, and electron to make event metrics work for local12345
2 parents a3793fe + 992fb1c commit 3f6ce7b

File tree

8 files changed

+192
-112
lines changed

8 files changed

+192
-112
lines changed

‎app/charts/EventChart.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { all, solo as soloStyle } from './sizeSwitch';
77
interface EventChartProps {
88
key: string;
99
metric: string;
10-
timeList: any[];
10+
timeList: any;
1111
valueList: any;
1212
sizing: string;
1313
colourGenerator: Function;
@@ -22,7 +22,8 @@ const EventChart: React.FC<EventChartProps> = React.memo(props => {
2222
const { metric, timeList, valueList, sizing, colourGenerator } = props;
2323
// console.log('in event chart:');
2424
// console.log('metric:', metric);
25-
// console.log(JSON.stringify(timeList), JSON.stringify(valueList));
25+
// console.log(JSON.stringify(timeList))
26+
// console.log(JSON.stringify(valueList));
2627

2728
const [solo, setSolo] = useState<SoloStyles | null>(null);
2829

‎app/components/TransferColumns.tsx

Lines changed: 53 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { useState, useContext } from 'react';
1+
import React, { useState, useContext, useEffect, useRef } from 'react';
2+
import { useIsMount } from '../context/helpers';
23
import 'antd/dist/antd.less';
34
import { Switch, Table, Tag, Transfer, Button } from 'antd';
45
import { PoweroffOutlined } from '@ant-design/icons';
@@ -63,13 +64,15 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
6364

6465
const TransferColumns = React.memo(() => {
6566
const [targetKeys, setTargetKeys] = useState([]);
67+
const [metricsPool, setMetricsPool] = useState<any[]>([]);
68+
const [listReady, setListReady] = useState(false);
6669
const [disabled, setDisabled] = useState(false);
6770
const [showSearch, setShowSearch] = useState(true);
6871
const { setSelectedMetrics } = useContext(QueryContext);
69-
// const {category_service_datalist} = useContext(HealthContext);
70-
//const { datalist } = useContext(EventContext);
72+
// const {datalist} = useContext(HealthContext);
73+
const { eventDataList } = useContext(EventContext);
7174

72-
const category_service_datalist = [
75+
const datalist = [
7376
{
7477
Memory: [
7578
{ books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] },
@@ -80,29 +83,10 @@ const TransferColumns = React.memo(() => {
8083
CPU: [{ books: [{ cpu_temp: [100, 200] }] }, { orders: [{ cpu_temp: [150, 250] }] }],
8184
},
8285
];
83-
const datalist = [
84-
{
85-
Event: [
86-
{
87-
books: [
88-
{ broker_metric1: [10, 20] },
89-
{ broker_metric2: [8, 16] },
90-
{ broker_metric3: [8, 16] },
91-
],
92-
},
93-
{
94-
orders: [
95-
{ broker_metric1: [5, 25] },
96-
{ broker_metric2: [7, 14] },
97-
{ broker_metric3: [8, 16] },
98-
],
99-
},
100-
],
101-
},
102-
];
10386

104-
const appendMetrics = (datalist, metricsPool) => {
105-
if (datalist) {
87+
const appendMetrics = (eventDataList, datalist) => {
88+
let pool: any[] = [];
89+
if (datalist && datalist.length > 0) {
10690
datalist.forEach(category => {
10791
const tag: string = Object.keys(category)[0]; //Memory
10892
const serviceObj: {} = category[tag][0]; // { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] }
@@ -113,19 +97,44 @@ const TransferColumns = React.memo(() => {
11397
const temp = {};
11498
const metricName: string = Object.keys(element)[0];
11599
const key = tag + ' | ' + metricName;
116-
const title = key;
117100
temp['key'] = key;
118-
temp['title'] = title;
101+
temp['title'] = key;
119102
temp['tag'] = tag;
120-
metricsPool.push(temp);
103+
pool.push(temp);
121104
});
122105
});
106+
123107
}
124-
return metricsPool;
108+
if (eventDataList && eventDataList.length > 0) {
109+
eventDataList.forEach(metric => {
110+
const temp = {};
111+
const metricName: string = Object.keys(metric)[0];
112+
const key = 'Event | ' + metricName;
113+
temp['key'] = key;
114+
temp['title'] = key;
115+
temp['tag'] = 'Event';
116+
pool.push(temp);
117+
});
118+
119+
}
120+
121+
setMetricsPool(pool);
125122
};
126-
let metricsPool = [];
127-
metricsPool = appendMetrics(category_service_datalist, metricsPool);
128-
metricsPool = appendMetrics(datalist, metricsPool);
123+
124+
useEffect(() => {
125+
if (datalist && datalist.length >0 && eventDataList && eventDataList.length > 0) {
126+
setListReady(true);
127+
}
128+
}, [datalist, eventDataList]);
129+
130+
131+
const isMount = useIsMount();
132+
133+
useEffect(() => {
134+
if (!isMount) {
135+
appendMetrics(eventDataList, datalist);
136+
}
137+
}, [listReady]);
129138

130139
const leftTableColumns = [
131140
{
@@ -147,7 +156,6 @@ const TransferColumns = React.memo(() => {
147156

148157
const onChange = nextTargetKeys => {
149158
setTargetKeys(nextTargetKeys);
150-
console.log('nextTargetKeys', nextTargetKeys);
151159
};
152160

153161
const triggerDisable = checked => {
@@ -157,45 +165,43 @@ const TransferColumns = React.memo(() => {
157165
const triggerShowSearch = checked => {
158166
setShowSearch(checked);
159167
};
160-
const handleClick = ()=>{
168+
const handleClick = () => {
161169
//setSelectedMetrics
162170
const temp: any[] = [];
163171
const categorySet = new Set();
164-
for(let i = 0; i < targetKeys.length; i++){
165-
let str : string = targetKeys[i];
166-
const strArr : string[] = str.split(' | ');
172+
for (let i = 0; i < targetKeys.length; i++) {
173+
let str: string = targetKeys[i];
174+
const strArr: string[] = str.split(' | ');
167175
const categoryName = strArr[0];
168176
const metricName = strArr[1];
169-
if(categorySet.has(categoryName)){
177+
if (categorySet.has(categoryName)) {
170178
temp.forEach(element => {
171-
if(Object.keys(element)[0] === categoryName){
179+
if (Object.keys(element)[0] === categoryName) {
172180
const metricsList: any[] = element[categoryName];
173181
metricsList.push(metricName);
174182
}
175183
});
176-
}
177-
else{
184+
} else {
178185
categorySet.add(categoryName);
179186
const newCategory = {};
180187
newCategory[categoryName] = [metricName];
181188
temp.push(newCategory);
182189
}
183190
}
184191
setSelectedMetrics(temp);
185-
}
192+
};
186193

187194
return (
188195
<>
189196
<Button
190197
type="primary"
191198
onClick={handleClick}
192-
shape = 'round'
193-
size = 'middle'
199+
shape="round"
200+
size="middle"
194201
style={{
195202
marginLeft: 16,
196203
marginTop: 330,
197-
float: 'right'
198-
204+
float: 'right',
199205
}}
200206
>
201207
Get Charts

‎app/containers/EventContainer.tsx

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useEffect, useState, useContext } from 'react';
22
//import EventContext, EventChart
33
import { EventContext } from '../context/EventContext';
4+
import { QueryContext } from '../context/QueryContext';
45
import EventChart from '../charts/EventChart';
56
import HealthContextProvider from '../context/HealthContext';
67
import { transformFile } from '@babel/core';
@@ -14,62 +15,66 @@ interface EventContainerProps {
1415
const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
1516
//get eventData from EventContext using react hook useContext
1617

17-
const { eventData } = useContext(EventContext); //eventData: [{time: xx, m1: xx, m2: xx}, {}, {}..]
18+
const { eventDataList, eventTimeList } = useContext(EventContext);
1819
const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
20+
const { selectedMetrics } = useContext(QueryContext);
21+
1922

20-
//everytime eventData change, create eventChartsArr based on current eventData
2123
useEffect(() => {
2224
const temp : JSX.Element[] = [];
23-
let i = 0;
24-
if (eventData.length > 0) {
25-
// console.log("eventData in event container changes:")
26-
//console.log(JSON.stringify(eventData));
27-
const returns : any[] = transformEventData(eventData);
28-
const dataList = returns[0]; //[{m1: [3,6,8...]}, {m2: [3,6,8...]}]
29-
const timeList = returns[1]; //[1,2,3,4,...,50]
30-
// console.log("datalist:", JSON.stringify(dataList));
31-
// console.log("timelist:", JSON.stringify(timeList));
32-
33-
dataList.forEach((element, id) => {
34-
//element: {m1: [3,6,8...]}
25+
if (eventDataList.length > 0) {
26+
// console.log("eventDataList in EventContainer:");
27+
// console.log(JSON.stringify(eventDataList));
28+
// console.log("eventTimeList in EventContainer:");
29+
// console.log(JSON.stringify(eventTimeList));
30+
let selectedMetricsList : string[] = [];
31+
selectedMetrics.forEach(element => {
32+
if(Object.keys(element)[0]==='Event'){
33+
selectedMetricsList = element['Event'];
34+
}
35+
});
36+
37+
eventDataList.forEach((element, id) => {
38+
//[{metric1: [3,6,8...]}, {metric2: [3,6,8...]}]
3539
const metric: string = Object.keys(element)[0];
3640
const valueList: any = Object.values(element)[0];
37-
const newEventChart = (
38-
<EventChart
39-
key={`Chart${id}`}
40-
metric={metric}
41-
timeList={timeList}
42-
valueList={valueList}
43-
sizing={props.sizing}
44-
colourGenerator={props.colourGenerator}
45-
/>
46-
);
41+
// console.log("metric in EventContainer:", metric);
42+
// console.log("valueList in EventContainer:",valueList);
43+
if(selectedMetricsList.includes(metric)){
44+
const newEventChart = (
45+
<EventChart
46+
key={`Chart${id}`}
47+
metric={metric}
48+
timeList={getSingleTimeList(metric)}
49+
valueList={valueList}
50+
sizing={props.sizing}
51+
colourGenerator={props.colourGenerator}
52+
/>
53+
);
54+
55+
temp.push(newEventChart);
56+
}
4757

48-
temp.push(newEventChart);
49-
5058
});
5159
setEventChartsArr(temp);
5260
}
53-
}, [eventData]);
61+
}, [eventDataList, eventTimeList]);
5462

55-
const transformEventData = (eventData: any) => {
56-
const dataList: any[] = [];
57-
let timeList: any[] = [];
58-
const sampleObj: {} = eventData[0];
59-
for (let key in sampleObj) {
60-
const keyValueList: {} = {}; //{time: [1,2,3,4,...,50]} //{m1: [3,6,8...]}
61-
keyValueList[key] = [];
62-
for (let i = 0; i < eventData.length; i++) {
63-
const obj: {} = eventData[i];
64-
keyValueList[key].push(obj[key]);
65-
}
66-
if (key === 'time') {
67-
timeList = keyValueList[key]; //[1,2,3,4,...,50]
68-
} else {
69-
dataList.push(keyValueList); //[{m1: [3,6,8...]}, {m2: [3,6,8...]}]
63+
const getSingleTimeList = (metricName: string) => {
64+
//[{metric1: [3,6,8...]}, {metric2: [3,6,8...]}]
65+
let lst = [];
66+
for(let metric of eventTimeList){
67+
if(Object.keys(metric)[0] === metricName){
68+
lst = metric[metricName];
69+
// console.log("timeList in EventContainer:", JSON.stringify(lst));
70+
break;
71+
7072
}
73+
7174
}
72-
return [dataList, timeList];
75+
76+
return lst;
77+
7378
};
7479

7580
return <div>{eventChartsArr}</div>;

‎app/containers/GraphsContainer.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import DockerChart from '../charts/DockerChart';
2323
import RouteChart from '../charts/RouteChart';
2424

2525
import LogsTable from '../charts/LogsTable';
26+
//import HealthContainer from './HealthContainer';
2627
import EventContainer from './EventContainer';
2728
import QueryContainer from './QueryContainer';
2829

@@ -50,9 +51,9 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
5051

5152
const { servicesData } = useContext(ApplicationContext);
5253

53-
const { fetchHealthData, setHealthData, services } = useContext(HealthContext);
54+
const { fetchHealthData, setDataList, setTimeList, services } = useContext(HealthContext);
5455
const { setDockerData, dockerData } = useContext(DockerContext);
55-
const { fetchEventData, setEventData } = useContext(EventContext);
56+
const { fetchEventData, setEventDataList, setEventTimeList } = useContext(EventContext);
5657
const { fetchCommsData } = useContext(CommsContext);
5758
const { selectedMetrics } = useContext(QueryContext);
5859

@@ -80,9 +81,11 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
8081

8182
return () => {
8283
if (intervalID) clearInterval(intervalID);
83-
setHealthData({});
84+
setDataList([]);
85+
setTimeList([]);
8486
setDockerData({});
85-
setEventData({});
87+
setEventDataList([]);
88+
setEventTimeList([]);
8689
};
8790
}, [service, live]);
8891

@@ -190,9 +193,9 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
190193
<div className="graphs">
191194
{chart === 'all' && <QueryContainer />}
192195
{chart.startsWith('health_')
193-
&& (
194-
<HealthContainer colourGenerator={stringToColour} sizing="solo" category={chart.substring(7)}/>
195-
)
196+
// && (
197+
// <HealthContainer colourGenerator={stringToColour} sizing="solo" category={chart.substring(7)}/>
198+
// )
196199
}
197200
{chart.startsWith('event_') && <EventContainer colourGenerator={stringToColour} sizing="solo" />}
198201
{chart === 'docker' && <DockerChart />}

‎app/containers/HealthContainer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { getTime } from '../context/helpers';
66
interface HealthContainerProps {
77
sizing: string;
88
colourGenerator: Function;
9+
category: string;
910
}
1011

1112
const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {

0 commit comments

Comments
 (0)