Skip to content

Commit df91398

Browse files
jcpoirier20jcpoirier20
committed
Reworked event data logic and event data transformer function.
Added some typescript interfaces describing the data sets.
1 parent 5bd0e79 commit df91398

File tree

5 files changed

+133
-154
lines changed

5 files changed

+133
-154
lines changed

‎app/charts/HealthChart.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,6 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
8686

8787
const createChart = () => {
8888
const dataArray = generatePlotlyDataObjects(chartData);
89-
90-
console.log('serviceName: ', serviceName);
9189
const sizeSwitch = sizing === 'all' ? all : solo;
9290

9391
return (

‎app/components/TransferColumns.tsx

Lines changed: 41 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -27,95 +27,85 @@ const TransferColumns = React.memo(() => {
2727
const { service } = useParams<keyof Params>() as Params;
2828
const { mode } = useContext(DashboardContext.DashboardContext);
2929

30-
const eventDataList = eventData.eventDataList;
31-
const healthDataObject = healthData;
32-
3330
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
3431

35-
// console.log('healthMetrics: ', healthMetrics);
36-
// console.log('metricsPool: ', metricsPool);
37-
// console.log('targetKeys: ', targetKeys);
38-
// console.log('eventData: ', eventData);
39-
// console.log('eventDataList: ', eventDataList);
40-
// console.log('event metrics: ', eventMetrics);
41-
4232
useEffect(() => {
43-
if (healthDataObject) {
33+
if (healthData) {
4434
setHealthMetricsReady(true);
4535
}
46-
}, [healthDataObject]);
36+
}, [healthData]);
4737

4838
useEffect(() => {
49-
if (eventDataList && eventDataList.length > 0) {
39+
if (eventData) {
5040
setEventMetricsReady(true);
5141
}
52-
}, [eventDataList]);
42+
}, [eventData]);
5343

5444
useEffect(() => {
55-
setHealthMetrics(getMetrics('health', healthDataObject));
45+
setHealthMetrics(getMetrics('health', healthData));
5646
}, [healthMetricsReady]);
5747

5848
useEffect(() => {
59-
setEventMetrics(getMetrics('event', eventDataList));
49+
setEventMetrics(getMetrics('event', eventData));
6050
}, [eventMetricsReady]);
6151

6252
useEffect(() => {
6353
if (service === '') {
6454
return;
6555
}
6656
if (service === 'kafkametrics') {
67-
if (eventDataList && eventDataList.length > 0) {
68-
setMetricsPool(getMetrics('event', eventDataList));
57+
if (eventData) {
58+
setMetricsPool(getMetrics('event', eventData));
6959
} else if (eventMetricsReady) {
7060
setMetricsPool(eventMetrics);
7161
}
7262
}
7363
// JJ-ADDITION (CAN ALSO JUST ADD OR OPERATOR TO ABOVE CONDITIONAL)
7464
else if (service === 'kubernetesmetrics') {
75-
if (eventDataList && eventDataList.length > 0) {
76-
setMetricsPool(getMetrics('event', eventDataList));
65+
if (eventData) {
66+
setMetricsPool(getMetrics('event', eventData));
7767
} else if (eventMetricsReady) {
7868
setMetricsPool(eventMetrics);
7969
}
8070
} else if (!service.includes('kafkametrics')) {
81-
if (healthDataObject) {
82-
setMetricsPool(getMetrics('health', healthDataObject));
71+
if (healthData) {
72+
setMetricsPool(getMetrics('health', healthData));
8373
} else if (healthMetricsReady) {
8474
setMetricsPool(healthMetrics);
8575
}
8676
} else {
87-
if (healthDataObject && eventDataList && eventDataList.length > 0) {
88-
setMetricsPool(
89-
getMetrics('event', eventDataList).concat(getMetrics('health', healthDataObject))
90-
);
77+
if (healthData && eventData) {
78+
setMetricsPool(getMetrics('event', eventData).concat(getMetrics('health', healthData)));
9179
} else if (healthMetricsReady && eventMetricsReady) {
9280
setMetricsPool(eventMetrics.concat(healthMetrics));
9381
}
9482
}
9583
}, [service, eventData, healthData]);
9684

9785
// responsible for parsing data and updating state via setMetricsPool
98-
const getMetrics = (type, datalist) => {
86+
const getMetrics = (type, dataObject) => {
9987
let pool: any[] = [];
10088
if (type === 'event') {
101-
datalist.forEach(metric => {
102-
const temp = {};
103-
const metricName: string = Object.keys(metric)[0];
104-
const key = 'Event | ' + metricName;
105-
temp['key'] = key;
106-
temp['title'] = key;
107-
temp['tag'] = 'Event';
108-
pool.push(temp);
109-
});
89+
for (const category in dataObject) {
90+
const metricsObjects = dataObject[category];
91+
for (const metricName in metricsObjects) {
92+
const key = category + ' | ' + metricName;
93+
pool.push({
94+
key: key,
95+
title: key,
96+
tag: category,
97+
});
98+
}
99+
}
110100
} else {
111101
// iterate throught the healthData object to populate the `Metrics Query` tab with metrics options
112102
// The pool array wants an object with a specific format in order to populate the selection table
113-
for (const service in healthData) {
114-
const categoryObjects = healthData[service];
103+
for (const service in dataObject) {
104+
const categoryObjects = dataObject[service];
115105
for (const category in categoryObjects) {
116106
const metricsObjects = categoryObjects[category];
117-
for (const metric in metricsObjects) {
118-
const key = category + ' | ' + metric;
107+
for (const metricName in metricsObjects) {
108+
const key = category + ' | ' + metricName;
119109
pool.push({
120110
key: key,
121111
title: key,
@@ -138,7 +128,6 @@ const TransferColumns = React.memo(() => {
138128
const createSelectedMetricsList = () => {
139129
const temp: any[] = [];
140130
const categorySet = new Set();
141-
console.log('targetKeys is: ', targetKeys);
142131
for (let i = 0; i < targetKeys.length; i++) {
143132
const str: string = targetKeys[i];
144133
const strArr: string[] = str.split(' | ');
@@ -158,7 +147,6 @@ const TransferColumns = React.memo(() => {
158147
temp.push(newCategory);
159148
}
160149
}
161-
console.log('temp array with requested metrics is: ', temp);
162150
setSelectedMetrics(temp);
163151
};
164152

@@ -182,10 +170,11 @@ const TransferColumns = React.memo(() => {
182170
// makes the rows needed for the selection grid
183171
const rows: any[] = [];
184172
metricsPool.forEach((el, index) => {
185-
const row = {};
186-
row['id'] = index;
187-
row['tag'] = el.tag;
188-
row['title'] = el.title.split(' | ')[1].replace('kubernetes-cadvisor/docker-desktop/', ''); // gets rid of the full path
173+
const row = {
174+
id: index,
175+
tag: el.tag,
176+
title: el.title.split(' | ')[1].replace('kubernetes-cadvisor/docker-desktop/', ''),
177+
}; // gets rid of the full path
189178
rows.push(row);
190179
});
191180

@@ -202,7 +191,12 @@ const TransferColumns = React.memo(() => {
202191
return (
203192
<>
204193
<div id="getChartsContainer">
205-
<Button id="getCharts" onClick={createSelectedMetricsList} variant="contained" color="primary">
194+
<Button
195+
id="getCharts"
196+
onClick={createSelectedMetricsList}
197+
variant="contained"
198+
color="primary"
199+
>
206200
Get Charts
207201
</Button>
208202
</div>

‎app/context/EventContext.tsx

Lines changed: 29 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useCallback } from 'react';
22
import Electron from 'electron';
3+
import { eventTransformer } from './helpers';
34

45
const { ipcRenderer } = window.require('electron');
56

@@ -10,127 +11,57 @@ export const EventContext = React.createContext<any>(null);
1011
* @property {Object} eventData
1112
* @method fetchEventData
1213
* @method setEventData
13-
1414
*/
1515

1616
interface Props {
17-
children: any
17+
children: any;
1818
}
1919

2020
const EventContextProvider: React.FC<Props> = React.memo(({ children }) => {
21-
const [eventData, setEventData] = useState({ eventDataList: [], eventTimeList: [] });
22-
// const [eventKafkaData, setEventKafkaData] = useState({ eventDataList: [], eventTimeList: [] });
23-
// const [eventKubernetesData, setEventKubernetesData] = useState({ eventDataList: [], eventTimeList: [] });
21+
const [eventData, setEventData] = useState({});
2422

2523
function tryParseJSON(jsonString: any) {
2624
try {
27-
const o = JSON.parse(jsonString);
28-
if (o && typeof o === 'object') {
25+
const obj = JSON.parse(jsonString);
26+
if (obj && typeof obj === 'object') {
2927
return true;
3028
}
31-
} catch (e) {
32-
console.log({ error: e });
29+
} catch (err) {
30+
console.log({ error: err });
3331
}
3432
return false;
3533
}
3634

3735
/**
38-
* @function fetchEventData - takes parameter arg.
39-
* Checks if arg is strictly equals to 'kafkametrics', if so removes the event listerner suing the ipcRenderer.removeAllListeners.
40-
* Sends a message using 'ipcRenderer.send'.
41-
* This function seems to be fetching event data and updating the state accordingly.
42-
* Problem: trying to change type any to something some concrete.
36+
* @function fetchEventData - takes an argument that is a string representing which metric type to be requested from the backend.
37+
* Sends a message using 'ipcRenderer.send'.
38+
* Fetches event data and updates the EventData state after transforming the data.
4339
*/
4440

45-
const fetchEventData = useCallback((arg: any) => {
46-
if (arg === 'kafkametrics') {
47-
ipcRenderer.removeAllListeners('kafkaResponse');
48-
ipcRenderer.send('kafkaRequest');
49-
ipcRenderer.on('kafkaResponse', (event: Electron.Event, data: any) => {
50-
let result: any;
51-
if (tryParseJSON(data)) result = JSON.parse(data);
52-
let transformedData: any = {};
53-
if (result && result.length > 0) {
54-
transformedData = transformEventData(result[0]['kafkametrics']);
55-
setEventData(transformedData);
56-
}
57-
});
58-
} else if (arg === 'kubernetesmetrics') {
59-
ipcRenderer.removeAllListeners('kubernetesResponse');
60-
ipcRenderer.send('kubernetesRequest');
61-
ipcRenderer.on('kubernetesResponse', (event: Electron.Event, data: any) => {
62-
let result: any;
63-
if (tryParseJSON(data)) result = JSON.parse(data);
64-
let transformedData: any = {};
41+
const fetchEventData = useCallback((arg: string) => {
42+
const argDict = {
43+
kafkametrics: {
44+
request: 'kafkaRequest',
45+
response: 'kafkaResponse',
46+
},
47+
kubernetesmetrics: {
48+
request: 'kubernetesRequest',
49+
response: 'kubernetesResponse',
50+
},
51+
};
52+
53+
ipcRenderer.removeAllListeners(argDict[arg].response);
54+
ipcRenderer.send(argDict[arg].request);
55+
ipcRenderer.on(argDict[arg].response, (event: Electron.Event, data: any) => {
56+
if (tryParseJSON(data)) {
57+
const result: object[] = JSON.parse(data);
6558
if (result && result.length > 0) {
66-
transformedData = transformEventData(result[0]['kubernetesmetrics']);
59+
const transformedData: object = eventTransformer(result[0][arg]);
6760
setEventData(transformedData);
6861
}
69-
});
70-
}
71-
}, []);
72-
73-
// const fetchKafkaEventData = useCallback(() => {
74-
// ipcRenderer.removeAllListeners('kafkaResponse');
75-
// ipcRenderer.send('kafkaRequest');
76-
// ipcRenderer.on('kafkaResponse', (event: Electron.Event, data: any) => {
77-
// let result: any;
78-
// if (tryParseJSON(data)) result = JSON.parse(data);
79-
// let transformedData: any = {};
80-
// if (result && result.length > 0) {
81-
// transformedData = transformEventData(result[0]['kafkametrics']);
82-
// setEventData(transformedData);
83-
// }
84-
// });
85-
// }, []);
86-
87-
// const fetchKubernetesEventData = useCallback(() => {
88-
// ipcRenderer.removeAllListeners('kafkaResponse');
89-
// ipcRenderer.send('kafkaRequest');
90-
// ipcRenderer.on('kafkaResponse', (event: Electron.Event, data: any) => {
91-
// let result: any;
92-
// if (tryParseJSON(data)) result = JSON.parse(data);
93-
// let transformedData: any = {};
94-
// if (result && result.length > 0) {
95-
// transformedData = transformEventData(result[0]['kafkametrics']);
96-
// setEventData(transformedData);
97-
// }
98-
// });
99-
// }, []);
100-
/**
101-
* @function transformEventData - seems like this function tranforms raw data into a format that can be visualize in graphs.
102-
*/
103-
const transformEventData = (data: any[]) => {
104-
const dataList: any[] = [];
105-
const timeList: any[] = [];
106-
const metricSet = new Set();
107-
data.forEach(element => {
108-
const metricName = element.metric;
109-
const time = element.time;
110-
const value = element.value;
111-
if (!metricSet.has(metricName)) {
112-
metricSet.add(metricName);
113-
const metricObj_data: any = {};
114-
const metricObj_time: any = {};
115-
metricObj_data[metricName] = [value];
116-
metricObj_time[metricName] = [time];
117-
dataList.push(metricObj_data);
118-
timeList.push(metricObj_time);
119-
} else {
120-
dataList.forEach(element => {
121-
if (Object.keys(element)[0] === metricName) {
122-
element[metricName].push(value);
123-
}
124-
});
125-
timeList.forEach(element => {
126-
if (Object.keys(element)[0] === metricName) {
127-
element[metricName].push(time);
128-
}
129-
});
13062
}
13163
});
132-
return { eventDataList: dataList, eventTimeList: timeList };
133-
};
64+
}, []);
13465

13566
return (
13667
<EventContext.Provider

0 commit comments

Comments
 (0)