Karthik Vegesna | 9901271 | 2017-07-20 12:07:23 -0700 | [diff] [blame] | 1 | // js for patch panel app custom view |
| 2 | /** |
| 3 | IMPORTANT CHANGES THAT MUST BE MADE BEFORE SUBMITTING |
| 4 | |
| 5 | -Graph is not being updated with packet counters. The counters is only set to 0. |
| 6 | This is a New bug, after individual buttons were removed. |
| 7 | -HTML Page is not being resized depending on the the size of the screen. |
| 8 | -Must Enable Scrolling |
| 9 | -Can Remove Redundant Code and create one json file, instead of multiple. |
| 10 | -Add comments and work on the code formatting. |
| 11 | |
| 12 | Due to a paucity of time, I couldn't work on some of these important changes. |
| 13 | The first bug is very important to correct and the code should not be in the ONOS |
| 14 | codebase without the change. |
| 15 | |
| 16 | Feel free to contact me for any issues. |
| 17 | **/ |
| 18 | var strdhcpval = "h"; |
| 19 | (function () { |
| 20 | 'use strict'; |
| 21 | // injected refs |
| 22 | var $log, $scope, wss, d3Elem; |
| 23 | |
| 24 | // constants remember to change this stuff!!s |
| 25 | var arpReq = 'arpRequest', |
| 26 | arpResp = 'arpResponse'; |
| 27 | var dhcpReq = 'dhcpRequest', |
| 28 | dhcpResp = 'dhcpResponse'; |
| 29 | var icmpReq = 'icmpRequest', |
| 30 | icmpResp = 'icmpResponse'; |
| 31 | var lldpReq = 'lldpRequest', |
| 32 | lldpResp = 'lldpResponse'; |
| 33 | var vlanReq = 'vlanRequest', |
| 34 | vlanResp = 'vlanResponse'; |
| 35 | var igmpReq = 'igmpRequest', |
| 36 | igmpResp = 'igmpResponse'; |
| 37 | var pimReq = 'pimRequest', |
| 38 | pimResp = 'pimResponse'; |
| 39 | var bsnReq = 'bsnRequest', |
| 40 | bsnResp = 'bsnResponse'; |
| 41 | var unknownReq = 'unknownRequest', |
| 42 | unknownResp = 'unknownResponse'; |
| 43 | var mplsReq = 'mplsRequest', |
| 44 | mplsResp = 'mplsResponse'; |
| 45 | var arpval = 0; |
| 46 | var dhcpval = 0; |
| 47 | var icmpval = 0; |
| 48 | var lldpval = 0; |
| 49 | var vlanval = 0; |
| 50 | var igmpval = 0; |
| 51 | var pimval = 0; |
| 52 | var bsnval =0; |
| 53 | var unknownval =0; |
| 54 | var mplsval = 0; |
| 55 | |
| 56 | var arpMsg = ""; |
| 57 | var dhcpMsg = ""; |
| 58 | var icmpMsg = ""; |
| 59 | var lldpMsg = ""; |
| 60 | var vlanMsg = ""; |
Sangyeok Sim | 7ff935e | 2018-06-11 10:29:14 +0900 | [diff] [blame] | 61 | var igmpMsg = ""; |
Karthik Vegesna | 9901271 | 2017-07-20 12:07:23 -0700 | [diff] [blame] | 62 | var pimMsg = ""; |
| 63 | var bsnMsg = ""; |
| 64 | var unknownMsg = ""; |
| 65 | var mplsMsg = ""; |
| 66 | |
| 67 | function arpGetter() { |
| 68 | wss.sendEvent(arpReq); |
| 69 | } |
| 70 | function icmpGetter() { |
| 71 | wss.sendEvent(icmpReq); |
| 72 | } |
| 73 | function lldpGetter() { |
| 74 | wss.sendEvent(lldpReq); |
| 75 | } |
| 76 | function dhcpGetter() { |
| 77 | wss.sendEvent(dhcpReq); |
| 78 | } |
| 79 | function vlanGetter() { |
| 80 | wss.sendEvent(vlanReq); |
| 81 | } |
| 82 | |
| 83 | function igmpGetter() { |
| 84 | wss.sendEvent(igmpReq); |
| 85 | } |
| 86 | function pimGetter() { |
| 87 | wss.sendEvent(pimReq); |
| 88 | } |
| 89 | function bsnGetter() { |
| 90 | wss.sendEvent(bsnReq); |
| 91 | } |
| 92 | function unknownGetter() { |
| 93 | wss.sendEvent(unknownReq); |
| 94 | } |
| 95 | function mplsGetter() { |
| 96 | wss.sendEvent(mplsReq); |
| 97 | } |
| 98 | |
| 99 | |
| 100 | function dthreestuff() { |
| 101 | wss.sendEvent(dhcpReq); |
| 102 | wss.sendEvent(unknownReq); |
| 103 | wss.sendEvent(mplsReq); |
| 104 | var data = [ |
| 105 | {label:"ARP", value:arpval}, |
| 106 | {label:"ICMP", value:icmpval}, |
| 107 | {label:"DHCP", value:dhcpval}, |
| 108 | {label:"PIM", value:pimval}, |
| 109 | {label:"BSN", value:bsnval}, |
| 110 | {label:"IGMP", value:igmpval}, |
| 111 | {label:"LLDP", value:lldpval}, |
| 112 | {label:"VLAN", value:vlanval}, |
| 113 | {label:"MPLS", value:mplsval}, |
| 114 | {label:"Unknown", value:unknownval} |
| 115 | ]; |
| 116 | |
| 117 | |
| 118 | var div = d3.select("body").append("div").attr("class", "toolTip"); |
| 119 | |
| 120 | var axisMargin = 20, |
| 121 | margin = 40, |
| 122 | valueMargin = 4, |
| 123 | width = parseInt(d3.select('body').style('width'), 10), |
| 124 | height = parseInt(d3.select('body').style('height'), 10), |
| 125 | barHeight = (height-axisMargin-margin*2)* 0.4/data.length, |
| 126 | barPadding = (height-axisMargin-margin*2)*0.6/data.length, |
| 127 | data, bar, svg, scale, xAxis, labelWidth = 0; |
| 128 | |
| 129 | var max = d3.max(data, function(d) { return d.value; }); |
| 130 | |
| 131 | var svg = d3.select('body') |
| 132 | .append("svg") |
| 133 | .attr("width", width) |
| 134 | .attr("height", height); |
| 135 | |
| 136 | |
| 137 | var bar = svg.selectAll("g") |
| 138 | .data(data) |
| 139 | .enter() |
| 140 | .append("g"); |
| 141 | |
| 142 | bar.attr("class", "bar") |
| 143 | .attr("cx",0) |
| 144 | .attr("transform", function(d, i) { |
| 145 | return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")"; |
| 146 | }); |
| 147 | |
| 148 | bar.append("text") |
| 149 | .attr("class", "label") |
| 150 | .attr("y", barHeight / 2) |
| 151 | .attr("dy", ".35em") //vertical align middle |
| 152 | .text(function(d){ |
| 153 | return d.label; |
| 154 | }).each(function() { |
| 155 | labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width)); |
| 156 | }); |
| 157 | |
| 158 | var scale = d3.scale.linear() |
| 159 | .domain([0, max]) |
| 160 | .range([0, width - margin*2 - labelWidth]); |
| 161 | |
| 162 | var xAxis = d3.svg.axis() |
| 163 | .scale(scale) |
| 164 | .tickSize(-height + 2*margin + axisMargin) |
| 165 | .orient("bottom"); |
| 166 | |
| 167 | bar.append("rect") |
| 168 | .attr("transform", "translate("+labelWidth+", 0)") |
| 169 | .attr("height", barHeight) |
| 170 | .attr("width", function(d){ |
| 171 | return scale(d.value); |
| 172 | }); |
| 173 | |
| 174 | bar.append("text") |
| 175 | .attr("class", "value") |
| 176 | .attr("y", barHeight / 2) |
| 177 | .attr("dx", -valueMargin + labelWidth) //margin right |
| 178 | .attr("dy", ".35em") //vertical align middle |
| 179 | .attr("text-anchor", "end") |
| 180 | .text(function(d){ |
| 181 | return (d.value+" Packets"); |
| 182 | }) |
| 183 | .attr("x", function(d){ |
| 184 | var width = this.getBBox().width; |
| 185 | return Math.max(width + valueMargin, scale(d.value)); |
| 186 | }); |
| 187 | |
| 188 | bar |
| 189 | .on("mousemove", function(d){ |
| 190 | div.style("left", d3.event.pageX+10+"px"); |
| 191 | div.style("top", d3.event.pageY-25+"px"); |
| 192 | div.style("display", "inline-block"); |
| 193 | div.html((d.label)+"<br>"+(d.value)+" Packets"); |
| 194 | }); |
| 195 | bar |
| 196 | .on("mouseout", function(d){ |
| 197 | div.style("display", "none"); |
| 198 | }); |
| 199 | |
| 200 | svg.insert("g",":first-child") |
| 201 | .attr("class", "axisHorizontal") |
| 202 | .attr("transform", "translate(" + (margin + labelWidth) + ","+ (height - axisMargin - margin)+")") |
| 203 | .call(xAxis); |
| 204 | |
| 205 | } |
| 206 | |
| 207 | function responseArp(data) { |
| 208 | arpval = data.DhcpCounter; |
| 209 | } |
| 210 | |
| 211 | |
| 212 | function responseDhcp(data) { |
| 213 | dhcpval = data.DhcpCounter; |
| 214 | } |
| 215 | |
| 216 | function responseIcmp(data) { |
| 217 | icmpval = data.IcmpCounter; |
| 218 | } |
| 219 | function responseLldp(data) { |
| 220 | lldpval = data.LldpCounter; |
| 221 | } |
| 222 | function responseVlan(data) { |
| 223 | vlanval = data.VlanCounter; |
| 224 | } |
| 225 | function responseIgmp(data) { |
| 226 | igmpval = data.IgmpCounter; |
| 227 | } |
| 228 | function responsePim(data) { |
| 229 | pimval = data.PimCounter; |
| 230 | } |
| 231 | function responseBsn(data) { |
| 232 | bsnval = data.BsnCounter; |
| 233 | } |
| 234 | function responseUnknown(data) { |
| 235 | unknownval = data.UnknownCounter; |
| 236 | } |
| 237 | |
| 238 | function responseMPLS(data) { |
| 239 | mplsval = data.MplsCounter; |
| 240 | } |
| 241 | |
| 242 | var app = angular.module('ovSampleCustom', []) |
| 243 | .controller('OvSampleCustomCtrl', |
| 244 | ['$log', '$scope', 'WebSocketService', |
| 245 | |
| 246 | function (_$log_, _$scope_, _wss_, ) { |
| 247 | $log = _$log_; |
| 248 | $scope = _$scope_; |
| 249 | wss = _wss_; |
| 250 | |
| 251 | |
| 252 | var handlers = {}; |
| 253 | $scope.data = {}; |
| 254 | |
| 255 | // data response handler |
| 256 | handlers[arpResp] = responseArp; |
| 257 | handlers[dhcpResp] = responseDhcp; |
| 258 | handlers[icmpResp] = responseIcmp; |
| 259 | handlers[lldpResp] = responseLldp; |
| 260 | handlers[vlanResp] = responseVlan; |
| 261 | handlers[igmpResp] = responseIgmp; |
| 262 | handlers[pimResp] = responsePim; |
| 263 | handlers[bsnResp] = responseBsn; |
| 264 | handlers[unknownResp] = responseUnknown; |
| 265 | handlers[mplsResp] = responseMPLS; |
| 266 | wss.bindHandlers(handlers); |
| 267 | |
| 268 | |
| 269 | // custom click handler |
| 270 | $scope.arpGetter = arpGetter; |
| 271 | $scope.icmpGetter = icmpGetter; |
| 272 | $scope.dhcpGetter = dhcpGetter; |
| 273 | $scope.lldpGetter = lldpGetter; |
| 274 | $scope.vlanGetter = vlanGetter; |
| 275 | $scope.igmpGetter = igmpGetter; |
| 276 | $scope.pimGetter = pimGetter; |
| 277 | $scope.bsnGetter = bsnGetter; |
| 278 | $scope.unknownGetter = unknownGetter; |
| 279 | $scope.mplsGetter = mplsGetter; |
| 280 | $scope.dthreestuff = dthreestuff; |
| 281 | |
| 282 | |
| 283 | |
| 284 | // cleanup |
| 285 | $scope.$on('$destroy', function () { |
| 286 | wss.unbindHandlers(handlers); |
| 287 | $log.log('OvSampleCustomCtrl has been destroyed'); |
| 288 | }); |
| 289 | |
| 290 | $log.log('OvSampleCustomCtrl has been created'); |
| 291 | }]); |
| 292 | |
| 293 | |
| 294 | |
Sangyeok Sim | 7ff935e | 2018-06-11 10:29:14 +0900 | [diff] [blame] | 295 | }()); |