bugs fixed
[VSoRC/.git] / src / views / index.ejs
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5   <title>SystemStats</title>
6   <link rel="stylesheet" type="text/css" href="/styles/main.css" />
7   <%include ../../partials/head%>
8 </head>
9
10 <body>
11   <header>
12     <%include ../../partials/header%>
13   </header>
14
15   <div class="realtime">
16
17     <div class="wrapper RAM">
18       <div class="navbar navbar-dark bg-light"><span>Uso de memoria del sistema</span></div>
19       <div id="ram"></div>
20       <!-- <script src="js/health/functions.js"></script> -->
21       <script>
22         Plotly.plot('ram', [{
23           y: [0],
24           type: 'line'
25         }], {
26           paper_bgcolor: 'rgba(0,0,0,0)',
27           plot_bgcolor: 'rgba(0,0,0,0)'
28         }, {
29           responsive: true
30         });
31
32         var cnt1 = 0;
33
34         function updatePlot(value) {
35
36           Plotly.extendTraces('ram', {
37             y: [
38               [value]
39             ]
40           }, [0]);
41           cnt1++;
42           if (cnt1 > 100) {
43             Plotly.relayout('ram', {
44               xaxis: {
45                 range: [cnt1 - 100, cnt1]
46               }
47             });
48           }
49         }
50         setInterval(function() {
51           let xhr = new XMLHttpRequest();
52           xhr.open('GET', '/free', true);
53           //console.log(xhr); //para ver en la consola
54           xhr.onload = function() {
55             if (xhr.status == 200) { //can use this.status instead
56               //console.log(xhr.responseText);// para ver en la consola
57               updatePlot(xhr.responseText)
58             }
59           }
60           xhr.send();
61         }, 2000)
62       </script>
63     </div>
64
65     <div class="wrapper CPU">
66       <div class="navbar navbar-dark bg-light"><span>CPU libre en el sistema</span></div>
67
68       <!-- <div></div> -->
69       <div id="cpu"></div>
70       <!-- <div></div> -->
71       <script type="text/javascript">
72         function updatePlot2(value) {
73           var data = [{
74             values: [parseInt(value), 100 - value],
75             labels: ['idle', 'used'],
76             type: 'pie'
77           }];
78           var layout = {
79             height: 400,
80             width: 500,
81             paper_bgcolor: 'rgba(0,0,0,0)',
82             plot_bgcolor: 'rgba(0,0,0,0)'
83
84           }
85
86           Plotly.react('cpu', data, layout, {
87             responsive: true
88           });
89         }
90         setInterval(function() {
91           let xhr = new XMLHttpRequest();
92           xhr.open('GET', '/mpstat', true);
93           //console.log(xhr); //para ver en la consola
94           xhr.onload = function() {
95             if (xhr.status == 200) { //can use this.status instead
96               //console.log(xhr.responseText);// para ver en la consola
97               updatePlot2(xhr.responseText)
98             }
99           }
100           xhr.send();
101         }, 2000)
102       </script>
103     </div>
104
105     <div class="wrapper TRAFFIC">
106       <div class="navbar navbar-dark bg-light"><span>Trafico de la Red</span></div>
107       <div id="trafico"></div>
108       <script>
109         Plotly.plot('trafico', [{
110           y: [0, 1],
111           type: 'line',
112           name: 'in'
113         }, {
114           y: [0, 3],
115           type: 'line',
116           name: 'out'
117         }], {
118           paper_bgcolor: 'rgba(0,0,0,0)',
119           plot_bgcolor: 'rgba(0,0,0,0)'
120         }, {
121           responsive: true
122         });
123
124         var cnt2 = 0;
125
126         function updatePlot3(value1) {
127           Plotly.extendTraces('trafico', {
128             y: [
129               [value1[0]],
130               [value1[1]]
131             ]
132           }, [0, 1]).then(function() {
133             cnt2++;
134           })
135
136           if (cnt2 > 100) {
137             Plotly.relayout('trafico', {
138               xaxis: {
139                 range: [cnt2 - 100, cnt2]
140               }
141             });
142           }
143         }
144         setInterval(function() {
145           let xhr = new XMLHttpRequest();
146           xhr.open('GET', '/ifstat', true);
147           //console.log(xhr); //para ver en la consola
148           xhr.onload = function() {
149             if (xhr.status == 200) { //can use this.status instead
150               // console.log(xhr.responseText); // para ver en la consola
151               var Response = xhr.responseText.replace(/  +/g, ' ');
152               Response = Response.split(" ");
153               // Response = [parseFloat(Response[1]), parseFloat(Response[2])];
154               Response = [Response[1], Response[2]];
155               console.log(Response);
156               updatePlot3(Response)
157             }
158           }
159           xhr.send();
160         }, 500)
161
162       </script>
163     </div>
164
165     <div class="wrapper TEMP">
166       <div class="navbar navbar-dark bg-light"><span>Temperatura de los equipos</span></div>
167       <div id="temp">
168         <textarea class="text" rows="20" cols="7" id="temperatura" placeholder="Definicion de la red como: h1:s1"></textarea>
169       </div>
170       <script>
171       function showtemp() {
172         let xhr = new XMLHttpRequest();
173         xhr.open('GET', '/showtemp', true);
174         xhr.onload = function() {
175           if (xhr.status == 200) { //can use this.status instead
176             //console.log(xhr.responseText);// para ver en la consola
177             console.log(xhr.response);
178             document.getElementById('temperatura').value = xhr.response;
179           }
180         }
181         xhr.send();
182         //clearInterval(intervalController);
183
184       }
185       setInterval(showtemp,3000);
186       </script>
187     </div>
188
189   </div>
190
191 </body>
192 <footer>
193   <%include ../../partials/footer%>
194 </footer>
195
196
197 </html>