Skip to content

Commit e05981f

Browse files
lu0713lu0713
committed
missing database connect fix
1 parent 9d957d4 commit e05981f

File tree

13 files changed

+102
-116
lines changed

13 files changed

+102
-116
lines changed

‎app/charts/LatencyChart.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ const LatencyChart = () => {
2121
]}
2222
layout={{
2323
title: 'Latency',
24-
height: 400,
25-
width: 400,
24+
height: 300,
25+
width: 300,
2626
font: {
2727
color: 'black',
28-
size: 15,
29-
family: 'Nunito sans, sans serif',
28+
size: 11.5,
29+
family: 'Open Sans',
3030
},
3131
paper_bgcolor: 'white',
3232
plot_bgcolor: 'white',
@@ -38,9 +38,10 @@ const LatencyChart = () => {
3838
y: 5,
3939
},
4040
xaxis: {
41+
title: 'Time Elapsed (min)',
4142
tickmode: 'linear',
4243
tick0: 0,
43-
dtick: 5,
44+
dtick: 10,
4445
rangemode: 'nonnegative',
4546
mirror: false,
4647
ticks: 'outside',

‎app/charts/MemoryChart.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ const MemoryChart = () => {
3939
]}
4040
layout={{
4141
title: 'Memory Traces',
42-
height: 400,
43-
width: 400,
42+
height: 300,
43+
width: 300,
4444
font: {
4545
color: 'black',
46-
size: 15,
47-
family: 'Nunito sans, sans serif',
46+
size: 11.5,
47+
family: 'Open Sans',
4848
},
4949
paper_bgcolor: 'white',
5050
plot_bgcolor: 'white',
@@ -56,8 +56,11 @@ const MemoryChart = () => {
5656
xaxis: {
5757
tickmode: 'linear',
5858
tick0: 0,
59-
dtick: 5,
59+
dtick: 10,
6060
},
61+
yaxis: {
62+
title: 'Bytes'
63+
}
6164
}}
6265
/>
6366
);

‎app/charts/ProcessesChart.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@ const ProcessesChart = () => {
4545
]}
4646
layout={{
4747
title: 'Process Overview',
48-
height: 400,
49-
width: 400,
48+
height: 300,
49+
width: 300,
5050
font: {
5151
color: 'black',
52-
size: 15,
53-
family: 'Nunito sans, sans serif',
52+
size: 11.5,
53+
family: 'Open Sans',
5454
},
5555
paper_bgcolor: 'white',
5656
plot_bgcolor: 'white',
@@ -59,6 +59,12 @@ const ProcessesChart = () => {
5959
xanchor: 'center',
6060
x: 0.5,
6161
},
62+
xaxis: {
63+
dtick: 10,
64+
},
65+
yaxis: {
66+
title: 'Number of Processes'
67+
}
6268
}}
6369
/>
6470
);

‎app/charts/RequestTypesChart.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ const RequestTypesChart: React.FC = () => {
4646
marker: {
4747
colors: ['#fa1a58', '#4a4eee', '#00eda0', '#00d3f2', '#73605b', '#d09683'],
4848
},
49+
4950
},
5051
]}
5152
config={{
@@ -54,20 +55,22 @@ const RequestTypesChart: React.FC = () => {
5455
layout={{
5556
title: {
5657
text: 'Request Types',
57-
font: { size: 22 },
5858
},
59-
height: 400,
60-
width: 400,
59+
height: 300,
60+
width: 300,
6161
font: {
6262
color: 'black',
63-
size: 15,
64-
family: 'Nunito sans, sans serif',
63+
size: 11.5,
64+
family: 'Open Sans',
6565
},
6666
paper_bgcolor: 'white',
6767
legend: {
6868
orientation: 'h',
6969
xanchor: 'center',
7070
x: 0.5,
71+
font: {
72+
size: 6,
73+
}
7174
},
7275
}}
7376
/>

‎app/charts/ResponseCodesChart.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ const ResponseCodesChart: React.FC = () => {
5151
{
5252
values: Object.values(responseCodes),
5353
labels: [
54-
'Informational 1xx',
55-
'Successful 2xx',
56-
'Redirectional 3xx',
57-
'Client Error 4xx',
58-
'Server Error 5xx',
54+
'Informational (100-199',
55+
'Success (200-299)',
56+
'Redirects (300-399)',
57+
'Client errors (400-499)',
58+
'Server errors (500-599)',
5959
],
6060
type: 'pie',
6161
textposition: 'inside',
@@ -71,20 +71,22 @@ const ResponseCodesChart: React.FC = () => {
7171
layout={{
7272
title: {
7373
text: 'Response Status Codes',
74-
font: { size: 22 },
7574
},
76-
height: 400,
77-
width: 400,
75+
height: 300,
76+
width: 300,
7877
font: {
7978
color: 'black',
80-
size: 15,
81-
family: 'Nunito sans, sans serif',
79+
size: 11.5,
80+
family: 'Open Sans',
8281
},
8382
paper_bgcolor: 'white',
8483
legend: {
8584
orientation: 'h',
8685
xanchor: 'center',
8786
x: 0.5,
87+
font: {
88+
size: 6,
89+
}
8890
},
8991
}}
9092
/>

app/charts/RouteCopy.jsx renamed to app/charts/RouteChart.jsx

Lines changed: 8 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
import {
2-
IconButton,
3-
Modal,
4-
Card,
5-
CardHeader,
6-
CardContent,
7-
Button,
8-
Typography
9-
} from '@material-ui/core';
101
import { Theme, makeStyles } from '@material-ui/core/styles';
112
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
123
import React, { useContext } from 'react';
@@ -90,40 +81,15 @@ const RouteLocations = props => {
9081

9182
const useStyles = makeStyles(theme => ({
9283
paper: {
93-
height: 280,
94-
width: 280,
84+
height: 300,
85+
width: 300,
9586
textAlign: 'center',
9687
color: '#888888',
9788
whiteSpace: 'nowrap',
9889
backgroundColor: '#ffffff',
99-
borderRadius: 8,
90+
borderRadius: 3,
10091
border: '0',
101-
boxShadow: '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)',
102-
'&:hover, &.Mui-focusVisible': {
103-
backgroundColor: `#ccd8e1`,
104-
color: '#ffffff',
105-
},
106-
},
107-
hover: {
108-
boxShadow: 'none',
109-
color: 'transparent'
110-
},
111-
btnStyle: {
112-
position: 'absolute',
113-
top: -10,
114-
left: -10,
115-
margin: '0',
116-
color: '#eeeeee',
117-
borderRadius: '0',
118-
backgroundColor: 'transparent',
119-
'&:hover': {
120-
backgroundColor: 'none'
121-
}
122-
},
123-
icon: {
124-
width: '75px',
125-
height: '75px',
126-
boxShadow: 'none',
92+
boxShadow: '2px 2px 6px #bbbbbb',
12793
},
12894
}));
12995
const classes = useStyles({});
@@ -168,9 +134,8 @@ const RouteLocations = props => {
168134
// edges: [{ from: 4, to: 2, label: 'hello' }, { from: 'one', to: 3 }, { from: 2, to: 4 }, { from: 2, to: 5 }]
169135
// };
170136
const options = {
171-
172-
height: '400px',
173-
width: '400px',
137+
height: '300px',
138+
width: '300px',
174139
style: 'surface',
175140
layout: {
176141
hierarchical: false
@@ -199,8 +164,8 @@ const RouteLocations = props => {
199164

200165
return (
201166
<div className='traceContainer'>
202-
<span id='trace'>Traces</span>
203-
<Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontSize: '8px', color: '#555555', fontFamily: 'Open Sans', boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', backgroundColor: 'white' }} />
167+
<span id='tracesTitle'>Route Traces</span>
168+
<Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontSize: '2px', color: '#555555', fontFamily: 'Open Sans', boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)', backgroundColor: 'white', borderRadius: '3px' }} />
204169
</div>
205170
);
206171
};

‎app/charts/SpeedChart.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const SpeedChart = () => {
1010
const createChart = () => {
1111
let timeArr;
1212
if (time !== undefined) {
13-
timeArr = time.map((el: any) => moment(el).format('h:mm:ss A'));
13+
timeArr = time.map((el: any) => moment(el).format('hh:mm A'));
1414
}
1515

1616
return (
@@ -26,19 +26,19 @@ const SpeedChart = () => {
2626
]}
2727
layout={{
2828
title: 'Speed Chart',
29-
height: 400,
30-
width: 400,
29+
height: 300,
30+
width: 300,
3131
font: {
3232
color: 'black',
33-
size: 14,
34-
family: 'Nunito sans, sans serif',
33+
size: 11.5,
34+
family: 'Open Sans',
3535
},
3636
xaxis: {
37-
title: 'Time (PST)',
37+
title: 'Time (EST)',
3838
tickmode: 'linear',
39-
tickformat: '%d %B (%a)<br>%Y',
40-
tickangle: 30,
41-
range: [0, 5],
39+
tickformat: '%H %M %p',
40+
// tickangle: 30,
41+
// range: [0, 5],
4242
rangemode: 'nonnegative',
4343
mirror: false,
4444
ticks: 'outside',

‎app/charts/TemperatureChart.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@ const TemperatureChart = () => {
3333
config={{ responsive: true }}
3434
layout={{
3535
title: 'CPU Temperature',
36-
height: 400,
37-
width: 400,
36+
height: 300,
37+
width: 300,
3838
font: {
3939
color: 'black',
40-
size: 15,
41-
family: 'Nunito sans, sans serif',
40+
size: 11.5,
41+
family: 'Open Sans',
4242
},
4343
paper_bgcolor: 'white',
4444
plot_bgcolor: 'white',
@@ -49,9 +49,9 @@ const TemperatureChart = () => {
4949
y: 5,
5050
},
5151
xaxis: {
52-
title: month,
52+
title: 'Time (EST)',
5353
tickmode: 'linear',
54-
tickformat: '%d %B (%a)<br>%Y',
54+
tickformat: '%H %M %p',
5555
mirror: false,
5656
ticks: 'outside',
5757
showline: true,

‎app/charts/TrafficChart.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,18 @@ const TrafficChart = () => {
3434
fill: 'tozeroy',
3535
marker: { color: '#5C80FF' },
3636
mode: 'none',
37-
name: 'Times Server Pinged',
37+
name: 'Open Sans',
3838
showlegend: true,
3939
},
4040
]}
4141
layout={{
4242
title: 'Server Traffic',
43-
height: 400,
44-
width: 400,
43+
height: 300,
44+
width: 300,
4545
font: {
4646
color: 'black',
47-
size: 15,
48-
family: 'Nunito sans, sans serif',
47+
size: 11.5,
48+
family: 'Open Sans',
4949
},
5050
paper_bgcolor: 'white',
5151
plot_bgcolor: 'white',

‎app/containers/GraphsContainer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import RequestTypesChart from '../charts/RequestTypesChart';
1414
import ResponseCodesChart from '../charts/ResponseCodesChart';
1515
import TrafficChart from '../charts/TrafficChart';
1616
import DockerChart from '../charts/DockerChart';
17-
import RouteCopy from '../charts/RouteCopy';
17+
import RouteChart from '../charts/RouteChart';
1818
import '../stylesheets/GraphsContainer.scss';
1919

2020
export interface Params {
@@ -73,7 +73,7 @@ const GraphsContainer: React.SFC<GraphsContainerProps> = () => {
7373
<RequestTypesChart />
7474
<ResponseCodesChart />
7575
<TrafficChart />
76-
<RouteCopy />
76+
<RouteChart />
7777
</div>
7878
) : (
7979
<div className="graphs">
@@ -83,7 +83,7 @@ const GraphsContainer: React.SFC<GraphsContainerProps> = () => {
8383
<MemoryChart />
8484
<ProcessesChart />
8585
<DockerChart />
86-
{/* <RouteCopy /> */}
86+
<RouteChart />
8787
</div>
8888
)}
8989
</div>

0 commit comments

Comments
 (0)