Create icon and dashed line for intention not explictly defined

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/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='notDefined'
+      @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/popover/index.hbs

@@ -4,22 +4,21 @@
 >
 
 {{#if (eq @type 'deny')}}
-
   <InformedAction
     class="dangerous"
     {{did-insert (set this 'popover')}}
   >
     <:header>
       <h3>
-        Connection Denied
+        {{t "components.consul.topology-metrics.popover.deny.header"}}
       </h3>
     </:header>
     <:body>
       <p>
         {{#if @item.Intention.HasExact}}
-          Change the action of this intention to allow.
+          {{t "components.consul.topology-metrics.popover.deny.body.isExact"}}
         {{else}}
-          Add an intention that allows these two services to connect.
+          {{t "components.consul.topology-metrics.popover.deny.body.notExact"}}
         {{/if}}
       </p>
     </:body>
@@ -31,9 +30,9 @@
           type="button"
         >
           {{#if @item.Intention.HasExact}}
-            Allow
+            {{t "components.consul.topology-metrics.popover.deny.action.isExact"}}
           {{else}}
-            Create
+            {{t "components.consul.topology-metrics.popover.deny.action.notExact"}}
           {{/if}}
         </button>
       </Actions.Action>
@@ -48,29 +47,57 @@
       </Actions.Action>
     </:actions>
   </InformedAction>
-
-{{else}}
-
+{{else if (eq @type 'notDefined')}}
   <InformedAction
-    class="info"
+    class="warning documentation"
     {{did-insert (set this 'popover')}}
   >
     <:header>
       <h3>
-        Layer 7 permissions
+        {{t "components.consul.topology-metrics.popover.notDefined.header"}}
       </h3>
     </:header>
     <:body>
       <p>
-        Certain HTTP request info must be identified.
+        {{t "components.consul.topology-metrics.popover.notDefined.body"}}
       </p>
     </:body>
     <:actions as |Actions|>
       <Actions.Action class="action">
-        <a
-          href={{href-to 'dc.services.show.intentions.edit' (concat @item.Intention.ID)}}
-        >
-            View
+        <a href="{{env 'CONSUL_DOCS_URL'}}/connect/registration/service-registration#upstreams" rel="noopener noreferrer" target="_blank">
+          {{t "components.consul.topology-metrics.popover.notDefined.action"}}
+        </a>
+      </Actions.Action>
+      <Actions.Action>
+        <button
+          {{on 'click' (fn (optional this.popoverController.hide))}}
+          class="cancel"
+          type="button"
+        >
+          Close
+        </button>
+      </Actions.Action>
+    </:actions>
+  </InformedAction>
+{{else}}
+  <InformedAction
+    class="info"
+    {{did-insert (set this 'popover')}}
+  >
+    <:header>
+      <h3>
+        {{t "components.consul.topology-metrics.popover.l7.header"}}
+      </h3>
+    </:header>
+    <:body>
+      <p>
+        {{t "components.consul.topology-metrics.popover.l7.body"}}
+      </p>
+    </:body>
+    <:actions as |Actions|>
+      <Actions.Action class="action">
+        <a href={{href-to 'dc.services.show.intentions.edit' (concat @item.Intention.ID)}}>
+          {{t "components.consul.topology-metrics.popover.l7.action"}}
         </a>
       </Actions.Action>
       <Actions.Action>
@@ -84,7 +111,6 @@
       </Actions.Action>
     </:actions>
   </InformedAction>
-
 {{/if}}
   <button
     {{with-overlay

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

@@ -27,4 +27,9 @@
     @extend %with-layers-mask, %as-pseudo;
     background-color: $gray-300;
   }
+  &.notDefined > button::before,
+  &.notDefined .tippy-arrow::after {
+    @extend %with-alert-triangle-mask, %as-pseudo;
+    color: $yellow-500;
+  }
 }

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

@@ -65,6 +65,9 @@
     stroke: $gray-300;
     stroke-width: 2;
   }
+  path[data-permission='notDefined'] {
+    stroke-dasharray: 4;
+  }
   path[data-permission='deny'] {
     stroke: $red-500;
   }

ui/packages/consul-ui/app/helpers/service/intention-permissions.js

@@ -3,12 +3,15 @@ import { helper } from '@ember/component/helper';
 export default helper(function serviceIntentionPermissions([params] /*, hash*/) {
   const hasPermissions = params.Intention.HasPermissions;
   const allowed = params.Intention.Allowed;
+  const notExplicitlyDefined = params.Source === 'specific-intention' && !params.TransparentProxy;
 
   switch (true) {
     case hasPermissions:
       return 'allow';
     case !allowed && !hasPermissions:
       return 'deny';
+    case allowed && notExplicitlyDefined:
+      return 'notDefined';
     default:
       return 'allow';
   }