Merge "Reorder public/private modifiers as per JLS. (fixes sonar warnings)"
[controller.git] / opendaylight / web / devices / src / main / resources / js / page.js
index b90e5cbfa03c786e504a78f0ce8a0a003a09d8ce..2488d06d0cae7745a4efc58c8d8a42ff1f565271 100644 (file)
@@ -14,7 +14,7 @@ one.f = {};
 one.f.dashlet = {
     nodesLearnt : {
         id : 'nodesLearnt',
-        name : 'Nodes Learnt'
+        name : 'Nodes Learned'
     },
     staticRouteConfig : {
         id : 'staticRouteConfig',
@@ -150,7 +150,7 @@ one.f.switchmanager.nodesLearnt = {
                 });
             },
             popout: function() {
-                var h3 = "Nodes Learnt";
+                var h3 = "Nodes Learned";
                 var footer = one.f.switchmanager.nodesLearnt.modal.footer.popout();
                 var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.modal, h3, "", footer);
                 var $body = one.f.switchmanager.nodesLearnt.modal.body.popout($modal);
@@ -321,9 +321,14 @@ one.f.switchmanager.nodesLearnt = {
                         ' privilege=' + data.privilege + '>' + nodeNameEntry + '</a>';
                         
                         var ports = item.ports;
+                        var portsMatch = ports.match(/<\/span>/g);
+                        var portsLength = 0;
+                        if (portsMatch != null) {
+                            portsLength = portsMatch.length;
+                        }
                         item.ports = '<span class="nodePorts" style="cursor:pointer;color: #08c" ports='+encodeURIComponent(JSON.stringify(item.ports)) + ' nodeId=' + item.nodeId 
                             + ' nodeName=' + nodeName  
-                            + '>' + ports.match(/<\/span>/g).length+'</span>';
+                            + '>' + portsLength +'</span>';
                     }); 
                     },
                     delay: 0
@@ -364,9 +369,14 @@ one.f.switchmanager.nodesLearnt = {
                     formatter: function(items) {
                         $.each(items, function (index, item) {
                             var ports = item.ports;
+                            var portsMatch = ports.match(/<\/span>/g);
+                            var portsLength = 0;
+                            if (portsMatch != null) {
+                                portsLength = portsMatch.length;
+                            }
                             item.ports = '<span class="nodePorts" style="cursor: pointer;color: #08c" ports='+encodeURIComponent(JSON.stringify(item.ports)) + ' nodeId=' + item.nodeId 
                                 + ' nodeName=' + item.nodeName  
-                                + '>' + ports.match(/<\/span>/g).length+'</span>';
+                                + '>' + portsLength +'</span>';
                         }); 
                     },
                     delay: 0
@@ -449,11 +459,15 @@ one.f.switchmanager.subnetGatewayConfig = {
             addIPAddress: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_addIP",
             addPorts: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_addPorts",
             removeIPAddress: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_removeIP",
-            datagrid: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_datagrid"
+            datagrid: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_datagrid",
+            selectAll: "one_f_switchmanager_subnetGatewayConfig_id_dashlet_selectAll"
         }, 
         modal: {
             modal: "one_f_switchmanager_subnetGatewayConfig_id_modal_modal",
+            ports : "one_f_switchmanager_subnetGatewayConfig_id_modal_ports",
             save: "one_f_switchmanager_subnetGatewayConfig_id_modal_save",
+            remove: "one_f_switchmanager_subnetGatewayConfig_id_modal_remove",
+            cancel: "one_f_switchmanager_subnetGatewayConfig_id_modal_cancel",
             form: {
                 name : "one_f_switchmanager_subnetGatewayConfig_id_modal_form_gatewayname",
                 gatewayIPAddress : "one_f_switchmanager_subnetGatewayConfig_id_modal_form_gatewayipaddress",
@@ -481,28 +495,19 @@ one.f.switchmanager.subnetGatewayConfig = {
                 $dashlet.append($button);
 
                 // Delete gateway ip address button
-                var button = one.lib.dashlet.button.single("Delete Gateway IP Address(es)",
-                    one.f.switchmanager.subnetGatewayConfig.id.dashlet.removeIPAddress, "btn-primary", "btn-mini");
+                var button = one.lib.dashlet.button.single("Remove Gateway IP Address",
+                one.f.switchmanager.subnetGatewayConfig.id.dashlet.removeIPAddress, "btn-danger", "btn-mini");
                 var $button = one.lib.dashlet.button.button(button);
                 $button.click(function() {
-                    var requestData = {};
                     var gatewaysToDelete = [];
                     var checkedCheckBoxes = $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).find("tbody input:checked")
                     checkedCheckBoxes.each(function(index, value) {
                         gatewaysToDelete.push(checkedCheckBoxes[index].id);
                     });
-                    if (gatewaysToDelete.length > 0) {
-                        requestData["gatewaysToDelete"] = gatewaysToDelete.toString();
-                        var url = one.f.switchmanager.rootUrl + "/subnetGateway/delete";
-                        one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
-                            if (response.status == true) {
-                                // refresh dashlet by passing dashlet div as param
-                                one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
-                            } else {
-                                alert(response.message);
-                            }
-                        });
+                    if (checkedCheckBoxes.size() === 0) {
+                        return false;
                     }
+                    one.f.switchmanager.subnetGatewayConfig.modal.removeMultiple.dialog(gatewaysToDelete)
                 });
                 $dashlet.append($button);
 
@@ -524,7 +529,25 @@ one.f.switchmanager.subnetGatewayConfig = {
                 }, "table-striped table-condensed");
             $dashlet.append($gridHTML);
             var dataSource = one.f.switchmanager.subnetGatewayConfig.data.devicesgrid(content);
-            $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource});
+            $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
+            .on("loaded", function() {
+                $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll).click(function() {
+                    $("#" + one.f.switchmanager.subnetGatewayConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
+                        $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll).is(':checked'));
+                });
+                $(".subnetGatewayConfig").click(function(e){
+                    if (!$('.subnetGatewayConfig[type=checkbox]:not(:checked)').length) {
+                        $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll)
+                            .prop("checked",
+                          true);
+                    } else {
+                        $("#"+one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll)
+                            .prop("checked",
+                         false);
+                    }
+                    e.stopPropagation();
+                });
+             });
         });
     },
     ajax : {
@@ -552,7 +575,7 @@ one.f.switchmanager.subnetGatewayConfig = {
             ports: function() {
                 var h3 = "Add Ports";
                 var footer = one.f.switchmanager.subnetGatewayConfig.modal.footer();
-                var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.modal, h3, "", footer);
+                var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.ports, h3, "", footer);
                 // bind save button
                 $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.save, $modal).click(function() {
                     one.f.switchmanager.subnetGatewayConfig.modal.save.ports($modal);
@@ -657,7 +680,11 @@ one.f.switchmanager.subnetGatewayConfig = {
                     one.f.switchmanager.subnetGatewayConfig.registry['currentNode'] = node;
                     var $ports = $('#' + one.f.switchmanager.subnetGatewayConfig.id.modal.form.ports);
                     var ports = nodeports[node];
-                    one.lib.form.select.inject($ports, ports);
+                    var options = {};
+                    $(ports).each(function(idx, val) {
+                        options[val.internalPortName] = val.portName+' ('+val.portId+')'; 
+                    });
+                    one.lib.form.select.inject($ports, options);
                     one.lib.form.select.prepend($ports, { '' : 'Please Select a Port' });
                     $ports.val($ports.find("option:first").val());
                 });
@@ -690,6 +717,64 @@ one.f.switchmanager.subnetGatewayConfig = {
             var $saveButton = one.lib.dashlet.button.button(saveButton);
             footer.push($saveButton);
             return footer;
+        },
+        removeMultiple: {
+            dialog: function(gatewaysToDelete) {
+                var h3 = 'Remove Gateway IP Address';
+                
+                var footer = one.f.switchmanager.subnetGatewayConfig.modal.removeMultiple.footer();
+                var $body = one.f.switchmanager.subnetGatewayConfig.modal.removeMultiple.body(gatewaysToDelete);
+                var $modal = one.lib.modal.spawn(one.f.switchmanager.subnetGatewayConfig.id.modal.modal, h3, $body, footer);
+
+                // bind close button
+                $('#'+one.f.switchmanager.subnetGatewayConfig.id.modal.cancel, $modal).click(function() {
+                    $modal.modal('hide');
+                });
+
+                // bind remove rule button
+                $('#'+one.f.switchmanager.subnetGatewayConfig.id.modal.remove, $modal).click(this, function(e) {
+                    var requestData = {};
+                    if (gatewaysToDelete.length > 0) {
+                        requestData["gatewaysToDelete"] = gatewaysToDelete.toString();
+                        var url = one.f.switchmanager.rootUrl + "/subnetGateway/delete";
+                        one.f.switchmanager.subnetGatewayConfig.ajax.main(url, requestData, function(response) {
+                            $modal.modal('hide');
+                            if (response.status == true) {
+                                // refresh dashlet by passing dashlet div as param 
+                                one.lib.alert("Gateway IP Address(es) successfully removed");
+                            } else {
+                                alert(response.message);
+                            }
+                            one.f.switchmanager.subnetGatewayConfig.dashlet($("#right-bottom .dashlet"));
+                        });
+                    }
+                });
+                $modal.modal();
+            },
+            footer : function() {
+                var footer = [];
+                var remove = one.lib.dashlet.button.single('Remove Gateway IP Address',one.f.switchmanager.subnetGatewayConfig.id.modal.remove, 'btn-danger', '');
+                var $remove = one.lib.dashlet.button.button(remove);
+                footer.push($remove);
+
+                var cancel = one.lib.dashlet.button.single('Cancel', one.f.switchmanager.subnetGatewayConfig.id.modal.cancel, '', '');
+                var $cancel = one.lib.dashlet.button.button(cancel);
+                footer.push($cancel);
+
+                return footer;
+            },
+            body : function (gatewayList) {
+                var $p = $(document.createElement('p'));
+                var p = 'Remove the following Gateway IP Address(es)?';
+                //creata a BS label for each rule and append to list
+                $(gatewayList).each(function(){
+                    var $span = $(document.createElement('span'));
+                    $span.append(this);
+                    p += '<br/>' + $span[0].outerHTML;
+                });
+                $p.append(p);
+                return $p;
+            }
         }
     },
     // data functions
@@ -700,7 +785,8 @@ one.f.switchmanager.subnetGatewayConfig = {
                     columns: [
                         {
                             property: 'selector',
-                            label: ' ',
+                            label: "<input type='checkbox'  id='"
+                                +one.f.switchmanager.subnetGatewayConfig.id.dashlet.selectAll+"'/>",
                             sortable: false
                         },
                         {
@@ -715,24 +801,24 @@ one.f.switchmanager.subnetGatewayConfig = {
                         },
                         {
                             property: 'nodePorts',
-                            label: 'Node/Ports',
+                            label: 'Ports',
                             sortable: false
                         }
                     ],
                     data: data.nodeData,
                     formatter: function(items) {
                         $.each(items, function(index, tableRow) {
-                            tableRow["selector"] = '<input type="checkbox" id=' + tableRow["name"] + '></input>';
+                            tableRow["selector"] = '<input type="checkbox" class="subnetGatewayConfig" id=' 
+                                + tableRow["name"] + '></input>';
                             var json = tableRow["nodePorts"];
                             var nodePorts = JSON.parse(json);
                             var nodePortHtml = "<div>";
                             $.each(nodePorts, function(index, nodePort) {
-                                var nodePortID = nodePort["nodeId"] + "/" + nodePort["nodePortId"]; 
-                                nodePortHtml += nodePort["nodeName"] + " / " + nodePort["nodePortName"];
+                                nodePortHtml += nodePort["nodePortName"] + " @ " + nodePort["nodeName"];
                                 nodePortHtml += "&nbsp;";
-                                nodePortHtml += '<a href="#" id=' + encodeURIComponent(nodePortID) + 
+                                nodePortHtml += '<a href="#" id=' + encodeURIComponent(nodePort["nodePortId"]) + 
                                     ' gatewayName=' + tableRow["name"] + 
-                                    ' onclick="javascript:one.f.switchmanager.subnetGatewayConfig.actions.deleteNodePort(this);">Delete</a>';
+                                    ' onclick="javascript:one.f.switchmanager.subnetGatewayConfig.actions.deleteNodePort(this);">Remove</a>';
                                 nodePortHtml += "<br/>";
                             });
                             nodePortHtml += "</div>";
@@ -786,7 +872,7 @@ one.f.switchmanager.subnetGatewayConfig = {
                     aTag.addEventListener("mouseover", function(evt) {
                         evt.target.style.cursor = "pointer";
                     }, false);
-                    aTag.innerHTML = "Delete";
+                    aTag.innerHTML = "Remove";
                     $nodePortsContainer.append(aTag);
                     $nodePortsContainer.append("<br/>");
                 }
@@ -831,11 +917,14 @@ one.f.switchmanager.staticRouteConfig = {
         dashlet: {
             add: "one_f_switchmanager_staticRouteConfig_id_dashlet_add",
             remove: "one_f_switchmanager_staticRouteConfig_id_dashlet_remove",
-            datagrid: "one_f_switchmanager_staticRouteConfig_id_dashlet_datagrid"
+            datagrid: "one_f_switchmanager_staticRouteConfig_id_dashlet_datagrid",
+            selectAll: "one_f_switchmanager_staticRouteConfig_id_dashlet_selectAll"
         }, 
         modal: {
             modal: "one_f_switchmanager_staticRouteConfig_id_modal_modal",
             save: "one_f_switchmanager_staticRouteConfig_id_modal_save",
+            cancel: "one_f_switchmanager_staticRouteConfig_id_modal_cancel",
+            remove: "one_f_switchmanager_staticRouteConfig_id_modal_remove",
             form: {
                 routeName : "one_f_switchmanager_staticRouteConfig_id_modal_form_routename",
                 staticRoute : "one_f_switchmanager_staticRouteConfig_id_modal_form_staticroute",
@@ -860,28 +949,18 @@ one.f.switchmanager.staticRouteConfig = {
                 $dashlet.append($button);
 
                 // Delete static route button
-                var button = one.lib.dashlet.button.single("Delete Static Route(s)", one.f.switchmanager.staticRouteConfig.id.dashlet.remove, "btn-primary", "btn-mini");
+                var button = one.lib.dashlet.button.single("Remove Static Route", one.f.switchmanager.staticRouteConfig.id.dashlet.remove, "btn-danger", "btn-mini");
                 var $button = one.lib.dashlet.button.button(button);
                 $button.click(function() {
-                    var requestData = {};
                     var routesToDelete = [];
-                    //var checkedCheckBoxes = $("input:checked", $(this).closest(".dashlet").find("table"));
                     var checkedCheckBoxes = $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).find("tbody input:checked");
                     checkedCheckBoxes.each(function(index, value) {
                         routesToDelete.push(checkedCheckBoxes[index].id);
                     });
-                    if (routesToDelete.length > 0) {
-                        requestData["routesToDelete"] = routesToDelete.toString();
-                        var url = one.f.switchmanager.rootUrl + "/staticRoute/delete";
-                        one.f.switchmanager.staticRouteConfig.ajax.main(url, requestData, function(response) {
-                            if (response.status == true) {
-                                // refresh dashlet by passing dashlet div as param
-                                one.f.switchmanager.staticRouteConfig.dashlet($("#left-bottom .dashlet"));
-                            } else {
-                                alert(response.message);
-                            }
-                        });
+                    if (checkedCheckBoxes.size() === 0) {
+                        return false;
                     }
+                    one.f.switchmanager.staticRouteConfig.modal.removeMultiple.dialog(routesToDelete);
                 });
                 $dashlet.append($button);
             }
@@ -893,7 +972,25 @@ one.f.switchmanager.staticRouteConfig = {
                 }, "table-striped table-condensed");
             $dashlet.append($gridHTML);
             var dataSource = one.f.switchmanager.staticRouteConfig.data.staticRouteConfigGrid(content);
-            $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource});
+            $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
+            .on("loaded", function() {
+                $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll).click(function() {
+                    $("#" + one.f.switchmanager.staticRouteConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
+                        $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll).is(':checked'));
+                });
+                $(".staticRoute").click(function(e){
+                    if (!$('.staticRoute[type=checkbox]:not(:checked)').length) {
+                        $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll)
+                            .prop("checked",
+                          true);
+                    } else {
+                        $("#"+one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll)
+                            .prop("checked",
+                         false);
+                    }
+                    e.stopPropagation();
+                });
+             });
         });
     },
     // device ajax calls
@@ -972,6 +1069,64 @@ one.f.switchmanager.staticRouteConfig = {
             var $saveButton = one.lib.dashlet.button.button(saveButton);
             footer.push($saveButton);
             return footer;
+        },
+        removeMultiple: {
+            dialog: function(routesToDelete) {
+                var h3 = 'Remove Static Route';
+                
+                var footer = one.f.switchmanager.staticRouteConfig.modal.removeMultiple.footer();
+                var $body = one.f.switchmanager.staticRouteConfig.modal.removeMultiple.body(routesToDelete);
+                var $modal = one.lib.modal.spawn(one.f.switchmanager.staticRouteConfig.id.modal.modal, h3, $body, footer);
+
+                // bind close button
+                $('#'+one.f.switchmanager.staticRouteConfig.id.modal.cancel, $modal).click(function() {
+                    $modal.modal('hide');
+                });
+
+                // bind remove rule button
+                $('#'+one.f.switchmanager.staticRouteConfig.id.modal.remove, $modal).click(this, function(e) {
+                    if (routesToDelete.length > 0) {
+                        var requestData = {};
+                        requestData["routesToDelete"] = routesToDelete.toString();
+                        var url = one.f.switchmanager.rootUrl + "/staticRoute/delete";
+                        one.f.switchmanager.staticRouteConfig.ajax.main(url, requestData, function(response) {
+                            $modal.modal('hide');
+                            if (response.status == true) {
+                                // refresh dashlet by passing dashlet div as param 
+                                one.lib.alert("Static Route(s) successfully removed");
+                            } else {
+                                alert(response.message);
+                            }
+                            one.f.switchmanager.staticRouteConfig.dashlet($("#left-bottom .dashlet"));
+                        });
+                    }
+                });
+                $modal.modal();
+            },
+            footer : function() {
+                var footer = [];
+                var remove = one.lib.dashlet.button.single('Remove Static Route',one.f.switchmanager.staticRouteConfig.id.modal.remove, 'btn-danger', '');
+                var $remove = one.lib.dashlet.button.button(remove);
+                footer.push($remove);
+
+                var cancel = one.lib.dashlet.button.single('Cancel', one.f.switchmanager.staticRouteConfig.id.modal.cancel, '', '');
+                var $cancel = one.lib.dashlet.button.button(cancel);
+                footer.push($cancel);
+
+                return footer;
+            },
+            body : function (staticRouteList) {
+                var $p = $(document.createElement('p'));
+                var p = 'Remove the following Static Route(s)?';
+                //creata a BS label for each rule and append to list
+                $(staticRouteList).each(function(){
+                    var $span = $(document.createElement('span'));
+                    $span.append(this);
+                    p += '<br/>' + $span[0].outerHTML;
+                });
+                $p.append(p);
+                return $p;
+            }
         }
     },
     // data functions
@@ -981,7 +1136,8 @@ one.f.switchmanager.staticRouteConfig = {
                     columns: [
                         {
                             property: 'selector',
-                            label: ' ',
+                            label: "<input type='checkbox'  id='"
+                                +one.f.switchmanager.staticRouteConfig.id.dashlet.selectAll+"'/>",
                             sortable: false
                         },
                         {
@@ -1003,7 +1159,7 @@ one.f.switchmanager.staticRouteConfig = {
                     data: data.nodeData,
                     formatter: function(items) {
                         $.each(items, function(index, item) {
-                            item["selector"] = '<input type="checkbox" id=' + item["name"] + '></input>';
+                            item["selector"] = '<input type="checkbox" class="staticRoute" id=' + item["name"] + '></input>';
                         });
 
                     },
@@ -1037,11 +1193,14 @@ one.f.switchmanager.spanPortConfig = {
         dashlet: {
             add: "one_f_switchmanager_spanPortConfig_id_dashlet_add",
             remove: "one_f_switchmanager_spanPortConfig_id_dashlet_remove",
-            datagrid: "one_f_switchmanager_spanPortConfig_id_dashlet_datagrid"
+            datagrid: "one_f_switchmanager_spanPortConfig_id_dashlet_datagrid",
+            selectAllFlows: "one_f_switchmanager_spanPortConfig_id_dashlet_selectAllFlows"
         }, 
         modal: {
             modal: "one_f_switchmanager_spanPortConfig_id_modal_modal",
             save: "one_f_switchmanager_spanPortConfig_id_modal_save",
+            cancel: "one_f_switchmanager_spanPortConfig_id_modal_cancel",
+            remove: "one_f_switchmanager_spanPortConfig_id_modal_remove",
             form: {
                 name : "one_f_switchmanager_spanPortConfig_id_modal_form_name",
                 nodes : "one_f_switchmanager_spanPortConfig_id_modal_form_nodes",
@@ -1070,29 +1229,24 @@ one.f.switchmanager.spanPortConfig = {
                 $dashlet.append($button);
 
                 // Delete span port button
-                var button = one.lib.dashlet.button.single("Delete SPAN Port(s)", one.f.switchmanager.spanPortConfig.id.dashlet.remove, "btn-primary", "btn-mini");
+                var button = one.lib.dashlet.button.single("Remove SPAN Port", one.f.switchmanager.spanPortConfig.id.dashlet.remove, "btn-danger", "btn-mini");
                 var $button = one.lib.dashlet.button.button(button);
                 $button.click(function() {
-
+                    var spanPortsToDelete = [];
                     var checkedCheckBoxes = $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).find("tbody input:checked");
-                    if (checkedCheckBoxes.length > 0) {
-                        var spanPortsToDelete = "";
-                        checkedCheckBoxes.each(function(index, value) {
-                            spanPortsToDelete += decodeURIComponent(checkedCheckBoxes[index].getAttribute("spanPort")) + "###";
-                        });
-
-                        var requestData = {};
-                        requestData["spanPortsToDelete"] = spanPortsToDelete;
-                        var url = one.f.switchmanager.rootUrl + "/spanPorts/delete";
-                        one.f.switchmanager.spanPortConfig.ajax.main(url, requestData, function(response) {
-                            if (response.status == true) {
-                                // refresh dashlet by passing dashlet div as param
-                                one.f.switchmanager.spanPortConfig.dashlet($("#right-bottom .dashlet"));
-                            } else {
-                                alert(response.message);
-                            }
-                        });
+                    
+                    if (checkedCheckBoxes.size() === 0) {
+                        return false;
                     }
+                    checkedCheckBoxes.each(function(index, value) {
+                        var spanPortObj = {};
+                        spanPortObj['spanPortJson'] = decodeURIComponent(checkedCheckBoxes[index].getAttribute("spanPort"));
+                        spanPortObj['spanPortNodeName'] = checkedCheckBoxes[index].getAttribute("spanPortNode");
+                        spanPortObj['spanPortPortName'] = checkedCheckBoxes[index].getAttribute("spanPortPort");
+
+                        spanPortsToDelete.push(spanPortObj);
+                    });
+                    one.f.switchmanager.spanPortConfig.modal.removeMultiple.dialog(spanPortsToDelete);
                 });
                 $dashlet.append($button);
             }
@@ -1104,10 +1258,25 @@ one.f.switchmanager.spanPortConfig = {
                 }, "table-striped table-condensed");
             $dashlet.append($gridHTML);
             var dataSource = one.f.switchmanager.spanPortConfig.data.spanPortConfigGrid(content);
-            $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource});
-
-
-
+            $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).datagrid({dataSource: dataSource})
+            .on("loaded", function() {
+                $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll).click(function() {
+                    $("#" + one.f.switchmanager.spanPortConfig.id.dashlet.datagrid).find(':checkbox').prop('checked',
+                        $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll).is(':checked'));
+                });
+                $(".spanPortConfig").click(function(e){
+                    if (!$('.spanPortConfig[type=checkbox]:not(:checked)').length) {
+                        $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll)
+                            .prop("checked",
+                          true);
+                    } else {
+                        $("#"+one.f.switchmanager.spanPortConfig.id.dashlet.selectAll)
+                            .prop("checked",
+                         false);
+                    }
+                    e.stopPropagation();
+                });
+             });
         });
     },
     // device ajax calls
@@ -1166,7 +1335,11 @@ one.f.switchmanager.spanPortConfig = {
                 one.f.switchmanager.spanPortConfig.registry['currentNode'] = nodeId;
                 var $ports = $('#' + one.f.switchmanager.spanPortConfig.id.modal.form.port);
                 var ports = one.f.switchmanager.spanPortConfig.registry['nodePorts'][nodeId]
-                one.lib.form.select.inject($ports, ports); 
+                var options = {};
+                $(ports).each(function(idx, val) {
+                    options[val.internalPortName] = val.portName+' ('+val.portId+')'; 
+                });
+                one.lib.form.select.inject($ports, options); 
             });
 
             $fieldset.append($label).append($select);
@@ -1207,6 +1380,68 @@ one.f.switchmanager.spanPortConfig = {
             var $saveButton = one.lib.dashlet.button.button(saveButton);
             footer.push($saveButton);
             return footer;
+        },
+        removeMultiple: {
+            dialog: function(spanPortsToDelete) {
+                var h3 = 'Remove Span Port';
+                
+                var footer = one.f.switchmanager.spanPortConfig.modal.removeMultiple.footer();
+                var $body = one.f.switchmanager.spanPortConfig.modal.removeMultiple.body(spanPortsToDelete);
+                var $modal = one.lib.modal.spawn(one.f.switchmanager.spanPortConfig.id.modal.modal, h3, $body, footer);
+
+                // bind close button
+                $('#'+one.f.switchmanager.spanPortConfig.id.modal.cancel, $modal).click(function() {
+                    $modal.modal('hide');
+                });
+
+                // bind remove rule button
+                $('#'+one.f.switchmanager.spanPortConfig.id.modal.remove, $modal).click(this, function(e) {
+                    var requestData = {};
+                    var spanPorts = [];
+                    $(spanPortsToDelete).each(function(index, spanPort) {
+                        spanPorts.push(JSON.parse(spanPort.spanPortJson));
+                    });
+                    requestData["spanPortsToDelete"] = JSON.stringify(spanPorts);
+
+                    var url = one.f.switchmanager.rootUrl + "/spanPorts/delete";
+                    one.f.switchmanager.spanPortConfig.ajax.main(url, requestData, function(response) {
+                        $modal.modal('hide');
+                        if (response.status == true) {
+                            // refresh dashlet by passing dashlet div as param
+                            one.lib.alert("Span Port(s) successfully removed");
+                        } else {
+                            alert(response.message);
+                        }
+                        one.f.switchmanager.spanPortConfig.dashlet($("#right-bottom .dashlet"));
+                    });
+                });
+                $modal.modal();
+            },
+            footer : function() {
+                var footer = [];
+                var remove = one.lib.dashlet.button.single('Remove SPAN Port',one.f.switchmanager.spanPortConfig.id.modal.remove, 'btn-danger', '');
+                var $remove = one.lib.dashlet.button.button(remove);
+                footer.push($remove);
+
+                var cancel = one.lib.dashlet.button.single('Cancel', one.f.switchmanager.spanPortConfig.id.modal.cancel, '', '');
+                var $cancel = one.lib.dashlet.button.button(cancel);
+                footer.push($cancel);
+
+                return footer;
+            },
+            body : function (spanPortToDelete) {
+                var $p = $(document.createElement('p'));
+                var p = 'Remove the following Span Port(s)?';
+                //creata a BS label for each rule and append to list
+
+                $(spanPortToDelete).each(function(index, spanPortItem) {
+                    var $span = $(document.createElement('span'));
+                    $span.append(this.spanPortNodeName+"-"+this.spanPortPortName);
+                    p += '<br/>' + $span[0].outerHTML;
+                });
+                $p.append(p);
+                return $p;
+            }
         }
     },
     // data functions
@@ -1216,7 +1451,8 @@ one.f.switchmanager.spanPortConfig = {
                     columns: [
                         {
                             property: 'selector',
-                            label: ' ',
+                            label: "<input type='checkbox'  id='"
+                                +one.f.switchmanager.spanPortConfig.id.dashlet.selectAll+"'/>",
                             sortable: false
                         },
                         {
@@ -1225,7 +1461,7 @@ one.f.switchmanager.spanPortConfig = {
                             sortable: true
                         },
                         {
-                            property: 'spanPort',
+                            property: 'spanPortName',
                             label: 'SPAN Port',
                             sortable: true
                         },
@@ -1233,7 +1469,7 @@ one.f.switchmanager.spanPortConfig = {
                     data: data.nodeData,
                     formatter: function(items) {
                         $.each(items, function(index, item) {
-                            item["selector"] = '<input type="checkbox" spanPort=' + encodeURIComponent(item["json"]) + '></input>';
+                            item["selector"] = '<input type="checkbox" class="spanPortConfig" spanPort=' + encodeURIComponent(item["json"]) + ' spanPortNode=' + item["nodeName"] + ' spanPortPort=' + item["spanPortName"] + '></input>';
                         });
                     },
                     delay: 0