Skip to content

Commit 50f1307

Browse files
gracepark01gracepark01
authored
Merge pull request #7 from patpat20/master
latest working copy with style changes and fixed glitchy modal
2 parents fadbd9a + 0788756 commit 50f1307

26 files changed

+150
-243
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
node_modules
22
.eslintrc.js
33
.DS_Store
4-
user/settings.json
54
dist
65
build
76
coverage

‎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: 10 additions & 45 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({});
@@ -139,7 +105,7 @@ const RouteLocations = props => {
139105
// check if node exists if not then add node
140106
let id = route[i].microservice
141107
if (nodeListObj[id] === undefined) {
142-
nodeListObj[id] = { id: id, label: id, color: { background: '#24d2f1', border: 'white', hover: {background:'#4d55ec',border: 'white'} }, shape: 'circle' }
108+
nodeListObj[id] = { id: id, label: id, color: { background: '#24d2f1', border: 'white', hover: { background: '#4d55ec', border: 'white' } }, shape: 'circle' }
143109
}
144110
// add edge from node 1 to node 2 (repeat til end)
145111
if (i !== 0) {
@@ -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
@@ -198,9 +163,9 @@ const RouteLocations = props => {
198163

199164

200165
return (
201-
<div className='traceContainer'>
202-
<span id='tracesTitle'>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' }} />
166+
<div className='traceContainer'>
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/RouteTrace.jsx‎

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎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',

0 commit comments

Comments
 (0)