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