Refactor and color SVG Lines based on intention permissions

ui-v2/app/components/topology-metrics/down-lines/index.hbs

@@ -0,0 +1,61 @@
+{{on-window 'resize' (action this.getIconPositions)}}
+
+{{#if (gt @lines.length 0)}}
+  <svg
+    {{did-insert this.getIconPositions}}
+    viewBox={{concat @view.x ' ' @view.y ' ' @view.width ' ' @view.height}}
+    preserveAspectRatio="none"
+  >
+    <defs>
+      <marker id="allow-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6">
+        <circle
+          cx="6"
+          cy="6"
+          r="6"
+        />
+      </marker>
+      <marker id="allow-arrow" viewBox="-1 -1 12 12" refX="5" refY="5"
+          markerWidth="6" markerHeight="6"
+          orient="auto-start-reverse">
+        <polygon points="0 0 10 5 0 10" />
+      </marker>
+      <marker id="deny-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6">
+        <circle
+          cx="6"
+          cy="6"
+          r="6"
+        />
+      </marker>
+      <marker id="deny-arrow" viewBox="-1 -1 12 12" refX="5" refY="5"
+          markerWidth="6" markerHeight="6"
+          orient="auto-start-reverse">
+        <polygon points="0 0 10 5 0 10" />
+      </marker>
+    </defs>
+{{#each @lines as |line|}}
+  {{#if (eq line.permission 'deny')}}
+    <path
+      id={{line.id}}
+      d={{svg-curve line.dest src=line.src}}
+      marker-start="url(#deny-dot)"
+      marker-end="url(#deny-arrow)"
+      data-permission={{line.permission}}
+    />
+  {{else}}
+     <path
+      id={{line.id}}
+      d={{svg-curve line.dest src=line.src}}
+      marker-start="url(#allow-dot)"
+      marker-end="url(#allow-arrow)"
+      data-permission={{line.permission}}
+    />
+  {{/if}}
+{{/each}}
+  </svg>
+{{/if}}
+
+<TopologyMetrics::Icon
+  @positions={{this.iconPositions}}
+  @items={{@items}}
+/>
+

ui-v2/app/components/topology-metrics/down-lines/index.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class TopoloyMetricsLines extends Component {
+  @tracked iconPositions;
+
+  @action
+  getIconPositions() {
+    const view = this.args.view;
+    const lines = [...document.querySelectorAll('#downstream-lines path')];
+
+    this.iconPositions = lines.map(item => {
+      const pathLen = parseFloat(item.getTotalLength());
+      const thirdLen = item.getPointAtLength(Math.ceil(pathLen / 3));
+
+      return {
+        id: item.id,
+        x: thirdLen.x - view.x,
+        y: thirdLen.y - view.y,
+      };
+    });
+  }
+}

ui-v2/app/components/topology-metrics/index.hbs

@@ -12,7 +12,10 @@
       </span>
     </div>
   {{#each @downstreams as |downstream|}}
-    <div class="card">
+    <div class="card"
+      data-permission="{{downstream.Intention.Action}}"
+      id="{{downstream.Namespace}}{{downstream.Name}}"
+    >
       <p>
         {{downstream.Name}}
       </p>
@@ -46,42 +49,24 @@
     </div>
   </div>
   <div id="downstream-lines">
-  {{#if (gt this.downLines.length 0)}}
-    <svg
-      viewBox={{concat downView.x ' ' downView.y ' ' downView.width ' ' downView.height}}
-      preserveAspectRatio="none"
-    >
-      <defs>
-        <marker id="dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6">
-          <circle
-            cx="6"
-            cy="6"
-            r="6"
-          />
-        </marker>
-        <marker id="arrow" viewBox="-1 -1 12 12" refX="5" refY="5"
-            markerWidth="6" markerHeight="6"
-            orient="auto-start-reverse">
-          <polygon points="0 0 10 5 0 10" />
-        </marker>
-      </defs>
-    {{#each this.downLines as |svg| }}
-      <path
-        d={{svg-curve svg.dest src=svg.src}}
-        marker-start="url(#dot)"
-        marker-end="url(#arrow)"
-      />
-    {{/each}}
-    </svg>
-  {{/if}}
+    <TopologyMetrics::DownLines
+      @type='downstream'
+      @view={{this.downView}}
+      @center={{this.centerDimensions}}
+      @lines={{this.downLines}}
+      @items={{@downstreams}}
+     />
   </div>
 {{#if (gt @upstreams.length 0)}}
   <div id="upstream-column">
   {{#each-in (group-by "Datacenter" @upstreams) as |dc upstreams|}}
     <div id="upstream-container">
       <p>{{dc}}</p>
       {{#each upstreams as |upstream|}}
-      <div class="card">
+      <div class="card"
+        data-permission="{{upstream.Intention.Action}}"
+        id="{{upstream.Namespace}}{{upstream.Name}}"
+      >
         <p>
           {{upstream.Name}}
         </p>
@@ -130,33 +115,12 @@
   </div>
 {{/if}}
   <div id="upstream-lines">
-  {{#if (gt this.upLines.length 0)}}
-    <svg
-      viewBox={{concat this.centerDimensions.x ' ' upView.y ' ' upView.width ' ' upView.height}}
-      preserveAspectRatio="none"
-    >
-      <defs>
-        <marker id="dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6">
-          <circle
-            cx="6"
-            cy="6"
-            r="6"
-          />
-        </marker>
-        <marker id="arrow" viewBox="-1 -1 12 12" refX="5" refY="5"
-            markerWidth="6" markerHeight="6"
-            orient="auto-start-reverse">
-          <polygon points="0 0 10 5 0 10" />
-        </marker>
-      </defs>
-    {{#each this.upLines as |svg| }}
-      <path
-        d={{svg-curve svg.dest src=svg.src}}
-        marker-start="url(#dot)"
-        marker-end="url(#arrow)"
-      />
-    {{/each}}
-    </svg>
-  {{/if}}
+    <TopologyMetrics::UpLines
+      @type='upstream'
+      @view={{this.upView}}
+      @center={{this.centerDimensions}}
+      @lines={{this.upLines}}
+      @items={{@upstreams}}
+     />
   </div>
 </div>

ui-v2/app/components/topology-metrics/index.js

@@ -12,41 +12,65 @@ export default class TopologyMetrics extends Component {
 
   // =methods
   drawDownLines(items) {
-    return items.map(item => {
-      const dimensions = item.getBoundingClientRect();
-      const dest = {
-        x: this.centerDimensions.x,
-        y: this.centerDimensions.y + this.centerDimensions.height / 4,
-      };
-      const src = {
-        x: dimensions.x + dimensions.width,
-        y: dimensions.y + dimensions.height / 2,
-      };
+    let order = [null, 'allow', 'deny'];
 
-      return {
-        dest: dest,
-        src: src,
-      };
-    });
+    return items
+      .map(item => {
+        const dimensions = item.getBoundingClientRect();
+        const dest = {
+          x: this.centerDimensions.x,
+          y: this.centerDimensions.y + this.centerDimensions.height / 4,
+        };
+        const src = {
+          x: dimensions.x + dimensions.width,
+          y: dimensions.y + dimensions.height / 2,
+        };
+
+        return {
+          id: item.id,
+          permission: item.getAttribute('data-permission'),
+          dest: dest,
+          src: src,
+        };
+      })
+      .sort((a, b) => {
+        if (a.permission === b.permission) {
+          return 0;
+        }
+
+        return order.indexOf(a.permission) - order.indexOf(b.permission);
+      });
   }
 
   drawUpLines(items) {
-    return items.map(item => {
-      const dimensions = item.getBoundingClientRect();
-      const dest = {
-        x: dimensions.x - dimensions.width - 26,
-        y: dimensions.y + dimensions.height / 2,
-      };
-      const src = {
-        x: this.centerDimensions.x + 20,
-        y: this.centerDimensions.y + this.centerDimensions.height / 4,
-      };
+    let order = [null, 'allow', 'deny'];
+
+    return items
+      .map(item => {
+        const dimensions = item.getBoundingClientRect();
+        const dest = {
+          x: dimensions.x - dimensions.width - 26,
+          y: dimensions.y + dimensions.height / 2,
+        };
+        const src = {
+          x: this.centerDimensions.x + 20,
+          y: this.centerDimensions.y + this.centerDimensions.height / 4,
+        };
+
+        return {
+          id: item.id,
+          permission: item.getAttribute('data-permission'),
+          dest: dest,
+          src: src,
+        };
+      })
+      .sort((a, b) => {
+        if (a.permission === b.permission) {
+          return 0;
+        }
 
-      return {
-        dest: dest,
-        src: src,
-      };
-    });
+        return order.indexOf(a.permission) - order.indexOf(b.permission);
+      });
   }
 
   // =actions

ui-v2/app/components/topology-metrics/up-lines/index.hbs

@@ -0,0 +1,60 @@
+{{on-window 'resize' (action this.getIconPositions)}}
+
+{{#if (gt @lines.length 0)}}
+  <svg
+    {{did-insert this.getIconPositions}}
+    viewBox={{concat @center.x ' ' @view.y ' ' @view.width ' ' @view.height}}
+    preserveAspectRatio="none"
+  >
+    <defs>
+      <marker id="allow-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6">
+        <circle
+          cx="6"
+          cy="6"
+          r="6"
+        />
+      </marker>
+      <marker id="allow-arrow" viewBox="-1 -1 12 12" refX="5" refY="5"
+          markerWidth="6" markerHeight="6"
+          orient="auto-start-reverse">
+        <polygon points="0 0 10 5 0 10" />
+      </marker>
+      <marker id="deny-dot" viewBox="-2 -2 15 15" refX="6" refY="6" markerWidth="6" markerHeight="6">
+        <circle
+          cx="6"
+          cy="6"
+          r="6"
+        />
+      </marker>
+      <marker id="deny-arrow" viewBox="-1 -1 12 12" refX="5" refY="5"
+          markerWidth="6" markerHeight="6"
+          orient="auto-start-reverse">
+        <polygon points="0 0 10 5 0 10" />
+      </marker>
+    </defs>
+{{#each @lines as |line|}}
+  {{#if (eq line.permission 'deny')}}
+    <path
+      id={{line.id}}
+      d={{svg-curve line.dest src=line.src}}
+      marker-start="url(#deny-dot)"
+      marker-end="url(#deny-arrow)"
+      data-permission={{line.permission}}
+    />
+  {{else}}
+     <path
+      id={{line.id}}
+      d={{svg-curve line.dest src=line.src}}
+      marker-start="url(#allow-dot)"
+      marker-end="url(#allow-arrow)"
+      data-permission={{line.permission}}
+    />
+  {{/if}}
+{{/each}}
+  </svg>
+{{/if}}
+
+<TopologyMetrics::Icon
+  @positions={{this.iconPositions}}
+  @items={{@items}}
+/>

ui-v2/app/components/topology-metrics/up-lines/index.js

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class TopoloyMetricsLines extends Component {
+  @tracked iconPositions;
+
+  @action
+  getIconPositions() {
+    const center = this.args.center;
+    const lines = [...document.querySelectorAll('#upstream-lines path')];
+
+    this.iconPositions = lines.map(item => {
+      const pathLen = parseFloat(item.getTotalLength());
+      const partLen = item.getPointAtLength(Math.ceil(pathLen * 0.666));
+      return {
+        id: item.id,
+        x: partLen.x - center.x,
+        y: partLen.y - center.y * 0.81,
+      };
+    });
+  }
+}