Skip to content

Commit 6941412

Browse files
lu0713lu0713
authored
Merge pull request #21 from lu0713/master
Commented out console.logs, incorporated RouteChart removal of doubled edges
2 parents 429f595 + ded6556 commit 6941412

Some content is hidden

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

49 files changed

+1531
-270
lines changed

‎app/assets/mongo-icon-color.png

20.2 KB
Loading

‎app/assets/mongo-icon-green-light.png

14.6 KB
Loading

‎app/assets/mongo-icon-green.png

14.6 KB
Loading

‎app/assets/mongo-icon-white.png

32.7 KB
Loading

‎app/assets/postgres-icon-white.png

11.2 KB
Loading

‎app/assets/postgres-icon-yellow-light.png

5.25 KB
Loading

‎app/assets/postgres-icon-yellow.png

5.26 KB
Loading

‎app/charts/LatencyChart.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ const LatencyChart = React.memo(() => {
1616
type: 'scattergl',
1717
y: yAxis,
1818
mode: 'lines',
19-
marker: { color: '#daaa17' },
19+
marker: { color: '#fc4039' },
2020
},
2121
]}
2222
layout={{
2323
title: 'Latency',
2424
height: 300,
2525
width: 300,
2626
font: {
27-
color: 'black',
27+
color: '#444d56',
2828
size: 11.5,
29-
family: 'Open Sans',
29+
family: 'Roboto',
3030
},
3131
paper_bgcolor: 'white',
3232
plot_bgcolor: 'white',

‎app/charts/MemoryChart.tsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@ const MemoryChart = React.memo(() => {
1515
{
1616
type: 'scattergl',
1717
fill: 'tonexty',
18-
fillcolor: 'rgb(0, 237, 160)',
18+
fillcolor: '#fc4039',
1919
mode: 'none',
2020
y: free,
2121
name: 'Free Memory',
2222
},
2323
{
2424
type: 'scatter',
2525
fill: 'tonexty',
26-
fillcolor: 'rgba(0, 237, 160, .4)',
26+
fillcolor: '#4b54ea',
2727
mode: 'none',
2828
y: used,
2929
name: 'Used Memory',
3030
},
3131
{
3232
type: 'scatter',
3333
fill: 'tonexty',
34-
fillcolor: 'rgba(74, 78, 238, .5)',
34+
fillcolor: '#3788fc',
3535
mode: 'none',
3636
y: active,
3737
name: 'Active Memory',
@@ -42,21 +42,26 @@ const MemoryChart = React.memo(() => {
4242
height: 300,
4343
width: 300,
4444
font: {
45-
color: 'black',
45+
color: '#444d56',
4646
size: 11.5,
47-
family: 'Open Sans',
47+
family: 'Roboto',
4848
},
4949
paper_bgcolor: 'white',
5050
plot_bgcolor: 'white',
5151
legend: {
5252
orientation: 'h',
5353
xanchor: 'center',
5454
x: 0.5,
55+
y: -1.0,
56+
font: {
57+
size: 9
58+
}
5559
},
5660
xaxis: {
5761
tickmode: 'linear',
5862
tick0: 0,
5963
dtick: 10,
64+
title: 'Time Elapsed (min)',
6065
},
6166
yaxis: {
6267
title: 'Bytes'

‎app/charts/ProcessesChart.tsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ProcessesChart = React.memo(() => {
1818
mode: 'markers',
1919
name: 'Running Processes',
2020
marker: {
21-
color: '#00d3f2',
21+
color: '#3788fc',
2222
size: 3,
2323
},
2424
},
@@ -28,7 +28,7 @@ const ProcessesChart = React.memo(() => {
2828
mode: 'markers',
2929
name: 'Blocked Processes',
3030
marker: {
31-
color: '#00eda0',
31+
color: '#fc4039',
3232
size: 3,
3333
},
3434
},
@@ -38,7 +38,7 @@ const ProcessesChart = React.memo(() => {
3838
mode: 'markers',
3939
name: 'Sleeping Processes',
4040
marker: {
41-
color: '#4a4eee',
41+
color: '#4b54ea',
4242
size: 3,
4343
},
4444
},
@@ -48,19 +48,24 @@ const ProcessesChart = React.memo(() => {
4848
height: 300,
4949
width: 300,
5050
font: {
51-
color: 'black',
51+
color: '#444d56',
5252
size: 11.5,
53-
family: 'Open Sans',
53+
family: 'Roboto',
5454
},
5555
paper_bgcolor: 'white',
5656
plot_bgcolor: 'white',
5757
legend: {
5858
orientation: 'h',
5959
xanchor: 'center',
6060
x: 0.5,
61+
y: -1.0,
62+
font: {
63+
size: 9
64+
}
6165
},
6266
xaxis: {
6367
dtick: 10,
68+
title: 'Time Elapsed (min)',
6469
},
6570
yaxis: {
6671
title: 'Number of Processes'

‎app/charts/RequestTypesChart.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useContext } from 'react';
22
import Plot from 'react-plotly.js';
33
import { CommsContext } from '../context/CommsContext';
4+
import '../stylesheets/constants.scss';
45

56
const RequestTypesChart: React.FC = React.memo(() => {
67
const { commsData } = useContext(CommsContext);
@@ -44,7 +45,7 @@ const RequestTypesChart: React.FC = React.memo(() => {
4445
type: 'pie',
4546
textposition: 'inside',
4647
marker: {
47-
colors: ['#fa1a58', '#4a4eee', '#00eda0', '#00d3f2', '#73605b', '#d09683'],
48+
colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
4849
},
4950

5051
},
@@ -59,17 +60,17 @@ const RequestTypesChart: React.FC = React.memo(() => {
5960
height: 300,
6061
width: 300,
6162
font: {
62-
color: 'black',
63+
color: '#444d56',
6364
size: 11.5,
64-
family: 'Open Sans',
65+
family: 'Roboto',
6566
},
6667
paper_bgcolor: 'white',
6768
legend: {
6869
orientation: 'h',
6970
xanchor: 'center',
7071
x: 0.5,
7172
font: {
72-
size: 6,
73+
size: 7,
7374
}
7475
},
7576
}}

‎app/charts/ResponseCodesChart.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
5151
{
5252
values: Object.values(responseCodes),
5353
labels: [
54-
'Informational (100-199',
54+
'Informational (100-199)',
5555
'Success (200-299)',
5656
'Redirects (300-399)',
5757
'Client errors (400-499)',
@@ -61,7 +61,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
6161
textposition: 'inside',
6262
domain: { y: [0, 2] },
6363
marker: {
64-
colors: ['#fa1a58', '#f3f5fe', '#00eda0', '#00fff2', '#73605b'],
64+
colors: ['#fc4039', '#4b54ea', '#3788fc', '#32b44f', '#9c27b0'],
6565
},
6666
},
6767
]}
@@ -75,17 +75,17 @@ const ResponseCodesChart: React.FC = React.memo(() => {
7575
height: 300,
7676
width: 300,
7777
font: {
78-
color: 'black',
78+
color: '#444d56',
7979
size: 11.5,
80-
family: 'Open Sans',
80+
family: 'Roboto',
8181
},
8282
paper_bgcolor: 'white',
8383
legend: {
8484
orientation: 'h',
8585
xanchor: 'center',
8686
x: 0.5,
8787
font: {
88-
size: 6,
88+
size: 7,
8989
}
9090
},
9191
}}

‎app/charts/RouteChart.jsx

+36-37
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const RouteChart = React.memo(() => {
6565
height: 300,
6666
width: 300,
6767
textAlign: 'center',
68-
color: '#888888',
68+
color: '#444d56',
6969
whiteSpace: 'nowrap',
7070
backgroundColor: '#ffffff',
7171
borderRadius: 3,
@@ -83,16 +83,10 @@ const RouteChart = React.memo(() => {
8383
// check if node exists if not then add node
8484
let id = route[i].microservice;
8585
if (nodeListObj[id] === undefined) {
86-
nodeListObj[id] = {
87-
id: id,
88-
label: id,
89-
color: {
90-
background: '#24d2f1',
91-
border: 'white',
92-
hover: { background: '#4d55ec', border: 'white' },
93-
},
94-
shape: 'circle',
95-
};
86+
nodeListObj[id] = {
87+
id: id,
88+
label: id
89+
}
9690
}
9791
// add edge from node to node (repeat til end)
9892
if (i !== 0) {
@@ -129,43 +123,48 @@ const RouteChart = React.memo(() => {
129123
hierarchical: false,
130124
},
131125
edges: {
132-
color: '#000000',
126+
color: "#444d56",
133127
physics: true,
134128
smooth: {
135-
type: 'curvedCCW',
136-
forceDirection: 'none',
137-
roundness: 0.3,
129+
type: "curvedCCW",
130+
forceDirection: "none",
131+
roundness: 0.3
132+
},
133+
font: {
134+
color: '#444d56',
135+
size: 9,
138136
},
139137
},
140-
};
138+
nodes: {
139+
borderWidth: 0,
140+
color: {
141+
background: '#3788fc',
142+
hover: {
143+
background: '#febc2c',
144+
},
145+
highlight: {
146+
background: '#fc4039',
147+
}
148+
},
149+
shape: 'circle',
150+
font: {
151+
color: '#ffffff',
152+
size: 10,
153+
face: 'roboto'
154+
},
155+
}
156+
}
141157

142158
const events = {
143159
select: function (event) {
144-
var { nodes, edges } = event;
145-
console.log('Selected nodes:');
146-
console.log(nodes);
147-
console.log('Selected edges:');
148-
console.log(edges);
160+
let { nodes, edges } = event;
149161
},
150162
};
151163

152164
return (
153-
<div className="traceContainer">
154-
<span id="tracesTitle">Route Traces</span>
155-
<Graph
156-
className={classes.paper}
157-
graph={graph}
158-
options={options}
159-
events={events}
160-
style={{
161-
fontSize: '2px',
162-
color: '#555555',
163-
fontFamily: 'Open Sans',
164-
boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)',
165-
backgroundColor: 'white',
166-
borderRadius: '3px',
167-
}}
168-
/>
165+
<div className='traceContainer'>
166+
<span id='tracesTitle'>Route Traces</span>
167+
<Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontFamily: 'Roboto', boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)', backgroundColor: 'white', borderRadius: '3px' }} />
169168
</div>
170169
);
171170
});

‎app/charts/SpeedChart.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,19 @@ const SpeedChart = React.memo(() => {
2222
y: yAxis,
2323
type: 'scatter',
2424
mode: 'lines+markers',
25+
marker: {
26+
color: '#3788fc'
27+
},
2528
},
2629
]}
2730
layout={{
2831
title: 'Speed Chart',
2932
height: 300,
3033
width: 300,
3134
font: {
32-
color: 'black',
35+
color: '#444d56',
3336
size: 11.5,
34-
family: 'Open Sans',
37+
family: 'Roboto',
3538
},
3639
xaxis: {
3740
title: 'Time (EST)',

‎app/charts/TemperatureChart.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const TemperatureChart = React.memo(() => {
2323
type: 'scatter',
2424
fill: 'tozeroy',
2525
mode: 'lines',
26-
fillcolor: 'rgb(250, 26, 88)',
26+
fillcolor: '#4b54ea',
2727
x: timeArr,
2828
y: yAxis,
2929
name: 'CPU Temperature',
@@ -36,9 +36,9 @@ const TemperatureChart = React.memo(() => {
3636
height: 300,
3737
width: 300,
3838
font: {
39-
color: 'black',
39+
color: '#444d56',
4040
size: 11.5,
41-
family: 'Open Sans',
41+
family: 'Roboto',
4242
},
4343
paper_bgcolor: 'white',
4444
plot_bgcolor: 'white',

‎app/charts/TrafficChart.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,20 @@ const TrafficChart = React.memo(() => {
3232
x: [...xAxis],
3333
y: [...serverPings, 0, yAxisHeadRoom],
3434
fill: 'tozeroy',
35-
marker: { color: '#5C80FF' },
35+
marker: { color: '#fc4039' },
3636
mode: 'none',
37-
name: 'Open Sans',
38-
showlegend: true,
37+
name: 'Times Server Pinged',
38+
showlegend: false,
3939
},
4040
]}
4141
layout={{
4242
title: 'Server Traffic',
4343
height: 300,
4444
width: 300,
4545
font: {
46-
color: 'black',
46+
color: '#444d56',
4747
size: 11.5,
48-
family: 'Open Sans',
48+
family: 'Roboto',
4949
},
5050
paper_bgcolor: 'white',
5151
plot_bgcolor: 'white',
@@ -55,7 +55,11 @@ const TrafficChart = React.memo(() => {
5555
x: 0.5,
5656
y: 5,
5757
},
58-
yaxis: { rangemode: 'nonnegative' },
58+
yaxis: {
59+
rangemode: 'nonnegative',
60+
title: 'Times Server Pinged',
61+
showline: true,
62+
},
5963
}}
6064
/>
6165
</div>

0 commit comments

Comments
 (0)