Skip to content

Commit 2f4e8a9

Browse files
FredwardsFredwards
authored
Merge pull request #183 from oslabs-beta/dev
Chronos 7 merge
2 parents 6cf3b59 + 2a29ff6 commit 2f4e8a9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+3118
-744
lines changed

‎.gitignore

Lines changed: 3 additions & 2 deletions
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

‎.vscode/launch.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "node",
6+
"request": "launch",
7+
"name": "Electron: Main",
8+
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
9+
"runtimeArgs": [
10+
"--remote-debugging-port=9223",
11+
"."
12+
],
13+
"windows": {
14+
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
15+
}
16+
},
17+
{
18+
"name": "Electron: Renderer",
19+
"type": "chrome",
20+
"request": "attach",
21+
"port": 9223,
22+
"webRoot": "${workspaceFolder}",
23+
"timeout": 30000,
24+
"url": "http://localhost:8080/",
25+
}
26+
],
27+
"compounds": [
28+
{
29+
"name": "Electron: All",
30+
"configurations": [
31+
"Electron: Main",
32+
"Electron: Renderer"
33+
]
34+
}
35+
]
36+
}

‎__tests__/test_settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"setupRequired":false,"services":[["myPostgres","SQL","postgres://zwezmnqm:[email protected]:5432/zwezmnqm","Online bookstore with that keeps track of orders and customers","Jun 28, 2020 4:58 PM"],["ToddDB","MongoDB","mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority","Web app deployed on AWS","Jul 3, 2020 7:12AM"]],"mode":"dark mode","splash":true,"landingPage":"dashBoard"}
1+
{"setupRequired":false,"services":[["myPostgres","SQL","postgres://zwezmnqm:[email protected]:5432/zwezmnqm","Online bookstore with that keeps track of orders and customers","Jun 28, 2020 4:58 PM"],["ToddDB","MongoDB","mongodb+srv://tdwolf6:[email protected]/Chronos?retryWrites=true&w=majority","Web app deployed on AWS","Jul 3, 2020 7:12AM"],["orders","MongoDB","mongodb+srv://yangsong:[email protected]/orders?retryWrites=true&w=majority","orders","May 31, 2022 5:16 PM"]],"mode":"light mode","splash":true,"landingPage":"dashBoard"}

‎app/charts/EventChart.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { time } from 'd3';
2+
import moment from 'moment';
3+
import React, { useContext, useState, useEffect } from 'react';
4+
import Plot from 'react-plotly.js';
5+
import { all, solo as soloStyle } from './sizeSwitch';
6+
7+
interface EventChartProps {
8+
key: string;
9+
metric: string;
10+
timeList: any;
11+
valueList: any;
12+
sizing: string;
13+
colourGenerator: Function;
14+
}
15+
16+
interface SoloStyles {
17+
height: number;
18+
width: number;
19+
}
20+
21+
const EventChart: React.FC<EventChartProps> = React.memo(props => {
22+
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));
27+
28+
const [solo, setSolo] = useState<SoloStyles | null>(null);
29+
30+
setInterval(() => {
31+
if (solo !== soloStyle) {
32+
setSolo(soloStyle);
33+
}
34+
}, 20);
35+
36+
const createChart = () => {
37+
const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
38+
const hashedColour = colourGenerator(metric);
39+
let plotlyData: {
40+
name: any;
41+
x: any;
42+
y: any;
43+
type: any;
44+
mode: any;
45+
marker: { color: string };
46+
};
47+
plotlyData = {
48+
name: metric,
49+
x: timeArr,
50+
y: valueList,
51+
type: 'scattergl',
52+
mode: 'lines',
53+
marker: { color: hashedColour },
54+
};
55+
const sizeSwitch = sizing === 'all' ? all : solo;
56+
57+
return (
58+
<Plot
59+
data={[plotlyData]}
60+
config={{ displayModeBar: false }}
61+
layout={{
62+
title: metric,
63+
...sizeSwitch,
64+
font: {
65+
color: '#444d56',
66+
size: 11.5,
67+
family: 'Roboto',
68+
},
69+
paper_bgcolor: 'white',
70+
plot_bgcolor: 'white',
71+
showlegend: true,
72+
legend: {
73+
orientation: 'h',
74+
xanchor: 'center',
75+
x: 0.5,
76+
y: 5,
77+
},
78+
xaxis: {
79+
title: 'Time',
80+
tickmode: 'auto',
81+
tick0: 0,
82+
dtick: 10,
83+
rangemode: 'nonnegative',
84+
mirror: false,
85+
ticks: 'outside',
86+
showline: true,
87+
},
88+
yaxis: {
89+
rangemode: 'nonnegative',
90+
title: metric,
91+
},
92+
}}
93+
/>
94+
);
95+
};
96+
97+
return (
98+
<div className="chart" data-testid="Event Chart">
99+
{createChart()}
100+
</div>
101+
);
102+
});
103+
104+
export default EventChart;

‎app/charts/HealthChart.tsx

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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+
119+
export default HealthChart;

‎app/components/Header.tsx

Lines changed: 1 addition & 0 deletions
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 =

0 commit comments

Comments
 (0)