src/views/starter.ejs

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5   <title></title>
   6   <!-- <link rel="stylesheet" type="text/css" href="/styles/main.css" /> -->
   7   <%include ../../partials/head%>
   8   <link rel="stylesheet" type="text/css" href="/styles/starter.css" />
   9   <link rel="stylesheet" href="/node_modules/xterm/css/xterm.css" />
  10 <!-- <link rel="stylesheet" href="/node_modules/xterm/dist/addons/fullscreen/fullscreen.css" /> -->
  11 <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
  12 <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
  13 <script src="/node_modules/xterm/lib/xterm.js"></script>
  14 <script src="/node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
  15 <script src="/node_modules/xterm-addon-attach/lib/xterm-addon-attach.js"></script>
  16 <!-- <script src="/node_modules/xterm/dist/addons/winptyCompat/winptyCompat.js"></script> -->
  17
  18 </head>
  19 <header>
  20   <%include ../../partials/header%>
  21
  22 </header>
  23
  24 <body>
  25   <main>
  26     <div class="side">
  27
  28       <div class="panel">
  29         <textarea class="text" rows="20" cols="7" id="comandos" placeholder="Definicion de la red como: h1:s1"></textarea>
  30         <div class="buttons">
  31           <button id="btnstartvsorc" type="button" name="button" onclick="startvsorc()">Iniciar VSoRC</button>
  32           <button id="btnstopvsorc" type="button" name="button" onclick="stopvsorc()">Detener VSoRC</button>
  33           <button id="btnstartcontroller" type="button" name="button" onclick="startcontroller()">Iniciar controlador Switching</button>
  34           <button id="btnstartcontrollerrouter" type="button" name="button" onclick="startcontrollerrouter()">Iniciar controlador REST Router</button>
  35           <button id="btnstopcontroller" type="button" name="button" onclick="stopcontroller()">Detener controlador</button>
  36         </div>
  37       </div>
  38
  39       <div class="panel">
  40         <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="vsorcout" placeholder="Salida del sistema de consola"></textarea>
  41         <div class="buttons">
  42           <button type="button" name="button" onclick="pingall()">Ping all</button>
  43           <button type="button" name="button" onclick="placement()">Placement</button>
  44           <button type="button" name="button" onclick="iperf()">Iperf3</button>
  45           <button type="button" name="button" onclick="net()">Network</button>
  46           <button type="button" name="button" onclick="nodes()">Nodes</button>
  47           <button type="button" name="button" onclick="status()">Status</button>
  48           <button type="button" name="button" onclick="intfs()">Interfaces</button>
  49         </div>
  50       </div>
  51       <div class="panel">
  52         <input type="text" id="vsorccommand" style="background-color: rgba(255,255,255,0.8); font-size: 12px;" placeholder="Enviar comandos a la terminal"></input>
  53        <!-- <textarea class="text" style="font-size: 12px;" rows="1" cols="20" id="vsorccommand" placeholder="Enviar comandos a la terminal"></textarea> -->
  54         <div class="buttons">
  55         <button type="button" name="button" onclick="sendcommand()" id="btnsend">Send</button>
  56       </div>
  57       </div>
  58     </div>
  59
  60     <div class="side">
  61
  62       <div class="panel">
  63         <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="controllerout" placeholder="Salida del controlador"></textarea>
  64       </div>
  65       <div class="panel">
  66         <textarea class="text" style="font-size: 12px;" disabled rows="16" cols="7" id="raspberrys" placeholder="Raspberry Pi UP!"></textarea>
  67       </div>
  68
  69
  70     </div>
  71
  72     <script type="text/javascript">
  73
  74
  75
  76       let topo = document.getElementById('comandos'); //Donde van escrito el DSL
  77       let comando = document.getElementById('vsorccommand'); //Donde va escrito el comando para la terminal
  78       let vsorcout = document.getElementById('vsorcout'); //salida del vsorc
  79       let controllerout = document.getElementById('controllerout'); //salida del controlador
  80       let raspberry = document.getElementById('raspberrys'); //monitor de las rpi disponibles
  81
  82   comando.addEventListener('keypress', function(event) {
  83         if (event.keyCode == 13) {
  84             event.preventDefault();
  85                 if(comando.value != ""){
  86             document.getElementById('btnsend').click();
  87 }
  88         }
  89     });
  90
  91
  92
  93       let timeVsorc = 1000;
  94       let timeController = 1000;
  95       let timeping = 5000;
  96       //Estos time son para especificar cada cuantos ms se pedira leer la data de los archivos aichivo, controllerout y que raspberry estan activas
  97
  98       let intervalController = null;//Para tener el id del interval para obtener data del controller
  99       let intervalVsorc = null; //Para tener el id del interval para obtener data del vsorc
 100
 101       intervalVsorc = setInterval(getvsorcdata, timeVsorc);
 102       intervalController=setInterval(getcontrollerdata, timeController);
 103       setInterval(rpiping,timeping); //Para ver que rpi estan UP
 104
 105
 106       function rpiping() {
 107         let xhr = new XMLHttpRequest();
 108         xhr.open('GET', '/rpiping', true);
 109         xhr.onload = function() {
 110           if (xhr.status == 200) { //can use this.status instead
 111             //console.log(xhr.responseText);// para ver en la consola
 112             raspberry.value=xhr.response;
 113             console.log("getting controller data");
 114           }
 115         }
 116         xhr.send();
 117
 118       }
 119       function startcontroller() {
 120         let xhr = new XMLHttpRequest();
 121         xhr.open('GET', '/startcontroller', true);
 122         //console.log(xhr); //para ver en la consola
 123         xhr.onload = function() {
 124           if (xhr.status == 200) { //can use this.status instead
 125             console.log("controller started");
 126           }
 127         }
 128         xhr.send();
 129       }
 130       function startcontrollerrouter() {
 131         let xhr = new XMLHttpRequest();
 132         xhr.open('GET', '/startcontrollerrouter', true);
 133         //console.log(xhr); //para ver en la consola
 134         xhr.onload = function() {
 135           if (xhr.status == 200) { //can use this.status instead
 136             console.log("controller started router");
 137           }
 138         }
 139         xhr.send();
 140       }
 141       function cancel() {
 142         let xhr = new XMLHttpRequest();
 143         xhr.open('GET', '/cancel', true);
 144         //console.log(xhr); //para ver en la consola
 145         xhr.onload = function() {
 146           if (xhr.status == 200) { //can use this.status instead
 147             console.log("cancelled");
 148           }
 149         }
 150         xhr.send();
 151
 152       }
 153
 154       function stopcontroller() {
 155         let xhr = new XMLHttpRequest();
 156         xhr.open('GET', '/stopcontroller', true);
 157         xhr.onload = function() {
 158           if (xhr.status == 200) { //can use this.status instead
 159             //console.log(xhr.responseText);// para ver en la consola
 160             console.log("controller stoped");
 161           }
 162         }
 163         xhr.send();
 164         //clearInterval(intervalController);
 165         controllerout.value='';
 166       }
 167       function getcontrollerdata() {
 168         let xhr = new XMLHttpRequest();
 169         xhr.open('GET', '/getcontrollerdata', true);
 170         xhr.onload = function() {
 171           if (xhr.status == 200) { //can use this.status instead
 172             //console.log(xhr.responseText);// para ver en la consola
 173
 174             let controllerstat = xhr.response.split('^'); //La data del controlador y el estado de este llegan separados por ^
 175             if(controllerstat[1] === "true"){
 176             document.getElementById('btnstopcontroller').disabled = false;
 177             document.getElementById('btnstartcontroller').disabled = true;
 178             document.getElementById('btnstartcontrollerrouter').disabled = true;
 179             }else{
 180               document.getElementById('btnstopcontroller').disabled = true;
 181               document.getElementById('btnstartcontroller').disabled = false;
 182               document.getElementById('btnstartcontrollerrouter').disabled = false;
 183             }
 184             controllerout.value=controllerstat[0];
 185             console.log("getting controller data");
 186             console.log(controllerstat);
 187           }
 188         }
 189         xhr.send();
 190
 191         controllerout.scrollTop = controllerout.scrollHeight;
 192       }
 193       function sendcommand() {
 194         let xhr = new XMLHttpRequest();
 195         cmd = comando.value;
 196         xhr.open('GET', '/sendcommand?cmd=' + cmd, true);
 197         xhr.onload = function() {
 198           if (xhr.status == 200) { //can use this.status instead
 199             //console.log(xhr.responseText);// para ver en la consola
 200             console.log("command sended is "+cmd);
 201           }
 202         }
 203         xhr.send();
 204
 205       }
 206
 207       function startvsorc() {
 208         let xhr = new XMLHttpRequest();
 209         topology = JSON.stringify(topo.value)
 210         xhr.open('GET', '/startvsorc?topology=' + topology, true);
 211         xhr.onload = function() {
 212           if (xhr.status == 200) { //can use this.status instead
 213             //console.log(xhr.responseText);// para ver en la consola
 214             console.log("vsorc started");
 215           }
 216         }
 217         xhr.send();
 218
 219       }
 220
 221       function stopvsorc() {
 222         let xhr = new XMLHttpRequest();
 223         xhr.open('GET', '/stopvsorc', true);
 224         xhr.onload = function() {
 225           if (xhr.status == 200) { //can use this.status instead
 226             //console.log(xhr.responseText);// para ver en la consola
 227
 228             console.log("vsorc stopped");
 229           }
 230         }
 231         xhr.send();
 232         //clearInterval(intervalVsorc);
 233         vsorcout.value='';
 234       }
 235
 236       function getvsorcdata() {
 237         let xhr = new XMLHttpRequest();
 238         xhr.open('GET', '/getvsorcdata', true);
 239         xhr.onload = function() {
 240           if (xhr.status == 200) { //can use this.status instead
 241             //console.log(xhr.responseText);// para ver en la consola
 242
 243             //strip
 244             //cambiar boton con vaina[1]
 245             //vsorcout = vaina[0]
 246             let vsorcstat = xhr.response.split('^');
 247             if(vsorcstat[1] === "true"){
 248             document.getElementById('btnstopvsorc').disabled = false;
 249             document.getElementById('btnstartvsorc').disabled = true;
 250             }else{
 251               document.getElementById('btnstopvsorc').disabled = true;
 252               document.getElementById('btnstartvsorc').disabled = false;
 253             }
 254
 255             vsorcout.value=vsorcstat[0];
 256
 257             console.log("getting vsorc data");
 258
 259
 260           }
 261         }
 262         xhr.send();
 263
 264         vsorcout.scrollTop = vsorcout.scrollHeight;
 265       }
 266
 267
 268       function pingall() {
 269         let xhr = new XMLHttpRequest();
 270         xhr.open('GET', '/pingall', true);
 271         xhr.onload = function() {
 272           if (xhr.status == 200) { //can use this.status instead
 273             //console.log(xhr.responseText);// para ver en la consola
 274             vsorcout.value+=xhr.response;
 275             console.log("pingall");
 276
 277
 278           }
 279         }
 280         xhr.send();
 281       }
 282
 283       function iperf() {
 284         let xhr = new XMLHttpRequest();
 285         xhr.open('GET', '/iperf', true);
 286         xhr.onload = function() {
 287           if (xhr.status == 200) { //can use this.status instead
 288             //console.log(xhr.responseText);// para ver en la consola
 289             vsorcout.value+=xhr.response;
 290             console.log("iperf");
 291
 292
 293           }
 294         }
 295         xhr.send();
 296       }
 297
 298       function placement() {
 299         let xhr = new XMLHttpRequest();
 300         xhr.open('GET', '/placement', true);
 301         xhr.onload = function() {
 302           if (xhr.status == 200) { //can use this.status instead
 303             //console.log(xhr.responseText);// para ver en la consola
 304             vsorcout.value+=xhr.response;
 305             console.log("placement");
 306
 307
 308           }
 309         }
 310         xhr.send();
 311       }
 312
 313       function net() {
 314         let xhr = new XMLHttpRequest();
 315         xhr.open('GET', '/net', true);
 316         xhr.onload = function() {
 317           if (xhr.status == 200) { //can use this.status instead
 318             //console.log(xhr.responseText);// para ver en la consola
 319             vsorcout.value+=xhr.response;
 320             console.log("net");
 321
 322
 323           }
 324         }
 325         xhr.send();
 326       }
 327
 328       function nodes() {
 329         let xhr = new XMLHttpRequest();
 330         xhr.open('GET', '/nodes', true);
 331         xhr.onload = function() {
 332           if (xhr.status == 200) { //can use this.status instead
 333             //console.log(xhr.responseText);// para ver en la consola
 334             vsorcout.value+=xhr.response;
 335             console.log("nodes");
 336
 337
 338           }
 339         }
 340         xhr.send();
 341       }
 342
 343       function status() {
 344         let xhr = new XMLHttpRequest();
 345         xhr.open('GET', '/statusnodes', true);
 346         xhr.onload = function() {
 347           if (xhr.status == 200) { //can use this.status instead
 348             //console.log(xhr.responseText);// para ver en la consola
 349             vsorcout.value+=xhr.response;
 350             console.log("statusnodes");
 351
 352
 353           }
 354         }
 355         xhr.send();
 356       }
 357
 358       function intfs() {
 359         let xhr = new XMLHttpRequest();
 360         xhr.open('GET', '/intfs', true);
 361         xhr.onload = function() {
 362           if (xhr.status == 200) { //can use this.status instead
 363             //console.log(xhr.responseText);// para ver en la consola
 364             vsorcout.value+=xhr.response;
 365             console.log("interfaces");
 366
 367
 368           }
 369         }
 370         xhr.send();
 371       }
 372
 373     </script>
 374   </main>
 375 </body>
 376 <footer>
 377   <%include ../../partials/footer%>
 378 </footer>
 379
 380
 381 </html>