Merge "Fix Logging for Topology Manager"
[controller.git] / opendaylight / web / root / src / main / resources / js / one.js
1 // global
2 var one = {
3         // global variables
4         global : {
5                 remoteAddress : "/"
6         },
7         role : null
8 }
9
10 // one ui library
11 one.lib = {};
12
13 // registry
14 one.lib.registry = {};
15
16 /** DASHLET */
17 one.lib.dashlet = {
18         empty : function($dashlet) {
19                 $dashlet.empty();
20         },
21         append : function($dashlet, $content) {
22                 $dashlet.append($content);
23         },
24         header : function(header) {
25                 var $h4 = $(document.createElement('h4'));
26                 $h4.text(header);
27                 return $h4;
28         },
29         list : function(list) {
30                 var $ul = $(document.createElement('ul'));
31                 $(list).each(function(index, value) {
32                         var $li = $(document.createElement('li'));
33                         $li.append(value);
34                         $ul.append($li);
35                 });
36                 return $ul;
37         },
38         button : {
39                 config : function(name, id, type, size) {
40                         var button = {};
41                         button['name'] = name;
42                         button['id'] = id;
43                         button['type'] = type;
44                         button['size'] = size;
45                         return button;
46                 },
47                 single : function(name, id, type, size) {
48                         var buttonList = [];
49                         var button = one.lib.dashlet.button.config(name, id, type, size);
50                         buttonList.push(button);
51                         return buttonList;
52                 },
53                 button : function(buttonList) {
54                         var $buttonGroup = $(document.createElement('div'));
55                         $buttonGroup.addClass("btn-group");
56                         $(buttonList).each(function(index, value) {
57                                 var $button = $(document.createElement('button'));
58                                 $button.text(value.name);
59                                 $button.addClass('btn');
60                                 $button.addClass(value['type']);
61                                 $button.addClass(value['size']);
62                                 if(!(typeof value.id === 'undefined')) {
63                                         $button.attr('id', value.id);
64                                 }
65                                 $buttonGroup.append($button);
66                         });
67                         return $buttonGroup;
68                 }
69         },
70         table : {
71                 table : function(classes, id) {
72                         var $table = $(document.createElement('table'));
73                         $table.addClass("table");
74                         $(classes).each(function(index, value) {
75                                 $table.addClass(value);
76                         });
77                         if (!(typeof id === 'undefined'))
78                                 $table.attr("id", id);
79                         return $table;
80                 },
81                 header : function(headers) {
82                         var $thead = $(document.createElement('thead'));
83                         var $tr = $(document.createElement('tr'));
84                         $(headers).each(function(index, value) {
85                                 $th = $(document.createElement('th'));
86                                 $th.append(value);
87                                 $tr.append($th);
88                         });
89                         $thead.append($tr);
90                         return $thead;
91                 },
92                 body : function(body, thead) {
93                         var $tbody = $(document.createElement('tbody'));
94                         // if empty
95                         if (body.length == 0 && !(typeof thead === 'undefined')) {
96                                 var $tr = $(document.createElement('tr'));
97                                 var $td = $(document.createElement('td'));
98                                 $td.attr("colspan", thead.length);
99                                 $td.text("No data available");
100                                 $td.addClass("empty");
101                                 $tr.append($td);
102                                 $tbody.append($tr);
103                                 return $tbody;
104                         }
105                         // else, populate as usual
106                         $(body).each(function(index, value) {
107                                 var $tr = $(document.createElement('tr'));
108                                 // data-id
109                                 if(value['id'] != undefined) {
110                                         $tr.attr('data-id', value['id']);
111                                 }
112                                 // add classes
113                                 $(value["type"]).each(function(index, value) {
114                                         $tr.addClass(value);
115                                 });
116                                 // add entries
117                                 $(value["entry"]).each(function(index, value) {
118                                         var $td = $(document.createElement('td'));
119                                         $td.append(value);
120                                         $tr.append($td);
121                                 });
122                                 $tbody.append($tr);
123                         });
124                         return $tbody;
125                 }
126         },
127         description : function(description, horizontal) {
128                 var $dl = $(document.createElement('dl'));
129                 if(horizontal == true) {
130                         $dl.addClass("dl-horizontal");
131                 }
132                 $(description).each(function(index, value) {
133                         var $dt = $(document.createElement('dt'));
134                         $dt.text(value.dt);
135                         var $dd = $(document.createElement('dd'));
136                         $dd.text(value.dd);
137                         $dl.append($dt).append($dd);
138                 });
139                 return $dl;
140         }
141 }
142
143 /** MODAL */
144 one.lib.modal = {
145         // clone default modal
146         clone : function(id) {
147                 var $clone = $("#modal").clone(true);
148                 $clone.attr("id", id);
149                 return $clone;
150         },
151         // populate modal
152         populate : function($modal, header, $body, footer) {
153                 var $h3 = $modal.find("h3");
154                 $h3.text(header);
155
156                 var $modalBody = $modal.find(".modal-body");
157                 $modalBody.append($body);
158
159                 $(footer).each(function(index, value) {
160                         $modal.find(".modal-footer").append(value);
161                 });
162         },
163         // clone and populate modal
164         spawn : function(id, header, $body, footer) {
165                 var $modal = one.lib.modal.clone(id);
166                 one.lib.modal.populate($modal, header, $body, footer);
167                 return $modal;
168         },
169         // empty modal
170         empty : function($modal) {
171                 $modal.find("h3").empty();
172                 $modal.find(".modal-body").empty();
173                 $modal.find(".modal-footer").empty();
174         },
175         // injection
176         inject : {
177                 body : function($modal, $body) {
178                         $modal.find(".modal-body").empty();
179                         $modal.find(".modal-body").append($body);
180                 }
181         }
182 }
183
184 /** FORM */
185 one.lib.form = {
186         // create select-option form element
187         select : {
188                 create : function(options, multiple) {
189                         // assert - auto assign
190                         if(options == undefined) options = {};
191
192                         var $select = $(document.createElement('select'));
193                         if (multiple == true) {
194                                 $select.attr("multiple", "multiple");
195                         }
196                         var optionArray = one.lib.form.select.options(options);
197                         $(optionArray).each(function(index, value) {
198                                 $select.append(value);
199                         });
200                         return $select;
201                 },
202                 options : function(options) {
203                         var result = [];
204                         $.each(options, function(key, value) {
205                                 var $option = $(document.createElement('option'));
206                                 $option.attr("value", key);
207                                 $option.text(value);
208                                 result.push($option);
209                         });
210                         return result;
211                 },
212                 empty : function($select) {
213                         $select.empty();
214                 },
215                 inject : function($select, options) {
216                         $select.empty();
217                         var options = one.lib.form.select.options(options);
218                         $select.append(options);
219                 },
220                 prepend : function($select, options) {
221                         var options = one.lib.form.select.options(options);
222                         $select.prepend(options);
223                 },
224                 bubble : function($select, bubble) {
225                         $($select.find("option")).each(function(index, value) {
226                                 if( $(value).attr("value") == bubble ) {
227                                         var option = $(value);
228                                         $(value).remove();
229                                         $select.prepend(option);
230                                         return;
231                                 }
232                         });
233                 }
234         },
235         // create legend form element
236         legend : function(name) {
237                 var $legend = $(document.createElement('legend'));
238                 $legend.text(name);
239                 return $legend;
240         },
241         // create label form element
242         label : function(name) {
243                 var $label = $(document.createElement('label'));
244                 $label.text(name);
245                 return $label;
246         },
247         // create help block form element
248         help : function(help) {
249                 var $help = $(document.createElement('span'));
250                 $help.text(help);
251                 $help.addClass("help-block");
252                 return $help;
253         },
254         // create generic text input
255         input : function(placeholder) {
256                 var $input = $(document.createElement('input'));
257                 $input.attr('type', 'text');
258                 $input.attr('placeholder', placeholder);
259                 return $input;
260         }
261 }
262
263 /** NAV */
264 one.lib.nav = {
265         unfocus : function($nav) {
266                 $($nav.find("li")).each(function(index, value) {
267                         $(value).removeClass("active");
268                 });
269         }
270 }
271
272 /** ALERT */
273 one.lib.alert = function(alert) {
274         $("#alert p").text(alert);
275         $("#alert").hide();
276         $("#alert").slideToggle();
277         clearTimeout(one.lib.registry.alert);
278         one.lib.registry.alert = setTimeout(function() {
279                 $("#alert").slideUp();
280         }, 8000);
281 }
282
283 /* 
284         INITIALIZATION
285         executable JS code starts here
286 */
287 //OpenDaylight root page
288 one.main = {};
289
290 one.main.constants = {
291     address : {
292         menu : "/web.json",
293         prefix : "/controller/web",
294         save : "/save"
295     }
296 }
297
298 one.main.menu = {
299     load : function() {
300         one.main.menu.ajax(function(data) {
301             // reparse the ajax data
302             var result = one.main.menu.data.menu(data);
303             // transform into list to append to menu
304             var $div = one.main.menu.menu(result);
305             // append to menu
306             $("#menu .nav").append($div.children());
307             // binding all menu items
308             var $menu = $("#menu .nav a");
309             $menu.click(function() {
310                 var href = $(this).attr('href').substring(1);
311                 one.main.page.load(href);
312                 var $li = $(this).parent();
313                 // reset all other active
314                 $menu.each(function(index, value) {
315                         $(value).parent().removeClass('active');
316                 });
317                 $li.addClass('active');
318             });
319             // reset or go to first menu item by default
320             var currentLocation = location.hash;
321             if (data[currentLocation.substring(1)] == undefined) {
322                 $($menu[0]).click();
323             } else {
324                 $menu.each(function(index, value) {
325                         var menuLocation = $(value).attr('href');
326                         if (currentLocation == menuLocation) {
327                                 $($menu[index]).click();
328                                 return;
329                         }
330                 });
331             }
332         });
333     },
334     menu : function(result) {
335         var $div = $(document.createElement('div'));
336         $(result).each(function(index, value) {
337             if( value != undefined) {
338                 var $li = $(document.createElement('li'));
339                 var $a = $(document.createElement('a'));
340                 $a.text(value['name']);
341                 $a.attr('href', '#'+value['id']);
342                 $li.append($a);
343                 $div.append($li);
344             }
345         });
346         return $div;
347     },
348     ajax : function(successCallback) {
349         $.getJSON(one.main.constants.address.menu, function(data) {
350             successCallback(data);
351         });
352     },
353     data : {
354         menu : function(data) {
355             var result = [];
356             $.each(data, function(key, value) {
357                 var order = value['order'];
358                 if (order >= 0) {
359                         var name = value['name'];
360                         var entry = {
361                             'name' : name,
362                             'id' : key
363                         };
364                         result[order] = entry;
365                 }
366             });
367             return result;
368         }
369     }
370 }
371
372 one.main.page = {
373     load : function(page) {
374                 if (one.f !== undefined && one.f.cleanUp !== undefined) {
375                     one.f.cleanUp();
376                 }       
377         // clear page related
378         delete one.f;
379         $('.dashlet', '#main').empty();
380         $('.nav', '#main').empty();
381         // fetch page's js
382         $.getScript(one.main.constants.address.prefix+"/"+page+"/js/page.js");
383         
384         $.ajaxSetup({
385                 data : {
386                         'x-page-url' : page
387                 }
388         });
389     },
390     dashlet : function($nav, dashlet) {
391         var $li = $(document.createElement('li'));
392         var $a = $(document.createElement('a'));
393         $a.text(dashlet.name);
394         $a.attr('id', dashlet.id);
395         $a.attr('href', '#');
396         $li.append($a);
397         $nav.append($li);
398     }
399 }
400
401 one.main.admin = {
402     id : {
403         modal : {
404             main : "one_main_admin_id_modal_main",
405             close : "one_main_admin_id_modal_close",
406             user : "one_main_admin_id_modal_user",
407             add : {
408                 user : "one_main_admin_id_modal_add_user",
409                 close : "one_main_admin_id_modal_add_close",
410                 form : {
411                     name : "one_main_admin_id_modal_add_form_name",
412                     role : "one_main_admin_id_modal_add_form_role",
413                     password : "one_main_admin_id_modal_add_form_password"
414                 }
415             },
416             remove : {
417                 user : "one_main_admin_id_modal_remove_user",
418                 close : "one_main_admin_id_modal_remove_close"
419             }
420         },
421         add : {
422             user : "one_main_admin_id_add_user"
423         }
424     },
425     address : {
426         root : "/admin",
427         users : "/users"
428     },
429     modal : {
430         initialize : function(callback) {
431             var h3 = "Welcome "+$('#admin').text();
432             var footer = one.main.admin.modal.footer();
433             var $modal = one.lib.modal.spawn(one.main.admin.id.modal.main, h3, '', footer);
434             
435             // close binding
436             $('#'+one.main.admin.id.modal.close, $modal).click(function() {
437                 $modal.modal('hide');
438             });
439             
440             // body inject
441             one.main.admin.ajax.users(function($body) {
442                 one.lib.modal.inject.body($modal, $body);
443             });
444             
445             // modal show callback
446             callback($modal);
447         },
448         footer : function() {
449             var footer = [];
450             
451             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.close, "", "");
452             var $closeButton = one.lib.dashlet.button.button(closeButton);
453             footer.push($closeButton);
454             
455             return footer;
456         }
457     },
458     ajax : {
459         users : function(callback) {
460             $.getJSON(one.main.admin.address.root+one.main.admin.address.users, function(data) {
461                 var body = one.main.admin.data.users(data);
462                 var $body = one.main.admin.body.users(body);
463                 callback($body);
464             });
465         }
466     },
467     data : {
468         users : function(data) {
469             var body = [];
470             $(data).each(function(index, value) {
471                 var tr = {};
472                 var entry = [];
473                 entry.push(value['user']);
474                 entry.push(value['role']);
475                 tr['entry'] = entry;
476                 tr['id'] = value['user'];
477                 body.push(tr);
478             });
479             return body;
480         }
481     },
482     body : {
483         users : function(body) {
484             var $div = $(document.createElement('div'));
485             var $h5 = $(document.createElement('h5'));
486             $h5.append("Manage Users");
487             var attributes = ["table-striped", "table-bordered", "table-hover", "table-cursor"];
488             var $table = one.lib.dashlet.table.table(attributes);
489             var headers = ["User", "Role"];
490             var $thead = one.lib.dashlet.table.header(headers);
491             var $tbody = one.lib.dashlet.table.body(body);
492             $table.append($thead).append($tbody);
493             
494             // bind table
495             if (one.role < 2) {
496                     $table.find('tr').click(function() {
497                         var id = $(this).data('id');
498                         one.main.admin.remove.modal.initialize(id);
499                     });
500             }
501             
502             // append to div
503             $div.append($h5).append($table);
504             
505             if (one.role < 2) {
506                     var addUserButton = one.lib.dashlet.button.single("Add User", one.main.admin.id.add.user, "btn-primary", "btn-mini");
507                     var $addUserButton = one.lib.dashlet.button.button(addUserButton);
508                     $div.append($addUserButton);
509                     
510                     // add user binding
511                     $addUserButton.click(function() {
512                         one.main.admin.add.modal.initialize();
513                     });
514             }
515             
516             return $div;
517         }
518     },
519     remove : {
520         modal : {
521             initialize : function(id) {
522                 var h3 = "Remove User";
523                 var footer = one.main.admin.remove.footer();
524                 var $body = one.main.admin.remove.body();
525                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user, h3, $body, footer);
526                 
527                 // close binding
528                 $('#'+one.main.admin.id.modal.remove.close, $modal).click(function() {
529                     $modal.modal('hide');
530                 });
531                 
532                 // remove binding
533                 $('#'+one.main.admin.id.modal.remove.user, $modal).click(function() {
534                     one.main.admin.remove.modal.ajax(id, function(result) {
535                         if (result == 'Success') {
536                             $modal.modal('hide');
537                             // body inject
538                             var $admin = $('#'+one.main.admin.id.modal.main);
539                             one.main.admin.ajax.users(function($body) {
540                                 one.lib.modal.inject.body($admin, $body);
541                             });
542                         } else alert("Failed to remove user: "+result);
543                     });
544                 });
545                 
546                 $modal.modal();
547             },
548             ajax : function(id, callback) {
549                 $.post(one.main.admin.address.root+one.main.admin.address.users+'/'+id, function(data) {
550                     callback(data);
551                 });
552             },
553         },
554         
555         footer : function() {
556             var footer = [];
557             
558             var removeButton = one.lib.dashlet.button.single("Remove User", one.main.admin.id.modal.remove.user, "btn-danger", "");
559             var $removeButton = one.lib.dashlet.button.button(removeButton);
560             footer.push($removeButton);
561             
562             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.remove.close, "", "");
563             var $closeButton = one.lib.dashlet.button.button(closeButton);
564             footer.push($closeButton);
565             
566             return footer;
567         },
568         body : function() {
569             var $p = $(document.createElement('p'));
570             $p.append("Remove user?");
571             return $p;
572         },
573     },
574     add : {
575         modal : {
576             initialize : function() {
577                 var h3 = "Add User";
578                 var footer = one.main.admin.add.footer();
579                 var $body = one.main.admin.add.body();
580                 var $modal = one.lib.modal.spawn(one.main.admin.id.modal.user, h3, $body, footer);
581                 
582                 // close binding
583                 $('#'+one.main.admin.id.modal.add.close, $modal).click(function() {
584                     $modal.modal('hide');
585                 });
586                 
587                 // add binding
588                 $('#'+one.main.admin.id.modal.add.user, $modal).click(function() {
589                     one.main.admin.add.modal.add($modal, function(result) {
590                         if(result == 'Success') {
591                             $modal.modal('hide');
592                             // body inject
593                             var $admin = $('#'+one.main.admin.id.modal.main);
594                             one.main.admin.ajax.users(function($body) {
595                                 one.lib.modal.inject.body($admin, $body);
596                             });
597                         } else alert("Failed to add user: "+result);
598                     });
599                 });
600                 
601                 $modal.modal();
602             },
603             add : function($modal, callback) {
604                 var user = {};
605                 user['user'] = $modal.find('#'+one.main.admin.id.modal.add.form.name).val();
606                 user['password'] = $modal.find('#'+one.main.admin.id.modal.add.form.password).val();
607                 user['role'] = $modal.find('#'+one.main.admin.id.modal.add.form.role).find('option:selected').attr('value');
608                 
609                 var resource = {};
610                 resource['json'] = JSON.stringify(user);
611                 resource['action'] = 'add'
612                 
613                 one.main.admin.add.modal.ajax(resource, callback);
614             },
615             ajax : function(data, callback) {
616                 $.post(one.main.admin.address.root+one.main.admin.address.users, data, function(data) {
617                     callback(data);
618                 });
619             }
620         },
621         body : function() {
622             var $form = $(document.createElement('form'));
623             var $fieldset = $(document.createElement('fieldset'));
624             // user
625             var $label = one.lib.form.label('Username');
626             var $input = one.lib.form.input('Username');
627             $input.attr('id', one.main.admin.id.modal.add.form.name);
628             $fieldset.append($label).append($input);
629             // password
630             var $label = one.lib.form.label('Password');
631             var $input = one.lib.form.input('Password');
632             $input.attr('id', one.main.admin.id.modal.add.form.password);
633             $input.attr('type', 'password');
634             $fieldset.append($label).append($input);
635             // roles
636             var $label = one.lib.form.label('Roles');
637             var options = {
638                 "Network-Admin" : "Network Administrator",
639                 "Network-Operator" : "Network Operator"
640             };
641             var $select = one.lib.form.select.create(options);
642             $select.attr('id', one.main.admin.id.modal.add.form.role);
643             $fieldset.append($label).append($select);
644             $form.append($fieldset);
645             return $form;
646         },
647         footer : function() {
648             var footer = [];
649             
650             var addButton = one.lib.dashlet.button.single("Add User", one.main.admin.id.modal.add.user, "btn-primary", "");
651             var $addButton = one.lib.dashlet.button.button(addButton);
652             footer.push($addButton);
653             
654             var closeButton = one.lib.dashlet.button.single("Close", one.main.admin.id.modal.add.close, "", "");
655             var $closeButton = one.lib.dashlet.button.button(closeButton);
656             footer.push($closeButton);
657             
658             return footer;
659         }
660     }
661 }
662
663 one.main.dashlet = {
664         left : {
665                 top : $("#left-top .dashlet"),
666                 bottom : $("#left-bottom .dashlet")
667         },
668         right : {
669                 bottom : $("#right-bottom .dashlet")
670         }
671 }
672
673 /** BOOTSTRAP */
674 $(".modal").on('hidden', function() {
675     $(this).remove();
676 });
677
678 $("#alert .close").click(function() {
679         $("#alert").hide();
680 });
681
682 /** INIT */
683
684 // parse role
685 one.role = $('#admin').data('role');
686
687 // user admin
688 $("#admin").click(function() {
689     one.main.admin.modal.initialize(function($modal) {
690         $modal.modal();
691     });
692 });
693
694 // save
695 $("#save").click(function() {
696         $.post(one.main.constants.address.save, function(data) {
697                 if (data == "Success") {
698                         one.lib.alert("Configuration Saved");
699                 } else {
700                         one.lib.alert("Unable to save configuration: "+data);
701                 }
702         });
703 });
704
705 // logout
706 $("#logout").click(function() {
707         location.href = "/logout";
708 });
709
710 $.ajaxSetup({
711     complete : function(xhr,textStatus) {
712         var mime = xhr.getResponseHeader('Content-Type');
713         if (mime.substring(0, 9) == 'text/html') {
714             location.href = '/';
715         }
716     }
717 });
718
719 /** MAIN PAGE LOAD */
720 one.main.menu.load();