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("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 });