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