Skip to content

S
system-load
Commit 6ab46729 authored by Vladislav Gumerov's avatar Vladislav Gumerov
Browse files
Options

added charts

parent 48f0843a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 82 additions and 24 deletions
package.json
View file @ 6ab46729
...@@ -3,7 +3,9 @@ ...@@ -3,7 +3,9 @@
"version": "0.0.1", "version": "0.0.1",
"description": "test task for Etersoft", "description": "test task for Etersoft",
"main": "index.js", "main": "index.js",
"dependencies": {}, "dependencies": {
"chart.js": "^2.7.3"
},
"devDependencies": { "devDependencies": {
"gulp": "^4.0.0", "gulp": "^4.0.0",
"@babel/core": "^7.2.2", "@babel/core": "^7.2.2",
......
public/core/data.php
View file @ 6ab46729
<?php <?php
$cpu = shell_exec('ps aux | awk \'{s += $3} END {print s "%"}\''); $cpu = shell_exec('ps aux | awk \'{s += $3} END {print s }\'');
$total_mem = shell_exec("cat /proc/meminfo | grep MemTotal | awk '{ print $2 }' "); $total_mem = shell_exec("cat /proc/meminfo | grep MemTotal | awk '{ print $2 }' ");
$free_mem = shell_exec("cat /proc/meminfo | grep MemFree | awk '{ print $2 }' "); $free_mem = shell_exec("cat /proc/meminfo | grep Cached | awk '{ print $2 }' ");
$average1 = shell_exec("uptime | awk '{ print $10 }' "); $average1 = shell_exec("uptime | awk '{ print $10 }' ");
$average2 = shell_exec("uptime | awk '{ print $11 }' "); $average2 = shell_exec("uptime | awk '{ print $11 }' ");
$average3 = shell_exec("uptime | awk '{ print $12 }' "); $average3 = shell_exec("uptime | awk '{ print $12 }' ");
$arr = array('CPI' => trim($cpu), $arr = array('CPU' => trim($cpu),
'TotalMemory' => trim($total_mem), 'TotalMemory' => trim($total_mem),
'FreeMemory' => trim($free_mem), 'FreeMemory' => trim($free_mem),
"5minute" => substr(trim($average1), 0, -1), "1minute" => substr(trim($average1), 0, -1),
"10minute" => substr(trim($average2), 0, -1), "5minute" => substr(trim($average2), 0, -1),
"15minute" => substr(trim($average3), 0, -1)); "15minute" => substr(trim($average3), 0, -1));
exit (json_encode($arr)); exit (json_encode($arr));
......
public/css/index.css
View file @ 6ab46729
table{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}td:first-child,th:first-child{text-align:left} 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 \ No newline at end of file
public/index.html
View file @ 6ab46729
...@@ -10,9 +10,14 @@ ...@@ -10,9 +10,14 @@
<body> <body>
<div id="root"> <div id="root">
</div> </div>
<div class='canvas-block'>
<canvas id="cpuChart"></canvas>
<canvas id="memoryChart"></canvas>
</div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <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> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="js/index.js"></script> <script src="js/index.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
public/js/index.js
View file @ 6ab46729
function App(e){return React.createElement("table",{className:"system-load-table",width:"100%"},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,"5 minute"),React.createElement("th",null,"10 minute"),React.createElement("th",null,"15 minute")),React.createElement("tr",{className:"second-row"},React.createElement("th",null,e.data.CPI),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["5minute"]),React.createElement("th",null,e.data["10minute"]),React.createElement("th",null,e.data["15minute"]))))}setInterval(function(){$.get("core/data.php",function(e){e=JSON.parse(e),ReactDOM.render(React.createElement(App,{data:e}),document.getElementById("root"))})},500); 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 \ No newline at end of file
src/core/data.php
View file @ 6ab46729
<?php <?php
$cpu = shell_exec('ps aux | awk \'{s += $3} END {print s "%"}\''); $cpu = shell_exec('ps aux | awk \'{s += $3} END {print s }\'');
$total_mem = shell_exec("cat /proc/meminfo | grep MemTotal | awk '{ print $2 }' "); $total_mem = shell_exec("cat /proc/meminfo | grep MemTotal | awk '{ print $2 }' ");
$free_mem = shell_exec("cat /proc/meminfo | grep MemFree | awk '{ print $2 }' "); $free_mem = shell_exec("cat /proc/meminfo | grep Cached | awk '{ print $2 }' ");
$average1 = shell_exec("uptime | awk '{ print $10 }' "); $average1 = shell_exec("uptime | awk '{ print $10 }' ");
$average2 = shell_exec("uptime | awk '{ print $11 }' "); $average2 = shell_exec("uptime | awk '{ print $11 }' ");
$average3 = shell_exec("uptime | awk '{ print $12 }' "); $average3 = shell_exec("uptime | awk '{ print $12 }' ");
$arr = array('CPI' => trim($cpu), $arr = array('CPU' => trim($cpu),
'TotalMemory' => trim($total_mem), 'TotalMemory' => trim($total_mem),
'FreeMemory' => trim($free_mem), 'FreeMemory' => trim($free_mem),
"5minute" => substr(trim($average1), 0, -1), "1minute" => substr(trim($average1), 0, -1),
"10minute" => substr(trim($average2), 0, -1), "5minute" => substr(trim($average2), 0, -1),
"15minute" => substr(trim($average3), 0, -1)); "15minute" => substr(trim($average3), 0, -1));
exit (json_encode($arr)); exit (json_encode($arr));
......
src/css/index.css
View file @ 6ab46729
table { table {
width: 50%;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px; font-size: 14px;
border-collapse: collapse; border-collapse: collapse;
...@@ -17,6 +18,9 @@ th, td { ...@@ -17,6 +18,9 @@ th, td {
td { td {
background: #D8E6F3; background: #D8E6F3;
} }
th:first-child, td:first-child {
text-align: left;
.canvas-block {
width: 500px;
height: 500px;
} }
src/js/index.js
View file @ 6ab46729
var cpuCtx = document.getElementById('cpuChart').getContext('2d');
var memoryCtx = document.getElementById('memoryChart').getContext('2d');
let time = performance.now();
var cpuData = [];
var memoryData = [];
var timeData = [];
var cpuChart = new Chart(cpuCtx, {
type: 'line',
data: {
labels: timeData,
datasets: [{
label: "CPU",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: cpuData,
}]
},
// Configuration options go here
options: {}
});
var 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,
}]
},
// Configuration options go here
options: {}
});
function App(props) { function App(props) {
return ( return (
<table className="system-load-table" width="100%"> <table className="system-load-table">
<tbody> <tbod>
<tr className="first_row"> <tr className="first_row">
<th>CPU</th> <th>CPU</th>
<th>Total memory</th> <th>Total memory</th>
<th>Free memory</th> <th>Free memory</th>
<th>1 minute</th>
<th>5 minute</th> <th>5 minute</th>
<th>10 minute</th>
<th>15 minute</th> <th>15 minute</th>
</tr> </tr>
<tr className="second-row"> <tr className="second-row">
<th>{props.data['CPI']}</th> <th>{props.data['CPU']}</th>
<th>{(props.data['TotalMemory'] / 1024).toFixed(2) + ' МБ'}</th> <th>{(props.data['TotalMemory'] / 1024).toFixed(2) + ' МБ'}</th>
<th>{(props.data['FreeMemory'] / 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['5minute']}</th>
<th>{props.data['10minute']}</th>
<th>{props.data['15minute']}</th> <th>{props.data['15minute']}</th>
</tr> </tr>
</tbody> </tbod>
</table> </table>
); );
} }
...@@ -26,9 +67,14 @@ function App(props) { ...@@ -26,9 +67,14 @@ function App(props) {
setInterval(function () { setInterval(function () {
$.get('core/data.php', function (data) { $.get('core/data.php', function (data) {
data = JSON.parse(data); data = JSON.parse(data);
cpuData.push(data['CPU'] / 1);
memoryData.push((data['FreeMemory'] / 1024).toFixed(2));
timeData.push(((performance.now() - time) / 1000).toFixed(2));
cpuChart.update();
memoryChart.update();
ReactDOM.render(<App data={data}/>, document.getElementById('root')); ReactDOM.render(<App data={data}/>, document.getElementById('root'));
}); });
}, 500); }, 400);
......
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