Skip to content

S
system-load
Commit 5c354b43 authored by Vladislav Gumerov's avatar Vladislav Gumerov
Browse files
Options

added screenshot

parent c4dd6919
Hide whitespace changes
Inline Side-by-side
Showing with 16 additions and 18 deletions
README.md
View file @ 5c354b43
# system-load
A web application that displays the current Linux system load in real time.
- percentage of processor usage;
- the total amount of RAM and the amount of free RAM;
- average load.
## Deployment
The shared folder from the repository is hosted on the server. In the server settings, specify the path to the folder.
\ No newline at end of file
the path to the folder.A web application that displays the current Linux system load in real time.
- percentage of processor usage;
- the total amount of RAM and the amount of free RAM;
- average load.
## Deployment
The shared folder from the repository is hosted on the server. In the server settings, specify
\ No newline at end of file
public/core/data.php
View file @ 5c354b43
......@@ -14,7 +14,7 @@ if(trim(shell_exec("uptime | awk '{ print $10 }' ")) == 'average:') {
}
header('Access-Control-Allow-Origin: *');
$arr = array('CPU' => trim($cpu),
$arr = array('CPU' => ((int)trim($cpu) > 100 ? 100 : trim($cpu)),
'TotalMemory' => trim($total_mem),
'FreeMemory' => trim($free_mem),
"oneMinute" => substr(trim($average1), 0, -1),
......
public/css/main.css
View file @ 5c354b43
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}.canvas-block{margin-top:100px}.cpu-and-memory-charts{display:flex;justify-content:space-around}.loadAver{margin:100px auto;height:100%;width:50%}@media screen and (max-width:640px){.canvasCpu-block,.canvasMemory-block{height:150px;width:300px}table{font-size:11px}td:first-child,th{padding:4px}.canvas-block{margin-top:30px}.cpu-and-memory-charts{display:block}.canvasMemory-block{margin-top:10px}.loadAver{margin-top:20px;height:300px;width:300px}}
\ 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}.canvas-block{margin-top:50px}.cpu-and-memory-charts{display:flex;justify-content:space-around}.loadAver{margin:100px auto;height:100%;width:50%}@media screen and (max-width:640px){.canvasCpu-block,.canvasMemory-block{height:150px;width:300px}table{font-size:11px}td:first-child,th{padding:4px}.canvas-block{margin-top:30px}.cpu-and-memory-charts{display:block}.canvasMemory-block{margin-top:10px}.loadAver{margin-top:20px;height:300px;width:300px}}
\ No newline at end of file
public/js/main.js
View file @ 5c354b43
const cpuCtx=document.getElementById("cpuChart").getContext("2d"),memoryCtx=document.getElementById("memoryChart").getContext("2d"),loadAverageCtx=document.getElementById("loadAverageChart").getContext("2d"),cpuData=[],memoryData=[],timeData=[],oneMinuteData=[],fiveMinutesData=[],fifteenMinutesData=[],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:20},scaleLabel:{display:!0,labelString:"PERCENTAGES",fontColor:"#c0c0c0"}}]}}}),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:getData().TotalMemory/1024,stepSize:getData().TotalMemory/4096},scaleLabel:{display:!0,labelString:"MEGABYTES",fontColor:"#c0c0c0"}}]}}}),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:oneMinuteData},{label:"5 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(65, 99, 222)",data:fiveMinutesData},{label:"15 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(145, 44, 132)",data:fifteenMinutesData}]},options:{scales:{yAxes:[{ticks:{min:0,stepSize:.5}}]}}});function renderCharts(e){timeData.length>=10&&(timeData.shift(),cpuData.shift(),memoryData.shift(),oneMinuteData.shift(),fiveMinutesData.shift(),fifteenMinutesData.shift()),cpuData.push(e.CPU/1),memoryData.push((e.FreeMemory/1024).toFixed(2)),timeData.push((new Date).toLocaleTimeString()),oneMinuteData.push(e.oneMinute),fiveMinutesData.push(e.fiveMinutes),fifteenMinutesData.push(e.fifteenMinutes),cpuChart.update(),memoryChart.update(),loadAverageChart.update()}function getData(){let e=new XMLHttpRequest;if(e.open("GET","core/data.php",!1),e.send(),200!=e.status)console.log(e.status);else var t=JSON.parse(e.responseText);return t}function App(){return React.createElement(Table,{data:getData()})}function Table(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 e(){return renderCharts(getData()),ReactDOM.render(React.createElement(App,null),document.getElementById("root")),e}(),2e3);
\ No newline at end of file
const cpuCtx=document.getElementById("cpuChart").getContext("2d"),memoryCtx=document.getElementById("memoryChart").getContext("2d"),loadAverageCtx=document.getElementById("loadAverageChart").getContext("2d"),cpuData=[],memoryData=[],timeData=[],oneMinuteData=[],fiveMinutesData=[],fifteenMinutesData=[],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:20},scaleLabel:{display:!0,labelString:"PERCENTAGES",fontColor:"#c0c0c0"}}]}}}),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:getData().TotalMemory/1024,stepSize:getData().TotalMemory/4096},scaleLabel:{display:!0,labelString:"MEGABYTES",fontColor:"#c0c0c0"}}]}}}),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:oneMinuteData},{label:"5 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(65, 99, 222)",data:fiveMinutesData},{label:"15 minutes",backgroundColor:"rgba(0, 0, 0, 0)",borderColor:"rgb(145, 44, 132)",data:fifteenMinutesData}]},options:{scales:{yAxes:[{ticks:{min:0,stepSize:.5}}]}}});function renderCharts(e){timeData.length>=10&&(timeData.shift(),cpuData.shift(),memoryData.shift(),oneMinuteData.shift(),fiveMinutesData.shift(),fifteenMinutesData.shift()),cpuData.push(e.CPU/1),memoryData.push((e.FreeMemory/1024).toFixed(2)),timeData.push((new Date).toLocaleTimeString()),oneMinuteData.push(e.oneMinute),fiveMinutesData.push(e.fiveMinutes),fifteenMinutesData.push(e.fifteenMinutes),cpuChart.update(),memoryChart.update(),loadAverageChart.update()}function getData(){let e=new XMLHttpRequest;if(e.open("GET","core/data.php",!1),e.send(),200==e.status)return JSON.parse(e.responseText);console.log(e.status)}function App(){return React.createElement(Table,{data:getData()})}function Table(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 e(){return renderCharts(getData()),ReactDOM.render(React.createElement(App,null),document.getElementById("root")),e}(),2e3);
\ No newline at end of file
src/core/data.php
View file @ 5c354b43
......@@ -14,7 +14,7 @@ if(trim(shell_exec("uptime | awk '{ print $10 }' ")) == 'average:') {
}
header('Access-Control-Allow-Origin: *');
$arr = array('CPU' => trim($cpu),
$arr = array('CPU' => ((int)trim($cpu) > 100 ? 100 : trim($cpu)),
'TotalMemory' => trim($total_mem),
'FreeMemory' => trim($free_mem),
"oneMinute" => substr(trim($average1), 0, -1),
......
src/css/index.css
View file @ 5c354b43
......@@ -28,7 +28,7 @@ td {
}
.canvas-block {
margin-top: 100px;
margin-top: 50px;
}
.cpu-and-memory-charts {
......
src/js/httpReq.js
View file @ 5c354b43
......@@ -5,7 +5,6 @@ function getData() {
if (xhr.status != 200) {
console.log(xhr.status);
} else {
var Data = JSON.parse(xhr.responseText);
return (JSON.parse(xhr.responseText));
}
return Data;
}
\ No newline at end of file
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