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             refreshFlowsButton:"one_f_troubleshooting_existingNodes_id_refreshFlowsButton",
  95             refreshPortsButton:"one_f_troubleshooting_existingNodes_id_refreshPortsButton"
  96
  97         },
  98         load: {
  99             main: function($dashlet) {
 100                 one.lib.dashlet.empty($dashlet);
 101                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.existingNodes.name));
 102                 // TODO(l): Add a generic auto expand function to one.lib and replace custom height setting.
 103                 //$('#left-top').height('100%');
 104                 one.f.troubleshooting.existingNodes.ajax(one.f.troubleshooting.rootUrl + "/existingNodes" , function(content) {
 105                     var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.existingNodesDataGrid, {
 106                         searchable: true,
 107                         filterable: false,
 108                         pagination: true,
 109                         flexibleRowsPerPage: true
 110                         }, "table-striped table-condensed");
 111                     $dashlet.append($gridHTML);
 112                     var dataSource = one.f.troubleshooting.existingNodes.data.existingNodesGrid(content);
 113                     $("#" + one.f.troubleshooting.existingNodes.id.existingNodesDataGrid).datagrid({dataSource: dataSource});
 114
 115                 });
 116             },
 117             flows: function(nodeId) {
 118                 try {
 119                     if(one.f.troubleshooting === undefined){
 120                         return;
 121                     }
 122                     $.getJSON(one.main.constants.address.prefix + "/troubleshoot/flowStats?nodeId=" + nodeId, function(content) {
 123                         $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get();
 124                         one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Flows");
 125                         one.lib.dashlet.empty($rightBottomDashlet);
 126                         $rightBottomDashlet.append(one.lib.dashlet.header("Flow Details"));
 127                         var button = one.lib.dashlet.button.single("Refresh",
 128                                 one.f.troubleshooting.existingNodes.id.refreshFlowsButton, "btn-primary", "btn-mini");
 129                         var $button = one.lib.dashlet.button.button(button);
 130                         $button.click(function() {
 131                             one.f.troubleshooting.existingNodes.load.flows(nodeId);
 132                         });
 133                         $rightBottomDashlet.append($button);
 134                         var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.flowsDataGrid, {
 135                             searchable: true,
 136                             filterable: false,
 137                             pagination: true,
 138                             flexibleRowsPerPage: true
 139                             }, "table-striped table-condensed");
 140                         $rightBottomDashlet.append($gridHTML);
 141                         var dataSource = one.f.troubleshooting.existingNodes.data.flowsGrid(content);
 142                         $("#" + one.f.troubleshooting.existingNodes.id.flowsDataGrid).datagrid({dataSource: dataSource});
 143                     });
 144                 } catch(e) {}
 145             },
 146             ports: function(nodeId) {
 147                 try {
 148                     if(one.f.troubleshooting === undefined){
 149                         return;
 150                     }
 151                     $.getJSON(one.main.constants.address.prefix + "/troubleshoot/portStats?nodeId=" + nodeId, function(content) {
 152                         $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get();
 153                         one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Ports");
 154                         one.lib.dashlet.empty($rightBottomDashlet);
 155                         $rightBottomDashlet.append(one.lib.dashlet.header("Port Details"));
 156                         var button = one.lib.dashlet.button.single("Refresh",
 157                                 one.f.troubleshooting.existingNodes.id.refreshPortsButton, "btn-primary", "btn-mini");
 158                         var $button = one.lib.dashlet.button.button(button);
 159                         $button.click(function() {
 160                             one.f.troubleshooting.existingNodes.load.ports(nodeId);
 161                         });
 162                         $rightBottomDashlet.append($button);
 163                         var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.existingNodes.id.portsDataGrid, {
 164                             searchable: true,
 165                             filterable: false,
 166                             pagination: true,
 167                             flexibleRowsPerPage: true
 168                             }, "table-striped table-condensed");
 169                         $rightBottomDashlet.append($gridHTML);
 170                         var dataSource = one.f.troubleshooting.existingNodes.data.portsGrid(content);
 171                         $("#" + one.f.troubleshooting.existingNodes.id.portsDataGrid).datagrid({dataSource: dataSource});
 172                     });
 173                 } catch(e) {}
 174             }
 175         },
 176         ajax : function(url, callback) {
 177             $.getJSON(url, function(data) {
 178                 callback(data);
 179             });
 180         },
 181         registry: {},
 182         modal : {
 183         },
 184         data : {
 185             existingNodesGrid: function(data) {
 186                 var source = new StaticDataSource({
 187                     columns: [
 188                         {
 189                             property: 'nodeName',
 190                             label: 'Name',
 191                             sortable: true
 192                         },
 193                         {
 194                             property: 'nodeId',
 195                             label: 'Node ID',
 196                             sortable: true
 197                         },
 198                         {
 199                             property: 'statistics',
 200                             label: 'Statistics',
 201                             sortable: true
 202                         }
 203                     ],
 204                     data: data.nodeData,
 205                     formatter: function(items) {
 206                         $.each(items, function(index, item) {
 207                             item["statistics"] = "<a href=\"javascript:one.f.troubleshooting.existingNodes.load.flows('" + item["nodeId"] + "');\">Flows</a>" +
 208                             " <a href=\"javascript:one.f.troubleshooting.existingNodes.load.ports('" + item["nodeId"] + "');\">Ports</a>";
 209                         });
 210                     },
 211                     delay: 0
 212                 });
 213                 return source;
 214             },
 215             portsGrid: function(data) {
 216                 $.each(data.nodeData, function(index, item) {
 217                     item.rxPkts = one.lib.helper.parseInt(item.rxPkts);
 218                     item.txPkts = one.lib.helper.parseInt(item.txPkts);
 219                     item.rxBytes = one.lib.helper.parseInt(item.rxBytes);
 220                     item.txBytes = one.lib.helper.parseInt(item.txBytes);
 221                     item.rxDrops = one.lib.helper.parseInt(item.rxDrops);
 222                     item.txDrops = one.lib.helper.parseInt(item.txDrops);
 223                     item.rxErrors = one.lib.helper.parseInt(item.rxErrors);
 224                     item.txErrors = one.lib.helper.parseInt(item.txErrors);
 225                     item.rxFrameErrors = one.lib.helper.parseInt(item.rxFrameErrors);
 226                     item.rxOverRunErrors = one.lib.helper.parseInt(item.rxOverRunErrors);
 227                     item.rxCRCErrors = one.lib.helper.parseInt(item.rxCRCErrors);
 228                     item.collisions = one.lib.helper.parseInt(item.collisions);
 229                 });
 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: 0
 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                 $.each(data.nodeData, function(index, item) {
 328                     item.byteCount = one.lib.helper.parseInt(item.byteCount);
 329                     item.packetCount = one.lib.helper.parseInt(item.packetCount);
 330                     item.durationSeconds = one.lib.helper.parseInt(item.durationSeconds);
 331                     item.idleTimeout = one.lib.helper.parseInt(item.idleTimeout);
 332                     item.priority = one.lib.helper.parseInt(item.priority);
 333                 });
 334                 var source = new StaticDataSource({
 335                     columns: [
 336                         {
 337                             property: 'nodeName',
 338                             label: 'Node',
 339                             sortable: true
 340                         },
 341                         {
 342                             property: 'inPort',
 343                             label: 'In Port',
 344                             sortable: true
 345                         },
 346                         {
 347                             property: 'dlSrc',
 348                             label: 'DL Src',
 349                             sortable: true
 350                         },
 351                         {
 352                             property: 'dlDst',
 353                             label: 'DL Dst',
 354                             sortable: true
 355                         },
 356                         {
 357                             property: 'dlType',
 358                             label: 'DL Type',
 359                             sortable: true
 360                         },
 361                         {
 362                             property: 'dlVlan',
 363                             label: 'DL Vlan',
 364                             sortable: true
 365                         },
 366                         {
 367                             property: 'nwSrc',
 368                             label: 'NW Src',
 369                             sortable: true
 370                         },
 371                         {
 372                             property: 'nwDst',
 373                             label: 'NW Dst',
 374                             sortable: true
 375                         },
 376                         {
 377                             property: 'nwProto',
 378                             label: 'NW Proto',
 379                             sortable: true
 380                         },
 381                         {
 382                             property: 'tpSrc',
 383                             label: 'TP Src',
 384                             sortable: true
 385                         },
 386                         {
 387                             property: 'tpDst',
 388                             label: 'TP Dst',
 389                             sortable: true
 390                         },
 391                         {
 392                             property: 'actions',
 393                             label: 'Actions',
 394                             sortable: true
 395                         },
 396                         {
 397                             property: 'byteCount',
 398                             label: 'Byte Count',
 399                             sortable: true
 400                         },
 401                         {
 402                             property: 'packetCount',
 403                             label: 'Packet Count',
 404                             sortable: true
 405                         },
 406                         {
 407                             property: 'durationSeconds',
 408                             label: 'Duration Seconds',
 409                             sortable: true
 410                         },
 411                         {
 412                             property: 'idleTimeout',
 413                             label: 'Idle Timeout',
 414                             sortable: true
 415                         },
 416                         {
 417                             property: 'priority',
 418                             label: 'Priority',
 419                             sortable: true
 420                         }
 421                     ],
 422                     data: data.nodeData,
 423                     delay: 0
 424                 });
 425                 return source;
 426             },
 427             flows: function(data) {
 428                 var result = [];
 429                 $.each(data.nodeData, function(key, value) {
 430                     var tr = {};
 431                     var entry = [];
 432                     entry.push(value["nodeName"]);
 433                     entry.push(value["inPort"]);
 434                     entry.push(value["dlSrc"]);
 435                     entry.push(value["dlDst"]);
 436                     entry.push(value["dlType"]);
 437                     entry.push(value["dlVlan"]);
 438                     entry.push(value["nwSrc"]);
 439                     entry.push(value["nwDst"]);
 440                     entry.push(value["nwProto"]);
 441                     entry.push(value["tpSrc"]);
 442                     entry.push(value["tpDst"]);
 443                     entry.push(value["actions"]);
 444                     entry.push(value["byteCount"]);
 445                     entry.push(value["packetCount"]);
 446                     entry.push(value["durationSeconds"]);
 447                     entry.push(value["idleTimeout"]);
 448                     entry.push(value["priority"]);
 449                     tr.entry = entry;
 450                     result.push(tr);
 451                 });
 452                 return result;
 453             }
 454         }
 455 };
 456
 457 one.f.troubleshooting.uptime = {
 458     id: {
 459         popout: "one_f_troubleshooting_uptime_id_popout",
 460         modal: "one_f_troubleshooting_uptime_id_modal",
 461         datagrid: "one_f_troubleshooting_uptime_id_datagrid"
 462     },
 463
 464     dashlet: function($dashlet) {
 465             one.lib.dashlet.empty($dashlet);
 466             $dashlet.append(one.lib.dashlet.header(one.f.dashlet.uptime.name));
 467             var url = one.f.troubleshooting.rootUrl + "/uptime";
 468             one.f.troubleshooting.uptime.ajax.main(url , {} ,function(content) {
 469                 var $gridHTML = one.lib.dashlet.datagrid.init(one.f.troubleshooting.uptime.id.datagrid, {
 470                     searchable: true,
 471                     filterable: false,
 472                     pagination: true,
 473                     flexibleRowsPerPage: true
 474                     }, "table-striped table-condensed");
 475                 $dashlet.append($gridHTML);
 476                 var dataSource = one.f.troubleshooting.uptime.data.uptimeDataGrid(content);
 477                 $("#" + one.f.troubleshooting.uptime.id.datagrid).datagrid({dataSource: dataSource});
 478             });
 479     },
 480
 481     ajax : {
 482         main : function(url, requestData, callback) {
 483             $.getJSON(url, requestData, function(data) {
 484                 callback(data);
 485             });
 486         }
 487     },
 488
 489     data: {
 490         uptimeDataGrid: function(data) {
 491             var source = new StaticDataSource({
 492                 columns: [
 493                     {
 494                         property: 'nodeName',
 495                         label: 'Node',
 496                         sortable: true
 497                     },
 498                     {
 499                         property: 'nodeId',
 500                         label: 'Node ID',
 501                         sortable: true
 502                     },
 503                     {
 504                         property: 'connectedSince',
 505                         label: 'Statistics',
 506                         sortable: true
 507                     }
 508                 ],
 509                 data: data.nodeData,
 510                 delay: 0
 511             });
 512             return source;
 513         },
 514         uptime: function(data) {
 515             var result = [];
 516             $.each(data.nodeData, function(key, value) {
 517                 var tr = {};
 518                 var entry = [];
 519                 entry.push(value["nodeName"]);
 520                 entry.push(value["nodeId"]);
 521                 entry.push(value["connectedSince"]);
 522                 tr.entry = entry;
 523                 result.push(tr);
 524             });
 525             return result;
 526         }
 527     },
 528 };
 529
 530 one.f.troubleshooting.statistics = {
 531     dashlet : function($dashlet) {
 532         var $h4 = one.lib.dashlet.header("Statistics");
 533         $dashlet.append($h4);
 534         // empty
 535         var $none = $(document.createElement('div'));
 536         $none.addClass('none');
 537         var $p = $(document.createElement('p'));
 538         $p.text('Please select a Flow or Ports statistics');
 539         $p.addClass('text-center').addClass('text-info');
 540
 541         $dashlet.append($none)
 542             .append($p);
 543     }
 544 };
 545
 546 // bind dashlet nav
 547 $('.dash .nav a', '#main').click(function() {
 548     // de/activation
 549     var $li = $(this).parent();
 550     var $ul = $li.parent();
 551     one.lib.nav.unfocus($ul);
 552     $li.addClass('active');
 553     // clear respective dashlet
 554     var $dashlet = $ul.parent().find('.dashlet');
 555     one.lib.dashlet.empty($dashlet);
 556     // callback based on menu
 557     var id = $(this).attr('id');
 558     var menu = one.f.dashlet;
 559     switch (id) {
 560         case menu.existingNodes.id:
 561             one.f.troubleshooting.existingNodes.load.main($dashlet);
 562             break;
 563         case menu.uptime.id:
 564             one.f.troubleshooting.uptime.dashlet($dashlet);
 565             break;
 566         case menu.flowsOrPorts.id:
 567             one.f.troubleshooting.statistics.dashlet($dashlet);
 568             break;
 569     };
 570 });
 571
 572 // activate first tab on each dashlet
 573 $('.dash .nav').each(function(index, value) {
 574     $($(value).find('li')[0]).find('a').click();
 575 });