ui: Add `<ConsulMetadataList />` and use it in 2 places (#7568)

We previoulsy had some pretty straightforward duplicated code for
rendering our metadata list for both Service Metadata and Node Metadata.

This moves this code into a component.
This commit is contained in:
John Cowen 2020-04-02 10:53:59 +01:00 committed by John Cowen
parent 651c0b2c33
commit c8f8814d03
5 changed files with 53 additions and 42 deletions

View File

@ -0,0 +1,27 @@
## ConsulMetadataList
`<ConsulMetadataList @items={{meta}} />`
A presentational component for presenting Consul Metadata
### Arguments
| Argument/Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `array` | | A an array of entries or `[key, value]` pairs as returned by `Object.entries()` |
### Example
The following example shows how to construct the required structure from the
Consul API using a `object-entries` helper.
```handlebars
<ConsulMetadataList @items={{object-entries item.Meta}} />
```
### See
- [Component Source Code](./index.js)
- [TemplateSource Code](./index.hbs)
---

View File

@ -0,0 +1,19 @@
<TabularCollection
data-test-metadata
@items={{items}} as |item index|
>
<BlockSlot @name="header">
<th>Key</th>
<th>Value</th>
</BlockSlot>
<BlockSlot @name="row">
<td>
<span>
{{object-at 0 item}}
</span>
</td>
<td>
<span>{{object-at 1 item}}</span>
</td>
</BlockSlot>
</TabularCollection>

View File

@ -0,0 +1,5 @@
import Component from '@ember/component';
export default Component.extend({
tagName: '',
});

View File

@ -1,25 +1,5 @@
{{#if item.Meta}}
{{#with (object-entries item.Meta) as |meta|}}
<TabularCollection
data-test-metadata
@items={{meta}} as |item index|
>
<BlockSlot @name="header">
<th>Key</th>
<th>Value</th>
</BlockSlot>
<BlockSlot @name="row">
<td>
<span>
{{object-at 0 item}}
</span>
</td>
<td>
<span>{{object-at 1 item}}</span>
</td>
</BlockSlot>
</TabularCollection>
{{/with}}
<ConsulMetadataList @items={{object-entries item.Meta}} />
{{else}}
<p>
This node has no meta data.

View File

@ -1,25 +1,5 @@
{{#if item.Meta}}
{{#with (object-entries item.Meta) as |meta|}}
<TabularCollection
data-test-metadata
@items={{meta}} as |item index|
>
<BlockSlot @name="header">
<th>Key</th>
<th>Value</th>
</BlockSlot>
<BlockSlot @name="row">
<td>
<span>
{{object-at 0 item}}
</span>
</td>
<td>
<span>{{object-at 1 item}}</span>
</td>
</BlockSlot>
</TabularCollection>
{{/with}}
<ConsulMetadataList @items={{object-entries item.Meta}} />
{{else}}
<p>
This instance has no meta data.