Skip to content

S
system-load
Commit 6a596d6e authored by Vladislav Gumerov's avatar Vladislav Gumerov
Browse files
Options

added address.js and server folder

parent 634aa460
Hide whitespace changes
Inline Side-by-side
Showing with 46 additions and 20 deletions
LICENSE 0 → 100644
View file @ 6a596d6e
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
View file @ 6a596d6e
{
"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",
"main.js": "/static/js/main.8c610268.chunk.js",
"main.js.map": "/static/js/main.8c610268.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",
"precache-manifest.75f058a22ef87f2d997369ce54540577.js": "/precache-manifest.75f058a22ef87f2d997369ce54540577.js",
"service-worker.js": "/service-worker.js"
}
\ No newline at end of file
build/index.html
View file @ 6a596d6e
<!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
<!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.8c610268.chunk.js"></script></body></html>
\ No newline at end of file
build/precache-manifest.d7d8b6e8cd6d518875d47fc40cd59de4.js → build/precache-manifest.75f058a22ef87f2d997369ce54540577.js
View file @ 6a596d6e
......@@ -4,19 +4,19 @@ self.__precacheManifest = [
"url": "/static/js/runtime~main.229c360f.js"
},
{
"revision": "26f36514ffd0cf47e1ca",
"url": "/static/js/main.26f36514.chunk.js"
"revision": "8c6102683d12c7aeea81",
"url": "/static/js/main.8c610268.chunk.js"
},
{
"revision": "41eb055892f98c8d23d9",
"url": "/static/js/1.41eb0558.chunk.js"
},
{
"revision": "26f36514ffd0cf47e1ca",
"revision": "8c6102683d12c7aeea81",
"url": "/static/css/main.fc12b575.chunk.css"
},
{
"revision": "946bffc6dc422a0ca6bf6c1f81b9c557",
"revision": "419ecadeecae4f5d54353e2770d5e7db",
"url": "/index.html"
}
];
\ No newline at end of file
build/service-worker.js
View file @ 6a596d6e
......@@ -14,7 +14,7 @@
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
importScripts(
"/precache-manifest.d7d8b6e8cd6d518875d47fc40cd59de4.js"
"/precache-manifest.75f058a22ef87f2d997369ce54540577.js"
);
workbox.clientsClaim();
......
build/static/js/main.26f36514.chunk.js deleted 100644 → 0
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/main.26f36514.chunk.js.map deleted 100644 → 0
View file @ 634aa460
{"version":3,"sources":["components/Table.js","components/Charts.js","App.js","index.js"],"names":["Table","props","_this","Object","classCallCheck","this","data","possibleConstructorReturn","getPrototypeOf","call","getData","state","CPU","totalM","freeM","oneMin","fiveMin","fifteenMin","changeData","_this2","setInterval","setState","xhr","XMLHttpRequest","open","send","status","JSON","parse","responseText","console","log","react_default","a","createElement","className","toFixed","React","Component","Charts","cpuData","memoryData","timeData","Date","toLocaleTimeString","oneMinuteData","fiveMinutesData","fifteenMinutesData","changeCharts","cpuCtx","document","getElementById","getContext","memoryCtx","loadAverageCtx","cpuChart","Chart","type","labels","datasets","label","backgroundColor","borderColor","options","legend","fontColor","fontSize","scales","xAxes","gridLines","color","lineWidth","ticks","yAxes","min","max","stepSize","scaleLabel","display","labelString","memoryChart","loadAverageChart","length","shift","push","update","id","App","components_Table","components_Charts","ReactDOM","render","src_App"],"mappings":"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","file":"static/js/main.26f36514.chunk.js","sourcesContent":["import React from 'react';\r\n\r\nclass Table extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n const data = this.getData();\r\n\r\n this.state = {\r\n CPU: data['CPU'],\r\n totalM: data['TotalMemory'],\r\n freeM: data['FreeMemory'],\r\n oneMin: data['oneMinute'],\r\n fiveMin: data['fiveMinutes'],\r\n fifteenMin: data['fifteenMinutes'],\r\n };\r\n this.changeData();\r\n }\r\n\r\n changeData() {\r\n setInterval(() => {\r\n this.data = this.getData();\r\n this.setState({\r\n CPU: this.data['CPU'],\r\n totalM: this.data['TotalMemory'],\r\n freeM: this.data['FreeMemory'],\r\n oneMin: this.data['oneMinute'],\r\n fiveMin: this.data['fiveMinutes'],\r\n fifteenMin: this.data['fifteenMinutes']\r\n })\r\n }, 2000)\r\n }\r\n\r\n getData() {\r\n let xhr = new XMLHttpRequest();\r\n xhr.open('GET', 'http://77.246.159.121/core/data.php', false);\r\n xhr.send();\r\n if (xhr.status != 200) {\r\n console.log(xhr.status);\r\n } else {\r\n return (JSON.parse(xhr.responseText));\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <table className=\"system-load-table\">\r\n <tbody>\r\n <tr className=\"first_row\">\r\n <th>CPU</th>\r\n <th>Total memory</th>\r\n <th>Free memory</th>\r\n <th>1 minute</th>\r\n <th>5 minutes</th>\r\n <th>15 minutes</th>\r\n </tr>\r\n <tr className=\"second-row\">\r\n <th>{this.state.CPU}%</th>\r\n <th>{(this.state.totalM).toFixed(2) + ' МБ'}</th>\r\n <th>{(this.state.freeM).toFixed(2) + ' МБ'}</th>\r\n <th>{this.state.oneMin}</th>\r\n <th>{this.state.fiveMin}</th>\r\n <th>{this.state.fifteenMin}</th>\r\n </tr>\r\n </tbody>\r\n </table>\r\n )\r\n }\r\n}\r\n\r\nexport default Table","import React from 'react'\r\nimport Chart from 'chart.js'\r\n\r\nclass Charts extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n const data = this.getData();\r\n\r\n this.state = {\r\n cpuData: [data['CPU']],\r\n memoryData: [data['FreeMemory']],\r\n timeData: [new Date().toLocaleTimeString()],\r\n oneMinuteData: [data['oneMinute']],\r\n fiveMinutesData: [data['fiveMinutes']],\r\n fifteenMinutesData: [data['fifteenMinutes']],\r\n data: data\r\n };\r\n\r\n this.changeCharts();\r\n }\r\n\r\n componentDidMount() {\r\n const cpuCtx = document.getElementById('cpuChart').getContext('2d');\r\n const memoryCtx = document.getElementById('memoryChart').getContext('2d');\r\n const loadAverageCtx = document.getElementById('loadAverageChart').getContext('2d');\r\n\r\n this.cpuChart = new Chart(cpuCtx, {\r\n type: 'line',\r\n data: {\r\n labels: this.state.timeData,\r\n datasets: [{\r\n label: \"CPU\",\r\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\r\n borderColor: 'rgb(255, 99, 132)',\r\n data: this.state.cpuData,\r\n }]\r\n },\r\n\r\n options: {\r\n legend: {\r\n labels: {\r\n fontColor: \"white\",\r\n fontSize: 18\r\n }\r\n },\r\n scales: {\r\n xAxes: [{\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n }\r\n }],\r\n yAxes: [{\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n min: 0,\r\n max: 100,\r\n stepSize: 20\r\n },\r\n scaleLabel: {\r\n display: true,\r\n labelString: \"PERCENTAGES\",\r\n fontColor: \"#c0c0c0\"\r\n }\r\n }]\r\n }\r\n }\r\n });\r\n\r\n this.memoryChart = new Chart(memoryCtx, {\r\n type: 'line',\r\n data: {\r\n labels: this.state.timeData,\r\n datasets: [{\r\n label: \"Free memory\",\r\n backgroundColor: 'rgba(16, 115, 181, 0.2)',\r\n borderColor: 'rgb(16, 115, 181)',\r\n data: this.state.memoryData,\r\n }]\r\n },\r\n\r\n options: {\r\n legend: {\r\n labels: {\r\n fontColor: \"white\",\r\n fontSize: 18\r\n }\r\n },\r\n scales: {\r\n xAxes: [{\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n },\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n }],\r\n yAxes: [{\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n min: 0,\r\n max: this.state.data['TotalMemory'],\r\n stepSize: this.state.data['TotalMemory'] / 4,\r\n },\r\n scaleLabel: {\r\n display: true,\r\n labelString: \"MEGABYTES\",\r\n fontColor: \"#c0c0c0\"\r\n }\r\n }]\r\n }\r\n }\r\n });\r\n\r\n this.loadAverageChart = new Chart(loadAverageCtx, {\r\n type: 'line',\r\n data: {\r\n labels: this.state.timeData,\r\n datasets: [{\r\n label: \"1 minute\",\r\n backgroundColor: 'rgba(255, 99, 132, 0.05)',\r\n borderColor: 'rgb(255, 99, 132)',\r\n data: this.state.oneMinuteData,\r\n },\r\n {\r\n label: \"5 minutes\",\r\n backgroundColor: 'rgba(65, 99, 222, 0.05)',\r\n borderColor: 'rgb(65, 99, 222)',\r\n data: this.state.fiveMinutesData,\r\n },\r\n {\r\n label: \"15 minutes\",\r\n backgroundColor: 'rgba(145, 44, 132, 0.05)',\r\n borderColor: 'rgb(145, 44, 132)',\r\n data: this.state.fifteenMinutesData,\r\n },]\r\n },\r\n\r\n options: {\r\n legend: {\r\n labels: {\r\n fontColor: \"white\",\r\n fontSize: 18\r\n }\r\n },\r\n scales: {\r\n xAxes: [{\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n },\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n }],\r\n yAxes: [{\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n min: 0,\r\n stepSize: 0.50\r\n }\r\n }]\r\n }\r\n }\r\n });\r\n }\r\n\r\n getData() {\r\n let xhr = new XMLHttpRequest();\r\n xhr.open('GET', 'http://77.246.159.121/core/data.php', false);\r\n xhr.send();\r\n if (xhr.status != 200) {\r\n console.log(xhr.status);\r\n } else {\r\n return (JSON.parse(xhr.responseText));\r\n }\r\n }\r\n\r\n changeCharts() {\r\n setInterval(() => {\r\n this.data = this.getData();\r\n if (this.state.timeData.length >= 10) {\r\n this.state.timeData.shift();\r\n this.state.cpuData.shift();\r\n this.state.memoryData.shift();\r\n this.state.oneMinuteData.shift();\r\n this.state.fiveMinutesData.shift();\r\n this.state.fifteenMinutesData.shift();\r\n }\r\n\r\n this.state.cpuData.push(this.data['CPU'] / 1);\r\n this.state.memoryData.push((this.data['FreeMemory']).toFixed(2));\r\n this.state.timeData.push(new Date().toLocaleTimeString());\r\n this.state.oneMinuteData.push(this.data['oneMinute']);\r\n this.state.fiveMinutesData.push(this.data['fiveMinutes']);\r\n this.state.fifteenMinutesData.push(this.data['fifteenMinutes']);\r\n this.loadAverageChart.update();\r\n this.cpuChart.update();\r\n this.memoryChart.update();\r\n\r\n\r\n }, 2000)\r\n }\r\n\r\n render() {\r\n return (\r\n <div className=\"canvas-block\">\r\n <div className=\"cpu-and-memory-charts\">\r\n <div className='canvasCpu-block'>\r\n <canvas id=\"cpuChart\"></canvas>\r\n </div>\r\n <div className='canvasMemory-block'>\r\n <canvas id=\"memoryChart\"></canvas>\r\n </div>\r\n </div>\r\n <div className=\"loadAver\">\r\n <canvas id=\"loadAverageChart\"></canvas>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Charts","import React, {Component} from 'react';\nimport Table from './components/Table';\nimport Charts from './components/Charts'\nimport './App.css';\n\nfunction getData() {\n let xhr = new XMLHttpRequest();\n xhr.open('GET', 'http://77.246.159.121/core/data.php', false);\n xhr.send();\n if (xhr.status != 200) {\n console.log(xhr.status);\n } else {\n return (JSON.parse(xhr.responseText));\n }\n}\n\nfunction App() {\n return [\n <Table/> ,\n <Charts/>\n ]\n }\n\nexport default App\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(<App/>, document.getElementById('root'));\n\n\n\n\n"],"sourceRoot":""}
\ No newline at end of file
build/static/js/main.8c610268.chunk.js 0 → 100644
View file @ 6a596d6e
(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="http://77.246.159.121/server/data.php",h=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",d,!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),f=a(15),b=a.n(f),g=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 b.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 b.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 b.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",d,!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()},3e3)}},{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 M=function(){return[i.a.createElement(h,null),i.a.createElement(g,null)]};r.a.render(i.a.createElement(M,null),document.getElementById("root"))}},[[25,2,1]]]);
//# sourceMappingURL=main.8c610268.chunk.js.map
\ No newline at end of file
build/static/js/main.8c610268.chunk.js.map 0 → 100644
View file @ 6a596d6e
{"version":3,"sources":["address.js","components/Table.js","components/Charts.js","App.js","index.js"],"names":["URL","Table","props","_this","Object","classCallCheck","this","data","possibleConstructorReturn","getPrototypeOf","call","getData","state","CPU","totalM","freeM","oneMin","fiveMin","fifteenMin","changeData","_this2","setInterval","setState","xhr","XMLHttpRequest","open","send","status","JSON","parse","responseText","console","log","react_default","a","createElement","className","toFixed","React","Component","Charts","cpuData","memoryData","timeData","Date","toLocaleTimeString","oneMinuteData","fiveMinutesData","fifteenMinutesData","changeCharts","cpuCtx","document","getElementById","getContext","memoryCtx","loadAverageCtx","cpuChart","Chart","type","labels","datasets","label","backgroundColor","borderColor","options","legend","fontColor","fontSize","scales","xAxes","gridLines","color","lineWidth","ticks","yAxes","min","max","stepSize","scaleLabel","display","labelString","memoryChart","loadAverageChart","length","shift","push","update","id","App","components_Table","components_Charts","ReactDOM","render","src_App"],"mappings":"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","file":"static/js/main.8c610268.chunk.js","sourcesContent":["const URL = \"http://77.246.159.121/server/data.php\";\r\nexport default URL","import React from 'react';\r\nimport URL from '../address'\r\n\r\nclass Table extends React.Component {\r\n constructor(props) {\r\n super(props)\r\n\r\n const data = this.getData();\r\n\r\n this.state = {\r\n CPU: data['CPU'],\r\n totalM: data['TotalMemory'],\r\n freeM: data['FreeMemory'],\r\n oneMin: data['oneMinute'],\r\n fiveMin: data['fiveMinutes'],\r\n fifteenMin: data['fifteenMinutes'],\r\n };\r\n this.changeData();\r\n }\r\n\r\n changeData() {\r\n setInterval(() => {\r\n this.data = this.getData();\r\n this.setState({\r\n CPU: this.data['CPU'],\r\n totalM: this.data['TotalMemory'],\r\n freeM: this.data['FreeMemory'],\r\n oneMin: this.data['oneMinute'],\r\n fiveMin: this.data['fiveMinutes'],\r\n fifteenMin: this.data['fifteenMinutes']\r\n })\r\n }, 2000)\r\n }\r\n\r\n getData() {\r\n let xhr = new XMLHttpRequest();\r\n xhr.open('GET', URL, false);\r\n xhr.send();\r\n if (xhr.status != 200) {\r\n console.log(xhr.status);\r\n } else {\r\n return (JSON.parse(xhr.responseText));\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <table className=\"system-load-table\">\r\n <tbody>\r\n <tr className=\"first_row\">\r\n <th>CPU</th>\r\n <th>Total memory</th>\r\n <th>Free memory</th>\r\n <th>1 minute</th>\r\n <th>5 minutes</th>\r\n <th>15 minutes</th>\r\n </tr>\r\n <tr className=\"second-row\">\r\n <th>{this.state.CPU}%</th>\r\n <th>{(this.state.totalM).toFixed(2) + ' МБ'}</th>\r\n <th>{(this.state.freeM).toFixed(2) + ' МБ'}</th>\r\n <th>{this.state.oneMin}</th>\r\n <th>{this.state.fiveMin}</th>\r\n <th>{this.state.fifteenMin}</th>\r\n </tr>\r\n </tbody>\r\n </table>\r\n )\r\n }\r\n}\r\n\r\nexport default Table","import React from 'react'\r\nimport Chart from 'chart.js'\r\nimport URL from '../address'\r\n\r\nclass Charts extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n const data = this.getData();\r\n\r\n this.state = {\r\n cpuData: [data['CPU']],\r\n memoryData: [data['FreeMemory']],\r\n timeData: [new Date().toLocaleTimeString()],\r\n oneMinuteData: [data['oneMinute']],\r\n fiveMinutesData: [data['fiveMinutes']],\r\n fifteenMinutesData: [data['fifteenMinutes']],\r\n data: data\r\n };\r\n\r\n this.changeCharts();\r\n }\r\n\r\n componentDidMount() {\r\n const cpuCtx = document.getElementById('cpuChart').getContext('2d');\r\n const memoryCtx = document.getElementById('memoryChart').getContext('2d');\r\n const loadAverageCtx = document.getElementById('loadAverageChart').getContext('2d');\r\n\r\n this.cpuChart = new Chart(cpuCtx, {\r\n type: 'line',\r\n data: {\r\n labels: this.state.timeData,\r\n datasets: [{\r\n label: \"CPU\",\r\n backgroundColor: 'rgba(255, 99, 132, 0.2)',\r\n borderColor: 'rgb(255, 99, 132)',\r\n data: this.state.cpuData,\r\n }]\r\n },\r\n\r\n options: {\r\n legend: {\r\n labels: {\r\n fontColor: \"white\",\r\n fontSize: 18\r\n }\r\n },\r\n scales: {\r\n xAxes: [{\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n }\r\n }],\r\n yAxes: [{\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n min: 0,\r\n max: 100,\r\n stepSize: 20\r\n },\r\n scaleLabel: {\r\n display: true,\r\n labelString: \"PERCENTAGES\",\r\n fontColor: \"#c0c0c0\"\r\n }\r\n }]\r\n }\r\n }\r\n });\r\n\r\n this.memoryChart = new Chart(memoryCtx, {\r\n type: 'line',\r\n data: {\r\n labels: this.state.timeData,\r\n datasets: [{\r\n label: \"Free memory\",\r\n backgroundColor: 'rgba(16, 115, 181, 0.2)',\r\n borderColor: 'rgb(16, 115, 181)',\r\n data: this.state.memoryData,\r\n }]\r\n },\r\n\r\n options: {\r\n legend: {\r\n labels: {\r\n fontColor: \"white\",\r\n fontSize: 18\r\n }\r\n },\r\n scales: {\r\n xAxes: [{\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n },\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n }],\r\n yAxes: [{\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n min: 0,\r\n max: this.state.data['TotalMemory'],\r\n stepSize: this.state.data['TotalMemory'] / 4,\r\n },\r\n scaleLabel: {\r\n display: true,\r\n labelString: \"MEGABYTES\",\r\n fontColor: \"#c0c0c0\"\r\n }\r\n }]\r\n }\r\n }\r\n });\r\n\r\n this.loadAverageChart = new Chart(loadAverageCtx, {\r\n type: 'line',\r\n data: {\r\n labels: this.state.timeData,\r\n datasets: [{\r\n label: \"1 minute\",\r\n backgroundColor: 'rgba(255, 99, 132, 0.05)',\r\n borderColor: 'rgb(255, 99, 132)',\r\n data: this.state.oneMinuteData,\r\n },\r\n {\r\n label: \"5 minutes\",\r\n backgroundColor: 'rgba(65, 99, 222, 0.05)',\r\n borderColor: 'rgb(65, 99, 222)',\r\n data: this.state.fiveMinutesData,\r\n },\r\n {\r\n label: \"15 minutes\",\r\n backgroundColor: 'rgba(145, 44, 132, 0.05)',\r\n borderColor: 'rgb(145, 44, 132)',\r\n data: this.state.fifteenMinutesData,\r\n },]\r\n },\r\n\r\n options: {\r\n legend: {\r\n labels: {\r\n fontColor: \"white\",\r\n fontSize: 18\r\n }\r\n },\r\n scales: {\r\n xAxes: [{\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n },\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n }],\r\n yAxes: [{\r\n gridLines: {\r\n color: 'rgba(171,171,171,1)',\r\n lineWidth: 0.5\r\n },\r\n ticks: {\r\n fontColor: \"white\",\r\n fontSize: 12,\r\n min: 0,\r\n stepSize: 0.50\r\n }\r\n }]\r\n }\r\n }\r\n });\r\n }\r\n\r\n getData() {\r\n let xhr = new XMLHttpRequest();\r\n xhr.open('GET', URL, false);\r\n xhr.send();\r\n if (xhr.status != 200) {\r\n console.log(xhr.status);\r\n } else {\r\n return (JSON.parse(xhr.responseText));\r\n }\r\n }\r\n\r\n changeCharts() {\r\n setInterval(() => {\r\n this.data = this.getData();\r\n if (this.state.timeData.length >= 10) {\r\n this.state.timeData.shift();\r\n this.state.cpuData.shift();\r\n this.state.memoryData.shift();\r\n this.state.oneMinuteData.shift();\r\n this.state.fiveMinutesData.shift();\r\n this.state.fifteenMinutesData.shift();\r\n }\r\n\r\n this.state.cpuData.push(this.data['CPU'] / 1);\r\n this.state.memoryData.push((this.data['FreeMemory']).toFixed(2));\r\n this.state.timeData.push(new Date().toLocaleTimeString());\r\n this.state.oneMinuteData.push(this.data['oneMinute']);\r\n this.state.fiveMinutesData.push(this.data['fiveMinutes']);\r\n this.state.fifteenMinutesData.push(this.data['fifteenMinutes']);\r\n this.loadAverageChart.update();\r\n this.cpuChart.update();\r\n this.memoryChart.update();\r\n }, 3000)\r\n }\r\n\r\n render() {\r\n return (\r\n <div className=\"canvas-block\">\r\n <div className=\"cpu-and-memory-charts\">\r\n <div className='canvasCpu-block'>\r\n <canvas id=\"cpuChart\"></canvas>\r\n </div>\r\n <div className='canvasMemory-block'>\r\n <canvas id=\"memoryChart\"></canvas>\r\n </div>\r\n </div>\r\n <div className=\"loadAver\">\r\n <canvas id=\"loadAverageChart\"></canvas>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Charts","import React, {Component} from 'react';\nimport Table from './components/Table';\nimport Charts from './components/Charts'\nimport './App.css';\n\nfunction getData() {\n let xhr = new XMLHttpRequest();\n xhr.open('GET', 'http://77.246.159.121/core/data.php', false);\n xhr.send();\n if (xhr.status != 200) {\n console.log(xhr.status);\n } else {\n return (JSON.parse(xhr.responseText));\n }\n}\n\nfunction App() {\n return [\n <Table/> ,\n <Charts/>\n ]\n }\n\nexport default App\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\n\nReactDOM.render(<App/>, document.getElementById('root'));\n\n\n\n\n"],"sourceRoot":""}
\ No newline at end of file
src/address.js 0 → 100644
View file @ 6a596d6e
const URL = "http://77.246.159.121/server/data.php";
export default URL
\ No newline at end of file
src/components/Charts.js
View file @ 6a596d6e
import React from 'react'
import Chart from 'chart.js'
import URL from '../address'
class Charts extends React.Component {
constructor(props) {
......@@ -190,7 +191,7 @@ class Charts extends React.Component {
getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://77.246.159.121/core/data.php', false);
xhr.open('GET', URL, false);
xhr.send();
if (xhr.status != 200) {
console.log(xhr.status);
......@@ -220,9 +221,7 @@ class Charts extends React.Component {
this.loadAverageChart.update();
this.cpuChart.update();
this.memoryChart.update();
}, 2000)
}, 3000)
}
render() {
......
src/components/Table.js
View file @ 6a596d6e
import React from 'react';
import URL from '../address'
class Table extends React.Component {
constructor(props) {
......@@ -33,7 +34,7 @@ class Table extends React.Component {
getData() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://77.246.159.121/core/data.php', false);
xhr.open('GET', URL, false);
xhr.send();
if (xhr.status != 200) {
console.log(xhr.status);
......
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