ui: Add EmptyState for exposed paths, plus additional details (#9445)

* ui: Add EmptyState for exposed paths, plus additional details

1. Add the port to the combined address
2. Use the proxy address for the ip address used

* Convert to glimmer component

* Add spaces to ListenerPort and LocalPathPort Tooltips

ui/packages/consul-ui/app/components/action/index.hbs

@@ -1,35 +1,27 @@
-{{#if @for}}
+{{#if @for~}}
   <label
     for={{@for}}
     ...attributes
-  >
+  >{{yield}}</label>
-    {{yield}}
+{{~else if @href~}}
-  </label>
+  {{~#if @external~}}
-{{else if @href}}
-  {{#if @external}}
     <a
       href={{@href}}
       target="_blank"
       rel="noopener noreferrer"
       ...attributes
-    >
+    >{{yield}}</a>
-      {{yield}}
+  {{~else~}}
-    </a>
-  {{else}}
     <a
       href={{@href}}
       ...attributes
-    >
+    >{{yield}}</a>
-      {{yield}}
+  {{~/if~}}
-    </a>
+{{~else~}}
-  {{/if}}
-{{else}}
   <button
     tabindex="-1"
     type="button"
     {{on 'click' (optional @onclick)}}
     ...attributes
-  >
+  >{{yield}}</button>
-    {{yield}}
+{{~/if}}
-  </button>
-{{/if}}

ui/packages/consul-ui/app/components/consul/exposed-path/list/index.hbs

@@ -8,7 +8,7 @@
   {{#each @items as |path|}}
     <li>
       <div class="header">
-      {{#let (concat address ':' path.Path) as |combinedAddress|}}
+      {{#let (concat @address ':' path.ListenerPort path.Path) as |combinedAddress|}}
         <p class="combined-address">
           <span>
             {{combinedAddress}}
@@ -37,7 +37,7 @@
         <dl class="port">
           <dt>
             <Tooltip>
-                Port
+              Listener Port
             </Tooltip>
           </dt>
           <dd>
@@ -49,7 +49,7 @@
         <dl class="port">
           <dt>
             <Tooltip>
-                Port
+              Local Path Port
             </Tooltip>
           </dt>
           <dd>
@@ -61,7 +61,7 @@
         <dl class="path">
           <dt>
             <Tooltip>
-                Path
+              Path
             </Tooltip>
           </dt>
           <dd>

ui/packages/consul-ui/app/components/consul/exposed-path/list/index.js

@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});

ui/packages/consul-ui/app/templates/dc/services/instance/exposedpaths.hbs

@@ -3,6 +3,14 @@
   <p>
     The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our documentation.
   </p>
-  <Consul::ExposedPath::List @items={{proxy.Service.Proxy.Expose.Paths}} @address={{item.Address}} />
+  <Consul::ExposedPath::List @items={{proxy.Service.Proxy.Expose.Paths}} @address={{proxy.Address}} />
+{{else}}
+  <EmptyState>
+    <BlockSlot @name="body">
+      <p>
+        There are no individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our <Action @href={{concat (env 'CONSUL_DOCS_URL') '/connect/registration/service-registration#expose-paths-configuration-reference'}} @external={{true}}>documentation</Action>.
+      </p>
+    </BlockSlot>
+  </EmptyState>
 {{/if}}
 </div>