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> -->
20 <%include ../../partials/header%>
29 <textarea class="text" rows="20" cols="7" id="comandos" placeholder="Definicion de la red como: h1:s1"></textarea>
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>
40 <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="vsorcout" placeholder="Salida del sistema de consola"></textarea>
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>
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> -->
55 <button type="button" name="button" onclick="sendcommand()" id="btnsend">Send</button>
63 <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="controllerout" placeholder="Salida del controlador"></textarea>
66 <textarea class="text" style="font-size: 12px;" disabled rows="16" cols="7" id="raspberrys" placeholder="Raspberry Pi UP!"></textarea>
72 <script type="text/javascript">
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
82 comando.addEventListener('keypress', function(event) {
83 if (event.keyCode == 13) {
84 event.preventDefault();
85 if(comando.value != ""){
86 document.getElementById('btnsend').click();
94 let timeController = 1000;
96 //Estos time son para especificar cada cuantos ms se pedira leer la data de los archivos aichivo, controllerout y que raspberry estan activas
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
101 intervalVsorc = setInterval(getvsorcdata, timeVsorc);
102 intervalController=setInterval(getcontrollerdata, timeController);
103 setInterval(rpiping,timeping); //Para ver que rpi estan UP
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");
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");
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");
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");
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");
164 //clearInterval(intervalController);
165 controllerout.value='';
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
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;
180 document.getElementById('btnstopcontroller').disabled = true;
181 document.getElementById('btnstartcontroller').disabled = false;
182 document.getElementById('btnstartcontrollerrouter').disabled = false;
184 controllerout.value=controllerstat[0];
185 console.log("getting controller data");
186 console.log(controllerstat);
191 controllerout.scrollTop = controllerout.scrollHeight;
193 function sendcommand() {
194 let xhr = new XMLHttpRequest();
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);
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");
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
228 console.log("vsorc stopped");
232 //clearInterval(intervalVsorc);
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
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;
251 document.getElementById('btnstopvsorc').disabled = true;
252 document.getElementById('btnstartvsorc').disabled = false;
255 vsorcout.value=vsorcstat[0];
257 console.log("getting vsorc data");
264 vsorcout.scrollTop = vsorcout.scrollHeight;
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");
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");
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");
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;
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");
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");
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");
377 <%include ../../partials/footer%>