Skip to content

S
system-load
Commit 7b510813 authored by Vladislav Gumerov's avatar Vladislav Gumerov
Browse files
Options

added load average chart

parent 6ab46729
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 32 deletions
public/core/data.php
View file @ 7b510813
......@@ -8,9 +8,9 @@ $average3 = shell_exec("uptime | awk '{ print $12 }' ");
$arr = array('CPU' => trim($cpu),
'TotalMemory' => trim($total_mem),
'FreeMemory' => trim($free_mem),
"1minute" => substr(trim($average1), 0, -1),
"5minute" => substr(trim($average2), 0, -1),
"15minute" => substr(trim($average3), 0, -1));
"oneMinute" => substr(trim($average1), 0, -1),
"fiveMinutes" => substr(trim($average2), 0, -1),
"fifteenMinutes" => substr(trim($average3), 0, -1));
exit (json_encode($arr));
......
public/css/index.css
View file @ 7b510813
table{width:50%;font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;font-size:14px;border-collapse:collapse;text-align:center}td:first-child,th{background:#AFCDE7;color:#fff;padding:10px 20px}td,th{border-style:solid;border-width:0 1px 1px 0;border-color:#fff}td{background:#D8E6F3}.canvas-block{width:500px;height:500px}
\ No newline at end of file
table{width:100%;font-family:"Lucida Sans Unicode","Lucida Grande",Sans-Serif;font-size:14px;border-collapse:collapse;text-align:center}td:first-child,th{background:#AFCDE7;color:#fff;padding:10px 20px}td,th{border-style:solid;border-width:0 1px 1px 0;border-color:#fff}td{background:#D8E6F3}.canvasCpu-block,.canvasMemory-block{height:200px;width:500px}.main-block{margin-top:100px;display:flex;justify-content:space-around}.loadAver{margin:100px auto;height:400px;width:1000px}
\ No newline at end of file
public/index.html
View file @ 7b510813
......@@ -10,9 +10,16 @@
<body>
<div id="root">
</div>
<div class='canvas-block'>
<canvas id="cpuChart"></canvas>
<canvas id="memoryChart"></canvas>
<div class="main-block">
<div class='canvasCpu-block'>
<canvas id="cpuChart" height="300vh" width="600vw"></canvas>
</div>
<div class='canvasMemory-block'>
<canvas id="memoryChart" height="300vh" width="600vw"></canvas>
</div>
</div>
<div class="loadAver">
<canvas id="loadAverageChart" height="300vh" width="600vw"></canvas>
</div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
......
public/js/index.js
View file @ 7b510813
var cpuCtx=document.getElementById("cpuChart").getContext("2d"),memoryCtx=document.getElementById("memoryChart").getContext("2d");let time=performance.now();var cpuData=[],memoryData=[],timeData=[],cpuChart=new Chart(cpuCtx,{type:"line",data:{labels:timeData,datasets:[{label:"CPU",backgroundColor:"rgb(255, 99, 132)",borderColor:"rgb(255, 99, 132)",data:cpuData}]},options:{}}),memoryChart=new Chart(memoryCtx,{type:"line",data:{labels:timeData,datasets:[{label:"Free memory",backgroundColor:"rgb(255, 99, 132)",borderColor:"rgb(255, 99, 132)",data:memoryData}]},options:{}});function App(e){return React.createElement("table",{className:"system-load-table"},React.createElement("tbod",null,React.createElement("tr",{className:"first_row"},React.createElement("th",null,"CPU"),React.createElement("th",null,"Total memory"),React.createElement("th",null,"Free memory"),React.createElement("th",null,"1 minute"),React.createElement("th",null,"5 minute"),React.createElement("th",null,"15 minute")),React.createElement("tr",{className:"second-row"},React.createElement("th",null,e.data.CPU),React.createElement("th",null,(e.data.TotalMemory/1024).toFixed(2)+" МБ"),React.createElement("th",null,(e.data.FreeMemory/1024).toFixed(2)+" МБ"),React.createElement("th",null,e.data["1minute"]),React.createElement("th",null,e.data["5minute"]),React.createElement("th",null,e.data["15minute"]))))}setInterval(function(){$.get("core/data.php",function(e){e=JSON.parse(e),cpuData.push(e.CPU/1),memoryData.push((e.FreeMemory/1024).toFixed(2)),timeData.push(((performance.now()-time)/1e3).toFixed(2)),cpuChart.update(),memoryChart.update(),ReactDOM.render(React.createElement(App,{data:e}),document.getElementById("root"))})},400);
\ No newline at end of file
var cpuCtx=document.getElementById("cpuChart").getContext("2d"),memoryCtx=document.getElementById("memoryChart").getContext("2d"),loadAverageCtx=document.getElementById("loadAverageChart").getContext("2d");let time=performance.now();var cpuData=[],memoryData=[],timeData=[],oneMinute=[],fiveMinutes=[],fifteenMinutes=[],cpuChart=new Chart(cpuCtx,{type:"line",data:{labels:timeData,datasets:[{label:"CPU",backgroundColor:"rgb(255, 99, 132)",borderColor:"rgb(255, 99, 132)",data:cpuData}]},options:{scales:{yAxes:[{ticks:{min:0,max:100,stepSize:10},scaleLabel:{display:!0,labelString:"Percentages",fontColor:"black"}}]}}}),memoryChart=new Chart(memoryCtx,{type:"line",data:{labels:timeData,datasets:[{label:"Free memory",backgroundColor:"rgb(16, 115, 181)",borderColor:"rgb(16, 115, 181)",data:memoryData}]},options:{scales:{yAxes:[{ticks:{min:0,max:500,stepSize:100},scaleLabel:{display:!0,labelString:"Megabytes",fontColor:"black"}}]}}}),loadAverageChart=new Chart(loadAverageCtx,{type:"line",data:{labels:timeData,datasets:[{label:"1 minute",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(255, 99, 132)",data:oneMinute},{label:"5 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(65, 99, 222)",data:fiveMinutes},{label:"15 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(145, 44, 132)",data:fifteenMinutes}]},options:{scales:{yAxes:[{ticks:{min:0,stepSize:.5}}]}}});function App(e){return React.createElement("table",{className:"system-load-table"},React.createElement("tbody",null,React.createElement("tr",{className:"first_row"},React.createElement("th",null,"CPU"),React.createElement("th",null,"Total memory"),React.createElement("th",null,"Free memory"),React.createElement("th",null,"1 minute"),React.createElement("th",null,"5 minutes"),React.createElement("th",null,"15 minutes")),React.createElement("tr",{className:"second-row"},React.createElement("th",null,e.data.CPU,"%"),React.createElement("th",null,(e.data.TotalMemory/1024).toFixed(2)+" МБ"),React.createElement("th",null,(e.data.FreeMemory/1024).toFixed(2)+" МБ"),React.createElement("th",null,e.data.oneMinute),React.createElement("th",null,e.data.fiveMinutes),React.createElement("th",null,e.data.fifteenMinutes))))}setInterval(function(){$.get("core/data.php",function(e){e=JSON.parse(e),timeData.length>=10&&(timeData.shift(),cpuData.shift(),memoryData.shift(),oneMinute.shift(),fiveMinutes.shift(),fifteenMinutes.shift()),cpuData.push(e.CPU/1),memoryData.push((e.FreeMemory/1024).toFixed(2)),timeData.push((new Date).toLocaleTimeString()),oneMinute.push(e.oneMinute),fiveMinutes.push(e.fiveMinutes),fifteenMinutes.push(e.fifteenMinutes),cpuChart.update(),memoryChart.update(),loadAverageChart.update(),ReactDOM.render(React.createElement(App,{data:e}),document.getElementById("root"))})},2e3);
\ No newline at end of file
src/core/data.php
View file @ 7b510813
......@@ -8,9 +8,9 @@ $average3 = shell_exec("uptime | awk '{ print $12 }' ");
$arr = array('CPU' => trim($cpu),
'TotalMemory' => trim($total_mem),
'FreeMemory' => trim($free_mem),
"1minute" => substr(trim($average1), 0, -1),
"5minute" => substr(trim($average2), 0, -1),
"15minute" => substr(trim($average3), 0, -1));
"oneMinute" => substr(trim($average1), 0, -1),
"fiveMinutes" => substr(trim($average2), 0, -1),
"fifteenMinutes" => substr(trim($average3), 0, -1));
exit (json_encode($arr));
......
src/css/index.css
View file @ 7b510813
table {
width: 50%;
width: 100%;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
......@@ -19,8 +19,19 @@ td {
background: #D8E6F3;
}
.canvas-block {
.canvasCpu-block, .canvasMemory-block {
height: 200px;
width: 500px;
height: 500px;
}
.main-block {
margin-top: 100px;
display: flex;
justify-content: space-around;
}
.loadAver {
margin: 100px auto;
height: 400px;
width: 1000px;
}
\ No newline at end of file
src/js/index.js
View file @ 7b510813
var cpuCtx = document.getElementById('cpuChart').getContext('2d');
var memoryCtx = document.getElementById('memoryChart').getContext('2d');
var loadAverageCtx = document.getElementById('loadAverageChart').getContext('2d');
let time = performance.now();
var cpuData = [];
var memoryData = [];
var timeData = [];
var oneMinute = [];
var fiveMinutes = [];
var fifteenMinutes = [];
var cpuChart = new Chart(cpuCtx, {
type: 'line',
......@@ -19,7 +22,22 @@ var cpuChart = new Chart(cpuCtx, {
},
// Configuration options go here
options: {}
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 10
},
scaleLabel: {
display: true,
labelString: "Percentages",
fontColor: "black"
}
}]
}
}
});
var memoryChart = new Chart(memoryCtx, {
......@@ -28,38 +46,89 @@ var memoryChart = new Chart(memoryCtx, {
labels: timeData,
datasets: [{
label: "Free memory",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(16, 115, 181)',
borderColor: 'rgb(16, 115, 181)',
data: memoryData,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 500,
stepSize: 100
},
scaleLabel: {
display: true,
labelString: "Megabytes",
fontColor: "black"
}
}]
}
}
});
var loadAverageChart = new Chart(loadAverageCtx, {
type: 'line',
data: {
labels: timeData,
datasets: [{
label: "1 minute",
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(255, 99, 132)',
data: oneMinute,
},
{
label: "5 minutes",
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(65, 99, 222)',
data: fiveMinutes,
},
{
label: "15 minutes",
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(145, 44, 132)',
data: fifteenMinutes,
},]
},
// Configuration options go here
options: {}
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 0.50
}
}]
}
}
});
function App(props) {
return (
<table className="system-load-table">
<tbod>
<tbody>
<tr className="first_row">
<th>CPU</th>
<th>Total memory</th>
<th>Free memory</th>
<th>1 minute</th>
<th>5 minute</th>
<th>15 minute</th>
<th>5 minutes</th>
<th>15 minutes</th>
</tr>
<tr className="second-row">
<th>{props.data['CPU']}</th>
<th>{props.data['CPU']}%</th>
<th>{(props.data['TotalMemory'] / 1024).toFixed(2) + ' МБ'}</th>
<th>{(props.data['FreeMemory'] / 1024).toFixed(2) + ' МБ'}</th>
<th>{props.data['1minute']}</th>
<th>{props.data['5minute']}</th>
<th>{props.data['15minute']}</th>
<th>{props.data['oneMinute']}</th>
<th>{props.data['fiveMinutes']}</th>
<th>{props.data['fifteenMinutes']}</th>
</tr>
</tbod>
</tbody>
</table>
);
}
......@@ -67,14 +136,26 @@ function App(props) {
setInterval(function () {
$.get('core/data.php', function (data) {
data = JSON.parse(data);
if (timeData.length >= 10) {
timeData.shift();
cpuData.shift();
memoryData.shift();
oneMinute.shift();
fiveMinutes.shift();
fifteenMinutes.shift();
}
cpuData.push(data['CPU'] / 1);
memoryData.push((data['FreeMemory'] / 1024).toFixed(2));
timeData.push(((performance.now() - time) / 1000).toFixed(2));
timeData.push(new Date().toLocaleTimeString());
oneMinute.push(data['oneMinute']);
fiveMinutes.push(data['fiveMinutes']);
fifteenMinutes.push(data['fifteenMinutes']);
cpuChart.update();
memoryChart.update();
loadAverageChart.update();
ReactDOM.render(<App data={data}/>, document.getElementById('root'));
});
}, 400);
}, 2000);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment