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                 },
  74                 modal: {
  75                         modal: "one_f_switchmanager_nodesLearnt_id_modal_modal",
  76                         save: "one_f_switchmanager_nodesLearnt_id_modal_save",
  77                         form: {
  78                                 nodeId: "one_f_switchmanager_nodesLearnt_id_modal_form_nodeid",
  79                                 nodeName : "one_f_switchmanager_nodesLearnt_id_modal_form_nodename",
  80                                 portStatus : "one_f_switchmanager_nodesLearnt_id_modal_form_portstatus",
  81                                 tier: "one_f_switchmanager_nodesLearnt_id_modal_form_tier",
  82                                 operationMode: "one_f_switchmanager_nodesLearnt_id_modal_form_opmode"
  83                         }
  84                 }
  85         },
  86         dashlet: function($dashlet) {
  87                 var url = one.f.switchmanager.rootUrl + "/nodesLearnt";
  88                 one.lib.dashlet.empty($dashlet);
  89                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.nodesLearnt.name));
  90
  91                 one.f.switchmanager.nodesLearnt.ajax.main(url, function(content) {
  92                         var body = one.f.switchmanager.nodesLearnt.data.abridged(content);
  93                         var $table = one.f.switchmanager.createTable(["Node Name", "Node ID", "Ports"], body);
  94                         $dashlet.append($table);
  95                 });
  96         },
  97         ajax : {
  98                 main : function(url, callback) {
  99                         $.getJSON(url, function(data) {
 100                                 callback(data);
 101                         });
 102                 }
 103         },
 104         modal : {
 105                 initialize: {
 106                         updateNode: function(evt) {
 107                                 var nodeId = decodeURIComponent(evt.target.id);
 108                                 var h3 = "Update Node Information";
 109                     var footer = one.f.switchmanager.nodesLearnt.modal.footer.updateNode();
 110                     var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.modal, h3, "", footer);
 111
 112                     // bind save button
 113                     $('#' + one.f.switchmanager.nodesLearnt.id.modal.save, $modal).click(function() {
 114                         one.f.switchmanager.nodesLearnt.modal.save($modal);
 115                     });
 116                     // inject body (nodePorts)
 117                     one.f.switchmanager.nodesLearnt.ajax.main(one.f.switchmanager.rootUrl + "/tiers", function(tiers) {
 118                         var $body = one.f.switchmanager.nodesLearnt.modal.body.updateNode(nodeId, evt.target.switchDetails, tiers);
 119                         one.lib.modal.inject.body($modal, $body);
 120                         $modal.modal();
 121                     });
 122                         },
 123                         popout: function() {
 124                                 var h3 = "Nodes Learnt";
 125                     var footer = one.f.switchmanager.nodesLearnt.modal.footer.popout();
 126                     var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.modal, h3, "", footer);
 127                     var $body = one.f.switchmanager.nodesLearnt.modal.body.popout($modal);
 128                     return $modal;
 129                         }
 130                 },
 131                 body: {
 132                         updateNode: function(nodeId, switchDetails, tiers) {
 133                                 var $form = $(document.createElement('form'));
 134                                 var $fieldset = $(document.createElement('fieldset'));
 135                                 // node ID. not editable.
 136                                 var $label = one.lib.form.label("Node ID");
 137                                 var $input = one.lib.form.input("node id");
 138                                 $input.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.nodeId);
 139                                 $input.attr("disabled", true);
 140                                 $input.attr("value", nodeId);
 141                                 $fieldset.append($label).append($input);
 142                                 // node name
 143                                 var $label = one.lib.form.label("Node Name");
 144                                 var $input = one.lib.form.input("Node Name");
 145                                 $input.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.nodeName);
 146                                 if(switchDetails["nodeName"] != null) {
 147                                         $input.attr('value', switchDetails["nodeName"]);
 148                                 }
 149                                 $fieldset.append($label).append($input);
 150                                 // node tier
 151                                 var $label = one.lib.form.label("Tier");
 152                                 var $select = one.lib.form.select.create(tiers);
 153                                 $select.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.tier);
 154                                 $select.val(switchDetails["tier"]);
 155                                 $fieldset.append($label).append($select);
 156                                 // operation mode
 157                                 var $label = one.lib.form.label("Operation Mode");
 158                                 var $select = one.lib.form.select.create(
 159                                                 ["Allow reactive forwarding", "Proactive forwarding only"]);
 160                                 $select.attr('id', one.f.switchmanager.nodesLearnt.id.modal.form.operationMode);
 161                                 $select.val(switchDetails["mode"]);
 162                                 $fieldset.append($label).append($select);
 163
 164                                 $form.append($fieldset);
 165                                 return $form;
 166                         },
 167                         popout: function($modal) {
 168                                 var url = one.f.switchmanager.rootUrl + "/nodesLearnt";
 169                                 one.f.switchmanager.nodesLearnt.ajax.main(url, function(content) {
 170                                         var tableContent = one.f.switchmanager.nodesLearnt.data.popout(content);
 171                                         var $table = one.f.switchmanager.createTable(content.columnNames, tableContent);
 172                                         one.lib.modal.inject.body($modal, $table);
 173                                 });
 174                         }
 175                 },
 176                 save: function($modal) {
 177                         var result = {};
 178             result['nodeName'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.nodeName, $modal).val();
 179             if(!one.f.switchmanager.validateName(result['nodeName'])) {
 180                 alert("Node name can contain upto 255 characters");
 181                 return;
 182             }
 183             result['nodeId'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.nodeId, $modal).val();
 184             result['tier'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.tier, $modal).val();
 185             result['operationMode'] = $('#' + one.f.switchmanager.nodesLearnt.id.modal.form.operationMode, $modal).val();
 186             one.f.switchmanager.nodesLearnt.modal.ajax(result,
 187                                 function(response) {
 188                         if(response.status == true) {
 189                                 $modal.modal('hide');
 190                                 one.topology.update(); // refresh visual topology with new name
 191                                 // TODO: Identify dashlet by inserting a nodesLearnt div
 192                                         // in the dashlet() instead
 193                                 one.f.switchmanager.nodesLearnt.dashlet($("#left-top .dashlet"));
 194                         } else {
 195                                 alert(response.message);
 196                         }
 197
 198                     });
 199                 },
 200                 ajax: function(requestData, callback) {
 201                         $.getJSON(one.f.switchmanager.rootUrl + "/nodesLearnt/update", requestData, function(response) {
 202                                 callback(response);
 203                         });
 204                 },
 205                 footer: {
 206                         updateNode: function() {
 207                                 var footer = [];
 208                                 if(one.role < 2) {
 209                                         var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.nodesLearnt.id.modal.save, "btn-success", "");
 210                             var $saveButton = one.lib.dashlet.button.button(saveButton);
 211                             footer.push($saveButton);
 212                                 }
 213                     return footer;
 214                         },
 215                         popout: function() {
 216                                 // TODO: Maybe put a close button in the footer?
 217                                 return [];
 218                         }
 219                 }
 220         },
 221         // data functions
 222         data : {
 223                 abridged : function(data) {
 224                         var result = [];
 225                         $.each(data.nodeData, function(key, value) {
 226                                 var tr = {};
 227                                 var entry = [];
 228                                 var nodenameentry = value["nodeName"] ? value["nodeName"] : "Click to update";
 229                                 // TODO: Move anchor tag creation to one.lib.form.
 230                                 var aTag = document.createElement("a");
 231                                 aTag.setAttribute("id", encodeURIComponent(value["nodeId"]));
 232                                 aTag.switchDetails = value;
 233                                 aTag.addEventListener("click", one.f.switchmanager.nodesLearnt.modal.initialize.updateNode);
 234                                 aTag.addEventListener("mouseover", function(evt) {
 235                                         evt.target.style.cursor = "pointer";
 236                                 }, false);
 237                                 aTag.innerHTML = nodenameentry;
 238                                 entry.push(aTag);
 239                                 entry.push(value["nodeId"]);
 240                                 entry.push(value["ports"]);
 241                                 tr.entry = entry;
 242                                 result.push(tr);
 243                         });
 244                         return result;
 245                 },
 246                 popout : function(data) {
 247                         var result = [];
 248                         $.each(data.nodeData, function(key, value) {
 249                                 var tr = {};
 250                                 // fill up all the td's
 251                                 var entry = [];
 252                                 var nodenameentry = value["nodeName"] ? value["nodeName"] : "No name provided";
 253                                 entry.push(nodenameentry);
 254                                 entry.push(value["nodeId"]);
 255                                 entry.push(value["tierName"]);
 256                                 entry.push(value["mac"]);
 257                                 entry.push(value["ports"]);
 258                                 entry.push(value["portStatus"]);
 259                                 tr.entry = entry;
 260                                 result.push(tr);
 261                         });
 262                         return result;
 263                 }
 264         }
 265 };
 266
 267 one.f.switchmanager.subnetGatewayConfig = {
 268         id: {
 269                 dashlet: {
 270                         addIPAddress: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_addIP",
 271                         addPorts: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_addPorts",
 272                         removeIPAddress: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_removeIP"
 273                 },
 274                 modal: {
 275                         modal: "one_f_switchmanager_subnetGatewayConfig_id_modal_modal",
 276                         save: "one_f_switchmanager_subnetGatewayConfig_id_modal_save",
 277                         form: {
 278                                 name : "one_f_switchmanager_subnetGatewayConfig_id_modal_form_gatewayname",
 279                                 gatewayIPAddress : "one_f_switchmanager_subnetGatewayConfig_id_modal_form_gatewayipaddress",
 280                                 nodeId: "one_f_switchmanager_subnetGatewayConfig_id_modal_form_nodeid",
 281                                 ports: "one_f_switchmanager_subnetGatewayConfig_id_modal_form_ports"
 282                         }
 283                 }
 284         },
 285         // device ajax calls
 286         dashlet: function($dashlet) {
 287                 one.lib.dashlet.empty($dashlet);
 288                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.subnetGatewayConfig.name));
 289                 // Add gateway IP Address button
 290                 if(one.role < 2) {
 291                         var button = one.lib.dashlet.button.single("Add Gateway IP Address",
 292                                         one.f.switchmanager.subnetGatewayConfig.id.dashlet.addIPAddress, "btn-primary", "btn-mini");
 293                 var $button = one.lib.dashlet.button.button(button);
 294                 $button.click(function() {
 295                         var $modal = one.f.switchmanager.subnetGatewayConfig.modal.initialize.gateway();
 296                     $modal.modal();
 297                 });
 298                         $dashlet.append($button);
 299
 300
 301                         // Delete gateway ip address button
 302                 var button = one.lib.dashlet.button.single("Delete Gateway IP Address(es)",
 303                                 one.f.switchmanager.subnetGatewayConfig.id.dashlet.removeIPAddress, "btn-primary", "btn-mini");
 304                 var $button = one.lib.dashlet.button.button(button);
 305                 $button.click(function() {
 306                         var requestData = {};
 307                         var gatewaysToDelete = [];
 308                         var checkedCheckBoxes = $("input:checked", $(this).closest(".dashlet").find("table"));
 309                         checkedCheckBoxes.each(function(index, value) {
 310                                 gatewaysToDelete.push(checkedCheckBoxes[index].id);
 311                         });
 312                         if(gatewaysToDelete.length > 0) {
 313                                 requestData["gatewaysToDelete"] = gatewaysToDelete.toString();
 314                         var url = one.f.switchmanager.rootUrl + "/subnetGateway/delete";
 315                                 one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
 316                                         if(response.status == true) {
 317                                                 // refresh dashlet by passing dashlet div as param
 318                                 one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
 319                                         } else {
 320                                                 alert(response.message);
 321                                         }
 322                                 });
 323                         }
 324                 });
 325                 $dashlet.append($button);
 326
 327                         // Add Ports button
 328                         var button = one.lib.dashlet.button.single("Add Ports",
 329                                         one.f.switchmanager.subnetGatewayConfig.id.dashlet.addPorts, "btn-primary", "btn-mini");
 330                 var $button = one.lib.dashlet.button.button(button);
 331                 $button.click(function() {
 332                         var $modal = one.f.switchmanager.subnetGatewayConfig.modal.initialize.ports();
 333                     $modal.modal();
 334                 });
 335                         $dashlet.append($button);
 336                 }
 337                 var url = one.f.switchmanager.rootUrl + "/subnets";
 338                 one.f.switchmanager.subnetGatewayConfig.ajax.main(url, {}, function(content) {
 339                         var body = one.f.switchmanager.subnetGatewayConfig.data.devices(content);
 340                         // first column contains checkbox. no need for header
 341                         content.columnNames.splice(0,0," ");
 342                         var $table = one.f.switchmanager.createTable(content.columnNames, body);
 343                         $dashlet.append($table);
 344                 });
 345         },
 346         ajax : {
 347                 main : function(url, requestData, callback) {
 348                         $.getJSON(url, requestData, function(data) {
 349                                 callback(data);
 350                         });
 351                 }
 352         },
 353         registry: {},
 354         modal : {
 355                 initialize: {
 356                         gateway: function() {
 357                                 var h3 = "Add Gateway IP Address";
 358                     var footer = one.f.switchmanager.subnetGatewayConfig.modal.footer();
 359                     var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.modal, h3, "", footer);
 360                     // bind save button
 361                     $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.save, $modal).click(function() {
 362                         one.f.switchmanager.subnetGatewayConfig.modal.save.gateway($modal);
 363                     });
 364                     var $body = one.f.switchmanager.subnetGatewayConfig.modal.body.gateway();
 365                     one.lib.modal.inject.body($modal, $body);
 366                     return $modal;
 367                         },
 368                         ports: function() {
 369                                 var h3 = "Add Ports";
 370                     var footer = one.f.switchmanager.subnetGatewayConfig.modal.footer();
 371                     var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.modal, h3, "", footer);
 372                     // bind save button
 373                     $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.save, $modal).click(function() {
 374                         one.f.switchmanager.subnetGatewayConfig.modal.save.ports($modal);
 375                     });
 376
 377                     // TODO: Change to subnetGateway instead.
 378                     one.f.switchmanager.spanPortConfig.modal.ajax.nodes(function(nodes, nodeports) {
 379                         var $body = one.f.switchmanager.subnetGatewayConfig.modal.body.ports(nodes, nodeports);
 380                         one.lib.modal.inject.body($modal, $body);
 381                     });
 382                     return $modal;
 383                         }
 384                 },
 385                 save: {
 386                         gateway: function($modal) {
 387                                 var result = {};
 388                     result['gatewayName'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.name, $modal).val();
 389                     if(!one.f.switchmanager.validateName(result['gatewayName'])) {
 390                         alert("Gateway name can contain upto 255 characters");
 391                         return;
 392                     }
 393                     result['gatewayIPAddress'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.gatewayIPAddress, $modal).val();
 394                     one.f.switchmanager.subnetGatewayConfig.modal.ajax.gateway(result,
 395                                         function(response) {
 396                                 if(response.status == true) {
 397                                         $modal.modal('hide');
 398                                         one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
 399                                 } else {
 400                                         alert(response.message);
 401                                 }
 402                             });
 403                         },
 404                         ports: function($modal) {
 405                                 var result = {};
 406                                 var gatewayRegistryIndex = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.name, $modal).val();
 407                     result['portsName'] = one.f.switchmanager.subnetGatewayConfig.registry.gateways[gatewayRegistryIndex];
 408                     result['nodeId'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.nodeId, $modal).val();
 409                     result['ports'] = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports, $modal).val();
 410                     if(!result['portsName'] || result['portsName'] == "") {
 411                         alert("No gateway chosen. Cannot add port");
 412                         return;
 413                     }
 414                     if(!result['nodeId'] || result['nodeId'] == "") {
 415                         alert("Please select a node.");
 416                         return;
 417                     }
 418                     if(!result['ports'] || result['ports'] == "") {
 419                         alert("Please choose a port.");
 420                         return;
 421                     }
 422                     one.f.switchmanager.subnetGatewayConfig.modal.ajax.ports(result,
 423                                         function(response) {
 424                                 if(response.status == true) {
 425                                         $modal.modal('hide');
 426                                         one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
 427                                 } else {
 428                                         alert(response.message);
 429                                 }
 430                                 });
 431                         }
 432                 },
 433                 body: {
 434                         gateway: function() {
 435                                 var $form = $(document.createElement('form'));
 436                                 var $fieldset = $(document.createElement('fieldset'));
 437                                 // gateway name
 438                                 var $label = one.lib.form.label("Name");
 439                                 var $input = one.lib.form.input("Name");
 440                                 $input.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.name);
 441                                 $fieldset.append($label).append($input);
 442                                 // gateway IP Mask
 443                                 var $label = one.lib.form.label("Gateway IP Address/Mask");
 444                                 var $input = one.lib.form.input("Gateway IP Address/Mask");
 445                                 $input.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.gatewayIPAddress);
 446                                 $fieldset.append($label).append($input);
 447
 448                                 $form.append($fieldset);
 449                                 return $form;
 450                         },
 451                         ports: function(nodes, nodeports) {
 452                                 var $form = $(document.createElement('form'));
 453                                 var $fieldset = $(document.createElement('fieldset'));
 454                                 // gateways drop down
 455                                 var $label = one.lib.form.label("Gateway Name");
 456                                 var $select = one.lib.form.select.create(one.f.switchmanager.subnetGatewayConfig.registry.gateways);
 457                                 $select.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.name);
 458                                 $select.val($select.find("option:first").val());
 459                                 $fieldset.append($label).append($select);
 460
 461                                 // node ID
 462                                 var $label = one.lib.form.label("Node ID");
 463                                 var $select = one.lib.form.select.create(nodes);
 464                                 $select.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.nodeId);
 465                                 one.lib.form.select.prepend($select, { '' : 'Please Select a Node' });
 466                                 $select.val($select.find("option:first").val());
 467                                 $fieldset.append($label).append($select);
 468
 469                                 // bind onchange
 470                                 $select.change(function() {
 471                                     // retrieve port value
 472                                     var node = $(this).find('option:selected').attr('value');
 473                                     one.f.switchmanager.subnetGatewayConfig.registry['currentNode'] = node;
 474                                     var $ports = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports);
 475                                     var ports = nodeports[node];
 476                                     one.lib.form.select.inject($ports, ports);
 477                                     one.lib.form.select.prepend($ports, { '' : 'Please Select a Port' });
 478                                     $ports.val($ports.find("option:first").val());
 479                                 });
 480
 481                                 // ports
 482                                 var $label = one.lib.form.label("Select Port");
 483                                 var $select = one.lib.form.select.create();
 484                                 $select.attr('id', one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports);
 485                                 $fieldset.append($label).append($select);
 486
 487                                 $form.append($fieldset);
 488                                 return $form;
 489                         }
 490                 },
 491                 ajax: {
 492                         gateway: function(requestData, callback) {
 493                                 $.getJSON(one.f.switchmanager.rootUrl + "/subnetGateway/add", requestData, function(data) {
 494                                         callback(data);
 495                         });
 496                         },
 497                         ports: function(requestData, callback) {
 498                                 $.getJSON(one.f.switchmanager.rootUrl + "/subnetGateway/ports/add", requestData, function(data) {
 499                                         callback(data);
 500                         });
 501                         }
 502                 },
 503                 footer : function() {
 504             var footer = [];
 505             if(one.role < 2) {
 506                  var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.subnetGatewayConfig.id.modal.save, "btn-success", "");
 507                  var $saveButton = one.lib.dashlet.button.button(saveButton);
 508                  footer.push($saveButton);
 509             }
 510             return footer;
 511         }
 512         },
 513         // data functions
 514         data : {
 515                 devices : function(data) {
 516                         var result = [];
 517                         one.f.switchmanager.subnetGatewayConfig.registry.gateways = [];
 518                         $.each(data.nodeData, function(key, value) {
 519                                 var tr = {};
 520                                 // fill up all the td's
 521                                 var subnetConfigObject = $.parseJSON(value["json"]);
 522                                 var nodePorts = subnetConfigObject.nodePorts;
 523                                 var $nodePortsContainer = $(document.createElement("div"));
 524
 525                                 for(var i = 0; i < nodePorts.length; i++) {
 526                                         var nodePort = nodePorts[i];
 527                                         $nodePortsContainer.append(nodePort + " ");
 528                                         // add delete anchor tag to delete ports
 529                                         var aTag = document.createElement("a");
 530                                         aTag.setAttribute("id", encodeURIComponent(nodePort));
 531                                         aTag.gatewayName = value["name"];
 532                                         aTag.addEventListener("click", function(evt) {
 533                                                 var htmlPortAnchor = evt.target;
 534                                                 var requestData = {};
 535                                                 requestData["gatewayName"] = evt.target.gatewayName;
 536                                                 requestData["nodePort"] = decodeURIComponent(evt.target.id);
 537                                                 // make ajax call to delete port
 538                                                 var url = one.f.switchmanager.rootUrl + "/subnetGateway/ports/delete";
 539                                         one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
 540                                                 if(response.status == true) {
 541                                                         // refresh dashlet by passing dashlet div as param
 542                                         one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
 543                                                 } else {
 544                                                         alert(response.message);
 545                                                 }
 546                                         });
 547
 548                                         });
 549                                         aTag.addEventListener("mouseover", function(evt) {
 550                                                 evt.target.style.cursor = "pointer";
 551                                         }, false);
 552                                         aTag.innerHTML = "Delete";
 553                                         $nodePortsContainer.append(aTag);
 554                                         $nodePortsContainer.append("<br/>");
 555                                 }
 556
 557                                 // store gateways in the registry so that they can be used in the add ports popup
 558                                 one.f.switchmanager.subnetGatewayConfig.registry.gateways.push(value["name"]);
 559                                 var entry = [];
 560                                 var checkbox = document.createElement("input");
 561                                 checkbox.setAttribute("type", "checkbox");
 562                                 checkbox.setAttribute("id", value["name"]);
 563                                 entry.push(checkbox);
 564                                 entry.push(value["name"]);
 565                                 entry.push(value["subnet"]);
 566                                 entry.push($nodePortsContainer);
 567                                 tr.entry = entry;
 568                                 result.push(tr);
 569                         });
 570                         return result;
 571                 }
 572         }
 573 }
 574
 575 one.f.switchmanager.staticRouteConfig = {
 576         id: {
 577                 dashlet: {
 578                         add: "one_f_switchmanager_staticRouteConfig_id_dashlet_add",
 579                         remove: "one_f_switchmanager_staticRouteConfig_id_dashlet_remove"
 580                 },
 581                 modal: {
 582                         modal: "one_f_switchmanager_staticRouteConfig_id_modal_modal",
 583                         save: "one_f_switchmanager_staticRouteConfig_id_modal_save",
 584                         form: {
 585                                 routeName : "one_f_switchmanager_staticRouteConfig_id_modal_form_routename",
 586                                 staticRoute : "one_f_switchmanager_staticRouteConfig_id_modal_form_staticroute",
 587                 nextHop : "one_f_switchmanager_staticRouteConfig_id_modal_form_nexthop",
 588                         }
 589                 }
 590         },
 591         dashlet: function($dashlet) {
 592                 one.lib.dashlet.empty($dashlet);
 593
 594                 if(one.role < 2) {
 595                         // Add static route button
 596                         var button = one.lib.dashlet.button.single("Add Static Route",
 597                                         one.f.switchmanager.staticRouteConfig.id.dashlet.add, "btn-primary", "btn-mini");
 598                 var $button = one.lib.dashlet.button.button(button);
 599                 $button.click(function() {
 600                         var $modal = one.f.switchmanager.staticRouteConfig.modal.initialize();
 601                     $modal.modal();
 602                 });
 603                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.staticRouteConfig.name));
 604                 $dashlet.append($button);
 605
 606                 // Delete static route button
 607                 var button = one.lib.dashlet.button.single("Delete Static Route(s)",
 608                                 one.f.switchmanager.staticRouteConfig.id.dashlet.remove, "btn-primary", "btn-mini");
 609                 var $button = one.lib.dashlet.button.button(button);
 610                 $button.click(function() {
 611                         var requestData = {};
 612                         var routesToDelete = [];
 613                         var checkedCheckBoxes = $("input:checked", $(this).closest(".dashlet").find("table"));
 614                         checkedCheckBoxes.each(function(index, value) {
 615                                 routesToDelete.push(checkedCheckBoxes[index].id);
 616                         });
 617                         if(routesToDelete.length > 0) {
 618                                 requestData["routesToDelete"] = routesToDelete.toString();
 619                         var url = one.f.switchmanager.rootUrl + "/staticRoute/delete";
 620                                 one.f.switchmanager.staticRouteConfig.ajax.main(url, requestData, function(response) {
 621                                         if(response.status == true) {
 622                                                 // refresh dashlet by passing dashlet div as param
 623                                 one.f.switchmanager.staticRouteConfig.dashlet($("#left-bottom .dashlet"));
 624                                         } else {
 625                                                 alert(response.message);
 626                                         }
 627                                 });
 628                         }
 629                 });
 630                 $dashlet.append($button);
 631                 }
 632
 633                 var url = one.f.switchmanager.rootUrl + "/staticRoutes";
 634                 one.f.switchmanager.staticRouteConfig.ajax.main(url, {}, function(content) {
 635                         var body = one.f.switchmanager.staticRouteConfig.data.staticRouteConfig(content);
 636                         // first column contains checkbox. no need for header
 637                         content.columnNames.splice(0,0," ");
 638                         var tableHeaders = ['', 'Name', 'Static Route', 'Next Hop Address'];
 639                         var $table = one.f.switchmanager.createTable(tableHeaders, body);
 640                         $dashlet.append($table);
 641                 });
 642         },
 643         // device ajax calls
 644         ajax : {
 645                 main : function(url, requestData, callback) {
 646                         $.getJSON(url, requestData, function(data) {
 647                                 callback(data);
 648                         });
 649                 }
 650         },
 651         registry: {},
 652         modal : {
 653                 initialize: function() {
 654                         var h3 = "Add Static Route";
 655             var footer = one.f.switchmanager.staticRouteConfig.modal.footer();
 656             var $modal = one.lib.modal.spawn(one.f.switchmanager.staticRouteConfig.id.modal.modal, h3, "", footer);
 657             // bind save button
 658             $('#' + one.f.switchmanager.staticRouteConfig.id.modal.save, $modal).click(function() {
 659                 one.f.switchmanager.staticRouteConfig.modal.save($modal);
 660             });
 661             var $body = one.f.switchmanager.staticRouteConfig.modal.body();
 662             one.lib.modal.inject.body($modal, $body);
 663             return $modal;
 664                 },
 665                 save: function($modal) {
 666                         var result = {};
 667             result['routeName'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.routeName, $modal).val();
 668             result['staticRoute'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.staticRoute, $modal).val();
 669             result['nextHop'] = $('#' + one.f.switchmanager.staticRouteConfig.id.modal.form.nextHop, $modal).val();
 670                         one.f.switchmanager.staticRouteConfig.modal.ajax.staticRouteConfig(result, function(response) {
 671                         if(response.status == true) {
 672                                 $modal.modal('hide');
 673                                 // refresh dashlet by passing dashlet div as param
 674                                 one.f.switchmanager.staticRouteConfig.dashlet($("#left-bottom .dashlet"));
 675                         } else {
 676                                 // TODO: Show error message in a error message label instead.
 677                                 alert(response.message);
 678                         }
 679                     });
 680                 },
 681                 body: function() {
 682                         var $form = $(document.createElement('form'));
 683                         var $fieldset = $(document.createElement('fieldset'));
 684                         // static route name
 685                         var $label = one.lib.form.label("Name");
 686                         var $input = one.lib.form.input("Name");
 687                         $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.routeName);
 688                         $fieldset.append($label).append($input);
 689                         // static route IP Mask
 690                         var $label = one.lib.form.label("Static Route");
 691                         var $input = one.lib.form.input("Static Route");
 692                         $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.staticRoute);
 693                         $fieldset.append($label).append($input);
 694                         // static route IP Mask
 695                         var $label = one.lib.form.label("Next Hop");
 696                         var $input = one.lib.form.input("Next Hop");
 697                         $input.attr('id', one.f.switchmanager.staticRouteConfig.id.modal.form.nextHop);
 698                         $fieldset.append($label).append($input);
 699                         // return
 700                         $form.append($fieldset);
 701                         return $form;
 702                 },
 703                 ajax: {
 704                         staticRouteConfig: function(requestData, callback) {
 705                                 $.getJSON(one.f.switchmanager.rootUrl + "/staticRoute/add", requestData, function(data) {
 706                                         callback(data);
 707                                 });
 708                         }
 709                 },
 710                 data : {
 711
 712         },
 713                 footer : function() {
 714             var footer = [];
 715             if (one.role < 2) {
 716                  var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.staticRouteConfig.id.modal.save, "btn-success", "");
 717                  var $saveButton = one.lib.dashlet.button.button(saveButton);
 718                  footer.push($saveButton);
 719             }
 720             return footer;
 721         }
 722         },
 723         // data functions
 724         data : {
 725                 staticRouteConfig : function(data) {
 726                         var result = [];
 727                         $.each(data.nodeData, function(key, value) {
 728                                 var tr = {};
 729                                 // fill up all the td's
 730                                 var entry = [];
 731                                 var checkbox = document.createElement("input");
 732                                 checkbox.setAttribute("type", "checkbox");
 733                                 checkbox.setAttribute("id", value["name"]);
 734                                 entry.push(checkbox);
 735                                 entry.push(value["name"]);
 736                                 entry.push(value["staticRoute"]);
 737                                 entry.push(value["nextHop"]);
 738                                 tr.entry = entry;
 739                                 result.push(tr);
 740                         });
 741                         return result;
 742                 }
 743         }
 744 }
 745
 746 one.f.switchmanager.spanPortConfig = {
 747         id: {
 748                 dashlet: {
 749                         add: "one_f_switchmanager_spanPortConfig_id_dashlet_add",
 750                         remove: "one_f_switchmanager_spanPortConfig_id_dashlet_remove"
 751                 },
 752                 modal: {
 753                         modal: "one_f_switchmanager_spanPortConfig_id_modal_modal",
 754                         save: "one_f_switchmanager_spanPortConfig_id_modal_save",
 755                         form: {
 756                                 name : "one_f_switchmanager_spanPortConfig_id_modal_form_name",
 757                                 nodes : "one_f_switchmanager_spanPortConfig_id_modal_form_nodes",
 758                 port : "one_f_switchmanager_spanPortConfig_id_modal_form_port",
 759                         }
 760                 }
 761         },
 762         dashlet: function($dashlet) {
 763                 one.lib.dashlet.empty($dashlet);
 764                 if(one.role < 2) {
 765
 766                         // Add span port button
 767                         var button = one.lib.dashlet.button.single("Add Span Port", one.f.switchmanager.spanPortConfig.id.dashlet.add, "btn-primary", "btn-mini");
 768                         var $button = one.lib.dashlet.button.button(button);
 769
 770                         $button.click(function() {
 771                                 var $modal = one.f.switchmanager.spanPortConfig.modal.initialize();
 772                                 $modal.modal();
 773                         });
 774                         $dashlet.append(one.lib.dashlet.header(one.f.dashlet.spanPortConfig.name));
 775                         $dashlet.append($button);
 776
 777                         // Delete span port button
 778                         var button = one.lib.dashlet.button.single("Delete SPAN Port(s)",
 779                                         one.f.switchmanager.spanPortConfig.id.dashlet.remove, "btn-primary", "btn-mini");
 780                         var $button = one.lib.dashlet.button.button(button);
 781                         $button.click(function() {
 782
 783                                 var checkedCheckBoxes = $("input:checked", $(this).closest(".dashlet").find("table"));
 784                                 if(checkedCheckBoxes.length > 0) {
 785                                         var spanPortsToDelete = "";
 786                                         checkedCheckBoxes.each(function(index, value) {
 787                                                 spanPortsToDelete += checkedCheckBoxes[index].spanPort + "###";
 788                                         });
 789
 790                                         var requestData = {};
 791                                         requestData["spanPortsToDelete"] = spanPortsToDelete;
 792                                         var url = one.f.switchmanager.rootUrl + "/spanPorts/delete";
 793                                         one.f.switchmanager.spanPortConfig.ajax.main(url, requestData, function(response) {
 794                                                 if(response.status == true) {
 795                                                         // refresh dashlet by passing dashlet div as param
 796                                                         one.f.switchmanager.spanPortConfig.dashlet($("#right-bottom .dashlet"));
 797                                                 } else {
 798                                                         alert(response.message);
 799                                                 }
 800                                         });
 801                                 }
 802                         });
 803                         $dashlet.append($button);
 804                 }
 805
 806         //populate table in dashlet
 807                 var url = one.f.switchmanager.rootUrl + "/spanPorts";
 808                 one.f.switchmanager.spanPortConfig.ajax.main(url, {}, function(content) {
 809                         var body = one.f.switchmanager.spanPortConfig.data.devices(content);
 810                         // first column contains the checkbox. no header required.
 811                         content.columnNames.splice(0,0," ");
 812                         var $table = one.f.switchmanager.createTable(content.columnNames, body);
 813                         $dashlet.append($table);
 814                 });
 815         },
 816         // device ajax calls
 817         ajax : {
 818                 main : function(url, requestData, callback) {
 819                         $.getJSON(url, requestData, function(data) {
 820                                 callback(data);
 821                         });
 822                 }
 823         },
 824         registry: {},
 825         modal : {
 826                 initialize: function() {
 827                         var h3 = "Add SPAN Port";
 828             var footer = one.f.switchmanager.spanPortConfig.modal.footer();
 829             var $modal = one.lib.modal.spawn(one.f.switchmanager.spanPortConfig.id.modal.modal, h3, "", footer);
 830             // bind save button
 831             $('#' + one.f.switchmanager.spanPortConfig.id.modal.save, $modal).click(function() {
 832                 one.f.switchmanager.spanPortConfig.modal.save($modal);
 833             });
 834
 835             one.f.switchmanager.spanPortConfig.modal.ajax.nodes(function(nodes, nodeports) {
 836                 var $body = one.f.switchmanager.spanPortConfig.modal.body(nodes, nodeports);
 837                 one.lib.modal.inject.body($modal, $body);
 838             });
 839             return $modal;
 840                 },
 841                 save: function($modal) {
 842                         var result = {};
 843             result['nodeId'] = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.nodes, $modal).val();
 844             result['spanPort'] = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.port, $modal).val();
 845                         one.f.switchmanager.spanPortConfig.modal.ajax.saveSpanPortConfig(result,
 846                                 function(response) {
 847                                         if(response.status == true) {
 848                                                 $modal.modal('hide');
 849                                                 one.f.switchmanager.spanPortConfig.dashlet($("#right-bottom .dashlet"));
 850                                         } else {
 851                                                 alert(response.message);
 852                                         }
 853
 854                     });
 855                 },
 856                 body: function(nodes, nodeports) {
 857                         var $form = $(document.createElement('form'));
 858                         var $fieldset = $(document.createElement('fieldset'));
 859                         // node
 860                         var $label = one.lib.form.label("Node");
 861                         var $select = one.lib.form.select.create(nodes);
 862                         one.lib.form.select.prepend($select, { '' : 'Please Select a Node' });
 863                         $select.attr('id', one.f.switchmanager.spanPortConfig.id.modal.form.nodes);
 864
 865                         // bind onchange
 866                         $select.change(function() {
 867                             // retrieve port value
 868                             var node = $(this).find('option:selected').attr('value');
 869                             one.f.switchmanager.spanPortConfig.registry['currentNode'] = node;
 870                             var $ports = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.port);
 871                             var ports = nodeports[node];
 872                             one.lib.form.select.inject($ports, ports);
 873                         });
 874
 875             $fieldset.append($label).append($select);
 876                         // input port
 877                         var $label = one.lib.form.label("Input Port");
 878                         var $select = one.lib.form.select.create();
 879                         $select.attr('id', one.f.switchmanager.spanPortConfig.id.modal.form.port);
 880                         $fieldset.append($label).append($select);
 881
 882                         // return
 883                         $form.append($fieldset);
 884                         return $form;
 885                 },
 886                 ajax: {
 887                         nodes: function(callback) {
 888                                 $.getJSON(one.f.switchmanager.rootUrl + "/nodeports", function(data) {
 889                     var nodes = one.f.switchmanager.spanPortConfig.modal.data.nodes(data);
 890                     var nodeports = data;
 891                     one.f.switchmanager.spanPortConfig.registry['nodeports'] = nodeports;
 892                     callback(nodes, nodeports);
 893                 });
 894                         },
 895                         saveSpanPortConfig: function(requestData, callback) {
 896                                 var resource = {};
 897                                 resource["jsonData"] = JSON.stringify(requestData);
 898                                 $.getJSON(one.f.switchmanager.rootUrl + "/spanPorts/add", resource, function(data) {
 899                                         callback(data);
 900                                 });
 901                         }
 902                 },
 903                 data : {
 904             nodes : function(data) {
 905                 result = {};
 906                 $.each(data, function(key, value) {
 907                     result[key] = key;
 908                 });
 909                 return result;
 910             }
 911         },
 912                 footer : function() {
 913             var footer = [];
 914             if (one.role < 2) {
 915                 var saveButton = one.lib.dashlet.button.single("Save", one.f.switchmanager.spanPortConfig.id.modal.save, "btn-success", "");
 916                 var $saveButton = one.lib.dashlet.button.button(saveButton);
 917                 footer.push($saveButton);
 918             }
 919             return footer;
 920         }
 921         },
 922         // data functions
 923         data : {
 924                 devices : function(data) {
 925                         var result = [];
 926                         $.each(data.nodeData, function(key, value) {
 927                                 var tr = {};
 928                                 // fill up all the td's
 929                                 var entry = [];
 930                                 var checkbox = document.createElement("input");
 931                                 checkbox.setAttribute("type", "checkbox");
 932                                 checkbox.spanPort = value.json;
 933                                 entry.push(checkbox);
 934                                 entry.push(value["nodeName"]);
 935                                 entry.push(value["spanPort"]);
 936                                 tr.entry = entry;
 937                                 result.push(tr);
 938                         });
 939                         return result;
 940                 }
 941         }
 942 }
 943
 944 /** INIT **/
 945 // populate nav tabs
 946 $(one.f.menu.left.top).each(function(index, value) {
 947     var $nav = $(".nav", "#left-top");
 948     one.main.page.dashlet($nav, value);
 949 });
 950
 951 $(one.f.menu.left.bottom).each(function(index, value) {
 952     var $nav = $(".nav", "#left-bottom");
 953     one.main.page.dashlet($nav, value);
 954 });
 955
 956 $(one.f.menu.right.bottom).each(function(index, value) {
 957     var $nav = $(".nav", "#right-bottom");
 958     one.main.page.dashlet($nav, value);
 959 });
 960
 961 one.f.addPopOut = function() {
 962         $img1 = $(document.createElement("img"));
 963         $img1.attr("src", "/img/Expand16T.png");
 964         $img1.attr("style", "float: right;");
 965         $img1.hover(function() {
 966                 $img1.css("cursor", "pointer");
 967         });
 968         $img1.click(function() {
 969                 var $modal = one.f.switchmanager.nodesLearnt.modal.initialize.popout();
 970         $modal.css('width', 'auto');
 971                 $modal.css('margin-left', '-40%');
 972         $modal.modal();
 973         });
 974         $dash1 = $($("#left-top .nav")[0]);
 975         $dash1.append($img1);
 976 };
 977 one.f.addPopOut();
 978
 979 // bind dashlet nav
 980 $('.dash .nav a', '#main').click(function() {
 981     // de/activation
 982     var $li = $(this).parent();
 983     var $ul = $li.parent();
 984     one.lib.nav.unfocus($ul);
 985     $li.addClass('active');
 986     // clear respective dashlet
 987     var $dashlet = $ul.parent().find('.dashlet');
 988     one.lib.dashlet.empty($dashlet);
 989
 990     // callback based on menu
 991     var id = $(this).attr('id');
 992     var menu = one.f.dashlet;
 993     switch (id) {
 994         case menu.nodesLearnt.id:
 995                 one.f.switchmanager.nodesLearnt.dashlet($dashlet);
 996             break;
 997         case menu.staticRouteConfig.id:
 998                 one.f.switchmanager.staticRouteConfig.dashlet($dashlet);
 999             break;
1000         case menu.subnetGatewayConfig.id:
1001                 one.f.switchmanager.subnetGatewayConfig.dashlet($dashlet);
1002             break;
1003         case menu.spanPortConfig.id:
1004                 one.f.switchmanager.spanPortConfig.dashlet($dashlet);
1005             break;
1006     };
1007 });
1008
1009 // activate first tab on each dashlet
1010 $('.dash .nav').each(function(index, value) {
1011     $($(value).find('li')[0]).find('a').click();
1012 });