Skip to content

Commit c4faff6

Browse files
FredwardsFredwards
authored
Merge pull request #185 from open-source-labs/queryRefactor
Query refactor
2 parents 67eba4f + 1ee2c9f commit c4faff6

File tree

11 files changed

+160
-101
lines changed

11 files changed

+160
-101
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/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
6565
<h1 className="microserviceTitle">{app}</h1>
6666

6767
{selectModal && <div className="filter" onClick={dropdownClickHandler}></div>}
68-
68+
<div><span>select services to display</span></div>
6969
<div className={selectModal ? 'dropdown active' : 'dropdown'}>
7070
<div
7171
className={selectModal ? 'select disabled' : 'select'}

‎app/components/TransferColumns.tsx

Lines changed: 103 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useContext, useEffect, useRef } from 'react';
2-
import { useIsMount } from '../context/helpers';
2+
import { useParams } from 'react-router-dom';
33
import 'antd/dist/antd.less';
44
import { Switch, Table, Tag, Transfer, Button } from 'antd';
55
import { PoweroffOutlined } from '@ant-design/icons';
@@ -9,6 +9,7 @@ import { HealthContext } from '../context/HealthContext';
99
import { EventContext } from '../context/EventContext';
1010
import AvQueuePlayNext from 'material-ui/svg-icons/av/queue-play-next';
1111

12+
1213
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
1314
<Transfer {...restProps}>
1415
{({
@@ -65,33 +66,113 @@ 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+
85+
useEffect(()=>{
86+
if(healthDataList && healthDataList.length >0){
87+
setHealthMetricsReady(true);
88+
}
89+
},[healthDataList]);
90+
91+
useEffect(()=>{
92+
if(eventDataList && eventDataList.length >0){
93+
setEventMetricsReady(true);
94+
}
95+
},[eventDataList]);
96+
97+
useEffect(()=>{
98+
// console.log("newhealthmetrics", JSON.stringify(getMetrics('health',healthDataList)))
99+
//console.log("healthDataList:", JSON.stringify(healthDataList));
100+
setHealthMetrics(getMetrics('health',healthDataList))
101+
102+
},[healthMetricsReady]);
103+
104+
useEffect(()=>{
105+
// console.log("neweventhmetrics", JSON.stringify(getMetrics('event',eventDataList)))
106+
setEventMetrics(getMetrics('event',eventDataList))
107+
//console.log("eventDataList:", JSON.stringify(eventDataList));
108+
109+
},[eventMetricsReady]);
110+
111+
112+
113+
useEffect(()=>{
114+
115+
console.log("current service:", service);
116+
console.log("healthData in else:", healthDataList.length);
117+
console.log("eventData in else:", eventDataList.length);
118+
console.log("healthMetricsReady:", healthMetricsReady);
119+
console.log("eventMetricsReady:", eventMetricsReady);
120+
if(service === ''){
121+
return;
122+
}
123+
else if(service === 'kafkametrics'){
124+
// console.log("set event metrics:", JSON.stringify(eventMetrics));
125+
console.log("eventDataList:", JSON.stringify(eventDataList));
126+
if(eventDataList && eventDataList.length >0){
127+
setMetricsPool(getMetrics('event',eventDataList));
128+
}
129+
else if(eventMetricsReady){
130+
setMetricsPool(eventMetrics);
131+
}
132+
133+
}
134+
else if (!service.includes('kafkametrics')){//all health data
135+
console.log("healthDataList in elseif:", JSON.stringify(healthDataList));
136+
// console.log("set health metrics:", JSON.stringify(healthMetrics));
137+
if(healthDataList && healthDataList.length >0){
138+
setMetricsPool(getMetrics('health',healthDataList));
139+
}
140+
else if(healthMetricsReady){
141+
setMetricsPool(healthMetrics);
142+
}
143+
144+
}
145+
else{
146+
147+
if(healthDataList && healthDataList.length >0 && eventDataList && eventDataList.length >0){
148+
console.log("eventDataList:", eventDataList.length);
149+
console.log("healthDataList", healthDataList.length);
150+
setMetricsPool(getMetrics('event',eventDataList).concat(getMetrics('health',healthDataList)));
151+
}
152+
else if(healthMetricsReady && eventMetricsReady){
153+
console.log("set concat metrics:", JSON.stringify(eventMetrics.concat(healthMetrics)));
154+
setMetricsPool(eventMetrics.concat(healthMetrics));
155+
}
156+
}
157+
158+
// },[service, healthMetricsReady, eventMetricsReady])
159+
},[service, eventData, healthData])
160+
161+
const getMetrics = (type, datalist) =>{
91162
let pool: any[] = [];
92-
if (healthDatalist && healthDatalist.length > 0) {
93-
setIsEvent(false);
94-
healthDatalist.forEach(category => {
163+
if(type === 'event'){
164+
datalist.forEach(metric => {
165+
const temp = {};
166+
const metricName: string = Object.keys(metric)[0];
167+
const key = 'Event | ' + metricName;
168+
temp['key'] = key;
169+
temp['title'] = key;
170+
temp['tag'] = 'Event';
171+
pool.push(temp);
172+
});
173+
}
174+
else{
175+
datalist.forEach(category => {
95176
const tag: string = Object.keys(category)[0]; //Memory
96177
const serviceObj: {} = category[tag][0]; // { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] }
97178
const valuesOfServiceObj: any[] = Object.values(serviceObj);
@@ -109,38 +190,9 @@ const TransferColumns = React.memo(() => {
109190
});
110191

111192
}
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-
}
193+
return pool;
194+
}
125195

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();
137-
138-
useEffect(() => {
139-
// if (!isMount) {
140-
appendMetrics(eventDataList, healthDataList);
141-
// }
142-
}, [isEvent, healthDataList, eventDataList]);
143-
144196

145197
const leftTableColumns = [
146198
{
@@ -225,7 +277,7 @@ const TransferColumns = React.memo(() => {
225277
rightColumns={rightTableColumns}
226278
listStyle={{
227279
width: 700,
228-
height: 700,
280+
height: 1000,
229281
}}
230282
/>
231283
<Switch

‎app/containers/EventContainer.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState, useContext } from 'react';
2-
//import EventContext, EventChart
2+
import { useParams } from 'react-router-dom';
33
import { EventContext } from '../context/EventContext';
44
import { QueryContext } from '../context/QueryContext';
55
import EventChart from '../charts/EventChart';
@@ -21,10 +21,12 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
2121
const { selectedMetrics } = useContext(QueryContext);
2222
const eventDataList : any[] = eventData.eventDataList;
2323
const eventTimeList : any[] = eventData.eventTimeList;
24+
const { service } = useParams<any>();
25+
2426

2527
useEffect(() => {
2628
const temp : JSX.Element[] = [];
27-
29+
console.log("service in event container", service);
2830
if (eventData && eventDataList.length > 0 && eventTimeList.length >0) {
2931
// console.log("eventDataList in EventContainer:");
3032
// console.log(JSON.stringify(eventDataList));
@@ -62,7 +64,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
6264
});
6365
setEventChartsArr(temp);
6466
}
65-
}, [eventData]);
67+
}, [eventData, service]);
6668

6769
const getSingleTimeList = (metricName: string) => {
6870
//[{metric1: [3,6,8...]}, {metric2: [3,6,8...]}]
@@ -81,7 +83,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
8183

8284
};
8385

84-
return <div>{eventChartsArr}</div>;
86+
return <div>{service.includes('kafkametrics')? eventChartsArr : []}</div>;
8587
});
8688

8789
export default EventContainer;

‎app/containers/GraphsContainer.tsx

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

6767
useEffect(() => {
6868
const serviceArray = service.split(' ');
69-
console.log("serviceArray in GraphsContainer:", serviceArray);
70-
69+
const healthServiceArray = serviceArray.filter((value : string) => value !== 'kafkametrics');
70+
// console.log("service array:", JSON.stringify(serviceArray));
71+
// console.log("health service array:", JSON.stringify(healthServiceArray));
7172
if (live) {
7273
setIntervalID(
7374
setInterval(() => {
7475
fetchCommsData(app, live);
75-
fetchHealthData(serviceArray);
76-
fetchEventData(serviceArray[0]);
76+
fetchHealthData(healthServiceArray);
77+
if(service.includes('kafkametrics')){
78+
fetchEventData('kafkametrics');
79+
}
80+
7781
}, 3000)
7882
);
7983
} else {
8084
if (intervalID) clearInterval(intervalID);
8185
fetchCommsData(app, live);
82-
fetchHealthData(serviceArray);
83-
fetchEventData(serviceArray[0]);
86+
fetchHealthData(healthServiceArray);
87+
if(service.includes('kafkametrics')){
88+
fetchEventData();
89+
}
8490
}
8591

8692
return () => {
@@ -172,7 +178,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
172178
Docker
173179
</button>
174180
)}
175-
{/* <button
181+
<button
176182
id="communication-button"
177183
className={chart === 'communications' ? 'selected' : undefined}
178184
onClick={() => {
@@ -183,7 +189,7 @@ const GraphsContainer: React.FC<GraphsContainerProps> = React.memo(props => {
183189
key = '3'
184190
>
185191
Communication
186-
</button> */}
192+
</button>
187193
</nav>
188194
<Header app={app} service={service} live={live} setLive={setLive} />
189195
<div className="graphs-container">

‎app/containers/HealthContainer.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { HealthContext } from '../context/HealthContext';
33
import { QueryContext } from '../context/QueryContext';
44
import HealthChart from '../charts/HealthChart';
55
import { getTime } from '../context/helpers';
6+
import { useParams } from 'react-router-dom';
67

78
interface HealthContainerProps {
89
sizing: string;
@@ -18,7 +19,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
1819
const {selectedMetrics} = useContext(QueryContext);
1920
const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
2021
const { category } = props;
21-
22+
const { service } = useParams<any>();
2223

2324
// console.log("HC-healthData in HealthContainer:", JSON.stringify(healthData));
2425
// console.log("HC-datalist in HealthContainer:", JSON.stringify(healthData.healthDataList));
@@ -98,7 +99,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
9899

99100
}, [healthData, category]); //add category here
100101

101-
return <div>{healthChartsArr}</div>;
102+
return <div>{service !== 'kafkametrics' ? healthChartsArr : []}</div>;
102103
});
103104

104105
export default HealthContainer;

0 commit comments

Comments
 (0)