From e548bbb4ffe1785048fb718086bc7d8095ca469a Mon Sep 17 00:00:00 2001
From: Michael Klein <michael@firstiwaslike.com>
Date: Wed, 12 Oct 2022 14:52:03 +0200
Subject: [PATCH] Prettify dc.services.show template

---
 .../app/templates/dc/services/instance.hbs    | 264 ++++++++++--------
 1 file changed, 141 insertions(+), 123 deletions(-)

diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs
index 884e4eb01f..4200556e46 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/instance.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/instance.hbs
@@ -1,36 +1,32 @@
-<Route
-  @name={{routeName}}
-as |route|>
+<Route @name={{routeName}} as |route|>
   <DataLoader
-    @src={{uri '/${partition}/${nspace}/${dc}/service-instance/${id}/${node}/${name}/${peer}'
-        (hash
-          partition=route.params.partition
-          nspace=route.params.nspace
-          dc=route.params.dc
-          id=route.params.id
-          node=route.params.node
-          name=route.params.name
-          peer=route.params.peer
-        )
-      }}
-  as |loader|>
+    @src={{uri
+      '/${partition}/${nspace}/${dc}/service-instance/${id}/${node}/${name}/${peer}'
+      (hash
+        partition=route.params.partition
+        nspace=route.params.nspace
+        dc=route.params.dc
+        id=route.params.id
+        node=route.params.node
+        name=route.params.name
+        peer=route.params.peer
+      )
+    }}
+    as |loader|
+  >
 
-    <BlockSlot @name="error">
-      <AppError
-        @error={{loader.error}}
-        @login={{route.model.app.login.open}}
-      />
+    <BlockSlot @name='error'>
+      <AppError @error={{loader.error}} @login={{route.model.app.login.open}} />
     </BlockSlot>
 
-    <BlockSlot @name="disconnected" as |after|>
-      {{#if (eq loader.error.status "404")}}
+    <BlockSlot @name='disconnected' as |after|>
+      {{#if (eq loader.error.status '404')}}
         <Notice
-          {{notification
-            sticky=true
-          }}
-          class="notification-update"
-          @type="warning"
-        as |notice|>
+          {{notification sticky=true}}
+          class='notification-update'
+          @type='warning'
+          as |notice|
+        >
           <notice.Header>
             <strong>Warning!</strong>
           </notice.Header>
@@ -40,14 +36,8 @@ as |route|>
             </p>
           </notice.Body>
         </Notice>
-      {{else if (eq loader.error.status "403")}}
-        <Notice
-          {{notification
-            sticky=true
-          }}
-          class="notification-update"
-          @type="error"
-        as |notice|>
+      {{else if (eq loader.error.status '403')}}
+        <Notice {{notification sticky=true}} class='notification-update' @type='error' as |notice|>
           <notice.Header>
             <strong>Error!</strong>
           </notice.Header>
@@ -58,13 +48,7 @@ as |route|>
           </notice.Body>
         </Notice>
       {{else}}
-        <Notice
-          {{notification
-            sticky=true
-          }}
-          class="notification-update"
-          @type="error"
-        as |notice|>
+        <Notice {{notification sticky=true}} class='notification-update' @type='error' as |notice|>
           <notice.Header>
             <strong>Warning!</strong>
           </notice.Header>
@@ -77,64 +61,67 @@ as |route|>
       {{/if}}
     </BlockSlot>
 
-    <BlockSlot @name="loaded">
-{{#let
-
-  loader.data
-
-as |item|}}
-      {{#if item.IsOrigin}}
-        <DataSource
-          @src={{uri '/${partition}/${nspace}/${dc}/proxy-instance/${id}/${node}/${name}'
-            (hash
-              partition=route.params.partition
-              nspace=route.params.nspace
-              dc=route.params.dc
-              id=route.params.id
-              node=route.params.node
-              name=route.params.name
-            )
-          }}
-          @onchange={{action (mut meta) value="data"}}
-        as |meta|>
-          {{! We only really need meta to get the correct ServiceID }}
-          {{! but we may as well use the NodeName and ServiceName }}
-          {{! from meta also, but they should be the same as the instance }}
-          {{! so if we can ever get ServiceID from elsewhere we could save }}
-          {{! a HTTP request/long poll here }}
-          {{#if meta.data.ServiceID}}
-          {{! if we have a proxy then get the additional instance information }}
-          {{! for the proxy itself so if the service is called `backend` }}
-          {{! its likely to have a proxy service called `backend-sidecar-proxy` }}
-          {{! and this second request get the info for that instance and saves }}
-          {{! it into the `proxy` variable }}
-            <DataSource
-            @src={{uri '/${partition}/${nspace}/${dc}/service-instance/${id}/${node}/${name}/${peer}'
-                (hash
-                  partition=route.params.partition
-                  nspace=route.params.nspace
-                  dc=route.params.dc
-                  id=meta.data.ServiceID
-                  node=meta.data.NodeName
-                  name=meta.data.ServiceName
-                  peer=route.params.peer
-                )
-              }}
-              @onchange={{action (mut proxy) value="data"}}
-            />
-          {{/if}}
-        </DataSource>
-      {{/if}}
-      <AppView>
-          <BlockSlot @name="breadcrumbs">
-              <ol>
-                  <li><a href={{href-to 'dc.services' params=(hash peer=undefined)}}>All Services</a></li>
-                  <li><a {{tooltip (concat "Service (" item.Service.Service ")")}} data-test-back href={{href-to 'dc.services.show'}}>
-                    Service ({{item.Service.Service}})
-                  </a></li>
-              </ol>
+    <BlockSlot @name='loaded'>
+      {{#let loader.data as |item|}}
+        {{#if item.IsOrigin}}
+          <DataSource
+            @src={{uri
+              '/${partition}/${nspace}/${dc}/proxy-instance/${id}/${node}/${name}'
+              (hash
+                partition=route.params.partition
+                nspace=route.params.nspace
+                dc=route.params.dc
+                id=route.params.id
+                node=route.params.node
+                name=route.params.name
+              )
+            }}
+            @onchange={{action (mut meta) value='data'}}
+            as |meta|
+          >
+            {{! We only really need meta to get the correct ServiceID }}
+            {{! but we may as well use the NodeName and ServiceName }}
+            {{! from meta also, but they should be the same as the instance }}
+            {{! so if we can ever get ServiceID from elsewhere we could save }}
+            {{! a HTTP request/long poll here }}
+            {{#if meta.data.ServiceID}}
+              {{! if we have a proxy then get the additional instance information }}
+              {{! for the proxy itself so if the service is called `backend` }}
+              {{! its likely to have a proxy service called `backend-sidecar-proxy` }}
+              {{! and this second request get the info for that instance and saves }}
+              {{! it into the `proxy` variable }}
+              <DataSource
+                @src={{uri
+                  '/${partition}/${nspace}/${dc}/service-instance/${id}/${node}/${name}/${peer}'
+                  (hash
+                    partition=route.params.partition
+                    nspace=route.params.nspace
+                    dc=route.params.dc
+                    id=meta.data.ServiceID
+                    node=meta.data.NodeName
+                    name=meta.data.ServiceName
+                    peer=route.params.peer
+                  )
+                }}
+                @onchange={{action (mut proxy) value='data'}}
+              />
+            {{/if}}
+          </DataSource>
+        {{/if}}
+        <AppView>
+          <BlockSlot @name='breadcrumbs'>
+            <ol>
+              <li><a href={{href-to 'dc.services' params=(hash peer=undefined)}}>All Services</a></li>
+              <li><a
+                  {{tooltip (concat 'Service (' item.Service.Service ')')}}
+                  data-test-back
+                  href={{href-to 'dc.services.show'}}
+                >
+                  Service ({{item.Service.Service}})
+                </a></li>
+            </ol>
           </BlockSlot>
-          <BlockSlot @name="header">
+          <BlockSlot @name='header'>
             <h1>
               <route.Title @title={{item.Service.ID}} />
             </h1>
@@ -146,15 +133,20 @@ as |item|}}
               <Consul::TransparentProxy />
             {{/if}}
           </BlockSlot>
-          <BlockSlot @name="nav">
+          <BlockSlot @name='nav'>
             <dl>
               <dt>Service Name</dt>
-              <dd><a href="{{href-to 'dc.services.show' item.Service.Service}}">{{item.Service.Service}}</a></dd>
+              <dd><a
+                  href='{{href-to "dc.services.show" item.Service.Service}}'
+                >{{item.Service.Service}}</a></dd>
             </dl>
             {{#unless item.Node.Meta.synthetic-node}}
               <dl>
                 <dt>Node Name</dt>
-                <dd><a data-test-service-instance-node-name href="{{href-to 'dc.nodes.show' item.Node.Node}}">{{item.Node.Node}}</a></dd>
+                <dd><a
+                    data-test-service-instance-node-name
+                    href='{{href-to "dc.nodes.show" item.Node.Node}}'
+                  >{{item.Node.Node}}</a></dd>
               </dl>
             {{/unless}}
             {{#if item.Service.PeerName}}
@@ -164,36 +156,62 @@ as |item|}}
               </dl>
             {{/if}}
           </BlockSlot>
-          <BlockSlot @name="actions">
+          <BlockSlot @name='actions'>
             {{#let (or item.Service.Address item.Node.Address) as |address|}}
-              <CopyButton @value={{address}} @name="Address">{{address}}</CopyButton>
+              <CopyButton @value={{address}} @name='Address'>{{address}}</CopyButton>
             {{/let}}
           </BlockSlot>
-          <BlockSlot @name="content">
-            <TabNav @items={{
-              compact
-                  (array
-                                          (hash label="Health Checks" href=(href-to "dc.services.instance.healthchecks") selected=(is-href "dc.services.instance.healthchecks"))
-(if (eq item.Service.Kind 'mesh-gateway') (hash label="Addresses" href=(href-to "dc.services.instance.addresses") selected=(is-href "dc.services.instance.addresses")))
-                                (if proxy (hash label="Upstreams" href=(href-to "dc.services.instance.upstreams") selected=(is-href "dc.services.instance.upstreams")))
-                                (if proxy (hash label="Exposed Paths" href=(href-to "dc.services.instance.exposedpaths") selected=(is-href "dc.services.instance.exposedpaths")))
-                                          (hash label="Tags & Meta" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
+          <BlockSlot @name='content'>
+            <TabNav
+              @items={{compact
+                (array
+                  (hash
+                    label='Health Checks'
+                    href=(href-to 'dc.services.instance.healthchecks')
+                    selected=(is-href 'dc.services.instance.healthchecks')
                   )
+                  (if
+                    (eq item.Service.Kind 'mesh-gateway')
+                    (hash
+                      label='Addresses'
+                      href=(href-to 'dc.services.instance.addresses')
+                      selected=(is-href 'dc.services.instance.addresses')
+                    )
+                  )
+                  (if
+                    proxy
+                    (hash
+                      label='Upstreams'
+                      href=(href-to 'dc.services.instance.upstreams')
+                      selected=(is-href 'dc.services.instance.upstreams')
+                    )
+                  )
+                  (if
+                    proxy
+                    (hash
+                      label='Exposed Paths'
+                      href=(href-to 'dc.services.instance.exposedpaths')
+                      selected=(is-href 'dc.services.instance.exposedpaths')
+                    )
+                  )
+                  (hash
+                    label='Tags & Meta'
+                    href=(href-to 'dc.services.instance.metadata')
+                    selected=(is-href 'dc.services.instance.metadata')
+                  )
+                )
               }}
             />
             <Outlet
               @name={{routeName}}
-              @model={{assign (hash
-                proxy=proxy
-                meta=meta
-                item=item
-              ) route.model}}
-            as |o|>
+              @model={{assign (hash proxy=proxy meta=meta item=item) route.model}}
+              as |o|
+            >
               {{outlet}}
             </Outlet>
           </BlockSlot>
-      </AppView>
-{{/let}}
+        </AppView>
+      {{/let}}
     </BlockSlot>
   </DataLoader>
-</Route>
+</Route>
\ No newline at end of file