6e32498431
* ui: Remove custom css-vars 'polyfill' and use native CSS props Previously we used a sort of polyfill for certain places where we needed CSS property-like behavior. This meant duplicating code between JS and CSS, specifically some of our SVG icons. We moved to CSS props only in the places where they are beneficial and populated the variables with our already existing SASS variables. This means we no longer have to duplicate CSS and we can remove our custom css-var helper/polyfill.
69 lines
2.7 KiB
Handlebars
69 lines
2.7 KiB
Handlebars
{{title 'Services'}}
|
|
{{#app-view class="service list"}}
|
|
{{#block-slot name='notification' as |status type|}}
|
|
{{partial 'dc/services/notifications'}}
|
|
{{/block-slot}}
|
|
{{#block-slot name='header'}}
|
|
<h1>
|
|
Services <em>{{format-number items.length}} total</em>
|
|
</h1>
|
|
<label for="toolbar-toggle"></label>
|
|
{{/block-slot}}
|
|
{{#block-slot name='toolbar'}}
|
|
{{#if (gt items.length 0) }}
|
|
{{phrase-editor
|
|
placeholder='service:name tag:name status:critical search-term'
|
|
value=(slice 0 terms.length terms)
|
|
onchange=(action (mut terms) value='target.value')
|
|
searchable=searchable
|
|
}}
|
|
{{/if}}
|
|
{{/block-slot}}
|
|
{{#block-slot name='content'}}
|
|
{{#changeable-set dispatcher=searchable}}
|
|
{{#block-slot name='set' as |filtered|}}
|
|
{{#tabular-collection
|
|
route='dc.services.show'
|
|
key='Name'
|
|
items=filtered as |item index|
|
|
}}
|
|
{{#block-slot name='header'}}
|
|
<th style={{remainingWidth}}>Service</th>
|
|
<th style={{totalWidth}}>Health Checks<span><em role="tooltip">The number of health checks for the service on all nodes</em></span></th>
|
|
<th style={{remainingWidth}}>Tags</th>
|
|
{{/block-slot}}
|
|
{{#block-slot name='row'}}
|
|
<td data-test-service="{{item.Name}}" style={{remainingWidth}}>
|
|
<a href={{href-to 'dc.services.show' item.Name}}>
|
|
{{#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.Name}}
|
|
</a>
|
|
</td>
|
|
<td style={{totalWidth}}>
|
|
{{healthcheck-info
|
|
passing=item.ChecksPassing warning=item.ChecksWarning critical=item.ChecksCritical
|
|
passingWidth=passingWidth warningWidth=warningWidth criticalWidth=criticalWidth
|
|
}}
|
|
</td>
|
|
<td style={{remainingWidth}}>
|
|
{{tag-list items=item.Tags}}
|
|
</td>
|
|
{{/block-slot}}
|
|
{{/tabular-collection}}
|
|
{{/block-slot}}
|
|
{{#block-slot name='empty'}}
|
|
<p>
|
|
There are no services.
|
|
</p>
|
|
{{/block-slot}}
|
|
{{/changeable-set}}
|
|
{{/block-slot}}
|
|
{{/app-view}}
|
|
|