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 @@ ...@@ -23,7 +23,6 @@
</div> </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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.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>
......
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); 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 \ No newline at end of file
src/js/index.js
View file @ 9b9e6cc6
var cpuCtx = document.getElementById('cpuChart').getContext('2d'); const cpuCtx = document.getElementById('cpuChart').getContext('2d');
var memoryCtx = document.getElementById('memoryChart').getContext('2d'); const memoryCtx = document.getElementById('memoryChart').getContext('2d');
var loadAverageCtx = document.getElementById('loadAverageChart').getContext('2d'); const loadAverageCtx = document.getElementById('loadAverageChart').getContext('2d');
let time = performance.now(); const cpuData = [];
var cpuData = []; const memoryData = [];
var memoryData = []; const timeData = [];
var timeData = []; const oneMinuteData = [];
var oneMinute = []; const fiveMinutesData = [];
var fiveMinutes = []; const fifteenMinutesData = [];
var fifteenMinutes = [];
var cpuChart = new Chart(cpuCtx, { var cpuChart = new Chart(cpuCtx, {
type: 'line', type: 'line',
...@@ -21,7 +20,6 @@ var cpuChart = new Chart(cpuCtx, { ...@@ -21,7 +20,6 @@ var cpuChart = new Chart(cpuCtx, {
}] }]
}, },
// Configuration options go here
options: { options: {
scales: { scales: {
yAxes: [{ yAxes: [{
...@@ -32,8 +30,8 @@ var cpuChart = new Chart(cpuCtx, { ...@@ -32,8 +30,8 @@ var cpuChart = new Chart(cpuCtx, {
}, },
scaleLabel: { scaleLabel: {
display: true, display: true,
labelString: "Percentages", labelString: "PERCENTAGES",
fontColor: "black" fontColor: "#c0c0c0"
} }
}] }]
} }
...@@ -57,13 +55,13 @@ var memoryChart = new Chart(memoryCtx, { ...@@ -57,13 +55,13 @@ var memoryChart = new Chart(memoryCtx, {
yAxes: [{ yAxes: [{
ticks: { ticks: {
min: 0, min: 0,
max: 500, max: getData()['TotalMemory'] / 1024,
stepSize: 100 stepSize: getData()['TotalMemory'] / 4096
}, },
scaleLabel: { scaleLabel: {
display: true, display: true,
labelString: "Megabytes", labelString: "MEGABYTES",
fontColor: "black" fontColor: "#c0c0c0"
} }
}] }]
} }
...@@ -78,23 +76,22 @@ var loadAverageChart = new Chart(loadAverageCtx, { ...@@ -78,23 +76,22 @@ var loadAverageChart = new Chart(loadAverageCtx, {
label: "1 minute", label: "1 minute",
backgroundColor: 'rgba(0, 0, 0, 0)', backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)',
data: oneMinute, data: oneMinuteData,
}, },
{ {
label: "5 minutes", label: "5 minutes",
backgroundColor: 'rgba(0, 0, 0, 0)', backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(65, 99, 222)', borderColor: 'rgb(65, 99, 222)',
data: fiveMinutes, data: fiveMinutesData,
}, },
{ {
label: "15 minutes", label: "15 minutes",
backgroundColor: 'rgba(0, 0, 0, 0)', backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgb(145, 44, 132)', borderColor: 'rgb(145, 44, 132)',
data: fifteenMinutes, data: fifteenMinutesData,
},] },]
}, },
// Configuration options go here
options: { options: {
scales: { scales: {
yAxes: [{ yAxes: [{
...@@ -107,6 +104,25 @@ var loadAverageChart = new Chart(loadAverageCtx, { ...@@ -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) { function App(props) {
return ( return (
...@@ -133,28 +149,21 @@ function App(props) { ...@@ -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 () { setInterval(function () {
$.get('core/data.php', function (data) { renderCharts(getData());
data = JSON.parse(data); ReactDOM.render(<App data={getData()}/>, document.getElementById('root'));
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'));
});
}, 2000); }, 2000);
...@@ -165,3 +174,4 @@ setInterval(function () { ...@@ -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