Skip to content

S
system-load
Commit 3627399e authored by Vladislav Gumerov's avatar Vladislav Gumerov
Browse files
Options

added mobile resolution

parent 9b9e6cc6
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 195 deletions
gulpfile.js
View file @ 3627399e
......@@ -2,6 +2,7 @@ const gulp = require('gulp');
const babel = require('gulp-babel');
const cssmin = require('gulp-minify-css');
const uglify = require('gulp-uglify-es').default;
var concat = require('gulp-concat');
gulp.task('css-min', function () {
return gulp.src('src/css/**/*.css')
......@@ -12,7 +13,9 @@ gulp.task('css-min', function () {
gulp.task('js-min', function () {
return gulp.src('src/js/**/*.js')
.pipe(babel({
plugins: ['transform-react-jsx']}))
plugins: ['transform-react-jsx']
}))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js/'));
});
......
package-lock.json
View file @ 3627399e
......@@ -1745,6 +1745,23 @@
"typedarray": "^0.0.6"
}
},
"concat-with-sourcemaps": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
"integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
"dev": true,
"requires": {
"source-map": "^0.6.1"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"convert-source-map": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
......@@ -3050,6 +3067,17 @@
"vinyl-sourcemaps-apply": "^0.2.0"
}
},
"gulp-concat": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/gulp-concat/-/gulp-concat-2.6.1.tgz",
"integrity": "sha1-Yz0WyV2IUEYorQJmVmPO5aR5M1M=",
"dev": true,
"requires": {
"concat-with-sourcemaps": "^1.0.0",
"through2": "^2.0.0",
"vinyl": "^2.0.0"
}
},
"gulp-minify-css": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/gulp-minify-css/-/gulp-minify-css-1.2.4.tgz",
......
package.json
View file @ 3627399e
......@@ -7,11 +7,12 @@
"chart.js": "^2.7.3"
},
"devDependencies": {
"gulp": "^4.0.0",
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"babel-plugin-transform-react-jsx": "^6.24.1",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-minify-css": "^1.2.4",
"gulp-uglify-es": "^1.0.4"
},
......
public/css/index.css
View file @ 3627399e
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
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
public/index.html
View file @ 3627399e
......@@ -4,26 +4,29 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>itersoft</title>
<title>system-load</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="root">
</div>
<div class="main-block">
<div id="root">
</div>
<div class="canvas-block">
<div class="cpu-and-memory-charts">
<div class='canvasCpu-block'>
<canvas id="cpuChart" height="300vh" width="600vw"></canvas>
<canvas id="cpuChart"></canvas>
</div>
<div class='canvasMemory-block'>
<canvas id="memoryChart" height="300vh" width="600vw"></canvas>
<canvas id="memoryChart"></canvas>
</div>
</div>
<div class="loadAver">
<canvas id="loadAverageChart" height="300vh" width="600vw"></canvas>
<canvas id="loadAverageChart"></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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="js/index.js"></script>
</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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
\ No newline at end of file
public/js/index.js → public/js/main.js
View file @ 3627399e
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
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: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()),console.log((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(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(){renderCharts(getData()),ReactDOM.render(React.createElement(App,{data:getData()}),document.getElementById("root"))},2e3);
\ No newline at end of file
src/css/index.css
View file @ 3627399e
......@@ -5,16 +5,19 @@ table {
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
......@@ -24,14 +27,52 @@ td {
width: 500px;
}
.main-block {
.canvas-block {
margin-top: 100px;
}
.cpu-and-memory-charts {
display: flex;
justify-content: space-around;
}
.loadAver {
margin: 100px auto;
height: 400px;
width: 1000px;
height: 100%;
width: 50%;
}
@media screen and (max-width: 640px) {
table {
font-size: 11px;
}
th, td:first-child {
padding: 4px 4px;
}
.canvas-block {
margin-top: 30px;
}
.cpu-and-memory-charts {
display: block;
}
.canvasMemory-block {
margin-top: 10px;
height: 150px;
width: 300px;
}
.canvasCpu-block {
height: 150px;
width: 300px;
}
.loadAver {
margin-top: 20px;
height: 300px;
width: 300px;
}
}
\ No newline at end of file
src/js/charts.js
View file @ 3627399e
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',
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: true,
labelString: "PERCENTAGES",
fontColor: "#c0c0c0"
}
}]
}
}
});
var 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: true,
labelString: "MEGABYTES",
fontColor: "#c0c0c0"
}
}]
}
}
});
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: 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: 0.50
}
}]
}
}
});
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());
console.log(new Date().toLocaleTimeString());
oneMinuteData.push(data['oneMinute']);
fiveMinutesData.push(data['fiveMinutes']);
fifteenMinutesData.push(data['fifteenMinutes']);
cpuChart.update();
memoryChart.update();
loadAverageChart.update();
}
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;
}
src/js/components/App.js 0 → 100644
View file @ 3627399e
function App(props) {
return (
<table className="system-load-table">
<tbody>
<tr className="first_row">
<th>CPU</th>
<th>Total memory</th>
<th>Free memory</th>
<th>1 minute</th>
<th>5 minutes</th>
<th>15 minutes</th>
</tr>
<tr className="second-row">
<th>{props.data['CPU']}%</th>
<th>{(props.data['TotalMemory'] / 1024).toFixed(2) + ' МБ'}</th>
<th>{(props.data['FreeMemory'] / 1024).toFixed(2) + ' МБ'}</th>
<th>{props.data['oneMinute']}</th>
<th>{props.data['fiveMinutes']}</th>
<th>{props.data['fifteenMinutes']}</th>
</tr>
</tbody>
</table>
);
}
src/js/index.js
View file @ 3627399e
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',
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: true,
labelString: "PERCENTAGES",
fontColor: "#c0c0c0"
}
}]
}
}
});
var 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: true,
labelString: "MEGABYTES",
fontColor: "#c0c0c0"
}
}]
}
}
});
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: 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: 0.50
}
}]
}
}
});
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 (
<table className="system-load-table">
<tbody>
<tr className="first_row">
<th>CPU</th>
<th>Total memory</th>
<th>Free memory</th>
<th>1 minute</th>
<th>5 minutes</th>
<th>15 minutes</th>
</tr>
<tr className="second-row">
<th>{props.data['CPU']}%</th>
<th>{(props.data['TotalMemory'] / 1024).toFixed(2) + ' МБ'}</th>
<th>{(props.data['FreeMemory'] / 1024).toFixed(2) + ' МБ'}</th>
<th>{props.data['oneMinute']}</th>
<th>{props.data['fiveMinutes']}</th>
<th>{props.data['fifteenMinutes']}</th>
</tr>
</tbody>
</table>
);
}
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 () {
renderCharts(getData());
ReactDOM.render(<App data={getData()}/>, document.getElementById('root'));
renderCharts(getData());
ReactDOM.render(<App data={getData()}/>, document.getElementById('root'));
}, 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