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

   1 /*
   2  * Copyright (c) 2013 Cisco Systems, Inc. and others.  All rights reserved.
   3  *
   4  * This program and the accompanying materials are made available under the
   5  * terms of the Eclipse Public License v1.0 which accompanies this distribution,
   6  * and is available at http://www.eclipse.org/legal/epl-v10.html
   7  *
   8  */
   9
  10 //PAGE troubleshoot
  11 one.f = {};
  12
  13 // specify dashlets and layouts
  14 one.f.dashlet = {
  15     existingNodes : {
  16         id : 'existingNodes',
  17         name : 'Existing Nodes'
  18     },
  19     uptime: {
  20         id: 'uptime',
  21         name: 'Uptime'
  22     },
  23     flowsOrPorts: {
  24         id: "flowsOrPorts",
  25         name: "Statistics"
  26     }
  27 };
  28
  29 one.f.menu = {
  30     left : {
  31         top : [
  32             one.f.dashlet.existingNodes
  33         ],
  34         bottom : [
  35             one.f.dashlet.uptime
  36         ]
  37     },
  38     right : {
  39         top : [],
  40         bottom : [
  41             one.f.dashlet.flowsOrPorts
  42         ]
  43     }
  44 };
  45
  46 /** INIT **/
  47 // populate nav tabs
  48 $(one.f.menu.left.top).each(function(index, value) {
  49     var $nav = $(".nav", "#left-top");
  50     one.main.page.dashlet($nav, value);
  51 });
  52
  53 $(one.f.menu.left.bottom).each(function(index, value) {
  54     var $nav = $(".nav", "#left-bottom");
  55     one.main.page.dashlet($nav, value);
  56 });
  57
  58 $(one.f.menu.right.bottom).each(function(index, value) {
  59     var $nav = $(".nav", "#right-bottom");
  60     one.main.page.dashlet($nav, value);
  61 });
  62
  63 /**Troubleshoot modules*/
  64 one.f.troubleshooting = {
  65     rootUrl: "/controller/web/troubleshoot",
  66     rightBottomDashlet: {
  67         get: function() {
  68             var $rightBottomDashlet = $("#right-bottom").find(".dashlet");
  69             return $rightBottomDashlet;
  70         },
  71         setDashletHeader: function(label) {
  72             $("#right-bottom li a")[0].innerHTML = label;
  73         }
  74     },
  75     createTable: function(columnNames, body) {
  76         var tableAttributes = ["table-striped", "table-bordered", "table-condensed"];
  77         var $table = one.lib.dashlet.table.table(tableAttributes);
  78         var tableHeaders = columnNames;
  79         var $thead = one.lib.dashlet.table.header(tableHeaders);
  80         var $tbody = one.lib.dashlet.table.body(body, tableHeaders);
  81         $table.append($thead)
  82             .append($tbody);
  83         return $table;
  84     }
  85 };
  86
  87 one.f.troubleshooting.existingNodes = {
  88         id: {
  89             popout: "one_f_troubleshooting_existingNodes_id_popout",
  90             modal: "one_f_troubleshooting_existingNodes_id_modal",
  91             existingNodesDataGrid: "one_f_troubleshooting_existingNodes_id_datagrid",
  92             portsDataGrid: "one_f_troubleshooting_existingNodes_id_portsDataGrid",
  93             flowsDataGrid: "one_f_troubleshooting_existingNodes_id_flowsDataGrid"
  94         },
  95         // TODO: Make these values configurable.
  96         autoRefreshInterval: {
  97             flows: 10000,
  98             ports: 10000,
  99             refreshRateInterval: 5000
 100         },
 101         load: {
 102             main: function($dashlet) {
 103                 one.lib.dashlet.empty($dashlet);
 104                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.existingNodes.name));
 105                 // TODO(l): Add a generic auto expand function to one.lib and replace custom height setting.
 106                 //$('#left-top').height('100%');
 107                 one.f.troubleshooting.existingNodes.ajax(one.f.troubleshooting.rootUrl + "/existingNodes" , function(content) {
 108                     var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.existingNodesDataGrid, {
 109                         searchable: true,
 110                         filterable: false,
 111                         pagination: true,
 112                         flexibleRowsPerPage: true
 113                         }, "table-striped table-condensed");
 114                     $dashlet.append($gridHTML);
 115                     var dataSource = one.f.troubleshooting.existingNodes.data.existingNodesGrid(content);
 116                     $("#" + one.f.troubleshooting.existingNodes.id.existingNodesDataGrid).datagrid({dataSource: dataSource});
 117
 118                 });
 119             },
 120             flows: function(nodeId) {
 121                 try {
 122                     if(one.f.troubleshooting === undefined){
 123                         return;
 124                     }
 125                     clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer);
 126                     $.getJSON(one.main.constants.address.prefix + "/troubleshoot/flowStats?nodeId=" + nodeId, function(content) {
 127                         $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get();
 128                         one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Flows");
 129                         one.lib.dashlet.empty($rightBottomDashlet);
 130                         $rightBottomDashlet.append(one.lib.dashlet.header("Flow Details"));
 131
 132                         var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.flowsDataGrid, {
 133                             searchable: true,
 134                             filterable: false,
 135                             pagination: true,
 136                             flexibleRowsPerPage: true
 137                             }, "table-striped table-condensed");
 138                         $rightBottomDashlet.append($gridHTML);
 139                         var dataSource = one.f.troubleshooting.existingNodes.data.flowsGrid(content);
 140                         $("#" + one.f.troubleshooting.existingNodes.id.flowsDataGrid).datagrid({dataSource: dataSource});
 141
 142                         var numberOfFlows = content.nodeData.length;
 143                         var refreshRate = one.f.troubleshooting.existingNodes.autoRefreshInterval.flows;
 144                         if (numberOfFlows > 0) {
 145                             refreshRate += Math.floor(numberOfFlows / 500) *
 146                                 one.f.troubleshooting.existingNodes.autoRefreshInterval.refreshRateInterval;
 147                         }
 148                         one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout(
 149                                 one.f.troubleshooting.existingNodes.load.flows,
 150                                 refreshRate, nodeId);
 151                     });
 152                 } catch(e) {}
 153             },
 154             ports: function(nodeId) {
 155                 try {
 156                     if(one.f.troubleshooting === undefined){
 157                         return;
 158                     }
 159                     clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer);
 160                     $.getJSON(one.main.constants.address.prefix + "/troubleshoot/portStats?nodeId=" + nodeId, function(content) {
 161                         $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get();
 162                         one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Ports");
 163                         one.lib.dashlet.empty($rightBottomDashlet);
 164                         $rightBottomDashlet.append(one.lib.dashlet.header("Port Details"));
 165
 166                         var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.portsDataGrid, {
 167                             searchable: true,
 168                             filterable: false,
 169                             pagination: true,
 170                             flexibleRowsPerPage: true
 171                             }, "table-striped table-condensed");
 172                         $rightBottomDashlet.append($gridHTML);
 173                         var dataSource = one.f.troubleshooting.existingNodes.data.portsGrid(content);
 174                         $("#" + one.f.troubleshooting.existingNodes.id.portsDataGrid).datagrid({dataSource: dataSource});
 175
 176                         var numberOfPorts = content.nodeData.length;
 177                         var refreshRate = one.f.troubleshooting.existingNodes.autoRefreshInterval.ports;
 178                         if (numberOfPorts > 0) {
 179                             refreshRate += Math.floor(numberOfPorts / 500) *
 180                                 one.f.troubleshooting.existingNodes.autoRefreshInterval.refreshRateInterval;
 181                         }
 182                         one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout(
 183                                 one.f.troubleshooting.existingNodes.load.ports,
 184                                 refreshRate, nodeId);
 185                     });
 186                 } catch(e) {}
 187             }
 188         },
 189         ajax : function(url, callback) {
 190             $.getJSON(url, function(data) {
 191                 callback(data);
 192             });
 193         },
 194         registry: {},
 195         modal : {
 196         },
 197         data : {
 198             existingNodesGrid: function(data) {
 199                 var source = new StaticDataSource({
 200                     columns: [
 201                         {
 202                             property: 'nodeName',
 203                             label: 'Name',
 204                             sortable: true
 205                         },
 206                         {
 207                             property: 'nodeId',
 208                             label: 'Static Route',
 209                             sortable: true
 210                         },
 211                         {
 212                             property: 'statistics',
 213                             label: 'Statistics',
 214                             sortable: true
 215                         }
 216                     ],
 217                     data: data.nodeData,
 218                     formatter: function(items) {
 219                         $.each(items, function(index, item) {
 220                             item["statistics"] = "<a href=\"javascript:one.f.troubleshooting.existingNodes.load.flows('" + item["nodeId"] + "');\">Flows</a>" +
 221                             " <a href=\"javascript:one.f.troubleshooting.existingNodes.load.ports('" + item["nodeId"] + "');\">Ports</a>";
 222                         });
 223
 224                     },
 225                     delay: 0
 226                 });
 227                 return source;
 228             },
 229             portsGrid: function(data) {
 230                 var source = new StaticDataSource({
 231                     columns: [
 232                         {
 233                             property: 'nodeConnector',
 234                             label: 'Node Connector',
 235                             sortable: true
 236                         },
 237                         {
 238                             property: 'rxPkts',
 239                             label: 'Rx Pkts',
 240                             sortable: true
 241                         },
 242                         {
 243                             property: 'txPkts',
 244                             label: 'Tx Pkts',
 245                             sortable: true
 246                         },
 247                         {
 248                             property: 'rxBytes',
 249                             label: 'Rx Bytes',
 250                             sortable: true
 251                         },
 252                         {
 253                             property: 'txBytes',
 254                             label: 'Tx Bytes',
 255                             sortable: true
 256                         },
 257                         {
 258                             property: 'rxDrops',
 259                             label: 'Rx Drops',
 260                             sortable: true
 261                         },
 262                         {
 263                             property: 'txDrops',
 264                             label: 'Tx Drops',
 265                             sortable: true
 266                         },
 267                         {
 268                             property: 'rxErrors',
 269                             label: 'Rx Errs',
 270                             sortable: true
 271                         },
 272                         {
 273                             property: 'txErrors',
 274                             label: 'Tx Errs',
 275                             sortable: true
 276                         },
 277                         {
 278                             property: 'rxFrameErrors',
 279                             label: 'Rx Frame Errs',
 280                             sortable: true
 281                         },
 282                         {
 283                             property: 'rxOverRunErrors',
 284                             label: 'Rx OverRun Errs',
 285                             sortable: true
 286                         },
 287                         {
 288                             property: 'rxCRCErrors',
 289                             label: 'Rx CRC Errs',
 290                             sortable: true
 291                         },
 292                         {
 293                             property: 'collisions',
 294                             label: 'Collisions',
 295                             sortable: true
 296                         }
 297                     ],
 298                     data: data.nodeData,
 299                     delay: 200
 300                 });
 301                 return source;
 302             },
 303             ports: function(data) {
 304                 var result = [];
 305                 $.each(data.nodeData, function(key, value) {
 306                     var tr = {};
 307                     var entry = [];
 308                     entry.push(value["nodeConnector"]);
 309                     entry.push(value["rxPkts"]);
 310                     entry.push(value["txPkts"]);
 311                     entry.push(value["rxBytes"]);
 312                     entry.push(value["txBytes"]);
 313                     entry.push(value["rxDrops"]);
 314                     entry.push(value["txDrops"]);
 315                     entry.push(value["rxErrors"]);
 316                     entry.push(value["txErrors"]);
 317                     entry.push(value["rxFrameErrors"]);
 318                     entry.push(value["rxOverRunErrors"]);
 319                     entry.push(value["rxCRCErrors"]);
 320                     entry.push(value["collisions"]);
 321                     tr.entry = entry;
 322                     result.push(tr);
 323                 });
 324                 return result;
 325             },
 326             flowsGrid: function(data) {
 327                 var source = new StaticDataSource({
 328                     columns: [
 329                         {
 330                             property: 'nodeName',
 331                             label: 'Node',
 332                             sortable: true
 333                         },
 334                         {
 335                             property: 'inPort',
 336                             label: 'In Port',
 337                             sortable: true
 338                         },
 339                         {
 340                             property: 'dlSrc',
 341                             label: 'DL Src',
 342                             sortable: true
 343                         },
 344                         {
 345                             property: 'dlDst',
 346                             label: 'DL Dst',
 347                             sortable: true
 348                         },
 349                         {
 350                             property: 'dlType',
 351                             label: 'DL Type',
 352                             sortable: true
 353                         },
 354                         {
 355                             property: 'dlVlan',
 356                             label: 'DL Vlan',
 357                             sortable: true
 358                         },
 359                         {
 360                             property: 'nwSrc',
 361                             label: 'NW Src',
 362                             sortable: true
 363                         },
 364                         {
 365                             property: 'nwDst',
 366                             label: 'NW Dst',
 367                             sortable: true
 368                         },
 369                         {
 370                             property: 'nwProto',
 371                             label: 'NW Proto',
 372                             sortable: true
 373                         },
 374                         {
 375                             property: 'tpSrc',
 376                             label: 'TP Src',
 377                             sortable: true
 378                         },
 379                         {
 380                             property: 'tpDst',
 381                             label: 'TP Dst',
 382                             sortable: true
 383                         },
 384                         {
 385                             property: 'actions',
 386                             label: 'Actions',
 387                             sortable: true
 388                         },
 389                         {
 390                             property: 'byteCount',
 391                             label: 'Byte Count',
 392                             sortable: true
 393                         },
 394                         {
 395                             property: 'packetCount',
 396                             label: 'Packet Count',
 397                             sortable: true
 398                         },
 399                         {
 400                             property: 'durationSeconds',
 401                             label: 'Duration Seconds',
 402                             sortable: true
 403                         },
 404                         {
 405                             property: 'idleTimeout',
 406                             label: 'Idle Timeout',
 407                             sortable: true
 408                         },
 409                         {
 410                             property: 'priority',
 411                             label: 'Priority',
 412                             sortable: true
 413                         }
 414                     ],
 415                     data: data.nodeData,
 416                     delay: 0
 417                 });
 418                 return source;
 419             },
 420             flows: function(data) {
 421                 var result = [];
 422                 $.each(data.nodeData, function(key, value) {
 423                     var tr = {};
 424                     var entry = [];
 425                     entry.push(value["nodeName"]);
 426                     entry.push(value["inPort"]);
 427                     entry.push(value["dlSrc"]);
 428                     entry.push(value["dlDst"]);
 429                     entry.push(value["dlType"]);
 430                     entry.push(value["dlVlan"]);
 431                     entry.push(value["nwSrc"]);
 432                     entry.push(value["nwDst"]);
 433                     entry.push(value["nwProto"]);
 434                     entry.push(value["tpSrc"]);
 435                     entry.push(value["tpDst"]);
 436                     entry.push(value["actions"]);
 437                     entry.push(value["byteCount"]);
 438                     entry.push(value["packetCount"]);
 439                     entry.push(value["durationSeconds"]);
 440                     entry.push(value["idleTimeout"]);
 441                     entry.push(value["priority"]);
 442                     tr.entry = entry;
 443                     result.push(tr);
 444                 });
 445                 return result;
 446             }
 447         }
 448 };
 449
 450 one.f.troubleshooting.uptime = {
 451     id: {
 452         popout: "one_f_troubleshooting_uptime_id_popout",
 453         modal: "one_f_troubleshooting_uptime_id_modal",
 454         datagrid: "one_f_troubleshooting_uptime_id_datagrid"
 455     },
 456
 457     dashlet: function($dashlet) {
 458             one.lib.dashlet.empty($dashlet);
 459             $dashlet.append(one.lib.dashlet.header(one.f.dashlet.uptime.name));
 460             var url = one.f.troubleshooting.rootUrl + "/uptime";
 461             one.f.troubleshooting.uptime.ajax.main(url , {} ,function(content) {
 462                 var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.uptime.id.datagrid, {
 463                     searchable: true,
 464                     filterable: false,
 465                     pagination: true,
 466                     flexibleRowsPerPage: true
 467                     }, "table-striped table-condensed");
 468                 $dashlet.append($gridHTML);
 469                 var dataSource = one.f.troubleshooting.uptime.data.uptimeDataGrid(content);
 470                 $("#" + one.f.troubleshooting.uptime.id.datagrid).datagrid({dataSource: dataSource});
 471             });
 472     },
 473
 474     ajax : {
 475         main : function(url, requestData, callback) {
 476             $.getJSON(url, requestData, function(data) {
 477                 callback(data);
 478             });
 479         }
 480     },
 481
 482     data: {
 483         uptimeDataGrid: function(data) {
 484             var source = new StaticDataSource({
 485                 columns: [
 486                     {
 487                         property: 'nodeName',
 488                         label: 'Node',
 489                         sortable: true
 490                     },
 491                     {
 492                         property: 'nodeId',
 493                         label: 'Node ID',
 494                         sortable: true
 495                     },
 496                     {
 497                         property: 'connectedSince',
 498                         label: 'Statistics',
 499                         sortable: true
 500                     }
 501                 ],
 502                 data: data.nodeData,
 503                 delay: 0
 504             });
 505             return source;
 506         },
 507         uptime: function(data) {
 508             var result = [];
 509             $.each(data.nodeData, function(key, value) {
 510                 var tr = {};
 511                 var entry = [];
 512                 entry.push(value["nodeName"]);
 513                 entry.push(value["nodeId"]);
 514                 entry.push(value["connectedSince"]);
 515                 tr.entry = entry;
 516                 result.push(tr);
 517             });
 518             return result;
 519         }
 520     },
 521 };
 522
 523 one.f.troubleshooting.statistics = {
 524     dashlet : function($dashlet) {
 525         var $h4 = one.lib.dashlet.header("Statistics");
 526         $dashlet.append($h4);
 527         // empty
 528         var $none = $(document.createElement('div'));
 529         $none.addClass('none');
 530         var $p = $(document.createElement('p'));
 531         $p.text('Please select a Flow or Ports statistics');
 532         $p.addClass('text-center').addClass('text-info');
 533
 534         $dashlet.append($none)
 535             .append($p);
 536     }
 537 };
 538
 539 // bind dashlet nav
 540 $('.dash .nav a', '#main').click(function() {
 541     // de/activation
 542     var $li = $(this).parent();
 543     var $ul = $li.parent();
 544     one.lib.nav.unfocus($ul);
 545     $li.addClass('active');
 546     // clear respective dashlet
 547     var $dashlet = $ul.parent().find('.dashlet');
 548     one.lib.dashlet.empty($dashlet);
 549     // callback based on menu
 550     var id = $(this).attr('id');
 551     var menu = one.f.dashlet;
 552     switch (id) {
 553         case menu.existingNodes.id:
 554             one.f.troubleshooting.existingNodes.load.main($dashlet);
 555             break;
 556         case menu.uptime.id:
 557             one.f.troubleshooting.uptime.dashlet($dashlet);
 558             break;
 559         case menu.flowsOrPorts.id:
 560             one.f.troubleshooting.statistics.dashlet($dashlet);
 561             break;
 562     };
 563 });
 564
 565 // activate first tab on each dashlet
 566 $('.dash .nav').each(function(index, value) {
 567     $($(value).find('li')[0]).find('a').click();
 568 });