Skip to content

Commit dd87b5b

Browse files
hann7hann7
authored
Merge pull request #20 from oslabs-beta/hannah-gio/health
Complete front end debug with dummy data
2 parents a1ef8e6 + 315f4f8 commit dd87b5b

15 files changed

+1453
-453
lines changed

Diff for: ‎.gitignore

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# JS Project-Specific #
22
#######################
3-
node_modules
3+
# node_modules
44
dist
55
build
66
release-builds
@@ -46,4 +46,5 @@ test_users.json
4646
.Spotlight-V100
4747
.Trashes
4848
ehthumbs.db
49-
Thumbs.db
49+
Thumbs.db
50+
node_modules

Diff for: ‎app/charts/EventChart.tsx

+4-4
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

Diff for: ‎app/charts/HealthChart.tsx

+118-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,119 @@
1-
const HealthChart = 'testing';
1+
import moment from 'moment';
2+
import React, { useEffect, useState } from 'react';
3+
4+
import { useParams } from 'react-router-dom';
5+
6+
import Plot from 'react-plotly.js';
7+
import { all, solo as soloStyle } from './sizeSwitch';
8+
9+
interface HealthChartProps {
10+
key: string;
11+
renderService: string;
12+
metric: string;
13+
timeList: any;
14+
valueList: any;
15+
sizing: string;
16+
colourGenerator: Function;
17+
}
18+
19+
interface SoloStyles {
20+
height: number;
21+
width: number;
22+
}
23+
24+
const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
25+
const { service } = useParams<any>();
26+
const { renderService, metric, timeList, valueList, sizing, colourGenerator } = props;
27+
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));
31+
32+
setInterval(() => {
33+
if (solo !== soloStyle) {
34+
setSolo(soloStyle);
35+
}
36+
}, 20);
37+
38+
const createChart = () => {
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+
);
105+
106+
// }
107+
108+
};
109+
110+
return (
111+
<div className="chart" data-testid="Health Chart">
112+
{
113+
createChart()
114+
}
115+
</div>
116+
);
117+
});
118+
2119
export default HealthChart;

Diff for: ‎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 =

Diff for: ‎app/components/TransferColumns.tsx

+22-21
Original file line numberDiff line numberDiff line change
@@ -69,25 +69,26 @@ 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);
74-
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-
];
86-
87-
const appendMetrics = (eventDataList, datalist) => {
72+
const {healthData} = useContext(HealthContext);
73+
const { eventData } = useContext(EventContext);
74+
const eventDataList = eventData.eventDataList;
75+
76+
// const datalist = [
77+
// {
78+
// Memory: [
79+
// { books: [{ disk_usage: [10, 20] }, { clockSpeed: [8, 16] }] },
80+
// { orders: [{ disk_usage: [5, 25] }, { clockSpeed: [7, 14] }] },
81+
// ],
82+
// },
83+
// {
84+
// CPU: [{ books: [{ cpu_temp: [100, 200] }] }, { orders: [{ cpu_temp: [150, 250] }] }],
85+
// },
86+
// ];
87+
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)