Skip to content

Commit 9ccfbd5

Browse files
curiousyangcuriousyang
committed
fix query tool
1 parent 67eba4f commit 9ccfbd5

File tree

6 files changed

+119
-74
lines changed

6 files changed

+119
-74
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('event chart metric:', metric);
25-
console.log('event chart timelist',JSON.stringify(timeList))
26-
console.log('event chart valuelist', 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 & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
2525
const { service } = useParams<any>();
2626
const { renderService, metric, timeList, valueList, sizing, colourGenerator } = props;
2727
const [solo, setSolo] = useState<SoloStyles | null>(null);
28-
console.log('in the HealthChart');
29-
console.log('healthchart valuelist:', JSON.stringify(valueList));
30-
console.log('healthchart timelist:', JSON.stringify(timeList));
28+
//console.log('in the HealthChart');
29+
//console.log('healthchart valuelist:', JSON.stringify(valueList));
30+
//console.log('healthchart timelist:', JSON.stringify(timeList));
3131

3232
setInterval(() => {
3333
if (solo !== soloStyle) {

‎app/components/TransferColumns.tsx

Lines changed: 91 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useContext, useEffect, useRef } from 'react';
22
import { useIsMount } from '../context/helpers';
3+
import { useParams } from 'react-router-dom';
34
import 'antd/dist/antd.less';
45
import { Switch, Table, Tag, Transfer, Button } from 'antd';
56
import { PoweroffOutlined } from '@ant-design/icons';
@@ -65,33 +66,103 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
6566
const TransferColumns = React.memo(() => {
6667
const [targetKeys, setTargetKeys] = useState([]);
6768
const [metricsPool, setMetricsPool] = useState<any[]>([]);
68-
const [listReady, setListReady] = useState(false);
69-
const [isEvent, setIsEvent] = useState(false);
69+
const [healthMetricsReady, setHealthMetricsReady] = useState(false);
70+
const [healthMetrics, setHealthMetrics] = useState<any[]>([]);
71+
const [eventMetricsReady, setEventMetricsReady] = useState(false);
72+
const [eventMetrics, setEventMetrics] = useState<any[]>([]);
73+
7074
const [disabled, setDisabled] = useState(false);
7175
const [showSearch, setShowSearch] = useState(true);
7276
const { setSelectedMetrics } = useContext(QueryContext);
7377
const {healthData} = useContext(HealthContext);
7478
const { eventData } = useContext(EventContext);
79+
const { service } = useParams<any>();
80+
7581
const eventDataList = eventData.eventDataList;
7682
const healthDataList = healthData.healthDataList;
7783

78-
// const datalist = [
79-
// {
80-
// Memory: [
81-
// { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] },
82-
// { orders: [{ disk_usage: [5, 25] }, { clockSpeed: [7, 14] }] },
83-
// ],
84-
// },
85-
// {
86-
// CPU: [{ books: [{ cpu_temp: [100, 200] }] }, { orders: [{ cpu_temp: [150, 250] }] }],
87-
// },
88-
// ];
89-
90-
const appendMetrics = (eventDataList, healthDatalist) => {
84+
useEffect(()=>{
85+
if(healthDataList && healthDataList.length >0){
86+
setHealthMetricsReady(true);
87+
}
88+
},[healthDataList]);
89+
90+
useEffect(()=>{
91+
if(eventDataList && eventDataList.length >0){
92+
setEventMetricsReady(true);
93+
}
94+
},[eventDataList]);
95+
96+
useEffect(()=>{
97+
// console.log("newhealthmetrics", JSON.stringify(getMetrics('health',healthDataList)))
98+
//console.log("healthDataList:", JSON.stringify(healthDataList));
99+
setHealthMetrics(getMetrics('health',healthDataList))
100+
101+
},[healthMetricsReady]);
102+
103+
useEffect(()=>{
104+
// console.log("neweventhmetrics", JSON.stringify(getMetrics('event',eventDataList)))
105+
setEventMetrics(getMetrics('event',eventDataList))
106+
//console.log("eventDataList:", JSON.stringify(eventDataList));
107+
108+
},[eventMetricsReady]);
109+
110+
useEffect(()=>{
111+
console.log("current service:", service)
112+
if(service === ''){
113+
//pass
114+
}
115+
else if(service === 'kafkametrics'){
116+
// console.log("set event metrics:", JSON.stringify(eventMetrics));
117+
console.log("eventDataList:", JSON.stringify(eventDataList));
118+
if(eventDataList && eventDataList.length >0){
119+
setMetricsPool(getMetrics('event',eventDataList));
120+
}
121+
else{
122+
setMetricsPool(eventMetrics);
123+
}
124+
125+
}
126+
else if (!service.includes('kafkametrics')){
127+
console.log("healthDataList:", JSON.stringify(healthDataList));
128+
// console.log("set health metrics:", JSON.stringify(healthMetrics));
129+
if(healthDataList && healthDataList.length >0){
130+
setMetricsPool(getMetrics('health',healthDataList));
131+
}
132+
else{
133+
setMetricsPool(healthMetrics);
134+
}
135+
136+
}
137+
else{
138+
if(healthDataList && healthDataList.length >0 && eventDataList && eventDataList.length >0){
139+
setMetricsPool(getMetrics('event',eventDataList).concat(getMetrics('health',healthDataList)));
140+
}
141+
else{
142+
console.log("set concat metrics:", JSON.stringify(eventMetrics.concat(healthMetrics)));
143+
setMetricsPool(eventMetrics.concat(healthMetrics));
144+
}
145+
146+
147+
}
148+
149+
},[service, healthMetricsReady, eventMetricsReady])
150+
151+
const getMetrics = (type, datalist) =>{
91152
let pool: any[] = [];
92-
if (healthDatalist && healthDatalist.length > 0) {
93-
setIsEvent(false);
94-
healthDatalist.forEach(category => {
153+
if(type === 'event'){
154+
datalist.forEach(metric => {
155+
const temp = {};
156+
const metricName: string = Object.keys(metric)[0];
157+
const key = 'Event | ' + metricName;
158+
temp['key'] = key;
159+
temp['title'] = key;
160+
temp['tag'] = 'Event';
161+
pool.push(temp);
162+
});
163+
}
164+
else{
165+
datalist.forEach(category => {
95166
const tag: string = Object.keys(category)[0]; //Memory
96167
const serviceObj: {} = category[tag][0]; // { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] }
97168
const valuesOfServiceObj: any[] = Object.values(serviceObj);
@@ -109,38 +180,9 @@ const TransferColumns = React.memo(() => {
109180
});
110181

111182
}
112-
if (eventDataList && eventDataList.length > 0) {
113-
setIsEvent(true);
114-
eventDataList.forEach(metric => {
115-
const temp = {};
116-
const metricName: string = Object.keys(metric)[0];
117-
const key = 'Event | ' + metricName;
118-
temp['key'] = key;
119-
temp['title'] = key;
120-
temp['tag'] = 'Event';
121-
pool.push(temp);
122-
});
123-
124-
}
125-
126-
setMetricsPool(pool);
127-
};
128-
129-
// useEffect(() => {
130-
// if ((healthDataList && healthDataList.length >0) || (eventDataList && eventDataList.length > 0)) {
131-
// setListReady(true);
132-
// }
133-
// }, [healthDataList, eventDataList]);
134-
135-
136-
//const isMount = useIsMount();
183+
return pool;
184+
}
137185

138-
useEffect(() => {
139-
// if (!isMount) {
140-
appendMetrics(eventDataList, healthDataList);
141-
// }
142-
}, [isEvent, healthDataList, eventDataList]);
143-
144186

145187
const leftTableColumns = [
146188
{

‎app/containers/GraphsContainer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
6666

6767
useEffect(() => {
6868
const serviceArray = service.split(' ');
69-
console.log("serviceArray in GraphsContainer:", serviceArray);
69+
7070

7171
if (live) {
7272
setIntervalID(
@@ -172,7 +172,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
172172
Docker
173173
</button>
174174
)}
175-
{/* <button
175+
<button
176176
id="communication-button"
177177
className={chart === 'communications' ? 'selected' : undefined}
178178
onClick={() => {
@@ -183,7 +183,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
183183
key = '3'
184184
>
185185
Communication
186-
</button> */}
186+
</button>
187187
</nav>
188188
<Header app={app} service={service} live={live} setLive={setLive} />
189189
<div className="graphs-container">

‎app/context/EventContext.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const EventContextProvider: React.FC = React.memo(({ children }) => {
1919

2020
function tryParseJSON(jsonString: any) {
2121
try {
22+
// console.log("jsonString at EventContext:", jsonString);
2223
const o = JSON.parse(jsonString);
2324
if (o && typeof o === 'object') {
2425
return true;
@@ -31,19 +32,21 @@ const EventContextProvider: React.FC = React.memo(({ children }) => {
3132

3233
const fetchEventData = useCallback((serv) => {
3334
if(serv === 'kafkametrics'){
34-
console.log("in fetchEventData in EventContext!!");
35+
// console.log("in fetchEventData in EventContext!!");
3536
ipcRenderer.removeAllListeners('kafkaResponse');
3637
ipcRenderer.send('kafkaRequest');
3738
ipcRenderer.on('kafkaResponse', (event: Electron.Event, data: any) => {
3839
let result: any;
3940
if (tryParseJSON(data)) result = JSON.parse(data);
40-
console.log("eventData in eventcontext");
41-
console.log(JSON.stringify(result));
42-
console.log("result in EventContext", JSON.stringify(result));
41+
// console.log("eventData in eventcontext");
42+
// console.log(JSON.stringify(result));
43+
// console.log("result in EventContext", JSON.stringify(result));
4344
let transformedData : any = {};
44-
transformedData = transformEventData(result[0]['kafkametrics']);
45-
46-
setEventData(transformedData);
45+
if(result && result.length > 0){
46+
transformedData = transformEventData(result[0]['kafkametrics']);
47+
setEventData(transformedData);
48+
}
49+
4750
});
4851

4952
}
@@ -84,7 +87,7 @@ const EventContextProvider: React.FC = React.memo(({ children }) => {
8487
});
8588
}
8689
});
87-
console.log("datalist in EventContext:", JSON.stringify(dataList));
90+
// console.log("datalist in EventContext:", JSON.stringify(dataList));
8891
return {"eventDataList": dataList, "eventTimeList": timeList};
8992
};
9093

‎app/context/HealthContext.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,16 @@ const HealthContextProvider: React.FC = React.memo(({ children }) => {
4646
// if(service !== 'kafkametrics'){
4747

4848
return new Promise((resolve, reject) => {
49-
console.log('serv in healthcontext:', JSON.stringify(serv));
49+
// console.log('serv in healthcontext:', JSON.stringify(serv));
5050
ipcRenderer.send('healthRequest', service);
5151
ipcRenderer.on('healthResponse', (event: Electron.Event, data: string) => {
5252

5353
let result: any[];
5454
if (tryParseJSON(data)) {
55-
console.log("data in HealthContext:", data);
55+
// console.log("data in HealthContext:", data);
5656
result = JSON.parse(data);
5757
if (result && result.length && service === Object.keys(result[0])[0]) {
58-
console.log("in the resolve!!");
58+
// console.log("in the resolve!!");
5959
resolve(result[0]);
6060
}
6161
}
@@ -65,16 +65,16 @@ const HealthContextProvider: React.FC = React.memo(({ children }) => {
6565
}).then((dt: any) => {
6666
if(service !== 'kafkametrics'){
6767
temp.push(dt);
68-
console.log("temp is:", JSON.stringify(temp));
68+
// console.log("temp is:", JSON.stringify(temp));
6969
}
7070
if (checkServicesComplete(temp, serv)) {
7171

7272
setServices(serv);
7373
let transformedData : any = {};
7474
transformedData = transformData(temp);
75-
console.log("temp", temp);
76-
console.log("serv", serv);
77-
console.log('transformedData:', JSON.stringify(transformedData));
75+
// console.log("temp", temp);
76+
// console.log("serv", serv);
77+
// console.log('transformedData:', JSON.stringify(transformedData));
7878
setHealthData(transformedData);
7979

8080
}

0 commit comments

Comments
 (0)