5 <title>SystemStats</title>
6 <link rel="stylesheet" type="text/css" href="/styles/main.css" />
7 <%include ../../partials/head%>
12 <%include ../../partials/header%>
15 <div class="realtime">
16 <div class="navbar navbar-dark bg-light"><span>Memoria libre en el sistema</span></div>
24 paper_bgcolor: 'rgba(0,0,0,0)',
25 plot_bgcolor: 'rgba(0,0,0,0)'
32 function updatePlot(value) {
34 Plotly.extendTraces('ram', {
41 Plotly.relayout('ram', {
43 range: [cnt1 - 100, cnt1]
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)
63 <div class="navbar navbar-dark bg-light"><span>CPU libre en el sistema</span></div>
64 <div class="wrapper CPU">
68 <script type="text/javascript">
69 function updatePlot2(value) {
71 values: [parseInt(value), 100 - value],
72 labels: ['idle', 'used'],
78 paper_bgcolor: 'rgba(0,0,0,0)',
79 plot_bgcolor: 'rgba(0,0,0,0)'
83 Plotly.react('cpu', data, layout, {
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)
101 <div class="navbar navbar-dark bg-light"><span>Trafico de la Red</span></div>
102 <div class="wrapper">
103 <div id="trafico"></div>
105 Plotly.plot('trafico', [{
114 paper_bgcolor: 'rgba(0,0,0,0)',
115 plot_bgcolor: 'rgba(0,0,0,0)'
122 function updatePlot3(value1) {
123 Plotly.extendTraces('trafico', {
128 }, [0, 1]).then(function() {
133 Plotly.relayout('trafico', {
135 range: [cnt2 - 100, cnt2]
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)
161 <div class="viewframe">
162 <iframe class="iframea" id="ImportFrame" src="http://localhost:8080"></iframe>
166 <%include ../../partials/footer%>