Skip to content

S
system-load
You need to sign in or sign up before continuing.
Commit 634aa460 authored by Vladislav Gumerov's avatar Vladislav Gumerov
Browse files
Options

code refactoring

parent 18c75b43
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 494 additions and 324 deletions
.gitignore
View file @ 634aa460
#.idea folder
.idea/
#node_modules folder
node_modules
\ No newline at end of file
# .idea folder
/.idea
# dependencies
/node_modules
LICENSE deleted 100644 → 0
View file @ 18c75b43
MIT License
Copyright (c) 2019 Vlad Gumerov
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
build/asset-manifest.json 0 → 100644
View file @ 634aa460
{
"main.css": "/static/css/main.fc12b575.chunk.css",
"main.js": "/static/js/main.26f36514.chunk.js",
"main.js.map": "/static/js/main.26f36514.chunk.js.map",
"static/js/1.41eb0558.chunk.js": "/static/js/1.41eb0558.chunk.js",
"static/js/1.41eb0558.chunk.js.map": "/static/js/1.41eb0558.chunk.js.map",
"runtime~main.js": "/static/js/runtime~main.229c360f.js",
"runtime~main.js.map": "/static/js/runtime~main.229c360f.js.map",
"static/css/main.fc12b575.chunk.css.map": "/static/css/main.fc12b575.chunk.css.map",
"index.html": "/index.html",
"precache-manifest.d7d8b6e8cd6d518875d47fc40cd59de4.js": "/precache-manifest.d7d8b6e8cd6d518875d47fc40cd59de4.js",
"service-worker.js": "/service-worker.js"
}
\ No newline at end of file
build/index.html 0 → 100644
View file @ 634aa460
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>system-load</title><script src="../../system-load/src/js/index.js"></script><link href="/static/css/main.fc12b575.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={2:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/1.41eb0558.chunk.js"></script><script src="/static/js/main.26f36514.chunk.js"></script></body></html>
\ No newline at end of file
build/precache-manifest.d7d8b6e8cd6d518875d47fc40cd59de4.js 0 → 100644
View file @ 634aa460
self.__precacheManifest = [
{
"revision": "229c360febb4351a89df",
"url": "/static/js/runtime~main.229c360f.js"
},
{
"revision": "26f36514ffd0cf47e1ca",
"url": "/static/js/main.26f36514.chunk.js"
},
{
"revision": "41eb055892f98c8d23d9",
"url": "/static/js/1.41eb0558.chunk.js"
},
{
"revision": "26f36514ffd0cf47e1ca",
"url": "/static/css/main.fc12b575.chunk.css"
},
{
"revision": "946bffc6dc422a0ca6bf6c1f81b9c557",
"url": "/index.html"
}
];
\ No newline at end of file
build/service-worker.js 0 → 100644
View file @ 634aa460
/**
* Welcome to your Workbox-powered service worker!
*
* You'll need to register this file in your web app and you should
* disable HTTP caching for this file too.
* See https://goo.gl/nhQhGp
*
* The rest of the code is auto-generated. Please don't update this file
* directly; instead, make changes to your Workbox build configuration
* and re-run your build process.
* See https://goo.gl/2aRDsh
*/
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
importScripts(
"/precache-manifest.d7d8b6e8cd6d518875d47fc40cd59de4.js"
);
workbox.clientsClaim();
/**
* The workboxSW.precacheAndRoute() method efficiently caches and responds to
* requests for URLs in the manifest.
* See https://goo.gl/S9QRab
*/
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
workbox.routing.registerNavigationRoute("/index.html", {
blacklist: [/^\/_/,/\/[^\/]+\.[^\/]+$/],
});
build/static/css/main.fc12b575.chunk.css 0 → 100644
View file @ 634aa460
body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{padding:0;margin:0}body{background:#252f48}.system-load-table{font-family:Lucida Sans Unicode,Lucida Grande,Sans-Serif;font-size:14px;width:100%;text-align:center;border-collapse:collapse;background:#252f48}.system-load-table th{color:#edb749;border-bottom:1px solid #37b5a5;padding:12px 17px}.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:414px){.system-load-table{font-size:11px}.system-load-table th{padding:6px}.canvas-block{margin-top:30px}.cpu-and-memory-charts{display:block}.canvasMemory-block{margin-top:10px}.canvasCpu-block,.canvasMemory-block{height:150px;width:300px}.loadAver{margin-top:20px;height:300px;width:300px}}
/*# sourceMappingURL=main.fc12b575.chunk.css.map */
\ No newline at end of file
build/static/css/main.fc12b575.chunk.css.map 0 → 100644
View file @ 634aa460
{"version":3,"sources":["C:/Users/AstR0x/Documents/GitHub/system-load1/src/C:/Users/AstR0x/Documents/GitHub/system-load1/src/index.css","main.fc12b575.chunk.css","C:/Users/AstR0x/Documents/GitHub/system-load1/src/C:/Users/AstR0x/Documents/GitHub/system-load1/src/App.css"],"names":[],"mappings":"AAAA,KACE,QAAA,CACA,SAAA,CACA,mICEY,CDCZ,kCAAA,CACA,iCCCF,CDEA,KACE,uECEF,CCbA,EACE,SAAA,CACA,QDgBF,CCbA,KACE,kBDgBF,CCbA,mBACE,wDAAA,CACA,cAAA,CACA,UAAA,CACA,iBAAA,CACA,wBAAA,CACA,kBDgBF,CCdA,sBACE,aAAA,CACA,+BAAA,CACA,iBDgBF,CCbA,qCACE,YAAA,CACA,WDgBF,CCbA,cACE,eDgBF,CCbA,uBACE,YAAA,CACA,4BDgBF,CCbA,UACE,iBAAA,CACA,WAAA,CACA,SDgBF,CCbA,oCACC,mBACG,cDgBF,CCbA,sBACE,WDgBF,CCbA,cACE,eDgBF,CCbA,uBACE,aDgBF,CCbA,oBACE,eDkBF,CCbA,qCAJE,YAAA,CACA,WDqBF,CCbA,UACE,eAAA,CACA,YAAA,CACA,WDgBF,CACF","file":"main.fc12b575.chunk.css","sourcesContent":["body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n","body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n\n* {\n padding: 0;\n margin: 0;\n}\n\nbody {\n background: #252F48;\n}\n\n.system-load-table {\n font-family: \"Lucida Sans Unicode\", \"Lucida Grande\", Sans-Serif;\n font-size: 14px;\n width: 100%;\n text-align: center;\n border-collapse: collapse;\n background: #252F48;\n}\n.system-load-table th {\n color: #EDB749;\n border-bottom: 1px solid #37B5A5;\n padding: 12px 17px;\n}\n\n.canvasCpu-block, .canvasMemory-block {\n height: 200px;\n width: 500px;\n}\n\n.canvas-block {\n margin-top: 50px;\n}\n\n.cpu-and-memory-charts {\n display: flex;\n justify-content: space-around;\n}\n\n.loadAver {\n margin: 100px auto;\n height: 100%;\n width: 50%;\n}\n\n@media screen and (max-width: 414px) {\n .system-load-table {\n font-size: 11px;\n }\n \n .system-load-table th {\n padding: 6px 6px;\n }\n \n .canvas-block {\n margin-top: 30px;\n }\n \n .cpu-and-memory-charts {\n display: block;\n }\n \n .canvasMemory-block {\n margin-top: 10px;\n height: 150px;\n width: 300px;\n }\n \n .canvasCpu-block {\n height: 150px;\n width: 300px;\n }\n \n .loadAver {\n margin-top: 20px;\n height: 300px;\n width: 300px;\n }\n}\n","* {\n padding: 0;\n margin: 0;\n}\n\nbody {\n background: #252F48;\n}\n\n.system-load-table {\n font-family: \"Lucida Sans Unicode\", \"Lucida Grande\", Sans-Serif;\n font-size: 14px;\n width: 100%;\n text-align: center;\n border-collapse: collapse;\n background: #252F48;\n}\n.system-load-table th {\n color: #EDB749;\n border-bottom: 1px solid #37B5A5;\n padding: 12px 17px;\n}\n\n.canvasCpu-block, .canvasMemory-block {\n height: 200px;\n width: 500px;\n}\n\n.canvas-block {\n margin-top: 50px;\n}\n\n.cpu-and-memory-charts {\n display: flex;\n justify-content: space-around;\n}\n\n.loadAver {\n margin: 100px auto;\n height: 100%;\n width: 50%;\n}\n\n@media screen and (max-width: 414px) {\n .system-load-table {\n font-size: 11px;\n }\n \n .system-load-table th {\n padding: 6px 6px;\n }\n \n .canvas-block {\n margin-top: 30px;\n }\n \n .cpu-and-memory-charts {\n display: block;\n }\n \n .canvasMemory-block {\n margin-top: 10px;\n height: 150px;\n width: 300px;\n }\n \n .canvasCpu-block {\n height: 150px;\n width: 300px;\n }\n \n .loadAver {\n margin-top: 20px;\n height: 300px;\n width: 300px;\n }\n}"]}
\ No newline at end of file
build/static/js/1.41eb0558.chunk.js 0 → 100644
View file @ 634aa460
This source diff could not be displayed because it is too large. You can view the blob instead.
build/static/js/1.41eb0558.chunk.js.map 0 → 100644
View file @ 634aa460
This source diff could not be displayed because it is too large. You can view the blob instead.
build/static/js/main.26f36514.chunk.js 0 → 100644
View file @ 634aa460
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{25:function(e,t,a){e.exports=a(78)},31:function(e,t,a){},76:function(e,t,a){},78:function(e,t,a){"use strict";a.r(t);var n=a(0),i=a.n(n),o=a(24),r=a.n(o),s=(a(31),a(10)),l=a(11),c=a(13),u=a(12),m=a(14),d=function(e){function t(e){var a;Object(s.a)(this,t);var n=(a=Object(c.a)(this,Object(u.a)(t).call(this,e))).getData();return a.state={CPU:n.CPU,totalM:n.TotalMemory,freeM:n.FreeMemory,oneMin:n.oneMinute,fiveMin:n.fiveMinutes,fifteenMin:n.fifteenMinutes},a.changeData(),a}return Object(m.a)(t,e),Object(l.a)(t,[{key:"changeData",value:function(){var e=this;setInterval(function(){e.data=e.getData(),e.setState({CPU:e.data.CPU,totalM:e.data.TotalMemory,freeM:e.data.FreeMemory,oneMin:e.data.oneMinute,fiveMin:e.data.fiveMinutes,fifteenMin:e.data.fifteenMinutes})},2e3)}},{key:"getData",value:function(){var e=new XMLHttpRequest;if(e.open("GET","http://77.246.159.121/core/data.php",!1),e.send(),200==e.status)return JSON.parse(e.responseText);console.log(e.status)}},{key:"render",value:function(){return i.a.createElement("table",{className:"system-load-table"},i.a.createElement("tbody",null,i.a.createElement("tr",{className:"first_row"},i.a.createElement("th",null,"CPU"),i.a.createElement("th",null,"Total memory"),i.a.createElement("th",null,"Free memory"),i.a.createElement("th",null,"1 minute"),i.a.createElement("th",null,"5 minutes"),i.a.createElement("th",null,"15 minutes")),i.a.createElement("tr",{className:"second-row"},i.a.createElement("th",null,this.state.CPU,"%"),i.a.createElement("th",null,this.state.totalM.toFixed(2)+" \u041c\u0411"),i.a.createElement("th",null,this.state.freeM.toFixed(2)+" \u041c\u0411"),i.a.createElement("th",null,this.state.oneMin),i.a.createElement("th",null,this.state.fiveMin),i.a.createElement("th",null,this.state.fifteenMin))))}}]),t}(i.a.Component),h=a(15),f=a.n(h),b=function(e){function t(e){var a;Object(s.a)(this,t);var n=(a=Object(c.a)(this,Object(u.a)(t).call(this,e))).getData();return a.state={cpuData:[n.CPU],memoryData:[n.FreeMemory],timeData:[(new Date).toLocaleTimeString()],oneMinuteData:[n.oneMinute],fiveMinutesData:[n.fiveMinutes],fifteenMinutesData:[n.fifteenMinutes],data:n},a.changeCharts(),a}return Object(m.a)(t,e),Object(l.a)(t,[{key:"componentDidMount",value:function(){var e=document.getElementById("cpuChart").getContext("2d"),t=document.getElementById("memoryChart").getContext("2d"),a=document.getElementById("loadAverageChart").getContext("2d");this.cpuChart=new f.a(e,{type:"line",data:{labels:this.state.timeData,datasets:[{label:"CPU",backgroundColor:"rgba(255, 99, 132, 0.2)",borderColor:"rgb(255, 99, 132)",data:this.state.cpuData}]},options:{legend:{labels:{fontColor:"white",fontSize:18}},scales:{xAxes:[{gridLines:{color:"rgba(171,171,171,1)",lineWidth:.5},ticks:{fontColor:"white",fontSize:12}}],yAxes:[{gridLines:{color:"rgba(171,171,171,1)",lineWidth:.5},ticks:{fontColor:"white",fontSize:12,min:0,max:100,stepSize:20},scaleLabel:{display:!0,labelString:"PERCENTAGES",fontColor:"#c0c0c0"}}]}}}),this.memoryChart=new f.a(t,{type:"line",data:{labels:this.state.timeData,datasets:[{label:"Free memory",backgroundColor:"rgba(16, 115, 181, 0.2)",borderColor:"rgb(16, 115, 181)",data:this.state.memoryData}]},options:{legend:{labels:{fontColor:"white",fontSize:18}},scales:{xAxes:[{ticks:{fontColor:"white",fontSize:12},gridLines:{color:"rgba(171,171,171,1)",lineWidth:.5}}],yAxes:[{gridLines:{color:"rgba(171,171,171,1)",lineWidth:.5},ticks:{fontColor:"white",fontSize:12,min:0,max:this.state.data.TotalMemory,stepSize:this.state.data.TotalMemory/4},scaleLabel:{display:!0,labelString:"MEGABYTES",fontColor:"#c0c0c0"}}]}}}),this.loadAverageChart=new f.a(a,{type:"line",data:{labels:this.state.timeData,datasets:[{label:"1 minute",backgroundColor:"rgba(255, 99, 132, 0.05)",borderColor:"rgb(255, 99, 132)",data:this.state.oneMinuteData},{label:"5 minutes",backgroundColor:"rgba(65, 99, 222, 0.05)",borderColor:"rgb(65, 99, 222)",data:this.state.fiveMinutesData},{label:"15 minutes",backgroundColor:"rgba(145, 44, 132, 0.05)",borderColor:"rgb(145, 44, 132)",data:this.state.fifteenMinutesData}]},options:{legend:{labels:{fontColor:"white",fontSize:18}},scales:{xAxes:[{ticks:{fontColor:"white",fontSize:12},gridLines:{color:"rgba(171,171,171,1)",lineWidth:.5}}],yAxes:[{gridLines:{color:"rgba(171,171,171,1)",lineWidth:.5},ticks:{fontColor:"white",fontSize:12,min:0,stepSize:.5}}]}}})}},{key:"getData",value:function(){var e=new XMLHttpRequest;if(e.open("GET","http://77.246.159.121/core/data.php",!1),e.send(),200==e.status)return JSON.parse(e.responseText);console.log(e.status)}},{key:"changeCharts",value:function(){var e=this;setInterval(function(){e.data=e.getData(),e.state.timeData.length>=10&&(e.state.timeData.shift(),e.state.cpuData.shift(),e.state.memoryData.shift(),e.state.oneMinuteData.shift(),e.state.fiveMinutesData.shift(),e.state.fifteenMinutesData.shift()),e.state.cpuData.push(e.data.CPU/1),e.state.memoryData.push(e.data.FreeMemory.toFixed(2)),e.state.timeData.push((new Date).toLocaleTimeString()),e.state.oneMinuteData.push(e.data.oneMinute),e.state.fiveMinutesData.push(e.data.fiveMinutes),e.state.fifteenMinutesData.push(e.data.fifteenMinutes),e.loadAverageChart.update(),e.cpuChart.update(),e.memoryChart.update()},2e3)}},{key:"render",value:function(){return i.a.createElement("div",{className:"canvas-block"},i.a.createElement("div",{className:"cpu-and-memory-charts"},i.a.createElement("div",{className:"canvasCpu-block"},i.a.createElement("canvas",{id:"cpuChart"})),i.a.createElement("div",{className:"canvasMemory-block"},i.a.createElement("canvas",{id:"memoryChart"}))),i.a.createElement("div",{className:"loadAver"},i.a.createElement("canvas",{id:"loadAverageChart"})))}}]),t}(i.a.Component);a(76);var g=function(){return[i.a.createElement(d,null),i.a.createElement(b,null)]};r.a.render(i.a.createElement(g,null),document.getElementById("root"))}},[[25,2,1]]]);
//# sourceMappingURL=main.26f36514.chunk.js.map
\ No newline at end of file
build/static/js/runtime~main.229c360f.js 0 → 100644
View file @ 634aa460
!function(e){function r(r){for(var n,f,i=r[0],l=r[1],a=r[2],c=0,s=[];c<i.length;c++)f=i[c],o[f]&&s.push(o[f][0]),o[f]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={2:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var i=window.webpackJsonp=window.webpackJsonp||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var p=l;t()}([]);
//# sourceMappingURL=runtime~main.229c360f.js.map
\ No newline at end of file
build/static/js/runtime~main.229c360f.js.map 0 → 100644
View file @ 634aa460
{"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","2","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice"],"mappings":"aACA,SAAAA,EAAAC,GAQA,IAPA,IAMAC,EAAAC,EANAC,EAAAH,EAAA,GACAI,EAAAJ,EAAA,GACAK,EAAAL,EAAA,GAIAM,EAAA,EAAAC,EAAA,GACQD,EAAAH,EAAAK,OAAoBF,IAC5BJ,EAAAC,EAAAG,GACAG,EAAAP,IACAK,EAAAG,KAAAD,EAAAP,GAAA,IAEAO,EAAAP,GAAA,EAEA,IAAAD,KAAAG,EACAO,OAAAC,UAAAC,eAAAC,KAAAV,EAAAH,KACAc,EAAAd,GAAAG,EAAAH,IAKA,IAFAe,KAAAhB,GAEAO,EAAAC,QACAD,EAAAU,OAAAV,GAOA,OAHAW,EAAAR,KAAAS,MAAAD,EAAAb,GAAA,IAGAe,IAEA,SAAAA,IAEA,IADA,IAAAC,EACAf,EAAA,EAAiBA,EAAAY,EAAAV,OAA4BF,IAAA,CAG7C,IAFA,IAAAgB,EAAAJ,EAAAZ,GACAiB,GAAA,EACAC,EAAA,EAAkBA,EAAAF,EAAAd,OAA2BgB,IAAA,CAC7C,IAAAC,EAAAH,EAAAE,GACA,IAAAf,EAAAgB,KAAAF,GAAA,GAEAA,IACAL,EAAAQ,OAAApB,IAAA,GACAe,EAAAM,IAAAC,EAAAN,EAAA,KAGA,OAAAD,EAIA,IAAAQ,EAAA,GAKApB,EAAA,CACAqB,EAAA,GAGAZ,EAAA,GAGA,SAAAS,EAAA1B,GAGA,GAAA4B,EAAA5B,GACA,OAAA4B,EAAA5B,GAAA8B,QAGA,IAAAC,EAAAH,EAAA5B,GAAA,CACAK,EAAAL,EACAgC,GAAA,EACAF,QAAA,IAUA,OANAhB,EAAAd,GAAAa,KAAAkB,EAAAD,QAAAC,IAAAD,QAAAJ,GAGAK,EAAAC,GAAA,EAGAD,EAAAD,QAKAJ,EAAAO,EAAAnB,EAGAY,EAAAQ,EAAAN,EAGAF,EAAAS,EAAA,SAAAL,EAAAM,EAAAC,GACAX,EAAAY,EAAAR,EAAAM,IACA1B,OAAA6B,eAAAT,EAAAM,EAAA,CAA0CI,YAAA,EAAAC,IAAAJ,KAK1CX,EAAAgB,EAAA,SAAAZ,GACA,qBAAAa,eAAAC,aACAlC,OAAA6B,eAAAT,EAAAa,OAAAC,YAAA,CAAwDC,MAAA,WAExDnC,OAAA6B,eAAAT,EAAA,cAAiDe,OAAA,KAQjDnB,EAAAoB,EAAA,SAAAD,EAAAE,GAEA,GADA,EAAAA,IAAAF,EAAAnB,EAAAmB,IACA,EAAAE,EAAA,OAAAF,EACA,KAAAE,GAAA,kBAAAF,QAAAG,WAAA,OAAAH,EACA,IAAAI,EAAAvC,OAAAwC,OAAA,MAGA,GAFAxB,EAAAgB,EAAAO,GACAvC,OAAA6B,eAAAU,EAAA,WAAyCT,YAAA,EAAAK,UACzC,EAAAE,GAAA,iBAAAF,EAAA,QAAAM,KAAAN,EAAAnB,EAAAS,EAAAc,EAAAE,EAAA,SAAAA,GAAgH,OAAAN,EAAAM,IAAqBC,KAAA,KAAAD,IACrI,OAAAF,GAIAvB,EAAA2B,EAAA,SAAAtB,GACA,IAAAM,EAAAN,KAAAiB,WACA,WAA2B,OAAAjB,EAAA,SAC3B,WAAiC,OAAAA,GAEjC,OADAL,EAAAS,EAAAE,EAAA,IAAAA,GACAA,GAIAX,EAAAY,EAAA,SAAAgB,EAAAC,GAAsD,OAAA7C,OAAAC,UAAAC,eAAAC,KAAAyC,EAAAC,IAGtD7B,EAAA8B,EAAA,IAEA,IAAAC,EAAAC,OAAA,aAAAA,OAAA,iBACAC,EAAAF,EAAAhD,KAAA2C,KAAAK,GACAA,EAAAhD,KAAAX,EACA2D,IAAAG,QACA,QAAAvD,EAAA,EAAgBA,EAAAoD,EAAAlD,OAAuBF,IAAAP,EAAA2D,EAAApD,IACvC,IAAAU,EAAA4C,EAIAxC","file":"static/js/runtime~main.229c360f.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t2: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}
\ No newline at end of file
gulpfile.js deleted 100644 → 0
View file @ 18c75b43
const gulp = require('gulp');
const babel = require('gulp-babel');
const cssmin = require('gulp-minify-css');
const uglify = require('gulp-uglify-es').default;
const rename = require('gulp-rename');
const concat = require('gulp-concat');
gulp.task('css-min', function () {
return gulp.src('src/css/**/*.css')
.pipe(cssmin())
.pipe(rename('main.css'))
.pipe(gulp.dest('public/css/'))
});
gulp.task('js-min', function () {
return gulp.src('src/js/**/*.js')
.pipe(babel({
plugins: ['transform-react-jsx']
}))
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('public/js/'));
});
gulp.task('php', function () {
return gulp.src('src/core/*.php')
.pipe(gulp.dest('public/core/'));
});
gulp.task('watch', function () {
gulp.watch('src/css/**/*.css', gulp.parallel('css-min'));
gulp.watch('src/js/**/*.js', gulp.parallel('js-min'));
gulp.watch('src/core/*.php', gulp.parallel('php'));
});
gulp.task('default', gulp.parallel('watch'));
\ No newline at end of file
package-lock.json
View file @ 634aa460
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 634aa460
{
"name": "system-load",
"version": "0.0.1",
"description": "test task for Etersoft",
"main": "index.js",
"name": "system-load1",
"version": "0.1.0",
"private": true,
"dependencies": {
},
"devDependencies": {
"@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",
"gulp-rename": "^1.4.0"
"chart.js": "^2.7.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.3"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"repository": {
"type": "git",
"url": "git+https://github.com/AstR0x/system-load.git"
"eslintConfig": {
"extends": "react-app"
},
"author": "AstR0x",
"license": "MIT"
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
public/core/data.php deleted 100644 → 0
View file @ 18c75b43
<?php
$cpu = shell_exec('ps aux | awk \'{s += $3} END {print s }\'');
$total_mem = shell_exec("cat /proc/meminfo | grep MemTotal | awk '{ print $2 }' ");
$free_mem = shell_exec("cat /proc/meminfo | grep Cached | awk '{ print $2 }' ");
if(trim(shell_exec("uptime | awk '{ print $10 }' ")) == 'average:') {
$average1 = shell_exec("uptime | awk '{ print $11 }' ");
$average2 = shell_exec("uptime | awk '{ print $12 }' ");
$average3 = shell_exec("uptime | awk '{ print $13 }' ");
} else {
$average1 = shell_exec("uptime | awk '{ print $10 }' ");
$average2 = shell_exec("uptime | awk '{ print $11 }' ");
$average3 = shell_exec("uptime | awk '{ print $12 }' ");
}
header('Access-Control-Allow-Origin: *');
$arr = array('CPU' => ((int)trim($cpu) > 100 ? 100 : trim($cpu)),
'TotalMemory' => trim($total_mem),
'FreeMemory' => trim($free_mem),
"oneMinute" => substr(trim($average1), 0, -1),
"fiveMinutes" => substr(trim($average2), 0, -1),
"fifteenMinutes" => substr(trim($average3), 0, -1));
exit (json_encode($arr));
?>
\ No newline at end of file
public/css/main.css deleted 100644 → 0
View file @ 18c75b43
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/index.html
View file @ 634aa460
......@@ -5,27 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>system-load</title>
<link rel="stylesheet" href="css/main.css">
<script src="../../system-load/src/js/index.js"></script>
</head>
<body>
<div id="root">
</div>
<div class="canvas-block">
<div class="cpu-and-memory-charts">
<div class='canvasCpu-block'>
<canvas id="cpuChart"></canvas>
</div>
<div class='canvasMemory-block'>
<canvas id="memoryChart"></canvas>
</div>
</div>
<div class="loadAver">
<canvas id="loadAverageChart"></canvas>
</div>
</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/main.js deleted 100644 → 0
View file @ 18c75b43
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/css/index.css → src/App.css
View file @ 634aa460
table {
width: 100%;
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-collapse: collapse;
text-align: center;
* {
padding: 0;
margin: 0;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
body {
background: #252F48;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
.system-load-table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
width: 100%;
text-align: center;
border-collapse: collapse;
background: #252F48;
}
td {
background: #D8E6F3;
.system-load-table th {
color: #EDB749;
border-bottom: 1px solid #37B5A5;
padding: 12px 17px;
}
.canvasCpu-block, .canvasMemory-block {
......@@ -42,13 +41,13 @@ td {
width: 50%;
}
@media screen and (max-width: 640px) {
table {
@media screen and (max-width: 414px) {
.system-load-table {
font-size: 11px;
}
th, td:first-child {
padding: 4px 4px;
.system-load-table th {
padding: 6px 6px;
}
.canvas-block {
......
src/js/httpReq.js → src/App.js
View file @ 634aa460
import React, {Component} from 'react';
import Table from './components/Table';
import Charts from './components/Charts'
import './App.css';
function getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'core/data.php', false);
xhr.open('GET', 'http://77.246.159.121/core/data.php', false);
xhr.send();
if (xhr.status != 200) {
console.log(xhr.status);
} else {
return (JSON.parse(xhr.responseText));
}
}
\ No newline at end of file
}
function App() {
return [
<Table/> ,
<Charts/>
]
}
export default App
src/components/Charts.js 0 → 100644
View file @ 634aa460
import React from 'react'
import Chart from 'chart.js'
class Charts extends React.Component {
constructor(props) {
super(props);
const data = this.getData();
this.state = {
cpuData: [data['CPU']],
memoryData: [data['FreeMemory']],
timeData: [new Date().toLocaleTimeString()],
oneMinuteData: [data['oneMinute']],
fiveMinutesData: [data['fiveMinutes']],
fifteenMinutesData: [data['fifteenMinutes']],
data: data
};
this.changeCharts();
}
componentDidMount() {
const cpuCtx = document.getElementById('cpuChart').getContext('2d');
const memoryCtx = document.getElementById('memoryChart').getContext('2d');
const loadAverageCtx = document.getElementById('loadAverageChart').getContext('2d');
this.cpuChart = new Chart(cpuCtx, {
type: 'line',
data: {
labels: this.state.timeData,
datasets: [{
label: "CPU",
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
data: this.state.cpuData,
}]
},
options: {
legend: {
labels: {
fontColor: "white",
fontSize: 18
}
},
scales: {
xAxes: [{
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
},
ticks: {
fontColor: "white",
fontSize: 12,
}
}],
yAxes: [{
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
},
ticks: {
fontColor: "white",
fontSize: 12,
min: 0,
max: 100,
stepSize: 20
},
scaleLabel: {
display: true,
labelString: "PERCENTAGES",
fontColor: "#c0c0c0"
}
}]
}
}
});
this.memoryChart = new Chart(memoryCtx, {
type: 'line',
data: {
labels: this.state.timeData,
datasets: [{
label: "Free memory",
backgroundColor: 'rgba(16, 115, 181, 0.2)',
borderColor: 'rgb(16, 115, 181)',
data: this.state.memoryData,
}]
},
options: {
legend: {
labels: {
fontColor: "white",
fontSize: 18
}
},
scales: {
xAxes: [{
ticks: {
fontColor: "white",
fontSize: 12,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
},
}],
yAxes: [{
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
},
ticks: {
fontColor: "white",
fontSize: 12,
min: 0,
max: this.state.data['TotalMemory'],
stepSize: this.state.data['TotalMemory'] / 4,
},
scaleLabel: {
display: true,
labelString: "MEGABYTES",
fontColor: "#c0c0c0"
}
}]
}
}
});
this.loadAverageChart = new Chart(loadAverageCtx, {
type: 'line',
data: {
labels: this.state.timeData,
datasets: [{
label: "1 minute",
backgroundColor: 'rgba(255, 99, 132, 0.05)',
borderColor: 'rgb(255, 99, 132)',
data: this.state.oneMinuteData,
},
{
label: "5 minutes",
backgroundColor: 'rgba(65, 99, 222, 0.05)',
borderColor: 'rgb(65, 99, 222)',
data: this.state.fiveMinutesData,
},
{
label: "15 minutes",
backgroundColor: 'rgba(145, 44, 132, 0.05)',
borderColor: 'rgb(145, 44, 132)',
data: this.state.fifteenMinutesData,
},]
},
options: {
legend: {
labels: {
fontColor: "white",
fontSize: 18
}
},
scales: {
xAxes: [{
ticks: {
fontColor: "white",
fontSize: 12,
},
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
},
}],
yAxes: [{
gridLines: {
color: 'rgba(171,171,171,1)',
lineWidth: 0.5
},
ticks: {
fontColor: "white",
fontSize: 12,
min: 0,
stepSize: 0.50
}
}]
}
}
});
}
getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://77.246.159.121/core/data.php', false);
xhr.send();
if (xhr.status != 200) {
console.log(xhr.status);
} else {
return (JSON.parse(xhr.responseText));
}
}
changeCharts() {
setInterval(() => {
this.data = this.getData();
if (this.state.timeData.length >= 10) {
this.state.timeData.shift();
this.state.cpuData.shift();
this.state.memoryData.shift();
this.state.oneMinuteData.shift();
this.state.fiveMinutesData.shift();
this.state.fifteenMinutesData.shift();
}
this.state.cpuData.push(this.data['CPU'] / 1);
this.state.memoryData.push((this.data['FreeMemory']).toFixed(2));
this.state.timeData.push(new Date().toLocaleTimeString());
this.state.oneMinuteData.push(this.data['oneMinute']);
this.state.fiveMinutesData.push(this.data['fiveMinutes']);
this.state.fifteenMinutesData.push(this.data['fifteenMinutes']);
this.loadAverageChart.update();
this.cpuChart.update();
this.memoryChart.update();
}, 2000)
}
render() {
return (
<div className="canvas-block">
<div className="cpu-and-memory-charts">
<div className='canvasCpu-block'>
<canvas id="cpuChart"></canvas>
</div>
<div className='canvasMemory-block'>
<canvas id="memoryChart"></canvas>
</div>
</div>
<div className="loadAver">
<canvas id="loadAverageChart"></canvas>
</div>
</div>
);
}
}
export default Charts
\ No newline at end of file
src/components/Table.js 0 → 100644
View file @ 634aa460
import React from 'react';
class Table extends React.Component {
constructor(props) {
super(props)
const data = this.getData();
this.state = {
CPU: data['CPU'],
totalM: data['TotalMemory'],
freeM: data['FreeMemory'],
oneMin: data['oneMinute'],
fiveMin: data['fiveMinutes'],
fifteenMin: data['fifteenMinutes'],
};
this.changeData();
}
changeData() {
setInterval(() => {
this.data = this.getData();
this.setState({
CPU: this.data['CPU'],
totalM: this.data['TotalMemory'],
freeM: this.data['FreeMemory'],
oneMin: this.data['oneMinute'],
fiveMin: this.data['fiveMinutes'],
fifteenMin: this.data['fifteenMinutes']
})
}, 2000)
}
getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://77.246.159.121/core/data.php', false);
xhr.send();
if (xhr.status != 200) {
console.log(xhr.status);
} else {
return (JSON.parse(xhr.responseText));
}
}
render() {
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>{this.state.CPU}%</th>
<th>{(this.state.totalM).toFixed(2) + ' МБ'}</th>
<th>{(this.state.freeM).toFixed(2) + ' МБ'}</th>
<th>{this.state.oneMin}</th>
<th>{this.state.fiveMin}</th>
<th>{this.state.fifteenMin}</th>
</tr>
</tbody>
</table>
)
}
}
export default Table
\ No newline at end of file
src/core/data.php
View file @ 634aa460
......@@ -15,8 +15,8 @@ if(trim(shell_exec("uptime | awk '{ print $10 }' ")) == 'average:') {
header('Access-Control-Allow-Origin: *');
$arr = array('CPU' => ((int)trim($cpu) > 100 ? 100 : trim($cpu)),
'TotalMemory' => trim($total_mem),
'FreeMemory' => trim($free_mem),
'TotalMemory' => trim($total_mem) / 1024,
'FreeMemory' => trim($free_mem) / 1024,
"oneMinute" => substr(trim($average1), 0, -1),
"fiveMinutes" => substr(trim($average2), 0, -1),
"fifteenMinutes" => substr(trim($average3), 0, -1));
......
src/index.css 0 → 100644
View file @ 634aa460
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
src/index.js 0 → 100644
View file @ 634aa460
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('root'));
src/js/charts.js deleted 100644 → 0
View file @ 18c75b43
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 = [];
const 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"
}
}]
}
}
});
const 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"
}
}]
}
}
});
const 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();
}
src/js/components/App.js deleted 100644 → 0
View file @ 18c75b43
function App() {
return (
<Table data={getData()}/>
)
}
\ No newline at end of file
src/js/components/Table.js deleted 100644 → 0
View file @ 18c75b43
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/index.js deleted 100644 → 0
View file @ 18c75b43
setInterval(function ren() {
renderCharts(getData());
ReactDOM.render(<App/>, document.getElementById('root'));
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