Skip to content

Commit 3fb72f8

Browse files
jcpoirier20jcpoirier20
committed
Filter function for selected event data metrics.
1 parent 378a78c commit 3fb72f8

File tree

2 files changed

+84
-41
lines changed

2 files changed

+84
-41
lines changed

‎app/containers/EventContainer.tsx‎

Lines changed: 82 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -15,54 +15,97 @@ interface Params {
1515

1616
const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
1717
const { eventData } = useContext(EventContext);
18-
const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
1918
const { selectedMetrics } = useContext(QueryContext);
20-
const eventDataList: any[] = eventData.eventDataList;
21-
const eventTimeList: any[] = eventData.eventTimeList;
2219
const { service } = useParams<keyof Params>() as Params;
20+
// eventChartsArr contains all charts of all metrics
21+
const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
22+
23+
2324

24-
useEffect(() => {
25-
const temp: JSX.Element[] = [];
26-
if (eventData && eventDataList.length > 0 && eventTimeList.length > 0) {
27-
let selectedMetricsList: string[] = [];
28-
selectedMetrics.forEach(element => {
29-
if (Object.keys(element)[0] === 'Event') {
30-
selectedMetricsList = element['Event'];
31-
}
32-
});
3325

34-
eventDataList.forEach((element, id) => {
35-
const metric: string = Object.keys(element)[0];
36-
const valueList: any = Object.values(element)[0];
37-
if (selectedMetricsList.includes(metric)) {
38-
const newEventChart = (
39-
<EventChart
40-
key={`Chart${id}`}
41-
metric={metric}
42-
timeList={getSingleTimeList(metric)}
43-
valueList={valueList}
44-
sizing={props.sizing}
45-
colourGenerator={props.colourGenerator}
46-
/>
47-
);
26+
/*
27+
Chronos11 -- Unfortunately, eventData is not in a good place for UI/UX purposes.
28+
The eventData object has a key of 'Event' and a value of an object with hundreds of keys as metric names
29+
with their associated values and timestamps due to the way kubernetes metrics are being tracked/logged in the database.
30+
These metrics are scraped and generated by Prometheus, and should be sent to a Grafana instance
31+
to be displayed with a Grafana dashboard, but we didn't realize this until we were too close to launch to fix it.
32+
For now, the 'selectedMetrics' array is still an array with one object on it with a key of 'event', and a value of an array with
33+
the hundreds of metric names as strings inside. The eventData is an object with the key of event, and a value of an object with
34+
the hundreds of metrics as keys, and their values as the metrics and timestamps.
35+
It would be wonderful if a future iteration could manipulate the prometheus configuration in the kubernetes example to send its data
36+
to an instance of Grafana, and integrate Grafana's dashboard into Chronos to visualize the data.
37+
*/
4838

49-
temp.push(newEventChart);
39+
const filterSelectedEventMetricsandData = () => {
40+
const filteredEventData = {};
41+
// there's only one element in the selected metrics array for now...
42+
// selectedMetrics is... [{Event: ['hundreds', 'of', 'metric', 'names', 'as', 'strings']}]
43+
// use this array of selected metrics to filter the eventData down to only the metrics we want to see
44+
const selectedArr = selectedMetrics[0].Event;
45+
// only one service... 'Event'
46+
for (const service in eventData) {
47+
filteredEventData[service] = {};
48+
// define the object of all the metrics
49+
const serviceMetricsObject = eventData[service];
50+
// iterate through all the metrics
51+
for (const metricName in serviceMetricsObject) {
52+
// if the metric name matches a string in the selectedArr, we add it to our filtered object
53+
if (selectedArr.includes(metricName)) {
54+
filteredEventData[service][metricName] = serviceMetricsObject[metricName]
5055
}
51-
});
52-
setEventChartsArr(temp);
56+
}
5357
}
58+
return filteredEventData;
59+
}
60+
61+
const generateEventCharts = () => {
62+
63+
}
64+
65+
useEffect(() => {
66+
const temp: JSX.Element[] = [];
67+
filterSelectedEventMetricsandData();
68+
// if (eventData && eventDataList.length > 0 && eventTimeList.length > 0) {
69+
// let selectedMetricsList: string[] = [];
70+
// selectedMetrics.forEach(element => {
71+
// if (Object.keys(element)[0] === 'Event') {
72+
// selectedMetricsList = element['Event'];
73+
// }
74+
// });
75+
76+
// eventDataList.forEach((element, id) => {
77+
// const metric: string = Object.keys(element)[0];
78+
// const valueList: any = Object.values(element)[0];
79+
// if (selectedMetricsList.includes(metric)) {
80+
// const newEventChart = (
81+
// <EventChart
82+
// key={`Chart${id}`}
83+
// metric={metric}
84+
// timeList={getSingleTimeList(metric)}
85+
// valueList={valueList}
86+
// sizing={props.sizing}
87+
// colourGenerator={props.colourGenerator}
88+
// />
89+
// );
90+
91+
// temp.push(newEventChart);
92+
// }
93+
// });
94+
// setEventChartsArr(temp);
95+
// }
5496
}, [eventData, service]);
5597

56-
const getSingleTimeList = (metricName: string) => {
57-
let lst = [];
58-
for (let metric of eventTimeList) {
59-
if (Object.keys(metric)[0] === metricName) {
60-
lst = metric[metricName];
61-
break;
62-
}
63-
}
64-
return lst;
65-
};
98+
// const getSingleTimeList = (metricName: string) => {
99+
// let lst = [];
100+
// for (let metric of eventTimeList) {
101+
// if (Object.keys(metric)[0] === metricName) {
102+
// lst = metric[metricName];
103+
// break;
104+
// }
105+
// }
106+
// return lst;
107+
// };
108+
66109
return (
67110
<div>
68111
{service.includes('kafkametrics') || service.includes('kubernetesmetrics')

‎app/containers/HealthContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
142142
};
143143

144144
// function to generate charts using the type-sorted data
145-
const generateCharts = sortedData => {
145+
const generateHealthCharts = sortedData => {
146146
const chartsArray: JSX.Element[] = [];
147147
const keymaker = () => {
148148
return Math.floor(Math.random() * 1000);
@@ -183,7 +183,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
183183
// returns an object containing the filtered data sorted by data type
184184
const typeSortedHealthData = healthDataGroupedByDataType(filteredHealthData);
185185
// invoking generateCharts with the sorted data will update healthChartsArr in state with the list of charts to be rendered
186-
generateCharts(typeSortedHealthData);
186+
generateHealthCharts(typeSortedHealthData);
187187
}, [category]);
188188

189189
// JJ-ADDITION

0 commit comments

Comments
 (0)