7d6f5ef92a
* ui: refactor out the taglist component to use a recursive pattern * Make sure simple rendering tests pass
49 lines
1.9 KiB
Handlebars
49 lines
1.9 KiB
Handlebars
<div id="services" class="tab-section">
|
|
<div role="tabpanel">
|
|
{{#if (gt items.length 0) }}
|
|
<input type="checkbox" id="toolbar-toggle" />
|
|
<form class="filter-bar">
|
|
<FreetextFilter @searchable={{searchable}} @value={{s}} @placeholder="Search by name/port" />
|
|
</form>
|
|
{{/if}}
|
|
<ChangeableSet @dispatcher={{searchable}}>
|
|
<BlockSlot @name="set" as |filtered|>
|
|
<TabularCollection
|
|
data-test-services
|
|
@items={{filtered}} as |item index|
|
|
>
|
|
<BlockSlot @name="header">
|
|
<th>Service</th>
|
|
<th>Port</th>
|
|
<th>Tags</th>
|
|
</BlockSlot>
|
|
<BlockSlot @name="row">
|
|
<td data-test-service-name={{item.Service}}>
|
|
<a href={{href-to 'dc.services.show' item.Service}}>
|
|
{{#let (service/external-source item) as |externalSource| }}
|
|
{{#if externalSource }}
|
|
<span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}}></span>
|
|
{{else}}
|
|
<span></span>
|
|
{{/if}}
|
|
{{/let}}
|
|
{{item.Service}}{{#if (not-eq item.ID item.Service) }} <em data-test-service-id="{{item.ID}}">({{item.ID}})</em>{{/if}}
|
|
</a>
|
|
</td>
|
|
<td data-test-service-port={{item.Port}} class="port">
|
|
{{item.Port}}
|
|
</td>
|
|
<td data-test-service-tags>
|
|
<TagList @item={{item}} />
|
|
</td>
|
|
</BlockSlot>
|
|
</TabularCollection>
|
|
</BlockSlot>
|
|
<BlockSlot @name="empty">
|
|
<p>
|
|
There are no services.
|
|
</p>
|
|
</BlockSlot>
|
|
</ChangeableSet>
|
|
</div>
|
|
</div> |