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