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