ui: Add more explanatory texts for empty states (#12354)

* ui: Add more explanatory texts for empty states

* Change all template "Read the guide"s

* Add missing htmlSafe

* Remove the stuff I commented out to try and grok the hairy rebase

* Changelog

* More rebased yaml weirdness plus added node:read

.changelog/12354.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Include details on ACL policy dispositions required for unauthorized views
+```

ui/packages/consul-lock-sessions/app/templates/dc/nodes/show/sessions.hbs

@@ -70,17 +70,18 @@ as |route|>
               <EmptyState
                 @login={{route.model.app.login.open}}
               >
-                <BlockSlot @name="header">
+              <BlockSlot @name="header">
-                  <h2>
+                <h2>
-                      Welcome to Lock Sessions
+                  {{t 'routes.dc.nodes.show.sessions.empty.header'
-                  </h2>
+                    items=items.length
-                </BlockSlot>
+                  }}
-
+                </h2>
-                <BlockSlot @name="body">
+              </BlockSlot>
-                  <p>
+              <BlockSlot @name="body">
-                    Consul provides a session mechanism which can be used to build distributed locks. Sessions act as a binding layer between nodes, health checks, and key/value data. There are currently no lock sessions present, or you may not have permission to view lock sessions.
+                {{t 'routes.dc.nodes.show.sessions.empty.body'
-                  </p>
+                  htmlSafe=true
-                </BlockSlot>
+                }}
+              </BlockSlot>
 
                 <BlockSlot @name="actions">
                   <li class="docs-link">
@@ -96,7 +97,7 @@ as |route|>
                       @href="{{env 'CONSUL_DOCS_LEARN_URL'}}/tutorials/consul/distributed-semaphore"
                       @external={{true}}
                     >
-                      Read the guide
+                      Take the tutorial
                     </Action>
                   </li>
                 </BlockSlot>

ui/packages/consul-ui/app/templates/dc/acls/auth-methods/index.hbs

@@ -90,21 +90,16 @@ as |route|>
             >
               <BlockSlot @name="header">
                 <h2>
-                  {{#if (gt items.length 0)}}
+                  {{t 'routes.dc.auth-methods.index.empty.header'
-                    No auth methods found
+                    items=items.length
-                  {{else}}
+                  }}
-                    Welcome to Auth Methods
-                  {{/if}}
                 </h2>
               </BlockSlot>
               <BlockSlot @name="body">
-                <p>
+                {{t 'routes.dc.auth-methods.index.empty.body'
-                  {{#if (gt items.length 0)}}
+                  items=items.length
-                    No auth methods where found matching that search, or you may not have access to view the auth methods you are searching for.
+                  htmlSafe=true
-                  {{else}}
+                }}
-                    There don't seem to be any auth methods, or you may not have access to view auth methods yet.
-                  {{/if}}
-                </p>
               </BlockSlot>
               <BlockSlot @name="actions">
                 <li class="docs-link">

ui/packages/consul-ui/app/templates/dc/acls/auth-methods/show/binding-rules.hbs

@@ -41,12 +41,14 @@ as |items|}}
   {{else}}
     <EmptyState>
       <BlockSlot @name="header">
-        <h2>No binding rules</h2>
+        <h2>
+          {{t 'routes.dc.acls.auth-methods.show.binding-rules.index.empty.header'}}
+        </h2>
       </BlockSlot>
       <BlockSlot @name="body">
-        <p>
+        {{t 'routes.dc.acls.auth-methods.show.binding-rules.index.empty.body'
-          Binding rules allow an operator to express a systematic way of automatically linking roles and service identities to newly created tokens without operator intervention.
+          htmlSafe=true
-        </p>
+        }}
       </BlockSlot>
       <BlockSlot @name="actions">
         <li class="docs-link">

ui/packages/consul-ui/app/templates/dc/acls/auth-methods/show/nspace-rules.hbs

@@ -13,12 +13,14 @@ as |item|}}
   {{else}}
     <EmptyState>
       <BlockSlot @name="header">
-        <h2>No namespace rules</h2>
+        <h2>
+          {{t 'routes.dc.acls.auth-methods.show.nspace-rules.index.empty.header'}}
+        </h2>
       </BlockSlot>
       <BlockSlot @name="body">
-        <p>
+        {{t 'routes.dc.acls.auth-methods.show.nspace-rules.index.empty.body'
-          A set of rules that can control which namespace tokens created via this auth method will be created within. Unlike binding rules, the first matching namespace rule wins.
+          htmlSafe=true
-        </p>
+        }}
       </BlockSlot>
       <BlockSlot @name="actions">
         <li class="docs-link">

ui/packages/consul-ui/app/templates/dc/acls/policies/index.hbs

@@ -99,28 +99,23 @@ as |route|>
             >
               <BlockSlot @name="header">
                 <h2>
-                  {{#if (gt items.length 0)}}
+                  {{t 'routes.dc.acls.policies.index.empty.header'
-                    No policies found
+                    items=items.length
-                  {{else}}
+                  }}
-                    Welcome to Policies
-                  {{/if}}
                 </h2>
               </BlockSlot>
               <BlockSlot @name="body">
-                <p>
+                {{t 'routes.dc.acls.policies.index.empty.body'
-                  {{#if (gt items.length 0)}}
+                  items=items.length
-                    No policies where found matching that search, or you may not have access to view the policies you are searching for.
+                  htmlSafe=true
-                  {{else}}
+                }}
-                    There don't seem to be any policies, or you may not have access to view policies yet.
-                  {{/if}}
-                </p>
               </BlockSlot>
               <BlockSlot @name="actions">
                 <li class="docs-link">
                   <a href="{{env 'CONSUL_DOCS_URL'}}/commands/acl/policy" rel="noopener noreferrer" target="_blank">Documentation on policies</a>
                 </li>
                 <li class="learn-link">
-                  <a href="{{env 'CONSUL_LEARN_URL'}}/consul/security-networking/managing-acl-policies" rel="noopener noreferrer" target="_blank">Read the guide</a>
+                  <a href="{{env 'CONSUL_LEARN_URL'}}/consul/security-networking/managing-acl-policies" rel="noopener noreferrer" target="_blank">Take the tutorial</a>
                 </li>
               </BlockSlot>
             </EmptyState>

ui/packages/consul-ui/app/templates/dc/acls/roles/index.hbs

@@ -91,21 +91,16 @@ as |route|>
             >
               <BlockSlot @name="header">
                 <h2>
-                  {{#if (gt items.length 0)}}
+                  {{t 'routes.dc.acls.roles.index.empty.header'
-                    No roles found
+                    items=items.length
-                  {{else}}
+                  }}
-                    Welcome to Roles
-                  {{/if}}
                 </h2>
               </BlockSlot>
               <BlockSlot @name="body">
-                <p>
+                {{t 'routes.dc.acls.roles.index.empty.body'
-                  {{#if (gt items.length 0)}}
+                  items=items.length
-                    No roles where found matching that search, or you may not have access to view the roles you are searching for.
+                  htmlSafe=true
-                  {{else}}
+                }}
-                    There don't seem to be any roles, or you may not have access to view roles yet.
-                  {{/if}}
-                </p>
               </BlockSlot>
               <BlockSlot @name="actions">
                 <li class="docs-link">

ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs

@@ -110,21 +110,16 @@ as |route|>
             >
               <BlockSlot @name="header">
                 <h2>
-                  {{#if (gt items.length 0)}}
+                  {{t 'routes.dc.acls.tokens.index.empty.header'
-                    No tokens found
+                    items=items.length
-                  {{else}}
+                  }}
-                    Welcome to ACL Tokens
-                  {{/if}}
                 </h2>
               </BlockSlot>
               <BlockSlot @name="body">
-                <p>
+                {{t 'routes.dc.acls.tokens.index.empty.body'
-                  {{#if (gt items.length 0)}}
+                  items=items.length
-                    No tokens where found matching that search, or you may not have access to view the tokens you are searching for.
+                  htmlSafe=true
-                  {{else}}
+                }}
-                    There don't seem to be any tokens, or you may not have access to view tokens yet.
-                  {{/if}}
-                </p>
               </BlockSlot>
             </EmptyState>
           </collection.Empty>

ui/packages/consul-ui/app/templates/dc/intentions/index.hbs

@@ -106,28 +106,23 @@ as |route|>
                 >
                   <BlockSlot @name="header">
                     <h2>
-                      {{#if (gt items.length 0)}}
+                      {{t 'routes.dc.intentions.index.empty.header'
-                        No intentions found
+                        items=items.length
-                      {{else}}
+                      }}
-                        Welcome to Intentions
-                      {{/if}}
                     </h2>
                   </BlockSlot>
                   <BlockSlot @name="body">
-                    <p>
+                    {{t 'routes.dc.intentions.index.empty.body'
-                      {{#if (gt items.length 0)}}
+                      items=items.length
-                        No intentions where found matching that search, or you may not have access to view the intentions you are searching for.
+                      htmlSafe=true
-                      {{else}}
+                    }}
-                        There don't seem to be any intentions, or you may not have access to view intentions yet.
-                      {{/if}}
-                    </p>
                   </BlockSlot>
                   <BlockSlot @name="actions">
                     <li class="docs-link">
                       <a href="{{env 'CONSUL_DOCS_URL'}}/commands/intention" rel="noopener noreferrer" target="_blank">Documentation on intentions</a>
                     </li>
                     <li class="learn-link">
-                      <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/connect" rel="noopener noreferrer" target="_blank">Read the guide</a>
+                      <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/connect" rel="noopener noreferrer" target="_blank">Take the tutorial</a>
                     </li>
                   </BlockSlot>
                 </EmptyState>

ui/packages/consul-ui/app/templates/dc/kv/index.hbs

@@ -178,28 +178,23 @@ as |sort filters parent items|}}
                 >
                   <BlockSlot @name="header">
                     <h2>
-                      {{#if (gt items.length 0)}}
+                      {{t 'routes.dc.kv.index.empty.header'
-                        No K/V pairs found
+                        items=items.length
-                      {{else}}
+                      }}
-                        Welcome to Key/Value
-                      {{/if}}
                     </h2>
                   </BlockSlot>
                   <BlockSlot @name="body">
-                    <p>
+                    {{t 'routes.dc.kv.index.empty.body'
-                      {{#if (gt items.length 0)}}
+                      items=items.length
-                        No K/V pairs where found matching that search, or you may not have access to view the K/V pairs you are searching for.
+                      htmlSafe=true
-                      {{else}}
+                    }}
-                        You don't have any K/V pairs, or you may not have access to view K/V pairs yet.
-                      {{/if}}
-                    </p>
                   </BlockSlot>
                   <BlockSlot @name="actions">
                     <li class="docs-link">
                       <a href="{{env 'CONSUL_DOCS_URL'}}/agent/kv" rel="noopener noreferrer" target="_blank">Documentation on K/V</a>
                     </li>
                     <li class="learn-link">
-                      <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/kv" rel="noopener noreferrer" target="_blank">Read the guide</a>
+                      <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/kv" rel="noopener noreferrer" target="_blank">Take the tutorial</a>
                     </li>
                   </BlockSlot>
                 </EmptyState>

ui/packages/consul-ui/app/templates/dc/nodes/index.hbs

@@ -95,17 +95,16 @@ as |route|>
             >
               <BlockSlot @name="header">
                 <h2>
-                  {{#if (gt items.length 0)}}
+                  {{t 'routes.dc.nodes.index.empty.header'
-                    No nodes found
+                    items=items.length
-                  {{else}}
+                  }}
-                    Welcome to Nodes
-                  {{/if}}
                 </h2>
               </BlockSlot>
               <BlockSlot @name="body">
-                <p>
+                {{t 'routes.dc.nodes.index.empty.body'
-                  There don't seem to be any registered nodes, or you may not have access to view nodes yet.
+                  items=items.length
-                </p>
+                  htmlSafe=true
+                }}
               </BlockSlot>
             </EmptyState>
           </collection.Empty>

ui/packages/consul-ui/app/templates/dc/nodes/show/healthchecks.hbs

@@ -82,10 +82,10 @@ as |route|>
             <collection.Empty>
               <EmptyState>
                 <BlockSlot @name="body">
-                    {{t "routes.dc.nodes.show.healthchecks.empty"
+                  {{t "routes.dc.nodes.show.healthchecks.empty"
-                      items=items.length
+                    items=items.length
-                      htmlSafe=true
+                    htmlSafe=true
-                    }}
+                  }}
                 </BlockSlot>
               </EmptyState>
               </collection.Empty>

ui/packages/consul-ui/app/templates/dc/nodes/show/services.hbs

@@ -63,9 +63,10 @@ as |route|>
         <collection.Empty>
           <EmptyState>
             <BlockSlot @name="body">
-              <p>
+              {{t "routes.dc.nodes.show.services.empty"
-                This node has no service instances{{#if (gt items.length 0)}} matching that search{{/if}}.
+                items=items.length
-              </p>
+                htmlSafe=true
+              }}
             </BlockSlot>
           </EmptyState>
         </collection.Empty>

ui/packages/consul-ui/app/templates/dc/services/index.hbs

@@ -105,21 +105,16 @@ as |sort filters items partition nspace|}}
             >
               <BlockSlot @name="header">
                 <h2>
-                  {{#if (gt items.length 0)}}
+                  {{t 'routes.dc.services.index.empty.header'
-                    No services found
+                    items=items.length
-                  {{else}}
+                  }}
-                    Welcome to Services
-                  {{/if}}
                 </h2>
               </BlockSlot>
               <BlockSlot @name="body">
-                <p>
+                {{t 'routes.dc.services.index.empty.body'
-                  {{#if (gt items.length 0)}}
+                  items=items.length
-                    No services where found matching that search, or you may not have access to view the services you are searching for.
+                  htmlSafe=true
-                  {{else}}
+                }}
-                    There don't seem to be any registered services, or you may not have access to view services yet.
-                  {{/if}}
-                </p>
               </BlockSlot>
               <BlockSlot @name="actions">
                 <li class="docs-link">
@@ -127,7 +122,7 @@ as |sort filters items partition nspace|}}
                     @href="{{env 'CONSUL_DOCS_URL'}}/commands/services"
                     @external={{true}}
                   >
-                    Documentation on services
+                    Documentation on Services
                   </Action>
                 </li>
                 <li class="learn-link">
@@ -135,7 +130,7 @@ as |sort filters items partition nspace|}}
                     @href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/services"
                     @external={{true}}
                   >
-                    Read the guide
+                    Take the tutorial
                   </Action>
                 </li>
               </BlockSlot>

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

@@ -7,9 +7,7 @@ as |route|>
 as |item proxy|}}
   <div class="tab-section">
   {{#if (gt proxy.ServiceProxy.Expose.Paths.length 0)}}
-    <p>
+    {{t 'routes.dc.services.instance.exposedpaths.intro' htmlSafe=true}}
-      The following list shows 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>
     <Consul::ExposedPath::List
       @items={{proxy.ServiceProxy.Expose.Paths}}
       @address={{or item.Service.Address item.Node.Address}}
@@ -17,9 +15,7 @@ as |item proxy|}}
   {{else}}
     <EmptyState>
       <BlockSlot @name="body">
-        <p>
+        {{t 'routes.dc.services.instance.exposedpaths.empty.body' htmlSafe=true}}
-          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}}

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

@@ -53,19 +53,14 @@ as |route|>
             </h3>
           </notice.Header>
           <notice.Body>
-            <p>
+            {{t "routes.dc.services.instance.upstreams.tproxy-mode.body"
-              {{t "routes.dc.services.instance.upstreams.tproxy-mode.body"}}
+              htmlSafe=true
-            </p>
+            }}
           </notice.Body>
           <notice.Footer>
-            <p>
+            {{t "routes.dc.services.instance.upstreams.tproxy-mode.footer"
-              <Action
+              htmlSafe=true
-                @href={{concat (env 'CONSUL_DOCS_URL') '/connect/transparent-proxy'}}
+            }}
-                @external={{true}}
-              >
-                {{t "routes.dc.services.instance.upstreams.tproxy-mode.footer"}}
-              </Action>
-            </p>
           </notice.Footer>
         </Notice>
       {{/if}}
@@ -87,9 +82,10 @@ as |route|>
         <collection.Empty>
           <EmptyState>
             <BlockSlot @name="body">
-              <p>
+              {{t "routes.dc.services.instance.upstreams.empty"
-                This service has no upstreams{{#if (gt items.length 0)}} matching that search{{/if}}.
+                items=items.length
-              </p>
+                htmlSafe=true
+              }}
             </BlockSlot>
           </EmptyState>
         </collection.Empty>

ui/packages/consul-ui/app/templates/dc/services/show/instances.hbs

@@ -75,9 +75,10 @@ as |sort filters items proxyMeta|}}
       <collection.Empty>
         <EmptyState>
           <BlockSlot @name="body">
-            <p>
+            {{t "routes.dc.services.show.instances.empty"
-              There are no instances{{#if (gt items.length 0)}} matching that search{{/if}}.
+              items=items.length
-            </p>
+              htmlSafe=true
+            }}
           </BlockSlot>
         </EmptyState>
       </collection.Empty>

ui/packages/consul-ui/app/templates/dc/services/show/intentions/index.hbs

@@ -94,28 +94,23 @@ as |route|>
                 >
                   <BlockSlot @name="header">
                     <h2>
-                      {{#if (gt items.length 0)}}
+                      {{t 'routes.dc.services.intentions.index.empty.header'
-                        No intentions found
+                        items=items.length
-                      {{else}}
+                      }}
-                        Welcome to Intentions
-                      {{/if}}
                     </h2>
                   </BlockSlot>
                   <BlockSlot @name="body">
-                    <p>
+                    {{t 'routes.dc.services.intentions.index.empty.body'
-                      {{#if (gt items.length 0)}}
+                      items=items.length
-                        No intentions where found matching that search, or you may not have access to view the intentions you are searching for.
+                      htmlSafe=true
-                      {{else}}
+                    }}
-                        There don't seem to be any intentions, or you may not have access to view intentions yet.
-                      {{/if}}
-                    </p>
                   </BlockSlot>
                   <BlockSlot @name="actions">
                     <li class="docs-link">
                       <a href="{{env 'CONSUL_DOCS_URL'}}/commands/intention" rel="noopener noreferrer" target="_blank">Documentation on intentions</a>
                     </li>
                     <li class="learn-link">
-                      <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/connect" rel="noopener noreferrer" target="_blank">Read the guide</a>
+                      <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/connect" rel="noopener noreferrer" target="_blank">Take the tutorial</a>
                     </li>
                   </BlockSlot>
                 </EmptyState>

ui/packages/consul-ui/app/templates/dc/services/show/services.hbs

@@ -56,10 +56,6 @@ as |route|>
         @filter={{filters}}
         />
   {{/if}}
-      <p>
-        The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our
-        <a href="{{env 'CONSUL_DOCS_URL'}}/connect/terminating-gateway" target="_blank" rel="noopener noreferrer">step-by-step guide</a>.
-      </p>
       <DataCollection
         @type="service"
         @sort={{sort.value}}
@@ -68,6 +64,9 @@ as |route|>
         @items={{items}}
       as |collection|>
         <collection.Collection>
+          {{t "routes.dc.services.show.services.intro"
+            htmlSafe=true
+          }}
           <Consul::Service::List
             @nspace={{or route.params.nspace route.model.user.token.Namespace 'default'}}
             @partition={{or route.params.partition route.model.user.token.Partition 'default'}}
@@ -78,9 +77,10 @@ as |route|>
         <collection.Empty>
           <EmptyState>
             <BlockSlot @name="body">
-              <p>
+              {{t "routes.dc.services.show.services.empty"
-                There are no linked services{{#if (gt items.length 0)}} matching that search{{/if}}.
+                items=items.length
-              </p>
+                htmlSafe=true
+              }}
             </BlockSlot>
           </EmptyState>
         </collection.Empty>

ui/packages/consul-ui/app/templates/dc/services/show/tags.hbs

@@ -7,10 +7,15 @@ as |route|>
         <TagList @item={{hash Tags=tags}} />
     {{else}}
         <EmptyState>
+          <BlockSlot @name="header">
+            <h2>
+              {{t 'routes.dc.services.show.tags.empty.header'}}
+            </h2>
+          </BlockSlot>
           <BlockSlot @name="body">
-            <p>
+            {{t 'routes.dc.services.show.tags.empty.body'
-              There are no tags.
+              htmlSafe=true
-            </p>
+            }}
           </BlockSlot>
         </EmptyState>
     {{/if}}

ui/packages/consul-ui/app/templates/dc/services/show/upstreams.hbs

@@ -82,9 +82,10 @@ as |route|>
           <collection.Empty>
             <EmptyState>
               <BlockSlot @name="body">
-                <p>
+                {{t "routes.dc.services.show.upstreams.empty"
-                  There are no upstreams{{#if (gt items.length 0)}} matching that search{{/if}}.
+                  items=items.length
-                </p>
+                  htmlSafe=true
+                }}
               </BlockSlot>
             </EmptyState>
           </collection.Empty>

ui/packages/consul-ui/translations/routes/en-us.yaml

@@ -18,12 +18,46 @@ dc:
       title: License
 
   nodes:
+    index:
+      empty:
+        header: |
+          {items, select,
+            0 {Welcome to Nodes}
+            other {No Nodes found}
+          }
+        body: |
+          <p>
+            {items, select,
+              0 {There don't seem to be any registered Nodes in this Consul cluster}
+              other {No Nodes were found matching your search}
+          }, or you may not have <code>service:read</code> and <code>node:read</code> permissions access to this view.
+          </p>
     show:
+      rtt:
+        title: Round Trip Time
+      metadata:
+        title: Metadata
+      sessions:
+        title: Lock Sessions
+        header: Welcome to Lock Sessions
+        body: |
+          <p>
+          Consul provides a session mechanism which can be used to build distributed locks. Sessions act as a binding layer between Nodes, Health Checks, and Key/Value data. There are currently no Lock Sessions present, or you may not have <code>key:read</code> or <code>session:read</code> permissions.
+          </p>
+      services:
+        title: Service Instances
+        empty: |
+          <p>
+            This Node has no Service Instances{items, select,
+              0 {}
+              other { matching that search}
+            }.
+          </p>
       healthchecks:
         title: Health Checks
         empty: |
           <p>
-            This node has no health checks{items, select,
+            This Node has no Health Checks{items, select,
               0 {}
               other { matching that search}
             }.
@@ -34,15 +68,65 @@ dc:
             <p>
               This node has a failing serf node check. The health statuses shown on this page are the statuses as they were known before the node became unreachable.
             </p>
-      services:
-        title: Service Instances
-      rtt:
-        title: Round Trip Time
-      sessions:
-        title: Lock Sessions
-      metadata:
-        title: Metadata
   services:
+    index:
+      empty:
+        header: |
+          {items, select,
+            0 {Welcome to Services}
+            other {No Services found}
+          }
+        body: |
+          <p>
+            {items, select,
+              0 {There don't seem to be any registered services in this Consul cluster}
+              other {No Services were found matching your search}
+          }, or you may not have <code>service:read</code> and <code>node:read</code> access to this view. Use Terraform, Kubernetes CRDs, Vault, or the Consul CLI to register Services.
+          </p>
+    instance:
+      exposedpaths:
+        intro: |
+          <p>
+            The following list shows individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our <a href="{CONSUL_DOCS_URL}/connect/registration/service-registration#expose-paths-configuration-reference" target="_blank" rel="noopener noreferrer">documentation</a>.
+          </p>
+
+        empty:
+          body: |
+            <p>
+              There are no individual HTTP paths exposed through Envoy for external services like Prometheus. Read more about this in our <a href="{CONSUL_DOCS_URL}/connect/registration/service-registration#expose-paths-configuration-reference" target="_blank" rel="noopener noreferrer">documentation</a>.
+            </p>
+      healthchecks:
+        empty: |
+          <p>
+            This instance has no health checks{items, select,
+              0 {}
+              other { matching that search}
+            }.
+          </p>
+        critical-serf-notice:
+          header: Failing serf check
+          body: |
+            <p>
+              This instance has a failing serf node check. The health statuses shown on this page are the statuses as they were known before the node became unreachable.
+            </p>
+      upstreams:
+        tproxy-mode:
+          header: Transparent proxy mode
+          body: |
+            <p>
+              The upstreams listed on this page have been defined in a proxy registration. There may be more upstreams, though, as "transparent" mode is enabled on this proxy.
+            </p>
+          footer: |
+            <p>
+              <a href="{CONSUL_DOCS_URL}/connect/transparent-proxy" target="_blank" rel="noopener noreferrer">Read the documentation
+            </p>
+        empty: |
+          <p>
+            This Service Instance has no Upstreams{items, select,
+              0 {}
+              other { matching that search}
+            }.
+          </p>
     show:
       topology:
         notices:
@@ -87,30 +171,168 @@ dc:
               <p>
                 <a href="{CONSUL_DOCS_URL}/security/acl/acl-system#configuring-acls" target="_blank" rel="noopener noreferrer">Read the documentation</a>
               </p>
+      intentions:
+        index:
+          empty:
+            header: |
+              {items, select,
+                0 {Welcome to Intentions}
+                other {No Intentions found}
+              }
+            body: |
+              <p>
+                {items, select,
+                  0 {There don't seem to be any Intentions in this Consul cluster}
+                  other {No Intentions were found matching your search}
+                }, or you may not have <code>intentions:read</code> permissions access to this view.
+              </p>
+
+      instances:
+        empty: |
+          <p>
+            This Service has no Instances{items, select,
+              0 {}
+              other { matching that search}
+            }.
+          </p>
+      services:
+        intro: |
+          <p>
+            The following services may receive traffic from external services through this gateway. Learn more about configuring gateways in our <a href="{CONSUL_DOCS_URL}/connect/terminating-gateway" target="_blank" rel="noopener noreferrer">step-by-step guide</a>.
+          </p>
+        empty: |
+          <p>
+            There are no Services{items, select,
+              0 {}
+              other { matching that search}
+            }.
+          </p>
+      tags:
+        empty:
+          header: Welcome to Tags
+          body: |
+            <p>
+              There are no tags for this Service.
+            </p>
       upstreams:
         intro: |
           <p>
             Upstreams are services that may receive traffic from this gateway. If you are not using Consul DNS, please make sure your <code>Host:</code> header uses the correct domain name for the gateway to correctly proxy to its upstreams. Learn more about configuring gateways in our <a href="{CONSUL_DOCS_URL}/connect/ingress-gateways" target="_blank" rel="noopener noreferrer">documentation</a>.
           </p>
-    instance:
-      healthchecks:
         empty: |
           <p>
-            This instance has no health checks{items, select,
+            This Service has no Upstreams{items, select,
               0 {}
               other { matching that search}
             }.
           </p>
-        critical-serf-notice:
+
-          header: Failing serf check
-          body: |
-            <p>
-              This instance has a failing serf node check. The health statuses shown on this page are the statuses as they were known before the node became unreachable.
-            </p>
-      upstreams:
-        tproxy-mode:
-          header: Transparent proxy mode
-          body: The upstreams listed on this page have been defined in a proxy registration. There may be more upstreams, though, as "transparent" mode is enabled on this proxy.
-          footer: Read the documentation
   routing-config:
     source: Routing Configuration
+  intentions:
+    index:
+      empty:
+        header: |
+          {items, select,
+            0 {Welcome to Intentions}
+            other {No Intentions found}
+          }
+        body: |
+          <p>
+            {items, select,
+              0 {There don't seem to be any Intentions in this Consul cluster}
+              other {No Intentions were found matching your search}
+            }, or you may not have <code>intentions:read</code> permissions access to this view.
+          </p>
+  kv:
+    index:
+      empty:
+        header: |
+          {items, select,
+            0 {Welcome to Key/Value}
+            other {No Key/Values found}
+          }
+        body: |
+          <p>
+            {items, select,
+              0 {There don't seem to be any K/V pairs in this Consul cluster yet}
+              other {No K/V pairs were found matching your search}
+            }, or you may not have <code>key:read</code> permissions access to this view.
+          </p>
+  acls:
+    tokens:
+      index:
+        empty:
+          header: |
+            {items, select,
+              0 {Welcome to Tokens}
+              other {No Tokens found}
+            }
+          body: |
+            <p>
+              {items, select,
+                0 {There don't seem to be any Tokens}
+                other {No Tokens were found matching your search}
+              }, or you may not have <code>acl:read</code> permissions to view Tokens yet.
+            </p>
+    policies:
+      index:
+        empty:
+          header: |
+            {items, select,
+              0 {Welcome to Policies}
+              other {No Policies found}
+            }
+          body: |
+            <p>
+              {items, select,
+                0 {There don't seem to be any Policies}
+                other {No Policies were found matching your search}
+              }, or you may not have <code>acl:read</code> permissions to view Policies yet.
+            </p>
+    roles:
+      index:
+        empty:
+          header: |
+            {items, select,
+              0 {Welcome to Roles}
+              other {No Roles found}
+            }
+          body: |
+            <p>
+              {items, select,
+                0 {There don't seem to be any Roles}
+                other {No Roles were found matching your search}
+              }, or you may not have <code>acl:read</code> permissions to view Roles yet.
+            </p>
+    auth-methods:
+      show:
+        binding-rules:
+          empty:
+            header: No Binding Rules
+            body: |
+              <p>
+                Binding rules allow an operator to express a systematic way of automatically linking roles and service identities to newly created tokens without operator intervention.
+              </p>
+        nspace-rules:
+          empty:
+            header: No Namespace Rules
+            body: |
+              <p>
+                A set of rules that can control which namespace tokens created via this auth method will be created within. Unlike binding rules, the first matching namespace rule wins.
+              </p>
+
+      index:
+        empty:
+          header: |
+            {items, select,
+              0 {Welcome to Auth Methods}
+              other {No Auth Methods found}
+            }
+          body: |
+            <p>
+              {items, select,
+                0 {There don't seem to be any Auth Methods}
+                other {No Auth Methods were found matching your search}
+              }, or you may not have <code>acl:read</code> permissions to view Auth Methods yet.
+            </p>