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         }, 1000)
  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 Kbps</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>Informacion de los equipos</span></div>
 167       <div id="temp">
 168         <textarea class="text" rows="20" cols="7" id="temperatura"></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,15000);
 186       </script>
 187     </div>
 188
 189   </div>
 190
 191 </body>
 192 <footer>
 193   <%include ../../partials/footer%>
 194 </footer>
 195
 196
 197 </html>