Create placeholder *(All Services) Card

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

@@ -1,3 +1,10 @@
+{{#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))
@@ -56,4 +63,5 @@
 {{/if}}
   </div>
   {{yield}}
-</a>
+</a>
+{{/if}}

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

@@ -16,6 +16,9 @@
     font-weight: $typo-weight-semibold;
     margin-bottom: 0 !important;
   }
+  p.empty {
+    padding: 12px !important;
+  }
   div {
     display: inline-flex;
     dl {

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,7 +107,15 @@ 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 = [