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>