OpenDaylight Controller functional modules.
[controller.git] / 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: "/one/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                 load: {
94                         main: function($dashlet) {
95                                 one.lib.dashlet.empty($dashlet);
96                                 $dashlet.append(one.lib.dashlet.header(one.f.dashlet.existingNodes.name));
97                                 
98                                 // TODO(l): Add a generic auto expand function to one.lib and replace custom height setting.
99                                 //$('#left-top').height('100%');
100                                 one.f.troubleshooting.existingNodes.ajax(one.f.troubleshooting.rootUrl + "/existingNodes" , function(content) {
101                                         var body = one.f.troubleshooting.existingNodes.data.existingNodes(content);
102                                         var $table = one.f.troubleshooting.createTable(content.columnNames, body);
103                                         $dashlet.append($table);
104                                 });
105                         },
106                         flows: function(nodeId) {
107                                 try {
108                                         clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer);
109                                         $.getJSON(one.main.constants.address.prefix + "/troubleshoot/flowStats?nodeId=" + nodeId, function(content) {
110                                                 var body = one.f.troubleshooting.existingNodes.data.flows(content);
111                                                 var $table = one.f.troubleshooting.createTable(content.columnNames, body);
112                                                 $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get();
113                                                 one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Flows");
114                                                 one.lib.dashlet.empty($rightBottomDashlet);
115                                                 $rightBottomDashlet.append(one.lib.dashlet.header("Flow Details"));
116                                                 $rightBottomDashlet.append($table);
117                                                 one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout(
118                                                                 one.f.troubleshooting.existingNodes.load.flows, 5000, nodeId);
119                                         });
120                                 } catch(e) {}
121                         },
122                         ports: function(nodeId) {
123                                 try {
124                                         clearTimeout(one.f.troubleshooting.existingNodes.registry.refreshTimer);
125                                         $.getJSON(one.main.constants.address.prefix + "/troubleshoot/portStats?nodeId=" + nodeId, function(content) {
126                                                 var body = one.f.troubleshooting.existingNodes.data.ports(content);
127                                                 var $table = one.f.troubleshooting.createTable(content.columnNames, body);
128                                                 $rightBottomDashlet = one.f.troubleshooting.rightBottomDashlet.get();
129                                                 one.f.troubleshooting.rightBottomDashlet.setDashletHeader("Ports");
130                                                 one.lib.dashlet.empty($rightBottomDashlet);
131                                                 $rightBottomDashlet.append(one.lib.dashlet.header("Port Details"));
132                                                 $rightBottomDashlet.append($table);
133                                                 one.f.troubleshooting.existingNodes.registry.refreshTimer = setTimeout(
134                                                                 one.f.troubleshooting.existingNodes.load.ports, 5000, nodeId);
135                                         });
136                                 } catch(e) {}
137                         } 
138                 },
139                 ajax : function(url, callback) {
140                         $.getJSON(url, function(data) {
141                                 callback(data);
142                         });
143                 },
144                 registry: {},
145                 modal : {
146                 },
147                 data : {
148                         existingNodes : function(data) {
149                                 var result = [];
150                                 $.each(data.nodeData, function(key, value) {
151                                         var tr = {};
152                                         var entry = [];
153                                         entry.push(value["nodeName"]);
154                                         entry.push(value["nodeId"]);
155                                         var nodeIdvalue = value["nodeId"];
156                                         entry.push("<a href=\"javascript:one.f.troubleshooting.existingNodes.load.flows('" + value["nodeId"] + "');\">Flows</a>" + 
157                                                         " <a href=\"javascript:one.f.troubleshooting.existingNodes.load.ports('" + value["nodeId"] + "');\">Ports</a>");
158                                         tr.entry = entry;
159                                         result.push(tr);
160                                 });
161                                 return result;
162                         },
163                         ports: function(data) {
164                                 var result = [];
165                                 $.each(data.nodeData, function(key, value) {
166                                         var tr = {};
167                                         var entry = [];
168                                         entry.push(value["nodeConnector"]);
169                                         entry.push(value["rxPkts"]);
170                                         entry.push(value["txPkts"]);
171                                         entry.push(value["rxBytes"]);
172                                         entry.push(value["txBytes"]);
173                                         entry.push(value["rxDrops"]);
174                                         entry.push(value["txDrops"]);
175                                         entry.push(value["rxErrors"]);
176                                         entry.push(value["txErrors"]);
177                                         entry.push(value["rxFrameErrors"]);
178                                         entry.push(value["rxOverRunErrors"]);
179                                         entry.push(value["rxCRCErrors"]);
180                                         entry.push(value["collisions"]);
181                                         tr.entry = entry;
182                                         result.push(tr);
183                                 });
184                                 return result;
185                         },
186                         flows: function(data) {
187                                 var result = [];
188                                 $.each(data.nodeData, function(key, value) {
189                                         var tr = {};
190                                         var entry = [];
191                                         entry.push(value["nodeName"]);
192                                         entry.push(value["inPort"]);
193                                         entry.push(value["dlSrc"]);
194                                         entry.push(value["dlDst"]);
195                                         entry.push(value["dlType"]);
196                                         entry.push(value["dlVlan"]);
197                                         entry.push(value["nwSrc"]);
198                                         entry.push(value["nwDst"]);
199                                         entry.push(value["nwProto"]);
200                                         entry.push(value["tpSrc"]);
201                                         entry.push(value["tpDst"]);
202                                         entry.push(value["actions"]);
203                                         entry.push(value["byteCount"]);
204                                         entry.push(value["packetCount"]);
205                                         entry.push(value["durationSeconds"]);
206                                         entry.push(value["idleTimeout"]);
207                                         entry.push(value["outPorts"]);
208                                         entry.push(value["outVlanId"]);
209                                         entry.push(value["priority"]);
210                                         tr.entry = entry;
211                                         result.push(tr);
212                                 });
213                                 return result;
214                         }
215                 }
216 };
217
218 one.f.troubleshooting.uptime = {
219         id: {
220                 popout: "one_f_troubleshooting_existingNodes_id_popout",
221                 modal: "one_f_troubleshooting_existingNodes_id_modal"
222         },
223
224         dashlet: function($dashlet) {
225                         one.lib.dashlet.empty($dashlet);
226                         $dashlet.append(one.lib.dashlet.header(one.f.dashlet.uptime.name));
227                         var url = one.f.troubleshooting.rootUrl + "/uptime";
228                         one.f.troubleshooting.uptime.ajax.main(url , {} ,function(content) {
229                                 var body = one.f.troubleshooting.uptime.data.uptime(content);
230                                 var $table = one.f.troubleshooting.createTable(content.columnNames, body);
231                                 $dashlet.append($table);
232                         });
233         },
234         
235         ajax : {
236                 main : function(url, requestData, callback) {
237                         $.getJSON(url, requestData, function(data) {
238                                 callback(data);
239                         });
240                 }
241         },
242         
243         data: {
244                 uptime: function(data) {
245                         var result = [];
246                         $.each(data.nodeData, function(key, value) {
247                                 var tr = {};
248                                 var entry = [];
249                                 entry.push(value["nodeName"]);
250                                 entry.push(value["nodeId"]);
251                                 entry.push(value["connectedSince"]);
252                                 tr.entry = entry;
253                                 result.push(tr);
254                         });
255                         return result;
256                 }
257         },
258 };
259
260 one.f.troubleshooting.statistics = {
261         dashlet : function($dashlet) {
262         var $h4 = one.lib.dashlet.header("Statistics");
263         $dashlet.append($h4);
264                 // empty
265                 var $none = $(document.createElement('div'));
266                 $none.addClass('none');
267                 var $p = $(document.createElement('p'));
268                 $p.text('Please select a Flow or Ports statistics');
269                 $p.addClass('text-center').addClass('text-info');
270                 
271                 $dashlet.append($none)
272                         .append($p);
273         }
274 };
275
276 // bind dashlet nav
277 $('.dash .nav a', '#main').click(function() {
278     // de/activation
279     var $li = $(this).parent();
280     var $ul = $li.parent();
281     one.lib.nav.unfocus($ul);
282     $li.addClass('active');
283     // clear respective dashlet
284     var $dashlet = $ul.parent().find('.dashlet');
285     one.lib.dashlet.empty($dashlet);
286     // callback based on menu
287     var id = $(this).attr('id');
288     var menu = one.f.dashlet;
289     switch (id) {
290         case menu.existingNodes.id:
291                 one.f.troubleshooting.existingNodes.load.main($dashlet);
292             break;
293         case menu.uptime.id:
294                 one.f.troubleshooting.uptime.dashlet($dashlet);
295                         break;
296                 case menu.flowsOrPorts.id:
297                         one.f.troubleshooting.statistics.dashlet($dashlet);
298                         break;
299     };
300 });
301
302 // activate first tab on each dashlet
303 $('.dash .nav').each(function(index, value) {
304     $($(value).find('li')[0]).find('a').click();
305 });