Merge "Bug:129 Connection Manager Dashlet"
[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   connection : {
32     id : 'connection',
33     name : 'Connection Manager'
34   }
35 };
36
37 one.f.menu = {
38   left : {
39     top : [
40       one.f.dashlet.nodesLearnt,
41       one.f.dashlet.connection
42       ],
43     bottom : [
44       one.f.dashlet.staticRouteConfig
45       ]
46   },
47   right : {
48     top : [],
49     bottom : [
50       one.f.dashlet.subnetGatewayConfig,
51     one.f.dashlet.spanPortConfig
52       ]
53   }
54 };
55
56 /**Devices Modules */
57 one.f.switchmanager = {
58   rootUrl: "controller/web/devices",
59   createTable: function(columnNames, body) {
60     var tableAttributes = ["table-striped", "table-bordered", "table-condensed"];
61     var $table = one.lib.dashlet.table.table(tableAttributes);
62     var tableHeaders = columnNames;
63     var $thead = one.lib.dashlet.table.header(tableHeaders);
64     var $tbody = one.lib.dashlet.table.body(body, tableHeaders);
65     $table.append($thead)
66       .append($tbody);
67     return $table;
68   },
69   validateName: function(name) {
70     return (name.length < 256);
71   }
72 };
73
74 one.f.switchmanager.nodesLearnt = {
75   id: {
76     dashlet: {
77       popout: "one_f_switchmanager_nodesLearnt_id_dashlet_popout",
78       datagrid: "one_f_switchmanager_nodesLearnt_id_dashlet_datagrid"
79     },
80     modal: {
81       modal: "one_f_switchmanager_nodesLearnt_id_modal_modal",
82       configure: "one_f_switchmanager_nodesLearnt_id_modal_configure",
83       ports: "one_f_switchmanager_nodesLearnt_id_modal_ports",
84       save: "one_f_switchmanager_nodesLearnt_id_modal_save",
85       datagrid: "one_f_switchmanager_nodesLearnt_id_modal_datagrid",
86       portsDatagrid: "one_f_switchmanager_nodesLearnt_id_modal_portsDatagrid",
87       form: {
88         nodeId: "one_f_switchmanager_nodesLearnt_id_modal_form_nodeid",
89         nodeName : "one_f_switchmanager_nodesLearnt_id_modal_form_nodename",
90         portStatus : "one_f_switchmanager_nodesLearnt_id_modal_form_portstatus",
91         tier: "one_f_switchmanager_nodesLearnt_id_modal_form_tier",
92         operationMode: "one_f_switchmanager_nodesLearnt_id_modal_form_opmode"
93       }
94     }
95   },
96   dashlet: function($dashlet) {
97     var url = one.f.switchmanager.rootUrl + "/nodesLearnt";
98     one.lib.dashlet.empty($dashlet);
99     $dashlet.append(one.lib.dashlet.header(one.f.dashlet.nodesLearnt.name));
100
101     one.f.switchmanager.nodesLearnt.ajax.main(url, function(content) {
102       var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.nodesLearnt.id.dashlet.datagrid, {
103         searchable: true,
104           filterable: false,
105           pagination: true,
106           flexibleRowsPerPage: true
107       }, "table-striped table-condensed");
108       $dashlet.append($gridHTML);
109       var dataSource = one.f.switchmanager.nodesLearnt.data.gridDataSource.abridged(content);
110       $("#" + one.f.switchmanager.nodesLearnt.id.dashlet.datagrid).datagrid({dataSource: dataSource}).on("loaded", function() {
111         $(this).find("tbody a").click(one.f.switchmanager.nodesLearnt.modal.initialize.updateNode);
112       });
113
114       $("#" + one.f.switchmanager.nodesLearnt.id.dashlet.datagrid).datagrid({dataSource: dataSource}).on("loaded", function() {
115         $(this).find("tbody span").click(function(){
116           one.f.switchmanager.nodesLearnt.modal.initialize.displayPorts($(this));
117         });
118       });
119
120     });
121   },
122   ajax : {
123     main : function(url, callback) {
124       $.getJSON(url, function(data) {
125         callback(data);
126       });
127     }
128   },
129   modal : {
130     initialize: {
131       updateNode: function(evt) {
132         one.f.switchmanager.nodesLearnt.ajax.main(one.f.switchmanager.rootUrl + "/tiers", function(tiers) {
133
134           var nodeId = decodeURIComponent(evt.target.id);
135           var h3;
136           var footer = [];
137           var $body = one.f.switchmanager.nodesLearnt.modal.body.updateNode(nodeId, JSON.parse(decodeURIComponent(evt.target.getAttribute("switchDetails"))), tiers);
138           if (evt.target.getAttribute("privilege") == 'WRITE'){
139             h3 = "Update Node Information";
140             footer = one.f.switchmanager.nodesLearnt.modal.footer.updateNode();
141           } else { //disable node edit
142             $body.find('*').attr('disabled', 'disabled');
143             h3 = 'Node Information';
144           }
145
146           var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.configure, h3, "", footer);
147           // bind save button
148           $('#' + one.f.switchmanager.nodesLearnt.id.modal.save, $modal).click(function() {
149             one.f.switchmanager.nodesLearnt.modal.save($modal);
150           });
151
152           // inject body (nodePorts)
153           one.lib.modal.inject.body($modal, $body);
154           $modal.modal();
155         });
156       },
157       popout: function() {
158         var h3 = "Nodes Learned";
159         var footer = one.f.switchmanager.nodesLearnt.modal.footer.popout();
160         var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.modal, h3, "", footer);
161         var $body = one.f.switchmanager.nodesLearnt.modal.body.popout($modal);
162         return $modal;
163       },
164       displayPorts: function(ports) {
165         var content = JSON.parse(decodeURIComponent(ports.attr("ports")));
166
167         var h3 = ((ports.attr("nodeName") == "None")? ports.attr("nodeId") : ports.attr("nodeName"))
168           var footer = [];
169         var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.ports, h3, "", footer);
170
171         var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.nodesLearnt.id.modal.portsDatagrid, {
172           searchable: true,
173             filterable: false,
174             pagination: true,
175             flexibleRowsPerPage: true,
176             popout: true
177         }, "table-striped table-condensed");
178         one.lib.modal.inject.body($modal, $gridHTML);
179         $modal.on("shown", function() {
180           var dataSource = one.f.switchmanager.nodesLearnt.data.gridDataSource.displayPorts(content);
181           $("#" + one.f.switchmanager.nodesLearnt.id.modal.portsDatagrid).datagrid({
182             dataSource: dataSource,
183             stretchHeight: false
184           });
185         });
186         $modal.modal();
187       }
188     },
189     body: {
190       updateNode: function(nodeId, switchDetails, tiers) {
191         var $form = $(document.createElement('form'));
192         var $fieldset = $(document.createElement('fieldset'));
193         // node ID. not editable.
194         var $label = one.lib.form.label("Node ID");
195         var $input = one.lib.form.input("node id");
196         $input.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.nodeId);
197         $input.attr("disabled", true);
198         $input.attr("value", nodeId);
199         $fieldset.append($label).append($input);
200         // node name
201         var $label = one.lib.form.label("Node Name");
202         var $input = one.lib.form.input("Node Name");
203         $input.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.nodeName);
204         if(switchDetails["nodeName"] != null) {
205           $input.attr('value', switchDetails["nodeName"]);
206         }
207         $fieldset.append($label).append($input);
208         // node tier
209         var $label = one.lib.form.label("Tier");
210         var $select = one.lib.form.select.create(tiers);
211         $select.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.tier);
212         $select.val(switchDetails["tier"]);
213         $fieldset.append($label).append($select);
214         // operation mode
215         var $label = one.lib.form.label("Operation Mode");
216         var $select = one.lib.form.select.create(
217             ["Allow reactive forwarding", "Proactive forwarding only"]);
218         $select.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.operationMode);
219         if ((one.main.registry != undefined) && (one.main.registry.container != 'default')) {
220           $select.attr("disabled", true);
221         }
222         $select.val(switchDetails["mode"]);
223         $fieldset.append($label).append($select);
224         $form.append($fieldset);
225         return $form;
226       },
227       popout: function($modal) {
228         var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.nodesLearnt.id.modal.datagrid, {
229           searchable: true,
230         filterable: false,
231         pagination: true,
232         flexibleRowsPerPage: true,
233         popout: true
234         }, "table-striped table-condensed");
235         one.lib.modal.inject.body($modal, $gridHTML);
236         // attach to shown event of modal 
237         $modal.on("shown", function() {
238           var url = one.f.switchmanager.rootUrl + "/nodesLearnt";
239           one.f.switchmanager.nodesLearnt.ajax.main(url, function(content) {
240             var dataSource = one.f.switchmanager.nodesLearnt.data.gridDataSource.popout(content);
241             $("#" + one.f.switchmanager.nodesLearnt.id.modal.datagrid).datagrid({
242               dataSource: dataSource,
243               stretchHeight: false
244             })
245             .on("loaded", function() {
246               $("#" + one.f.switchmanager.nodesLearnt.id.modal.datagrid).find("tbody span").click(function(){
247                 one.f.switchmanager.nodesLearnt.modal.initialize.displayPorts($(this));
248               });
249             });
250           });
251         });
252       }
253     },
254     save: function($modal) {
255       var result = {};
256       result['nodeName'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.nodeName, $modal).val();
257       if(!one.f.switchmanager.validateName(result['nodeName'])) {
258         alert("Node name can contain upto 255 characters");
259         return;
260       }
261       result['nodeId'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.nodeId, $modal).val();
262       result['tier'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.tier, $modal).val();
263       result['operationMode'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.operationMode, $modal).val();
264       one.f.switchmanager.nodesLearnt.modal.ajax(result, 
265           function(response) {
266             if(response.status == true) {
267               $modal.modal('hide');
268               one.topology.update(); // refresh visual topology with new name
269               // TODO: Identify dashlet by inserting a nodesLearnt div 
270               // in the dashlet() instead
271               one.f.switchmanager.nodesLearnt.dashlet($("#left-top .dashlet"));
272             } else {
273               alert(response.message);
274             }
275
276           });
277     },
278     ajax: function(requestData, callback) {
279       $.getJSON(one.f.switchmanager.rootUrl + "/nodesLearnt/update", requestData, function(response) {
280         callback(response);
281       });
282     },
283     footer: {
284       updateNode: function() {
285         var footer = [];
286         var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.nodesLearnt.id.modal.save, "btn-primary", "");
287         var $saveButton = one.lib.dashlet.button.button(saveButton);
288         footer.push($saveButton);
289
290         return footer;
291       },
292       popout: function() {
293         // TODO: Maybe put a close button in the footer?
294         return [];
295       }
296     }
297   },
298   // data functions
299   data : {
300     gridDataSource: {
301       abridged: function(data) {
302         var source = new StaticDataSource({
303           columns: [
304         {
305           property: 'nodeName',
306         label: 'Node Name',
307         sortable: true
308         },
309         {
310           property: 'nodeId',
311         label: 'Node ID',
312         sortable: true
313         },
314         {
315           property: 'ports',
316         label: 'Ports',
317         sortable: true
318         }
319         ],
320         data: data.nodeData,
321         formatter: function(items) {
322           $.each(items, function (index, item) {
323             var nodeName = item.nodeName;
324             var nodeNameEntry = item.nodeName ? item.nodeName : "Click to update";
325             item.nodeName = '<a href="#" id="' + item.nodeId + '" switchDetails=' + encodeURIComponent(JSON.stringify(item)) + 
326             ' privilege=' + data.privilege + '>' + nodeNameEntry + '</a>';
327
328           var ports = item.ports;
329           var portsMatch = ports.match(/<\/span>/g);
330           var portsLength = 0;
331           if (portsMatch != null) {
332             portsLength = portsMatch.length;
333           }
334           item.ports = '<span class="nodePorts" style="cursor:pointer;color: #08c" ports='+encodeURIComponent(JSON.stringify(item.ports)) + ' nodeId="' + item.nodeId
335             + '" nodeName="' + nodeName
336             + '">' + portsLength +'</span>';
337           }); 
338         },
339         delay: 0
340         });
341         return source;
342
343       },
344       popout: function(data) {
345         var source = new StaticDataSource({
346           columns: [
347         {
348           property: 'nodeName',
349         label: 'Node Name',
350         sortable: true
351         },
352         {
353           property: 'nodeId',
354         label: 'Node ID',
355         sortable: true
356         },
357         {
358           property: 'tierName',
359         label: 'Tier Name',
360         sortable: true
361         },
362         {
363           property: 'mac',
364         label: 'MAC Address',
365         sortable: true
366         },
367         {
368           property: 'ports',
369           label: 'Ports',
370           sortable: true
371         }
372         ],
373           data: data.nodeData,
374           formatter: function(items) {
375             $.each(items, function (index, item) {
376               var ports = item.ports;
377               var portsMatch = ports.match(/<\/span>/g);
378               var portsLength = 0;
379               if (portsMatch != null) {
380                 portsLength = portsMatch.length;
381               }
382               item.ports = '<span class="nodePorts" style="cursor: pointer;color: #08c" ports='+encodeURIComponent(JSON.stringify(item.ports)) + ' nodeId="' + item.nodeId
383               + '" nodeName="' + item.nodeName
384               + '">' + portsLength +'</span>';
385             }); 
386           },
387           delay: 0
388         });
389         return source;
390       },
391       displayPorts: function(content){
392         var data=[];
393         var start=0;;
394         var finish=content.indexOf("<br>",start);
395         while(finish != -1){
396           data.push({"ports":content.substring(start,finish)});
397           start=finish+4
398             finish=content.indexOf("<br>",start);
399         }
400         var source = new StaticDataSource({
401           columns: [
402         {
403           property: 'ports',
404             label: 'Ports',
405             sortable: true
406         }
407         ],
408             data:data,
409             delay: 0
410         });
411
412         return source;
413       }
414     },
415     abridged : function(data) {
416       var result = [];
417       $.each(data.nodeData, function(key, value) {
418         var tr = {};
419         var entry = [];
420         var nodeNameEntry = value["nodeName"] ? value["nodeName"] : "Click to update";
421
422         // TODO: Move anchor tag creation to one.lib.form.
423         var aTag;
424         aTag = document.createElement("a");
425         aTag.privilege = data.privilege;
426         aTag.addEventListener("click", one.f.switchmanager.nodesLearnt.modal.initialize.updateNode);
427         aTag.addEventListener("mouseover", function(evt) {
428           evt.target.style.cursor = "pointer";
429         }, false);
430         aTag.setAttribute("id", encodeURIComponent(value["nodeId"]));
431         aTag.switchDetails = value;
432         aTag.innerHTML = nodeNameEntry;
433         entry.push(aTag);
434         entry.push(value["nodeId"]);
435         entry.push(value["ports"]);
436         tr.entry = entry;
437         result.push(tr);
438       });
439       return result;
440     },
441     popout : function(data) {
442       var result = [];
443       $.each(data.nodeData, function(key, value) {
444         var tr = {};
445         // fill up all the td's
446         var entry = [];
447         var nodenameentry = value["nodeName"] ? value["nodeName"] : "No name provided";
448         entry.push(nodenameentry);
449         entry.push(value["nodeId"]);
450         entry.push(value["tierName"]);
451         entry.push(value["mac"]);
452         entry.push(value["ports"]);
453         tr.entry = entry;
454         result.push(tr);
455       });
456       return result;
457     }
458   }
459 };
460
461 one.f.switchmanager.subnetGatewayConfig = {
462   id: {
463     dashlet: {
464       addIPAddress: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_addIP",
465       addPorts: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_addPorts",
466       removeIPAddress: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_removeIP",
467       datagrid: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_datagrid",
468       selectAll: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_selectAll"
469     }, 
470     modal: {
471       modal: "one_f_switchmanager_subnetGatewayConfig_id_modal_modal",
472       ports : "one_f_switchmanager_subnetGatewayConfig_id_modal_ports",
473       save: "one_f_switchmanager_subnetGatewayConfig_id_modal_save",
474       remove: "one_f_switchmanager_subnetGatewayConfig_id_modal_remove",
475       cancel: "one_f_switchmanager_subnetGatewayConfig_id_modal_cancel",
476       form: {
477         name : "one_f_switchmanager_subnetGatewayConfig_id_modal_form_gatewayname",
478         gatewayIPAddress : "one_f_switchmanager_subnetGatewayConfig_id_modal_form_gatewayipaddress",
479         nodeId: "one_f_switchmanager_subnetGatewayConfig_id_modal_form_nodeid",
480         ports: "one_f_switchmanager_subnetGatewayConfig_id_modal_form_ports"
481       }
482     }
483   },
484   // device ajax calls
485   dashlet: function($dashlet) {
486     one.lib.dashlet.empty($dashlet);
487     $dashlet.append(one.lib.dashlet.header(one.f.dashlet.subnetGatewayConfig.name));
488     // Add gateway IP Address button
489     var url = one.f.switchmanager.rootUrl + "/subnets";
490     one.f.switchmanager.subnetGatewayConfig.ajax.main(url, {}, function(content) {
491
492       if (content.privilege === 'WRITE') {
493         var button = one.lib.dashlet.button.single("Add Gateway IP Address",
494           one.f.switchmanager.subnetGatewayConfig.id.dashlet.addIPAddress, "btn-primary", "btn-mini");
495         var $button = one.lib.dashlet.button.button(button);
496         $button.click(function() {
497           var $modal = one.f.switchmanager.subnetGatewayConfig.modal.initialize.gateway();
498           $modal.modal();
499         });
500         $dashlet.append($button);
501
502         // Delete gateway ip address button
503         var button = one.lib.dashlet.button.single("Remove Gateway IP Address",
504           one.f.switchmanager.subnetGatewayConfig.id.dashlet.removeIPAddress, "btn-danger", "btn-mini");
505         var $button = one.lib.dashlet.button.button(button);
506         $button.click(function() {
507           var gatewaysToDelete = [];
508           var checkedCheckBoxes = $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).find("tbody input:checked")
509           checkedCheckBoxes.each(function(index, value) {
510             gatewaysToDelete.push(checkedCheckBoxes[index].id);
511           });
512         if (checkedCheckBoxes.size() === 0) {
513           return false;
514         }
515         one.f.switchmanager.subnetGatewayConfig.modal.removeMultiple.dialog(gatewaysToDelete)
516         });
517         $dashlet.append($button);
518
519         // Add Ports button
520         var button = one.lib.dashlet.button.single("Add Ports",
521             one.f.switchmanager.subnetGatewayConfig.id.dashlet.addPorts, "btn-primary", "btn-mini");
522         var $button = one.lib.dashlet.button.button(button);
523         $button.click(function() {
524           if (one.f.switchmanager.subnetGatewayConfig.registry.gateways.length === 0) {
525             alert('No Gateways Exist');
526             return false;
527           }
528           var $modal = one.f.switchmanager.subnetGatewayConfig.modal.initialize.ports();
529           $modal.modal();
530         });
531         $dashlet.append($button);
532       }
533       var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid, {
534         searchable: true,
535           filterable: false,
536           pagination: true,
537           flexibleRowsPerPage: true
538       }, "table-striped table-condensed");
539       $dashlet.append($gridHTML);
540       var dataSource = one.f.switchmanager.subnetGatewayConfig.data.devicesgrid(content);
541       $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
542         .on("loaded", function() {
543           $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll).click(function() {
544             $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
545               $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll).is(':checked'));
546           });
547           $(".subnetGatewayConfig").click(function(e){
548             if (!$('.subnetGatewayConfig[type=checkbox]:not(:checked)').length) {
549               $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll)
550             .prop("checked",
551               true);
552             } else {
553               $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll)
554             .prop("checked",
555               false);
556             }
557             e.stopPropagation();
558           });
559         });
560     });
561   },
562   ajax : {
563     main : function(url, requestData, callback) {
564       $.getJSON(url, requestData, function(data) {
565         callback(data);
566       });
567     }
568   },
569   registry: {},
570   modal : {
571     initialize: {
572       gateway: function() {
573         var h3 = "Add Gateway IP Address";
574         var footer = one.f.switchmanager.subnetGatewayConfig.modal.footer();
575         var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.modal, h3, "", footer);
576         // bind save button
577         $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.save, $modal).click(function() {
578           one.f.switchmanager.subnetGatewayConfig.modal.save.gateway($modal);
579         });
580         var $body = one.f.switchmanager.subnetGatewayConfig.modal.body.gateway();
581         one.lib.modal.inject.body($modal, $body);
582         return $modal;
583       },
584       ports: function() {
585         var h3 = "Add Ports";
586         var footer = one.f.switchmanager.subnetGatewayConfig.modal.footer();
587         var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.ports, h3, "", footer);
588         // bind save button
589         $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.save, $modal).click(function() {
590           one.f.switchmanager.subnetGatewayConfig.modal.save.ports($modal);
591         });
592
593         // TODO: Change to subnetGateway instead.
594         one.f.switchmanager.spanPortConfig.modal.ajax.nodes(function(nodes, nodeports) {
595           var $body = one.f.switchmanager.subnetGatewayConfig.modal.body.ports(nodes, nodeports);
596           one.lib.modal.inject.body($modal, $body);
597         });
598         return $modal;
599       }
600     },
601     save: {
602       gateway: function($modal) {
603         var result = {};
604         result['gatewayName'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.name, $modal).val();
605         if(!one.f.switchmanager.validateName(result['gatewayName'])) {
606           alert("Gateway name can contain upto 255 characters");
607           return;
608         }
609         result['gatewayIPAddress'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.gatewayIPAddress, $modal).val();
610         one.f.switchmanager.subnetGatewayConfig.modal.ajax.gateway(result, 
611             function(response) {
612               if(response.status == true) {
613                 $modal.modal('hide');
614                 one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
615               } else {
616                 alert(response.message);
617               }
618             });
619       },
620       ports: function($modal) {
621         var result = {};
622         var gatewayRegistryIndex = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.name, $modal).val();
623         result['portsName'] = one.f.switchmanager.subnetGatewayConfig.registry.gateways[gatewayRegistryIndex];
624         result['nodeId'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.nodeId, $modal).val();
625         result['ports'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports, $modal).val();
626         if(!result['portsName'] || result['portsName'] == "") {
627           alert("No gateway chosen. Cannot add port");
628           return;
629         }
630         if(!result['nodeId'] || result['nodeId'] == "") {
631           alert("Please select a node.");
632           return;
633         }
634         if(!result['ports'] || result['ports'] == "") {
635           alert("Please choose a port.");
636           return;
637         }
638         one.f.switchmanager.subnetGatewayConfig.modal.ajax.ports(result, 
639             function(response) {
640               if(response.status == true) {
641                 $modal.modal('hide');
642                 one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
643               } else {
644                 alert(response.message);
645               }
646             });
647       }
648     },
649     body: {
650       gateway: function() {
651         var $form = $(document.createElement('form'));
652         var $fieldset = $(document.createElement('fieldset'));
653         // gateway name
654         var $label = one.lib.form.label("Name");
655         var $input = one.lib.form.input("Name");
656         $input.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.name);
657         $fieldset.append($label).append($input);
658         // gateway IP Mask 
659         var $label = one.lib.form.label("Gateway IP Address/Mask");
660         var $input = one.lib.form.input("Gateway IP Address/Mask");
661         var $help = one.lib.form.help('Example: 192.168.10.254/16');
662         $input.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.gatewayIPAddress);
663         $fieldset.append($label).append($input).append($help);
664
665         $form.append($fieldset);
666         return $form;
667       },
668       ports: function(nodes, nodeports) {
669         var $form = $(document.createElement('form'));
670         var $fieldset = $(document.createElement('fieldset'));
671         // gateways drop down
672         var $label = one.lib.form.label("Gateway Name");
673         var $select = one.lib.form.select.create(one.f.switchmanager.subnetGatewayConfig.registry.gateways);
674         $select.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.name);
675         one.lib.form.select.prepend($select, { '' : 'Please Select a Gateway' });
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           var options = {};
695           $(ports).each(function(idx, val) {
696             options[val.internalPortName] = val.portName+' ('+val.portId+')'; 
697               });
698             one.lib.form.select.inject($ports, options);
699             one.lib.form.select.prepend($ports, { '' : 'Please Select a Port' });
700             $ports.val($ports.find("option:first").val());
701             });
702
703           // ports
704           var $label = one.lib.form.label("Select Port");
705           var $select = one.lib.form.select.create();
706           one.lib.form.select.prepend($select, { '' : 'Please Select a Port' });
707           $select.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports);
708           $fieldset.append($label).append($select);
709
710           $form.append($fieldset);
711           return $form;
712       }
713     },
714     ajax: {
715       gateway: function(requestData, callback) {
716         $.getJSON(one.f.switchmanager.rootUrl + "/subnetGateway/add", requestData, function(data) {
717           callback(data);
718         });
719       },
720       ports: function(requestData, callback) {
721         $.getJSON(one.f.switchmanager.rootUrl + "/subnetGateway/ports/add", requestData, function(data) {
722           callback(data);
723         });
724       }
725     },
726     footer : function() {
727       var footer = [];
728       var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.subnetGatewayConfig.id.modal.save, "btn-primary", "");
729       var $saveButton = one.lib.dashlet.button.button(saveButton);
730       footer.push($saveButton);
731       return footer;
732     },
733     removeMultiple: {
734       dialog: function(gatewaysToDelete) {
735         var h3 = 'Remove Gateway IP Address';
736
737         var footer = one.f.switchmanager.subnetGatewayConfig.modal.removeMultiple.footer();
738         var $body = one.f.switchmanager.subnetGatewayConfig.modal.removeMultiple.body(gatewaysToDelete);
739         var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.modal, h3, $body, footer);
740
741         // bind close button
742         $('#'+one.f.switchmanager.subnetGatewayConfig.id.modal.cancel, $modal).click(function() {
743           $modal.modal('hide');
744         });
745
746         // bind remove rule button
747         $('#'+one.f.switchmanager.subnetGatewayConfig.id.modal.remove, $modal).click(this, function(e) {
748           var requestData = {};
749           if (gatewaysToDelete.length > 0) {
750             requestData["gatewaysToDelete"] = gatewaysToDelete.toString();
751             var url = one.f.switchmanager.rootUrl + "/subnetGateway/delete";
752             one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
753               $modal.modal('hide');
754               if (response.status == true) {
755                 // refresh dashlet by passing dashlet div as param 
756                 one.lib.alert("Gateway IP Address(es) successfully removed");
757               } else {
758                 alert(response.message);
759               }
760               one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
761             });
762           }
763         });
764         $modal.modal();
765       },
766       footer : function() {
767         var footer = [];
768         var remove = one.lib.dashlet.button.single('Remove Gateway IP Address',one.f.switchmanager.subnetGatewayConfig.id.modal.remove, 'btn-danger', '');
769         var $remove = one.lib.dashlet.button.button(remove);
770         footer.push($remove);
771
772         var cancel = one.lib.dashlet.button.single('Cancel', one.f.switchmanager.subnetGatewayConfig.id.modal.cancel, '', '');
773         var $cancel = one.lib.dashlet.button.button(cancel);
774         footer.push($cancel);
775
776         return footer;
777       },
778       body : function (gatewayList) {
779         var $p = $(document.createElement('p'));
780         var p = 'Remove the following Gateway IP Address(es)?';
781         //creata a BS label for each rule and append to list
782         $(gatewayList).each(function(){
783           var $span = $(document.createElement('span'));
784           $span.append(this);
785           p += '<br/>' + $span[0].outerHTML;
786         });
787         $p.append(p);
788         return $p;
789       }
790     }
791   },
792   // data functions
793   data : {
794     devicesgrid: function(data) {
795       one.f.switchmanager.subnetGatewayConfig.registry.gateways = [];
796       var source = new StaticDataSource({
797         columns: [
798       {
799         property: 'selector',
800           label: "<input type='checkbox'  id='"
801         +one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll+"'/>",
802           sortable: false
803       },
804           {
805             property: 'name',
806           label: 'Name',
807           sortable: true
808           },
809           {
810             property: 'subnet',
811           label: 'Gateway IP Address/Mask',
812           sortable: true
813           },
814           {
815             property: 'nodePorts',
816           label: 'Ports',
817           sortable: false
818           }
819       ],
820         data: data.nodeData,
821         formatter: function(items) {
822           $.each(items, function(index, tableRow) {
823             tableRow["selector"] = '<input type="checkbox" class="subnetGatewayConfig" id="'
824             + tableRow["name"] + '"></input>';
825           var json = tableRow["nodePorts"];
826           var nodePorts = JSON.parse(json);
827           var nodePortHtml = "<div>";
828           $.each(nodePorts, function(index, nodePort) {
829             nodePortHtml += nodePort["nodePortName"] + " @ " + nodePort["nodeName"];
830             nodePortHtml += "&nbsp;";
831             nodePortHtml += '<a href="#" id="' + encodeURIComponent(nodePort["nodePortId"]) +
832             '" gatewayName="' + tableRow["name"] +
833             '" onclick="javascript:one.f.switchmanager.subnetGatewayConfig.actions.deleteNodePort(this);">Remove</a>';
834           nodePortHtml += "<br/>";
835           });
836           nodePortHtml += "</div>";
837           tableRow["nodePorts"] = nodePortHtml;
838           });
839
840         },
841         delay: 0
842       });
843       // populate the registry with subnet names
844       one.f.switchmanager.subnetGatewayConfig.registry.gateways = [];
845       $.each(data.nodeData, function(key, value) {
846         one.f.switchmanager.subnetGatewayConfig.registry.gateways.push(value["name"]);
847       });
848       return source;          
849     },
850     devices : function(data) {
851       var result = [];
852       one.f.switchmanager.subnetGatewayConfig.registry.gateways = [];
853       $.each(data.nodeData, function(key, value) {
854         var tr = {};
855         // fill up all the td's
856         var subnetConfigObject = $.parseJSON(value["json"]);
857         var nodePorts = subnetConfigObject.nodePorts;
858         var $nodePortsContainer = $(document.createElement("div"));
859
860         for(var i = 0; i < nodePorts.length; i++) {
861           var nodePort = nodePorts[i];
862           $nodePortsContainer.append(nodePort + " ");
863           // add delete anchor tag to delete ports
864           var aTag = document.createElement("a");
865           aTag.setAttribute("id", encodeURIComponent(nodePort));
866           aTag.gatewayName = value["name"];
867           aTag.addEventListener("click", function(evt) {
868             var htmlPortAnchor = evt.target;
869             var requestData = {};
870             requestData["gatewayName"] = evt.target.gatewayName;
871             requestData["nodePort"] = decodeURIComponent(evt.target.id);
872             // make ajax call to delete port
873             var url = one.f.switchmanager.rootUrl + "/subnetGateway/ports/delete";
874             one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
875               if(response.status == true) {
876                 // refresh dashlet by passing dashlet div as param
877                 one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
878               } else {
879                 alert(response.message);
880               }
881             });
882
883           });
884           aTag.addEventListener("mouseover", function(evt) {
885             evt.target.style.cursor = "pointer";
886           }, false);
887           aTag.innerHTML = "Remove";
888           $nodePortsContainer.append(aTag);
889           $nodePortsContainer.append("<br/>");
890         }
891
892         // store gateways in the registry so that they can be used in the add ports popup
893         one.f.switchmanager.subnetGatewayConfig.registry.gateways.push(value["name"]);
894         var entry = [];
895         var checkbox = document.createElement("input");
896         checkbox.setAttribute("type", "checkbox");
897         checkbox.setAttribute("id", value["name"]);
898         entry.push(checkbox);
899         entry.push(value["name"]);
900         entry.push(value["subnet"]);
901         entry.push($nodePortsContainer);
902         tr.entry = entry;
903         result.push(tr);
904       });
905       return result;
906     }
907   },
908   actions: {
909     deleteNodePort: function(htmlPortAnchor) {
910       var requestData = {};
911       requestData["gatewayName"] = htmlPortAnchor.getAttribute("gatewayName");
912       requestData["nodePort"] = decodeURIComponent(htmlPortAnchor.id);
913       // make ajax call to delete port
914       var url = one.f.switchmanager.rootUrl + "/subnetGateway/ports/delete";
915       one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
916         if(response.status == true) {
917           // refresh dashlet by passing dashlet div as param
918           one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
919         } else {
920           alert(response.message);
921         }
922       });
923     }
924   }
925 }
926
927 one.f.switchmanager.staticRouteConfig = {
928   id: {
929     dashlet: {
930       add: "one_f_switchmanager_staticRouteConfig_id_dashlet_add",
931       remove: "one_f_switchmanager_staticRouteConfig_id_dashlet_remove",
932       datagrid: "one_f_switchmanager_staticRouteConfig_id_dashlet_datagrid",
933       selectAll: "one_f_switchmanager_staticRouteConfig_id_dashlet_selectAll"
934     }, 
935     modal: {
936       modal: "one_f_switchmanager_staticRouteConfig_id_modal_modal",
937       save: "one_f_switchmanager_staticRouteConfig_id_modal_save",
938       cancel: "one_f_switchmanager_staticRouteConfig_id_modal_cancel",
939       remove: "one_f_switchmanager_staticRouteConfig_id_modal_remove",
940       form: {
941         routeName : "one_f_switchmanager_staticRouteConfig_id_modal_form_routename",
942         staticRoute : "one_f_switchmanager_staticRouteConfig_id_modal_form_staticroute",
943         nextHop : "one_f_switchmanager_staticRouteConfig_id_modal_form_nexthop",
944       }
945     }
946   },
947   dashlet: function($dashlet) {
948     one.lib.dashlet.empty($dashlet);
949     var url = one.f.switchmanager.rootUrl + "/staticRoutes";
950     one.f.switchmanager.staticRouteConfig.ajax.main(url, {}, function(content) {
951
952       if (content.privilege === 'WRITE') {
953         // Add static route button
954         var button = one.lib.dashlet.button.single("Add Static Route", one.f.switchmanager.staticRouteConfig.id.dashlet.add, "btn-primary", "btn-mini");
955         var $button = one.lib.dashlet.button.button(button);
956         $button.click(function() {
957           var $modal = one.f.switchmanager.staticRouteConfig.modal.initialize();
958           $modal.modal();
959         });
960         $dashlet.append(one.lib.dashlet.header(one.f.dashlet.staticRouteConfig.name));
961         $dashlet.append($button);
962
963         // Delete static route button
964         var button = one.lib.dashlet.button.single("Remove Static Route", one.f.switchmanager.staticRouteConfig.id.dashlet.remove, "btn-danger", "btn-mini");
965         var $button = one.lib.dashlet.button.button(button);
966         $button.click(function() {
967           var routesToDelete = [];
968           var checkedCheckBoxes = $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).find("tbody input:checked");
969           checkedCheckBoxes.each(function(index, value) {
970             routesToDelete.push(checkedCheckBoxes[index].id);
971           });
972           if (checkedCheckBoxes.size() === 0) {
973             return false;
974           }
975           one.f.switchmanager.staticRouteConfig.modal.removeMultiple.dialog(routesToDelete);
976         });
977         $dashlet.append($button);
978       }
979       var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid, {
980         searchable: true,
981           filterable: false,
982           pagination: true,
983           flexibleRowsPerPage: true
984       }, "table-striped table-condensed");
985       $dashlet.append($gridHTML);
986       var dataSource = one.f.switchmanager.staticRouteConfig.data.staticRouteConfigGrid(content);
987       $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
988         .on("loaded", function() {
989           $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll).click(function() {
990             $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
991               $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll).is(':checked'));
992           });
993           $(".staticRoute").click(function(e){
994             if (!$('.staticRoute[type=checkbox]:not(:checked)').length) {
995               $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll)
996             .prop("checked",
997               true);
998             } else {
999               $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll)
1000             .prop("checked",
1001               false);
1002             }
1003             e.stopPropagation();
1004           });
1005         });
1006     });
1007   },
1008   // device ajax calls
1009   ajax : {
1010     main : function(url, requestData, callback) {
1011       $.getJSON(url, requestData, function(data) {
1012         callback(data);
1013       });
1014     }
1015   },
1016   registry: {},
1017   modal : {
1018     initialize: function() {
1019       var h3 = "Add Static Route";
1020       var footer = one.f.switchmanager.staticRouteConfig.modal.footer();
1021       var $modal = one.lib.modal.spawn(one.f.switchmanager.staticRouteConfig.id.modal.modal, h3, "", footer);
1022       // bind save button
1023       $('#' + one.f.switchmanager.staticRouteConfig.id.modal.save, $modal).click(function() {
1024         one.f.switchmanager.staticRouteConfig.modal.save($modal);
1025       });
1026       var $body = one.f.switchmanager.staticRouteConfig.modal.body();
1027       one.lib.modal.inject.body($modal, $body);
1028       return $modal;
1029     },
1030     save: function($modal) {
1031       var result = {};
1032       result['routeName'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.routeName, $modal).val();
1033       result['staticRoute'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.staticRoute, $modal).val();
1034       result['nextHop'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.nextHop, $modal).val();
1035       one.f.switchmanager.staticRouteConfig.modal.ajax.staticRouteConfig(result, function(response) {
1036         if(response.status == true) {
1037           $modal.modal('hide');
1038           // refresh dashlet by passing dashlet div as param
1039           one.f.switchmanager.staticRouteConfig.dashlet($("#left-bottom .dashlet"));
1040         } else {
1041           // TODO: Show error message in a error message label instead.
1042           alert(response.message);
1043         }
1044       });
1045     },
1046     body: function() {
1047       var $form = $(document.createElement('form'));
1048       var $fieldset = $(document.createElement('fieldset'));
1049       // static route name
1050       var $label = one.lib.form.label("Name");
1051       var $input = one.lib.form.input("Name");
1052       $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.routeName);
1053       $fieldset.append($label).append($input);
1054       // static route IP Mask 
1055       var $label = one.lib.form.label("Static Route");
1056       var $input = one.lib.form.input("Static Route");
1057       var $help = one.lib.form.help('Example: 53.55.0.0/16');
1058       $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.staticRoute);
1059       $fieldset.append($label).append($input).append($help);
1060       // static route IP Mask 
1061       var $label = one.lib.form.label("Next Hop");
1062       var $input = one.lib.form.input("Next Hop");
1063       var $help = one.lib.form.help('Example: 192.168.10.254');
1064       $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.nextHop);
1065       $fieldset.append($label).append($input).append($help);
1066       // return
1067       $form.append($fieldset);
1068       return $form;
1069     },
1070     ajax: {
1071       staticRouteConfig: function(requestData, callback) {
1072         $.getJSON(one.f.switchmanager.rootUrl + "/staticRoute/add", requestData, function(data) {
1073           callback(data);
1074         });
1075       }
1076     },
1077     data : {
1078
1079     },
1080     footer : function() {
1081       var footer = [];
1082       var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.staticRouteConfig.id.modal.save, "btn-primary", "");
1083       var $saveButton = one.lib.dashlet.button.button(saveButton);
1084       footer.push($saveButton);
1085       return footer;
1086     },
1087     removeMultiple: {
1088       dialog: function(routesToDelete) {
1089         var h3 = 'Remove Static Route';
1090
1091         var footer = one.f.switchmanager.staticRouteConfig.modal.removeMultiple.footer();
1092         var $body = one.f.switchmanager.staticRouteConfig.modal.removeMultiple.body(routesToDelete);
1093         var $modal = one.lib.modal.spawn(one.f.switchmanager.staticRouteConfig.id.modal.modal, h3, $body, footer);
1094
1095         // bind close button
1096         $('#'+one.f.switchmanager.staticRouteConfig.id.modal.cancel, $modal).click(function() {
1097           $modal.modal('hide');
1098         });
1099
1100         // bind remove rule button
1101         $('#'+one.f.switchmanager.staticRouteConfig.id.modal.remove, $modal).click(this, function(e) {
1102           if (routesToDelete.length > 0) {
1103             var requestData = {};
1104             requestData["routesToDelete"] = routesToDelete.toString();
1105             var url = one.f.switchmanager.rootUrl + "/staticRoute/delete";
1106             one.f.switchmanager.staticRouteConfig.ajax.main(url, requestData, function(response) {
1107               $modal.modal('hide');
1108               if (response.status == true) {
1109                 // refresh dashlet by passing dashlet div as param 
1110                 one.lib.alert("Static Route(s) successfully removed");
1111               } else {
1112                 alert(response.message);
1113               }
1114               one.f.switchmanager.staticRouteConfig.dashlet($("#left-bottom .dashlet"));
1115             });
1116           }
1117         });
1118         $modal.modal();
1119       },
1120       footer : function() {
1121         var footer = [];
1122         var remove = one.lib.dashlet.button.single('Remove Static Route',one.f.switchmanager.staticRouteConfig.id.modal.remove, 'btn-danger', '');
1123         var $remove = one.lib.dashlet.button.button(remove);
1124         footer.push($remove);
1125
1126         var cancel = one.lib.dashlet.button.single('Cancel', one.f.switchmanager.staticRouteConfig.id.modal.cancel, '', '');
1127         var $cancel = one.lib.dashlet.button.button(cancel);
1128         footer.push($cancel);
1129
1130         return footer;
1131       },
1132       body : function (staticRouteList) {
1133         var $p = $(document.createElement('p'));
1134         var p = 'Remove the following Static Route(s)?';
1135         //creata a BS label for each rule and append to list
1136         $(staticRouteList).each(function(){
1137           var $span = $(document.createElement('span'));
1138           $span.append(this);
1139           p += '<br/>' + $span[0].outerHTML;
1140         });
1141         $p.append(p);
1142         return $p;
1143       }
1144     }
1145   },
1146   // data functions
1147   data : {
1148     staticRouteConfigGrid: function(data) {
1149       var source = new StaticDataSource({
1150         columns: [
1151       {
1152         property: 'selector',
1153       label: "<input type='checkbox'  id='"
1154         +one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll+"'/>",
1155       sortable: false
1156       },
1157       {
1158         property: 'name',
1159       label: 'Name',
1160       sortable: true
1161       },
1162       {
1163         property: 'staticRoute',
1164       label: 'Static Route',
1165       sortable: true
1166       },
1167       {
1168         property: 'nextHop',
1169           label: 'Next Hop Address',
1170           sortable: true
1171       }
1172       ],
1173         data: data.nodeData,
1174         formatter: function(items) {
1175           $.each(items, function(index, item) {
1176             item["selector"] = '<input type="checkbox" class="staticRoute" id="' + item["name"] + '"></input>';
1177           });
1178
1179         },
1180         delay: 0
1181       });
1182       return source;              
1183     },
1184     staticRouteConfig : function(data) {
1185       var result = [];
1186       $.each(data.nodeData, function(key, value) {
1187         var tr = {};
1188         // fill up all the td's
1189         var entry = [];
1190         var checkbox = document.createElement("input");
1191         checkbox.setAttribute("type", "checkbox");
1192         checkbox.setAttribute("id", value["name"]);
1193         entry.push(checkbox);
1194         entry.push(value["name"]);
1195         entry.push(value["staticRoute"]);
1196         entry.push(value["nextHop"]);
1197         tr.entry = entry;
1198         result.push(tr);
1199       });
1200       return result;
1201     }
1202   }
1203 }
1204
1205 one.f.switchmanager.spanPortConfig = {
1206   id: {
1207     dashlet: {
1208       add: "one_f_switchmanager_spanPortConfig_id_dashlet_add",
1209       remove: "one_f_switchmanager_spanPortConfig_id_dashlet_remove",
1210       datagrid: "one_f_switchmanager_spanPortConfig_id_dashlet_datagrid",
1211       selectAllFlows: "one_f_switchmanager_spanPortConfig_id_dashlet_selectAllFlows"
1212     }, 
1213     modal: {
1214       modal: "one_f_switchmanager_spanPortConfig_id_modal_modal",
1215       save: "one_f_switchmanager_spanPortConfig_id_modal_save",
1216       cancel: "one_f_switchmanager_spanPortConfig_id_modal_cancel",
1217       remove: "one_f_switchmanager_spanPortConfig_id_modal_remove",
1218       form: {
1219         name : "one_f_switchmanager_spanPortConfig_id_modal_form_name",
1220         nodes : "one_f_switchmanager_spanPortConfig_id_modal_form_nodes",
1221         port : "one_f_switchmanager_spanPortConfig_id_modal_form_port",
1222       }
1223     }
1224   },
1225   dashlet: function($dashlet) {
1226     one.lib.dashlet.empty($dashlet);
1227
1228     //populate table in dashlet
1229     var url = one.f.switchmanager.rootUrl + "/spanPorts";
1230     one.f.switchmanager.spanPortConfig.ajax.main(url, {}, function(content) {
1231
1232       if (content.privilege === 'WRITE') {
1233
1234         // Add span port button
1235         var button = one.lib.dashlet.button.single("Add SPAN Port", one.f.switchmanager.spanPortConfig.id.dashlet.add, "btn-primary", "btn-mini");
1236         var $button = one.lib.dashlet.button.button(button);
1237
1238         $button.click(function() {
1239           var $modal = one.f.switchmanager.spanPortConfig.modal.initialize();
1240           $modal.modal();
1241         });
1242         $dashlet.append(one.lib.dashlet.header(one.f.dashlet.spanPortConfig.name));
1243         $dashlet.append($button);
1244
1245         // Delete span port button
1246         var button = one.lib.dashlet.button.single("Remove SPAN Port", one.f.switchmanager.spanPortConfig.id.dashlet.remove, "btn-danger", "btn-mini");
1247         var $button = one.lib.dashlet.button.button(button);
1248         $button.click(function() {
1249           var spanPortsToDelete = [];
1250           var checkedCheckBoxes = $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).find("tbody input:checked");
1251
1252           if (checkedCheckBoxes.size() === 0) {
1253             return false;
1254           }
1255           checkedCheckBoxes.each(function(index, value) {
1256             var spanPortObj = {};
1257             spanPortObj['spanPortJson'] = decodeURIComponent(checkedCheckBoxes[index].getAttribute("spanPort"));
1258             spanPortObj['spanPortNodeName'] = checkedCheckBoxes[index].getAttribute("spanPortNode");
1259             spanPortObj['spanPortPortName'] = checkedCheckBoxes[index].getAttribute("spanPortPort");
1260
1261             spanPortsToDelete.push(spanPortObj);
1262           });
1263           one.f.switchmanager.spanPortConfig.modal.removeMultiple.dialog(spanPortsToDelete);
1264         });
1265         $dashlet.append($button);
1266       }
1267       var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.spanPortConfig.id.dashlet.datagrid, {
1268         searchable: true,
1269           filterable: false,
1270           pagination: true,
1271           flexibleRowsPerPage: true
1272       }, "table-striped table-condensed");
1273       $dashlet.append($gridHTML);
1274       var dataSource = one.f.switchmanager.spanPortConfig.data.spanPortConfigGrid(content);
1275       $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
1276         .on("loaded", function() {
1277           $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll).click(function() {
1278             $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
1279               $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll).is(':checked'));
1280           });
1281           $(".spanPortConfig").click(function(e){
1282             if (!$('.spanPortConfig[type=checkbox]:not(:checked)').length) {
1283               $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll)
1284             .prop("checked",
1285               true);
1286             } else {
1287               $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll)
1288             .prop("checked",
1289               false);
1290             }
1291             e.stopPropagation();
1292           });
1293         });
1294     });
1295   },
1296   // device ajax calls
1297   ajax : {
1298     main : function(url, requestData, callback) {
1299       $.getJSON(url, requestData, function(data) {
1300         callback(data);
1301       });
1302     }
1303   },
1304   registry: {},
1305   modal : {
1306     initialize: function() {
1307       var h3 = "Add SPAN Port";
1308       var footer = one.f.switchmanager.spanPortConfig.modal.footer();
1309       var $modal = one.lib.modal.spawn(one.f.switchmanager.spanPortConfig.id.modal.modal, h3, "", footer);
1310       // bind save button
1311       $('#' + one.f.switchmanager.spanPortConfig.id.modal.save, $modal).click(function() {
1312         one.f.switchmanager.spanPortConfig.modal.save($modal);
1313       });
1314
1315       one.f.switchmanager.spanPortConfig.modal.ajax.nodes(function(nodes, nodeports) {
1316         var $body = one.f.switchmanager.spanPortConfig.modal.body(nodes, nodeports);
1317         one.lib.modal.inject.body($modal, $body);
1318       });
1319       return $modal;
1320     },
1321     save: function($modal) {
1322       var result = {};
1323       result['nodeId'] = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.nodes, $modal).val();
1324       result['spanPort'] = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.port, $modal).val();
1325       one.f.switchmanager.spanPortConfig.modal.ajax.saveSpanPortConfig(result, 
1326           function(response) {
1327             if(response.status == true) {
1328               $modal.modal('hide');
1329               one.f.switchmanager.spanPortConfig.dashlet($("#right-bottom .dashlet"));
1330             } else {
1331               alert(response.message);
1332             }
1333
1334           });
1335     },
1336     body: function(nodes, nodeports) {
1337       var $form = $(document.createElement('form'));
1338       var $fieldset = $(document.createElement('fieldset'));
1339       // node
1340       var $label = one.lib.form.label("Node");
1341       var $select = one.lib.form.select.create(nodes);
1342       one.lib.form.select.prepend($select, { '' : 'Please Select a Node' });
1343       $select.val($select.find("option:first").val());
1344       $select.attr('id', one.f.switchmanager.spanPortConfig.id.modal.form.nodes);
1345
1346       // bind onchange
1347       $select.change(function() {
1348         // retrieve port value
1349         var nodeId = $(this).find('option:selected').attr('value');
1350         one.f.switchmanager.spanPortConfig.registry['currentNode'] = nodeId;
1351         var $ports = $('#'+one.f.switchmanager.spanPortConfig.id.modal.form.port);
1352         var ports = one.f.switchmanager.spanPortConfig.registry['nodePorts'][nodeId]
1353         var options = {};
1354       $(ports).each(function(idx, val) {
1355         options[val.internalPortName] = val.portName+' ('+val.portId+')'; 
1356           });
1357         one.lib.form.select.inject($ports, options); 
1358         one.lib.form.select.prepend($ports, {'':'Please Select a Port'});
1359         $ports.val($ports.find('option:first').val());
1360         });
1361
1362       $fieldset.append($label).append($select);
1363       // input port
1364       var $label = one.lib.form.label("Input Port");
1365       var $select = one.lib.form.select.create();
1366       one.lib.form.select.prepend($select, {'':'None'});
1367       $select.attr('id', one.f.switchmanager.spanPortConfig.id.modal.form.port);
1368       $select.val($select.find('option:first').val());
1369       $fieldset.append($label).append($select);
1370
1371       // return
1372       $form.append($fieldset);
1373       return $form;
1374     },
1375     ajax: {
1376       nodes: function(callback) {
1377         $.getJSON(one.f.switchmanager.rootUrl + "/nodeports", function(data) {
1378           var nodes = {};
1379           var nodePorts = {};
1380           $(data).each(function(index, node) {
1381             nodes[node.nodeId] = node.nodeName;
1382             nodePorts[node.nodeId] = node.nodePorts;
1383           });
1384           one.f.switchmanager.spanPortConfig.registry['nodePorts'] = nodePorts;
1385           callback(nodes, nodePorts);
1386         });
1387       },
1388       saveSpanPortConfig: function(requestData, callback) {
1389         var resource = {};
1390         resource["jsonData"] = JSON.stringify(requestData);
1391         $.getJSON(one.f.switchmanager.rootUrl + "/spanPorts/add", resource, function(data) {
1392           callback(data);
1393         });
1394       }
1395     },
1396     footer : function() {
1397       var footer = [];
1398       var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.spanPortConfig.id.modal.save, "btn-primary", "");
1399       var $saveButton = one.lib.dashlet.button.button(saveButton);
1400       footer.push($saveButton);
1401       return footer;
1402     },
1403     removeMultiple: {
1404       dialog: function(spanPortsToDelete) {
1405         var h3 = 'Remove SPAN Port';
1406
1407         var footer = one.f.switchmanager.spanPortConfig.modal.removeMultiple.footer();
1408         var $body = one.f.switchmanager.spanPortConfig.modal.removeMultiple.body(spanPortsToDelete);
1409         var $modal = one.lib.modal.spawn(one.f.switchmanager.spanPortConfig.id.modal.modal, h3, $body, footer);
1410
1411         // bind close button
1412         $('#'+one.f.switchmanager.spanPortConfig.id.modal.cancel, $modal).click(function() {
1413           $modal.modal('hide');
1414         });
1415
1416         // bind remove rule button
1417         $('#'+one.f.switchmanager.spanPortConfig.id.modal.remove, $modal).click(this, function(e) {
1418           var requestData = {};
1419           var spanPorts = [];
1420           $(spanPortsToDelete).each(function(index, spanPort) {
1421             spanPorts.push(JSON.parse(spanPort.spanPortJson));
1422           });
1423           requestData["spanPortsToDelete"] = JSON.stringify(spanPorts);
1424
1425           var url = one.f.switchmanager.rootUrl + "/spanPorts/delete";
1426           one.f.switchmanager.spanPortConfig.ajax.main(url, requestData, function(response) {
1427             $modal.modal('hide');
1428             if (response.status == true) {
1429               // refresh dashlet by passing dashlet div as param
1430               one.lib.alert("Span Port(s) successfully removed");
1431             } else {
1432               alert(response.message);
1433             }
1434             one.f.switchmanager.spanPortConfig.dashlet($("#right-bottom .dashlet"));
1435           });
1436         });
1437         $modal.modal();
1438       },
1439       footer : function() {
1440         var footer = [];
1441         var remove = one.lib.dashlet.button.single('Remove SPAN Port',one.f.switchmanager.spanPortConfig.id.modal.remove, 'btn-danger', '');
1442         var $remove = one.lib.dashlet.button.button(remove);
1443         footer.push($remove);
1444
1445         var cancel = one.lib.dashlet.button.single('Cancel', one.f.switchmanager.spanPortConfig.id.modal.cancel, '', '');
1446         var $cancel = one.lib.dashlet.button.button(cancel);
1447         footer.push($cancel);
1448
1449         return footer;
1450       },
1451       body : function (spanPortToDelete) {
1452         var $p = $(document.createElement('p'));
1453         var p = 'Remove the following Span Port(s)?';
1454         //creata a BS label for each rule and append to list
1455
1456         $(spanPortToDelete).each(function(index, spanPortItem) {
1457           var $span = $(document.createElement('span'));
1458           $span.append(this.spanPortNodeName+"-"+this.spanPortPortName);
1459           p += '<br/>' + $span[0].outerHTML;
1460         });
1461         $p.append(p);
1462         return $p;
1463       }
1464     }
1465   },
1466   // data functions
1467   data : {
1468     spanPortConfigGrid: function(data) {
1469       var source = new StaticDataSource({
1470         columns: [
1471       {
1472         property: 'selector',
1473       label: "<input type='checkbox'  id='"
1474         +one.f.switchmanager.spanPortConfig.id.dashlet.selectAll+"'/>",
1475       sortable: false
1476       },
1477       {
1478         property: 'nodeName',
1479       label: 'Node',
1480       sortable: true
1481       },
1482       {
1483         property: 'spanPortName',
1484       label: 'SPAN Port',
1485       sortable: true
1486       },
1487       ],
1488       data: data.nodeData,
1489       formatter: function(items) {
1490         $.each(items, function(index, item) {
1491           item["selector"] = '<input type="checkbox" class="spanPortConfig" spanPort=' + encodeURIComponent(item["json"]) + ' spanPortNode="' + item["nodeName"] + '" spanPortPort="' + item["spanPortName"] + '"></input>';
1492         });
1493       },
1494       delay: 0
1495       });
1496       return source;              
1497     },
1498     devices : function(data) {
1499       var result = [];
1500       $.each(data.nodeData, function(key, value) {
1501         var tr = {};
1502         // fill up all the td's
1503         var entry = [];
1504         var checkbox = document.createElement("input");
1505         checkbox.setAttribute("type", "checkbox");
1506         checkbox.spanPort = value.json;
1507         entry.push(checkbox);
1508         entry.push(value["nodeName"]);
1509         entry.push(value["spanPort"]);
1510         tr.entry = entry;
1511         result.push(tr);
1512       });
1513       return result;
1514     }
1515   }
1516 }
1517
1518 one.f.connection = {
1519   id : { // one.f.connection.id
1520     datagrid : 'one-f-connection-id-datagrid',
1521     add : 'one-f-connection-id-add'
1522   },
1523   dashlet: function($dashlet) {
1524     one.lib.dashlet.empty($dashlet);
1525     // heading
1526     $dashlet.append(one.lib.dashlet.header(one.f.dashlet.connection.name));
1527     // add button
1528     var add = one.lib.dashlet.button.single('Add Node', one.f.connection.id.add, 'btn-primary', 'btn-mini');
1529     var $add = one.lib.dashlet.button.button(add);
1530     $add.click(function() {
1531       one.f.connection.add.initialize();
1532     });
1533     $dashlet.append($add);
1534     // load table
1535     var url = one.f.switchmanager.rootUrl+'/connect/nodes';
1536     $.getJSON(url, function(data) {
1537       var $gridHTML = one.lib.dashlet.datagrid.init(one.f.connection.id.datagrid, {
1538         searchable: true,
1539         filterable: false,
1540         pagination: true,
1541         flexibleRowsPerPage: true
1542       }, 'table-striped table-condensed table-cursor');
1543       $dashlet.append($gridHTML);
1544       var dataSource = one.f.connection.data(data);
1545       $('#'+one.f.connection.id.datagrid, $dashlet).datagrid({dataSource:dataSource})
1546         .on('loaded', function() {
1547           $(this).find('tbody tr').click(function() {
1548             var nodeId = $(this).find('.nodeId').text();
1549             var nodeType = $(this).find('.nodeType').text();
1550             var nodeName = $(this).find('.nodeName').text();
1551             one.f.connection.remove.initialize(nodeId, nodeName, nodeType);
1552           });
1553         });
1554     });
1555   },
1556   data : function(data) {
1557     var source = new StaticDataSource({
1558       columns: [
1559       {
1560         property: 'nodeName',
1561         label: 'Node',
1562         sortable: true
1563       }
1564       ],
1565       data: data,
1566       formatter: function(items) {
1567         $.each(items, function(index, item) {
1568           var $nodeId = $(document.createElement('span'));
1569           $nodeId.css('display', 'none');
1570           var $nodeType = $nodeId.clone();
1571           var $nodeName = $nodeId.clone();
1572           $nodeId.append(item.nodeId).addClass('nodeId');
1573           $nodeType.append(item.nodeType).addClass('nodeType');
1574           $nodeName.append(item.nodeName).addClass('nodeName');
1575           item.nodeName += $nodeId[0].outerHTML+$nodeType[0].outerHTML+$nodeName[0].outerHTML;
1576         });
1577       },
1578       delay: 0
1579     });
1580     return source;              
1581   },
1582   add : {
1583     id : { // one.f.connection.add.id
1584       modal : 'one-f-connection-add-id-modal',
1585       add : 'one-f-connection-add-id-add',
1586       cancel : 'one-f-connection-add-id-cancel',
1587       form : {
1588         nodeId : 'one-f-connection-add-id-form-nodeId',
1589         ipAddress : 'one-f-connection-add-id-form-ipAddress',
1590         port : 'one-f-connection-add-id-form-port',
1591         nodeType : 'one-f-connection-add-id-form-nodeType'
1592       }
1593     },
1594     initialize : function() {
1595       var h3 = 'Add Node';
1596       var footer = one.f.connection.add.footer();
1597       var $body = one.f.connection.add.body();;
1598       var $modal = one.lib.modal.spawn(one.f.connection.add.id.modal, h3, $body, footer);
1599       // bind add buton
1600       $('#'+one.f.connection.add.id.add, $modal).click(function() {
1601         var nodeId = $('#'+one.f.connection.add.id.form.nodeId, $modal).val();
1602         if (nodeId === '') {
1603           alert('Please enter a node ID');
1604           return false;
1605         }
1606         var resources = {};
1607         resources.ipAddress = $('#'+one.f.connection.add.id.form.ipAddress, $modal).val();
1608         if (resources.ipAddress === '') {
1609           alert('Please enter an IP Address');
1610           return false;
1611         }
1612         resources.port = $('#'+one.f.connection.add.id.form.port, $modal).val();
1613         if (resources.port === '') {
1614           alert('Please enter a port');
1615           return false;
1616         }
1617         var nodeType = $('#'+one.f.connection.add.id.form.nodeType, $modal).val();
1618         if (nodeType !== '') {
1619           resources.nodeType = nodeType;
1620         }
1621         var url = one.f.switchmanager.rootUrl+'/connect/'+encodeURI(nodeId);
1622         $.post(url, resources, function(result) {
1623           if (result.success === true) {
1624             $modal.modal('hide');
1625             one.lib.alert(result.description);
1626           } else {
1627             alert(result.code+': '+result.description);
1628           }
1629         });
1630       });
1631       // bind cancel button
1632       $('#'+one.f.connection.add.id.cancel, $modal).click(function() {
1633         $modal.modal('hide');
1634       });
1635       $modal.modal();
1636     },
1637     body : function() {
1638       var $form = $(document.createElement('form'));
1639       var $fieldset = $(document.createElement('fieldset'));
1640       // node id
1641       var $label = one.lib.form.label('Node ID');
1642       var $input = one.lib.form.input('Node ID');
1643       $input.attr('id', one.f.connection.add.id.form.nodeId);
1644       $fieldset.append($label).append($input);
1645       // ip address
1646       $label = one.lib.form.label('IP Address');
1647       $input = one.lib.form.input('IP Address');
1648       $input.attr('id', one.f.connection.add.id.form.ipAddress);
1649       $fieldset.append($label).append($input);
1650       // port
1651       $label = one.lib.form.label('Port');
1652       $input = one.lib.form.input('Port');
1653       $input.attr('id', one.f.connection.add.id.form.port);
1654       var $help = one.lib.form.help('Enter a number');
1655       $fieldset.append($label).append($input).append($help);
1656       // node type
1657       $label = one.lib.form.label('Node Type');
1658       $input = one.lib.form.input('Node Type');
1659       $input.attr('id', one.f.connection.add.id.form.nodeType);
1660       $help = one.lib.form.help('Optional');
1661       $fieldset.append($label).append($input).append($help);
1662       $form.append($fieldset);
1663       return $form;
1664     },
1665     footer : function() {
1666       var footer = [];
1667       var add = one.lib.dashlet.button.single('Submit', one.f.connection.add.id.add, 'btn-primary', '');
1668       var $add = one.lib.dashlet.button.button(add);
1669       footer.push($add);
1670       var cancel = one.lib.dashlet.button.single('Cancel', one.f.connection.add.id.cancel, '', '');
1671       var $cancel = one.lib.dashlet.button.button(cancel);
1672       footer.push($cancel);
1673       return footer;
1674     }
1675   },
1676   remove : {
1677     id : { // one.f.connection.remove.id
1678       modal : 'one-f-connection-remove-id-modal',
1679       remove : 'one-f-connection-remove-id-remove',
1680       cancel : 'one-f-connection-remove-id-cancel'
1681     },
1682     initialize : function(nodeId, nodeName, nodeType) {
1683       var h3 = 'Remove Node';
1684       var footer = one.f.connection.remove.footer();
1685       var $body = one.f.connection.remove.body(nodeName);
1686       var $modal = one.lib.modal.spawn(one.f.connection.remove.id.modal, h3, $body, footer);
1687       // bind remove buton
1688       $('#'+one.f.connection.remove.id.remove, $modal).click(function() {
1689         var resources = {};
1690         resources.nodeType = nodeType;
1691         var url = one.f.switchmanager.rootUrl+'/disconnect/'+encodeURI(nodeId);
1692         $.post(url, resources, function(result) {
1693           if (result.success === true) {
1694             $modal.modal('hide');
1695             one.lib.alert(result.description);
1696           } else {
1697             alert(result.code+': '+result.description);
1698           }
1699         }).fail(function() { debugger; });
1700       });
1701       // bind cancel button
1702       $('#'+one.f.connection.remove.id.cancel, $modal).click(function() {
1703         $modal.modal('hide');
1704       });
1705       $modal.modal();
1706     },
1707     body : function(nodeName) {
1708       var $p = $(document.createElement('p'));
1709       $p.append('Remove the following node? ');
1710       var $span = $(document.createElement('span'));
1711       $span.addClass('label label-info');
1712       $span.append(nodeName);
1713       $p.append($span[0].outerHTML);
1714       return $p;
1715     },
1716     footer : function() {
1717       var footer = [];
1718       var remove = one.lib.dashlet.button.single('Remove', one.f.connection.remove.id.remove, 'btn-danger', '');
1719       var $remove = one.lib.dashlet.button.button(remove);
1720       footer.push($remove);
1721       var cancel = one.lib.dashlet.button.single('Cancel', one.f.connection.remove.id.cancel, '', '');
1722       var $cancel = one.lib.dashlet.button.button(cancel);
1723       footer.push($cancel);
1724       return footer;
1725     }
1726   }
1727 }
1728
1729 /** INIT **/
1730 // populate nav tabs
1731 $(one.f.menu.left.top).each(function(index, value) {
1732   var $nav = $(".nav", "#left-top");
1733   one.main.page.dashlet($nav, value);
1734 });
1735
1736 $(one.f.menu.left.bottom).each(function(index, value) {
1737   var $nav = $(".nav", "#left-bottom");
1738   one.main.page.dashlet($nav, value);
1739 });
1740
1741 $(one.f.menu.right.bottom).each(function(index, value) {
1742   var $nav = $(".nav", "#right-bottom");
1743   one.main.page.dashlet($nav, value);
1744 });
1745
1746 one.f.addPopOut = function() {
1747   $img1 = $(document.createElement("img"));
1748   $img1.attr("src", "/img/Expand16T.png");
1749   $img1.attr("style", "float: right;");
1750   $img1.hover(function() {
1751     $img1.css("cursor", "pointer");
1752   });
1753   $img1.click(function() {
1754     var $modal = one.f.switchmanager.nodesLearnt.modal.initialize.popout();
1755     $modal.css({
1756       'margin-left': '-45%',
1757       'margin-top': '-3%',
1758       'width':$(document).width() * 0.8,
1759       'height':$(document).height() * 0.9
1760     });
1761     $(".modal-body", $modal).css({
1762       "max-height": $(document).height() * 0.75,
1763     });
1764     $modal.modal();
1765   });
1766   $dash1 = $($("#left-top .nav")[0]);
1767   $dash1.append($img1);
1768 };
1769 one.f.addPopOut();
1770
1771 // bind dashlet nav
1772 $('.dash .nav a', '#main').click(function() {
1773   // de/activation
1774   var $li = $(this).parent();
1775   var $ul = $li.parent();
1776   one.lib.nav.unfocus($ul);
1777   $li.addClass('active');
1778   // clear respective dashlet
1779   var $dashlet = $ul.parent().find('.dashlet');
1780   one.lib.dashlet.empty($dashlet);
1781
1782   // callback based on menu
1783   var id = $(this).attr('id');
1784   var menu = one.f.dashlet;
1785   switch (id) {
1786     case menu.nodesLearnt.id:
1787       one.f.switchmanager.nodesLearnt.dashlet($dashlet);
1788       break;
1789     case menu.staticRouteConfig.id:
1790       one.f.switchmanager.staticRouteConfig.dashlet($dashlet);
1791       break;
1792     case menu.subnetGatewayConfig.id:
1793       one.f.switchmanager.subnetGatewayConfig.dashlet($dashlet);
1794       break;
1795     case menu.spanPortConfig.id:
1796       one.f.switchmanager.spanPortConfig.dashlet($dashlet);
1797       break;
1798     case menu.connection.id:
1799       one.f.connection.dashlet($dashlet);
1800       break;
1801   };
1802 });
1803
1804 // activate first tab on each dashlet
1805 $('.dash .nav').each(function(index, value) {
1806   $($(value).find('li')[0]).find('a').click();
1807 });

©2013 OpenDaylight, A Linux Foundation Collaborative Project. All Rights Reserved.
OpenDaylight is a registered trademark of The OpenDaylight Project, Inc.
Linux Foundation and OpenDaylight are registered trademarks of the Linux Foundation.
Linux is a registered trademark of Linus Torvalds.