se intento agregar encender el vsorc desde la web
[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     <div class="navbar navbar-dark bg-light"><span>Memoria libre en el sistema</span></div>
17     <div class="wrapper">
18       <div id="ram"></div>
19       <script>
20         Plotly.plot('ram', [{
21           y: [0],
22           type: 'line'
23         }], {
24           paper_bgcolor: 'rgba(0,0,0,0)',
25           plot_bgcolor: 'rgba(0,0,0,0)'
26         }, {
27           responsive: true
28         });
29
30         var cnt1 = 0;
31
32         function updatePlot(value) {
33
34           Plotly.extendTraces('ram', {
35             y: [
36               [value]
37             ]
38           }, [0]);
39           cnt1++;
40           if (cnt1 > 100) {
41             Plotly.relayout('ram', {
42               xaxis: {
43                 range: [cnt1 - 100, cnt1]
44               }
45             });
46           }
47         }
48         setInterval(function() {
49           let xhr = new XMLHttpRequest();
50           xhr.open('GET', '/free', true);
51           //console.log(xhr); //para ver en la consola
52           xhr.onload = function() {
53             if (xhr.status == 200) { //can use this.status instead
54               //console.log(xhr.responseText);// para ver en la consola
55               updatePlot(xhr.responseText)
56             }
57           }
58           xhr.send();
59         }, 2000)
60       </script>
61
62     </div>
63     <div class="navbar navbar-dark bg-light"><span>CPU libre en el sistema</span></div>
64     <div class="wrapper CPU">
65       <!-- <div></div> -->
66       <div id="cpu"></div>
67       <!-- <div></div> -->
68       <script type="text/javascript">
69         function updatePlot2(value) {
70           var data = [{
71             values: [parseInt(value), 100 - value],
72             labels: ['idle', 'used'],
73             type: 'pie'
74           }];
75           var layout = {
76             height: 400,
77             width: 500,
78             paper_bgcolor: 'rgba(0,0,0,0)',
79             plot_bgcolor: 'rgba(0,0,0,0)'
80
81           }
82
83           Plotly.react('cpu', data, layout, {
84             responsive: true
85           });
86         }
87         setInterval(function() {
88           let xhr = new XMLHttpRequest();
89           xhr.open('GET', '/mpstat', true);
90           //console.log(xhr); //para ver en la consola
91           xhr.onload = function() {
92             if (xhr.status == 200) { //can use this.status instead
93               //console.log(xhr.responseText);// para ver en la consola
94               updatePlot2(xhr.responseText)
95             }
96           }
97           xhr.send();
98         }, 2000)
99       </script>
100     </div>
101     <div class="navbar navbar-dark bg-light"><span>Trafico de la Red</span></div>
102     <div class="wrapper">
103       <div id="trafico"></div>
104       <script>
105         Plotly.plot('trafico', [{
106           y: [0, 1],
107           type: 'line',
108           name: 'in'
109         }, {
110           y: [0, 3],
111           type: 'line',
112           name: 'out'
113         }], {
114           paper_bgcolor: 'rgba(0,0,0,0)',
115           plot_bgcolor: 'rgba(0,0,0,0)'
116         }, {
117           responsive: true
118         });
119
120         var cnt2 = 0;
121
122         function updatePlot3(value1) {
123           Plotly.extendTraces('trafico', {
124             y: [
125               [value1[0]],
126               [value1[1]]
127             ]
128           }, [0, 1]).then(function() {
129             cnt2++;
130           })
131
132           if (cnt2 > 100) {
133             Plotly.relayout('trafico', {
134               xaxis: {
135                 range: [cnt2 - 100, cnt2]
136               }
137             });
138           }
139         }
140         setInterval(function() {
141           let xhr = new XMLHttpRequest();
142           xhr.open('GET', '/ifstat', true);
143           //console.log(xhr); //para ver en la consola
144           xhr.onload = function() {
145             if (xhr.status == 200) { //can use this.status instead
146               // console.log(xhr.responseText); // para ver en la consola
147               var Response = xhr.responseText.replace(/  +/g, ' ');
148               Response = Response.split(" ");
149               // Response = [parseFloat(Response[1]), parseFloat(Response[2])];
150               Response = [Response[1], Response[2]];
151               console.log(Response);
152               updatePlot3(Response)
153             }
154           }
155           xhr.send();
156         }, 500)
157       </script>
158
159     </div>
160   </div>
161   <div class="viewframe">
162     <iframe class="iframea" id="ImportFrame" src="http://localhost:8080"></iframe>
163   </div>
164 </body>
165 <footer>
166   <%include ../../partials/footer%>
167 </footer>
168
169
170 </html>