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

<Route
  @name={{routeName}}
as |route|>
  <DataLoader
    @src={{uri '/${partition}/${nspace}/${dc}/service-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
        )
      }}
  as |loader|>

    <BlockSlot @name="error">
      <AppError
        @error={{loader.error}}
        @login={{route.model.app.login.open}}
      />
    </BlockSlot>

    <BlockSlot @name="disconnected" as |Notification|>
      {{#if (eq loader.error.status "404")}}
        <Notification @sticky={{true}}>
          <p data-notification role="alert" class="warning notification-update">
            <strong>Warning!</strong>
            This service has been deregistered and no longer exists in the catalog.
          </p>
        </Notification>
      {{else if (eq loader.error.status "403")}}
        <Notification @sticky={{true}}>
          <p data-notification role="alert" class="error notification-update">
            <strong>Error!</strong>
            You no longer have access to this service
          </p>
        </Notification>
      {{else}}
        <Notification @sticky={{true}}>
          <p data-notification role="alert" class="warning notification-update">
            <strong>Warning!</strong>
            An error was returned whilst loading this data, refresh to try again.
          </p>
        </Notification>
      {{/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
            )
          }}
        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}}
            <DataSource
              @src={{uri '/${partition}/${nspace}/${dc}/proxy-service-instance/${id}/${node}/${name}'
                (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
                )
              }}
              @onchange={{action (mut proxy) value="data"}}/>
          {{/if}}
        </DataSource>
      {{/if}}
      <AppView>
          <BlockSlot @name="breadcrumbs">
              <ol>
                  <li><a href={{href-to 'dc.services'}}>All Services</a></li>
                  <li><a data-test-back href={{href-to 'dc.services.show'}}>Service ({{item.Service.Service}})</a></li>
              </ol>
          </BlockSlot>
          <BlockSlot @name="header">
            <h1>
              <route.Title @title={{item.Service.ID}} />
            </h1>
            <Consul::ExternalSource @item={{item}} @withInfo={{true}} />
            <Consul::Kind @item={{item}} @withInfo={{true}} />
            {{#if (eq proxy.ServiceProxy.Mode 'transparent')}}
              <Consul::TransparentProxy />
            {{/if}}
          </BlockSlot>
          <BlockSlot @name="nav">
            <dl>
              <dt>Service Name</dt>
              <dd><a href="{{href-to 'dc.services.show' item.Service.Service}}">{{item.Service.Service}}</a></dd>
            </dl>
            <dl>
              <dt>Node Name</dt>
              <dd><a href="{{href-to 'dc.nodes.show' item.Node.Node}}">{{item.Node.Node}}</a></dd>
            </dl>
          </BlockSlot>
          <BlockSlot @name="actions">
            {{#let (or item.Service.Address item.Node.Address) as |address|}}
              <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"))
                    )
              }}/>
            <Outlet
              @name={{routeName}}
              @model={{assign (hash
                proxy=proxy
                item=item
              ) route.model}}
            as |o|>
              {{outlet}}
            </Outlet>
          </BlockSlot>
      </AppView>
{{/let}}
    </BlockSlot>
  </DataLoader>
</Route>