Skip to content

Commit abc50da

Browse files
alon25alon25
committed
styling before merge
1 parent 06d7c79 commit abc50da

16 files changed

Lines changed: 176 additions & 101 deletions

‎app/AComp/Extras.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import '../stylesheets/overviewSubmit.css';
33

4+
45
const Extras = (props) => {
56
const { AddClick, DeleteClick, RefreshClick } = props;
67
return (
@@ -11,22 +12,22 @@ const Extras = (props) => {
1112
key="BackToStart"
1213
onClick={AddClick}
1314
>
14-
Add Database
15+
+
1516
</button>
1617
<button
1718
className="overviewSubmitBtn"
1819
type="submit"
1920
key="goToDeletePage"
2021
onClick={DeleteClick}
2122
>
22-
Delete Database
23+
-
2324
</button>
2425
<button
2526
className="overviewSubmitBtn"
2627
type="submit"
2728
onClick={RefreshClick}
2829
>
29-
Refresh overview
30+
Refresh
3031
</button>
3132
</div>
3233
);

‎app/charts/latency-chart.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const LatencyChart = (props) => {
3333
}]}
3434
layout = {{
3535
height: 400,
36-
width: 400,
36+
width: 650,
3737
font: {
3838
color: 'azure',
3939
size: 15
@@ -58,7 +58,7 @@ const LatencyChart = (props) => {
5858
)
5959
};
6060

61-
return <div>{createChart()}</div>;
61+
return <div className="latencyChart">{createChart()}</div>;
6262
};
6363

6464
export default LatencyChart;

‎app/charts/memory-chart.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const MemoryChart = (props) => {
9191
)
9292
};
9393

94-
return <div>{createChart()}</div>;
94+
return <div className="memoryChart">{createChart()}</div>;
9595
};
9696

9797
export default MemoryChart;

‎app/charts/microservice-traffic.jsx‎

Lines changed: 65 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -5,115 +5,118 @@ import CommunicationsContext from '../context/OverviewContext';
55
const MicroServiceTraffic = (props) => {
66
const communicationsData = useContext(CommunicationsContext).overviewData;
77

8-
9-
//initialize an empty object resObj. This object will store the microservice names as values and its corresponding correlatingId or correlatingid as keys. The microservice names will be stored in array within the order it was to the database.
8+
// initialize an empty object resObj. This object will store the microservice names as values and its corresponding correlatingId or correlatingid as keys. The microservice names will be stored in array within the order it was to the database.
109
const resObj = {};
1110

12-
if(communicationsData.length>0 && communicationsData[0]["_id"]){
13-
//Sort the communication array from latest to earliest document
14-
communicationsData.sort((a,b)=>{
15-
if(new Date(a.timeSent) > new Date(b.timeSent)) return 1;
16-
if(new Date(a.timeSent) < new Date(b.timeSent)) return -1;
11+
if (communicationsData.length > 0 && communicationsData[0]._id) {
12+
// Sort the communication array from latest to earliest document
13+
communicationsData.sort((a, b) => {
14+
if (new Date(a.timeSent) > new Date(b.timeSent)) return 1;
15+
if (new Date(a.timeSent) < new Date(b.timeSent)) return -1;
1716
return 0;
1817
});
19-
20-
//Iterate over sorted communicationsData array from the end to the beginning
21-
for (let i = 0; i < communicationsData.length; i+=1) {
22-
//declare a constant element and initialize it as the object at index i of the communicationsData array
18+
19+
// Iterate over sorted communicationsData array from the end to the beginning
20+
for (let i = 0; i < communicationsData.length; i += 1) {
21+
// declare a constant element and initialize it as the object at index i of the communicationsData array
2322
const element = communicationsData[i];
24-
//Pushes the microservice name into the object
23+
// Pushes the microservice name into the object
2524
if (resObj[element.correlatingId]) {
2625
resObj[element.correlatingId].push(element.currentMicroservice);
27-
}
28-
else resObj[element.correlatingId] = [element.currentMicroservice];
26+
} else resObj[element.correlatingId] = [element.currentMicroservice];
2927
}
30-
}
31-
32-
else {
33-
for (let i = communicationsData.length-1; i >= 0; i--) {
28+
} else {
29+
for (let i = communicationsData.length - 1; i >= 0; i--) {
3430
const element = communicationsData[i];
35-
if (resObj[element.correlatingid]) resObj[element.correlatingid].push(element.currentmicroservice);
31+
if (resObj[element.correlatingid])
32+
resObj[element.correlatingid].push(element.currentmicroservice);
3633
else resObj[element.correlatingid] = [element.currentmicroservice];
3734
// initializing the object with the first microservice
38-
};
35+
}
3936
}
4037

41-
//use object values to destructure locations
38+
// use object values to destructure locations
4239
const tracePoints = Object.values(resObj);
4340

4441
// Declare Micro-server-count dictinary to capture the amount of times a particular server is hit
45-
const microServiceCountdictionary = {};
42+
const microServiceCountdictionary = {};
4643

47-
//array logging every ping present in communications table ---> flat used to flatten multidimensional array and return 1d array
44+
// array logging every ping present in communications table ---> flat used to flatten multidimensional array and return 1d array
4845
const tracePointLog = tracePoints.flat(Infinity);
4946

5047
// iterate over Trace Points
51-
for (let i = 0; i < tracePointLog.length; i+=1) {
52-
48+
for (let i = 0; i < tracePointLog.length; i += 1) {
5349
// populate Micro-count dictionary
5450
if (!microServiceCountdictionary[tracePointLog[i]]) {
5551
microServiceCountdictionary[tracePointLog[i]] = 1;
5652
} else {
57-
microServiceCountdictionary[tracePointLog[i]]+=1
53+
microServiceCountdictionary[tracePointLog[i]] += 1;
5854
}
59-
};
55+
}
6056

6157
// capture values of microServiceCountdictionary to use as data to populate chart object
6258
const serverPingCount = Object.values(microServiceCountdictionary);
6359

6460
// variable 10 points higher than max number in microservicesDictionary aggregation --> variable allows for top level spacing on bar graph
65-
const yAxisHeadRoom = (Math.max(...serverPingCount) + 10);
61+
const yAxisHeadRoom = Math.max(...serverPingCount) + 10;
6662

67-
// Create chart object data to feed into bar component
63+
// Create chart object data to feed into bar component
6864
const myChart = {
69-
//spread dictionary keys inorder to properly label chart x axis
65+
// spread dictionary keys inorder to properly label chart x axis
7066
labels: [...Object.keys(microServiceCountdictionary)],
7167
datasets: [
72-
{
73-
label: 'Times server Pinged',
74-
backgroundColor: 'rgba(241, 207, 70,1)',
75-
borderColor: 'rgba(0,0,0,1)',
76-
borderWidth: 1,
77-
data: [...serverPingCount, 0, yAxisHeadRoom] // spread ping count array into data array to have chart populate the Y axis
78-
}
79-
],
80-
}
68+
{
69+
label: 'Times server Pinged',
70+
backgroundColor: 'rgba(241, 207, 70,1)',
71+
borderColor: 'rgba(0,0,0,1)',
72+
borderWidth: 1,
73+
data: [...serverPingCount, 0, yAxisHeadRoom], // spread ping count array into data array to have chart populate the Y axis
74+
},
75+
],
76+
};
8177

8278
return (
83-
<Plot
84-
data = {[{
85-
type: 'bar',
86-
x: ['Orders', 'Customers', 'Books', 'Reverse-Proxy', 'ReverseProxy'],
87-
y: [...serverPingCount, 0, yAxisHeadRoom],
88-
fill: 'tozeroy',
89-
marker: {'color': '#5C80FF'},
90-
opacity: .7,
91-
mode: 'none',
92-
name: 'Times Server Pinged',
93-
showlegend: true
94-
}]}
95-
layout = {
96-
{
79+
<div className="trafficChart">
80+
<Plot
81+
data={[
82+
{
83+
type: 'bar',
84+
x: [
85+
'Orders',
86+
'Customers',
87+
'Books',
88+
'Reverse-Proxy',
89+
'ReverseProxy',
90+
],
91+
y: [...serverPingCount, 0, yAxisHeadRoom],
92+
fill: 'tozeroy',
93+
marker: { color: '#5C80FF' },
94+
opacity: 0.7,
95+
mode: 'none',
96+
name: 'Times Server Pinged',
97+
showlegend: true,
98+
},
99+
]}
100+
layout={{
97101
height: 400,
98102
width: 400,
99103
font: {
100104
color: 'azure',
101-
size: 15
105+
size: 15,
102106
},
103107
paper_bgcolor: '#8BA6B9',
104108
plot_bgcolor: '#8BA6B9',
105109
legend: {
106110
orientation: 'h',
107111
xanchor: 'center',
108-
x: .5,
109-
y: 5
112+
x: 0.5,
113+
y: 5,
110114
},
111-
yaxis: {rangemode: 'nonnegative'}
112-
}
113-
}
114-
/>
115-
)
115+
yaxis: { rangemode: 'nonnegative' },
116+
}}
117+
/>
118+
</div>
119+
);
116120
};
117121

118122
export default MicroServiceTraffic;
119-

‎app/charts/processes-chart.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const ProcessesChart = (props) => {
7272
]}
7373
layout = {{
7474
height: 400,
75-
width: 400,
75+
width: 650,
7676
font: {
7777
color: 'azure',
7878
size: 15
@@ -90,7 +90,7 @@ const ProcessesChart = (props) => {
9090
)
9191
};
9292

93-
return <div>{createChart()}</div>;
93+
return <div className="processesChart">{createChart()}</div>;
9494
};
9595

9696
export default ProcessesChart;

‎app/charts/request-type-chart.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const RequestTypesChart = (props) => {
6060
)
6161
};
6262

63-
return <div>{createRequestChart()}</div>;
63+
return <div className="requestChart">{createRequestChart()}</div>;
6464
};
6565

6666
export default RequestTypesChart;

‎app/charts/response-code-chart.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ const ResponseCodeChart = (props) => {
9999
);
100100
};
101101

102-
return <div>{createChart()}</div>;
102+
return <div className="responseCodeChart">{createChart()}</div>;
103103
};
104104

105105
export default ResponseCodeChart;

‎app/charts/speed-chart.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ const SpeedChart = (props) => {
5050
},
5151
}]}
5252
layout = {{
53-
height: 400,
54-
width: 400,
53+
height: 250,
54+
width: 250,
5555
font: {
56-
color: 'azure',
56+
color: 'Black',
5757
size: 15
5858
},
59-
paper_bgcolor: '#8BA6B9',
59+
borderRadius: 10,
6060
legend: {
6161
orientation: 'h',
6262
xanchor: 'center',
@@ -67,7 +67,7 @@ const SpeedChart = (props) => {
6767
)
6868
};
6969

70-
return <div>{createChart()}</div>;
70+
return <div className="speedChart">{createChart()}</div>;
7171
};
7272

7373
export default SpeedChart;

‎app/charts/temperature-chart.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const TemperatureChart = (props) => {
5959
)
6060
};
6161

62-
return <div>{createChart()}</div>;
62+
return <div className="temperatureChart">{createChart()}</div>;
6363
};
6464

6565
export default TemperatureChart;

‎app/components/MonitorHeader.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
const MonitorHeader = (props) => {
4+
return (
5+
<div id="Dashboard">
6+
{title}
7+
</div>
8+
);
9+
}

0 commit comments

Comments
 (0)