81637e2138
Migrate roughly half of the base components into base Adds a target for easily formatting CSS Further CSS amends/migration (#5921) 1. tooltips within tables where a slightly bit troublesome due to a mix of `inline-flex`, `overflow` and the need for truncation. This refineds tooltips a slight bit more to work 'everywhere'. 2. We also move tooltip to use the correct color and min-width from structure, but we overwrite the min-width here until we get confirmation on widths/alignment of text within a tooltip. 3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings 4. Now we inline-flex our table cells, it means it is impossible to truncate text without wrapping it in another element. This wraps all Description like text in `<p>` tags. Generally the first column of text is already wrapped in an `<a>` tag. Other items such as consul tags and policy names etc get 'cutoff' rather than truncated. 5. We are now using all the icons from `@hashicorp/structure-icons`
58 lines
2.5 KiB
Handlebars
58 lines
2.5 KiB
Handlebars
{{#app-view class="service list"}}
|
|
{{#block-slot 'notification' as |status type|}}
|
|
{{partial 'dc/services/notifications'}}
|
|
{{/block-slot}}
|
|
{{#block-slot 'header'}}
|
|
<h1>
|
|
Services <em>{{format-number items.length}} total</em>
|
|
</h1>
|
|
<label for="toolbar-toggle"></label>
|
|
{{/block-slot}}
|
|
{{#block-slot 'toolbar'}}
|
|
{{#if (gt items.length 0) }}
|
|
{{#phrase-editor placeholder=(if (eq terms.length 0) 'service:name tag:name status:critical search-term' '') items=terms searchable=searchable}}{{/phrase-editor}}
|
|
{{/if}}
|
|
{{/block-slot}}
|
|
{{#block-slot 'content'}}
|
|
{{#changeable-set dispatcher=searchable}}
|
|
{{#block-slot 'set' as |filtered|}}
|
|
{{#tabular-collection
|
|
route='dc.services.show'
|
|
key='Name'
|
|
items=filtered as |item index|
|
|
}}
|
|
{{#block-slot 'header'}}
|
|
<th style={{remainingWidth}}>Service</th>
|
|
<th>Type</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 'row'}}
|
|
<td data-test-service="{{item.Name}}" style={{remainingWidth}}>
|
|
<a href={{href-to 'dc.services.show' item.Name}}>
|
|
<span data-test-external-source="{{service/external-source item}}" style={{{ concat 'background-image: ' (css-var (concat '--' (service/external-source item) '-color-svg') 'none')}}}></span>
|
|
{{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 'empty'}}
|
|
<p>
|
|
There are no services.
|
|
</p>
|
|
{{/block-slot}}
|
|
{{/changeable-set}}
|
|
{{/block-slot}}
|
|
{{/app-view}}
|
|
|