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
  52     </div>
  53
  54     <div class="side">
  55
  56       <div class="panel">
  57         <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="controllerout" placeholder="Salida del controlador"></textarea>
  58       </div>
  59
  60       <div class="terminal"></div>
  61
  62     </div>
  63
  64     <script type="text/javascript">
  65
  66
  67
  68       let topo = document.getElementById('comandos') //Donde van escrito el DSL
  69       let vsorcout = document.getElementById('vsorcout') //salida del vsorc
  70       let controllerout = document.getElementById('controllerout') //salida del controlador
  71
  72       let timeVsorc = 1000;
  73       let timeController = 1000;
  74       //Estos time son para especificar cada cuantos ms se pedira leer la data de los archivos aichivo y controllerout
  75
  76       let intervalController = null;//Para tener el id del interval para obtener data del controller
  77       let intervalVsorc = null; //Para tener el id del interval para obtener data del vsorc
  78
  79       intervalVsorc = setInterval(getvsorcdata, timeVsorc);
  80       intervalController=setInterval(getcontrollerdata, timeController);
  81
  82       function startcontroller() {
  83         let xhr = new XMLHttpRequest();
  84         xhr.open('GET', '/startcontroller', true);
  85         //console.log(xhr); //para ver en la consola
  86         xhr.onload = function() {
  87           if (xhr.status == 200) { //can use this.status instead
  88             console.log("controller started");
  89           }
  90         }
  91         xhr.send();
  92
  93       }
  94
  95       function stopcontroller() {
  96         let xhr = new XMLHttpRequest();
  97         xhr.open('GET', '/stopcontroller', true);
  98         xhr.onload = function() {
  99           if (xhr.status == 200) { //can use this.status instead
 100             //console.log(xhr.responseText);// para ver en la consola
 101             console.log("controller stoped");
 102           }
 103         }
 104         xhr.send();
 105         //clearInterval(intervalController);
 106         controllerout.value='';
 107       }
 108       function getcontrollerdata() {
 109         let xhr = new XMLHttpRequest();
 110         xhr.open('GET', '/getcontrollerdata', true);
 111         xhr.onload = function() {
 112           if (xhr.status == 200) { //can use this.status instead
 113             //console.log(xhr.responseText);// para ver en la consola
 114             controllerout.value=xhr.response;
 115             console.log("getting controller data");
 116           }
 117         }
 118         xhr.send();
 119
 120         controllerout.scrollTop = controllerout.scrollHeight;
 121       }
 122
 123       function startvsorc() {
 124         let xhr = new XMLHttpRequest();
 125         topology = JSON.stringify(topo.value)
 126         xhr.open('GET', '/startvsorc?topology=' + topology, true);
 127         xhr.onload = function() {
 128           if (xhr.status == 200) { //can use this.status instead
 129             //console.log(xhr.responseText);// para ver en la consola
 130             console.log("vsorc started");
 131           }
 132         }
 133         xhr.send();
 134
 135       }
 136
 137       function stopvsorc() {
 138         let xhr = new XMLHttpRequest();
 139         xhr.open('GET', '/stopvsorc', true);
 140         xhr.onload = function() {
 141           if (xhr.status == 200) { //can use this.status instead
 142             //console.log(xhr.responseText);// para ver en la consola
 143
 144             console.log("vsorc stopped");
 145           }
 146         }
 147         xhr.send();
 148         //clearInterval(intervalVsorc);
 149         vsorcout.value='';
 150       }
 151
 152       function getvsorcdata() {
 153         let xhr = new XMLHttpRequest();
 154         xhr.open('GET', '/getvsorcdata', true);
 155         xhr.onload = function() {
 156           if (xhr.status == 200) { //can use this.status instead
 157             //console.log(xhr.responseText);// para ver en la consola
 158             vsorcout.value=xhr.response;
 159             console.log("getting vsorc data");
 160
 161
 162           }
 163         }
 164         xhr.send();
 165
 166         vsorcout.scrollTop = vsorcout.scrollHeight;
 167       }
 168       function pingall() {
 169         let xhr = new XMLHttpRequest();
 170         xhr.open('GET', '/pingall', true);
 171         xhr.onload = function() {
 172           if (xhr.status == 200) { //can use this.status instead
 173             //console.log(xhr.responseText);// para ver en la consola
 174             vsorcout.value+=xhr.response;
 175             console.log("pingall");
 176
 177
 178           }
 179         }
 180         xhr.send();
 181       }
 182
 183       function iperf() {
 184         let xhr = new XMLHttpRequest();
 185         xhr.open('GET', '/iperf', true);
 186         xhr.onload = function() {
 187           if (xhr.status == 200) { //can use this.status instead
 188             //console.log(xhr.responseText);// para ver en la consola
 189             vsorcout.value+=xhr.response;
 190             console.log("pingall");
 191
 192
 193           }
 194         }
 195         xhr.send();
 196       }
 197       function placement() {
 198         let xhr = new XMLHttpRequest();
 199         xhr.open('GET', '/placement', true);
 200         xhr.onload = function() {
 201           if (xhr.status == 200) { //can use this.status instead
 202             //console.log(xhr.responseText);// para ver en la consola
 203             vsorcout.value+=xhr.response;
 204             console.log("placement");
 205
 206
 207           }
 208         }
 209         xhr.send();
 210       }
 211
 212       function net() {
 213         let xhr = new XMLHttpRequest();
 214         xhr.open('GET', '/net', true);
 215         xhr.onload = function() {
 216           if (xhr.status == 200) { //can use this.status instead
 217             //console.log(xhr.responseText);// para ver en la consola
 218             vsorcout.value+=xhr.response;
 219             console.log("net");
 220
 221
 222           }
 223         }
 224         xhr.send();
 225       }
 226
 227       function nodes() {
 228         let xhr = new XMLHttpRequest();
 229         xhr.open('GET', '/nodes', true);
 230         xhr.onload = function() {
 231           if (xhr.status == 200) { //can use this.status instead
 232             //console.log(xhr.responseText);// para ver en la consola
 233             vsorcout.value+=xhr.response;
 234             console.log("nodes");
 235
 236
 237           }
 238         }
 239         xhr.send();
 240       }
 241
 242       function status() {
 243         let xhr = new XMLHttpRequest();
 244         xhr.open('GET', '/status', true);
 245         xhr.onload = function() {
 246           if (xhr.status == 200) { //can use this.status instead
 247             //console.log(xhr.responseText);// para ver en la consola
 248             vsorcout.value+=xhr.response;
 249             console.log("placement");
 250
 251
 252           }
 253         }
 254         xhr.send();
 255       }
 256
 257       function intfs() {
 258         let xhr = new XMLHttpRequest();
 259         xhr.open('GET', '/intfs', true);
 260         xhr.onload = function() {
 261           if (xhr.status == 200) { //can use this.status instead
 262             //console.log(xhr.responseText);// para ver en la consola
 263             vsorcout.value+=xhr.response;
 264             console.log("placement");
 265
 266
 267           }
 268         }
 269         xhr.send();
 270       }
 271     ///////////////////////////////////////////////////////////////////////CODIGO DE LA terminal
 272     // No idea what these are about. Just copied them from the demo code
 273      // Terminal.applyAddon(attach);
 274      // Terminal.applyAddon(fit);
 275      // Terminal.applyAddon(winptyCompat);
 276      // The terminal
 277
 278      // const fitAddon = new FitAddon();
 279      // term.loadAddon(fitAddon);
 280
 281
 282      const term = new Terminal();
 283      // No idea what this does
 284      // term.winptyCompatInit();
 285      // This kinda makes sense
 286      const container = document.getElementById('terminal');
 287      term.open(container);
 288      // Open the websocket connection to the backend
 289      const protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
 290      const port = location.port ? `:${location.port}` : '';
 291      const socketUrl = `${protocol}${location.hostname}${port}/shell`;
 292      const socket = new WebSocket(socketUrl);
 293      const attachAddon = new AttachAddon(socket);
 294      term.loadAddon(attachAddon);
 295      // Attach the socket to the terminal
 296      socket.onopen = (ev) => { term.attach(socket); };
 297      // Not going to worry about close/error for the websocket
 298      //////////////////////////////////////////////////////////////////////FIN DEL CODIGO DE LA TERMINAL
 299     </script>
 300   </main>
 301 </body>
 302 <footer>
 303   <%include ../../partials/footer%>
 304 </footer>
 305
 306
 307 </html>