status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-01-11 06:16:08 +00:00
Code Issues Projects Releases Wiki Activity

Move peering bento box into dedicated component

Browse Source
This commit is contained in:
Michael Klein 2022-10-10 15:26:40 +02:00
parent e8db58c56b
commit 90259d7366
2 changed files with 72 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs Normal file
View File

@ -0,0 +1,71 @@
<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={{@peering}} />
</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>
<div class="flex items-center">
{{#if @peering.heartbeat}}
{{#let (smart-date-format @peering.heartbeat) as |smartDate|}}
<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}}
{{/let}}
{{else}}
<span>None yet</span>
{{/if}}
</div>
</div>
<div class="shrink-0">
<div
class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foregrouny-primary"
>Latest receipt</div>
<div class="flex items-center">
{{#if @peering.receipt}}
{{#let (smart-date-format @peering.receipt) as |smartDate|}}
{{#if smartDate.isNearDate}}
<span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
{{else}}
<span>{{smartDate.friendly}}</span>
{{/if}}
{{/let}}
{{else}}
<span>None yet</span>
{{/if}}
</div>
</div>
<div class="shrink-0">
<div
class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
>Latest send</div>
<div class="flex items-center">
{{#if @peering.lastSend}}
{{#let (smart-date-format @peering.lastSend) as |smartDate|}}
{{#if smartDate.isNearDate}}
<span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
{{else}}
<span>{{smartDate.friendly}}</span>
{{/if}}
{{/let}}
{{else}}
<span>None yet</span>
{{/if}}
</div>
</div>
</div>
</Hds::Card::Container>

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

@ -36,87 +36,7 @@
</h1> </h1>
</BlockSlot> </BlockSlot>
<BlockSlot @name="content"> <BlockSlot @name="content">
<Hds::Card::Container <Consul::Peer::BentoBox @peering={{item}} />
@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>
<div class="flex items-center">
{{#if item.heartbeat}}
{{#let (smart-date-format item.heartbeat) as |smartDate|}}
<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}}
{{/let}}
{{else}}
<span>None yet</span>
{{/if}}
</div>
</div>
<div class="shrink-0">
<div
class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foregrouny-primary"
>Latest receipt</div>
<div class="flex items-center">
{{#if item.receipt}}
{{#let (smart-date-format item.receipt) as |smartDate|}}
{{#if smartDate.isNearDate}}
<span
{{tooltip smartDate.friendly}}
>{{smartDate.relative}}</span>
{{else}}
<span>{{smartDate.friendly}}</span>
{{/if}}
{{/let}}
{{else}}
<span>None yet</span>
{{/if}}
</div>
</div>
<div class="shrink-0">
<div
class="hds-typography-body-200 hds-font-weight-semibold mb-2 text-hds-foreground-primary"
>Latest send</div>
<div class="flex items-center">
{{#if item.lastSend}}
{{#let (smart-date-format item.lastSend) as |smartDate|}}
{{#if smartDate.isNearDate}}
<span
{{tooltip smartDate.friendly}}
>{{smartDate.relative}}</span>
{{else}}
<span>{{smartDate.friendly}}</span>
{{/if}}
{{/let}}
{{else}}
<span>None yet</span>
{{/if}}
</div>
</div>
</div>
</Hds::Card::Container>
<Peerings::Provider @peer={{item}} as |peering|> <Peerings::Provider @peer={{item}} as |peering|>
<TabNav @items={{peering.data.tabs}} /> <TabNav @items={{peering.data.tabs}} />