Merge "Gracefully stop HT threads when the bundle is being stopped (cache terminated...
[controller.git] / opendaylight / web / devices / src / main / resources / js / page.js
1 /* 
2  * Copyright (c) 2013 Cisco Systems, Inc. and others.  All rights reserved. 
3  * 
4  * This program and the accompanying materials are made available under the 
5  * terms of the Eclipse Public License v1.0 which accompanies this distribution, 
6  * and is available at http://www.eclipse.org/legal/epl-v10.html
7  */
8
9 //PAGE Devices
10 one.f = {};
11
12 // specify dashlets and layouts
13
14 one.f.dashlet = {
15     nodesLearnt : {
16         id : 'nodesLearnt',
17         name : 'Nodes Learned'
18     },
19     staticRouteConfig : {
20         id : 'staticRouteConfig',
21         name : 'Static Route Configuration'
22     },
23     subnetGatewayConfig : {
24         id : 'subnetGatewayConfig',
25         name : 'Subnet Gateway Configuration'
26     },
27     spanPortConfig : {
28         id : 'spanPortConfig',
29         name : 'SPAN Port Configuration'
30     }
31 };
32
33 one.f.menu = {
34     left : {
35         top : [
36             one.f.dashlet.nodesLearnt
37         ],
38         bottom : [
39             one.f.dashlet.staticRouteConfig
40         ]
41     },
42     right : {
43         top : [],
44         bottom : [
45             one.f.dashlet.subnetGatewayConfig,
46             one.f.dashlet.spanPortConfig
47         ]
48     }
49 };
50
51 /**Devices Modules */
52 one.f.switchmanager = {
53     rootUrl: "controller/web/devices",
54     createTable: function(columnNames, body) {
55         var tableAttributes = ["table-striped", "table-bordered", "table-condensed"];
56         var $table = one.lib.dashlet.table.table(tableAttributes);
57         var tableHeaders = columnNames;
58         var $thead = one.lib.dashlet.table.header(tableHeaders);
59         var $tbody = one.lib.dashlet.table.body(body, tableHeaders);
60         $table.append($thead)
61         .append($tbody);
62         return $table;
63     },
64     validateName: function(name) {
65         return (name.length < 256);
66     }
67 };
68
69 one.f.switchmanager.nodesLearnt = {
70     id: {
71         dashlet: {
72             popout: "one_f_switchmanager_nodesLearnt_id_dashlet_popout",
73             datagrid: "one_f_switchmanager_nodesLearnt_id_dashlet_datagrid"
74         },
75         modal: {
76             modal: "one_f_switchmanager_nodesLearnt_id_modal_modal",
77             configure: "one_f_switchmanager_nodesLearnt_id_modal_configure",
78             ports: "one_f_switchmanager_nodesLearnt_id_modal_ports",
79             save: "one_f_switchmanager_nodesLearnt_id_modal_save",
80             datagrid: "one_f_switchmanager_nodesLearnt_id_modal_datagrid",
81             portsDatagrid: "one_f_switchmanager_nodesLearnt_id_modal_portsDatagrid",
82             form: {
83                 nodeId: "one_f_switchmanager_nodesLearnt_id_modal_form_nodeid",
84                 nodeName : "one_f_switchmanager_nodesLearnt_id_modal_form_nodename",
85                 portStatus : "one_f_switchmanager_nodesLearnt_id_modal_form_portstatus",
86                 tier: "one_f_switchmanager_nodesLearnt_id_modal_form_tier",
87                 operationMode: "one_f_switchmanager_nodesLearnt_id_modal_form_opmode"
88             }
89         }
90     },
91     dashlet: function($dashlet) {
92         var url = one.f.switchmanager.rootUrl + "/nodesLearnt";
93         one.lib.dashlet.empty($dashlet);
94         $dashlet.append(one.lib.dashlet.header(one.f.dashlet.nodesLearnt.name));
95
96         one.f.switchmanager.nodesLearnt.ajax.main(url, function(content) {
97             var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.nodesLearnt.id.dashlet.datagrid, {
98                 searchable: true,
99                 filterable: false,
100                 pagination: true,
101                 flexibleRowsPerPage: true
102                 }, "table-striped table-condensed");
103             $dashlet.append($gridHTML);
104             var dataSource = one.f.switchmanager.nodesLearnt.data.gridDataSource.abridged(content);
105             $("#" + one.f.switchmanager.nodesLearnt.id.dashlet.datagrid).datagrid({dataSource: dataSource}).on("loaded", function() {
106                 $(this).find("tbody a").click(one.f.switchmanager.nodesLearnt.modal.initialize.updateNode);
107             });
108             
109             $("#" + one.f.switchmanager.nodesLearnt.id.dashlet.datagrid).datagrid({dataSource: dataSource}).on("loaded", function() {
110                 $(this).find("tbody span").click(function(){
111                     one.f.switchmanager.nodesLearnt.modal.initialize.displayPorts($(this));
112                 });
113             });
114             
115         });
116     },
117     ajax : {
118         main : function(url, callback) {
119             $.getJSON(url, function(data) {
120                 callback(data);
121             });
122         }
123     },
124     modal : {
125         initialize: {
126             updateNode: function(evt) {
127                 one.f.switchmanager.nodesLearnt.ajax.main(one.f.switchmanager.rootUrl + "/tiers", function(tiers) {
128
129                     var nodeId = decodeURIComponent(evt.target.id);
130                     var h3;
131                     var footer = [];
132                     var $body = one.f.switchmanager.nodesLearnt.modal.body.updateNode(nodeId, JSON.parse(decodeURIComponent(evt.target.getAttribute("switchDetails"))), tiers);
133                     if (evt.target.getAttribute("privilege") == 'WRITE'){
134                         h3 = "Update Node Information";
135                         footer = one.f.switchmanager.nodesLearnt.modal.footer.updateNode();
136                     } else { //disable node edit
137                         $body.find('*').attr('disabled', 'disabled');
138                         h3 = 'Node Information';
139                     }
140                     
141                     var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.configure, h3, "", footer);
142                     // bind save button
143                     $('#' + one.f.switchmanager.nodesLearnt.id.modal.save, $modal).click(function() {
144                         one.f.switchmanager.nodesLearnt.modal.save($modal);
145                     });
146
147                     // inject body (nodePorts)
148                     one.lib.modal.inject.body($modal, $body);
149                     $modal.modal();
150                 });
151             },
152             popout: function() {
153                 var h3 = "Nodes Learned";
154                 var footer = one.f.switchmanager.nodesLearnt.modal.footer.popout();
155                 var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.modal, h3, "", footer);
156                 var $body = one.f.switchmanager.nodesLearnt.modal.body.popout($modal);
157                 return $modal;
158             },
159             displayPorts: function(ports) {
160                 var content = JSON.parse(decodeURIComponent(ports.attr("ports")));
161                 
162                 var h3 = ((ports.attr("nodeName") == "None")? ports.attr("nodeId") : ports.attr("nodeName"))
163                 var footer = [];
164                 var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.ports, h3, "", footer);
165                 
166                 var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.nodesLearnt.id.modal.portsDatagrid, {
167                     searchable: true,
168                     filterable: false,
169                     pagination: true,
170                     flexibleRowsPerPage: true,
171                     popout: true
172                     }, "table-striped table-condensed");
173                 one.lib.modal.inject.body($modal, $gridHTML);
174                 $modal.on("shown", function() {
175                     var dataSource = one.f.switchmanager.nodesLearnt.data.gridDataSource.displayPorts(content);
176                     $("#" + one.f.switchmanager.nodesLearnt.id.modal.portsDatagrid).datagrid({
177                         dataSource: dataSource,
178                         stretchHeight: false
179                     });
180                 });
181                 $modal.modal();
182             }
183         },
184         body: {
185             updateNode: function(nodeId, switchDetails, tiers) {
186                 var $form = $(document.createElement('form'));
187                 var $fieldset = $(document.createElement('fieldset'));
188                 // node ID. not editable.
189                 var $label = one.lib.form.label("Node ID");
190                 var $input = one.lib.form.input("node id");
191                 $input.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.nodeId);
192                 $input.attr("disabled", true);
193                 $input.attr("value", nodeId);
194                 $fieldset.append($label).append($input);
195                 // node name
196                 var $label = one.lib.form.label("Node Name");
197                 var $input = one.lib.form.input("Node Name");
198                 $input.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.nodeName);
199                 if(switchDetails["nodeName"] != null) {
200                     $input.attr('value', switchDetails["nodeName"]);
201                 }
202                 $fieldset.append($label).append($input);
203                 // node tier
204                 var $label = one.lib.form.label("Tier");
205                 var $select = one.lib.form.select.create(tiers);
206                 $select.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.tier);
207                 $select.val(switchDetails["tier"]);
208                 $fieldset.append($label).append($select);
209                 // operation mode
210                 var $label = one.lib.form.label("Operation Mode");
211                 var $select = one.lib.form.select.create(
212                         ["Allow reactive forwarding", "Proactive forwarding only"]);
213                 $select.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.operationMode);
214                 if ((one.main.registry != undefined) && (one.main.registry.container != 'default')) {
215                     $select.attr("disabled", true);
216                 }
217                 $select.val(switchDetails["mode"]);
218                 $fieldset.append($label).append($select);
219                 $form.append($fieldset);
220                 return $form;
221             },
222             popout: function($modal) {
223                 var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.nodesLearnt.id.modal.datagrid, {
224                         searchable: true,
225                         filterable: false,
226                         pagination: true,
227                         flexibleRowsPerPage: true,
228                         popout: true
229                         }, "table-striped table-condensed");
230                 one.lib.modal.inject.body($modal, $gridHTML);
231                 // attach to shown event of modal 
232                 $modal.on("shown", function() {
233                     var url = one.f.switchmanager.rootUrl + "/nodesLearnt";
234                     one.f.switchmanager.nodesLearnt.ajax.main(url, function(content) {
235                         var dataSource = one.f.switchmanager.nodesLearnt.data.gridDataSource.popout(content);
236                         $("#" + one.f.switchmanager.nodesLearnt.id.modal.datagrid).datagrid({
237                             dataSource: dataSource,
238                             stretchHeight: false
239                         })
240                         .on("loaded", function() {
241                             $("#" + one.f.switchmanager.nodesLearnt.id.modal.datagrid).find("tbody span").click(function(){
242                                 one.f.switchmanager.nodesLearnt.modal.initialize.displayPorts($(this));
243                             });
244                         });
245                     });
246                 });
247             }
248         },
249         save: function($modal) {
250             var result = {};
251             result['nodeName'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.nodeName, $modal).val();
252             if(!one.f.switchmanager.validateName(result['nodeName'])) {
253                 alert("Node name can contain upto 255 characters");
254                 return;
255             }
256             result['nodeId'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.nodeId, $modal).val();
257             result['tier'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.tier, $modal).val();
258             result['operationMode'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.operationMode, $modal).val();
259             one.f.switchmanager.nodesLearnt.modal.ajax(result, 
260                 function(response) {
261                     if(response.status == true) {
262                         $modal.modal('hide');
263                         one.topology.update(); // refresh visual topology with new name
264                         // TODO: Identify dashlet by inserting a nodesLearnt div 
265                         // in the dashlet() instead
266                         one.f.switchmanager.nodesLearnt.dashlet($("#left-top .dashlet"));
267                     } else {
268                         alert(response.message);
269                     }
270                     
271                 });
272         },
273         ajax: function(requestData, callback) {
274             $.getJSON(one.f.switchmanager.rootUrl + "/nodesLearnt/update", requestData, function(response) {
275                 callback(response);
276             });
277         },
278         footer: {
279             updateNode: function() {
280                 var footer = [];
281                 var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.nodesLearnt.id.modal.save, "btn-success", "");
282                 var $saveButton = one.lib.dashlet.button.button(saveButton);
283                 footer.push($saveButton);
284
285                 return footer;
286             },
287             popout: function() {
288                 // TODO: Maybe put a close button in the footer?
289                 return [];
290             }
291         }
292     },
293     // data functions
294     data : {
295         gridDataSource: {
296             abridged: function(data) {
297                 var source = new StaticDataSource({
298                     columns: [
299                         {
300                             property: 'nodeName',
301                             label: 'Node Name',
302                             sortable: true
303                         },
304                         {
305                             property: 'nodeId',
306                             label: 'Node ID',
307                             sortable: true
308                         },
309                         {
310                             property: 'ports',
311                             label: 'Ports',
312                             sortable: true
313                         }
314                     ],
315                     data: data.nodeData,
316                     formatter: function(items) {
317                     $.each(items, function (index, item) {
318                         var nodeName = item.nodeName;
319                         var nodeNameEntry = item.nodeName ? item.nodeName : "Click to update";
320                         item.nodeName = '<a href="#" id="' + item.nodeId + '" switchDetails=' + encodeURIComponent(JSON.stringify(item)) + 
321                         ' privilege=' + data.privilege + '>' + nodeNameEntry + '</a>';
322                         
323                         var ports = item.ports;
324                         var portsMatch = ports.match(/<\/span>/g);
325                         var portsLength = 0;
326                         if (portsMatch != null) {
327                             portsLength = portsMatch.length;
328                         }
329                         item.ports = '<span class="nodePorts" style="cursor:pointer;color: #08c" ports='+encodeURIComponent(JSON.stringify(item.ports)) + ' nodeId=' + item.nodeId 
330                             + ' nodeName=' + nodeName  
331                             + '>' + portsLength +'</span>';
332                     }); 
333                     },
334                     delay: 0
335                 });
336                 return source;
337
338             },
339             popout: function(data) {
340                 var source = new StaticDataSource({
341                     columns: [
342                         {
343                             property: 'nodeName',
344                             label: 'Node Name',
345                             sortable: true
346                         },
347                         {
348                             property: 'nodeId',
349                             label: 'Node ID',
350                             sortable: true
351                         },
352                         {
353                             property: 'tierName',
354                             label: 'Tier Name',
355                             sortable: true
356                         },
357                         {
358                             property: 'mac',
359                             label: 'MAC',
360                             sortable: true
361                         },
362                         {
363                             property: 'ports',
364                             label: 'Ports',
365                             sortable: true
366                         }
367                     ],
368                     data: data.nodeData,
369                     formatter: function(items) {
370                         $.each(items, function (index, item) {
371                             var ports = item.ports;
372                             var portsMatch = ports.match(/<\/span>/g);
373                             var portsLength = 0;
374                             if (portsMatch != null) {
375                                 portsLength = portsMatch.length;
376                             }
377                             item.ports = '<span class="nodePorts" style="cursor: pointer;color: #08c" ports='+encodeURIComponent(JSON.stringify(item.ports)) + ' nodeId=' + item.nodeId 
378                                 + ' nodeName=' + item.nodeName  
379                                 + '>' + portsLength +'</span>';
380                         }); 
381                     },
382                     delay: 0
383                 });
384                 return source;
385             },
386             displayPorts: function(content){
387                 var data=[];
388                 var start=0;;
389                 var finish=content.indexOf("<br>",start);
390                 while(finish != -1){
391                     data.push({"ports":content.substring(start,finish)});
392                     start=finish+4
393                     finish=content.indexOf("<br>",start);
394                 }
395                 var source = new StaticDataSource({
396                     columns: [
397                         {
398                             property: 'ports',
399                             label: 'Ports',
400                             sortable: true
401                         }
402                     ],
403                     data:data,
404                     delay: 0
405                 });
406                 
407                 return source;
408             }
409         },
410         abridged : function(data) {
411             var result = [];
412             $.each(data.nodeData, function(key, value) {
413                 var tr = {};
414                 var entry = [];
415                 var nodeNameEntry = value["nodeName"] ? value["nodeName"] : "Click to update";
416
417                 // TODO: Move anchor tag creation to one.lib.form.
418                 var aTag;
419                 aTag = document.createElement("a");
420                 aTag.privilege = data.privilege;
421                 aTag.addEventListener("click", one.f.switchmanager.nodesLearnt.modal.initialize.updateNode);
422                 aTag.addEventListener("mouseover", function(evt) {
423                     evt.target.style.cursor = "pointer";
424                 }, false);
425                 aTag.setAttribute("id", encodeURIComponent(value["nodeId"]));
426                 aTag.switchDetails = value;
427                 aTag.innerHTML = nodeNameEntry;
428                 entry.push(aTag);
429                 entry.push(value["nodeId"]);
430                 entry.push(value["ports"]);
431                 tr.entry = entry;
432                 result.push(tr);
433             });
434             return result;
435         },
436         popout : function(data) {
437             var result = [];
438             $.each(data.nodeData, function(key, value) {
439                 var tr = {};
440                 // fill up all the td's
441                 var entry = [];
442                 var nodenameentry = value["nodeName"] ? value["nodeName"] : "No name provided";
443                 entry.push(nodenameentry);
444                 entry.push(value["nodeId"]);
445                 entry.push(value["tierName"]);
446                 entry.push(value["mac"]);
447                 entry.push(value["ports"]);
448                 tr.entry = entry;
449                 result.push(tr);
450             });
451             return result;
452         }
453     }
454 };
455
456 one.f.switchmanager.subnetGatewayConfig = {
457     id: {
458         dashlet: {
459             addIPAddress: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_addIP",
460             addPorts: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_addPorts",
461             removeIPAddress: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_removeIP",
462             datagrid: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_datagrid",
463             selectAll: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_selectAll"
464         }, 
465         modal: {
466             modal: "one_f_switchmanager_subnetGatewayConfig_id_modal_modal",
467             save: "one_f_switchmanager_subnetGatewayConfig_id_modal_save",
468             form: {
469                 name : "one_f_switchmanager_subnetGatewayConfig_id_modal_form_gatewayname",
470                 gatewayIPAddress : "one_f_switchmanager_subnetGatewayConfig_id_modal_form_gatewayipaddress",
471                 nodeId: "one_f_switchmanager_subnetGatewayConfig_id_modal_form_nodeid",
472                 ports: "one_f_switchmanager_subnetGatewayConfig_id_modal_form_ports"
473             }
474         }
475     },
476     // device ajax calls
477     dashlet: function($dashlet) {
478         one.lib.dashlet.empty($dashlet);
479         $dashlet.append(one.lib.dashlet.header(one.f.dashlet.subnetGatewayConfig.name));
480         // Add gateway IP Address button
481         var url = one.f.switchmanager.rootUrl + "/subnets";
482         one.f.switchmanager.subnetGatewayConfig.ajax.main(url, {}, function(content) {
483
484             if (content.privilege === 'WRITE') {
485                 var button = one.lib.dashlet.button.single("Add Gateway IP Address",
486                     one.f.switchmanager.subnetGatewayConfig.id.dashlet.addIPAddress, "btn-primary", "btn-mini");
487                 var $button = one.lib.dashlet.button.button(button);
488                 $button.click(function() {
489                     var $modal = one.f.switchmanager.subnetGatewayConfig.modal.initialize.gateway();
490                     $modal.modal();
491                 });
492                 $dashlet.append($button);
493
494                 // Delete gateway ip address button
495                 var button = one.lib.dashlet.button.single("Delete Gateway IP Address",
496                     one.f.switchmanager.subnetGatewayConfig.id.dashlet.removeIPAddress, "btn-danger", "btn-mini");
497                 var $button = one.lib.dashlet.button.button(button);
498                 $button.click(function() {
499                     var requestData = {};
500                     var gatewaysToDelete = [];
501                     var checkedCheckBoxes = $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).find("tbody input:checked")
502                     checkedCheckBoxes.each(function(index, value) {
503                         gatewaysToDelete.push(checkedCheckBoxes[index].id);
504                     });
505                     if (checkedCheckBoxes.size() === 0) {
506                         alert('Please select at least one gateway');
507                         return false;
508                     }
509                     if (gatewaysToDelete.length > 0) {
510                         requestData["gatewaysToDelete"] = gatewaysToDelete.toString();
511                         var url = one.f.switchmanager.rootUrl + "/subnetGateway/delete";
512                         one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
513                             if (response.status == true) {
514                                 // refresh dashlet by passing dashlet div as param 
515                                 one.lib.alert("Subnet Gateway(s) successfully removed");
516                             } else {
517                                 one.lib.alert(response.message);
518                             }
519                             one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
520                         });
521                     }
522                 });
523                 $dashlet.append($button);
524
525                 // Add Ports button
526                 var button = one.lib.dashlet.button.single("Add Ports",
527                     one.f.switchmanager.subnetGatewayConfig.id.dashlet.addPorts, "btn-primary", "btn-mini");
528                 var $button = one.lib.dashlet.button.button(button);
529                 $button.click(function() {
530                     var $modal = one.f.switchmanager.subnetGatewayConfig.modal.initialize.ports();
531                     $modal.modal();
532                 });
533                 $dashlet.append($button);
534             }
535             var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid, {
536                 searchable: true,
537                 filterable: false,
538                 pagination: true,
539                 flexibleRowsPerPage: true
540                 }, "table-striped table-condensed");
541             $dashlet.append($gridHTML);
542             var dataSource = one.f.switchmanager.subnetGatewayConfig.data.devicesgrid(content);
543             $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
544             .on("loaded", function() {
545                 $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll).click(function() {
546                     $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
547                         $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll).is(':checked'));
548                 });
549                 $(".subnetGatewayConfig").click(function(e){
550                     if (!$('.subnetGatewayConfig[type=checkbox]:not(:checked)').length) {
551                         $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll)
552                             .prop("checked",
553                           true);
554                     } else {
555                         $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll)
556                             .prop("checked",
557                          false);
558                     }
559                     e.stopPropagation();
560                 });
561              });
562         });
563     },
564     ajax : {
565         main : function(url, requestData, callback) {
566             $.getJSON(url, requestData, function(data) {
567                 callback(data);
568             });
569         }
570     },
571     registry: {},
572     modal : {
573         initialize: {
574             gateway: function() {
575                 var h3 = "Add Gateway IP Address";
576                 var footer = one.f.switchmanager.subnetGatewayConfig.modal.footer();
577                 var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.modal, h3, "", footer);
578                 // bind save button
579                 $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.save, $modal).click(function() {
580                     one.f.switchmanager.subnetGatewayConfig.modal.save.gateway($modal);
581                 });
582                 var $body = one.f.switchmanager.subnetGatewayConfig.modal.body.gateway();
583                 one.lib.modal.inject.body($modal, $body);
584                 return $modal;
585             },
586             ports: function() {
587                 var h3 = "Add Ports";
588                 var footer = one.f.switchmanager.subnetGatewayConfig.modal.footer();
589                 var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.modal, h3, "", footer);
590                 // bind save button
591                 $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.save, $modal).click(function() {
592                     one.f.switchmanager.subnetGatewayConfig.modal.save.ports($modal);
593                 });
594                 
595                 // TODO: Change to subnetGateway instead.
596                 one.f.switchmanager.spanPortConfig.modal.ajax.nodes(function(nodes, nodeports) {
597                     var $body = one.f.switchmanager.subnetGatewayConfig.modal.body.ports(nodes, nodeports);
598                     one.lib.modal.inject.body($modal, $body);
599                 });
600                 return $modal;
601             }
602         },
603         save: {
604             gateway: function($modal) {
605                 var result = {};
606                 result['gatewayName'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.name, $modal).val();
607                 if(!one.f.switchmanager.validateName(result['gatewayName'])) {
608                     alert("Gateway name can contain upto 255 characters");
609                     return;
610                 }
611                 result['gatewayIPAddress'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.gatewayIPAddress, $modal).val();
612                 one.f.switchmanager.subnetGatewayConfig.modal.ajax.gateway(result, 
613                     function(response) {
614                         if(response.status == true) {
615                             $modal.modal('hide');
616                             one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
617                         } else {
618                             alert(response.message);
619                         }
620                     });
621             },
622             ports: function($modal) {
623                 var result = {};
624                 var gatewayRegistryIndex = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.name, $modal).val();
625                 result['portsName'] = one.f.switchmanager.subnetGatewayConfig.registry.gateways[gatewayRegistryIndex];
626                 result['nodeId'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.nodeId, $modal).val();
627                 result['ports'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports, $modal).val();
628                 if(!result['portsName'] || result['portsName'] == "") {
629                     alert("No gateway chosen. Cannot add port");
630                     return;
631                 }
632                 if(!result['nodeId'] || result['nodeId'] == "") {
633                     alert("Please select a node.");
634                     return;
635                 }
636                 if(!result['ports'] || result['ports'] == "") {
637                     alert("Please choose a port.");
638                     return;
639                 }
640                 one.f.switchmanager.subnetGatewayConfig.modal.ajax.ports(result, 
641                     function(response) {
642                         if(response.status == true) {
643                             $modal.modal('hide');
644                             one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
645                         } else {
646                             alert(response.message);
647                         }
648                     });
649             }
650         },
651         body: {
652             gateway: function() {
653                 var $form = $(document.createElement('form'));
654                 var $fieldset = $(document.createElement('fieldset'));
655                 // gateway name
656                 var $label = one.lib.form.label("Name");
657                 var $input = one.lib.form.input("Name");
658                 $input.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.name);
659                 $fieldset.append($label).append($input);
660                 // gateway IP Mask 
661                 var $label = one.lib.form.label("Gateway IP Address/Mask");
662                 var $input = one.lib.form.input("Gateway IP Address/Mask");
663                 $input.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.gatewayIPAddress);
664                 $fieldset.append($label).append($input);
665                 
666                 $form.append($fieldset);
667                 return $form;
668             },
669             ports: function(nodes, nodeports) {
670                 var $form = $(document.createElement('form'));
671                 var $fieldset = $(document.createElement('fieldset'));
672                 // gateways drop down
673                 var $label = one.lib.form.label("Gateway Name");
674                 var $select = one.lib.form.select.create(one.f.switchmanager.subnetGatewayConfig.registry.gateways);
675                 $select.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.name);
676                 $select.val($select.find("option:first").val());
677                 $fieldset.append($label).append($select);
678
679                 // node ID
680                 var $label = one.lib.form.label("Node ID");
681                 var $select = one.lib.form.select.create(nodes);
682                 $select.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.nodeId);
683                 one.lib.form.select.prepend($select, { '' : 'Please Select a Node' });
684                 $select.val($select.find("option:first").val());
685                 $fieldset.append($label).append($select);
686
687                 // bind onchange
688                 $select.change(function() {
689                     // retrieve port value
690                     var node = $(this).find('option:selected').attr('value');
691                     one.f.switchmanager.subnetGatewayConfig.registry['currentNode'] = node;
692                     var $ports = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports);
693                     var ports = nodeports[node];
694                     one.lib.form.select.inject($ports, ports);
695                     one.lib.form.select.prepend($ports, { '' : 'Please Select a Port' });
696                     $ports.val($ports.find("option:first").val());
697                 });
698
699                 // ports
700                 var $label = one.lib.form.label("Select Port");
701                 var $select = one.lib.form.select.create();
702                 $select.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports);
703                 $fieldset.append($label).append($select);
704                 
705                 $form.append($fieldset);
706                 return $form;
707             }
708         },
709         ajax: {
710             gateway: function(requestData, callback) {
711                 $.getJSON(one.f.switchmanager.rootUrl + "/subnetGateway/add", requestData, function(data) {
712                     callback(data);
713             });
714             },
715             ports: function(requestData, callback) {
716                 $.getJSON(one.f.switchmanager.rootUrl + "/subnetGateway/ports/add", requestData, function(data) {
717                     callback(data);
718             });
719             }
720         },
721         footer : function() {
722             var footer = [];
723             var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.subnetGatewayConfig.id.modal.save, "btn-success", "");
724             var $saveButton = one.lib.dashlet.button.button(saveButton);
725             footer.push($saveButton);
726             return footer;
727         }
728     },
729     // data functions
730     data : {
731         devicesgrid: function(data) {
732             one.f.switchmanager.subnetGatewayConfig.registry.gateways = [];
733             var source = new StaticDataSource({
734                     columns: [
735                         {
736                             property: 'selector',
737                             label: "<input type='checkbox'  id='"
738                                 +one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll+"'/>",
739                             sortable: false
740                         },
741                         {
742                             property: 'name',
743                             label: 'Name',
744                             sortable: true
745                         },
746                         {
747                             property: 'subnet',
748                             label: 'Gateway IP Address/Mask',
749                             sortable: true
750                         },
751                         {
752                             property: 'nodePorts',
753                             label: 'Node/Ports',
754                             sortable: false
755                         }
756                     ],
757                     data: data.nodeData,
758                     formatter: function(items) {
759                         $.each(items, function(index, tableRow) {
760                             tableRow["selector"] = '<input type="checkbox" class="subnetGatewayConfig" id=' 
761                                 + tableRow["name"] + '></input>';
762                             var json = tableRow["nodePorts"];
763                             var nodePorts = JSON.parse(json);
764                             var nodePortHtml = "<div>";
765                             $.each(nodePorts, function(index, nodePort) {
766                                 var nodePortID = nodePort["nodeId"] + "/" + nodePort["nodePortId"]; 
767                                 nodePortHtml += nodePort["nodeName"] + " / " + nodePort["nodePortName"];
768                                 nodePortHtml += "&nbsp;";
769                                 nodePortHtml += '<a href="#" id=' + encodeURIComponent(nodePortID) + 
770                                     ' gatewayName=' + tableRow["name"] + 
771                                     ' onclick="javascript:one.f.switchmanager.subnetGatewayConfig.actions.deleteNodePort(this);">Delete</a>';
772                                 nodePortHtml += "<br/>";
773                             });
774                             nodePortHtml += "</div>";
775                             tableRow["nodePorts"] = nodePortHtml;
776                         });
777
778                     },
779                     delay: 0
780                 });
781                 // populate the registry with subnet names
782                 one.f.switchmanager.subnetGatewayConfig.registry.gateways = [];
783                 $.each(data.nodeData, function(key, value) {
784                     one.f.switchmanager.subnetGatewayConfig.registry.gateways.push(value["name"]);
785                 });
786                 return source;          
787         },
788         devices : function(data) {
789             var result = [];
790             one.f.switchmanager.subnetGatewayConfig.registry.gateways = [];
791             $.each(data.nodeData, function(key, value) {
792                 var tr = {};
793                 // fill up all the td's
794                 var subnetConfigObject = $.parseJSON(value["json"]);
795                 var nodePorts = subnetConfigObject.nodePorts;
796                 var $nodePortsContainer = $(document.createElement("div"));
797                 
798                 for(var i = 0; i < nodePorts.length; i++) {
799                     var nodePort = nodePorts[i];
800                     $nodePortsContainer.append(nodePort + " ");
801                     // add delete anchor tag to delete ports
802                     var aTag = document.createElement("a");
803                     aTag.setAttribute("id", encodeURIComponent(nodePort));
804                     aTag.gatewayName = value["name"];
805                     aTag.addEventListener("click", function(evt) {
806                         var htmlPortAnchor = evt.target;
807                         var requestData = {};
808                         requestData["gatewayName"] = evt.target.gatewayName;
809                         requestData["nodePort"] = decodeURIComponent(evt.target.id);
810                         // make ajax call to delete port
811                         var url = one.f.switchmanager.rootUrl + "/subnetGateway/ports/delete";
812                         one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
813                             if(response.status == true) {
814                                 // refresh dashlet by passing dashlet div as param
815                                 one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
816                             } else {
817                                 alert(response.message);
818                             }
819                         });
820                         
821                     });
822                     aTag.addEventListener("mouseover", function(evt) {
823                         evt.target.style.cursor = "pointer";
824                     }, false);
825                     aTag.innerHTML = "Delete";
826                     $nodePortsContainer.append(aTag);
827                     $nodePortsContainer.append("<br/>");
828                 }
829
830                 // store gateways in the registry so that they can be used in the add ports popup
831                 one.f.switchmanager.subnetGatewayConfig.registry.gateways.push(value["name"]);
832                 var entry = [];
833                 var checkbox = document.createElement("input");
834                 checkbox.setAttribute("type", "checkbox");
835                 checkbox.setAttribute("id", value["name"]);
836                 entry.push(checkbox);
837                 entry.push(value["name"]);
838                 entry.push(value["subnet"]);
839                 entry.push($nodePortsContainer);
840                 tr.entry = entry;
841                 result.push(tr);
842             });
843             return result;
844         }
845     },
846     actions: {
847         deleteNodePort: function(htmlPortAnchor) {
848             var requestData = {};
849             requestData["gatewayName"] = htmlPortAnchor.getAttribute("gatewayName");
850             requestData["nodePort"] = decodeURIComponent(htmlPortAnchor.id);
851             // make ajax call to delete port
852             var url = one.f.switchmanager.rootUrl + "/subnetGateway/ports/delete";
853             one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
854                 if(response.status == true) {
855                     // refresh dashlet by passing dashlet div as param
856                     one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
857                 } else {
858                     alert(response.message);
859                 }
860             });
861         }
862     }
863 }
864
865 one.f.switchmanager.staticRouteConfig = {
866     id: {
867         dashlet: {
868             add: "one_f_switchmanager_staticRouteConfig_id_dashlet_add",
869             remove: "one_f_switchmanager_staticRouteConfig_id_dashlet_remove",
870             datagrid: "one_f_switchmanager_staticRouteConfig_id_dashlet_datagrid",
871             selectAll: "one_f_switchmanager_staticRouteConfig_id_dashlet_selectAll"
872         }, 
873         modal: {
874             modal: "one_f_switchmanager_staticRouteConfig_id_modal_modal",
875             save: "one_f_switchmanager_staticRouteConfig_id_modal_save",
876             form: {
877                 routeName : "one_f_switchmanager_staticRouteConfig_id_modal_form_routename",
878                 staticRoute : "one_f_switchmanager_staticRouteConfig_id_modal_form_staticroute",
879                 nextHop : "one_f_switchmanager_staticRouteConfig_id_modal_form_nexthop",
880             }
881         }
882     },
883     dashlet: function($dashlet) {
884         one.lib.dashlet.empty($dashlet);
885         var url = one.f.switchmanager.rootUrl + "/staticRoutes";
886         one.f.switchmanager.staticRouteConfig.ajax.main(url, {}, function(content) {
887
888             if (content.privilege === 'WRITE') {
889                 // Add static route button
890                 var button = one.lib.dashlet.button.single("Add Static Route", one.f.switchmanager.staticRouteConfig.id.dashlet.add, "btn-primary", "btn-mini");
891                 var $button = one.lib.dashlet.button.button(button);
892                 $button.click(function() {
893                     var $modal = one.f.switchmanager.staticRouteConfig.modal.initialize();
894                     $modal.modal();
895                 });
896                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.staticRouteConfig.name));
897                 $dashlet.append($button);
898
899                 // Delete static route button
900                 var button = one.lib.dashlet.button.single("Delete Static Route(s)", one.f.switchmanager.staticRouteConfig.id.dashlet.remove, "btn-danger", "btn-mini");
901                 var $button = one.lib.dashlet.button.button(button);
902                 $button.click(function() {
903                     var requestData = {};
904                     var routesToDelete = [];
905                     //var checkedCheckBoxes = $("input:checked", $(this).closest(".dashlet").find("table"));
906                     var checkedCheckBoxes = $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).find("tbody input:checked");
907                     checkedCheckBoxes.each(function(index, value) {
908                         routesToDelete.push(checkedCheckBoxes[index].id);
909                     });
910                     if (checkedCheckBoxes.size() === 0) {
911                         alert('Please select at least one static route');
912                         return false;
913                     }
914                     if (routesToDelete.length > 0) {
915                         requestData["routesToDelete"] = routesToDelete.toString();
916                         var url = one.f.switchmanager.rootUrl + "/staticRoute/delete";
917                         one.f.switchmanager.staticRouteConfig.ajax.main(url, requestData, function(response) {
918                             if (response.status == true) {
919                                 // refresh dashlet by passing dashlet div as param 
920                                 one.lib.alert("Static Routes(s) successfully removed");
921                             } else {
922                                 one.lib.alert(response.message);
923                             }
924                             one.f.switchmanager.staticRouteConfig.dashlet($("#left-bottom .dashlet"));
925                         });
926                     }
927                 });
928                 $dashlet.append($button);
929             }
930             var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid, {
931                 searchable: true,
932                 filterable: false,
933                 pagination: true,
934                 flexibleRowsPerPage: true
935                 }, "table-striped table-condensed");
936             $dashlet.append($gridHTML);
937             var dataSource = one.f.switchmanager.staticRouteConfig.data.staticRouteConfigGrid(content);
938             $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
939             .on("loaded", function() {
940                 $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll).click(function() {
941                     $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
942                         $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll).is(':checked'));
943                 });
944                 $(".staticRoute").click(function(e){
945                     if (!$('.staticRoute[type=checkbox]:not(:checked)').length) {
946                         $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll)
947                             .prop("checked",
948                           true);
949                     } else {
950                         $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll)
951                             .prop("checked",
952                          false);
953                     }
954                     e.stopPropagation();
955                 });
956              });
957         });
958     },
959     // device ajax calls
960     ajax : {
961         main : function(url, requestData, callback) {
962             $.getJSON(url, requestData, function(data) {
963                 callback(data);
964             });
965         }
966     },
967     registry: {},
968     modal : {
969         initialize: function() {
970             var h3 = "Add Static Route";
971             var footer = one.f.switchmanager.staticRouteConfig.modal.footer();
972             var $modal = one.lib.modal.spawn(one.f.switchmanager.staticRouteConfig.id.modal.modal, h3, "", footer);
973             // bind save button
974             $('#' + one.f.switchmanager.staticRouteConfig.id.modal.save, $modal).click(function() {
975                 one.f.switchmanager.staticRouteConfig.modal.save($modal);
976             });
977             var $body = one.f.switchmanager.staticRouteConfig.modal.body();
978             one.lib.modal.inject.body($modal, $body);
979             return $modal;
980         },
981         save: function($modal) {
982             var result = {};
983             result['routeName'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.routeName, $modal).val();
984             result['staticRoute'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.staticRoute, $modal).val();
985             result['nextHop'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.nextHop, $modal).val();
986             one.f.switchmanager.staticRouteConfig.modal.ajax.staticRouteConfig(result, function(response) {
987                     if(response.status == true) {
988                         $modal.modal('hide');
989                         // refresh dashlet by passing dashlet div as param
990                         one.f.switchmanager.staticRouteConfig.dashlet($("#left-bottom .dashlet"));
991                     } else {
992                         // TODO: Show error message in a error message label instead.
993                         alert(response.message);
994                     }
995                 });
996         },
997         body: function() {
998             var $form = $(document.createElement('form'));
999             var $fieldset = $(document.createElement('fieldset'));
1000             // static route name
1001             var $label = one.lib.form.label("Name");
1002             var $input = one.lib.form.input("Name");
1003             $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.routeName);
1004             $fieldset.append($label).append($input);
1005             // static route IP Mask 
1006             var $label = one.lib.form.label("Static Route");
1007             var $input = one.lib.form.input("Static Route");
1008             $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.staticRoute);
1009             $fieldset.append($label).append($input);
1010             // static route IP Mask 
1011             var $label = one.lib.form.label("Next Hop");
1012             var $input = one.lib.form.input("Next Hop");
1013             $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.nextHop);
1014             $fieldset.append($label).append($input);
1015             // return
1016             $form.append($fieldset);
1017             return $form;
1018         },
1019         ajax: {
1020             staticRouteConfig: function(requestData, callback) {
1021                 $.getJSON(one.f.switchmanager.rootUrl + "/staticRoute/add", requestData, function(data) {
1022                     callback(data);
1023                 });
1024             }
1025         },
1026         data : {
1027             
1028         },
1029         footer : function() {
1030             var footer = [];
1031             var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.staticRouteConfig.id.modal.save, "btn-success", "");
1032             var $saveButton = one.lib.dashlet.button.button(saveButton);
1033             footer.push($saveButton);
1034             return footer;
1035         }
1036     },
1037     // data functions
1038     data : {
1039         staticRouteConfigGrid: function(data) {
1040             var source = new StaticDataSource({
1041                     columns: [
1042                         {
1043                             property: 'selector',
1044                             label: "<input type='checkbox'  id='"
1045                                 +one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll+"'/>",
1046                             sortable: false
1047                         },
1048                         {
1049                             property: 'name',
1050                             label: 'Name',
1051                             sortable: true
1052                         },
1053                         {
1054                             property: 'staticRoute',
1055                             label: 'Static Route',
1056                             sortable: true
1057                         },
1058                         {
1059                             property: 'nextHop',
1060                             label: 'Next Hop Address',
1061                             sortable: true
1062                         }
1063                     ],
1064                     data: data.nodeData,
1065                     formatter: function(items) {
1066                         $.each(items, function(index, item) {
1067                             item["selector"] = '<input type="checkbox" class="staticRoute" id=' + item["name"] + '></input>';
1068                         });
1069
1070                     },
1071                     delay: 0
1072                 });
1073             return source;              
1074         },
1075         staticRouteConfig : function(data) {
1076             var result = [];
1077             $.each(data.nodeData, function(key, value) {
1078                 var tr = {};
1079                 // fill up all the td's
1080                 var entry = [];
1081                 var checkbox = document.createElement("input");
1082                 checkbox.setAttribute("type", "checkbox");
1083                 checkbox.setAttribute("id", value["name"]);
1084                 entry.push(checkbox);
1085                 entry.push(value["name"]);
1086                 entry.push(value["staticRoute"]);
1087                 entry.push(value["nextHop"]);
1088                 tr.entry = entry;
1089                 result.push(tr);
1090             });
1091             return result;
1092         }
1093     }
1094 }
1095
1096 one.f.switchmanager.spanPortConfig = {
1097     id: {
1098         dashlet: {
1099             add: "one_f_switchmanager_spanPortConfig_id_dashlet_add",
1100             remove: "one_f_switchmanager_spanPortConfig_id_dashlet_remove",
1101             datagrid: "one_f_switchmanager_spanPortConfig_id_dashlet_datagrid",
1102             selectAllFlows: "one_f_switchmanager_spanPortConfig_id_dashlet_selectAllFlows"
1103         }, 
1104         modal: {
1105             modal: "one_f_switchmanager_spanPortConfig_id_modal_modal",
1106             save: "one_f_switchmanager_spanPortConfig_id_modal_save",
1107             form: {
1108                 name : "one_f_switchmanager_spanPortConfig_id_modal_form_name",
1109                 nodes : "one_f_switchmanager_spanPortConfig_id_modal_form_nodes",
1110                 port : "one_f_switchmanager_spanPortConfig_id_modal_form_port",
1111             }
1112         }
1113     },
1114     dashlet: function($dashlet) {
1115         one.lib.dashlet.empty($dashlet);
1116         
1117         //populate table in dashlet
1118         var url = one.f.switchmanager.rootUrl + "/spanPorts";
1119         one.f.switchmanager.spanPortConfig.ajax.main(url, {}, function(content) {
1120
1121             if (content.privilege === 'WRITE') {
1122
1123                 // Add span port button
1124                 var button = one.lib.dashlet.button.single("Add SPAN Port", one.f.switchmanager.spanPortConfig.id.dashlet.add, "btn-primary", "btn-mini");
1125                 var $button = one.lib.dashlet.button.button(button);
1126
1127                 $button.click(function() {
1128                     var $modal = one.f.switchmanager.spanPortConfig.modal.initialize();
1129                     $modal.modal();
1130                 });
1131                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.spanPortConfig.name));
1132                 $dashlet.append($button);
1133
1134                 // Delete span port button
1135                 var button = one.lib.dashlet.button.single("Delete SPAN Port(s)", one.f.switchmanager.spanPortConfig.id.dashlet.remove, "btn-danger", "btn-mini");
1136                 var $button = one.lib.dashlet.button.button(button);
1137                 $button.click(function() {
1138
1139                     var checkedCheckBoxes = $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).find("tbody input:checked");
1140                     if (checkedCheckBoxes.length > 0) {
1141                         var spanPortsToDelete = "";
1142                         checkedCheckBoxes.each(function(index, value) {
1143                             spanPortsToDelete += decodeURIComponent(checkedCheckBoxes[index].getAttribute("spanPort")) + "###";
1144                         });
1145                         if (checkedCheckBoxes.size() === 0) {
1146                                 alert('Please select at least one SPAN port');
1147                                 return false;
1148                         }
1149
1150                         var requestData = {};
1151                         requestData["spanPortsToDelete"] = spanPortsToDelete;
1152                         var url = one.f.switchmanager.rootUrl + "/spanPorts/delete";
1153                         one.f.switchmanager.spanPortConfig.ajax.main(url, requestData, function(response) {
1154                             if (response.status == true) {
1155                                 // refresh dashlet by passing dashlet div as param
1156                                 one.lib.alert("Span Port(s) successfully removed");
1157                             } else {
1158                                 one.lib.alert(response.message);
1159                             }
1160                             one.f.switchmanager.spanPortConfig.dashlet($("#right-bottom .dashlet"));
1161                         });
1162                     }
1163                 });
1164                 $dashlet.append($button);
1165             }
1166             var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.spanPortConfig.id.dashlet.datagrid, {
1167                 searchable: true,
1168                 filterable: false,
1169                 pagination: true,
1170                 flexibleRowsPerPage: true
1171                 }, "table-striped table-condensed");
1172             $dashlet.append($gridHTML);
1173             var dataSource = one.f.switchmanager.spanPortConfig.data.spanPortConfigGrid(content);
1174             $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
1175             .on("loaded", function() {
1176                 $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll).click(function() {
1177                     $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
1178                         $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll).is(':checked'));
1179                 });
1180                 $(".spanPortConfig").click(function(e){
1181                     if (!$('.spanPortConfig[type=checkbox]:not(:checked)').length) {
1182                         $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll)
1183                             .prop("checked",
1184                           true);
1185                     } else {
1186                         $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll)
1187                             .prop("checked",
1188                          false);
1189                     }
1190                     e.stopPropagation();
1191                 });
1192              });
1193         });
1194     },
1195     // device ajax calls
1196     ajax : {
1197         main : function(url, requestData, callback) {
1198             $.getJSON(url, requestData, function(data) {
1199                 callback(data);
1200             });
1201         }
1202     },
1203     registry: {},
1204     modal : {
1205         initialize: function() {
1206             var h3 = "Add SPAN Port";
1207             var footer = one.f.switchmanager.spanPortConfig.modal.footer();
1208             var $modal = one.lib.modal.spawn(one.f.switchmanager.spanPortConfig.id.modal.modal, h3, "", footer);
1209             // bind save button
1210             $('#' + one.f.switchmanager.spanPortConfig.id.modal.save, $modal).click(function() {
1211                 one.f.switchmanager.spanPortConfig.modal.save($modal);
1212             });
1213
1214             one.f.switchmanager.spanPortConfig.modal.ajax.nodes(function(nodes, nodeports) {
1215                 var $body = one.f.switchmanager.spanPortConfig.modal.body(nodes, nodeports);
1216                 one.lib.modal.inject.body($modal, $body);
1217             });
1218             return $modal;
1219         },
1220         save: function($modal) {
1221             var result = {};
1222             result['nodeId'] = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.nodes, $modal).val();
1223             result['spanPort'] = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.port, $modal).val();
1224             one.f.switchmanager.spanPortConfig.modal.ajax.saveSpanPortConfig(result, 
1225                 function(response) {
1226                     if(response.status == true) {
1227                         $modal.modal('hide');
1228                         one.f.switchmanager.spanPortConfig.dashlet($("#right-bottom .dashlet"));
1229                     } else {
1230                         alert(response.message);
1231                     }
1232                     
1233                 });
1234         },
1235         body: function(nodes, nodeports) {
1236             var $form = $(document.createElement('form'));
1237             var $fieldset = $(document.createElement('fieldset'));
1238             // node
1239             var $label = one.lib.form.label("Node");
1240             var $select = one.lib.form.select.create(nodes);
1241             one.lib.form.select.prepend($select, { '' : 'Please Select a Node' });
1242             $select.attr('id', one.f.switchmanager.spanPortConfig.id.modal.form.nodes);
1243             
1244             // bind onchange
1245             $select.change(function() {
1246                 // retrieve port value
1247                 var nodeId = $(this).find('option:selected').attr('value');
1248                 one.f.switchmanager.spanPortConfig.registry['currentNode'] = nodeId;
1249                 var $ports = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.port);
1250                 var ports = one.f.switchmanager.spanPortConfig.registry['nodePorts'][nodeId]
1251                 one.lib.form.select.inject($ports, ports); 
1252             });
1253
1254             $fieldset.append($label).append($select);
1255             // input port
1256             var $label = one.lib.form.label("Input Port");
1257             var $select = one.lib.form.select.create();
1258             $select.attr('id', one.f.switchmanager.spanPortConfig.id.modal.form.port);
1259             $fieldset.append($label).append($select);
1260             
1261             // return
1262             $form.append($fieldset);
1263             return $form;
1264         },
1265         ajax: {
1266             nodes: function(callback) {
1267                 $.getJSON(one.f.switchmanager.rootUrl + "/nodeports", function(data) {
1268                     var nodes = {};
1269                     var nodePorts = {};
1270                     $(data).each(function(index, node) {
1271                         nodes[node.nodeId] = node.nodeName;
1272                         nodePorts[node.nodeId] = node.nodePorts;
1273                     });
1274                     one.f.switchmanager.spanPortConfig.registry['nodePorts'] = nodePorts;
1275                     callback(nodes, nodePorts);
1276                 });
1277             },
1278             saveSpanPortConfig: function(requestData, callback) {
1279                 var resource = {};
1280                 resource["jsonData"] = JSON.stringify(requestData);
1281                 $.getJSON(one.f.switchmanager.rootUrl + "/spanPorts/add", resource, function(data) {
1282                     callback(data);
1283                 });
1284             }
1285         },
1286         footer : function() {
1287             var footer = [];
1288             var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.spanPortConfig.id.modal.save, "btn-success", "");
1289             var $saveButton = one.lib.dashlet.button.button(saveButton);
1290             footer.push($saveButton);
1291             return footer;
1292         }
1293     },
1294     // data functions
1295     data : {
1296         spanPortConfigGrid: function(data) {
1297             var source = new StaticDataSource({
1298                     columns: [
1299                         {
1300                             property: 'selector',
1301                             label: "<input type='checkbox'  id='"
1302                                 +one.f.switchmanager.spanPortConfig.id.dashlet.selectAll+"'/>",
1303                             sortable: false
1304                         },
1305                         {
1306                             property: 'nodeName',
1307                             label: 'Node',
1308                             sortable: true
1309                         },
1310                         {
1311                             property: 'spanPort',
1312                             label: 'SPAN Port',
1313                             sortable: true
1314                         },
1315                     ],
1316                     data: data.nodeData,
1317                     formatter: function(items) {
1318                         $.each(items, function(index, item) {
1319                             item["selector"] = '<input type="checkbox" class="spanPortConfig" spanPort=' + encodeURIComponent(item["json"]) + '></input>';
1320                         });
1321                     },
1322                     delay: 0
1323                 });
1324             return source;              
1325         },
1326         devices : function(data) {
1327             var result = [];
1328             $.each(data.nodeData, function(key, value) {
1329                 var tr = {};
1330                 // fill up all the td's
1331                 var entry = [];
1332                 var checkbox = document.createElement("input");
1333                 checkbox.setAttribute("type", "checkbox");
1334                 checkbox.spanPort = value.json;
1335                 entry.push(checkbox);
1336                 entry.push(value["nodeName"]);
1337                 entry.push(value["spanPort"]);
1338                 tr.entry = entry;
1339                 result.push(tr);
1340             });
1341             return result;
1342         }
1343     }
1344 }
1345
1346 /** INIT **/
1347 // populate nav tabs
1348 $(one.f.menu.left.top).each(function(index, value) {
1349     var $nav = $(".nav", "#left-top");
1350     one.main.page.dashlet($nav, value);
1351 });
1352
1353 $(one.f.menu.left.bottom).each(function(index, value) {
1354     var $nav = $(".nav", "#left-bottom");
1355     one.main.page.dashlet($nav, value);
1356 });
1357
1358 $(one.f.menu.right.bottom).each(function(index, value) {
1359     var $nav = $(".nav", "#right-bottom");
1360     one.main.page.dashlet($nav, value);
1361 });
1362
1363 one.f.addPopOut = function() {
1364     $img1 = $(document.createElement("img"));
1365     $img1.attr("src", "/img/Expand16T.png");
1366     $img1.attr("style", "float: right;");
1367     $img1.hover(function() {
1368         $img1.css("cursor", "pointer");
1369     });
1370     $img1.click(function() {
1371         var $modal = one.f.switchmanager.nodesLearnt.modal.initialize.popout();
1372         $modal.css({
1373             'margin-left': '-45%',
1374             'margin-top': '-3%',
1375             'width':$(document).width() * 0.8,
1376             'height':$(document).height() * 0.9
1377         });
1378         $(".modal-body", $modal).css({
1379             "max-height": $(document).height() * 0.75,
1380         });
1381         $modal.modal();
1382     });
1383     $dash1 = $($("#left-top .nav")[0]);
1384     $dash1.append($img1);
1385 };
1386 one.f.addPopOut();
1387
1388 // bind dashlet nav
1389 $('.dash .nav a', '#main').click(function() {
1390     // de/activation
1391     var $li = $(this).parent();
1392     var $ul = $li.parent();
1393     one.lib.nav.unfocus($ul);
1394     $li.addClass('active');
1395     // clear respective dashlet
1396     var $dashlet = $ul.parent().find('.dashlet');
1397     one.lib.dashlet.empty($dashlet);
1398
1399     // callback based on menu
1400     var id = $(this).attr('id');
1401     var menu = one.f.dashlet;
1402     switch (id) {
1403         case menu.nodesLearnt.id:
1404             one.f.switchmanager.nodesLearnt.dashlet($dashlet);
1405             break;
1406         case menu.staticRouteConfig.id:
1407             one.f.switchmanager.staticRouteConfig.dashlet($dashlet);
1408             break;
1409         case menu.subnetGatewayConfig.id:
1410             one.f.switchmanager.subnetGatewayConfig.dashlet($dashlet);
1411             break;
1412         case menu.spanPortConfig.id:
1413             one.f.switchmanager.spanPortConfig.dashlet($dashlet);
1414             break;
1415     };
1416 });
1417
1418 // activate first tab on each dashlet
1419 $('.dash .nav').each(function(index, value) {
1420     $($(value).find('li')[0]).find('a').click();
1421 });