Add bento box peers.edit

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

@@ -36,6 +36,74 @@
             </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}} />