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.

ui-v2/app/components/consul-metadata-list/README.mdx

@@ -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)
+
+---

ui-v2/app/components/consul-metadata-list/index.hbs

@@ -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>

ui-v2/app/components/consul-metadata-list/index.js

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

ui-v2/app/templates/dc/nodes/-metadata.hbs

@@ -1,25 +1,5 @@
 {{#if item.Meta}}
-  {{#with (object-entries item.Meta) as |meta|}}
+  <ConsulMetadataList @items={{object-entries item.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}}
 {{else}}
   <p>
     This node has no meta data.

ui-v2/app/templates/dc/services/-metadata.hbs

@@ -1,25 +1,5 @@
 {{#if item.Meta}}
-  {{#with (object-entries item.Meta) as |meta|}}
+  <ConsulMetadataList @items={{object-entries item.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}}
 {{else}}
   <p>
     This instance has no meta data.