Minor correction to UI element

[controller.git] / opendaylight / web / devices / src / main / resources / js / page.js

diff --git a/opendaylight/web/devices/src/main/resources/js/page.js b/opendaylight/web/devices/src/main/resources/js/page.js
index f48a46d204ac05a2c50ae5859bf6a59dc3b8d57b..6916be679877fadb2423912e67bdb243f4d0fb3e 100644 (file)
--- a/opendaylight/web/devices/src/main/resources/js/page.js
+++ b/opendaylight/web/devices/src/main/resources/js/page.js
@@ -74,8 +74,11 @@ one.f.switchmanager.nodesLearnt = {
         },
         modal: {
             modal: "one_f_switchmanager_nodesLearnt_id_modal_modal",
+            configure: "one_f_switchmanager_nodesLearnt_id_modal_configure",
+            ports: "one_f_switchmanager_nodesLearnt_id_modal_ports",
             save: "one_f_switchmanager_nodesLearnt_id_modal_save",
             datagrid: "one_f_switchmanager_nodesLearnt_id_modal_datagrid",
+            portsDatagrid: "one_f_switchmanager_nodesLearnt_id_modal_portsDatagrid",
             form: {
                 nodeId: "one_f_switchmanager_nodesLearnt_id_modal_form_nodeid",
                 nodeName : "one_f_switchmanager_nodesLearnt_id_modal_form_nodename",
@@ -102,6 +105,13 @@ one.f.switchmanager.nodesLearnt = {
             $("#" + one.f.switchmanager.nodesLearnt.id.dashlet.datagrid).datagrid({dataSource: dataSource}).on("loaded", function() {
                 $(this).find("tbody a").click(one.f.switchmanager.nodesLearnt.modal.initialize.updateNode);
             });
+            
+            $("#" + one.f.switchmanager.nodesLearnt.id.dashlet.datagrid).datagrid({dataSource: dataSource}).on("loaded", function() {
+                $(this).find("tbody span").click(function(){
+                    one.f.switchmanager.nodesLearnt.modal.initialize.displayPorts($(this));
+                });
+            });
+            
         });
     },
     ajax : {
@@ -128,7 +138,7 @@ one.f.switchmanager.nodesLearnt = {
                         h3 = 'Node Information';
                     }
                     
-                    var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.modal, h3, "", footer);
+                    var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.configure, h3, "", footer);
                     // bind save button
                     $('#' + one.f.switchmanager.nodesLearnt.id.modal.save, $modal).click(function() {
                         one.f.switchmanager.nodesLearnt.modal.save($modal);
@@ -145,6 +155,30 @@ one.f.switchmanager.nodesLearnt = {
                 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);
                 return $modal;
+            },
+            displayPorts: function(ports) {
+                var content = JSON.parse(decodeURIComponent(ports.attr("ports")));
+                
+                var h3 = ((ports.attr("nodeName") == "None")? ports.attr("nodeId") : ports.attr("nodeName"))
+                var footer = [];
+                var $modal = one.lib.modal.spawn(one.f.switchmanager.nodesLearnt.id.modal.ports, h3, "", footer);
+                
+                var $gridHTML = one.lib.dashlet.datagrid.init(one.f.switchmanager.nodesLearnt.id.modal.portsDatagrid, {
+                    searchable: true,
+                    filterable: false,
+                    pagination: true,
+                    flexibleRowsPerPage: true,
+                    popout: true
+                    }, "table-striped table-condensed");
+                one.lib.modal.inject.body($modal, $gridHTML);
+                $modal.on("shown", function() {
+                    var dataSource = one.f.switchmanager.nodesLearnt.data.gridDataSource.displayPorts(content);
+                    $("#" + one.f.switchmanager.nodesLearnt.id.modal.portsDatagrid).datagrid({
+                        dataSource: dataSource,
+                        stretchHeight: false
+                    });
+                });
+                $modal.modal();
             }
         },
         body: {
@@ -190,7 +224,8 @@ one.f.switchmanager.nodesLearnt = {
                         searchable: true,
                         filterable: false,
                         pagination: true,
-                        flexibleRowsPerPage: true
+                        flexibleRowsPerPage: true,
+                        popout: true
                         }, "table-striped table-condensed");
                 one.lib.modal.inject.body($modal, $gridHTML);
                 // attach to shown event of modal 
@@ -200,7 +235,12 @@ one.f.switchmanager.nodesLearnt = {
                         var dataSource = one.f.switchmanager.nodesLearnt.data.gridDataSource.popout(content);
                         $("#" + one.f.switchmanager.nodesLearnt.id.modal.datagrid).datagrid({
                             dataSource: dataSource,
-                            stretchHeight: true
+                            stretchHeight: false
+                        })
+                        .on("loaded", function() {
+                            $("#" + one.f.switchmanager.nodesLearnt.id.modal.datagrid).find("tbody span").click(function(){
+                                one.f.switchmanager.nodesLearnt.modal.initialize.displayPorts($(this));
+                            });
                         });
                     });
                 });
@@ -275,9 +315,15 @@ one.f.switchmanager.nodesLearnt = {
                     data: data.nodeData,
                     formatter: function(items) {
                     $.each(items, function (index, item) {
+                        var nodeName = item.nodeName;
                         var nodeNameEntry = item.nodeName ? item.nodeName : "Click to update";
                         item.nodeName = '<a href="#" id="' + item.nodeId + '" switchDetails=' + encodeURIComponent(JSON.stringify(item)) + 
                         ' privilege=' + data.privilege + '>' + nodeNameEntry + '</a>';
+                        
+                        var ports = item.ports;
+                        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>';
                     }); 
                     },
                     delay: 0
@@ -315,8 +361,39 @@ one.f.switchmanager.nodesLearnt = {
                         }
                     ],
                     data: data.nodeData,
+                    formatter: function(items) {
+                        $.each(items, function (index, item) {
+                            var ports = item.ports;
+                            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>';
+                        }); 
+                    },
                     delay: 0
                 });
+                return source;
+            },
+            displayPorts: function(content){
+                var data=[];
+                var start=0;;
+                var finish=content.indexOf("<br>",start);
+                while(finish != -1){
+                    data.push({"ports":content.substring(start,finish)});
+                    start=finish+4
+                    finish=content.indexOf("<br>",start);
+                }
+                var source = new StaticDataSource({
+                    columns: [
+                        {
+                            property: 'ports',
+                            label: 'Ports',
+                            sortable: true
+                        }
+                    ],
+                    data:data,
+                    delay: 0
+                });
+                
                 return source;
             }
         },
@@ -981,7 +1058,7 @@ one.f.switchmanager.spanPortConfig = {
             if (content.privilege === 'WRITE') {
 
                 // Add span port button
-                var button = one.lib.dashlet.button.single("Add Span Port", one.f.switchmanager.spanPortConfig.id.dashlet.add, "btn-primary", "btn-mini");
+                var button = one.lib.dashlet.button.single("Add SPAN Port", one.f.switchmanager.spanPortConfig.id.dashlet.add, "btn-primary", "btn-mini");
                 var $button = one.lib.dashlet.button.button(button);
 
                 $button.click(function() {
@@ -1153,7 +1230,7 @@ one.f.switchmanager.spanPortConfig = {
                         },
                         {
                             property: 'spanPort',
-                            label: 'span Port',
+                            label: 'SPAN Port',
                             sortable: true
                         },
                     ],