Skip to content

S
system-load
Commit 7f1e1631 authored by Vladislav Gumerov's avatar Vladislav Gumerov
Browse files
Options

code refactoring

parent bbb0e105
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 69 deletions
gulpfile.js
View file @ 7f1e1631
...@@ -2,11 +2,13 @@ const gulp = require('gulp'); ...@@ -2,11 +2,13 @@ const gulp = require('gulp');
const babel = require('gulp-babel'); const babel = require('gulp-babel');
const cssmin = require('gulp-minify-css'); const cssmin = require('gulp-minify-css');
const uglify = require('gulp-uglify-es').default; const uglify = require('gulp-uglify-es').default;
var concat = require('gulp-concat'); const rename = require('gulp-rename');
const concat = require('gulp-concat');
gulp.task('css-min', function () { gulp.task('css-min', function () {
return gulp.src('src/css/**/*.css') return gulp.src('src/css/**/*.css')
.pipe(cssmin()) .pipe(cssmin())
.pipe(rename('main.css'))
.pipe(gulp.dest('public/css/')) .pipe(gulp.dest('public/css/'))
}); });
......
package-lock.json
View file @ 7f1e1631
...@@ -2391,14 +2391,12 @@ ...@@ -2391,14 +2391,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -2413,20 +2411,17 @@ ...@@ -2413,20 +2411,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -2543,8 +2538,7 @@ ...@@ -2543,8 +2538,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -2556,7 +2550,6 @@ ...@@ -2556,7 +2550,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -2571,7 +2564,6 @@ ...@@ -2571,7 +2564,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -2579,14 +2571,12 @@ ...@@ -2579,14 +2571,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -2605,7 +2595,6 @@ ...@@ -2605,7 +2595,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -2686,8 +2675,7 @@ ...@@ -2686,8 +2675,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -2699,7 +2687,6 @@ ...@@ -2699,7 +2687,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -2821,7 +2808,6 @@ ...@@ -2821,7 +2808,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -3106,6 +3092,11 @@ ...@@ -3106,6 +3092,11 @@
"vinyl-sourcemaps-apply": "^0.2.0" "vinyl-sourcemaps-apply": "^0.2.0"
} }
}, },
"gulp-rename": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz",
"integrity": "sha512-swzbIGb/arEoFK89tPY58vg3Ok1bw+d35PfUNwWqdo7KM4jkmuGA78JiDNqR+JeZFaeeHnRg9N7aihX3YPmsyg=="
},
"gulp-uglify-es": { "gulp-uglify-es": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/gulp-uglify-es/-/gulp-uglify-es-1.0.4.tgz", "resolved": "https://registry.npmjs.org/gulp-uglify-es/-/gulp-uglify-es-1.0.4.tgz",
......
package.json
View file @ 7f1e1631
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
"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": {
"@babel/core": "^7.2.2", "@babel/core": "^7.2.2",
...@@ -14,7 +13,8 @@ ...@@ -14,7 +13,8 @@
"gulp-babel": "^8.0.0", "gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-minify-css": "^1.2.4", "gulp-minify-css": "^1.2.4",
"gulp-uglify-es": "^1.0.4" "gulp-uglify-es": "^1.0.4",
"gulp-rename": "^1.4.0"
}, },
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
......
public/index.html
View file @ 7f1e1631
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>system-load</title> <title>system-load</title>
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
<body> <body>
<div id="root"> <div id="root">
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
<canvas id="loadAverageChart"></canvas> <canvas id="loadAverageChart"></canvas>
</div> </div>
</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://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>
......
public/js/main.js
View file @ 7f1e1631
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); 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 \ No newline at end of file
src/js/charts.js
View file @ 7f1e1631
...@@ -8,7 +8,7 @@ const oneMinuteData = []; ...@@ -8,7 +8,7 @@ const oneMinuteData = [];
const fiveMinutesData = []; const fiveMinutesData = [];
const fifteenMinutesData = []; const fifteenMinutesData = [];
var cpuChart = new Chart(cpuCtx, { const cpuChart = new Chart(cpuCtx, {
type: 'line', type: 'line',
data: { data: {
labels: timeData, labels: timeData,
...@@ -38,7 +38,7 @@ var cpuChart = new Chart(cpuCtx, { ...@@ -38,7 +38,7 @@ var cpuChart = new Chart(cpuCtx, {
} }
}); });
var memoryChart = new Chart(memoryCtx, { const memoryChart = new Chart(memoryCtx, {
type: 'line', type: 'line',
data: { data: {
labels: timeData, labels: timeData,
...@@ -68,7 +68,7 @@ var memoryChart = new Chart(memoryCtx, { ...@@ -68,7 +68,7 @@ var memoryChart = new Chart(memoryCtx, {
} }
}); });
var loadAverageChart = new Chart(loadAverageCtx, { const loadAverageChart = new Chart(loadAverageCtx, {
type: 'line', type: 'line',
data: { data: {
labels: timeData, labels: timeData,
...@@ -116,7 +116,6 @@ function renderCharts(data) { ...@@ -116,7 +116,6 @@ function renderCharts(data) {
cpuData.push(data['CPU'] / 1); cpuData.push(data['CPU'] / 1);
memoryData.push((data['FreeMemory'] / 1024).toFixed(2)); memoryData.push((data['FreeMemory'] / 1024).toFixed(2));
timeData.push(new Date().toLocaleTimeString()); timeData.push(new Date().toLocaleTimeString());
console.log(new Date().toLocaleTimeString());
oneMinuteData.push(data['oneMinute']); oneMinuteData.push(data['oneMinute']);
fiveMinutesData.push(data['fiveMinutes']); fiveMinutesData.push(data['fiveMinutes']);
fifteenMinutesData.push(data['fifteenMinutes']); fifteenMinutesData.push(data['fifteenMinutes']);
...@@ -125,16 +124,5 @@ function renderCharts(data) { ...@@ -125,16 +124,5 @@ function renderCharts(data) {
loadAverageChart.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
View file @ 7f1e1631
function App(props) { function App() {
return ( return (
<table className="system-load-table"> <Table data={getData()}/>
<tbody> )
<tr className="first_row"> }
<th>CPU</th> \ No newline at end of file
<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/components/Table.js 0 → 100644
View file @ 7f1e1631
function Table(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>
);
}
\ No newline at end of file
src/js/httpReq.js 0 → 100644
View file @ 7f1e1631
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;
}
\ No newline at end of file
src/js/index.js
View file @ 7f1e1631
setInterval(function () { setInterval(function ren() {
renderCharts(getData()); renderCharts(getData());
ReactDOM.render(<App data={getData()}/>, document.getElementById('root')); ReactDOM.render(<App/>, document.getElementById('root'));
}, 2000); return ren;
}(), 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