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