Format intentions table hbs template

pull/15153/head
wenincode 2022-10-26 11:08:16 -06:00
parent 4dbb1e16f4
commit 46ba6174d5
1 changed files with 181 additions and 166 deletions

View File

@ -1,47 +1,52 @@
<TabularCollection <TabularCollection
class="consul-intention-list-table" class='consul-intention-list-table'
...attributes ...attributes
@items={{@items}} @items={{@items}}
@rowHeight={{59}} @rowHeight={{59}}
as |item index|> as |item index|
<BlockSlot @name="header"> >
<th class="source">Source</th> <BlockSlot @name='header'>
<th class="intent">&nbsp;</th> <th class='source'>Source</th>
<th class="destination">Destination</th> <th class='intent'>&nbsp;</th>
<th class="permissions"> <th class='destination'>Destination</th>
<th class='permissions'>
Permissions Permissions
<span> <span>
<Tooltip>Permissions intercept an Intention's traffic using Layer 7 criteria, such as path prefixes and http headers.</Tooltip> <Tooltip>Permissions intercept an Intention's traffic using Layer 7 criteria, such as path
prefixes and http headers.</Tooltip>
</span> </span>
</th> </th>
<th class="meta">&nbsp;</th> <th class='meta'>&nbsp;</th>
</BlockSlot> </BlockSlot>
<BlockSlot @name="row"> <BlockSlot @name='row'>
<td class="source" data-test-intention={{item.ID}}> <td class='source' data-test-intention={{item.ID}}>
<a href={{href-to (or @routeName 'dc.intentions.edit') item.ID}} data-test-intention-source={{item.SourceName}}> <a
href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}
data-test-intention-source={{item.SourceName}}
>
{{#if (eq item.SourceName '*')}} {{#if (eq item.SourceName '*')}}
All Services (*) All Services (*)
{{else}} {{else}}
{{item.SourceName}} {{item.SourceName}}
{{/if}} {{/if}}
{{! TODO: slugify }} {{! TODO: slugify }}
<em class="consul-intention-list-table__meta-info"> <em class='consul-intention-list-table__meta-info'>
<Consul::Bucket::List <Consul::Bucket::List
@item={{hash @item={{hash
Namespace=item.SourceNS Namespace=item.SourceNS
Partition=item.SourcePartition Partition=item.SourcePartition
PeerName=item.SourcePeer PeerName=item.SourcePeer
}} }}
@nspace="-" @nspace='-'
@partition="-" @partition='-'
/> />
</em> </em>
</a> </a>
</td> </td>
<td class="intent intent-{{slugify item.Action}}" data-test-intention-action={{item.Action}}> <td class='intent intent-{{slugify item.Action}}' data-test-intention-action={{item.Action}}>
<strong>{{capitalize (or item.Action "App aware")}}</strong> <strong>{{capitalize (or item.Action 'App aware')}}</strong>
</td> </td>
<td class="destination" data-test-intention-destination={{item.DestinationName}}> <td class='destination' data-test-intention-destination={{item.DestinationName}}>
<span> <span>
{{#if (eq item.DestinationName '*')}} {{#if (eq item.DestinationName '*')}}
All Services (*) All Services (*)
@ -51,45 +56,58 @@ as |item index|>
{{#if (or (can 'use nspaces') (can 'use partitions'))}} {{#if (or (can 'use nspaces') (can 'use partitions'))}}
{{! TODO: slugify }} {{! TODO: slugify }}
<em> <em>
<span <span class={{concat 'partition-' (or item.DestinationPartition 'default')}}>{{or
class={{concat 'partition-' (or item.DestinationPartition 'default')}} item.DestinationPartition
>{{or item.DestinationPartition 'default'}}</span> / <span 'default'
class={{concat 'nspace-' (or item.DestinationNS 'default')}} }}</span>
>{{or item.DestinationNS 'default'}}</span> /
<span class={{concat 'nspace-' (or item.DestinationNS 'default')}}>{{or
item.DestinationNS
'default'
}}</span>
</em> </em>
{{/if}} {{/if}}
</span> </span>
</td> </td>
<td class="permissions"> <td class='permissions'>
{{#if (gt item.Permissions.length 0)}} {{#if (gt item.Permissions.length 0)}}
<span>{{pluralize item.Permissions.length 'Permission'}}</span> <span>{{pluralize item.Permissions.length 'Permission'}}</span>
{{/if}} {{/if}}
</td> </td>
<td class="meta"> <td class='meta'>
{{#if item.IsManagedByCRD}} {{#if item.IsManagedByCRD}}
<Consul::ExternalSource @item={{item}} @label="Managed by CRD" /> <Consul::ExternalSource @item={{item}} @label='Managed by CRD' />
{{/if}} {{/if}}
</td> </td>
</BlockSlot> </BlockSlot>
<BlockSlot @name="actions" as |index change checked|> <BlockSlot @name='actions' as |index change checked|>
<PopoverMenu <PopoverMenu
@expanded={{if (eq checked index) true false}} @expanded={{if (eq checked index) true false}}
@onchange={{action change index}} @keyboardAccess={{false}} @onchange={{action change index}}
@keyboardAccess={{false}}
> >
<BlockSlot @name="trigger"> <BlockSlot @name='trigger'>
More More
</BlockSlot> </BlockSlot>
<BlockSlot @name="menu" as |confirm send keypressClick change|> <BlockSlot @name='menu' as |confirm send keypressClick change|>
{{#if (can "write intention" item=item)}} {{#if (can 'write intention' item=item)}}
<li role="none"> <li role='none'>
<a role="menuitem" tabindex="-1" href={{href-to (or routeName 'dc.intentions.edit') item.ID}}>Edit</a> <a
role='menuitem'
tabindex='-1'
href={{href-to (or routeName 'dc.intentions.edit') item.ID}}
>Edit</a>
</li> </li>
<li role="none" class="dangerous"> <li role='none' class='dangerous'>
<label for={{confirm}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-delete>Delete</label> <label
<div role="menu"> for={{confirm}}
<InformedAction role='menuitem'
class="warning" tabindex='-1'
> onkeypress={{keypressClick}}
data-test-delete
>Delete</label>
<div role='menu'>
<InformedAction class='warning'>
<:header> <:header>
Confirm Delete Confirm Delete
</:header> </:header>
@ -99,19 +117,17 @@ as |item index|>
</p> </p>
</:body> </:body>
<:actions as |Actions|> <:actions as |Actions|>
<Actions.Action class="dangerous"> <Actions.Action class='dangerous'>
<Action <Action
class="type-delete" class='type-delete'
tabindex="-1" tabindex='-1'
{{on 'click' (queue (action change) (action @delete item))}} {{on 'click' (queue (action change) (action @delete item))}}
> >
Delete Delete
</Action> </Action>
</Actions.Action> </Actions.Action>
<Actions.Action> <Actions.Action>
<Action <Action @for={{confirm}}>
@for={{confirm}}
>
Cancel Cancel
</Action> </Action>
</Actions.Action> </Actions.Action>
@ -119,35 +135,34 @@ as |item index|>
</InformedAction> </InformedAction>
</div> </div>
</li> </li>
{{else if (can "view CRD intention" item=item)}} {{else if (can 'view CRD intention' item=item)}}
<li role="none"> <li role='none'>
<div role="menu"> <div role='menu'>
<InformedAction> <InformedAction>
<:header> <:header>
<span class="flex flex-nowrap items-center"> <span class='flex flex-nowrap items-center'>
<FlightIcon @name="kubernetes-color" class="mr-1.5" /> <FlightIcon @name='kubernetes-color' class='mr-1.5' />
Managed by CRD Managed by CRD
</span> </span>
</:header> </:header>
<:body> <:body>
<p> <p>
This intention is being managed through an Intention Custom Resource in your Kubernetes cluster. It is view only in the UI. This intention is being managed through an Intention Custom Resource in your
Kubernetes cluster. It is view only in the UI.
</p> </p>
</:body> </:body>
<:actions as |Actions|> <:actions as |Actions|>
<Actions.Action> <Actions.Action>
<Action <Action
tabindex="-1" tabindex='-1'
class="action" class='action'
@href={{href-to (or @routeName 'dc.intentions.edit') item.ID}} @href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}
> >
View View
</Action> </Action>
</Actions.Action> </Actions.Action>
<Actions.Action> <Actions.Action>
<Action <Action @onclick={{action change}}>
@onclick={{action change}}
>
Cancel Cancel
</Action> </Action>
</Actions.Action> </Actions.Action>
@ -156,10 +171,10 @@ as |item index|>
</div> </div>
</li> </li>
{{else}} {{else}}
<li role="none"> <li role='none'>
<a <a
role="menuitem" role='menuitem'
tabindex="-1" tabindex='-1'
href={{href-to (or routeName 'dc.intentions.edit') item.ID}} href={{href-to (or routeName 'dc.intentions.edit') item.ID}}
> >
View View