Skip to content

Commit 351af34

Browse files
curiousyangcuriousyang
committed
dummy data debug complete
Co-authored-by: Alex Kolb [email protected] Co-authored-by: Yang Song [email protected] Co-authored-by: Giovanni Flores-lovo [email protected] Co-authored-by: Hannah Santoyo [email protected] Co-authored-by: James Edwards [email protected]
1 parent a6bee86 commit 351af34

12 files changed

+357
-248
lines changed

‎app/charts/HealthChart.tsx

+81-64
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import moment from 'moment';
2-
import React, { useContext, useState, useEffect } from 'react';
2+
import React, { useEffect, useState } from 'react';
3+
4+
import { useParams } from 'react-router-dom';
5+
36
import Plot from 'react-plotly.js';
47
import { all, solo as soloStyle } from './sizeSwitch';
58

69
interface HealthChartProps {
710
key: string;
8-
service: string;
11+
renderService: string;
912
metric: string;
1013
timeList: any;
1114
valueList: any;
@@ -19,11 +22,12 @@ interface SoloStyles {
1922
}
2023

2124
const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
22-
const { service, metric, timeList, valueList, sizing, colourGenerator } = props;
25+
const { service } = useParams<any>();
26+
const { renderService, metric, timeList, valueList, sizing, colourGenerator } = props;
2327
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));
28+
console.log('in the HealthChart');
29+
console.log('healthchart valuelist:', JSON.stringify(valueList));
30+
console.log('healthchart timelist:', JSON.stringify(timeList));
2731

2832
setInterval(() => {
2933
if (solo !== soloStyle) {
@@ -32,69 +36,82 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
3236
}, 20);
3337

3438
const createChart = () => {
35-
const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
36-
const hashedColour = colourGenerator(service);
37-
let plotlyData: {
38-
name: any;
39-
x: any;
40-
y: any;
41-
type: any;
42-
mode: any;
43-
marker: { color: string };
44-
};
45-
plotlyData = {
46-
name: metric,
47-
x: timeArr,
48-
y: valueList,
49-
type: 'scattergl',
50-
mode: 'lines',
51-
marker: { color: hashedColour },
52-
};
53-
const sizeSwitch = sizing === 'all' ? all : solo;
39+
40+
// if (service && renderService && service !== renderService ) {
41+
// console.log("current service is:", service, "render service is:", renderService);
42+
// return (<div><p>Loading...</p></div>)
43+
44+
// }
45+
// else{
46+
47+
const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
48+
const hashedColour = colourGenerator(renderService);
49+
let plotlyData: {
50+
name: any;
51+
x: any;
52+
y: any;
53+
type: any;
54+
mode: any;
55+
marker: { color: string };
56+
};
57+
plotlyData = {
58+
name: metric,
59+
x: timeArr,
60+
y: valueList,
61+
type: 'scattergl',
62+
mode: 'lines',
63+
marker: { color: hashedColour },
64+
};
65+
const sizeSwitch = sizing === 'all' ? all : solo;
66+
67+
return (
68+
<Plot
69+
data={[plotlyData]}
70+
config={{ displayModeBar: false }}
71+
layout={{
72+
title: `${renderService} | ${metric}`,
73+
...sizeSwitch,
74+
font: {
75+
color: '#444d56',
76+
size: 11.5,
77+
family: 'Roboto',
78+
},
79+
paper_bgcolor: 'white',
80+
plot_bgcolor: 'white',
81+
showlegend: true,
82+
legend: {
83+
orientation: 'h',
84+
xanchor: 'center',
85+
x: 0.5,
86+
y: 5,
87+
},
88+
xaxis: {
89+
title: 'Time',
90+
tickmode: 'auto',
91+
tick0: 0,
92+
dtick: 10,
93+
rangemode: 'nonnegative',
94+
mirror: false,
95+
ticks: 'outside',
96+
showline: true,
97+
},
98+
yaxis: {
99+
rangemode: 'nonnegative',
100+
title: metric,
101+
},
102+
}}
103+
/>
104+
);
54105

55-
return (
56-
<Plot
57-
data={[plotlyData]}
58-
config={{ displayModeBar: false }}
59-
layout={{
60-
title: `${service} | ${metric}`,
61-
...sizeSwitch,
62-
font: {
63-
color: '#444d56',
64-
size: 11.5,
65-
family: 'Roboto',
66-
},
67-
paper_bgcolor: 'white',
68-
plot_bgcolor: 'white',
69-
showlegend: true,
70-
legend: {
71-
orientation: 'h',
72-
xanchor: 'center',
73-
x: 0.5,
74-
y: 5,
75-
},
76-
xaxis: {
77-
title: 'Time',
78-
tickmode: 'auto',
79-
tick0: 0,
80-
dtick: 10,
81-
rangemode: 'nonnegative',
82-
mirror: false,
83-
ticks: 'outside',
84-
showline: true,
85-
},
86-
yaxis: {
87-
rangemode: 'nonnegative',
88-
title: metric,
89-
},
90-
}}
91-
/>
92-
);
106+
// }
107+
93108
};
94109

95110
return (
96111
<div className="chart" data-testid="Health Chart">
97-
{createChart()}
112+
{
113+
createChart()
114+
}
98115
</div>
99116
);
100117
});

‎app/components/Header.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const Header: React.FC<HeaderProps> = React.memo(({ app, service, setLive, live
5454
const handleServices = () => {
5555
const joinedServices = selectedServices.join(' ');
5656
history.replace(joinedServices);
57+
setLive(false);
5758
};
5859

5960
const currentModeCSS =

‎app/components/TransferColumns.tsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,9 @@ 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);
73-
const { eventDataList } = useContext(EventContext);
72+
const {healthData} = useContext(HealthContext);
73+
const { eventData } = useContext(EventContext);
74+
const eventDataList = eventData.eventDataList;
7475

7576
// const datalist = [
7677
// {
@@ -84,10 +85,10 @@ const TransferColumns = React.memo(() => {
8485
// },
8586
// ];
8687

87-
const appendMetrics = (eventDataList, datalist) => {
88+
const appendMetrics = (eventDataList, healthDatalist) => {
8889
let pool: any[] = [];
89-
if (datalist && datalist.length > 0) {
90-
datalist.forEach(category => {
90+
if (healthDatalist && healthDatalist.length > 0) {
91+
healthDatalist.forEach(category => {
9192
const tag: string = Object.keys(category)[0]; //Memory
9293
const serviceObj: {} = category[tag][0]; // { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] }
9394
const valuesOfServiceObj: any[] = Object.values(serviceObj);
@@ -122,17 +123,17 @@ const TransferColumns = React.memo(() => {
122123
};
123124

124125
useEffect(() => {
125-
if (datalist && datalist.length >0 && eventDataList && eventDataList.length > 0) {
126+
if (healthData.healthDataList && healthData.healthDataList.length >0 && eventDataList && eventDataList.length > 0) {
126127
setListReady(true);
127128
}
128-
}, [datalist, eventDataList]);
129+
}, [healthData.healthDataList, eventDataList]);
129130

130131

131132
const isMount = useIsMount();
132133

133134
useEffect(() => {
134135
if (!isMount) {
135-
appendMetrics(eventDataList, datalist);
136+
appendMetrics(eventDataList, healthData.healthDataList);
136137
}
137138
}, [listReady]);
138139

0 commit comments

Comments
 (0)