Introduce bandwidth on links

masco · Feb 9, 2020 · 45040f6 · 45040f6
1 parent 057ae7f
commit 45040f6
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 7 deletions.
diff --git a/assets/topology.css b/assets/topology.css
@@ -46,6 +46,6 @@
 
 @keyframes traffic {
   to {
-    stroke-dashoffset: 100;
+    stroke-dashoffset: -100;
   }
 }
diff --git a/src/Config.ts b/src/Config.ts
@@ -491,13 +491,24 @@ var DefaultConfig = {
         }
     ],
     linkAttrs: function (link: Link) {
+        var metric = link.source.data.LastUpdateMetric
+        var bandwidth = 0
+        if (metric) {
+            bandwidth = (metric.RxBytes + metric.TxBytes) * 8
+            bandwidth /= (metric.Last - metric.Start) / 1000
+        }
+
         var attrs = {
             classes: [link.data.RelationType],
             icon: "\uf362",
             directed: false,
             href: '',
             iconClass: '',
-            label: ""
+            label: bandwidth ? Tools.prettyBandwidth(bandwidth) : ""
+        }
+
+        if (bandwidth > 0) {
+            attrs.classes.push('traffic')
         }
 
         if (link.data.RelationType === "layer2") {

diff --git a/src/Tools.ts b/src/Tools.ts
@@ -18,7 +18,7 @@
 
 export default class Tools {
 
-    static prettyBytes(value) {
+    static prettyBytes(value: number) {
         var g = Math.floor(value / 1000000000)
         var m = Math.floor((value - g * 1000000000) / 1000000)
         var k = Math.floor((value - g * 1000000000 - m * 1000000) / 1000)
@@ -30,4 +30,17 @@ export default class Tools {
 
         return b.toLocaleString() + " bytes"
     }
+
+    static prettyBandwidth(value: number) {
+        var g = Math.floor(value / 1000000000)
+        var m = Math.floor((value - g * 1000000000) / 1000000)
+        var k = Math.floor((value - g * 1000000000 - m * 1000000) / 1000)
+        var b = value - g * 1000000000 - m * 1000000 - k * 1000
+
+        if (g) return g + "Gbit/s"
+        if (m) return m + "Mbit/s"
+        if (k) return k + "Kbit/s"
+
+        return b.toLocaleString() + " bit/s"
+    }
 }
diff --git a/src/Topology.css b/src/Topology.css
@@ -58,8 +58,8 @@ svg {
 }
 
 .links .directed {
-    marker-start: url(#link-directed-marker);
-    marker-end: unset;
+    marker-start: unset;
+    marker-end: url(#link-directed-marker);
 }
 
 .link-marker {

diff --git a/src/Topology.tsx b/src/Topology.tsx
@@ -2259,10 +2259,10 @@ export class Topology extends React.Component<Props, {}> {
             }
 
             if (dSource.y < dTarget.y) {
-                return vLinker({ source: { node: d.target, dx: 0, dy: -margin }, target: { node: d.source, dx: 0, dy: margin } })
+                return vLinker({ source: { node: d.source, dx: 0, dy: margin }, target: { node: d.target, dx: 0, dy: -margin } })
             }
 
-            return vLinker({ source: { node: d.source, dx: 0, dy: margin }, target: { node: d.target, dx: 0, dy: -margin } })
+            return vLinker({ source: { node: d.target, dx: 0, dy: -margin }, target: { node: d.source, dx: 0, dy: margin } })
         }
         const linker = (d: Link) => wrapperLink(d, 55)
 
@@ -2330,6 +2330,7 @@ export class Topology extends React.Component<Props, {}> {
 
         linkLabel = linkLabel.merge(linkLabelEnter)
         linkLabel.style("opacity", (d: Link) => this.isLinkVisible(d) ? 1 : 0)
+        linkLabel.select('textPath').text((d: Link) => this.props.linkAttrs(d).label)
 
         var linkWrap = this.gLinkWraps.selectAll('path.link-wrap')
             .interrupt()