send command from the web
[VSoRC/.git] / 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>