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