Skip to content

Commit a6bee86

Browse files
curiousyangcuriousyang
committed
finish testing healthmetrics
1 parent 80422e8 commit a6bee86

File tree

10 files changed

+171
-94
lines changed

10 files changed

+171
-94
lines changed

‎app/charts/EventChart.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ interface SoloStyles {
2020

2121
const EventChart: React.FC<EventChartProps> = React.memo(props => {
2222
const { metric, timeList, valueList, sizing, colourGenerator } = props;
23-
// console.log('in event chart:');
24-
// console.log('metric:', metric);
25-
// console.log(JSON.stringify(timeList))
26-
// console.log(JSON.stringify(valueList));
23+
console.log('in event chart:');
24+
console.log('event chart metric:', metric);
25+
console.log('event chart timelist',JSON.stringify(timeList))
26+
console.log('event chart valuelist', JSON.stringify(valueList));
2727

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

‎app/charts/HealthChart.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ interface SoloStyles {
2121
const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
2222
const { service, metric, timeList, valueList, sizing, colourGenerator } = props;
2323
const [solo, setSolo] = useState<SoloStyles | null>(null);
24+
console.log("in the HealthChart");
25+
console.log("healthchart valuelist:", JSON.stringify(valueList));
26+
console.log("healthchart timelist:", JSON.stringify(timeList));
2427

2528
setInterval(() => {
2629
if (solo !== soloStyle) {

‎app/components/TransferColumns.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -69,20 +69,20 @@ const TransferColumns = React.memo(() => {
6969
const [disabled, setDisabled] = useState(false);
7070
const [showSearch, setShowSearch] = useState(true);
7171
const { setSelectedMetrics } = useContext(QueryContext);
72-
// const {datalist} = useContext(HealthContext);
72+
const {datalist} = useContext(HealthContext);
7373
const { eventDataList } = useContext(EventContext);
7474

75-
const datalist = [
76-
{
77-
Memory: [
78-
{ books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] },
79-
{ orders: [{ disk_usage: [5, 25] }, { clockSpeed: [7, 14] }] },
80-
],
81-
},
82-
{
83-
CPU: [{ books: [{ cpu_temp: [100, 200] }] }, { orders: [{ cpu_temp: [150, 250] }] }],
84-
},
85-
];
75+
// const datalist = [
76+
// {
77+
// Memory: [
78+
// { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] },
79+
// { orders: [{ disk_usage: [5, 25] }, { clockSpeed: [7, 14] }] },
80+
// ],
81+
// },
82+
// {
83+
// CPU: [{ books: [{ cpu_temp: [100, 200] }] }, { orders: [{ cpu_temp: [150, 250] }] }],
84+
// },
85+
// ];
8686

8787
const appendMetrics = (eventDataList, datalist) => {
8888
let pool: any[] = [];

‎app/containers/EventContainer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
4141
// console.log("metric in EventContainer:", metric);
4242
// console.log("valueList in EventContainer:",valueList);
4343
if(selectedMetricsList.includes(metric)){
44+
console.log("count in eventcontainer: ", id);
4445
const newEventChart = (
4546
<EventChart
4647
key={`Chart${id}`}

‎app/containers/GraphsContainer.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export interface GraphsContainerProps {
4545
}
4646

4747
const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
48+
4849
const history = useHistory();
4950
const { app, service } = useParams<any>();
5051
const [live, setLive] = useState<boolean>(false);
@@ -57,7 +58,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
5758
const { fetchEventData, setEventDataList, setEventTimeList } = useContext(EventContext);
5859
const { fetchCommsData } = useContext(CommsContext);
5960
const { selectedMetrics } = useContext(QueryContext);
60-
const { setTimeList, setDataList } = useContext(HealthContext);
61+
6162

6263
const [chart, setChart] = useState<string>('all');
6364

@@ -83,11 +84,11 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
8384

8485
return () => {
8586
if (intervalID) clearInterval(intervalID);
86-
setDataList([]);
87-
setTimeList([]);
88-
setDockerData({});
89-
setEventDataList([]);
90-
setEventTimeList([]);
87+
// setDataList([]);
88+
// setTimeList([]);
89+
// setDockerData({});
90+
// setEventDataList([]);
91+
// setEventTimeList([]);
9192
};
9293
}, [service, live]);
9394

@@ -128,14 +129,15 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
128129
const getHealthAndEventComponents = () => {
129130
const buttonList: JSX.Element[] = [];
130131
if (selectedMetrics) {
131-
selectedMetrics.forEach(element => {
132+
selectedMetrics.forEach((element,id) => {
132133
const categoryName = Object.keys(element)[0];
133134
const prefix = categoryName === 'Event' ? 'event_' : 'health_';
134135
buttonList.push(
135136
<button
136137
id={`${prefix}${categoryName}-button`}
137138
className={chart === `${prefix}${categoryName}` ? 'selected' : undefined}
138139
onClick={() => routing(`${prefix}${categoryName}`)}
140+
key = {`1-${id}`}
139141
>
140142
{categoryName}
141143
</button>
@@ -155,6 +157,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
155157
className={chart === 'all' ? 'selected' : undefined}
156158
id="all-button"
157159
onClick={() => routing('all')}
160+
key = '0'
158161
>
159162
Metrics Query
160163
</button>
@@ -164,6 +167,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
164167
id="docker-button"
165168
className={chart === 'docker' ? 'selected' : undefined}
166169
onClick={() => routing('docker')}
170+
key = '2'
167171
>
168172
Docker
169173
</button>
@@ -176,6 +180,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
176180
setChart('communications');
177181
history.push('communications');
178182
}}
183+
key = '3'
179184
>
180185
Communication
181186
</button>
@@ -194,9 +199,9 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
194199
<div className="graphs">
195200
{chart === 'all' && <QueryContainer />}
196201
{chart.startsWith('health_')
197-
// && (
198-
// <HealthContainer colourGenerator={stringToColour} sizing="solo" category={chart.substring(7)}/>
199-
// )
202+
&& (
203+
<HealthContainer colourGenerator={stringToColour} sizing="solo" category={chart.substring(7)}/>
204+
)
200205
}
201206
{chart.startsWith('event_') && <EventContainer colourGenerator={stringToColour} sizing="solo" />}
202207
{chart === 'docker' && <DockerChart />}

‎app/containers/HealthContainer.tsx‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect, useState, useContext } from 'react';
22
import { HealthContext } from '../context/HealthContext';
3+
import { QueryContext } from '../context/QueryContext';
34
import HealthChart from '../charts/HealthChart';
45
import { getTime } from '../context/helpers';
56

@@ -12,43 +13,67 @@ interface HealthContainerProps {
1213
const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
1314
const { timelist } = useContext(HealthContext);
1415
const { datalist } = useContext(HealthContext);
16+
const {selectedMetrics} = useContext(QueryContext);
1517
const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
1618
const { category } = props;
1719

1820
useEffect(() => {
21+
// console.log("datalist in HealthContainer:", JSON.stringify(datalist));
22+
// console.log("timelist in HealthContainer:", JSON.stringify(timelist));
1923
const temp: JSX.Element[] = [];
20-
let counter: number;
24+
let counter: number = 0;
2125
if (datalist.length > 0) {
26+
let selectedMetricsList : string[] = [];
27+
selectedMetrics.forEach(element => {
28+
if(Object.keys(element)[0]===category){
29+
selectedMetricsList = element[category];
30+
}
31+
});
2232
datalist.forEach((element: {}) => {
2333
const categoryName: string = Object.keys(element)[0];
2434
if (category === categoryName) {
25-
const categoryObj = element[categoryName];
35+
const categoryObj: [] = element[categoryName];
2636
for (const metricObj of categoryObj) {
27-
const serviceName = Object.keys(metricObj)[0];
28-
for (const serviceMetric of Object.values(metricObj)[0]) {
37+
const serviceName: string = Object.keys(metricObj)[0];
38+
const serviceValArr: any[] = Object.values(metricObj);
39+
const serviceVals : any[] = serviceValArr[0]
40+
for (const serviceMetric of serviceVals) {
2941
const metric: string = Object.keys(serviceMetric)[0];
3042
const valueList = Object.values(serviceMetric)[0];
31-
const timeList: any = getTime(timelist, serviceName, metric, categoryName);
32-
const newHealthChart = (
33-
<HealthChart
34-
key={`Chart${counter}`}
35-
service={serviceName}
36-
metric={metric}
37-
timeList={timeList}
38-
valueList={valueList}
39-
sizing={props.sizing}
40-
colourGenerator={props.colourGenerator}
41-
/>
42-
);
43-
counter++;
44-
temp.push(newHealthChart);
43+
console.log("timelist", JSON.stringify(timelist));
44+
console.log("serviceName", JSON.stringify(serviceName));
45+
console.log("metric", metric);
46+
console.log("categoryName", categoryName);
47+
const newTimeList: any = getTime(timelist, serviceName, metric, categoryName);
48+
console.log("newTimeList", newTimeList);
49+
// console.log('servicename', serviceName);
50+
// console.log("metric:", metric);
51+
// console.log("chart valuelist",JSON.stringify(valueList));
52+
// console.log("chart timelist", JSON.stringify(newTimeList));
53+
if(selectedMetricsList.includes(metric)){
54+
console.log("count in healthcontainer:", counter);
55+
const newHealthChart = (
56+
<HealthChart
57+
key={`Chart${counter}`}
58+
service={serviceName}
59+
metric={metric}
60+
timeList={newTimeList}
61+
valueList={valueList}
62+
sizing={props.sizing}
63+
colourGenerator={props.colourGenerator}
64+
/>
65+
);
66+
counter++;
67+
temp.push(newHealthChart);
68+
69+
}
4570
}
4671
}
4772
}
4873
});
4974
setHealthChartsArr(temp);
5075
}
51-
}, [timelist, datalist]);
76+
}, [timelist, datalist, category]); //add category here
5277

5378
return <div>{healthChartsArr}</div>;
5479
});

‎app/containers/QueryContainer.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import React, { useEffect, useState, useContext } from 'react';
1+
import React from 'react';
22
import TransferColumns from '../components/TransferColumns';
3-
import { QueryContext } from '../context/QueryContext';
3+
44

55

66
const QueryContainer = React.memo( props => {
7-
const {selectedMetrics } = useContext(QueryContext);
87
return <div>
98
<h2>Search Your Metrics to Display</h2>
10-
<p>{JSON.stringify(selectedMetrics)}</p>
119
<TransferColumns/>
1210
</div>;
1311
});

‎app/context/EventContext.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,26 +40,15 @@ const EventContextProvider: React.FC = React.memo(({ children }) => {
4040
// console.log("eventData in eventcontext");
4141
// console.log(JSON.stringify(result));
4242
// console.log("result in EventContext", JSON.stringify(result));
43-
setEventDataList(transformData(result)[0]);
44-
setEventTimeList(transformData(result)[1]);
43+
const transformedData =transformEventData(result);
44+
setEventDataList(transformedData[0]);
45+
setEventTimeList(transformedData[1]);
4546
});
46-
47-
48-
// let result = [
49-
// { metric: 'metricname1', category: 'Event', time: 1, value: 10 },
50-
// { metric: 'metricname1', category: 'Event', time: 2, value: 9 },
51-
// { metric: 'metricname2', category: 'Event', time: 1, value: 20 },
52-
// { metric: 'metricname2', category: 'Event', time: 2, value: 18 },
53-
// { metric: 'metricname3', category: 'Event', time: 1, value: 8 },
54-
// { metric: 'metricname3', category: 'Event', time: 2, value: 7 },
55-
// ];
56-
// setEventDataList(transformData(result)[0] || []);
57-
// setEventTimeList(transformData(result)[1] || []);
5847

5948
}, []);
6049

6150

62-
const transformData = (data: any[]) => {
51+
const transformEventData = (data: any[]) => {
6352
//[{metric: xx, category: ‘event’, time:xx, value: xx},{},{}....]
6453
const dataList: any[] = [];
6554
const timeList: any[] = [];

‎app/context/HealthContext.tsx‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,35 +27,86 @@ const HealthContextProvider: React.FC = React.memo(({ children }) => {
2727
return o;
2828
}
2929
} catch (e) {
30-
console.log(e);
30+
let errorString = "Not valid JSON: " + e.message;
31+
console.log(errorString);
32+
new Error(errorString);
3133
}
3234
return false;
3335
}
3436

3537
const fetchHealthData = useCallback(serv => {
38+
ipcRenderer.removeAllListeners('healthResponse');
3639
setServices(serv);
3740

38-
const temp: Array<Array<any>> = [];
41+
let temp: any[] = [];
3942

4043
Promise.all(
4144
serv.map((service: string) =>
4245
new Promise((resolve, reject) => {
46+
4347
ipcRenderer.send('healthRequest', service);
4448
ipcRenderer.on('healthResponse', (event: Electron.Event, data: string) => {
45-
let result: { [key: string]: string | number }[];
46-
49+
50+
51+
//second query customers
52+
// [
53+
// {
54+
// customers: [
55+
// { metric: "disk_usage", category: "Memory", time: 1, value: 10 },
56+
// { metric: "disk_usage", category: "Memory", time: 2, value: 20 },
57+
// { metric: "clockSpeed", category: "Memory", time: 1, value: 8 },
58+
// { metric: "clockSpeed", category: "Memory", time: 2, value: 16 },
59+
// { metric: "cpu_temp", category: "CPU", time: 1, value: 100 },
60+
// { metric: "cpu_temp", category: "CPU", time: 2, value: 200 },
61+
// ],
62+
// },
63+
// ]
64+
let result: any[];
4765
if (tryParseJSON(data)) {
66+
console.log("data in HealthContext:", data);
4867
result = JSON.parse(data);
49-
if (result && result.length && service === result[0].service) {
50-
resolve({ ...transformData(result) });
68+
if (result && result.length && service === Object.keys(result[0])[0]) {
69+
console.log("in the resolve!!");
70+
resolve(result[0]);
5171
}
5272
}
73+
5374
});
54-
}).then((data: any) => {
55-
temp.push(data);
75+
76+
}).then((dt: any) => {
77+
temp.push(dt);
78+
console.log("temp is:", JSON.stringify(temp));
79+
// temp = [
80+
// {
81+
// "chronos-mon": [
82+
// { metric: 'disk_usage', category: 'Memory', time: 1, value: 10 },
83+
// { metric: 'disk_usage', category: 'Memory', time: 2, value: 20 },
84+
// { metric: 'clockSpeed', category: 'Memory', time: 1, value: 8 },
85+
// { metric: 'clockSpeed', category: 'Memory', time: 2, value: 16 },
86+
// { metric: 'cpu_temp', category: 'CPU', time: 1, value: 100 },
87+
// { metric: 'cpu_temp', category: 'CPU', time: 2, value: 200 },
88+
// ],
89+
// },
90+
// {
91+
// "chronos-mon-2": [
92+
// { metric: 'disk_usage', category: 'Memory', time: 1, value: 10000 },
93+
// { metric: 'disk_usage', category: 'Memory', time: 2, value: 20000 },
94+
// { metric: 'clockSpeed', category: 'Memory', time: 1, value: 8000 },
95+
// { metric: 'clockSpeed', category: 'Memory', time: 2, value: 16000 },
96+
// { metric: 'cpu_temp', category: 'CPU', time: 1, value: 10000 },
97+
// { metric: 'cpu_temp', category: 'CPU', time: 2, value: 20000 },
98+
// ],
99+
// },
100+
// ];
56101
if (temp.length === serv.length) {
57-
setDataList(temp[0][0]);
58-
setTimeList(temp[0][1]);
102+
103+
console.log('serv:', JSON.stringify(serv));
104+
const transformedData = transformData(temp);
105+
console.log('transformedData:', JSON.stringify(transformedData));
106+
107+
setDataList(transformedData[0]);
108+
setTimeList(transformedData[1]);
109+
59110
}
60111
})
61112
)

0 commit comments

Comments
 (0)