GUI -- Topology - PortStats traffic: enhanced to change link style based on valu…

…es (KBps, MBps, GBps).

Change-Id: I67a62ef85a292db431f3d32eefefd81d4e564794

@@ -120,6 +120,7 @@ public abstract class TopologyViewMessageHandlerBase extends UiMessageHandler {
     private static final double MB = 1024 * KB;
     private static final double MB = 1024 * KB;
     private static final double GB = 1024 * MB;
     private static final double GB = 1024 * MB;
 
 
+    // TODO: change GB to Gb (when we compute bits/second)
     private static final String GB_UNIT = "GB";
     private static final String GB_UNIT = "GB";
     private static final String MB_UNIT = "MB";
     private static final String MB_UNIT = "MB";
     private static final String KB_UNIT = "KB";
     private static final String KB_UNIT = "KB";
@@ -763,6 +764,7 @@ public abstract class TopologyViewMessageHandlerBase extends UiMessageHandler {
 
 
     // Poor-mans formatting to get the labels with byte counts looking nice.
     // Poor-mans formatting to get the labels with byte counts looking nice.
     private String formatBytes(long bytes) {
     private String formatBytes(long bytes) {
+        // TODO: multiply everything by 8 to compute bits/second
         String unit;
         String unit;
         double value;
         double value;
         if (bytes > GB) {
         if (bytes > GB) {

@@ -176,6 +176,17 @@
         return Number(elem.style(prop).replace(/px$/, ''));
         return Number(elem.style(prop).replace(/px$/, ''));
     }
     }
 
 
+    function endsWith(str, suffix) {
+        return str.indexOf(suffix, str.length - suffix.length) !== -1;
+    }
+
+    function parseBitRate(str) {
+        return Number(str.replace(/,/, '')
+                        .replace(/\s+.bps/i, '')
+                        .replace(/\.\d*/, ''));
+    }
+
+
     angular.module('onosUtil')
     angular.module('onosUtil')
         .factory('FnService', ['$window', function (_$window_) {
         .factory('FnService', ['$window', function (_$window_) {
             $window = _$window_;
             $window = _$window_;
@@ -196,7 +207,9 @@
                 isEmptyObject: isEmptyObject,
                 isEmptyObject: isEmptyObject,
                 cap: cap,
                 cap: cap,
                 noPx: noPx,
                 noPx: noPx,
-                noPxStyle: noPxStyle
+                noPxStyle: noPxStyle,
+                endsWith: endsWith,
+                parseBitRate: parseBitRate
             };
             };
     }]);
     }]);
 
 

@@ -458,6 +458,45 @@ html[data-platform='iPad'] #topo-p-detail {
     stroke: rgba(121,231,158,0.5);
     stroke: rgba(121,231,158,0.5);
 }
 }
 
 
+/* Port traffic color visualization for KBps, MBps, and GBps */
+
+.light #ov-topo svg .link.secondary.port-traffic-KBps {
+    stroke: rgb(0,153,51);
+    stroke-width: 5.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-KBps {
+    stroke: rgb(98, 153, 118);
+    stroke-width: 5.0;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-MBps {
+    stroke: rgb(128,145,27);
+    stroke-width: 6.5;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-MBps {
+    stroke: rgb(91, 109, 54);
+    stroke-width: 6.5;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-GBps {
+    stroke: rgb(255, 137, 3);
+    stroke-width: 8.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-GBps {
+    stroke: rgb(174, 119, 55);
+    stroke-width: 8.0;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-GBps-choked {
+    stroke: rgb(183, 30, 21);
+    stroke-width: 8.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-GBps-choked {
+    stroke: rgb(127, 40, 39);
+    stroke-width: 8.0;
+}
+
+
 #ov-topo svg .link.primary {
 #ov-topo svg .link.primary {
     stroke-width: 4px;
     stroke-width: 4px;
 }
 }

@@ -59,13 +59,31 @@
         //  labels to them, if they are defined.
         //  labels to them, if they are defined.
         paths.forEach(function (p) {
         paths.forEach(function (p) {
             var n = p.links.length,
             var n = p.links.length,
-                i, ldata;
+                i, ldata, lab, units, magnitude, portcls;
 
 
             for (i=0; i<n; i++) {
             for (i=0; i<n; i++) {
                 ldata = api.findLinkById(p.links[i]);
                 ldata = api.findLinkById(p.links[i]);
-                if (ldata && ldata.el) {
+                lab = p.labels[i];
+
+                if (ldata && !ldata.el.empty()) {
                     ldata.el.classed(p.class, true);
                     ldata.el.classed(p.class, true);
-                    ldata.label = p.labels[i];
+                    ldata.label = lab;
+
+                    // TODO: change this to 'bps' when we measure bits/sec
+                    if (fs.endsWith(lab, 'Bps')) {
+                        // inject additional styling for port-based traffic
+                        units = lab.substring(lab.length-4);
+                        portcls = 'port-traffic-' + units;
+
+                        // for GBps
+                        if (units.substring(0,1) === 'G') {
+                            magnitude = fs.parseBitRate(lab);
+                            if (magnitude >= 9) {
+                                portcls += '-choked'
+                            }
+                        }
+                        ldata.el.classed(portcls, true);
+                    }
                 }
                 }
             }
             }
         });
         });

@@ -214,7 +214,7 @@ describe('factory: fw/util/fn.js', function() {
             'isF', 'isA', 'isS', 'isO', 'contains',
             'isF', 'isA', 'isS', 'isO', 'contains',
             'areFunctions', 'areFunctionsNonStrict', 'windowSize', 'isMobile',
             'areFunctions', 'areFunctionsNonStrict', 'windowSize', 'isMobile',
             'find', 'inArray', 'removeFromArray', 'isEmptyObject', 'cap',
             'find', 'inArray', 'removeFromArray', 'isEmptyObject', 'cap',
-            'noPx', 'noPxStyle'
+            'noPx', 'noPxStyle', 'endsWith', 'parseBitRate'
         ])).toBeTruthy();
         ])).toBeTruthy();
     });
     });
 
 
@@ -413,4 +413,34 @@ describe('factory: fw/util/fn.js', function() {
         d3.select('#fooElem').remove();
         d3.select('#fooElem').remove();
     });
     });
 
 
+    // === Tests for endsWith()
+    it('should return true if string ends with foo', function () {
+        expect(fs.endsWith("barfoo", "foo")).toBe(true);
+    });
+
+    it('should return false if string doesnt end with foo', function () {
+        expect(fs.endsWith("barfood", "foo")).toBe(false);
+    });
+
+    // === Tests for parseBitRate()
+    it('should return 5 - a', function () {
+        expect(fs.parseBitRate('5.47 KBps')).toBe(5);
+    });
+
+    it('should return 5 - b', function () {
+        expect(fs.parseBitRate('5. KBps')).toBe(5);
+    });
+
+    it('should return 5 - c', function () {
+        expect(fs.parseBitRate('5 KBps')).toBe(5);
+    });
+
+    it('should return 5 - d', function () {
+        expect(fs.parseBitRate('5 Kbps')).toBe(5);
+    });
+
+    it('should return 2001', function () {
+        expect(fs.parseBitRate('2,001.59 Gbps')).toBe(2001);
+    });
 });
 });
+