Skip to content

S
system-load
Commit 9b9e6cc6 authored by Vladislav Gumerov's avatar Vladislav Gumerov
Browse files
Options

improved memory chart

parent 7b510813
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 45 deletions
public/index.html
View file @ 9b9e6cc6
......@@ -23,7 +23,6 @@
</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>
<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>
</body>
......
public/js/index.js
View file @ 9b9e6cc6
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
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=[];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}]},options:{scales:{yAxes:[{ticks:{min:0,max:100,stepSize:10},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 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))))}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}setInterval(function(){renderCharts(getData()),ReactDOM.render(React.createElement(App,{data:getData()}),document.getElementById("root"))},2e3);
\ No newline at end of file
src/js/index.js
View file @ 9b9e6cc6
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 = [];
const cpuCtx = document.getElementById('cpuChart').getContext('2d');
const memoryCtx = document.getElementById('memoryChart').getContext('2d');
const loadAverageCtx = document.getElementById('loadAverageChart').getContext('2d');
const cpuData = [];
const memoryData = [];
const timeData = [];
const oneMinuteData = [];
const fiveMinutesData = [];
const fifteenMinutesData = [];
var cpuChart = new Chart(cpuCtx, {
type: 'line',
......@@ -21,7 +20,6 @@ var cpuChart = new Chart(cpuCtx, {
}]
},
// Configuration options go here
options: {
scales: {
yAxes: [{
......@@ -32,8 +30,8 @@ var cpuChart = new Chart(cpuCtx, {
},
scaleLabel: {
display: true,
labelString: "Percentages",
fontColor: "black"
labelString: "PERCENTAGES",
fontColor: "#c0c0c0"
}
}]
}
......@@ -57,13 +55,13 @@ var memoryChart = new Chart(memoryCtx, {
yAxes: [{
ticks: {
min: 0,
max: 500,
stepSize: 100
max: getData()['TotalMemory'] / 1024,
stepSize: getData()['TotalMemory'] / 4096
},
scaleLabel: {
display: true,
labelString: "Megabytes",
fontColor: "black"
labelString: "MEGABYTES",
fontColor: "#c0c0c0"
}
}]
}
......@@ -78,23 +76,22 @@ var loadAverageChart = new Chart(loadAverageCtx, {
label: "1 minute",
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(255, 99, 132)',
data: oneMinute,
data: oneMinuteData,
},
{
label: "5 minutes",
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(65, 99, 222)',
data: fiveMinutes,
data: fiveMinutesData,
},
{
label: "15 minutes",
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(145, 44, 132)',
data: fifteenMinutes,
data: fifteenMinutesData,
},]
},
// Configuration options go here
options: {
scales: {
yAxes: [{
......@@ -107,6 +104,25 @@ var loadAverageChart = new Chart(loadAverageCtx, {
}
});
function renderCharts(data) {
if (timeData.length >= 10) {
timeData.shift();
cpuData.shift();
memoryData.shift();
oneMinuteData.shift();
fiveMinutesData.shift();
fifteenMinutesData.shift();
}
cpuData.push(data['CPU'] / 1);
memoryData.push((data['FreeMemory'] / 1024).toFixed(2));
timeData.push(new Date().toLocaleTimeString());
oneMinuteData.push(data['oneMinute']);
fiveMinutesData.push(data['fiveMinutes']);
fifteenMinutesData.push(data['fifteenMinutes']);
cpuChart.update();
memoryChart.update();
loadAverageChart.update();
}
function App(props) {
return (
......@@ -133,28 +149,21 @@ function App(props) {
);
}
function getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'core/data.php', false);
xhr.send();
if (xhr.status != 200) {
console.log(xhr.status);
} else {
var Data = JSON.parse(xhr.responseText);
}
return Data;
}
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(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'));
});
renderCharts(getData());
ReactDOM.render(<App data={getData()}/>, document.getElementById('root'));
}, 2000);
......@@ -165,3 +174,4 @@ setInterval(function () {
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