opendaylight/web/troubleshoot/src/main/resources/js/page.js

   1
   2 /*
   3  * Copyright (c) 2013 Cisco Systems, Inc. and others.  All rights reserved.
   4  *
   5  * This program and the accompanying materials are made available under the
   6  * terms of the Eclipse Public License v1.0 which accompanies this distribution,
   7  * and is available at http://www.eclipse.org/legal/epl-v10.html
   8  *
   9  */
  10
  11 //PAGE troubleshoot
  12 one.f = {};
  13
  14 // specify dashlets and layouts
  15 one.f.dashlet = {
  16     existingNodes : {
  17         id : 'existingNodes',
  18         name : 'Existing Nodes'
  19     },
  20     uptime: {
  21         id: 'uptime',
  22         name: 'Uptime'
  23     },
  24     flowsOrPorts: {
  25         id: "flowsOrPorts",
  26         name: "Statistics"
  27     }
  28 };
  29
  30 one.f.menu = {
  31     left : {
  32         top : [
  33             one.f.dashlet.existingNodes
  34         ],
  35         bottom : [
  36             one.f.dashlet.uptime
  37         ]
  38     },
  39     right : {
  40         top : [],
  41         bottom : [
  42             one.f.dashlet.flowsOrPorts
  43         ]
  44     }
  45 };
  46
  47 /** INIT **/
  48 // populate nav tabs
  49 $(one.f.menu.left.top).each(function(index, value) {
  50     var $nav = $(".nav", "#left-top");
  51     one.main.page.dashlet($nav, value);
  52 });
  53
  54 $(one.f.menu.left.bottom).each(function(index, value) {
  55     var $nav = $(".nav", "#left-bottom");
  56     one.main.page.dashlet($nav, value);
  57 });
  58
  59 $(one.f.menu.right.bottom).each(function(index, value) {
  60     var $nav = $(".nav", "#right-bottom");
  61     one.main.page.dashlet($nav, value);
  62 });
  63
  64 /**Troubleshoot modules*/
  65 one.f.troubleshooting = {
  66         rootUrl: "/controller/web/troubleshoot",
  67         rightBottomDashlet: {
  68                 get: function() {
  69                         var $rightBottomDashlet = $("#right-bottom").find(".dashlet");
  70                         return $rightBottomDashlet;
  71                 },
  72                 setDashletHeader: function(label) {
  73                         $("#right-bottom li a")[0].innerHTML = label;
  74                 }
  75         },
  76         createTable: function(columnNames, body) {
  77                 var tableAttributes = ["table-striped", "table-bordered", "table-condensed"];
  78                 var $table = one.lib.dashlet.table.table(tableAttributes);
  79                 var tableHeaders = columnNames;
  80                 var $thead = one.lib.dashlet.table.header(tableHeaders);
  81                 var $tbody = one.lib.dashlet.table.body(body, tableHeaders);
  82                 $table.append($thead)
  83                         .append($tbody);
  84                 return $table;
  85         }
  86 };
  87
  88 one.f.troubleshooting.existingNodes = {
  89                 id: {
  90                         popout: "one_f_troubleshooting_existingNodes_id_popout",
  91                         modal: "one_f_troubleshooting_existingNodes_id_modal"
  92                 },
  93                 // TODO: Make these values configurable.
  94                 autoRefreshInterval: {
  95                         flows: 10000,
  96                         ports: 10000,
  97                         refreshRateInterval: 5000
  98                 },
  99                 load: {
 100                         main: function($dashlet) {
 101                                 one.lib.dashlet.empty($dashlet);
 102                                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.existingNodes.name));
 103
 104                                 // TODO(l): Add a generic auto expand function to one.lib and replace custom height setting.
 105                                 //$('#left-top').height('100%');
 106                                 one.f.troubleshooting.existingNodes.ajax(one.f.troubleshooting.rootUrl + "/existingNodes" , function(content) {
 107                                         var body = one.f.troubleshooting.existingNodes.data.existingNodes(content);
 108                                         var $table = one.f.troubleshooting.createTable(content.columnNames, body);
 109                                         $dashlet.append($table);
 110                                 });
 111                         },
 112                         flows: function(nodeId) {
 113                                 try {
 114                                         clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer);
 115                                         $.getJSON(one.main.constants.address.prefix + "/troubleshoot/flowStats?nodeId=" + nodeId, function(content) {
 116                                                 var body = one.f.troubleshooting.existingNodes.data.flows(content);
 117                                                 var $table = one.f.troubleshooting.createTable(content.columnNames, body);
 118                                                 $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get();
 119                                                 one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Flows");
 120                                                 one.lib.dashlet.empty($rightBottomDashlet);
 121                                                 $rightBottomDashlet.append(one.lib.dashlet.header("Flow Details"));
 122                                                 $rightBottomDashlet.append($table);
 123                                                 var numberOfFlows = content.nodeData.length;
 124                                                 var refreshRate = one.f.troubleshooting.existingNodes.autoRefreshInterval.flows;
 125                                                 if (numberOfFlows > 0) {
 126                                                         refreshRate += Math.floor(numberOfFlows / 500) *
 127                                                                 one.f.troubleshooting.existingNodes.autoRefreshInterval.refreshRateInterval;
 128                                                 }
 129                                                 one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout(
 130                                                                 one.f.troubleshooting.existingNodes.load.flows,
 131                                                                 refreshRate, nodeId);
 132                                         });
 133                                 } catch(e) {}
 134                         },
 135                         ports: function(nodeId) {
 136                                 try {
 137                                         clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer);
 138                                         $.getJSON(one.main.constants.address.prefix + "/troubleshoot/portStats?nodeId=" + nodeId, function(content) {
 139                                                 var body = one.f.troubleshooting.existingNodes.data.ports(content);
 140                                                 var $table = one.f.troubleshooting.createTable(content.columnNames, body);
 141                                                 $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get();
 142                                                 one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Ports");
 143                                                 one.lib.dashlet.empty($rightBottomDashlet);
 144                                                 $rightBottomDashlet.append(one.lib.dashlet.header("Port Details"));
 145                                                 $rightBottomDashlet.append($table);
 146                                                 var numberOfPorts = content.nodeData.length;
 147                                                 var refreshRate = one.f.troubleshooting.existingNodes.autoRefreshInterval.ports;
 148                                                 if (numberOfPorts > 0) {
 149                                                         refreshRate += Math.floor(numberOfPorts / 500) *
 150                                                                 one.f.troubleshooting.existingNodes.autoRefreshInterval.refreshRateInterval;
 151                                                 }
 152                                                 one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout(
 153                                                                 one.f.troubleshooting.existingNodes.load.ports,
 154                                                                 refreshRate, nodeId);
 155                                         });
 156                                 } catch(e) {}
 157                         }
 158                 },
 159                 ajax : function(url, callback) {
 160                         $.getJSON(url, function(data) {
 161                                 callback(data);
 162                         });
 163                 },
 164                 registry: {},
 165                 modal : {
 166                 },
 167                 data : {
 168                         existingNodes : function(data) {
 169                                 var result = [];
 170                                 $.each(data.nodeData, function(key, value) {
 171                                         var tr = {};
 172                                         var entry = [];
 173                                         entry.push(value["nodeName"]);
 174                                         entry.push(value["nodeId"]);
 175                                         var nodeIdvalue = value["nodeId"];
 176                                         entry.push("<a href=\"javascript:one.f.troubleshooting.existingNodes.load.flows('" + value["nodeId"] + "');\">Flows</a>" +
 177                                                         " <a href=\"javascript:one.f.troubleshooting.existingNodes.load.ports('" + value["nodeId"] + "');\">Ports</a>");
 178                                         tr.entry = entry;
 179                                         result.push(tr);
 180                                 });
 181                                 return result;
 182                         },
 183                         ports: function(data) {
 184                                 var result = [];
 185                                 $.each(data.nodeData, function(key, value) {
 186                                         var tr = {};
 187                                         var entry = [];
 188                                         entry.push(value["nodeConnector"]);
 189                                         entry.push(value["rxPkts"]);
 190                                         entry.push(value["txPkts"]);
 191                                         entry.push(value["rxBytes"]);
 192                                         entry.push(value["txBytes"]);
 193                                         entry.push(value["rxDrops"]);
 194                                         entry.push(value["txDrops"]);
 195                                         entry.push(value["rxErrors"]);
 196                                         entry.push(value["txErrors"]);
 197                                         entry.push(value["rxFrameErrors"]);
 198                                         entry.push(value["rxOverRunErrors"]);
 199                                         entry.push(value["rxCRCErrors"]);
 200                                         entry.push(value["collisions"]);
 201                                         tr.entry = entry;
 202                                         result.push(tr);
 203                                 });
 204                                 return result;
 205                         },
 206                         flows: function(data) {
 207                                 var result = [];
 208                                 $.each(data.nodeData, function(key, value) {
 209                                         var tr = {};
 210                                         var entry = [];
 211                                         entry.push(value["nodeName"]);
 212                                         entry.push(value["inPort"]);
 213                                         entry.push(value["dlSrc"]);
 214                                         entry.push(value["dlDst"]);
 215                                         entry.push(value["dlType"]);
 216                                         entry.push(value["dlVlan"]);
 217                                         entry.push(value["nwSrc"]);
 218                                         entry.push(value["nwDst"]);
 219                                         entry.push(value["nwProto"]);
 220                                         entry.push(value["tpSrc"]);
 221                                         entry.push(value["tpDst"]);
 222                                         entry.push(value["actions"]);
 223                                         entry.push(value["byteCount"]);
 224                                         entry.push(value["packetCount"]);
 225                                         entry.push(value["durationSeconds"]);
 226                                         entry.push(value["idleTimeout"]);
 227                                         entry.push(value["outPorts"]);
 228                                         entry.push(value["outVlanId"]);
 229                                         entry.push(value["priority"]);
 230                                         tr.entry = entry;
 231                                         result.push(tr);
 232                                 });
 233                                 return result;
 234                         }
 235                 }
 236 };
 237
 238 one.f.troubleshooting.uptime = {
 239         id: {
 240                 popout: "one_f_troubleshooting_existingNodes_id_popout",
 241                 modal: "one_f_troubleshooting_existingNodes_id_modal"
 242         },
 243
 244         dashlet: function($dashlet) {
 245                         one.lib.dashlet.empty($dashlet);
 246                         $dashlet.append(one.lib.dashlet.header(one.f.dashlet.uptime.name));
 247                         var url = one.f.troubleshooting.rootUrl + "/uptime";
 248                         one.f.troubleshooting.uptime.ajax.main(url , {} ,function(content) {
 249                                 var body = one.f.troubleshooting.uptime.data.uptime(content);
 250                                 var $table = one.f.troubleshooting.createTable(content.columnNames, body);
 251                                 $dashlet.append($table);
 252                         });
 253         },
 254
 255         ajax : {
 256                 main : function(url, requestData, callback) {
 257                         $.getJSON(url, requestData, function(data) {
 258                                 callback(data);
 259                         });
 260                 }
 261         },
 262
 263         data: {
 264                 uptime: function(data) {
 265                         var result = [];
 266                         $.each(data.nodeData, function(key, value) {
 267                                 var tr = {};
 268                                 var entry = [];
 269                                 entry.push(value["nodeName"]);
 270                                 entry.push(value["nodeId"]);
 271                                 entry.push(value["connectedSince"]);
 272                                 tr.entry = entry;
 273                                 result.push(tr);
 274                         });
 275                         return result;
 276                 }
 277         },
 278 };
 279
 280 one.f.troubleshooting.statistics = {
 281         dashlet : function($dashlet) {
 282         var $h4 = one.lib.dashlet.header("Statistics");
 283         $dashlet.append($h4);
 284                 // empty
 285                 var $none = $(document.createElement('div'));
 286                 $none.addClass('none');
 287                 var $p = $(document.createElement('p'));
 288                 $p.text('Please select a Flow or Ports statistics');
 289                 $p.addClass('text-center').addClass('text-info');
 290
 291                 $dashlet.append($none)
 292                         .append($p);
 293         }
 294 };
 295
 296 // bind dashlet nav
 297 $('.dash .nav a', '#main').click(function() {
 298     // de/activation
 299     var $li = $(this).parent();
 300     var $ul = $li.parent();
 301     one.lib.nav.unfocus($ul);
 302     $li.addClass('active');
 303     // clear respective dashlet
 304     var $dashlet = $ul.parent().find('.dashlet');
 305     one.lib.dashlet.empty($dashlet);
 306     // callback based on menu
 307     var id = $(this).attr('id');
 308     var menu = one.f.dashlet;
 309     switch (id) {
 310         case menu.existingNodes.id:
 311                 one.f.troubleshooting.existingNodes.load.main($dashlet);
 312             break;
 313         case menu.uptime.id:
 314                 one.f.troubleshooting.uptime.dashlet($dashlet);
 315                         break;
 316                 case menu.flowsOrPorts.id:
 317                         one.f.troubleshooting.statistics.dashlet($dashlet);
 318                         break;
 319     };
 320 });
 321
 322 // activate first tab on each dashlet
 323 $('.dash .nav').each(function(index, value) {
 324     $($(value).find('li')[0]).find('a').click();
 325 });