ui: TProxy Service Mesh Viz Beta Changes

.changelog/10002.txt

@@ -0,0 +1,3 @@
+```ui:enhancement
+Transparent Proxy - Service mesh visualization updates
+```

ui/packages/consul-ui/app/components/consul/transparent-proxy/index.hbs

@@ -0,0 +1,3 @@
+<span class="consul-transparent-proxy">
+  {{t "components.consul.transparent-proxy"}}
+</span>

ui/packages/consul-ui/app/components/informed-action/layout.scss

@@ -2,6 +2,9 @@
   & {
     min-width: 190px;
   }
+  &.documentation {
+    min-width: 270px;
+  }
   > div {
     padding: 1rem;
   }

ui/packages/consul-ui/app/components/topology-metrics/card.hbs → ui/packages/consul-ui/app/components/topology-metrics/card/index.hbs

@@ -1,4 +1,11 @@
-<a class="card"
+{{#if (eq @item.Name '* (All Services)')}}
+<a class="topology-metrics-card" href={{href-to 'dc.services.index'}}>
+  <p class="empty">
+    {{@item.Name}}
+  </p>
+</a>
+{{else}}
+<a class="topology-metrics-card"
   href={{if
    (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))
     (href-to "nspace.dc.services.show.index" (concat '~' @item.Namespace) @item.Datacenter @item.Name)
@@ -10,6 +17,9 @@
   <p>
     {{@item.Name}}
   </p>
+  {{#if (eq @item.Source 'proxy-registration')}}
+    <TopologyMetrics::SourceType />
+  {{/if}}
   <div class="details">
   {{#if (and (env 'CONSUL_NSPACES_ENABLED') (not-eq @item.Namespace @service.Namespace))}}
     <dl class="nspace">
@@ -53,4 +63,5 @@
 {{/if}}
   </div>
   {{yield}}
-</a>
+</a>
+{{/if}}

ui/packages/consul-ui/app/components/topology-metrics/card/index.scss

@@ -0,0 +1,81 @@
+#upstream-container .topology-metrics-card:not(:last-child),
+#downstream-container .topology-metrics-card:not(:last-child) {
+  margin-bottom: 8px;
+}
+#upstream-container .topology-metrics-card,
+#downstream-container .topology-metrics-card {
+  display: block;
+  color: $gray-700;
+  overflow: hidden;
+  background-color: $white;
+  border-radius: $decor-radius-100;
+  border: 1px solid $gray-200;
+  p {
+    padding: 12px 12px 0 12px;
+    font-size: $typo-size-500;
+    font-weight: $typo-weight-semibold;
+    margin-bottom: 0 !important;
+  }
+  p.empty {
+    padding: 12px !important;
+  }
+  div {
+    display: inline-flex;
+    dl {
+      display: inline-flex;
+      margin-right: 8px;
+    }
+    dd {
+      color: $gray-700;
+    }
+    span {
+      margin-right: 8px;
+    }
+    span::before,
+    dt::before {
+      margin-right: 4px;
+    }
+    .nspace dt::before,
+    .health dt::before {
+      margin-top: 2px;
+    }
+    .nspace dt::before {
+      @extend %with-folder-outline-mask, %as-pseudo;
+    }
+    .health dt::before {
+      @extend %with-help-circle-outline-mask, %as-pseudo;
+    }
+    .nspace dt::before {
+      @extend %with-folder-outline-mask, %as-pseudo;
+    }
+    .health dt::before {
+      @extend %with-help-circle-outline-mask, %as-pseudo;
+    }
+    .nspace dt::before,
+    .health dt::before {
+      background-color: $gray-500;
+    }
+    .passing::before {
+      @extend %with-check-circle-fill-color-mask, %as-pseudo;
+      background-color: $green-500;
+    }
+    .warning::before {
+      @extend %with-alert-triangle-color-mask, %as-pseudo;
+      background-color: $orange-500;
+    }
+    .critical::before {
+      @extend %with-cancel-square-fill-color-mask, %as-pseudo;
+      background-color: $red-500;
+    }
+    .empty::before {
+      @extend %with-minus-square-fill-mask, %as-pseudo;
+      color: $gray-500;
+    }
+  }
+  .details {
+    padding: 0 12px 12px 12px;
+  }
+  div.stats {
+    border-top: 1px solid $gray-200;
+  }
+}

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

@@ -90,6 +90,13 @@
       @item={{item}}
       @oncreate={{action @oncreate item @service}}
     />
+  {{else if (and item.Intention.Allowed (not item.TransparentProxy) (eq item.Source 'specific-intention'))}}
+    <TopologyMetrics::Popover
+      @type='not-defined'
+      @position={{find-by 'id' (concat this.guid item.Namespace item.Name) this.iconPositions}}
+      @item={{item}}
+      @oncreate={{action @oncreate item @service}}
+    />
   {{/if}}
 {{/each}}
 

ui/packages/consul-ui/app/components/topology-metrics/index.hbs

@@ -81,15 +81,17 @@
       @oncreate={{action @oncreate}}
     />
   </div>
-{{#if (gt @topology.Upstreams.length 0)}}
+{{#if (gt this.upstreams.length 0)}}
   <div id="upstream-column">
-  {{#each-in (group-by "Datacenter" @topology.Upstreams) as |dc upstreams|}}
+  {{#each-in (group-by "Datacenter" this.upstreams) as |dc upstreams|}}
     <div
       id="upstream-container"
       {{did-insert this.setHeight 'upstream-lines'}}
-      {{did-update this.setHeight 'upstream-lines' @topology.Upstreams}}
+      {{did-update this.setHeight 'upstream-lines' this.upstreams}}
     >
+    {{#if dc}}
       <p>{{dc}}</p>
+    {{/if}}
     {{#each upstreams as |item|}}
       <TopologyMetrics::Card
         @dc={{@dc}}
@@ -119,7 +121,7 @@
       @view={{this.upView}}
       @center={{this.centerDimensions}}
       @lines={{this.upLines}}
-      @items={{@topology.Upstreams}}
+      @items={{this.upstreams}}
       @oncreate={{action @oncreate}}
     />
   </div>

ui/packages/consul-ui/app/components/topology-metrics/index.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { action, get } from '@ember/object';
 
 export default class TopologyMetrics extends Component {
   // =attributes
@@ -66,6 +66,24 @@ export default class TopologyMetrics extends Component {
       });
   }
 
+  get upstreams() {
+    const upstreams = get(this.args.topology, 'Upstreams') || [];
+    const items = [...upstreams];
+    const defaultAllow = get(this.args.topology, 'DefaultAllow');
+    const wildcardIntention = get(this.args.topology, 'WildcardIntention');
+    if (defaultAllow || wildcardIntention) {
+      items.push({
+        Name: '* (All Services)',
+        Datacenter: '',
+        Namespace: '',
+        Intention: {
+          Allowed: true,
+        },
+      });
+    }
+    return items;
+  }
+
   // =actions
   @action
   setHeight(el, item) {
@@ -89,12 +107,22 @@ export default class TopologyMetrics extends Component {
 
     // Calculate viewBox dimensions
     this.downView = document.getElementById('downstream-lines').getBoundingClientRect();
-    this.upView = document.getElementById('upstream-lines').getBoundingClientRect();
+    const upstreamLines = document.getElementById('upstream-lines').getBoundingClientRect();
+    const upstreamColumn = document.getElementById('upstream-column').getBoundingClientRect();
+
+    this.upView = {
+      x: upstreamLines.x,
+      y: upstreamLines.y,
+      width: upstreamLines.width,
+      height: upstreamColumn.height,
+    };
 
     // Get Card elements positions
-    const downCards = [...document.querySelectorAll('#downstream-container .card')];
+    const downCards = [
+      ...document.querySelectorAll('#downstream-container .topology-metrics-card'),
+    ];
     const grafanaCard = document.querySelector('.metrics-header');
-    const upCards = [...document.querySelectorAll('#upstream-column .card')];
+    const upCards = [...document.querySelectorAll('#upstream-column .topology-metrics-card')];
 
     // Set center positioning points
     this.centerDimensions = grafanaCard.getBoundingClientRect();

ui/packages/consul-ui/app/components/topology-metrics/layout.scss

@@ -49,44 +49,6 @@
 #upstream-column #upstream-container:not(:last-child) {
   margin-bottom: 8px;
 }
-#upstream-container .card:not(:last-child),
-#downstream-container .card:not(:last-child) {
-  margin-bottom: 8px;
-}
-#upstream-container .card,
-#downstream-container .card {
-  display: block;
-  color: $gray-700;
-  overflow: hidden;
-  p {
-    padding: 12px 12px 0 12px;
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 0 !important;
-  }
-  div {
-    display: inline-flex;
-    dl {
-      display: inline-flex;
-      margin-right: 8px;
-    }
-    span {
-      margin-right: 8px;
-    }
-    span::before,
-    dt::before {
-      margin-right: 4px;
-    }
-    .nspace dt::before,
-    .health dt::before {
-      margin-top: 2px;
-    }
-  }
-  .details {
-    padding: 0 12px 12px 12px;
-  }
-
-}
 
 // Metrics Container
 #metrics-container {

ui/packages/consul-ui/app/components/topology-metrics/notice/index.hbs

@@ -0,0 +1,31 @@
+<Notice
+  class="topology-metrics-notice"
+  ...attributes
+  @type={{@type}}
+as |notice|>
+    <notice.Header>
+    <h3>
+      {{t (concat "components.consul.topology-metrics.notice." @for ".header")}}
+    </h3>
+  </notice.Header>
+  <notice.Body>
+    <p>
+     {{t (concat "components.consul.topology-metrics.notice." @for ".body")}}
+    </p>
+  </notice.Body>
+{{#if @action}}
+  <notice.Footer>
+    <p>
+      {{#if @internal}}
+        <Action @href={{href-to (t (concat "components.consul.topology-metrics.notice." @for ".footer.URL"))}}>
+          {{t (concat "components.consul.topology-metrics.notice." @for ".footer.name")}}
+        </Action>
+      {{else}}
+        <Action @href={{@link}} @external={{true}}>
+          {{t (concat "components.consul.topology-metrics.notice." @for ".footer")}}
+        </Action>
+      {{/if}}
+    </p>
+  </notice.Footer>
+{{/if}}
+</Notice>