consul/ui/packages/consul-peerings/app/templates/dc/peers/edit.hbs

<Route @name={{routeName}} as |route|>
  <DataLoader
    @src={{uri
      "/${partition}/${nspace}/${dc}/peer/${name}"
      (hash
        partition=route.params.partition
        nspace=route.params.nspace
        dc=route.params.dc
        name=route.params.name
      )
    }}
    as |loader|
  >

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

    <BlockSlot @name="loaded">
      {{#let
        route.params.dc
        route.params.partition
        route.params.nspace
        loader.data
        as |dc partition nspace item|
      }}
        <AppView>
          <BlockSlot @name="breadcrumbs">
            <ol>
              <li><a data-test-back href={{href-to "dc.peers"}}>All Peers</a></li>
            </ol>
          </BlockSlot>
          <BlockSlot @name="header">
            <h1>
              <route.Title @title={{item.Name}} />
            </h1>
          </BlockSlot>
          <BlockSlot @name="content">
            <Hds::Card::Container
              @level="base"
              @hasBorder={{true}}
              class="mb-3 mt-6"
            >
              <div class="h-24 p-6 flex space-x-12 overflow-x-scroll">
                <div class="shrink-0">
                  <div
                    class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
                  >Status</div>
                  <div class="flex items-center">
                    <Peerings::Badge @peering={{item}} />
                  </div>
                </div>
                <div class="shrink-0">
                  <div
                    class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
                  >Latest heartbeat</div>
                  {{#let (smart-date-format item.heartbeat) as |smartDate|}}
                    <div class="flex items-center"><FlightIcon
                        @name="activity"
                        class="mr-0.5 text-hds-foreground-faint fill-current"
                      />
                      {{#if smartDate.isNearDate}}
                        <span
                          {{tooltip smartDate.friendly}}
                        >{{smartDate.relative}}</span>
                      {{else}}
                        <span>{{smartDate.friendly}}</span>
                      {{/if}}
                    </div>
                  {{/let}}
                </div>
                <div class="shrink-0">
                  <div
                    class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foregrouny-primary"
                  >Latest receipt</div>
                  {{#let (smart-date-format item.receipt) as |smartDate|}}
                    <div class="flex items-center">
                      {{#if smartDate.isNearDate}}
                        <span
                          {{tooltip smartDate.friendly}}
                        >{{smartDate.relative}}</span>
                      {{else}}
                        <span>{{smartDate.friendly}}</span>
                      {{/if}}
                    </div>
                  {{/let}}
                </div>
                <div class="shrink-0">
                  <div
                    class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
                  >Latest send</div>
                  {{#let (smart-date-format item.lastSend) as |smartDate|}}
                    <div class="flex items-center">
                      {{#if smartDate.isNearDate}}
                        <span
                          {{tooltip smartDate.friendly}}
                        >{{smartDate.relative}}</span>
                      {{else}}
                        <span>{{smartDate.friendly}}</span>
                      {{/if}}
                    </div>
                  {{/let}}

                </div>
              </div>
            </Hds::Card::Container>
            <Peerings::Provider @peer={{item}} as |peering|>
              <TabNav @items={{peering.data.tabs}} />

            </Peerings::Provider>
            <Outlet
              @name={{routeName}}
              @model={{assign
                (hash items=item.PeerServerAddresses peer=item)
                route.model
              }}
              as |o|
            >
              {{outlet}}
            </Outlet>
          </BlockSlot>
        </AppView>
      {{/let}}
    </BlockSlot>
  </DataLoader>
</Route>