Skip to content

Commit 5305df5

Browse files
Umius-BrianUmius-Brian
committed
Re-render processes chart
1 parent 0925717 commit 5305df5

5 files changed

Lines changed: 249 additions & 25 deletions

File tree

‎app/charts/plotly_copy_processes.jsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useContext } from 'react';
2+
import { Bar } from 'react-chartjs-2';
3+
import HealthContext from '../context/DetailsContext';
4+
5+
const ProcessesChart = (props) => {
6+
const healthData = useContext(HealthContext).detailData;
7+
const createChart = () => {
8+
const communicationLabel = [];
9+
const totalProcesses = [];
10+
const runningProcesses = [];
11+
const blockedProcesses = [];
12+
const sleepingProcesses = [];
13+
14+
for (let i = 0; i < healthData.length; i += 1) {
15+
const element = healthData[i];
16+
// If using a SQL Database
17+
if (element.currentmicroservice === props.service) {
18+
communicationLabel.push(i);
19+
totalProcesses.push(element.totalnumprocesses);
20+
runningProcesses.push(element.numrunningprocesses);
21+
blockedProcesses.push(element.numblockedprocesses);
22+
sleepingProcesses.push(element.numsleepingprocesses);
23+
}
24+
// If using a Mongo Database
25+
if (element.currentMicroservice === props.service && element.cpuCurrentSpeed) {
26+
communicationLabel.push(i);
27+
totalProcesses.push(element.numTotalProcesses);
28+
runningProcesses.push(element.numRunningProcesses);
29+
blockedProcesses.push(element.numBlockedProcesses);
30+
sleepingProcesses.push(element.numSleepingProcesses);
31+
}
32+
}
33+
34+
const chartData = {
35+
datasets: [{
36+
label: 'Blocked Processes',
37+
backgroundColor: 'rgb(198, 42, 177)',
38+
data: blockedProcesses,
39+
}, {
40+
label: 'Sleeping Processes',
41+
backgroundColor: 'rgb(252, 170, 52)',
42+
data: sleepingProcesses,
43+
}, {
44+
label: 'Running Processes',
45+
backgroundColor: 'rgb(239, 91, 145)',
46+
data: runningProcesses,
47+
}, {
48+
label: 'Total Processes',
49+
backgroundColor: 'rgb(182, 219, 26)',
50+
data: totalProcesses,
51+
}],
52+
labels: communicationLabel,
53+
};
54+
55+
return <Bar data={chartData} />;
56+
};
57+
58+
return <div>{createChart()}</div>;
59+
};
60+
61+
export default ProcessesChart;

‎app/charts/plotly_copy_response.jsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React, { useContext } from 'react';
2+
import { Doughnut } from 'react-chartjs-2';
3+
import CommunicationsContext from '../context/OverviewContext';
4+
5+
const ResponseCodeChart = (props) => {
6+
const communicationsData = useContext(CommunicationsContext).overviewData;
7+
8+
9+
10+
const createChart = () => {
11+
const responseCodes = {
12+
'100-199': 0,
13+
'200-299': 0,
14+
'300-399': 0,
15+
'400-499': 0,
16+
'500-599': 0,
17+
'NULL': 0,
18+
};
19+
20+
for (let i = 0; i < communicationsData.length; i += 1) {
21+
const element = communicationsData[i];
22+
// If Mongo Else SQL
23+
if ((element.currentMicroservice === props.service) && element.resStatus) {
24+
const statusCode = element.resStatus;
25+
if (statusCode <= 199) {
26+
responseCodes['100-199'] += 1;
27+
} else if (statusCode <= 299) {
28+
responseCodes['200-299'] += 1;
29+
} else if (statusCode <= 399) {
30+
responseCodes['300-399'] += 1;
31+
} else if (statusCode <= 499) {
32+
responseCodes['400-499'] += 1;
33+
} else if (statusCode <= 599) {
34+
responseCodes['500-599'] += 1;
35+
} else {
36+
responseCodes['NULL'] += 1;
37+
}
38+
} else if ((element.currentmicroservice === props.service) && element.resstatus) {
39+
const statusCode = element.resstatus;
40+
if (statusCode <= 199) {
41+
responseCodes['100-199'] += 1;
42+
} else if (statusCode <= 299) {
43+
responseCodes['200-299'] += 1;
44+
} else if (statusCode <= 399) {
45+
responseCodes['300-399'] += 1;
46+
} else if (statusCode <= 499) {
47+
responseCodes['400-499'] += 1;
48+
} else if (statusCode <= 599) {
49+
responseCodes['500-599'] += 1;
50+
} else {
51+
responseCodes['NULL'] += 1;
52+
}
53+
}
54+
}
55+
56+
const chartData = {
57+
datasets: [
58+
{
59+
data: Object.values(responseCodes),
60+
backgroundColor: [
61+
'rgb(2, 210, 249)',
62+
'rgb(198, 42, 177)',
63+
'rgb(252, 170, 52)',
64+
'rgb(239, 91, 145)',
65+
'rgb(182, 219, 26)',
66+
'rgb(254, 255, 0)',
67+
],
68+
},
69+
],
70+
labels: ['100-199', '200-299', '300-399', '400-499', '500-599', 'Null'],
71+
};
72+
return <Doughnut data={chartData} />;
73+
};
74+
return <div>{createChart()}</div>;
75+
};
76+
77+
export default ResponseCodeChart;

‎app/charts/plotly_copy_speed.jsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { useContext } from 'react';
2+
import { Line } from 'react-chartjs-2';
3+
import HealthContext from '../context/DetailsContext';
4+
5+
const SpeedChart = (props) => {
6+
const healthData = useContext(HealthContext).detailData;
7+
8+
const createChart = () => {
9+
const xAxis = [];
10+
const yAxis = [];
11+
12+
for (let i = 0; i < healthData.length; i += 1) {
13+
const element = healthData[i];
14+
// If using a SQL Database
15+
if (element.currentmicroservice === props.service && element.cpucurrentspeed) {
16+
xAxis.push(i);
17+
yAxis.push(element.cpucurrentspeed);
18+
}
19+
20+
// If using a Mongo Database
21+
if (element.currentMicroservice === props.service && element.cpuCurrentSpeed) {
22+
xAxis.push(i);
23+
yAxis.push(element.cpuCurrentSpeed);
24+
}
25+
}
26+
27+
const chartData = {
28+
datasets: [
29+
{
30+
label: `CPU Speed of ${props.service}`,
31+
data: yAxis,
32+
backgroundColor: [
33+
'rgb(2, 210, 249)',
34+
],
35+
},
36+
],
37+
options: {
38+
},
39+
xAxisID: 'Speed',
40+
yAxisID: 'Communicaton',
41+
labels: xAxis,
42+
};
43+
44+
return <Line data={chartData} />;
45+
};
46+
47+
return <div>{createChart()}</div>;
48+
};
49+
50+
export default SpeedChart;

‎app/charts/processes-chart.jsx‎

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useContext } from 'react';
2-
import { Bar } from 'react-chartjs-2';
2+
import Plot from 'react-plotly.js';
33
import HealthContext from '../context/DetailsContext';
44

55
const ProcessesChart = (props) => {
@@ -31,29 +31,65 @@ const ProcessesChart = (props) => {
3131
}
3232
}
3333

34-
const chartData = {
35-
datasets: [{
36-
label: 'Blocked Processes',
37-
backgroundColor: 'rgb(198, 42, 177)',
38-
data: blockedProcesses,
39-
}, {
40-
label: 'Sleeping Processes',
41-
backgroundColor: 'rgb(252, 170, 52)',
42-
data: sleepingProcesses,
43-
}, {
44-
label: 'Running Processes',
45-
backgroundColor: 'rgb(239, 91, 145)',
46-
data: runningProcesses,
47-
}, {
48-
label: 'Total Processes',
49-
backgroundColor: 'rgb(182, 219, 26)',
50-
data: totalProcesses,
51-
}],
52-
labels: communicationLabel,
53-
};
54-
55-
return <Bar data={chartData} />;
56-
};
34+
return (
35+
<Plot
36+
data = {[
37+
{
38+
type: 'scatter',
39+
x: {autorange: true},
40+
y: totalProcesses,
41+
mode: 'markers',
42+
rangemode: 'nonnegative',
43+
name: 'Total Processes',
44+
marker: {
45+
color: 'red',
46+
size: 3
47+
}},
48+
{
49+
type: 'scatter',
50+
x: {autorange: true},
51+
y: runningProcesses,
52+
mode: 'markers',
53+
rangemode: 'nonnegative',
54+
name: 'Running Processes',
55+
marker: {
56+
color: '#3ec1d3',
57+
size: 3
58+
}},
59+
{
60+
type: 'scatter',
61+
x: {autorange: true},
62+
y: blockedProcesses,
63+
mode: 'markers',
64+
rangemode: 'nonnegative',
65+
name: 'Blocked Processes',
66+
marker: {
67+
color: '#ff9a00',
68+
size: 3
69+
}},
70+
{
71+
type: 'scatter',
72+
x: {autorange: true},
73+
y: sleepingProcesses,
74+
mode: 'markers',
75+
rangemode: 'nonnegative',
76+
name: 'Sleeping Processes',
77+
marker: {
78+
color: '#ff165d',
79+
size: 3
80+
}},
81+
{labels: communicationLabel},
82+
]}
83+
layout = {{
84+
width: 500,
85+
height: 500,
86+
paper_bgcolor: '#fffbe0',
87+
plot_bgcolor: '#fffbe0',
88+
legend: {itemsizing: 'constant'}
89+
}}
90+
/>
91+
)};
92+
5793

5894
return <div>{createChart()}</div>;
5995
};

‎user/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"setupRequired":false,"services":[["asdf","MongoDB","mongodb+srv://alon:testing123@cluster0-phsei.mongodb.net/test?retryWrites=true&w=majority"]],"splash":false}
1+
{"setupRequired":false,"services":[["asdf","MongoDB","mongodb+srv://alon:testing123@cluster0-phsei.mongodb.net/test?retryWrites=true&w=majority"]],"splash":true}

0 commit comments

Comments
 (0)