apps/packet-stats/app/src/main/resources/app/view/sampleCustom/sampleCustom.js

// js for patch panel app custom view
/**
IMPORTANT CHANGES THAT MUST BE MADE BEFORE SUBMITTING

-Graph is not being updated with packet counters. The counters is only set to 0.
 This is a New bug, after individual buttons were removed.
-HTML Page is not being resized depending on the the size of the screen.
-Must Enable Scrolling
-Can Remove Redundant Code and create one json file, instead of multiple.
-Add comments and work on the code formatting.

Due to a paucity of time, I couldn't work on some of these important changes.
The first bug is very important to correct and the code should not be in the ONOS
codebase without the change.

Feel free to contact me for any issues.
**/
var strdhcpval = "h";
 (function () {
     'use strict';
     // injected refs
     var $log, $scope, wss, d3Elem;

     // constants remember to change this stuff!!s
     var arpReq = 'arpRequest',
         arpResp = 'arpResponse';
     var dhcpReq = 'dhcpRequest',
         dhcpResp = 'dhcpResponse';
     var icmpReq = 'icmpRequest',
         icmpResp = 'icmpResponse';
     var lldpReq = 'lldpRequest',
         lldpResp = 'lldpResponse';
     var vlanReq = 'vlanRequest',
         vlanResp = 'vlanResponse';
     var igmpReq = 'igmpRequest',
         igmpResp = 'igmpResponse';
     var pimReq = 'pimRequest',
         pimResp = 'pimResponse';
     var bsnReq = 'bsnRequest',
         bsnResp = 'bsnResponse';
     var unknownReq = 'unknownRequest',
         unknownResp = 'unknownResponse';
     var mplsReq = 'mplsRequest',
         mplsResp = 'mplsResponse';
     var arpval = 0;
     var dhcpval = 0;
     var icmpval = 0;
     var lldpval = 0;
     var vlanval = 0;
     var igmpval = 0;
     var pimval = 0;
     var bsnval =0;
     var unknownval =0;
     var mplsval = 0;

     var arpMsg  = "";
     var dhcpMsg = "";
     var icmpMsg = "";
     var lldpMsg = "";
     var vlanMsg = "";
     var igmpMsg = "";
     var pimMsg = "";
     var bsnMsg = "";
     var unknownMsg = "";
     var mplsMsg = "";

     function arpGetter() {
        wss.sendEvent(arpReq);
     }
     function icmpGetter() {
         wss.sendEvent(icmpReq);
     }
     function lldpGetter() {
         wss.sendEvent(lldpReq);
     }
     function dhcpGetter() {
         wss.sendEvent(dhcpReq);
     }
     function vlanGetter() {
         wss.sendEvent(vlanReq);
     }

     function igmpGetter() {
         wss.sendEvent(igmpReq);
     }
     function pimGetter() {
         wss.sendEvent(pimReq);
     }
     function bsnGetter() {
         wss.sendEvent(bsnReq);
     }
     function unknownGetter() {
         wss.sendEvent(unknownReq);
     }
     function mplsGetter() {
         wss.sendEvent(mplsReq);
     }


     function dthreestuff() {
     wss.sendEvent(dhcpReq);
     wss.sendEvent(unknownReq);
     wss.sendEvent(mplsReq);
    var data = [
        {label:"ARP", value:arpval},
        {label:"ICMP", value:icmpval},
        {label:"DHCP", value:dhcpval},
        {label:"PIM", value:pimval},
        {label:"BSN", value:bsnval},
        {label:"IGMP", value:igmpval},
        {label:"LLDP", value:lldpval},
        {label:"VLAN", value:vlanval},
        {label:"MPLS", value:mplsval},
        {label:"Unknown", value:unknownval}
    ];


    var div = d3.select("body").append("div").attr("class", "toolTip");

    var axisMargin = 20,
            margin = 40,
            valueMargin = 4,
            width = parseInt(d3.select('body').style('width'), 10),
            height = parseInt(d3.select('body').style('height'), 10),
            barHeight = (height-axisMargin-margin*2)* 0.4/data.length,
            barPadding = (height-axisMargin-margin*2)*0.6/data.length,
            data, bar, svg, scale, xAxis, labelWidth = 0;

    var max = d3.max(data, function(d) { return d.value; });

    var svg = d3.select('body')
            .append("svg")
            .attr("width", width)
            .attr("height", height);


    var bar = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g");

    bar.attr("class", "bar")
            .attr("cx",0)
            .attr("transform", function(d, i) {
                return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")";
            });

    bar.append("text")
            .attr("class", "label")
            .attr("y", barHeight / 2)
            .attr("dy", ".35em") //vertical align middle
            .text(function(d){
                return d.label;
            }).each(function() {
        labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width));
    });

    var scale = d3.scale.linear()
            .domain([0, max])
            .range([0, width - margin*2 - labelWidth]);

    var xAxis = d3.svg.axis()
            .scale(scale)
            .tickSize(-height + 2*margin + axisMargin)
            .orient("bottom");

    bar.append("rect")
            .attr("transform", "translate("+labelWidth+", 0)")
            .attr("height", barHeight)
            .attr("width", function(d){
                return scale(d.value);
            });

    bar.append("text")
            .attr("class", "value")
            .attr("y", barHeight / 2)
            .attr("dx", -valueMargin + labelWidth) //margin right
            .attr("dy", ".35em") //vertical align middle
            .attr("text-anchor", "end")
            .text(function(d){
                return (d.value+" Packets");
            })
            .attr("x", function(d){
                var width = this.getBBox().width;
                return Math.max(width + valueMargin, scale(d.value));
            });

    bar
            .on("mousemove", function(d){
                div.style("left", d3.event.pageX+10+"px");
                div.style("top", d3.event.pageY-25+"px");
                div.style("display", "inline-block");
                div.html((d.label)+"<br>"+(d.value)+" Packets");
            });
    bar
            .on("mouseout", function(d){
                div.style("display", "none");
            });

    svg.insert("g",":first-child")
            .attr("class", "axisHorizontal")
            .attr("transform", "translate(" + (margin + labelWidth) + ","+ (height - axisMargin - margin)+")")
            .call(xAxis);

     }

     function responseArp(data) {
        arpval = data.DhcpCounter;
     }


     function responseDhcp(data) {
        dhcpval = data.DhcpCounter;
     }

     function responseIcmp(data) {
        icmpval = data.IcmpCounter;
     }
     function responseLldp(data) {
        lldpval = data.LldpCounter;
     }
     function responseVlan(data) {
        vlanval = data.VlanCounter;
     }
     function responseIgmp(data) {
        igmpval = data.IgmpCounter;
     }
     function responsePim(data) {
        pimval = data.PimCounter;
     }
     function responseBsn(data) {
        bsnval = data.BsnCounter;
     }
     function responseUnknown(data) {
        unknownval = data.UnknownCounter;
     }

      function responseMPLS(data) {
        mplsval = data.MplsCounter;
      }

     var app = angular.module('ovSampleCustom', [])
         .controller('OvSampleCustomCtrl',
         ['$log', '$scope', 'WebSocketService',

         function (_$log_, _$scope_, _wss_, ) {
             $log = _$log_;
             $scope = _$scope_;
             wss = _wss_;


             var handlers = {};
             $scope.data = {};

             // data response handler
             handlers[arpResp] = responseArp;
             handlers[dhcpResp] = responseDhcp;
             handlers[icmpResp] = responseIcmp;
             handlers[lldpResp] = responseLldp;
             handlers[vlanResp] = responseVlan;
             handlers[igmpResp] = responseIgmp;
             handlers[pimResp] = responsePim;
             handlers[bsnResp] = responseBsn;
             handlers[unknownResp] = responseUnknown;
             handlers[mplsResp] = responseMPLS;
             wss.bindHandlers(handlers);


             // custom click handler
             $scope.arpGetter = arpGetter;
             $scope.icmpGetter = icmpGetter;
             $scope.dhcpGetter = dhcpGetter;
             $scope.lldpGetter = lldpGetter;
             $scope.vlanGetter = vlanGetter;
             $scope.igmpGetter = igmpGetter;
             $scope.pimGetter = pimGetter;
             $scope.bsnGetter = bsnGetter;
             $scope.unknownGetter = unknownGetter;
             $scope.mplsGetter = mplsGetter;
             $scope.dthreestuff = dthreestuff;



             // cleanup
             $scope.$on('$destroy', function () {
                 wss.unbindHandlers(handlers);
                 $log.log('OvSampleCustomCtrl has been destroyed');
             });

             $log.log('OvSampleCustomCtrl has been created');
         }]);



 }());