From cfbedc2cc488643b4e816f1a1db86e2651e46984 Mon Sep 17 00:00:00 2001 From: lakshya Date: Thu, 15 Aug 2013 14:06:44 -0700 Subject: [PATCH] Converting tables in flow and troubleshoot to use datagrid. Change-Id: I70c69ef9f2e5204ad47caa41e7d0ba3b2603c0f1 Signed-off-by: lakshya --- .../web/flows/src/main/resources/js/page.js | 957 +++++++++--------- .../src/main/resources/js/page.js | 703 ++++++++----- 2 files changed, 977 insertions(+), 683 deletions(-) diff --git a/opendaylight/web/flows/src/main/resources/js/page.js b/opendaylight/web/flows/src/main/resources/js/page.js index 7ff54ed4dc..2a2dbf5b4d 100644 --- a/opendaylight/web/flows/src/main/resources/js/page.js +++ b/opendaylight/web/flows/src/main/resources/js/page.js @@ -1,4 +1,3 @@ - /* * Copyright (c) 2013 Cisco Systems, Inc. and others. All rights reserved. * @@ -47,7 +46,7 @@ one.f.address = { root : "/controller/web/flows", flows : { main : "/main", - flows : "/node-flows", + flows : "/node-flows", nodes : "/node-ports", flow : "/flow" } @@ -55,54 +54,63 @@ one.f.address = { /** NODES **/ one.f.nodes = { - id : {}, + id : { + dashlet: { + datagrid: "one_f_nodes_id_dashlet_datagrid" + } + }, registry : {}, dashlet : function($dashlet) { var $h4 = one.lib.dashlet.header("Nodes"); $dashlet.append($h4); - // load body - one.f.nodes.ajax.dashlet(function($table) { - // total nodes count - var nodeCount = $table.find('tbody').find('tr').size(); - // prompt output - var nodeText = "node"; - var verb = "is"; - if (nodeCount != 1) { - nodeText += "s"; - verb = "are"; - } - var out = "There "+verb+" "+nodeCount+" "+nodeText; - $p = $(document.createElement('p')); - $p.append(out); - $dashlet.append($p); - // add to dashlet - $dashlet.append($table); + one.f.nodes.ajax.dashlet(function(data) { + var $gridHTML = one.lib.dashlet.datagrid.init(one.f.nodes.id.dashlet.datagrid, { + searchable: true, + filterable: false, + pagination: true, + flexibleRowsPerPage: true + }, "table-striped table-condensed"); + $dashlet.append($gridHTML); + var dataSource = one.f.nodes.data.nodesDataGrid(data); + $("#" + one.f.nodes.id.dashlet.datagrid).datagrid({dataSource: dataSource}); }); }, ajax : { dashlet : function(callback) { $.getJSON(one.f.address.root+one.f.address.flows.flows, function(data) { - var body = one.f.nodes.data.dashlet(data); - var $body = one.f.nodes.body.dashlet(body, callback); - callback($body); + callback(data); }); } }, data : { - dashlet : function(data) { - var body = []; - $.each(data, function(key, value) { - var tr = {}; - var entry = []; - entry.push(key); - // parse ports - entry.push(value); - // add entry to tr - tr['entry'] = entry; - body.push(tr); + nodesDataGrid: function(data) { + var gridData = []; + $.each(data, function(nodeName, flow) { + var nodeFlowObject = {}; + nodeFlowObject["nodeName"] = nodeName; + nodeFlowObject["flows"] = flow; + nodeFlowObject["rowData"] = nodeName + flow + "-foobar"; + gridData.push(nodeFlowObject); }); - return body; + + var source = new StaticDataSource({ + columns: [ + { + property: 'nodeName', + label: 'Node', + sortable: true + }, + { + property: 'flows', + label: 'Flows', + sortable: true + } + ], + data: gridData, + delay: 0 + }); + return source; } }, body : { @@ -132,109 +140,109 @@ one.f.detail = { // details if (details == undefined) { - var $none = $(document.createElement('div')); - $none.addClass('none'); + var $none = $(document.createElement('div')); + $none.addClass('none'); var $p = $(document.createElement('p')); $p.text('Please select a flow'); $p.addClass('text-center').addClass('text-info'); $dashlet.append($none) - .append($p); + .append($p); } }, data : { - dashlet : function(data) { - var body = []; - var tr = {}; - var entry = []; - - entry.push(data['name']); - entry.push(data['node']); - entry.push(data['flow']['priority']); - entry.push(data['flow']['hardTimeout']); - entry.push(data['flow']['idleTimeout']); - - tr.entry = entry; - body.push(tr); - return body; - }, + dashlet : function(data) { + var body = []; + var tr = {}; + var entry = []; + + entry.push(data['name']); + entry.push(data['node']); + entry.push(data['flow']['priority']); + entry.push(data['flow']['hardTimeout']); + entry.push(data['flow']['idleTimeout']); + + tr.entry = entry; + body.push(tr); + return body; + }, description : function(data) { - var body = []; - var tr = {}; - var entry = []; + var body = []; + var tr = {}; + var entry = []; entry.push(data['flow']['ingressPort']); - entry.push(data['flow']['etherType']); - entry.push(data['flow']['vlanId']); - entry.push(data['flow']['vlanPriority']); - entry.push(data['flow']['srcMac']); - entry.push(data['flow']['dstMac']); - entry.push(data['flow']['srcIp']); - entry.push(data['flow']['dstIp']); - entry.push(data['flow']['tosBits']); - entry.push(data['flow']['srcPort']); - entry.push(data['flow']['dstPort']); - entry.push(data['flow']['protocol']); - entry.push(data['flow']['cookie']); - - tr.entry = entry; - body.push(tr); - return body; + entry.push(data['flow']['etherType']); + entry.push(data['flow']['vlanId']); + entry.push(data['flow']['vlanPriority']); + entry.push(data['flow']['srcMac']); + entry.push(data['flow']['dstMac']); + entry.push(data['flow']['srcIp']); + entry.push(data['flow']['dstIp']); + entry.push(data['flow']['tosBits']); + entry.push(data['flow']['srcPort']); + entry.push(data['flow']['dstPort']); + entry.push(data['flow']['protocol']); + entry.push(data['flow']['cookie']); + + tr.entry = entry; + body.push(tr); + return body; }, - actions : function(data) { - var body = []; - var tr = {}; - var entry = []; - - var actions = ''; - $(data['flow']['actions']).each(function(index, value) { - actions += value + ', '; - }); - actions = actions.slice(0,-2); - entry.push(actions); - - tr.entry = entry; - body.push(tr); - return body; - } + actions : function(data) { + var body = []; + var tr = {}; + var entry = []; + + var actions = ''; + $(data['flow']['actions']).each(function(index, value) { + actions += value + ', '; + }); + actions = actions.slice(0,-2); + entry.push(actions); + + tr.entry = entry; + body.push(tr); + return body; + } }, body : { dashlet : function(body) { - // create table - var header = ['Flow Name', 'Node', 'Priority', 'Hard Timeout', 'Idle Timeout']; - var $thead = one.lib.dashlet.table.header(header); - var attributes = ['table-striped', 'table-bordered', 'table-condensed']; - var $table = one.lib.dashlet.table.table(attributes); - $table.append($thead); + // create table + var header = ['Flow Name', 'Node', 'Priority', 'Hard Timeout', 'Idle Timeout']; + var $thead = one.lib.dashlet.table.header(header); + var attributes = ['table-striped', 'table-bordered', 'table-condensed']; + var $table = one.lib.dashlet.table.table(attributes); + $table.append($thead); - var $tbody = one.lib.dashlet.table.body(body); - $table.append($tbody); + var $tbody = one.lib.dashlet.table.body(body); + $table.append($tbody); return $table; }, - description : function(body) { - var header = ['Input Port', 'Ethernet Type', 'VLAN ID', 'VLAN Priority', 'Source MAC', 'Dest MAC', 'Source IP', 'Dest IP', 'TOS', 'Source Port', 'Dest Port', 'Protocol', 'Cookie']; - var $thead = one.lib.dashlet.table.header(header); - var attributes = ['table-striped', 'table-bordered', 'table-condensed']; - var $table = one.lib.dashlet.table.table(attributes); - $table.append($thead); + description : function(body) { + var header = ['Input Port', 'Ethernet Type', 'VLAN ID', 'VLAN Priority', 'Source MAC', 'Dest MAC', 'Source IP', 'Dest IP', 'TOS', 'Source Port', 'Dest Port', 'Protocol', 'Cookie']; + var $thead = one.lib.dashlet.table.header(header); + var attributes = ['table-striped', 'table-bordered', 'table-condensed']; + var $table = one.lib.dashlet.table.table(attributes); + $table.append($thead); - var $tbody = one.lib.dashlet.table.body(body); - $table.append($tbody); + var $tbody = one.lib.dashlet.table.body(body); + $table.append($tbody); return $table; - }, - actions : function(body) { - var header = ['Actions']; - var $thead = one.lib.dashlet.table.header(header); - var attributes = ['table-striped', 'table-bordered', 'table-condensed']; - var $table = one.lib.dashlet.table.table(attributes); - $table.append($thead); + }, + actions : function(body) { + var header = ['Actions']; + var $thead = one.lib.dashlet.table.header(header); + var attributes = ['table-striped', 'table-bordered', 'table-condensed']; + var $table = one.lib.dashlet.table.table(attributes); + $table.append($thead); - var $tbody = one.lib.dashlet.table.body(body); - $table.append($tbody); + var $tbody = one.lib.dashlet.table.body(body); + $table.append($tbody); return $table; - } + } } } @@ -244,15 +252,16 @@ one.f.flows = { dashlet : { add : "one_f_flows_id_dashlet_add", remove : "one_f_flows_id_dashlet_remove", - toggle : "one_f_flows_id_dashlet_toggle" + toggle : "one_f_flows_id_dashlet_toggle", + datagrid: "one_f_flows_id_dashlet_datagrid" }, modal : { - install : "one_f_flows_id_modal_install", + install : "one_f_flows_id_modal_install", add : "one_f_flows_id_modal_add", close : "one_f_flows_id_modal_close", modal : "one_f_flows_id_modal_modal", dialog : { - modal : "one_f_flows_id_modal_dialog_modal", + modal : "one_f_flows_id_modal_dialog_modal", remove : "one_f_flows_id_modal_dialog_remove", close : "one_f_flows_id_modal_dialog_close" }, @@ -272,11 +281,11 @@ one.f.flows = { modifyTosBits : "one_f_flows_modal_action_modifyTosBits", modifyTransportSourcePort : "one_f_flows_modal_action_modifyTransportSourcePort", modifyTransportDestinationPort : "one_f_flows_modal_action_modifyTransportDestinationPort", - modal : { - modal : "one_f_flows_modal_action_modal_modal", - remove : "one_f_flows_modal_action_modal_remove", - cancel : "one_f_flows_modal_action_modal_cancel" - } + modal : { + modal : "one_f_flows_modal_action_modal_modal", + remove : "one_f_flows_modal_action_modal_remove", + cancel : "one_f_flows_modal_action_modal_cancel" + } }, form : { name : "one_f_flows_id_modal_form_name", @@ -284,8 +293,8 @@ one.f.flows = { port : "one_f_flows_id_modal_form_port", priority : "one_f_flows_id_modal_form_priority", hardTimeout : "one_f_flows_id_modal_form_hardTimeout", - idleTimeout : "one_f_flows_id_modal_form_idleTimeout", - cookie : "one_f_flows_id_modal_form_cookie", + idleTimeout : "one_f_flows_id_modal_form_idleTimeout", + cookie : "one_f_flows_id_modal_form_cookie", etherType : "one_f_flows_id_modal_form_etherType", vlanId : "one_f_flows_id_modal_form_vlanId", vlanPriority : "one_f_flows_id_modal_form_vlanPriority", @@ -304,7 +313,7 @@ one.f.flows = { dashlet : function($dashlet, callback) { // load body - one.f.flows.ajax.dashlet(function($table) { + one.f.flows.ajax.dashlet(function(data) { var $h4 = one.lib.dashlet.header("Flow Entries"); @@ -321,28 +330,39 @@ one.f.flows = { } - // table bindings - $table.find('tbody').find('tr').click(function() { - var id = $($(this).find('td')[0]).text(); - var node = $(this).data('id'); - one.f.flows.detail(id, node); + var $gridHTML = one.lib.dashlet.datagrid.init(one.f.flows.id.dashlet.datagrid, { + searchable: true, + filterable: false, + pagination: true, + flexibleRowsPerPage: true + }, "table-striped table-condensed"); + $dashlet.append($gridHTML); + var dataSource = one.f.flows.data.flowsDataGrid(data); + $("#" + one.f.flows.id.dashlet.datagrid).datagrid({dataSource: dataSource}).on("loaded", function() { + $("#" + one.f.flows.id.dashlet.datagrid).find("tbody tr").each(function(index, tr) { + $tr = $(tr); + $span = $("td span", $tr); + var flowstatus = $span.data("flowstatus"); + var installInHw = $span.data("installinhw").toString(); + if(installInHw == "true" && flowstatus == "Success") { + $tr.addClass("success"); + } else { + $tr.addClass("warning"); + } + // attach mouseover to show pointer cursor + $tr.mouseover(function() { + $(this).css("cursor", "pointer"); + }); + // attach click event + $tr.click(function() { + var $td = $($(this).find("td")[0]); + var id = $td.text(); + var node = $td.find("span").data("nodeid"); + one.f.flows.detail(id, node); + }); + }); }); - - // total flows - var flowCount = $table.find('tbody').find('tr').size(); - // prompt output - var flowText = "flow"; - var verb = "is"; - if (flowCount != 1) { - flowText += "s"; - verb = "are"; - } - var out = "There "+verb+" "+flowCount+" "+flowText; - $p = $(document.createElement('p')); - $p.append(out); - $dashlet.append($p); - // add table to dashlet - $dashlet.append($table); + // details callback if(callback != undefined) callback(); }); @@ -363,54 +383,54 @@ one.f.flows = { } }); if (one.f.flows.registry.privilege === 'WRITE') { - // remove button - var button = one.lib.dashlet.button.single("Remove Flow", one.f.flows.id.dashlet.remove, "btn-danger", "btn-mini"); - var $button = one.lib.dashlet.button.button(button); - $button.click(function() { - var $modal = one.f.flows.modal.dialog.initialize(id, node); - $modal.modal(); - }); - // toggle button - var toggle; - if (flow['flow']['installInHw'] == 'true' && flow['flow']['status'] == 'Success') { - toggle = one.lib.dashlet.button.single("Uninstall Flow", one.f.flows.id.dashlet.toggle, "btn-warning", "btn-mini"); - } else { - toggle = one.lib.dashlet.button.single("Install Flow", one.f.flows.id.dashlet.toggle, "btn-success", "btn-mini"); - } - var $toggle = one.lib.dashlet.button.button(toggle); - $toggle.click(function() { - one.f.flows.modal.ajax.toggleflow(id, node, function(data) { - if(data == "Success") { - one.main.dashlet.right.bottom.empty(); - one.f.detail.dashlet(one.main.dashlet.right.bottom); - one.main.dashlet.left.top.empty(); - one.f.flows.dashlet(one.main.dashlet.left.top, function() { - // checks are backwards due to stale registry - if(flow['flow']['installInHw'] == 'true') { - one.lib.alert('Uninstalled Flow'); - } else { - one.lib.alert('Installed Flow'); - } - one.f.flows.detail(id, node) - }); - } else { - one.lib.alert('Cannot toggle flow: '+data); - } - }); - }); - - $detailDashlet.append($button).append($toggle); + // remove button + var button = one.lib.dashlet.button.single("Remove Flow", one.f.flows.id.dashlet.remove, "btn-danger", "btn-mini"); + var $button = one.lib.dashlet.button.button(button); + $button.click(function() { + var $modal = one.f.flows.modal.dialog.initialize(id, node); + $modal.modal(); + }); + // toggle button + var toggle; + if (flow['flow']['installInHw'] == 'true' && flow['flow']['status'] == 'Success') { + toggle = one.lib.dashlet.button.single("Uninstall Flow", one.f.flows.id.dashlet.toggle, "btn-warning", "btn-mini"); + } else { + toggle = one.lib.dashlet.button.single("Install Flow", one.f.flows.id.dashlet.toggle, "btn-success", "btn-mini"); + } + var $toggle = one.lib.dashlet.button.button(toggle); + $toggle.click(function() { + one.f.flows.modal.ajax.toggleflow(id, node, function(data) { + if(data == "Success") { + one.main.dashlet.right.bottom.empty(); + one.f.detail.dashlet(one.main.dashlet.right.bottom); + one.main.dashlet.left.top.empty(); + one.f.flows.dashlet(one.main.dashlet.left.top, function() { + // checks are backwards due to stale registry + if(flow['flow']['installInHw'] == 'true') { + one.lib.alert('Uninstalled Flow'); + } else { + one.lib.alert('Installed Flow'); + } + one.f.flows.detail(id, node) + }); + } else { + one.lib.alert('Cannot toggle flow: '+data); + } + }); + }); + + $detailDashlet.append($button).append($toggle); } // append details var body = one.f.detail.data.dashlet(flow); var $body = one.f.detail.body.dashlet(body); $detailDashlet.append($body); - var body = one.f.detail.data.description(flow); - var $body = one.f.detail.body.description(body); - $detailDashlet.append($body); - var body = one.f.detail.data.actions(flow); - var $body = one.f.detail.body.actions(body); - $detailDashlet.append($body); + var body = one.f.detail.data.description(flow); + var $body = one.f.detail.body.description(body); + $detailDashlet.append($body); + var body = one.f.detail.data.actions(flow); + var $body = one.f.detail.body.actions(body); + $detailDashlet.append($body); }, modal : { dialog : { @@ -492,8 +512,8 @@ one.f.flows = { result['ingressPort'] = $('#'+one.f.flows.id.modal.form.port, $modal).val(); result['priority'] = $('#'+one.f.flows.id.modal.form.priority, $modal).val(); result['hardTimeout'] = $('#'+one.f.flows.id.modal.form.hardTimeout, $modal).val(); - result['idleTimeout'] = $('#'+one.f.flows.id.modal.form.idleTimeout, $modal).val(); - result['cookie'] = $('#'+one.f.flows.id.modal.form.cookie, $modal).val(); + result['idleTimeout'] = $('#'+one.f.flows.id.modal.form.idleTimeout, $modal).val(); + result['cookie'] = $('#'+one.f.flows.id.modal.form.cookie, $modal).val(); result['etherType'] = $('#'+one.f.flows.id.modal.form.etherType, $modal).val(); result['vlanId'] = $('#'+one.f.flows.id.modal.form.vlanId, $modal).val(); result['vlanPriority'] = $('#'+one.f.flows.id.modal.form.vlanPriority, $modal).val(); @@ -506,7 +526,7 @@ one.f.flows = { result['tpDst'] = $('#'+one.f.flows.id.modal.form.dstPort, $modal).val(); result['protocol'] = $('#'+one.f.flows.id.modal.form.protocol, $modal).val(); - result['installInHw'] = install; + result['installInHw'] = install; var nodeId = $('#'+one.f.flows.id.modal.form.nodes, $modal).val(); @@ -517,31 +537,31 @@ one.f.flows = { var action = []; var $table = $('#'+one.f.flows.id.modal.action.table, $modal); $($table.find('tbody').find('tr')).each(function(index, value) { - if (!$(this).find('td').hasClass('empty')) { - action.push($(value).data('action')); - } + if (!$(this).find('td').hasClass('empty')) { + action.push($(value).data('action')); + } }); result['actions'] = action; // frontend validation - if (result['name'] == undefined) { - alert('Need flow name'); - return; - } - if (nodeId == '') { - alert('Select node'); - return; - } - if (action.length == 0) { - alert('Please specify an action'); - return; - } - - // package for ajax call + if (result['name'] == undefined) { + alert('Need flow name'); + return; + } + if (nodeId == '') { + alert('Select node'); + return; + } + if (action.length == 0) { + alert('Please specify an action'); + return; + } + + // package for ajax call var resource = {}; resource['body'] = JSON.stringify(result); resource['action'] = 'add'; - resource['nodeId'] = nodeId; + resource['nodeId'] = nodeId; one.f.flows.modal.ajax.saveflow(resource, function(data) { if (data == "Success") { @@ -550,7 +570,7 @@ one.f.flows = { one.main.dashlet.left.top.empty(); one.f.flows.dashlet(one.main.dashlet.left.top); } else { - alert('Could not add flow: '+data); + alert('Could not add flow: '+data); } }); }, @@ -570,18 +590,18 @@ one.f.flows = { }); }, removeflow : function(id, node, callback) { - resource = {}; - resource['action'] = 'remove'; + resource = {}; + resource['action'] = 'remove'; $.post(one.f.address.root+one.f.address.flows.flow+'/'+node+'/'+id, resource, function(data) { callback(data); }); }, toggleflow : function(id, node, callback) { - resource = {}; - resource['action'] = 'toggle'; - $.post(one.f.address.root+one.f.address.flows.flow+'/'+node+'/'+id, resource, function(data) { - callback(data); - }); + resource = {}; + resource['action'] = 'toggle'; + $.post(one.f.address.root+one.f.address.flows.flow+'/'+node+'/'+id, resource, function(data) { + callback(data); + }); } }, data : { @@ -595,184 +615,184 @@ one.f.flows = { }, body : function(nodes, nodeports) { var $form = $(document.createElement('form')); - var $fieldset = $(document.createElement('fieldset')); - // flow description - var $legend = one.lib.form.legend("Flow Description"); - $fieldset.append($legend); - // name - var $label = one.lib.form.label("Name"); - var $input = one.lib.form.input("Flow Name"); - $input.attr('id', one.f.flows.id.modal.form.name); - $fieldset.append($label).append($input); - // node - var $label = one.lib.form.label("Node"); - var $select = one.lib.form.select.create(nodes); - one.lib.form.select.prepend($select, { '' : 'Please Select a Node' }); - $select.val($select.find("option:first").val()); - $select.attr('id', one.f.flows.id.modal.form.nodes); - - // bind onchange - $select.change(function() { - // retrieve port value - var node = $(this).find('option:selected').attr('value'); - var $ports = $('#'+one.f.flows.id.modal.form.port); - if (node == '') { - one.lib.form.select.inject($ports, {}); - return; - } - one.f.flows.registry['currentNode'] = node; - var ports = nodeports[node]['ports']; - one.lib.form.select.inject($ports, ports); - one.lib.form.select.prepend($ports, { '' : 'Please Select a Port' }); - $ports.val($ports.find("option:first").val()); - }); + var $fieldset = $(document.createElement('fieldset')); + // flow description + var $legend = one.lib.form.legend("Flow Description"); + $fieldset.append($legend); + // name + var $label = one.lib.form.label("Name"); + var $input = one.lib.form.input("Flow Name"); + $input.attr('id', one.f.flows.id.modal.form.name); + $fieldset.append($label).append($input); + // node + var $label = one.lib.form.label("Node"); + var $select = one.lib.form.select.create(nodes); + one.lib.form.select.prepend($select, { '' : 'Please Select a Node' }); + $select.val($select.find("option:first").val()); + $select.attr('id', one.f.flows.id.modal.form.nodes); + + // bind onchange + $select.change(function() { + // retrieve port value + var node = $(this).find('option:selected').attr('value'); + var $ports = $('#'+one.f.flows.id.modal.form.port); + if (node == '') { + one.lib.form.select.inject($ports, {}); + return; + } + one.f.flows.registry['currentNode'] = node; + var ports = nodeports[node]['ports']; + one.lib.form.select.inject($ports, ports); + one.lib.form.select.prepend($ports, { '' : 'Please Select a Port' }); + $ports.val($ports.find("option:first").val()); + }); $fieldset.append($label).append($select); - // input port - var $label = one.lib.form.label("Input Port"); - var $select = one.lib.form.select.create(); - $select.attr('id', one.f.flows.id.modal.form.port); - $fieldset.append($label).append($select); - // priority - var $label = one.lib.form.label("Priority"); - var $input = one.lib.form.input("Priority"); - $input.attr('id', one.f.flows.id.modal.form.priority); - $input.val('500'); - $fieldset.append($label).append($input); - // hardTimeout - var $label = one.lib.form.label("Hard Timeout"); - var $input = one.lib.form.input("Hard Timeout"); - $input.attr('id', one.f.flows.id.modal.form.hardTimeout); - $fieldset.append($label).append($input); - // idleTimeout - var $label = one.lib.form.label("Idle Timeout"); - var $input = one.lib.form.input("Idle Timeout"); - $input.attr('id', one.f.flows.id.modal.form.idleTimeout); - $fieldset.append($label).append($input); - // cookie - var $label = one.lib.form.label("Cookie"); - var $input = one.lib.form.input("Cookie"); - $input.attr('id', one.f.flows.id.modal.form.cookie); - $fieldset.append($label).append($input); - // layer 2 - var $legend = one.lib.form.legend("Layer 2"); - $fieldset.append($legend); - // etherType - var $label = one.lib.form.label("Ethernet Type"); - var $input = one.lib.form.input("Ethernet Type"); - $input.attr('id', one.f.flows.id.modal.form.etherType); - $input.val('0x800'); - $fieldset.append($label).append($input); - // vlanId - var $label = one.lib.form.label("VLAN Identification Number"); - var $input = one.lib.form.input("VLAN Identification Number"); - $input.attr('id', one.f.flows.id.modal.form.vlanId); - var $help = one.lib.form.help("Range: 0 - 4095"); - $fieldset.append($label).append($input).append($help); - // vlanPriority - var $label = one.lib.form.label("VLAN Priority"); - var $input = one.lib.form.input("VLAN Priority"); - $input.attr('id', one.f.flows.id.modal.form.vlanPriority); - var $help = one.lib.form.help("Range: 0 - 7"); - $fieldset.append($label).append($input).append($help); - // srcMac - var $label = one.lib.form.label("Source MAC Address"); - var $input = one.lib.form.input("Source MAC Address"); - $input.attr('id', one.f.flows.id.modal.form.srcMac); - var $help = one.lib.form.help("Example: 00:11:22:aa:bb:cc"); - $fieldset.append($label).append($input).append($help); - // dstMac - var $label = one.lib.form.label("Destination MAC Address"); - var $input = one.lib.form.input("Destination MAC Address"); - $input.attr('id', one.f.flows.id.modal.form.dstMac); - var $help = one.lib.form.help("Example: 00:11:22:aa:bb:cc"); - $fieldset.append($label).append($input).append($help); - // layer 3 - var $legend = one.lib.form.legend("Layer 3"); - $fieldset.append($legend); - // srcIp - var $label = one.lib.form.label("Source IP Address"); - var $input = one.lib.form.input("Source IP Address"); - $input.attr('id', one.f.flows.id.modal.form.srcIp); - var $help = one.lib.form.help("Example: 127.0.0.1"); - $fieldset.append($label).append($input).append($help); - // dstIp - var $label = one.lib.form.label("Destination IP Address"); - var $input = one.lib.form.input("Destination IP Address"); - $input.attr('id', one.f.flows.id.modal.form.dstIp); - var $help = one.lib.form.help("Example: 127.0.0.1"); - $fieldset.append($label).append($input).append($help); - // tosBits - var $label = one.lib.form.label("TOS Bits"); - var $input = one.lib.form.input("TOS Bits"); - $input.attr('id', one.f.flows.id.modal.form.tosBits); - var $help = one.lib.form.help("Range: 0 - 63"); - $fieldset.append($label).append($input).append($help); - // layer 4 - var $legend = one.lib.form.legend("Layer 4"); - $fieldset.append($legend); - // srcPort - var $label = one.lib.form.label("Source Port"); - var $input = one.lib.form.input("Source Port"); - $input.attr('id', one.f.flows.id.modal.form.srcPort); - var $help = one.lib.form.help("Range: 0 - 65535"); - $fieldset.append($label).append($input).append($help); - // dstPort - var $label = one.lib.form.label("Destination Port"); - var $input = one.lib.form.input("Destination Port"); - $input.attr('id', one.f.flows.id.modal.form.dstPort); - var $help = one.lib.form.help("Range: 0 - 65535"); - $fieldset.append($label).append($input).append($help); - // protocol - var $label = one.lib.form.label("Protocol"); - var $input = one.lib.form.input("Protocol"); - $input.attr('id', one.f.flows.id.modal.form.protocol); - $fieldset.append($label).append($input); - // actions - var $legend = one.lib.form.label("Actions"); - $fieldset.append($legend); - // actions table - var tableAttributes = ["table-striped", "table-bordered", "table-condensed", "table-hover", "table-cursor"]; - var $table = one.lib.dashlet.table.table(tableAttributes); - $table.attr('id', one.f.flows.id.modal.action.table); - var tableHeaders = ["Action", "Data", "Type"]; - var $thead = one.lib.dashlet.table.header(tableHeaders); - var $tbody = one.lib.dashlet.table.body("", tableHeaders); - $table.append($thead).append($tbody); - // actions - var actions = { - "" : "Please Select an Action", - "drop" : "Drop", - "loopback" : "Loopback", - "flood" : "Flood", - "softwarePath" : "Software Path", - "hardwarePath" : "Hardware Path", - "controller" : "Controller", - "addOutputPorts" : "Add Output Ports", - "setVlanId" : "Set VLAN ID", - "setVlanPriority" : "Set VLAN Priority", - "stripVlanHeader" : "Strip VLAN Header", - "modifyDatalayerSourceAddress" : "Modify Datalayer Source Address", - "modifyDatalayerDestinationAddress" : "Modify Datalayer Destination Address", - "modifyNetworkSourceAddress" : "Modify Network Source Address", - "modifyNetworkDestinationAddress" :"Modify Network Destination Address", - "modifyTosBits" : "Modify TOS Bits", - "modifyTransportSourcePort" : "Modify Transport Source Port", - "modifyTransportDestinationPort" : "Modify Transport Destination Port" - }; + // input port + var $label = one.lib.form.label("Input Port"); + var $select = one.lib.form.select.create(); + $select.attr('id', one.f.flows.id.modal.form.port); + $fieldset.append($label).append($select); + // priority + var $label = one.lib.form.label("Priority"); + var $input = one.lib.form.input("Priority"); + $input.attr('id', one.f.flows.id.modal.form.priority); + $input.val('500'); + $fieldset.append($label).append($input); + // hardTimeout + var $label = one.lib.form.label("Hard Timeout"); + var $input = one.lib.form.input("Hard Timeout"); + $input.attr('id', one.f.flows.id.modal.form.hardTimeout); + $fieldset.append($label).append($input); + // idleTimeout + var $label = one.lib.form.label("Idle Timeout"); + var $input = one.lib.form.input("Idle Timeout"); + $input.attr('id', one.f.flows.id.modal.form.idleTimeout); + $fieldset.append($label).append($input); + // cookie + var $label = one.lib.form.label("Cookie"); + var $input = one.lib.form.input("Cookie"); + $input.attr('id', one.f.flows.id.modal.form.cookie); + $fieldset.append($label).append($input); + // layer 2 + var $legend = one.lib.form.legend("Layer 2"); + $fieldset.append($legend); + // etherType + var $label = one.lib.form.label("Ethernet Type"); + var $input = one.lib.form.input("Ethernet Type"); + $input.attr('id', one.f.flows.id.modal.form.etherType); + $input.val('0x800'); + $fieldset.append($label).append($input); + // vlanId + var $label = one.lib.form.label("VLAN Identification Number"); + var $input = one.lib.form.input("VLAN Identification Number"); + $input.attr('id', one.f.flows.id.modal.form.vlanId); + var $help = one.lib.form.help("Range: 0 - 4095"); + $fieldset.append($label).append($input).append($help); + // vlanPriority + var $label = one.lib.form.label("VLAN Priority"); + var $input = one.lib.form.input("VLAN Priority"); + $input.attr('id', one.f.flows.id.modal.form.vlanPriority); + var $help = one.lib.form.help("Range: 0 - 7"); + $fieldset.append($label).append($input).append($help); + // srcMac + var $label = one.lib.form.label("Source MAC Address"); + var $input = one.lib.form.input("Source MAC Address"); + $input.attr('id', one.f.flows.id.modal.form.srcMac); + var $help = one.lib.form.help("Example: 00:11:22:aa:bb:cc"); + $fieldset.append($label).append($input).append($help); + // dstMac + var $label = one.lib.form.label("Destination MAC Address"); + var $input = one.lib.form.input("Destination MAC Address"); + $input.attr('id', one.f.flows.id.modal.form.dstMac); + var $help = one.lib.form.help("Example: 00:11:22:aa:bb:cc"); + $fieldset.append($label).append($input).append($help); + // layer 3 + var $legend = one.lib.form.legend("Layer 3"); + $fieldset.append($legend); + // srcIp + var $label = one.lib.form.label("Source IP Address"); + var $input = one.lib.form.input("Source IP Address"); + $input.attr('id', one.f.flows.id.modal.form.srcIp); + var $help = one.lib.form.help("Example: 127.0.0.1"); + $fieldset.append($label).append($input).append($help); + // dstIp + var $label = one.lib.form.label("Destination IP Address"); + var $input = one.lib.form.input("Destination IP Address"); + $input.attr('id', one.f.flows.id.modal.form.dstIp); + var $help = one.lib.form.help("Example: 127.0.0.1"); + $fieldset.append($label).append($input).append($help); + // tosBits + var $label = one.lib.form.label("TOS Bits"); + var $input = one.lib.form.input("TOS Bits"); + $input.attr('id', one.f.flows.id.modal.form.tosBits); + var $help = one.lib.form.help("Range: 0 - 63"); + $fieldset.append($label).append($input).append($help); + // layer 4 + var $legend = one.lib.form.legend("Layer 4"); + $fieldset.append($legend); + // srcPort + var $label = one.lib.form.label("Source Port"); + var $input = one.lib.form.input("Source Port"); + $input.attr('id', one.f.flows.id.modal.form.srcPort); + var $help = one.lib.form.help("Range: 0 - 65535"); + $fieldset.append($label).append($input).append($help); + // dstPort + var $label = one.lib.form.label("Destination Port"); + var $input = one.lib.form.input("Destination Port"); + $input.attr('id', one.f.flows.id.modal.form.dstPort); + var $help = one.lib.form.help("Range: 0 - 65535"); + $fieldset.append($label).append($input).append($help); + // protocol + var $label = one.lib.form.label("Protocol"); + var $input = one.lib.form.input("Protocol"); + $input.attr('id', one.f.flows.id.modal.form.protocol); + $fieldset.append($label).append($input); + // actions + var $legend = one.lib.form.label("Actions"); + $fieldset.append($legend); + // actions table + var tableAttributes = ["table-striped", "table-bordered", "table-condensed", "table-hover", "table-cursor"]; + var $table = one.lib.dashlet.table.table(tableAttributes); + $table.attr('id', one.f.flows.id.modal.action.table); + var tableHeaders = ["Action", "Data", "Type"]; + var $thead = one.lib.dashlet.table.header(tableHeaders); + var $tbody = one.lib.dashlet.table.body("", tableHeaders); + $table.append($thead).append($tbody); + // actions + var actions = { + "" : "Please Select an Action", + "drop" : "Drop", + "loopback" : "Loopback", + "flood" : "Flood", + "softwarePath" : "Software Path", + "hardwarePath" : "Hardware Path", + "controller" : "Controller", + "addOutputPorts" : "Add Output Ports", + "setVlanId" : "Set VLAN ID", + "setVlanPriority" : "Set VLAN Priority", + "stripVlanHeader" : "Strip VLAN Header", + "modifyDatalayerSourceAddress" : "Modify Datalayer Source Address", + "modifyDatalayerDestinationAddress" : "Modify Datalayer Destination Address", + "modifyNetworkSourceAddress" : "Modify Network Source Address", + "modifyNetworkDestinationAddress" :"Modify Network Destination Address", + "modifyTosBits" : "Modify TOS Bits", + "modifyTransportSourcePort" : "Modify Transport Source Port", + "modifyTransportDestinationPort" : "Modify Transport Destination Port" + }; var $select = one.lib.form.select.create(actions); // when selecting an action $select.change(function() { var action = $(this).find('option:selected'); one.f.flows.modal.action.parse(action.attr('value')); - $select[0].selectedIndex = 0; + $select[0].selectedIndex = 0; }); - $fieldset.append($select).append($table); + $fieldset.append($select).append($table); - // return - $form.append($fieldset); - return $form; + // return + $form.append($fieldset); + return $form; }, action : { parse : function(option) { @@ -991,9 +1011,9 @@ one.f.flows = { var $tr = one.f.flows.modal.action.table.add("Add Output Ports", ports); $tr.attr('id', 'addOutputPorts'); $tr.data('action', 'OUTPUT='+pid); - $tr.click(function() { - one.f.flows.modal.action.add.modal.initialize(this); - }); + $tr.click(function() { + one.f.flows.modal.action.add.modal.initialize(this); + }); one.f.flows.modal.action.table.append($tr); $modal.modal('hide'); }, @@ -1001,9 +1021,9 @@ one.f.flows = { var $tr = one.f.flows.modal.action.table.add(name); $tr.attr('id', action); $tr.data('action', action); - $tr.click(function() { - one.f.flows.modal.action.add.modal.initialize(this); - }); + $tr.click(function() { + one.f.flows.modal.action.add.modal.initialize(this); + }); one.f.flows.modal.action.table.append($tr); }, set : function(name, id, action, $modal) { @@ -1012,64 +1032,64 @@ one.f.flows = { var $tr = one.f.flows.modal.action.table.add(name, value); $tr.attr('id', action); $tr.data('action', action+'='+value); - $tr.click(function() { - one.f.flows.modal.action.add.modal.initialize(this); - }); + $tr.click(function() { + one.f.flows.modal.action.add.modal.initialize(this); + }); one.f.flows.modal.action.table.append($tr); $modal.modal('hide'); }, - remove : function(that) { - $(that).remove(); - var $table = $('#'+one.f.flows.id.modal.action.table); - if ($table.find('tbody').find('tr').size() == 0) { - var $tr = $(document.createElement('tr')); - var $td = $(document.createElement('td')); - $td.attr('colspan', '3'); - $tr.addClass('empty'); - $td.text('No data available'); - $tr.append($td); - $table.find('tbody').append($tr); - } - }, - modal : { - initialize : function(that) { - var h3 = "Remove Action"; - var footer = one.f.flows.modal.action.add.modal.footer(); - var $body = one.f.flows.modal.action.add.modal.body(); - var $modal = one.lib.modal.spawn(one.f.flows.id.modal.action.modal.modal, h3, $body, footer); - - // bind cancel button - $('#'+one.f.flows.id.modal.action.modal.cancel, $modal).click(function() { - $modal.modal('hide'); - }); - - // bind remove button - $('#'+one.f.flows.id.modal.action.modal.remove, $modal).click(function() { - one.f.flows.modal.action.add.remove(that); - $modal.modal('hide'); - }); - - $modal.modal(); - }, - body : function() { - var $p = $(document.createElement('p')); - $p.append("Remove this action?"); - return $p; - }, - footer : function() { - var footer = []; - - var removeButton = one.lib.dashlet.button.single("Remove Action", one.f.flows.id.modal.action.modal.remove, "btn-danger", ""); - var $removeButton = one.lib.dashlet.button.button(removeButton); - footer.push($removeButton); - - var cancelButton = one.lib.dashlet.button.single("Cancel", one.f.flows.id.modal.action.modal.cancel, "", ""); - var $cancelButton = one.lib.dashlet.button.button(cancelButton); - footer.push($cancelButton); - - return footer; - } - } + remove : function(that) { + $(that).remove(); + var $table = $('#'+one.f.flows.id.modal.action.table); + if ($table.find('tbody').find('tr').size() == 0) { + var $tr = $(document.createElement('tr')); + var $td = $(document.createElement('td')); + $td.attr('colspan', '3'); + $tr.addClass('empty'); + $td.text('No data available'); + $tr.append($td); + $table.find('tbody').append($tr); + } + }, + modal : { + initialize : function(that) { + var h3 = "Remove Action"; + var footer = one.f.flows.modal.action.add.modal.footer(); + var $body = one.f.flows.modal.action.add.modal.body(); + var $modal = one.lib.modal.spawn(one.f.flows.id.modal.action.modal.modal, h3, $body, footer); + + // bind cancel button + $('#'+one.f.flows.id.modal.action.modal.cancel, $modal).click(function() { + $modal.modal('hide'); + }); + + // bind remove button + $('#'+one.f.flows.id.modal.action.modal.remove, $modal).click(function() { + one.f.flows.modal.action.add.remove(that); + $modal.modal('hide'); + }); + + $modal.modal(); + }, + body : function() { + var $p = $(document.createElement('p')); + $p.append("Remove this action?"); + return $p; + }, + footer : function() { + var footer = []; + + var removeButton = one.lib.dashlet.button.single("Remove Action", one.f.flows.id.modal.action.modal.remove, "btn-danger", ""); + var $removeButton = one.lib.dashlet.button.button(removeButton); + footer.push($removeButton); + + var cancelButton = one.lib.dashlet.button.single("Cancel", one.f.flows.id.modal.action.modal.cancel, "", ""); + var $cancelButton = one.lib.dashlet.button.button(cancelButton); + footer.push($cancelButton); + + return footer; + } + } }, table : { add : function(action, data, type) { @@ -1143,9 +1163,9 @@ one.f.flows = { footer : function() { var footer = []; - var installButton = one.lib.dashlet.button.single("Install Flow", one.f.flows.id.modal.install, "btn-success", ""); - var $installButton = one.lib.dashlet.button.button(installButton); - footer.push($installButton); + var installButton = one.lib.dashlet.button.single("Install Flow", one.f.flows.id.modal.install, "btn-success", ""); + var $installButton = one.lib.dashlet.button.button(installButton); + footer.push($installButton); var addButton = one.lib.dashlet.button.single("Save Flow", one.f.flows.id.modal.add, "btn-primary", ""); var $addButton = one.lib.dashlet.button.button(addButton); @@ -1163,13 +1183,38 @@ one.f.flows = { $.getJSON(one.f.address.root+one.f.address.flows.main, function(data) { one.f.flows.registry['flows'] = data.flows; one.f.flows.registry['privilege'] = data.privilege; - var body = one.f.flows.data.dashlet(data.flows); - var $body = one.f.flows.body.dashlet(body, callback); - callback($body); + callback(data); }); } }, data : { + flowsDataGrid: function(data) { + var source = new StaticDataSource({ + columns: [ + { + property: 'name', + label: 'Flow Name', + sortable: true + }, + { + property: 'node', + label: 'Node', + sortable: true + } + ], + data: data.flows, + formatter: function(items) { + $.each(items, function(index, item) { + item["name"] = '' + item["name"] + ''; + }); + + }, + delay: 0 + }); + return source; + }, dashlet : function(data) { var body = []; $(data).each(function(index, value) { @@ -1178,11 +1223,11 @@ one.f.flows = { entry.push(value['name']); entry.push(value['node']); if (value['flow']['installInHw'] == 'true' && value['flow']['status'] == 'Success') - tr['type'] = ['success']; + tr['type'] = ['success']; else if (value['flow']['installInHw'] == 'false' && value['flow']['status'] == 'Success') - tr['type'] = ['warning']; + tr['type'] = ['warning']; else - tr['type'] = ['warning']; + tr['type'] = ['warning']; tr['entry'] = entry; tr['id'] = value['nodeId']; diff --git a/opendaylight/web/troubleshoot/src/main/resources/js/page.js b/opendaylight/web/troubleshoot/src/main/resources/js/page.js index 87e07f57df..3f0dc9e812 100644 --- a/opendaylight/web/troubleshoot/src/main/resources/js/page.js +++ b/opendaylight/web/troubleshoot/src/main/resources/js/page.js @@ -1,4 +1,3 @@ - /* * Copyright (c) 2013 Cisco Systems, Inc. and others. All rights reserved. * @@ -18,12 +17,12 @@ one.f.dashlet = { name : 'Existing Nodes' }, uptime: { - id: 'uptime', - name: 'Uptime' + id: 'uptime', + name: 'Uptime' }, flowsOrPorts: { - id: "flowsOrPorts", - name: "Statistics" + id: "flowsOrPorts", + name: "Statistics" } }; @@ -63,234 +62,484 @@ $(one.f.menu.right.bottom).each(function(index, value) { /**Troubleshoot modules*/ one.f.troubleshooting = { - rootUrl: "/controller/web/troubleshoot", - rightBottomDashlet: { - get: function() { - var $rightBottomDashlet = $("#right-bottom").find(".dashlet"); - return $rightBottomDashlet; - }, - setDashletHeader: function(label) { - $("#right-bottom li a")[0].innerHTML = label; - } - }, - createTable: function(columnNames, body) { - var tableAttributes = ["table-striped", "table-bordered", "table-condensed"]; - var $table = one.lib.dashlet.table.table(tableAttributes); - var tableHeaders = columnNames; - var $thead = one.lib.dashlet.table.header(tableHeaders); - var $tbody = one.lib.dashlet.table.body(body, tableHeaders); - $table.append($thead) - .append($tbody); - return $table; - } + rootUrl: "/controller/web/troubleshoot", + rightBottomDashlet: { + get: function() { + var $rightBottomDashlet = $("#right-bottom").find(".dashlet"); + return $rightBottomDashlet; + }, + setDashletHeader: function(label) { + $("#right-bottom li a")[0].innerHTML = label; + } + }, + createTable: function(columnNames, body) { + var tableAttributes = ["table-striped", "table-bordered", "table-condensed"]; + var $table = one.lib.dashlet.table.table(tableAttributes); + var tableHeaders = columnNames; + var $thead = one.lib.dashlet.table.header(tableHeaders); + var $tbody = one.lib.dashlet.table.body(body, tableHeaders); + $table.append($thead) + .append($tbody); + return $table; + } }; one.f.troubleshooting.existingNodes = { - id: { - popout: "one_f_troubleshooting_existingNodes_id_popout", - modal: "one_f_troubleshooting_existingNodes_id_modal" - }, - // TODO: Make these values configurable. - autoRefreshInterval: { - flows: 10000, - ports: 10000, - refreshRateInterval: 5000 - }, - load: { - main: function($dashlet) { - one.lib.dashlet.empty($dashlet); - $dashlet.append(one.lib.dashlet.header(one.f.dashlet.existingNodes.name)); - - // TODO(l): Add a generic auto expand function to one.lib and replace custom height setting. - //$('#left-top').height('100%'); - one.f.troubleshooting.existingNodes.ajax(one.f.troubleshooting.rootUrl + "/existingNodes" , function(content) { - var body = one.f.troubleshooting.existingNodes.data.existingNodes(content); - var $table = one.f.troubleshooting.createTable(content.columnNames, body); - $dashlet.append($table); - }); - }, - flows: function(nodeId) { - try { - clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer); - $.getJSON(one.main.constants.address.prefix + "/troubleshoot/flowStats?nodeId=" + nodeId, function(content) { - var body = one.f.troubleshooting.existingNodes.data.flows(content); - var $table = one.f.troubleshooting.createTable(content.columnNames, body); - $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get(); - one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Flows"); - one.lib.dashlet.empty($rightBottomDashlet); - $rightBottomDashlet.append(one.lib.dashlet.header("Flow Details")); - $rightBottomDashlet.append($table); - var numberOfFlows = content.nodeData.length; - var refreshRate = one.f.troubleshooting.existingNodes.autoRefreshInterval.flows; - if (numberOfFlows > 0) { - refreshRate += Math.floor(numberOfFlows / 500) * - one.f.troubleshooting.existingNodes.autoRefreshInterval.refreshRateInterval; - } - one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout( - one.f.troubleshooting.existingNodes.load.flows, - refreshRate, nodeId); - }); - } catch(e) {} - }, - ports: function(nodeId) { - try { - clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer); - $.getJSON(one.main.constants.address.prefix + "/troubleshoot/portStats?nodeId=" + nodeId, function(content) { - var body = one.f.troubleshooting.existingNodes.data.ports(content); - var $table = one.f.troubleshooting.createTable(content.columnNames, body); - $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get(); - one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Ports"); - one.lib.dashlet.empty($rightBottomDashlet); - $rightBottomDashlet.append(one.lib.dashlet.header("Port Details")); - $rightBottomDashlet.append($table); - var numberOfPorts = content.nodeData.length; - var refreshRate = one.f.troubleshooting.existingNodes.autoRefreshInterval.ports; - if (numberOfPorts > 0) { - refreshRate += Math.floor(numberOfPorts / 500) * - one.f.troubleshooting.existingNodes.autoRefreshInterval.refreshRateInterval; - } - one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout( - one.f.troubleshooting.existingNodes.load.ports, - refreshRate, nodeId); - }); - } catch(e) {} - } - }, - ajax : function(url, callback) { - $.getJSON(url, function(data) { - callback(data); - }); - }, - registry: {}, - modal : { - }, - data : { - existingNodes : function(data) { - var result = []; - $.each(data.nodeData, function(key, value) { - var tr = {}; - var entry = []; - entry.push(value["nodeName"]); - entry.push(value["nodeId"]); - var nodeIdvalue = value["nodeId"]; - entry.push("Flows" + - " Ports"); - tr.entry = entry; - result.push(tr); - }); - return result; - }, - ports: function(data) { - var result = []; - $.each(data.nodeData, function(key, value) { - var tr = {}; - var entry = []; - entry.push(value["nodeConnector"]); - entry.push(value["rxPkts"]); - entry.push(value["txPkts"]); - entry.push(value["rxBytes"]); - entry.push(value["txBytes"]); - entry.push(value["rxDrops"]); - entry.push(value["txDrops"]); - entry.push(value["rxErrors"]); - entry.push(value["txErrors"]); - entry.push(value["rxFrameErrors"]); - entry.push(value["rxOverRunErrors"]); - entry.push(value["rxCRCErrors"]); - entry.push(value["collisions"]); - tr.entry = entry; - result.push(tr); - }); - return result; - }, - flows: function(data) { - var result = []; - $.each(data.nodeData, function(key, value) { - var tr = {}; - var entry = []; - entry.push(value["nodeName"]); - entry.push(value["inPort"]); - entry.push(value["dlSrc"]); - entry.push(value["dlDst"]); - entry.push(value["dlType"]); - entry.push(value["dlVlan"]); - entry.push(value["nwSrc"]); - entry.push(value["nwDst"]); - entry.push(value["nwProto"]); - entry.push(value["tpSrc"]); - entry.push(value["tpDst"]); - entry.push(value["actions"]); - entry.push(value["byteCount"]); - entry.push(value["packetCount"]); - entry.push(value["durationSeconds"]); - entry.push(value["idleTimeout"]); - entry.push(value["outPorts"]); - entry.push(value["outVlanId"]); - entry.push(value["priority"]); - tr.entry = entry; - result.push(tr); - }); - return result; - } - } + id: { + popout: "one_f_troubleshooting_existingNodes_id_popout", + modal: "one_f_troubleshooting_existingNodes_id_modal", + existingNodesDataGrid: "one_f_troubleshooting_existingNodes_id_datagrid", + portsDataGrid: "one_f_troubleshooting_existingNodes_id_portsDataGrid", + flowsDataGrid: "one_f_troubleshooting_existingNodes_id_flowsDataGrid" + }, + // TODO: Make these values configurable. + autoRefreshInterval: { + flows: 10000, + ports: 10000, + refreshRateInterval: 5000 + }, + load: { + main: function($dashlet) { + one.lib.dashlet.empty($dashlet); + $dashlet.append(one.lib.dashlet.header(one.f.dashlet.existingNodes.name)); + // TODO(l): Add a generic auto expand function to one.lib and replace custom height setting. + //$('#left-top').height('100%'); + one.f.troubleshooting.existingNodes.ajax(one.f.troubleshooting.rootUrl + "/existingNodes" , function(content) { + var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.existingNodesDataGrid, { + searchable: true, + filterable: false, + pagination: true, + flexibleRowsPerPage: true + }, "table-striped table-condensed"); + $dashlet.append($gridHTML); + var dataSource = one.f.troubleshooting.existingNodes.data.existingNodesGrid(content); + $("#" + one.f.troubleshooting.existingNodes.id.existingNodesDataGrid).datagrid({dataSource: dataSource}); + + }); + }, + flows: function(nodeId) { + try { + clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer); + $.getJSON(one.main.constants.address.prefix + "/troubleshoot/flowStats?nodeId=" + nodeId, function(content) { + $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get(); + one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Flows"); + one.lib.dashlet.empty($rightBottomDashlet); + $rightBottomDashlet.append(one.lib.dashlet.header("Flow Details")); + + var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.flowsDataGrid, { + searchable: true, + filterable: false, + pagination: true, + flexibleRowsPerPage: true + }, "table-striped table-condensed"); + $rightBottomDashlet.append($gridHTML); + var dataSource = one.f.troubleshooting.existingNodes.data.flowsGrid(content); + $("#" + one.f.troubleshooting.existingNodes.id.flowsDataGrid).datagrid({dataSource: dataSource}); + + var numberOfFlows = content.nodeData.length; + var refreshRate = one.f.troubleshooting.existingNodes.autoRefreshInterval.flows; + if (numberOfFlows > 0) { + refreshRate += Math.floor(numberOfFlows / 500) * + one.f.troubleshooting.existingNodes.autoRefreshInterval.refreshRateInterval; + } + one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout( + one.f.troubleshooting.existingNodes.load.flows, + refreshRate, nodeId); + }); + } catch(e) {} + }, + ports: function(nodeId) { + try { + clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer); + $.getJSON(one.main.constants.address.prefix + "/troubleshoot/portStats?nodeId=" + nodeId, function(content) { + $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get(); + one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Ports"); + one.lib.dashlet.empty($rightBottomDashlet); + $rightBottomDashlet.append(one.lib.dashlet.header("Port Details")); + + var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.portsDataGrid, { + searchable: true, + filterable: false, + pagination: true, + flexibleRowsPerPage: true + }, "table-striped table-condensed"); + $rightBottomDashlet.append($gridHTML); + var dataSource = one.f.troubleshooting.existingNodes.data.portsGrid(content); + $("#" + one.f.troubleshooting.existingNodes.id.portsDataGrid).datagrid({dataSource: dataSource}); + + var numberOfPorts = content.nodeData.length; + var refreshRate = one.f.troubleshooting.existingNodes.autoRefreshInterval.ports; + if (numberOfPorts > 0) { + refreshRate += Math.floor(numberOfPorts / 500) * + one.f.troubleshooting.existingNodes.autoRefreshInterval.refreshRateInterval; + } + one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout( + one.f.troubleshooting.existingNodes.load.ports, + refreshRate, nodeId); + }); + } catch(e) {} + } + }, + ajax : function(url, callback) { + $.getJSON(url, function(data) { + callback(data); + }); + }, + registry: {}, + modal : { + }, + data : { + existingNodesGrid: function(data) { + var source = new StaticDataSource({ + columns: [ + { + property: 'nodeName', + label: 'Name', + sortable: true + }, + { + property: 'nodeId', + label: 'Static Route', + sortable: true + }, + { + property: 'statistics', + label: 'Statistics', + sortable: true + } + ], + data: data.nodeData, + formatter: function(items) { + $.each(items, function(index, item) { + item["statistics"] = "Flows" + + " Ports"; + }); + + }, + delay: 0 + }); + return source; + }, + portsGrid: function(data) { + var source = new StaticDataSource({ + columns: [ + { + property: 'nodeConnector', + label: 'Node Connector', + sortable: true + }, + { + property: 'rxPkts', + label: 'Rx Pkts', + sortable: true + }, + { + property: 'txPkts', + label: 'Tx Pkts', + sortable: true + }, + { + property: 'rxBytes', + label: 'Rx Bytes', + sortable: true + }, + { + property: 'txBytes', + label: 'Tx Bytes', + sortable: true + }, + { + property: 'rxDrops', + label: 'Rx Drops', + sortable: true + }, + { + property: 'txDrops', + label: 'Tx Drops', + sortable: true + }, + { + property: 'rxErrors', + label: 'Rx Errs', + sortable: true + }, + { + property: 'txErrors', + label: 'Tx Errs', + sortable: true + }, + { + property: 'rxFrameErrors', + label: 'Rx Frame Errs', + sortable: true + }, + { + property: 'rxOverRunErrors', + label: 'Rx OverRun Errs', + sortable: true + }, + { + property: 'rxCRCErrors', + label: 'Rx CRC Errs', + sortable: true + }, + { + property: 'collisions', + label: 'Collisions', + sortable: true + } + ], + data: data.nodeData, + delay: 200 + }); + return source; + }, + ports: function(data) { + var result = []; + $.each(data.nodeData, function(key, value) { + var tr = {}; + var entry = []; + entry.push(value["nodeConnector"]); + entry.push(value["rxPkts"]); + entry.push(value["txPkts"]); + entry.push(value["rxBytes"]); + entry.push(value["txBytes"]); + entry.push(value["rxDrops"]); + entry.push(value["txDrops"]); + entry.push(value["rxErrors"]); + entry.push(value["txErrors"]); + entry.push(value["rxFrameErrors"]); + entry.push(value["rxOverRunErrors"]); + entry.push(value["rxCRCErrors"]); + entry.push(value["collisions"]); + tr.entry = entry; + result.push(tr); + }); + return result; + }, + flowsGrid: function(data) { + var source = new StaticDataSource({ + columns: [ + { + property: 'nodeName', + label: 'Node', + sortable: true + }, + { + property: 'inPort', + label: 'In Port', + sortable: true + }, + { + property: 'dlSrc', + label: 'DL Src', + sortable: true + }, + { + property: 'dlDst', + label: 'DL Dst', + sortable: true + }, + { + property: 'dlType', + label: 'DL Type', + sortable: true + }, + { + property: 'dlVlan', + label: 'DL Vlan', + sortable: true + }, + { + property: 'nwSrc', + label: 'NW Src', + sortable: true + }, + { + property: 'nwDst', + label: 'NW Dst', + sortable: true + }, + { + property: 'nwProto', + label: 'NW Proto', + sortable: true + }, + { + property: 'tpSrc', + label: 'TP Src', + sortable: true + }, + { + property: 'tpDst', + label: 'TP Dst', + sortable: true + }, + { + property: 'actions', + label: 'Actions', + sortable: true + }, + { + property: 'byteCount', + label: 'Byte Count', + sortable: true + }, + { + property: 'packetCount', + label: 'Packet Count', + sortable: true + }, + { + property: 'durationSeconds', + label: 'Duration Seconds', + sortable: true + }, + { + property: 'idleTimeout', + label: 'Idle Timeout', + sortable: true + }, + { + property: 'outPorts', + label: 'Out Ports', + sortable: true + }, + { + property: 'outVlanId', + label: 'Out VlanId', + sortable: true + }, + { + property: 'priority', + label: 'Priority', + sortable: true + } + ], + data: data.nodeData, + delay: 0 + }); + return source; + }, + flows: function(data) { + var result = []; + $.each(data.nodeData, function(key, value) { + var tr = {}; + var entry = []; + entry.push(value["nodeName"]); + entry.push(value["inPort"]); + entry.push(value["dlSrc"]); + entry.push(value["dlDst"]); + entry.push(value["dlType"]); + entry.push(value["dlVlan"]); + entry.push(value["nwSrc"]); + entry.push(value["nwDst"]); + entry.push(value["nwProto"]); + entry.push(value["tpSrc"]); + entry.push(value["tpDst"]); + entry.push(value["actions"]); + entry.push(value["byteCount"]); + entry.push(value["packetCount"]); + entry.push(value["durationSeconds"]); + entry.push(value["idleTimeout"]); + entry.push(value["outPorts"]); + entry.push(value["outVlanId"]); + entry.push(value["priority"]); + tr.entry = entry; + result.push(tr); + }); + return result; + } + } }; one.f.troubleshooting.uptime = { - id: { - popout: "one_f_troubleshooting_existingNodes_id_popout", - modal: "one_f_troubleshooting_existingNodes_id_modal" - }, + id: { + popout: "one_f_troubleshooting_uptime_id_popout", + modal: "one_f_troubleshooting_uptime_id_modal", + datagrid: "one_f_troubleshooting_uptime_id_datagrid" + }, - dashlet: function($dashlet) { - one.lib.dashlet.empty($dashlet); - $dashlet.append(one.lib.dashlet.header(one.f.dashlet.uptime.name)); - var url = one.f.troubleshooting.rootUrl + "/uptime"; - one.f.troubleshooting.uptime.ajax.main(url , {} ,function(content) { - var body = one.f.troubleshooting.uptime.data.uptime(content); - var $table = one.f.troubleshooting.createTable(content.columnNames, body); - $dashlet.append($table); - }); - }, - - ajax : { - main : function(url, requestData, callback) { - $.getJSON(url, requestData, function(data) { - callback(data); - }); - } - }, - - data: { - uptime: function(data) { - var result = []; - $.each(data.nodeData, function(key, value) { - var tr = {}; - var entry = []; - entry.push(value["nodeName"]); - entry.push(value["nodeId"]); - entry.push(value["connectedSince"]); - tr.entry = entry; - result.push(tr); - }); - return result; - } - }, + dashlet: function($dashlet) { + one.lib.dashlet.empty($dashlet); + $dashlet.append(one.lib.dashlet.header(one.f.dashlet.uptime.name)); + var url = one.f.troubleshooting.rootUrl + "/uptime"; + one.f.troubleshooting.uptime.ajax.main(url , {} ,function(content) { + var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.uptime.id.datagrid, { + searchable: true, + filterable: false, + pagination: true, + flexibleRowsPerPage: true + }, "table-striped table-condensed"); + $dashlet.append($gridHTML); + var dataSource = one.f.troubleshooting.uptime.data.uptimeDataGrid(content); + $("#" + one.f.troubleshooting.uptime.id.datagrid).datagrid({dataSource: dataSource}); + }); + }, + + ajax : { + main : function(url, requestData, callback) { + $.getJSON(url, requestData, function(data) { + callback(data); + }); + } + }, + + data: { + uptimeDataGrid: function(data) { + var source = new StaticDataSource({ + columns: [ + { + property: 'nodeName', + label: 'Node', + sortable: true + }, + { + property: 'nodeId', + label: 'Node ID', + sortable: true + }, + { + property: 'connectedSince', + label: 'Statistics', + sortable: true + } + ], + data: data.nodeData, + delay: 0 + }); + return source; + }, + uptime: function(data) { + var result = []; + $.each(data.nodeData, function(key, value) { + var tr = {}; + var entry = []; + entry.push(value["nodeName"]); + entry.push(value["nodeId"]); + entry.push(value["connectedSince"]); + tr.entry = entry; + result.push(tr); + }); + return result; + } + }, }; one.f.troubleshooting.statistics = { - dashlet : function($dashlet) { + dashlet : function($dashlet) { var $h4 = one.lib.dashlet.header("Statistics"); $dashlet.append($h4); - // empty - var $none = $(document.createElement('div')); - $none.addClass('none'); - var $p = $(document.createElement('p')); - $p.text('Please select a Flow or Ports statistics'); - $p.addClass('text-center').addClass('text-info'); - - $dashlet.append($none) - .append($p); - } + // empty + var $none = $(document.createElement('div')); + $none.addClass('none'); + var $p = $(document.createElement('p')); + $p.text('Please select a Flow or Ports statistics'); + $p.addClass('text-center').addClass('text-info'); + + $dashlet.append($none) + .append($p); + } }; // bind dashlet nav @@ -308,14 +557,14 @@ $('.dash .nav a', '#main').click(function() { var menu = one.f.dashlet; switch (id) { case menu.existingNodes.id: - one.f.troubleshooting.existingNodes.load.main($dashlet); + one.f.troubleshooting.existingNodes.load.main($dashlet); break; case menu.uptime.id: - one.f.troubleshooting.uptime.dashlet($dashlet); - break; - case menu.flowsOrPorts.id: - one.f.troubleshooting.statistics.dashlet($dashlet); - break; + one.f.troubleshooting.uptime.dashlet($dashlet); + break; + case menu.flowsOrPorts.id: + one.f.troubleshooting.statistics.dashlet($dashlet); + break; }; }); -- 2.36.6