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
  26   <main>
  27     <div class="side">
  28
  29       <div class="panel">
  30         <textarea class="text" rows="20" cols="7" id="comandos" placeholder="Definicion de la red como: h1:s1"></textarea>
  31         <div class="buttons">
  32           <button type="button" name="button" onclick="startvsorc()">Iniciar VSoRC</button>
  33           <button type="button" name="button" onclick="stopvsorc()">Detener VSoRC</button>
  34           <button type="button" name="button" onclick="startcontroller()">Iniciar controlador</button>
  35           <button 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         <textarea class="text" style="font-size: 12px;" rows="20" cols="7" id="vsorccommand" placeholder="Enviar comandos a la terminal"></textarea>
  53         <div class="buttons">
  54         <button type="button" name="button" onclick="sendcommand()">Send</button>
  55         <!-- <button type="button" name="button" onclick="cancel()">Cancel</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
  66     </div>
  67
  68     <script type="text/javascript">
  69
  70
  71
  72       let topo = document.getElementById('comandos'); //Donde van escrito el DSL
  73       let comando = document.getElementById('vsorccommand'); //Donde va escrito el comando para la terminal
  74       let vsorcout = document.getElementById('vsorcout'); //salida del vsorc
  75       let controllerout = document.getElementById('controllerout'); //salida del controlador
  76
  77       let timeVsorc = 1000;
  78       let timeController = 2000;
  79       //Estos time son para especificar cada cuantos ms se pedira leer la data de los archivos aichivo y controllerout
  80
  81       let intervalController = null;//Para tener el id del interval para obtener data del controller
  82       let intervalVsorc = null; //Para tener el id del interval para obtener data del vsorc
  83
  84       intervalVsorc = setInterval(getvsorcdata, timeVsorc);
  85       intervalController=setInterval(getcontrollerdata, timeController);
  86
  87       function startcontroller() {
  88         let xhr = new XMLHttpRequest();
  89         xhr.open('GET', '/startcontroller', 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("controller started");
  94           }
  95         }
  96         xhr.send();
  97
  98       }
  99       function cancel() {
 100         let xhr = new XMLHttpRequest();
 101         xhr.open('GET', '/cancel', true);
 102         //console.log(xhr); //para ver en la consola
 103         xhr.onload = function() {
 104           if (xhr.status == 200) { //can use this.status instead
 105             console.log("cancelled");
 106           }
 107         }
 108         xhr.send();
 109
 110       }
 111
 112       function stopcontroller() {
 113         let xhr = new XMLHttpRequest();
 114         xhr.open('GET', '/stopcontroller', true);
 115         xhr.onload = function() {
 116           if (xhr.status == 200) { //can use this.status instead
 117             //console.log(xhr.responseText);// para ver en la consola
 118             console.log("controller stoped");
 119           }
 120         }
 121         xhr.send();
 122         //clearInterval(intervalController);
 123         controllerout.value='';
 124       }
 125       function getcontrollerdata() {
 126         let xhr = new XMLHttpRequest();
 127         xhr.open('GET', '/getcontrollerdata', true);
 128         xhr.onload = function() {
 129           if (xhr.status == 200) { //can use this.status instead
 130             //console.log(xhr.responseText);// para ver en la consola
 131             controllerout.value=xhr.response;
 132             console.log("getting controller data");
 133           }
 134         }
 135         xhr.send();
 136
 137         controllerout.scrollTop = controllerout.scrollHeight;
 138       }
 139       function sendcommand() {
 140         let xhr = new XMLHttpRequest();
 141         cmd = JSON.stringify(comando.value);
 142         xhr.open('GET', '/sendcommand?cmd=' + cmd, true);
 143         xhr.onload = function() {
 144           if (xhr.status == 200) { //can use this.status instead
 145             //console.log(xhr.responseText);// para ver en la consola
 146             console.log("command sended is "+cmd);
 147           }
 148         }
 149         xhr.send();
 150
 151       }
 152
 153       function startvsorc() {
 154         let xhr = new XMLHttpRequest();
 155         topology = JSON.stringify(topo.value)
 156         xhr.open('GET', '/startvsorc?topology=' + topology, 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("vsorc started");
 161           }
 162         }
 163         xhr.send();
 164
 165       }
 166
 167       function stopvsorc() {
 168         let xhr = new XMLHttpRequest();
 169         xhr.open('GET', '/stopvsorc', 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             console.log("vsorc stopped");
 175           }
 176         }
 177         xhr.send();
 178         //clearInterval(intervalVsorc);
 179         vsorcout.value='';
 180       }
 181
 182       function getvsorcdata() {
 183         let xhr = new XMLHttpRequest();
 184         xhr.open('GET', '/getvsorcdata', true);
 185         xhr.onload = function() {
 186           if (xhr.status == 200) { //can use this.status instead
 187             //console.log(xhr.responseText);// para ver en la consola
 188             vsorcout.value=xhr.response;
 189             console.log("getting vsorc data");
 190
 191
 192           }
 193         }
 194         xhr.send();
 195
 196         vsorcout.scrollTop = vsorcout.scrollHeight;
 197       }
 198
 199
 200       function pingall() {
 201         let xhr = new XMLHttpRequest();
 202         xhr.open('GET', '/pingall', true);
 203         xhr.onload = function() {
 204           if (xhr.status == 200) { //can use this.status instead
 205             //console.log(xhr.responseText);// para ver en la consola
 206             vsorcout.value+=xhr.response;
 207             console.log("pingall");
 208
 209
 210           }
 211         }
 212         xhr.send();
 213       }
 214
 215       function iperf() {
 216         let xhr = new XMLHttpRequest();
 217         xhr.open('GET', '/iperf', true);
 218         xhr.onload = function() {
 219           if (xhr.status == 200) { //can use this.status instead
 220             //console.log(xhr.responseText);// para ver en la consola
 221             vsorcout.value+=xhr.response;
 222             console.log("iperf");
 223
 224
 225           }
 226         }
 227         xhr.send();
 228       }
 229
 230       function placement() {
 231         let xhr = new XMLHttpRequest();
 232         xhr.open('GET', '/placement', true);
 233         xhr.onload = function() {
 234           if (xhr.status == 200) { //can use this.status instead
 235             //console.log(xhr.responseText);// para ver en la consola
 236             vsorcout.value+=xhr.response;
 237             console.log("placement");
 238
 239
 240           }
 241         }
 242         xhr.send();
 243       }
 244
 245       function net() {
 246         let xhr = new XMLHttpRequest();
 247         xhr.open('GET', '/net', true);
 248         xhr.onload = function() {
 249           if (xhr.status == 200) { //can use this.status instead
 250             //console.log(xhr.responseText);// para ver en la consola
 251             vsorcout.value+=xhr.response;
 252             console.log("net");
 253
 254
 255           }
 256         }
 257         xhr.send();
 258       }
 259
 260       function nodes() {
 261         let xhr = new XMLHttpRequest();
 262         xhr.open('GET', '/nodes', true);
 263         xhr.onload = function() {
 264           if (xhr.status == 200) { //can use this.status instead
 265             //console.log(xhr.responseText);// para ver en la consola
 266             vsorcout.value+=xhr.response;
 267             console.log("nodes");
 268
 269
 270           }
 271         }
 272         xhr.send();
 273       }
 274
 275       function status() {
 276         let xhr = new XMLHttpRequest();
 277         xhr.open('GET', '/statusnodes', true);
 278         xhr.onload = function() {
 279           if (xhr.status == 200) { //can use this.status instead
 280             //console.log(xhr.responseText);// para ver en la consola
 281             vsorcout.value+=xhr.response;
 282             console.log("statusnodes");
 283
 284
 285           }
 286         }
 287         xhr.send();
 288       }
 289
 290       function intfs() {
 291         let xhr = new XMLHttpRequest();
 292         xhr.open('GET', '/intfs', true);
 293         xhr.onload = function() {
 294           if (xhr.status == 200) { //can use this.status instead
 295             //console.log(xhr.responseText);// para ver en la consola
 296             vsorcout.value+=xhr.response;
 297             console.log("interfaces");
 298
 299
 300           }
 301         }
 302         xhr.send();
 303       }
 304
 305     </script>
 306   </main>
 307 </body>
 308 <footer>
 309   <%include ../../partials/footer%>
 310 </footer>
 311
 312
 313 </html>