From 2fb8530045b89d96457dea50309cbc9c17ae22dc Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 24 May 2018 12:47:48 +0100
Subject: [PATCH 01/26] Enable searching by port in the Node > [Service]
 listing

---
 ui-v2/app/controllers/dc/nodes/show.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui-v2/app/controllers/dc/nodes/show.js b/ui-v2/app/controllers/dc/nodes/show.js
index 0f48b55155..06c5c4004d 100644
--- a/ui-v2/app/controllers/dc/nodes/show.js
+++ b/ui-v2/app/controllers/dc/nodes/show.js
@@ -14,10 +14,15 @@ export default Controller.extend(WithFiltering, {
     set(this, 'selectedTab', 'health-checks');
   },
   filter: function(item, { s = '' }) {
+    const term = s.toLowerCase();
     return (
       get(item, 'Service')
         .toLowerCase()
-        .indexOf(s.toLowerCase()) !== -1
+        .indexOf(term) !== -1 ||
+      get(item, 'Port')
+        .toString()
+        .toLowerCase()
+        .indexOf(term) !== -1
     );
   },
   actions: {

From 8f76a54c6ae7c06abc9cbed600e590a71bcc51d7 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 24 May 2018 13:08:08 +0100
Subject: [PATCH 02/26] Change KV inputs to textareas, also JSON > CODE

As the input field was used for KV's it looked like you couldn't save
multiline KV's. Changed to textarea so you can see the multilines.

Also, JSON is slightly misleading as clicking the toggle doesn't
necessarily mean 'I'm going to edit some JSON' it means I want the code
editor with syntax highlighting, so renamed the toggle to say 'Code'
---
 ui-v2/app/styles/components/form-elements.scss | 10 +++++++---
 ui-v2/app/styles/core/typography.scss          |  1 +
 ui-v2/app/templates/dc/kv/-form.hbs            |  4 ++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ui-v2/app/styles/components/form-elements.scss b/ui-v2/app/styles/components/form-elements.scss
index 683678c079..fa2eae5e06 100644
--- a/ui-v2/app/styles/components/form-elements.scss
+++ b/ui-v2/app/styles/components/form-elements.scss
@@ -14,8 +14,10 @@
   display: block;
   max-width: 100%;
   min-width: 100%;
-  padding: 0.625em;
+  min-height: 70px;
+  padding: 0.625em 15px;
   resize: vertical;
+  line-height: 1.5;
 }
 %form-element [type='text'],
 %form-element [type='password'] {
@@ -37,14 +39,16 @@
   box-shadow: none;
   border-radius: $radius-small;
 }
-.has-error > input {
+.has-error > input,
+.has-error > textarea {
   border: 1px solid;
 }
 %form-element > span {
   color: $text-gray;
 }
 %form-element [type='text'],
-%form-element [type='password'] {
+%form-element [type='password'],
+%form-element textarea {
   color: $user-text-gray;
 }
 %form-element [type='text'],
diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss
index 43ccd83c3d..9527d094f8 100644
--- a/ui-v2/app/styles/core/typography.scss
+++ b/ui-v2/app/styles/core/typography.scss
@@ -63,6 +63,7 @@ h2,
 body,
 pre code,
 input,
+textarea,
 td {
   font-size: $size-6;
 }
diff --git a/ui-v2/app/templates/dc/kv/-form.hbs b/ui-v2/app/templates/dc/kv/-form.hbs
index a001faeaed..16d7f41bc3 100644
--- a/ui-v2/app/templates/dc/kv/-form.hbs
+++ b/ui-v2/app/templates/dc/kv/-form.hbs
@@ -11,14 +11,14 @@
         <div>
             <label class="type-toggle">
                 <input type="checkbox" name="json" checked={{if json 'checked' }} onchange={{action 'change'}} />
-                <span>JSON</span>
+                <span>Code</span>
             </label>
             <label class="type-text{{if item.error.Value ' has-error'}}">
                 <span>Value</span>
 {{#if json}}
                 {{ code-editor value=(atob item.Value) onkeyup=(action 'change') }}
 {{else}}
-                <input autofocus={{not create}} type="text" name="value" value={{atob item.Value}} onkeyup={{action 'change'}} />
+                <textarea autofocus={{not create}} name="value" onkeyup={{action 'change'}}>{{atob item.Value}}</textarea>
 {{/if}}
             </label>
         </div>

From 6489f1c401e203f2365f99fa02fd598bdf302556 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 24 May 2018 15:41:11 +0100
Subject: [PATCH 03/26] Auto calculate the height of the tables depending on
 the space left

Additionally make the footer lookup more unique seeing as we are in js
here
---
 ui-v2/app/components/tabular-collection.js      | 17 ++++++++++-------
 .../templates/components/hashicorp-consul.hbs   |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js
index c86081f105..11830f0866 100644
--- a/ui-v2/app/components/tabular-collection.js
+++ b/ui-v2/app/components/tabular-collection.js
@@ -62,7 +62,7 @@ export default Component.extend(SlotsMixin, {
     this._super(...arguments);
     this.change = change.bind(this);
     this.confirming = [];
-    // TODO: This should auto calculate properly from the CSS
+    // TODO: The row height should auto calculate properly from the CSS
     this['cell-layout'] = new ZIndexedGrid(get(this, 'width'), 50);
     this.handler = () => {
       this.resize(createSizeEvent());
@@ -86,12 +86,15 @@ export default Component.extend(SlotsMixin, {
     window.removeEventListener('resize', this.handler);
   },
   resize: function(e) {
-    const $footer = [...$$('#wrapper > footer')][0];
-    const $thead = [...$$('main > div')][0];
-    if ($thead) {
-      // TODO: This should auto calculate properly from the CSS
-      this.set('height', Math.max(0, new Number(e.detail.height - ($footer.clientHeight + 218))));
-      this['cell-layout'] = new ZIndexedGrid($thead.clientWidth, 50);
+    const $tbody = this.$('tbody').get(0);
+    if ($tbody) {
+      const rect = $tbody.getBoundingClientRect();
+      const $footer = [...$$('footer[role="contentinfo"]')][0];
+      const space = rect.top + $footer.clientHeight;
+      const height = new Number(e.detail.height - space);
+      this.set('height', Math.max(0, height));
+      // TODO: The row height should auto calculate properly from the CSS
+      this['cell-layout'] = new ZIndexedGrid($tbody.clientWidth, 50);
       this.updateItems();
       this.updateScrollPosition();
     }
diff --git a/ui-v2/app/templates/components/hashicorp-consul.hbs b/ui-v2/app/templates/components/hashicorp-consul.hbs
index cecae95c7d..f3396a4557 100644
--- a/ui-v2/app/templates/components/hashicorp-consul.hbs
+++ b/ui-v2/app/templates/components/hashicorp-consul.hbs
@@ -51,7 +51,7 @@
     <main>
 {{yield}}
     </main>
-    <footer data-test-footer>
+    <footer role="contentinfo" data-test-footer>
         <a data-test-footer-copyright href="{{env 'CONSUL_COPYRIGHT_URL'}}/" rel="noopener noreferrer" target="_blank">&copy; {{env 'CONSUL_COPYRIGHT_YEAR'}} HashiCorp</a>
         <p data-test-footer-version>Consul {{env 'CONSUL_VERSION'}}</p>
         <a data-test-footer-docs href="{{env 'CONSUL_DOCUMENTATION_URL'}}/index.html" rel="help noopener noreferrer" target="_blank">Documentation</a>

From a0544e38cee68e9418dca63f181224c2a9bdb1ab Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 24 May 2018 17:15:55 +0100
Subject: [PATCH 04/26] Prevent action groups from being cutoff by the footer

1. Calculate where group is going to be, if it will get cut off, then
dropup instead of down
2. As the action group can now drop up, the z-index should be higher
than the previous rows, so add a top z-index higher than the others and
use that when opened
---
 ui-v2/app/components/tabular-collection.js    | 144 +++++++++++++++++-
 ui-v2/app/styles/components/action-group.scss |  15 +-
 2 files changed, 153 insertions(+), 6 deletions(-)

diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js
index 11830f0866..c6716eac5b 100644
--- a/ui-v2/app/components/tabular-collection.js
+++ b/ui-v2/app/components/tabular-collection.js
@@ -1,21 +1,40 @@
 import Component from 'ember-collection/components/ember-collection';
 import needsRevalidate from 'ember-collection/utils/needs-revalidate';
+import identity from 'ember-collection/utils/identity';
 import Grid from 'ember-collection/layouts/grid';
 import SlotsMixin from 'ember-block-slots';
 import style from 'ember-computed-style';
 
 import { computed, get, set } from '@ember/object';
 
-const $$ = document.querySelectorAll.bind(document);
+const $$ = function(sel, context = document) {
+  return context.querySelectorAll(sel);
+};
 const createSizeEvent = function(detail) {
   return {
     detail: { width: window.innerWidth, height: window.innerHeight },
   };
 };
+// need to copy this in wholesale as there is no way to import it
+// TODO: separate both Cell and ZIndexedGrid out
+class Cell {
+  constructor(key, item, index, style) {
+    this.key = key;
+    this.hidden = false;
+    this.item = item;
+    this.index = index;
+    this.style = style;
+  }
+}
+const maxZIndex = 10000;
 class ZIndexedGrid extends Grid {
-  formatItemStyle(index, w, h) {
-    let style = super.formatItemStyle(...arguments);
-    style += 'z-index: ' + (10000 - index);
+  formatItemStyle(index, w, h, checked) {
+    let style = super.formatItemStyle(index, w, h);
+    let zIndex = maxZIndex - index;
+    if (checked == index) {
+      zIndex = maxZIndex + 1;
+    }
+    style += 'z-index: ' + zIndex;
     return style;
   }
 }
@@ -37,6 +56,21 @@ const change = function(e) {
     const value = e.currentTarget.value;
     if (value != get(this, 'checked')) {
       set(this, 'checked', value);
+      if (e.currentTarget.getAttribute('id') !== 'actions_close') {
+        const $tr = closest('tr', e.currentTarget);
+        const $group = [...$('~ ul', e.currentTarget)][0];
+        const $footer = [...$$('footer[role="contentinfo"]')][0];
+        const groupRect = $group.getBoundingClientRect();
+        const footerRect = $footer.getBoundingClientRect();
+        const groupBottom = groupRect.top + $group.clientHeight;
+        const footerTop = footerRect.top;
+        if (groupBottom > footerTop) {
+          $group.classList.add('above');
+        } else {
+          $group.classList.remove('above');
+        }
+        $tr.style.zIndex = maxZIndex + 1;
+      }
     } else {
       set(this, 'checked', null);
     }
@@ -109,6 +143,108 @@ export default Component.extend(SlotsMixin, {
       needsRevalidate(this);
     }
   },
+  // need to overwrite this completely so I can pass through the checked index
+  // for `formatItemStyle` in 3 places
+  updateCells: function() {
+    if (!this._items) {
+      return;
+    }
+    const numItems = get(this._items, 'length');
+    if (this._cellLayout.length !== numItems) {
+      this._cellLayout.length = numItems;
+    }
+
+    var priorMap = this._cellMap;
+    var cellMap = Object.create(null);
+
+    var index = this._cellLayout.indexAt(
+      this._scrollLeft,
+      this._scrollTop,
+      this._clientWidth,
+      this._clientHeight
+    );
+    var count = this._cellLayout.count(
+      this._scrollLeft,
+      this._scrollTop,
+      this._clientWidth,
+      this._clientHeight
+    );
+    var items = this._items;
+    var bufferBefore = Math.min(index, this._buffer);
+    index -= bufferBefore;
+    count += bufferBefore;
+    count = Math.min(count + this._buffer, get(items, 'length') - index);
+    var i, style, itemIndex, itemKey, cell;
+
+    var newItems = [];
+
+    for (i = 0; i < count; i++) {
+      itemIndex = index + i;
+      itemKey = identity(items.objectAt(itemIndex));
+      if (priorMap) {
+        cell = priorMap[itemKey];
+      }
+      if (cell) {
+        // additional `checked` argument
+        style = this._cellLayout.formatItemStyle(
+          itemIndex,
+          this._clientWidth,
+          this._clientHeight,
+          this.checked
+        );
+        set(cell, 'style', style);
+        set(cell, 'hidden', false);
+        set(cell, 'key', itemKey);
+        cellMap[itemKey] = cell;
+      } else {
+        newItems.push(itemIndex);
+      }
+    }
+
+    for (i = 0; i < this._cells.length; i++) {
+      cell = this._cells[i];
+      if (!cellMap[cell.key]) {
+        if (newItems.length) {
+          itemIndex = newItems.pop();
+          let item = items.objectAt(itemIndex);
+          itemKey = identity(item);
+          // additional `checked` argument
+          style = this._cellLayout.formatItemStyle(
+            itemIndex,
+            this._clientWidth,
+            this._clientHeight,
+            this.checked
+          );
+          set(cell, 'style', style);
+          set(cell, 'key', itemKey);
+          set(cell, 'index', itemIndex);
+          set(cell, 'item', item);
+          set(cell, 'hidden', false);
+          cellMap[itemKey] = cell;
+        } else {
+          set(cell, 'hidden', true);
+          set(cell, 'style', 'height: 0; display: none;');
+        }
+      }
+    }
+
+    for (i = 0; i < newItems.length; i++) {
+      itemIndex = newItems[i];
+      let item = items.objectAt(itemIndex);
+      itemKey = identity(item);
+      // additional `checked` argument
+      style = this._cellLayout.formatItemStyle(
+        itemIndex,
+        this._clientWidth,
+        this._clientHeight,
+        this.checked
+      );
+      cell = new Cell(itemKey, item, itemIndex, style);
+      cellMap[itemKey] = cell;
+      this._cells.pushObject(cell);
+    }
+    this._cellMap = cellMap;
+  },
   actions: {
     click: function(e) {
       const name = e.target.nodeName.toLowerCase();
diff --git a/ui-v2/app/styles/components/action-group.scss b/ui-v2/app/styles/components/action-group.scss
index 51685c970a..b4f324c114 100644
--- a/ui-v2/app/styles/components/action-group.scss
+++ b/ui-v2/app/styles/components/action-group.scss
@@ -70,19 +70,30 @@
 %action-group ul {
   position: absolute;
   right: -10px;
-  top: 35px;
   padding: 1px;
 }
 %action-group ul::before {
   position: absolute;
   right: 18px;
-  top: -6px;
   content: '';
   display: block;
   width: 10px;
   height: 10px;
+}
+%action-group ul:not(.above) {
+  top: 35px;
+}
+%action-group ul:not(.above)::before {
+  top: -6px;
   transform: rotate(45deg);
 }
+%action-group ul.above {
+  bottom: 35px;
+}
+%action-group ul.above::before {
+  bottom: -6px;
+  transform: rotate(225deg);
+}
 %action-group li {
   position: relative;
   z-index: 1;

From f9cf50547a3785c8139d7f3a68b7b6e6fdd03a55 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 25 May 2018 13:15:27 +0100
Subject: [PATCH 05/26] Adds filtering to the KV listing page

---
 ui-v2/app/controllers/dc/kv/folder.js         |  2 +
 ui-v2/app/controllers/dc/kv/index.js          | 18 ++++++++
 ui-v2/app/helpers/left-trim.js                |  9 ++--
 ui-v2/app/helpers/right-trim.js               |  9 ++--
 ui-v2/app/routes/dc/kv/index.js               |  6 +++
 ui-v2/app/templates/dc/kv/index.hbs           | 11 ++++-
 ui-v2/app/utils/left-trim.js                  |  3 ++
 ui-v2/app/utils/right-trim.js                 |  4 ++
 .../integration/helpers/left-trim-test.js     |  4 +-
 .../integration/helpers/right-trim-test.js    |  4 +-
 .../unit/controllers/dc/kv/folder-test.js     | 12 +++++
 .../unit/controllers/dc/kv/index-test.js      | 12 +++++
 ui-v2/tests/unit/utils/left-trim-test.js      | 44 +++++++++++++++++++
 ui-v2/tests/unit/utils/right-trim-test.js     | 44 +++++++++++++++++++
 14 files changed, 166 insertions(+), 16 deletions(-)
 create mode 100644 ui-v2/app/controllers/dc/kv/folder.js
 create mode 100644 ui-v2/app/controllers/dc/kv/index.js
 create mode 100644 ui-v2/app/utils/left-trim.js
 create mode 100644 ui-v2/app/utils/right-trim.js
 create mode 100644 ui-v2/tests/unit/controllers/dc/kv/folder-test.js
 create mode 100644 ui-v2/tests/unit/controllers/dc/kv/index-test.js
 create mode 100644 ui-v2/tests/unit/utils/left-trim-test.js
 create mode 100644 ui-v2/tests/unit/utils/right-trim-test.js

diff --git a/ui-v2/app/controllers/dc/kv/folder.js b/ui-v2/app/controllers/dc/kv/folder.js
new file mode 100644
index 0000000000..5f88002bfd
--- /dev/null
+++ b/ui-v2/app/controllers/dc/kv/folder.js
@@ -0,0 +1,2 @@
+import Controller from './index';
+export default Controller.extend();
diff --git a/ui-v2/app/controllers/dc/kv/index.js b/ui-v2/app/controllers/dc/kv/index.js
new file mode 100644
index 0000000000..20a2399058
--- /dev/null
+++ b/ui-v2/app/controllers/dc/kv/index.js
@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { get } from '@ember/object';
+import WithFiltering from 'consul-ui/mixins/with-filtering';
+import rightTrim from 'consul-ui/utils/right-trim';
+export default Controller.extend(WithFiltering, {
+  queryParams: {
+    s: {
+      as: 'filter',
+      replace: true,
+    },
+  },
+  filter: function(item, { s = '' }) {
+    const key = rightTrim(get(item, 'Key'), '/')
+      .split('/')
+      .pop();
+    return key.toLowerCase().indexOf(s.toLowerCase()) !== -1;
+  },
+});
diff --git a/ui-v2/app/helpers/left-trim.js b/ui-v2/app/helpers/left-trim.js
index 4f36778317..bb49e028f8 100644
--- a/ui-v2/app/helpers/left-trim.js
+++ b/ui-v2/app/helpers/left-trim.js
@@ -1,7 +1,6 @@
 import { helper } from '@ember/component/helper';
+import leftTrim from 'consul-ui/utils/left-trim';
 
-export function leftTrim([str = '', search = ''], hash) {
-  return str.indexOf(search) === 0 ? str.substr(search.length) : str;
-}
-
-export default helper(leftTrim);
+export default helper(function([str = '', search = ''], hash) {
+  return leftTrim(str, search);
+});
diff --git a/ui-v2/app/helpers/right-trim.js b/ui-v2/app/helpers/right-trim.js
index 8ad3cceb6a..27c2721374 100644
--- a/ui-v2/app/helpers/right-trim.js
+++ b/ui-v2/app/helpers/right-trim.js
@@ -1,8 +1,7 @@
 import { helper } from '@ember/component/helper';
 
-export function rightTrim([str = '', search = ''], hash) {
-  const pos = str.length - search.length;
-  return str.indexOf(search) === pos ? str.substr(0, pos) : str;
-}
+import rightTrim from 'consul-ui/utils/right-trim';
 
-export default helper(rightTrim);
+export default helper(function([str = '', search = ''], hash) {
+  return rightTrim(str, search);
+});
diff --git a/ui-v2/app/routes/dc/kv/index.js b/ui-v2/app/routes/dc/kv/index.js
index a39615aa88..01529d64db 100644
--- a/ui-v2/app/routes/dc/kv/index.js
+++ b/ui-v2/app/routes/dc/kv/index.js
@@ -5,6 +5,12 @@ import { get } from '@ember/object';
 import WithKvActions from 'consul-ui/mixins/kv/with-actions';
 
 export default Route.extend(WithKvActions, {
+  queryParams: {
+    s: {
+      as: 'filter',
+      replace: true,
+    },
+  },
   repo: service('kv'),
   model: function(params) {
     const key = params.key || '/';
diff --git a/ui-v2/app/templates/dc/kv/index.hbs b/ui-v2/app/templates/dc/kv/index.hbs
index 20ce7c7479..c408fca70e 100644
--- a/ui-v2/app/templates/dc/kv/index.hbs
+++ b/ui-v2/app/templates/dc/kv/index.hbs
@@ -18,6 +18,13 @@
             {{/if}}
         </h1>
     {{/block-slot}}
+    {{#block-slot 'toolbar'}}
+{{#if (gt items.length 0) }}
+      <form class="filter-bar">
+          {{freetext-filter onchange=(action 'filter') value=filter.s placeholder="Search by name"}}
+      </form>
+{{/if}}
+    {{/block-slot}}
     {{#block-slot 'actions'}}
 {{#if (not-eq parent.Key '/') }}
         <a href="{{href-to 'dc.kv.create' parent.Key}}" class="type-create">Create</a>
@@ -26,9 +33,9 @@
 {{/if}}
     {{/block-slot}}
     {{#block-slot 'content'}}
-{{#if (gt items.length 0)}}
+{{#if (gt filtered.length 0)}}
         {{#tabular-collection
-            items=(sort-by 'isFolder:desc' items) as |item index|
+            items=(sort-by 'isFolder:desc' filtered) as |item index|
         }}
             {{#block-slot 'header'}}
                 <th>Name</th>
diff --git a/ui-v2/app/utils/left-trim.js b/ui-v2/app/utils/left-trim.js
new file mode 100644
index 0000000000..279b3d02d5
--- /dev/null
+++ b/ui-v2/app/utils/left-trim.js
@@ -0,0 +1,3 @@
+export default function leftTrim(str = '', search = '') {
+  return str.indexOf(search) === 0 ? str.substr(search.length) : str;
+}
diff --git a/ui-v2/app/utils/right-trim.js b/ui-v2/app/utils/right-trim.js
new file mode 100644
index 0000000000..5e1b1d3c46
--- /dev/null
+++ b/ui-v2/app/utils/right-trim.js
@@ -0,0 +1,4 @@
+export default function rightTrim(str = '', search = '') {
+  const pos = str.length - search.length;
+  return str.lastIndexOf(search) === pos ? str.substr(0, pos) : str;
+}
diff --git a/ui-v2/tests/integration/helpers/left-trim-test.js b/ui-v2/tests/integration/helpers/left-trim-test.js
index 587e789a16..805ae93824 100644
--- a/ui-v2/tests/integration/helpers/left-trim-test.js
+++ b/ui-v2/tests/integration/helpers/left-trim-test.js
@@ -1,4 +1,4 @@
-import { moduleForComponent, skip } from 'ember-qunit';
+import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
 moduleForComponent('left trim', 'helper:left-trim', {
@@ -6,7 +6,7 @@ moduleForComponent('left trim', 'helper:left-trim', {
 });
 
 // Replace this with your real tests.
-skip('it renders', function(assert) {
+test('it renders', function(assert) {
   this.set('inputValue', '1234');
 
   this.render(hbs`{{left-trim inputValue}}`);
diff --git a/ui-v2/tests/integration/helpers/right-trim-test.js b/ui-v2/tests/integration/helpers/right-trim-test.js
index 7e0ccac8a7..0cb91cadb8 100644
--- a/ui-v2/tests/integration/helpers/right-trim-test.js
+++ b/ui-v2/tests/integration/helpers/right-trim-test.js
@@ -1,4 +1,4 @@
-import { moduleForComponent, skip } from 'ember-qunit';
+import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
 moduleForComponent('right-trim', 'helper:right-trim', {
@@ -6,7 +6,7 @@ moduleForComponent('right-trim', 'helper:right-trim', {
 });
 
 // Replace this with your real tests.
-skip('it renders', function(assert) {
+test('it renders', function(assert) {
   this.set('inputValue', '1234');
 
   this.render(hbs`{{right-trim inputValue}}`);
diff --git a/ui-v2/tests/unit/controllers/dc/kv/folder-test.js b/ui-v2/tests/unit/controllers/dc/kv/folder-test.js
new file mode 100644
index 0000000000..c9edb0e623
--- /dev/null
+++ b/ui-v2/tests/unit/controllers/dc/kv/folder-test.js
@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:dc/kv/folder', 'Unit | Controller | dc/kv/folder', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});
diff --git a/ui-v2/tests/unit/controllers/dc/kv/index-test.js b/ui-v2/tests/unit/controllers/dc/kv/index-test.js
new file mode 100644
index 0000000000..af2dfbad18
--- /dev/null
+++ b/ui-v2/tests/unit/controllers/dc/kv/index-test.js
@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:dc/kv/index', 'Unit | Controller | dc/kv/index', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});
diff --git a/ui-v2/tests/unit/utils/left-trim-test.js b/ui-v2/tests/unit/utils/left-trim-test.js
new file mode 100644
index 0000000000..03e38a7074
--- /dev/null
+++ b/ui-v2/tests/unit/utils/left-trim-test.js
@@ -0,0 +1,44 @@
+import { module } from 'ember-qunit';
+import test from 'ember-sinon-qunit/test-support/test';
+import leftTrim from 'consul-ui/utils/left-trim';
+module('Unit | Utility | left trim');
+
+test('it trims characters from the left hand side', function(assert) {
+  [
+    {
+      args: ['/a/folder/here', '/'],
+      expected: 'a/folder/here',
+    },
+    {
+      args: ['/a/folder/here', ''],
+      expected: '/a/folder/here',
+    },
+    {
+      args: ['a/folder/here', '/'],
+      expected: 'a/folder/here',
+    },
+    {
+      args: ['a/folder/here/', '/'],
+      expected: 'a/folder/here/',
+    },
+    {
+      args: [],
+      expected: '',
+    },
+    {
+      args: ['/a/folder/here', '/a/folder'],
+      expected: '/here',
+    },
+    {
+      args: ['/a/folder/here/', '/a/folder/here'],
+      expected: '/',
+    },
+    {
+      args: ['/a/folder/here/', '/a/folder/here/'],
+      expected: '',
+    },
+  ].forEach(function(item) {
+    const actual = leftTrim(...item.args);
+    assert.equal(actual, item.expected);
+  });
+});
diff --git a/ui-v2/tests/unit/utils/right-trim-test.js b/ui-v2/tests/unit/utils/right-trim-test.js
new file mode 100644
index 0000000000..567a2a4221
--- /dev/null
+++ b/ui-v2/tests/unit/utils/right-trim-test.js
@@ -0,0 +1,44 @@
+import { module } from 'ember-qunit';
+import test from 'ember-sinon-qunit/test-support/test';
+import rightTrim from 'consul-ui/utils/right-trim';
+module('Unit | Utility | right trim');
+
+test('it trims characters from the right hand side', function(assert) {
+  [
+    {
+      args: ['/a/folder/here/', '/'],
+      expected: '/a/folder/here',
+    },
+    {
+      args: ['/a/folder/here', ''],
+      expected: '/a/folder/here',
+    },
+    {
+      args: ['a/folder/here', '/'],
+      expected: 'a/folder/here',
+    },
+    {
+      args: ['a/folder/here/', '/'],
+      expected: 'a/folder/here',
+    },
+    {
+      args: [],
+      expected: '',
+    },
+    {
+      args: ['/a/folder/here', '/folder/here'],
+      expected: '/a',
+    },
+    {
+      args: ['/a/folder/here', 'a/folder/here'],
+      expected: '/',
+    },
+    {
+      args: ['/a/folder/here/', '/a/folder/here/'],
+      expected: '',
+    },
+  ].forEach(function(item) {
+    const actual = rightTrim(...item.args);
+    assert.equal(actual, item.expected);
+  });
+});

From b7498b3079be328d879f7a203e4e7b0490373d25 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 1 Jun 2018 13:19:12 +0100
Subject: [PATCH 06/26] Tweak placeholder text to add 'port'

---
 ui-v2/app/styles/components/filter-bar.scss | 1 +
 ui-v2/app/templates/dc/nodes/-services.hbs  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui-v2/app/styles/components/filter-bar.scss b/ui-v2/app/styles/components/filter-bar.scss
index 96365857b1..d540acc2df 100644
--- a/ui-v2/app/styles/components/filter-bar.scss
+++ b/ui-v2/app/styles/components/filter-bar.scss
@@ -44,6 +44,7 @@
     margin-left: 12px;
   }
   %filter-bar fieldset {
+    min-width: 210px;
     width: auto;
   }
 }
diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs
index d1efe5dc97..b9c6c0f2ae 100644
--- a/ui-v2/app/templates/dc/nodes/-services.hbs
+++ b/ui-v2/app/templates/dc/nodes/-services.hbs
@@ -1,6 +1,6 @@
 {{#if (gt items.length 0) }}
     <form class="filter-bar">
-        {{freetext-filter onchange=(action 'filter') value=filter.s placeholder="Search by name"}}
+        {{freetext-filter onchange=(action 'filter') value=filter.s placeholder="Search by name/port"}}
     </form>
 {{/if}}
 {{#if (gt filtered.length 0)}}

From cdfd24bf97ab241a6215866052d7e29156399c3d Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 1 Jun 2018 13:58:03 +0100
Subject: [PATCH 07/26] Use `this.element` for context, thus avoiding jQuery,
 plus..

Add comments for clarity
---
 ui-v2/app/components/tabular-collection.js | 60 ++++++++++++++++++++--
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js
index c6716eac5b..a5cda787bc 100644
--- a/ui-v2/app/components/tabular-collection.js
+++ b/ui-v2/app/components/tabular-collection.js
@@ -6,16 +6,34 @@ import SlotsMixin from 'ember-block-slots';
 import style from 'ember-computed-style';
 
 import { computed, get, set } from '@ember/object';
+/**
+ * Heavily extended `ember-collection` component
+ * This adds support for z-index calculations to enable
+ * Popup menus to pop over either rows above or below
+ * the popup.
+ * Additionally adds calculations for figuring out what the height
+ * of the tabular component should be depending on the other elements
+ * in the page.
+ * Currently everything is here together for clarity, but to be split up
+ * in the future
+ */
 
+// basic DOM selecting utility, emeber doesn't like you using `$`
+// hence `$$`
 const $$ = function(sel, context = document) {
   return context.querySelectorAll(sel);
 };
+// basic pseudo CustomEvent interface
+// TODO: use actual custom events once I've reminded
+// myself re: support/polyfills
 const createSizeEvent = function(detail) {
   return {
     detail: { width: window.innerWidth, height: window.innerHeight },
   };
 };
-// need to copy this in wholesale as there is no way to import it
+// need to copy Cell in wholesale as there is no way to import it
+// there is no change made to `Cell` here, its only here as its
+// private in `ember-collection`
 // TODO: separate both Cell and ZIndexedGrid out
 class Cell {
   constructor(key, item, index, style) {
@@ -26,11 +44,17 @@ class Cell {
     this.style = style;
   }
 }
+// this is an amount of rows in the table NOT items
+// unlikely to have 10000 DOM rows ever :)
 const maxZIndex = 10000;
+// Adds z-index styling to the default Grid
 class ZIndexedGrid extends Grid {
   formatItemStyle(index, w, h, checked) {
     let style = super.formatItemStyle(index, w, h);
+    // count backwards from maxZIndex
     let zIndex = maxZIndex - index;
+    // apart from the row that contains an opened dropdown menu
+    // this one should be highest z-index, so use max plus 1
     if (checked == index) {
       zIndex = maxZIndex + 1;
     }
@@ -38,7 +62,8 @@ class ZIndexedGrid extends Grid {
     return style;
   }
 }
-// TODO instead of degrading gracefully
+// basic DOM closest utility to cope with no support
+// TODO: instead of degrading gracefully
 // add a while polyfill for closest
 const closest = function(sel, el) {
   try {
@@ -47,6 +72,22 @@ const closest = function(sel, el) {
     return;
   }
 };
+/**
+ * The tabular-collection can contain 'actions' the UI for which
+ * uses dropdown 'action groups', so a group of different actions.
+ * State makes use of native HTML state using radiogroups
+ * to ensure that only a single dropdown can be open at one time.
+ * Therefore we listen to change events to do anything extra when
+ * a dropdown is opened (the change function is bound to the instance of
+ * the `tabular-component` on init, hoisted here for visibility)
+ *
+ * The extra functionality we have here is to detect whether the opened
+ * dropdown menu would be cut off or not if it 'dropped down'.
+ * If it would be cut off we use CSS to 'drop it up' instead.
+ * We also set this row to have the max z-index here, and mark this
+ * row as the 'checked row' for when a scroll/grid re-calculation is
+ * performed
+ */
 const change = function(e) {
   if (e instanceof MouseEvent) {
     return;
@@ -56,6 +97,8 @@ const change = function(e) {
     const value = e.currentTarget.value;
     if (value != get(this, 'checked')) {
       set(this, 'checked', value);
+      // 'actions_close' would mean that all menus have been closed
+      // therefore we don't need to calculate
       if (e.currentTarget.getAttribute('id') !== 'actions_close') {
         const $tr = closest('tr', e.currentTarget);
         const $group = [...$('~ ul', e.currentTarget)][0];
@@ -113,6 +156,8 @@ export default Component.extend(SlotsMixin, {
   },
   didInsertElement: function() {
     this._super(...arguments);
+    // TODO: Consider moving all DOM lookups here
+    // this seems to be the earliest place I can get them
     window.addEventListener('resize', this.handler);
     this.handler();
   },
@@ -120,7 +165,7 @@ export default Component.extend(SlotsMixin, {
     window.removeEventListener('resize', this.handler);
   },
   resize: function(e) {
-    const $tbody = this.$('tbody').get(0);
+    const $tbody = [...$$('tbody', this.element)][0];
     if ($tbody) {
       const rect = $tbody.getBoundingClientRect();
       const $footer = [...$$('footer[role="contentinfo"]')][0];
@@ -133,6 +178,8 @@ export default Component.extend(SlotsMixin, {
       this.updateScrollPosition();
     }
   },
+  // `ember-collection` bug workaround
+  // https://github.com/emberjs/ember-collection/issues/138
   _needsRevalidate: function() {
     if (this.isDestroyed || this.isDestroying) {
       return;
@@ -144,7 +191,9 @@ export default Component.extend(SlotsMixin, {
     }
   },
   // need to overwrite this completely so I can pass through the checked index
-  // for `formatItemStyle` in 3 places
+  // unfortunately the nicest way I could think to do this is to copy this in wholesale
+  // to add an extra argument for `formatItemStyle` in 3 places
+  // tradeoff between changing as little code as possible in the original code
   updateCells: function() {
     if (!this._items) {
       return;
@@ -247,6 +296,9 @@ export default Component.extend(SlotsMixin, {
   },
   actions: {
     click: function(e) {
+      // click on row functionality
+      // so if you click the actual row but not a link
+      // find the first link and fire that instead
       const name = e.target.nodeName.toLowerCase();
       switch (name) {
         case 'input':

From 635beab347e6e5cead16566287213d6028ffc991 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Wed, 23 May 2018 14:46:57 +0100
Subject: [PATCH 08/26] Fix tear down click handler problem in tests

It's not obvious what "the way" to teardown window event handlers is in
Ember. The datacenter-picker is permanently in the app during usage, but
in tests I'm assuming it gets added and removed lots.

So when you run the tests, as the tests aren't run in an isolated runner
the QUnit test runner ends up with a click handler on it, So if you
click on the test runner one of the tests will fail.

The failure is related to there not being an element with a `.contains`
method. So this checks that the element is truthy first, i.e. it exists.
If it doesn't it just bails out.
---
 ui-v2/app/mixins/click-outside.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui-v2/app/mixins/click-outside.js b/ui-v2/app/mixins/click-outside.js
index c7c216b06f..92c2d89639 100644
--- a/ui-v2/app/mixins/click-outside.js
+++ b/ui-v2/app/mixins/click-outside.js
@@ -3,9 +3,13 @@ import Mixin from '@ember/object/mixin';
 import { next } from '@ember/runloop';
 import { get } from '@ember/object';
 const isOutside = function(element, e) {
-  const isRemoved = !e.target || !document.contains(e.target);
-  const isInside = element === e.target || element.contains(e.target);
-  return !isRemoved && !isInside;
+  if (element) {
+    const isRemoved = !e.target || !document.contains(e.target);
+    const isInside = element === e.target || element.contains(e.target);
+    return !isRemoved && !isInside;
+  } else {
+    return false;
+  }
 };
 const handler = function(e) {
   const el = get(this, 'element');

From 17ebf96755322f3519032088437395d3f52919f5 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 11 May 2018 13:47:21 +0100
Subject: [PATCH 09/26] WIP: Feature/acceptance tests

---
 ui-v2/.gitignore                              |   2 +
 ui-v2/GNUmakefile                             |  15 +
 .../components/tabular-collection.hbs         |   2 +-
 .../app/templates/dc/nodes/-healthchecks.hbs  |   4 +-
 ui-v2/app/templates/dc/nodes/-services.hbs    |   5 +-
 ui-v2/ember-cli-build.js                      |   9 +-
 ui-v2/package.json                            |  12 +-
 .../acceptance/components/acl-filter.feature  |  35 +++
 .../components/catalog-filter.feature         |  88 ++++++
 .../acceptance/components/kv-filter.feature   |  27 ++
 ui-v2/tests/acceptance/dc/acls/update.feature |  38 +++
 ui-v2/tests/acceptance/dc/index.feature       |   8 +
 ui-v2/tests/acceptance/dc/kvs/update.feature  |  32 ++
 ui-v2/tests/acceptance/dc/list.feature        |  20 ++
 ui-v2/tests/acceptance/dc/nodes/index.feature |  11 +
 .../acceptance/dc/nodes/services.feature      |  17 ++
 ui-v2/tests/acceptance/dc/nodes/show.feature  |  46 +++
 .../acceptance/dc/services/index.feature      |  11 +
 .../tests/acceptance/index-forwarding.feature |   6 +
 .../tests/acceptance/page-navigation.feature  |  43 +++
 .../steps/components/acl-filter-steps.js      |  10 +
 .../steps/components/catalog-filter-steps.js  |  10 +
 .../steps/components/kv-filter-steps.js       |  10 +
 .../acceptance/steps/dc/acls/update-steps.js  |  10 +
 .../tests/acceptance/steps/dc/index-steps.js  |  10 +
 .../steps/dc/kv/index/view-kvs-steps.js       |  10 +
 .../acceptance/steps/dc/kvs/update-steps.js   |  10 +
 ui-v2/tests/acceptance/steps/dc/list-steps.js |  10 +
 .../acceptance/steps/dc/nodes/index-steps.js  |  10 +
 .../steps/dc/nodes/index/view-nodes-steps.js  |  10 +
 .../steps/dc/nodes/services-steps.js          |  10 +
 .../acceptance/steps/dc/nodes/show-steps.js   |  10 +
 .../steps/dc/services/index-steps.js          |  10 +
 .../dc/services/index/view-services-steps.js  |  10 +
 .../steps/index-forwarding-steps.js           |  11 +
 .../acceptance/steps/page-navigation-steps.js |  10 +
 ui-v2/tests/acceptance/steps/steps.js         |   2 +
 ui-v2/tests/helpers/api.js                    |   4 +
 ui-v2/tests/helpers/set-cookies.js            |  25 ++
 ui-v2/tests/helpers/type-to-url.js            |  23 ++
 ui-v2/tests/helpers/yadda-annotations.js      |  85 ++++++
 ui-v2/tests/helpers/yadda.js                  |   2 +
 ui-v2/tests/lib/page-object/visitable.js      |  56 ++++
 ui-v2/tests/pages/dc/acls/edit.js             |   5 +-
 ui-v2/tests/pages/dc/kv/edit.js               |   8 +-
 ui-v2/tests/pages/dc/kv/index.js              |   6 +-
 ui-v2/tests/pages/dc/nodes/show.js            |   8 +-
 ui-v2/tests/steps.js                          | 211 +++++++++++++
 ui-v2/yarn.lock                               | 282 +++++++++++++++++-
 49 files changed, 1285 insertions(+), 24 deletions(-)
 create mode 100644 ui-v2/tests/acceptance/components/acl-filter.feature
 create mode 100644 ui-v2/tests/acceptance/components/catalog-filter.feature
 create mode 100644 ui-v2/tests/acceptance/components/kv-filter.feature
 create mode 100644 ui-v2/tests/acceptance/dc/acls/update.feature
 create mode 100644 ui-v2/tests/acceptance/dc/index.feature
 create mode 100644 ui-v2/tests/acceptance/dc/kvs/update.feature
 create mode 100644 ui-v2/tests/acceptance/dc/list.feature
 create mode 100644 ui-v2/tests/acceptance/dc/nodes/index.feature
 create mode 100644 ui-v2/tests/acceptance/dc/nodes/services.feature
 create mode 100644 ui-v2/tests/acceptance/dc/nodes/show.feature
 create mode 100644 ui-v2/tests/acceptance/dc/services/index.feature
 create mode 100644 ui-v2/tests/acceptance/index-forwarding.feature
 create mode 100644 ui-v2/tests/acceptance/page-navigation.feature
 create mode 100644 ui-v2/tests/acceptance/steps/components/acl-filter-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/components/catalog-filter-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/components/kv-filter-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/acls/update-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/index-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/kv/index/view-kvs-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/kvs/update-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/list-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/nodes/index-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/nodes/index/view-nodes-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/nodes/services-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/nodes/show-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/services/index-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/services/index/view-services-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/index-forwarding-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/page-navigation-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/steps.js
 create mode 100644 ui-v2/tests/helpers/api.js
 create mode 100644 ui-v2/tests/helpers/set-cookies.js
 create mode 100644 ui-v2/tests/helpers/type-to-url.js
 create mode 100644 ui-v2/tests/helpers/yadda-annotations.js
 create mode 100644 ui-v2/tests/helpers/yadda.js
 create mode 100644 ui-v2/tests/lib/page-object/visitable.js
 create mode 100644 ui-v2/tests/steps.js

diff --git a/ui-v2/.gitignore b/ui-v2/.gitignore
index a76bc38188..8496799743 100644
--- a/ui-v2/.gitignore
+++ b/ui-v2/.gitignore
@@ -8,3 +8,5 @@
 /yarn-error.log
 /testem.log
 
+/public/consul-api-double
+
diff --git a/ui-v2/GNUmakefile b/ui-v2/GNUmakefile
index 9b5cb8ba9b..49ac334569 100644
--- a/ui-v2/GNUmakefile
+++ b/ui-v2/GNUmakefile
@@ -13,3 +13,18 @@ format:
 	yarn run format:js
 
 .PHONY: server dist lint format
+
+.DEFAULT_GOAL=all
+.PHONY: deps test all build start
+all: deps
+deps: node_modules yarn.lock package.json
+node_modules:
+	yarn
+build:
+	yarn run build
+start:
+	yarn run start
+test:
+	yarn run test
+test-view:
+	yarn run test:view
diff --git a/ui-v2/app/templates/components/tabular-collection.hbs b/ui-v2/app/templates/components/tabular-collection.hbs
index 5acb52bbae..313ae645fe 100644
--- a/ui-v2/app/templates/components/tabular-collection.hbs
+++ b/ui-v2/app/templates/components/tabular-collection.hbs
@@ -10,7 +10,7 @@
     {{#ember-native-scrollable tagName='tbody' content-size=_contentSize scroll-left=_scrollLeft scroll-top=_scrollTop scrollChange=(action "scrollChange") clientSizeChange=(action "clientSizeChange")}}
         <tr></tr>
 {{~#each _cells as |cell|~}}
-        <tr style={{{cell.style}}} onclick={{action 'click'}}>
+        <tr data-test-tabular-row style={{{cell.style}}} onclick={{action 'click'}}>
             {{#yield-slot 'row'}}{{yield cell.item cell.index}}{{/yield-slot}}
 {{#if hasActions }}
             <td class="actions">
diff --git a/ui-v2/app/templates/dc/nodes/-healthchecks.hbs b/ui-v2/app/templates/dc/nodes/-healthchecks.hbs
index 772989797b..d199676133 100644
--- a/ui-v2/app/templates/dc/nodes/-healthchecks.hbs
+++ b/ui-v2/app/templates/dc/nodes/-healthchecks.hbs
@@ -1,6 +1,6 @@
-<ul>
+<ul data-test-node-healthchecks>
 {{#each (sort-by (action 'sortChecksByImportance') item.Checks) as |check| }}
-    {{healthcheck-status tagName='li' name=check.Name class=check.Status status=check.Status notes=check.Notes output=check.Output}}
+  {{healthcheck-status data-test-node-healthcheck=check.Name tagName='li' name=check.Name class=check.Status status=check.Status notes=check.Notes output=check.Output}}
 {{/each}}
 </ul>
 
diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs
index b9c6c0f2ae..185875f3ce 100644
--- a/ui-v2/app/templates/dc/nodes/-services.hbs
+++ b/ui-v2/app/templates/dc/nodes/-services.hbs
@@ -5,6 +5,7 @@
 {{/if}}
 {{#if (gt filtered.length 0)}}
     {{#tabular-collection
+        data-test-services
         items=filtered as |item index|
     }}
         {{#block-slot 'header'}}
@@ -13,10 +14,10 @@
             <th>Tags</th>
         {{/block-slot}}
         {{#block-slot 'row'}}
-            <td>
+            <td data-test-service-name="{{item.Service}}">
                 <a href={{href-to 'dc.services.show' item.Service }}>{{item.Service}}</a>
             </td>
-            <td>
+            <td data-test-service-port="{{item.Port}}" class="port">
                 {{item.Port}}
             </td>
             <td>
diff --git a/ui-v2/ember-cli-build.js b/ui-v2/ember-cli-build.js
index 9a96a6772b..c51bd62665 100644
--- a/ui-v2/ember-cli-build.js
+++ b/ui-v2/ember-cli-build.js
@@ -1,7 +1,7 @@
 'use strict';
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
-
+const stew = require('broccoli-stew');
 module.exports = function(defaults) {
   let app = new EmberApp(defaults, {
     'ember-cli-babel': {
@@ -43,6 +43,9 @@ module.exports = function(defaults) {
   // modules that you would like to import into your application
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
-
-  return app.toTree();
+  let tree = app.toTree();
+  if (app.env === 'production') {
+    tree = stew.rm(tree, 'consul-api-double');
+  }
+  return tree;
 };
diff --git a/ui-v2/package.json b/ui-v2/package.json
index 10ad4b70fe..86db291b19 100644
--- a/ui-v2/package.json
+++ b/ui-v2/package.json
@@ -15,7 +15,9 @@
     "format:js": "prettier --write \"{app,config,lib,server,tests}/**/*.js\" ./*.js ./.*.js",
     "start": "ember serve",
     "test": "ember test",
-    "precommit": "lint-staged"
+    "test:view": "ember test --server",
+    "precommit": "lint-staged",
+    "postinstall": "cp -R ./node_modules/@johncowen/consul-api-double ./public/consul-api-double"
   },
   "lint-staged": {
     "{app,config,lib,server,tests}/**/*.js": [
@@ -26,11 +28,17 @@
       "prettier --write",
       "git add"
     ]
+  },
+  "dependencies": {
+
   },
   "devDependencies": {
+    "@johncowen/ember-cli-api-double": "johncowen/ember-cli-api-double#master",
+    "@johncowen/consul-api-double": "johncowen/consul-api-double#master",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "base64-js": "^1.3.0",
     "broccoli-asset-rev": "^2.4.5",
+    "broccoli-stew": "^1.5.0",
     "ember-ajax": "^3.0.0",
     "ember-block-slots": "^1.1.11",
     "ember-browserify": "^1.2.2",
@@ -40,6 +48,7 @@
     "ember-cli-app-version": "^3.0.0",
     "ember-cli-autoprefixer": "^0.8.1",
     "ember-cli-babel": "^6.6.0",
+    "ember-cli-cjs-transform": "^1.2.0",
     "ember-cli-clipboard": "^0.9.0",
     "ember-cli-code-coverage": "^1.0.0-beta.4",
     "ember-cli-dependency-checker": "^2.0.0",
@@ -55,6 +64,7 @@
     "ember-cli-shims": "^1.2.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^2.0.0",
+    "ember-cli-yadda": "^0.4.0",
     "ember-collection": "^1.0.0-alpha.7",
     "ember-composable-helpers": "^2.1.0",
     "ember-computed-style": "^0.2.0",
diff --git a/ui-v2/tests/acceptance/components/acl-filter.feature b/ui-v2/tests/acceptance/components/acl-filter.feature
new file mode 100644
index 0000000000..b5659f9855
--- /dev/null
+++ b/ui-v2/tests/acceptance/components/acl-filter.feature
@@ -0,0 +1,35 @@
+@setupApplicationTest
+Feature: Acl Filter
+  Scenario: Filtering [Model]
+    Given 1 datacenter model with the value "dc-1"
+    And 2 [Model] models
+    When I visit the [Page] page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be [Url]
+
+    Then I see 2 [Model] models
+    And I see allIsSelected on the filter
+
+    When I click management on the filter
+    And I see managementIsSelected on the filter
+    And I see 1 [Model] model
+
+    When I click client on the filter
+    And I see clientIsSelected on the filter
+    And I see 1 [Model] model
+
+    When I click all on the filter
+    And I see allIsSelected on the filter
+    Then I type with yaml
+    ---
+    s: Anonymous Token
+    ---
+    And I see 1 [Model] model with the name "Anonymous Token"
+
+  Where:
+    -------------------------------------------------
+    | Model   | Page     | Url                       |
+    | acl     | acls     | /dc-1/acls                |
+    -------------------------------------------------
diff --git a/ui-v2/tests/acceptance/components/catalog-filter.feature b/ui-v2/tests/acceptance/components/catalog-filter.feature
new file mode 100644
index 0000000000..2635228002
--- /dev/null
+++ b/ui-v2/tests/acceptance/components/catalog-filter.feature
@@ -0,0 +1,88 @@
+@setupApplicationTest
+Feature: components / catalog-filter
+  Scenario: Filtering [Model]
+    Given 1 datacenter model with the value "dc-1"
+    And 3 service models from yaml
+    ---
+      - ChecksPassing: 1
+        ChecksWarning: 0
+        ChecksCritical: 0
+      - ChecksPassing: 0
+        ChecksWarning: 1
+        ChecksCritical: 0
+      - ChecksPassing: 0
+        ChecksWarning: 0
+        ChecksCritical: 1
+    ---
+    And 3 node models from yaml
+    ---
+      - Checks:
+          - Status: passing
+      - Checks:
+          - Status: warning
+      - Checks:
+          - Status: critical
+
+    ---
+    When I visit the [Page] page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be [Url]
+
+    Then I see 3 [Model] models
+    And I see allIsSelected on the filter
+
+    When I click passing on the filter
+    And I see passingIsSelected on the filter
+    And I see 1 [Model] model
+
+    When I click warning on the filter
+    And I see warningIsSelected on the filter
+    And I see 1 [Model] model
+
+    When I click critical on the filter
+    And I see criticalIsSelected on the filter
+    And I see 1 [Model] model
+
+    When I click all on the filter
+    And I see allIsSelected on the filter
+    Then I type with yaml
+    ---
+    s: [Model]-0
+    ---
+    And I see 1 [Model] model with the name "[Model]-0"
+
+  Where:
+    -------------------------------------------------
+    | Model   | Page     | Url                       |
+    | service | services | /dc-1/services            |
+    | node    | nodes    | /dc-1/nodes               |
+    -------------------------------------------------
+  Scenario: Filtering [Model] in [Page]
+    Given 1 datacenter model with the value "dc1"
+    And 2 node models from yaml
+    ---
+    - ID: node-0
+    ---
+    When I visit the node page for yaml
+    ---
+      dc: dc1
+      node: node-0
+    ---
+    # And I see 3 healthcheck model with the name "Disk Util"
+    # And then pause for 5000
+    When I click services on the tabs
+    And I see servicesIsSelected on the tabs
+
+    Then I type with yaml
+    ---
+    s: 65535
+    ---
+    And I see 1 [Model] model
+    And I see 1 [Model] model with the port "65535"
+  Where:
+    -------------------------------------------------
+    | Model   | Page     | Url                       |
+    | service | node     | /dc-1/nodes/node-0        |
+    -------------------------------------------------
diff --git a/ui-v2/tests/acceptance/components/kv-filter.feature b/ui-v2/tests/acceptance/components/kv-filter.feature
new file mode 100644
index 0000000000..eda504c4b3
--- /dev/null
+++ b/ui-v2/tests/acceptance/components/kv-filter.feature
@@ -0,0 +1,27 @@
+@setupApplicationTest
+Feature: components / kv-filter
+  Scenario: Filtering using the freetext filter
+    Given 1 datacenter model with the value "dc-1"
+    And 2 [Model] models from yaml
+    ---
+      - hi
+      - there
+    ---
+    When I visit the [Page] page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be [Url]
+    Then I type with yaml
+    ---
+    s: [Text]
+    ---
+    And pause for 3000
+    And I see 1 [Model] model with the name "[Text]"
+
+  Where:
+    ----------------------------------------------------------------
+    | Model   | Page     | Url        | Text            | Property |
+    | kv      | kvs      | /dc-1/kv   | hi              | name     |
+    | kv      | kvs      | /dc-1/kv   | there           | name     |
+    ----------------------------------------------------------------
diff --git a/ui-v2/tests/acceptance/dc/acls/update.feature b/ui-v2/tests/acceptance/dc/acls/update.feature
new file mode 100644
index 0000000000..84385f51e0
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/acls/update.feature
@@ -0,0 +1,38 @@
+@setupApplicationTest
+Feature: ACL Update
+  Scenario: Update to [Name], [Type], [Rules]
+    Given 1 datacenter model with the value "datacenter"
+    And 1 acl model from yaml
+    ---
+      ID: key
+    ---
+    When I visit the acl page for yaml
+    ---
+      dc: datacenter
+      acl: key
+    ---
+    Then I type with yaml
+    ---
+      name: [Name]
+    ---
+    And I click "[value=[Type]]"
+    And I submit
+    Then a PUT request is made to "/v1/acl/update?dc=datacenter" with the body from yaml
+    ---
+      Name: [Name]
+      Type: [Type]
+    ---
+    Where:
+      ----------------------------------------------------------
+      | Name       | Type       |  Rules                       |
+      | key-name   | client     |  node "0" {policy = "read"}  |
+      | key name   | management |  node "0" {policy = "write"} |
+      | key%20name | client     |  node "0" {policy = "read"}  |
+      | utf8?      | management |  node "0" {policy = "write"} |
+      ----------------------------------------------------------
+@ignore
+  Scenario: Rules can be edited/updated
+    Then ok
+@ignore
+  Scenario: The feedback dialog says success or failure
+    Then ok
diff --git a/ui-v2/tests/acceptance/dc/index.feature b/ui-v2/tests/acceptance/dc/index.feature
new file mode 100644
index 0000000000..5a76bc22b3
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/index.feature
@@ -0,0 +1,8 @@
+@setupApplicationTest
+Feature: Datacenters
+@ignore
+  Scenario: Arriving at the service page
+    Given 10 datacenter models
+    When I visit the index page
+    And I click "[data-test-datacenter-selected]"
+    Then I see 10 datacenter models
diff --git a/ui-v2/tests/acceptance/dc/kvs/update.feature b/ui-v2/tests/acceptance/dc/kvs/update.feature
new file mode 100644
index 0000000000..3ff81466a0
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/kvs/update.feature
@@ -0,0 +1,32 @@
+@setupApplicationTest
+Feature: KV Update
+  Scenario: Update to [Name] change value to [Value]
+    Given 1 datacenter model with the value "datacenter"
+    And 1 kv model from yaml
+    ---
+      Key: [Name]
+    ---
+    When I visit the kv page for yaml
+    ---
+      dc: datacenter
+      kv: [Name]
+    ---
+    Then I type with yaml
+    ---
+      value: [Value]
+    ---
+    And I submit
+    Then a PUT request is made to "/v1/kv/[Name]?dc=datacenter" with the body "[Value]"
+  Where:
+      ------------------------------------
+      | Name              | Value        |
+      # | key               | value        |
+      # | key-name          | a value      |
+      | folder/key-name   | a value      |
+      ------------------------------------
+# @ignore
+  # Scenario: Rules can be edited/updated
+    # Then ok
+# @ignore
+  # Scenario: The feedback dialog says success or failure
+    # Then ok
diff --git a/ui-v2/tests/acceptance/dc/list.feature b/ui-v2/tests/acceptance/dc/list.feature
new file mode 100644
index 0000000000..bd77f6c817
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/list.feature
@@ -0,0 +1,20 @@
+@setupApplicationTest
+Feature: List Models
+  Scenario: Listing [Model]
+    Given 1 datacenter model with the value "dc-1"
+    And 3 [Model] models
+    When I visit the [Page] page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be [Url]
+
+    Then I see 3 [Model] models
+  Where:
+    -------------------------------------------------
+    | Model   | Page     | Url                      |
+    | service | services | /dc-1/services           |
+    | node    | nodes    | /dc-1/nodes              |
+    | kv      | kvs      | /dc-1/kv                 |
+    | acl     | acls     | /dc-1/acls               |
+    -------------------------------------------------
diff --git a/ui-v2/tests/acceptance/dc/nodes/index.feature b/ui-v2/tests/acceptance/dc/nodes/index.feature
new file mode 100644
index 0000000000..4e6c4d0637
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/nodes/index.feature
@@ -0,0 +1,11 @@
+@setupApplicationTest
+Feature: Nodes
+  Scenario:
+    Given 1 datacenter model with the value "dc-1"
+    And 3 node models
+    When I visit the nodes page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/nodes
+    Then I see 3 node models
diff --git a/ui-v2/tests/acceptance/dc/nodes/services.feature b/ui-v2/tests/acceptance/dc/nodes/services.feature
new file mode 100644
index 0000000000..1c6383ae94
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/nodes/services.feature
@@ -0,0 +1,17 @@
+@setupApplicationTest
+Feature: Search services within nodes by name and port
+  Scenario: Given 1 node
+    Given 1 datacenter model with the value "dc1"
+    And 1 node models from yaml
+    ---
+    - ID: node-0
+    ---
+    When I visit the node page for yaml
+    ---
+      dc: dc1
+      node: node-0
+    ---
+    When I click services on the tabs
+    And I see servicesIsSelected on the tabs
+    And then pause for 3000
+
diff --git a/ui-v2/tests/acceptance/dc/nodes/show.feature b/ui-v2/tests/acceptance/dc/nodes/show.feature
new file mode 100644
index 0000000000..49a8c22fa1
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/nodes/show.feature
@@ -0,0 +1,46 @@
+@setupApplicationTest
+Feature: Show node
+  Scenario: Given 2 nodes all the tabs are visible and clickable
+    Given 1 datacenter model with the value "dc1"
+    And 2 node models from yaml
+    ---
+    - ID: node-0
+    - ID: node-1
+    ---
+    When I visit the node page for yaml
+    ---
+      dc: dc1
+      node: node-0
+    ---
+    And I see healthChecksIsSelected on the tabs
+
+    When I click services on the tabs
+    And I see servicesIsSelected on the tabs
+
+    When I click roundTripTime on the tabs
+    And I see roundTripTimeIsSelected on the tabs
+
+    When I click lockSessions on the tabs
+    And I see lockSessionsIsSelected on the tabs
+@ignore
+  Scenario: Given 1 node all the tabs are visible and clickable and the RTT one isn't there
+    Given 1 datacenter model with the value "dc1"
+    And 1 node models from yaml
+    ---
+    - ID: node-0
+    ---
+    When I visit the node page for yaml
+    ---
+      dc: dc1
+      node: node-0
+    ---
+    And I see healthChecksIsSelected on the tabs
+
+    When I click services on the tabs
+    And I see servicesIsSelected on the tabs
+
+    And I don't see roundTripTime on the tabs
+
+    When I click lockSessions on the tabs
+    And I see lockSessionsIsSelected on the tabs
+
diff --git a/ui-v2/tests/acceptance/dc/services/index.feature b/ui-v2/tests/acceptance/dc/services/index.feature
new file mode 100644
index 0000000000..a70f62ba63
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/services/index.feature
@@ -0,0 +1,11 @@
+@setupApplicationTest
+Feature: Services
+  Scenario:
+    Given 1 datacenter model with the value "dc-1"
+    And 3 service models
+    When I visit the services page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/services
+    Then I see 3 service models
diff --git a/ui-v2/tests/acceptance/index-forwarding.feature b/ui-v2/tests/acceptance/index-forwarding.feature
new file mode 100644
index 0000000000..f467d8fcee
--- /dev/null
+++ b/ui-v2/tests/acceptance/index-forwarding.feature
@@ -0,0 +1,6 @@
+@setupApplicationTest
+Feature: index forwarding
+  Scenario: Arriving at the index page when there is only one datacenter
+    Given 1 datacenter model with the value "datacenter"
+    When I visit the index page
+    Then the url should be /datacenter/services
diff --git a/ui-v2/tests/acceptance/page-navigation.feature b/ui-v2/tests/acceptance/page-navigation.feature
new file mode 100644
index 0000000000..605fc9d8c7
--- /dev/null
+++ b/ui-v2/tests/acceptance/page-navigation.feature
@@ -0,0 +1,43 @@
+@setupApplicationTest
+Feature: Page Navigation
+  Background:
+    Given 1 datacenter model with the value "dc-1"
+  Scenario: Visiting the index page
+    When I visit the index page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/services
+  Scenario: Clicking [Link] in the navigation takes me to [Url]
+    When I visit the services page for yaml
+    ---
+      dc: dc-1
+    ---
+    When I click [Link] on the navigation
+    Then the url should be [Url]
+  Where:
+    --------------------------------------
+    | Link     | Url                     |
+    | nodes    | /dc-1/nodes             |
+    | kvs      | /dc-1/kv                |
+    | acls     | /dc-1/acls              |
+    | settings | /settings               |
+    --------------------------------------
+  Scenario: Clicking a [Item] in the [Model] listing
+    When I visit the [Model] page for yaml
+    ---
+      dc: dc-1
+    ---
+    When I click [Item] on the [Model]
+    Then the url should be [Url]
+  Where:
+    ---------------------------------------------------
+    | Item     | Model    | Url                       |
+    | service  | services | /dc-1/services/service-0  |
+    | node     | nodes    | /dc-1/nodes/node-0        |
+    # | kv       | kvs      | /dc-1/kv/key-0            |
+    | acl       | acls      | /dc-1/acls/anonymous    |
+    ---------------------------------------------------
+@ignore
+  Scenario: Clicking a kv in the kvs listing
+    Then ok
diff --git a/ui-v2/tests/acceptance/steps/components/acl-filter-steps.js b/ui-v2/tests/acceptance/steps/components/acl-filter-steps.js
new file mode 100644
index 0000000000..960cdf533d
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/components/acl-filter-steps.js
@@ -0,0 +1,10 @@
+import steps from '../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/components/catalog-filter-steps.js b/ui-v2/tests/acceptance/steps/components/catalog-filter-steps.js
new file mode 100644
index 0000000000..960cdf533d
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/components/catalog-filter-steps.js
@@ -0,0 +1,10 @@
+import steps from '../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/components/kv-filter-steps.js b/ui-v2/tests/acceptance/steps/components/kv-filter-steps.js
new file mode 100644
index 0000000000..960cdf533d
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/components/kv-filter-steps.js
@@ -0,0 +1,10 @@
+import steps from '../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/acls/update-steps.js b/ui-v2/tests/acceptance/steps/dc/acls/update-steps.js
new file mode 100644
index 0000000000..ba1093295f
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/acls/update-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/index-steps.js b/ui-v2/tests/acceptance/steps/dc/index-steps.js
new file mode 100644
index 0000000000..960cdf533d
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/index-steps.js
@@ -0,0 +1,10 @@
+import steps from '../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/kv/index/view-kvs-steps.js b/ui-v2/tests/acceptance/steps/dc/kv/index/view-kvs-steps.js
new file mode 100644
index 0000000000..9bfbe9ac9b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/kv/index/view-kvs-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/kvs/update-steps.js b/ui-v2/tests/acceptance/steps/dc/kvs/update-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/kvs/update-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/list-steps.js b/ui-v2/tests/acceptance/steps/dc/list-steps.js
new file mode 100644
index 0000000000..960cdf533d
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/list-steps.js
@@ -0,0 +1,10 @@
+import steps from '../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/nodes/index-steps.js b/ui-v2/tests/acceptance/steps/dc/nodes/index-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/nodes/index-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/nodes/index/view-nodes-steps.js b/ui-v2/tests/acceptance/steps/dc/nodes/index/view-nodes-steps.js
new file mode 100644
index 0000000000..9bfbe9ac9b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/nodes/index/view-nodes-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/nodes/services-steps.js b/ui-v2/tests/acceptance/steps/dc/nodes/services-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/nodes/services-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/nodes/show-steps.js b/ui-v2/tests/acceptance/steps/dc/nodes/show-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/nodes/show-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/services/index-steps.js b/ui-v2/tests/acceptance/steps/dc/services/index-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/services/index-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/services/index/view-services-steps.js b/ui-v2/tests/acceptance/steps/dc/services/index/view-services-steps.js
new file mode 100644
index 0000000000..9bfbe9ac9b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/services/index/view-services-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/index-forwarding-steps.js b/ui-v2/tests/acceptance/steps/index-forwarding-steps.js
new file mode 100644
index 0000000000..13b9b426d0
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/index-forwarding-steps.js
@@ -0,0 +1,11 @@
+import steps from './steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert);
+  // .then('I should find a file', function() {
+  //   assert.ok(true, this.step);
+  // });
+}
diff --git a/ui-v2/tests/acceptance/steps/page-navigation-steps.js b/ui-v2/tests/acceptance/steps/page-navigation-steps.js
new file mode 100644
index 0000000000..c5f07c8043
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/page-navigation-steps.js
@@ -0,0 +1,10 @@
+import steps from './steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/steps.js b/ui-v2/tests/acceptance/steps/steps.js
new file mode 100644
index 0000000000..df45d3f284
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/steps.js
@@ -0,0 +1,2 @@
+import steps from 'consul-ui/tests/steps';
+export default steps;
diff --git a/ui-v2/tests/helpers/api.js b/ui-v2/tests/helpers/api.js
new file mode 100644
index 0000000000..902f039358
--- /dev/null
+++ b/ui-v2/tests/helpers/api.js
@@ -0,0 +1,4 @@
+import getAPI from '@johncowen/ember-cli-api-double';
+import setCookies from 'consul-ui/tests/helpers/set-cookies';
+import typeToURL from 'consul-ui/tests/helpers/type-to-url';
+export default getAPI('/consul-api-double', setCookies, typeToURL);
diff --git a/ui-v2/tests/helpers/set-cookies.js b/ui-v2/tests/helpers/set-cookies.js
new file mode 100644
index 0000000000..04f0857636
--- /dev/null
+++ b/ui-v2/tests/helpers/set-cookies.js
@@ -0,0 +1,25 @@
+export default function(type, count, obj) {
+  var key = '';
+  switch (type) {
+    case 'dc':
+      key = 'CONSUL_DATACENTER_COUNT';
+      break;
+    case 'service':
+      key = 'CONSUL_SERVICE_COUNT';
+      break;
+    case 'node':
+      key = 'CONSUL_NODE_COUNT';
+      break;
+    case 'kv':
+      key = 'CONSUL_KV_COUNT';
+      break;
+    case 'acl':
+      key = 'CONSUL_ACL_COUNT';
+      obj['CONSUL_ENABLE_ACLS'] = 1;
+      break;
+  }
+  if (key) {
+    obj[key] = count;
+  }
+  return obj;
+}
diff --git a/ui-v2/tests/helpers/type-to-url.js b/ui-v2/tests/helpers/type-to-url.js
new file mode 100644
index 0000000000..68446a8b7c
--- /dev/null
+++ b/ui-v2/tests/helpers/type-to-url.js
@@ -0,0 +1,23 @@
+export default function(type) {
+  let url = null;
+  switch (type) {
+    case 'dc':
+      url = '/v1/catalog/datacenters';
+      break;
+    case 'service':
+      url = '/v1/internal/ui/services';
+      break;
+    case 'node':
+      url = '/v1/internal/ui/nodes';
+      // url = '/v1/health/service/_';
+      break;
+    case 'kv':
+      url = '/v1/kv/';
+      break;
+    case 'acl':
+      url = '/v1/acl/list';
+      // url = '/v1/acl/info/_';
+      break;
+  }
+  return url;
+}
diff --git a/ui-v2/tests/helpers/yadda-annotations.js b/ui-v2/tests/helpers/yadda-annotations.js
new file mode 100644
index 0000000000..bb7b427c16
--- /dev/null
+++ b/ui-v2/tests/helpers/yadda-annotations.js
@@ -0,0 +1,85 @@
+import ENV from '../../config/environment';
+import { skip } from 'qunit';
+import { setupApplicationTest, setupRenderingTest, setupTest } from 'ember-qunit';
+import api from 'consul-ui/tests/helpers/api';
+
+// this logic could be anything, but in this case...
+// if @ignore, then return skip (for backwards compatibility)
+// if have annotations in config, then only run those that have a matching annotation
+function checkAnnotations(annotations) {
+  // if ignore is set then we want to skip for backwards compatibility
+  if (annotations.ignore) {
+    return ignoreIt;
+  }
+
+  // if have annotations set in config, the only run those that have a matching annotation
+  if (ENV.annotations && ENV.annotations.length >= 0) {
+    for (let annotation in annotations) {
+      if (ENV.annotations.indexOf(annotation) >= 0) {
+        // have match, so test it
+        return 'testIt'; // return something other than a function
+      }
+    }
+
+    // no match, so don't run it
+    return logIt;
+  }
+}
+
+// call back functions
+function ignoreIt(testElement) {
+  skip(`${testElement.title}`, function(/*assert*/) {});
+}
+
+function logIt(testElement) {
+  console.info(`Not running or skipping: "${testElement.title}"`); // eslint-disable-line no-console
+}
+
+// exported functions
+function runFeature(annotations) {
+  return checkAnnotations(annotations);
+}
+
+function runScenario(featureAnnotations, scenarioAnnotations) {
+  return checkAnnotations(scenarioAnnotations);
+}
+
+// setup tests
+// you can override these function to add additional setup setups, or handle new setup related annotations
+function setupFeature(featureAnnotations) {
+  return setupYaddaTest(featureAnnotations);
+}
+
+function setupScenario(featureAnnotations, scenarioAnnotations) {
+  let setupFn = setupYaddaTest(scenarioAnnotations);
+  if (
+    setupFn &&
+    (featureAnnotations.setupapplicationtest ||
+      featureAnnotations.setuprenderingtest ||
+      featureAnnotations.setuptest)
+  ) {
+    throw new Error(
+      'You must not assign any @setupapplicationtest, @setuprenderingtest or @setuptest annotations to a scenario as well as its feature!'
+    );
+  }
+  return function(model) {
+    model.afterEach(function() {
+      api.server.reset();
+    });
+  };
+  // return setupFn;
+}
+
+function setupYaddaTest(annotations) {
+  if (annotations.setupapplicationtest) {
+    return setupApplicationTest;
+  }
+  if (annotations.setuprenderingtest) {
+    return setupRenderingTest;
+  }
+  if (annotations.setuptest) {
+    return setupTest;
+  }
+}
+
+export { runFeature, runScenario, setupFeature, setupScenario };
diff --git a/ui-v2/tests/helpers/yadda.js b/ui-v2/tests/helpers/yadda.js
new file mode 100644
index 0000000000..dfdc1024a0
--- /dev/null
+++ b/ui-v2/tests/helpers/yadda.js
@@ -0,0 +1,2 @@
+import yadda from 'npm:yadda';
+export default yadda;
diff --git a/ui-v2/tests/lib/page-object/visitable.js b/ui-v2/tests/lib/page-object/visitable.js
new file mode 100644
index 0000000000..8c8e985ae8
--- /dev/null
+++ b/ui-v2/tests/lib/page-object/visitable.js
@@ -0,0 +1,56 @@
+// import { assign } from '../-private/helpers';
+const assign = Object.assign;
+import { getExecutionContext } from 'ember-cli-page-object/-private/execution_context';
+
+import $ from '-jquery';
+
+function fillInDynamicSegments(path, params, encoder) {
+  return path
+    .split('/')
+    .map(function(segment) {
+      let match = segment.match(/^:(.+)$/);
+
+      if (match) {
+        let [, key] = match;
+        let value = params[key];
+
+        if (typeof value === 'undefined') {
+          throw new Error(`Missing parameter for '${key}'`);
+        }
+
+        // Remove dynamic segment key from params
+        delete params[key];
+        return encoder(value);
+      }
+
+      return segment;
+    })
+    .join('/');
+}
+
+function appendQueryParams(path, queryParams) {
+  if (Object.keys(queryParams).length) {
+    path += `?${$.param(queryParams)}`;
+  }
+
+  return path;
+}
+
+export function visitable(path, encoder = encodeURIComponent) {
+  return {
+    isDescriptor: true,
+
+    value(dynamicSegmentsAndQueryParams = {}) {
+      let executionContext = getExecutionContext(this);
+
+      return executionContext.runAsync(context => {
+        let params = assign({}, dynamicSegmentsAndQueryParams);
+        let fullPath = fillInDynamicSegments(path, params, encoder);
+
+        fullPath = appendQueryParams(fullPath, params);
+
+        return context.visit(fullPath);
+      });
+    },
+  };
+}
diff --git a/ui-v2/tests/pages/dc/acls/edit.js b/ui-v2/tests/pages/dc/acls/edit.js
index 2fb1367868..5dbf7dc787 100644
--- a/ui-v2/tests/pages/dc/acls/edit.js
+++ b/ui-v2/tests/pages/dc/acls/edit.js
@@ -1,7 +1,8 @@
-import { create, visitable, fillable, clickable } from 'ember-cli-page-object';
+import { create, visitable, clickable, triggerable } from 'ember-cli-page-object';
 
 export default create({
   visit: visitable('/:dc/acls/:acl'),
-  fillIn: fillable('input, textarea, [contenteditable]'),
+  // fillIn: fillable('input, textarea, [contenteditable]'),
+  name: triggerable('keypress', '[name="name"]'),
   submit: clickable('[type=submit]'),
 });
diff --git a/ui-v2/tests/pages/dc/kv/edit.js b/ui-v2/tests/pages/dc/kv/edit.js
index 8dab1a3265..7915cf1791 100644
--- a/ui-v2/tests/pages/dc/kv/edit.js
+++ b/ui-v2/tests/pages/dc/kv/edit.js
@@ -1,7 +1,9 @@
-import { create, visitable, fillable, clickable } from 'ember-cli-page-object';
+import { create, clickable } from 'ember-cli-page-object';
+import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
 
 export default create({
-  visit: visitable('/:dc/kv/:kv'),
-  fillIn: fillable('input, textarea, [contenteditable]'),
+  visit: visitable('/:dc/kv/:kv/edit', str => str),
+  // fillIn: fillable('input, textarea, [contenteditable]'),
+  // name: triggerable('keypress', '[name="additional"]'),
   submit: clickable('[type=submit]'),
 });
diff --git a/ui-v2/tests/pages/dc/kv/index.js b/ui-v2/tests/pages/dc/kv/index.js
index fb11214ea9..785264ec83 100644
--- a/ui-v2/tests/pages/dc/kv/index.js
+++ b/ui-v2/tests/pages/dc/kv/index.js
@@ -1,6 +1,8 @@
-import { create, visitable, collection } from 'ember-cli-page-object';
+import { create, visitable, collection, attribute } from 'ember-cli-page-object';
 
 export default create({
   visit: visitable('/:dc/kv'),
-  kvs: collection('[data-test-kv]'),
+  kvs: collection('[data-test-kv]', {
+    name: attribute('data-test-kv'),
+  }),
 });
diff --git a/ui-v2/tests/pages/dc/nodes/show.js b/ui-v2/tests/pages/dc/nodes/show.js
index b10f8f9e51..577a03ae2a 100644
--- a/ui-v2/tests/pages/dc/nodes/show.js
+++ b/ui-v2/tests/pages/dc/nodes/show.js
@@ -1,7 +1,13 @@
-import { create, visitable } from 'ember-cli-page-object';
+import { create, visitable, collection, attribute } from 'ember-cli-page-object';
 
 import radiogroup from 'consul-ui/tests/lib/page-object/radiogroup';
 export default create({
   visit: visitable('/:dc/nodes/:node'),
   tabs: radiogroup('tab', ['health-checks', 'services', 'round-trip-time', 'lock-sessions']),
+  healthchecks: collection('[data-test-node-healthcheck]', {
+    name: attribute('data-test-node-healthcheck'),
+  }),
+  services: collection('#services [data-test-tabular-row]', {
+    port: attribute('data-test-service-port', '.port'),
+  }),
 });
diff --git a/ui-v2/tests/steps.js b/ui-v2/tests/steps.js
new file mode 100644
index 0000000000..87f75bac91
--- /dev/null
+++ b/ui-v2/tests/steps.js
@@ -0,0 +1,211 @@
+/* eslint no-console: "off" */
+import yadda from './helpers/yadda';
+import { currentURL, click, triggerKeyEvent } from '@ember/test-helpers';
+import getDictionary from '@johncowen/ember-cli-api-double/dictionary';
+import pages from 'consul-ui/tests/pages';
+import api from 'consul-ui/tests/helpers/api';
+
+const create = function(number, name, value) {
+  // don't return a promise here as
+  // I don't need it to wait
+  api.server.createList(name, number, value);
+};
+var currentPage;
+export default function(assert) {
+  return (
+    yadda.localisation.English.library(
+      getDictionary(function(model, cb) {
+        switch (model) {
+          case 'datacenter':
+          case 'datacenters':
+          case 'dcs':
+            model = 'dc';
+            break;
+          case 'services':
+            model = 'service';
+            break;
+          case 'nodes':
+            model = 'node';
+            break;
+          case 'kvs':
+            model = 'kv';
+            break;
+          case 'acls':
+            model = 'acl';
+            break;
+        }
+        cb(null, model);
+      }, yadda)
+    )
+      // doubles
+      .given(['$number $model model', '$number $model models'], function(number, model) {
+        return create(number, model);
+      })
+      .given(['$number $model model with the value "$value"'], function(number, model, value) {
+        return create(number, model, value);
+      })
+      .given(
+        ['$number $model model[s]? from yaml\n$yaml', '$number $model model from json\n$json'],
+        function(number, model, data) {
+          return create(number, model, data);
+        }
+      )
+      // interactions
+      .when('I visit the $name page', function(name) {
+        currentPage = pages[name];
+        return currentPage.visit();
+      })
+      .when('I visit the $name page for the "$id" $model', function(name, id, model) {
+        currentPage = pages[name];
+        return currentPage.visit({
+          [model]: id,
+        });
+      })
+      .when(
+        ['I visit the $name page for yaml\n$yaml', 'I visit the $name page for json\n$json'],
+        function(name, data) {
+          currentPage = pages[name];
+          return pages[name].visit(data);
+        }
+      )
+      .when('I click "$selector"', function(selector) {
+        return click(selector);
+      })
+      .when('I click $prop on the $component', function(prop, component) {
+        // Collection
+        if (typeof currentPage[component].objectAt === 'function') {
+          return currentPage[component].objectAt(0)[prop]();
+        } else {
+          return currentPage[component][prop]();
+        }
+      })
+      .when('I submit', function(selector) {
+        return currentPage.submit();
+      })
+      .then('I fill in "$name" with "$value"', function(name, value) {
+        return currentPage.fillIn(name, value);
+      })
+      .then(['I fill in with yaml\n$yaml', 'I fill in with json\n$json'], function(data) {
+        return Object.keys(data).reduce(function(prev, item, i, arr) {
+          return prev.fillIn(item, data[item]);
+        }, currentPage);
+      })
+      .then(['I type with yaml\n$yaml'], function(data) {
+        const keys = Object.keys(data);
+        return keys
+          .reduce(function(prev, item, i, arr) {
+            return prev.fillIn(item, data[item]);
+          }, currentPage)
+          .then(function() {
+            return Promise.all(
+              keys.map(function(item) {
+                return triggerKeyEvent(`[name="${item}"]`, 'keyup', 83);
+              })
+            );
+          });
+      })
+      // debugging helpers
+      .then('print the current url', function(url) {
+        console.log(currentURL());
+        return Promise.resolve();
+      })
+      .then('log the "$text"', function(text) {
+        console.log(text);
+        return Promise.resolve();
+      })
+      .then('pause for $milliseconds', function(milliseconds) {
+        return new Promise(function(resolve) {
+          setTimeout(resolve, milliseconds);
+        });
+      })
+      // assertions
+      .then('a $method request is made to "$url" with the body from yaml\n$yaml', function(
+        method,
+        url,
+        data
+      ) {
+        const request = api.server.history[api.server.history.length - 2];
+        assert.equal(
+          request.method,
+          method,
+          `Expected the request method to be ${method} but was ${request.method}`
+        );
+        assert.equal(
+          request.url,
+          url,
+          `Expected the request url to be ${url} but was ${request.url}`
+        );
+        const body = JSON.parse(request.requestBody);
+        Object.keys(data).forEach(function(key, i, arr) {
+          assert.equal(
+            body[key],
+            data[key],
+            `Expected the payload to contain ${key} to equal ${body[key]} but ${key} was ${
+              data[key]
+            }`
+          );
+        });
+      })
+      .then('a $method request is made to "$url" with the body "$body"', function(
+        method,
+        url,
+        data
+      ) {
+        const request = api.server.history[api.server.history.length - 2];
+        assert.equal(
+          request.method,
+          method,
+          `Expected the request method to be ${method} but was ${request.method}`
+        );
+        assert.equal(
+          request.url,
+          url,
+          `Expected the request url to be ${url} but was ${request.url}`
+        );
+        const body = request.requestBody;
+        assert.equal(
+          body,
+          data,
+          `Expected the request body to be ${body} but was ${request.requestBody}`
+        );
+      })
+      .then('the url should be $url', function(url) {
+        const current = currentURL();
+        assert.equal(current, url, `Expected the url to be ${url} but was ${current}`);
+      })
+      .then(['I see $num $model', 'I see $num $model model', 'I see $num $model models'], function(
+        num,
+        model
+      ) {
+        const len = currentPage[`${model}s`].filter(function(item) {
+          return item.isVisible;
+        }).length;
+
+        assert.equal(len, num, `Expected ${num} ${model}s but saw ${len}`);
+      })
+      .then(['I see $num $model model with the $property "$value"'], function(
+        num,
+        model,
+        property,
+        value
+      ) {
+        const len = currentPage[`${model}s`].filter(function(item) {
+          return item.isVisible && item[property] == value;
+        }).length;
+        assert.equal(
+          len,
+          num,
+          `Expected ${num} ${model}s with ${property} set to "${value}" but saw ${len}`
+        );
+      })
+      .then(['I see $property on the $component'], function(property, component) {
+        assert.ok(currentPage[component][property], `Expected to see ${property} on ${component}`);
+      })
+      .then(['I see $property'], function(property, component) {
+        assert.ok(currentPage[property], `Expected to see ${property}`);
+      })
+      .then('ok', function() {
+        assert.ok(true);
+      })
+  );
+}
diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock
index 5a0db64a7b..9586068e29 100644
--- a/ui-v2/yarn.lock
+++ b/ui-v2/yarn.lock
@@ -17,6 +17,48 @@
     ember-cli-babel "^6.10.0"
     ember-cli-htmlbars-inline-precompile "^1.0.0"
 
+"@gardenhq/component-factory@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@gardenhq/component-factory/-/component-factory-1.4.0.tgz#f5da8ddf2050fde9c69f4426d61fe55de043e78d"
+  dependencies:
+    "@gardenhq/domino" "^1.0.0"
+    "@gardenhq/tick-control" "^2.0.0"
+    classtrophobic-es5 "^0.2.1"
+    hyperhtml "^0.15.5"
+
+"@gardenhq/domino@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@gardenhq/domino/-/domino-1.0.0.tgz#832c493f3f05697b7df4ccce00c4cf620dc60923"
+  optionalDependencies:
+    min-document "^2.19.0"
+    unfetch "^2.1.2"
+    xhr2 "^0.1.4"
+
+"@gardenhq/o@^8.0.1":
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/@gardenhq/o/-/o-8.0.1.tgz#d6772cec7e4295a951165284cf43fbd0a373b779"
+  dependencies:
+    "@gardenhq/component-factory" "^1.4.0"
+    "@gardenhq/tick-control" "^2.0.0"
+    "@gardenhq/willow" "^6.2.0"
+    babel-standalone "^6.24.2"
+    file-saver "^1.3.3"
+    mousetrap "^1.6.1"
+    ncp "^2.0.0"
+    rollup "^0.41.6"
+    rollup-plugin-memory "^2.0.0"
+    uglify-es "^3.0.17"
+  optionalDependencies:
+    js-yaml "^3.8.4"
+
+"@gardenhq/tick-control@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@gardenhq/tick-control/-/tick-control-2.0.0.tgz#f84fe38ca7a09b7b2b52f42945c50429ba639897"
+
+"@gardenhq/willow@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@gardenhq/willow/-/willow-6.2.0.tgz#3e4bc220a89099732746ead3385cc097bfb70186"
+
 "@glimmer/di@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@glimmer/di/-/di-0.2.0.tgz#73bfd4a6ee4148a80bf092e8a5d29bcac9d4ce7e"
@@ -27,12 +69,46 @@
   dependencies:
     "@glimmer/di" "^0.2.0"
 
+"@johncowen/api-double@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@johncowen/api-double/-/api-double-1.1.0.tgz#748a87134cd6a0a4e136d262bebbf1c444d6d291"
+  dependencies:
+    "@gardenhq/o" "^8.0.1"
+    "@gardenhq/tick-control" "^2.0.0"
+    array-range "^1.0.1"
+    cookie-parser "^1.4.3"
+    express "^4.16.2"
+    faker "^4.1.0"
+    js-yaml "^3.10.0"
+
+"@johncowen/consul-api-double@johncowen/consul-api-double#master":
+  version "0.1.0"
+  resolved "https://codeload.github.com/johncowen/consul-api-double/tar.gz/33a81ea3ee17da91cef964ecfbe0659009ce2ca2"
+
+"@johncowen/ember-cli-api-double@johncowen/ember-cli-api-double#master":
+  version "1.0.0"
+  resolved "https://codeload.github.com/johncowen/ember-cli-api-double/tar.gz/1946b56945e2fc413311a5d782f7748fab0d500c"
+  dependencies:
+    "@johncowen/api-double" "^1.1.0"
+    array-range "^1.0.1"
+    ember-cli-babel "^6.6.0"
+    js-yaml "^3.11.0"
+    pretender "^2.0.0"
+
 "@sinonjs/formatio@^2.0.0":
   version "2.0.0"
   resolved "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz#84db7e9eb5531df18a8c5e0bfb6e449e55e654b2"
   dependencies:
     samsam "1.3.0"
 
+"@types/estree@0.0.38":
+  version "0.0.38"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.38.tgz#c1be40aa933723c608820a99a373a16d215a1ca2"
+
+"@types/node@*":
+  version "10.0.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.0.8.tgz#37b4d91d4e958e4c2ba0be2b86e7ed4ff19b0858"
+
 JSONStream@^1.0.3:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
@@ -257,6 +333,10 @@ array-map@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"
 
+array-range@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/array-range/-/array-range-1.0.1.tgz#f56e46591843611c6a56f77ef02eda7c50089bfc"
+
 array-reduce@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
@@ -1023,6 +1103,10 @@ babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
+babel-standalone@^6.24.2:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-standalone/-/babel-standalone-6.26.0.tgz#15fb3d35f2c456695815ebf1ed96fe7f015b6886"
+
 babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
@@ -1391,7 +1475,7 @@ broccoli-config-replace@^1.1.2:
     debug "^2.2.0"
     fs-extra "^0.24.0"
 
-broccoli-debug@^0.6.1, broccoli-debug@^0.6.2, broccoli-debug@^0.6.3:
+broccoli-debug@^0.6.1, broccoli-debug@^0.6.2, broccoli-debug@^0.6.3, broccoli-debug@^0.6.4:
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/broccoli-debug/-/broccoli-debug-0.6.4.tgz#986eb3d2005e00e3bb91f9d0a10ab137210cd150"
   dependencies:
@@ -1842,6 +1926,10 @@ builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
+builtin-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-2.0.0.tgz#60b7ef5ae6546bd7deefa74b08b62a43a232648e"
+
 builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
@@ -2058,6 +2146,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classtrophobic-es5@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/classtrophobic-es5/-/classtrophobic-es5-0.2.1.tgz#9bbfa62a9928abf26f385440032fb49da1cda88f"
+
 clean-base-url@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clean-base-url/-/clean-base-url-1.0.0.tgz#c901cf0a20b972435b0eccd52d056824a4351b7b"
@@ -2376,6 +2468,13 @@ convert-source-map@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
 
+cookie-parser@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/cookie-parser/-/cookie-parser-1.4.3.tgz#0fe31fa19d000b95f4aadf1f53fdc2b8a203baa5"
+  dependencies:
+    cookie "0.3.1"
+    cookie-signature "1.0.6"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -2798,6 +2897,10 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+
 domain-browser@~1.1.0:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -2992,6 +3095,21 @@ ember-cli-broccoli-sane-watcher@^2.0.4:
     rsvp "^3.0.18"
     sane "^2.4.1"
 
+ember-cli-cjs-transform@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-cjs-transform/-/ember-cli-cjs-transform-1.2.0.tgz#34a0d2667673caec0248f500a954f45668027e8b"
+  dependencies:
+    broccoli-debug "^0.6.4"
+    broccoli-plugin "^1.3.0"
+    ember-cli-babel "^6.6.0"
+    fs-extra "^5.0.0"
+    hash-for-dep "^1.2.3"
+    pkg-dir "^2.0.0"
+    rollup "^0.58.1"
+    rollup-plugin-commonjs "^9.1.0"
+    rollup-plugin-node-resolve "^3.3.0"
+    username "^3.0.0"
+
 ember-cli-clipboard@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/ember-cli-clipboard/-/ember-cli-clipboard-0.9.0.tgz#c0cfce1a8a81ba1646e54bff9d41249b8bc507f7"
@@ -3270,6 +3388,14 @@ ember-cli-version-checker@^2.0.0, ember-cli-version-checker@^2.1.0:
     resolve "^1.3.3"
     semver "^5.3.0"
 
+ember-cli-yadda@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/ember-cli-yadda/-/ember-cli-yadda-0.4.0.tgz#0faaa3a4d945b3fc0974d0535e358c2897fdf170"
+  dependencies:
+    broccoli-persistent-filter "^1.4.3"
+    ember-cli-babel "^6.6.0"
+    yadda "*"
+
 ember-cli@~2.18.2:
   version "2.18.2"
   resolved "https://registry.yarnpkg.com/ember-cli/-/ember-cli-2.18.2.tgz#bb15313a15139a85248a86d203643f918ba40f57"
@@ -3896,6 +4022,10 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
+estree-walker@^0.5.1, estree-walker@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
+
 esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -3956,6 +4086,18 @@ execa@^0.10.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 execa@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.8.0.tgz#d8d76bbc1b55217ed190fd6dd49d3c774ecfc8da"
@@ -4024,7 +4166,7 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-express@^4.10.7, express@^4.12.3:
+express@^4.10.7, express@^4.12.3, express@^4.16.2:
   version "4.16.3"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
   dependencies:
@@ -4123,6 +4265,14 @@ eyes@0.1.x:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/eyes/-/eyes-0.1.8.tgz#62cf120234c683785d902348a800ef3e0cc20bc0"
 
+fake-xml-http-request@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/fake-xml-http-request/-/fake-xml-http-request-2.0.0.tgz#41a92f0ca539477700cb1dafd2df251d55dac8ff"
+
+faker@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
+
 fast-deep-equal@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
@@ -4192,6 +4342,10 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-saver@^1.3.3:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -4795,7 +4949,7 @@ hash-base@^3.0.0:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-hash-for-dep@^1.0.2:
+hash-for-dep@^1.0.2, hash-for-dep@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/hash-for-dep/-/hash-for-dep-1.2.3.tgz#5ec69fca32c23523972d52acb5bb65ffc3664cab"
   dependencies:
@@ -4960,6 +5114,10 @@ husky@^0.14.3:
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
 
+hyperhtml@^0.15.5:
+  version "0.15.10"
+  resolved "https://registry.yarnpkg.com/hyperhtml/-/hyperhtml-0.15.10.tgz#5e5f42393d4fc30cd803063fb88a5c9d97625e1c"
+
 iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -5259,6 +5417,10 @@ is-integer@^1.0.4:
   dependencies:
     is-finite "^1.0.0"
 
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+
 is-my-ip-valid@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz#7b351b8e8edd4d3995d4d066680e664d94696824"
@@ -5542,7 +5704,7 @@ js-yaml@0.3.x:
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-0.3.7.tgz#d739d8ee86461e54b354d6a7d7d1f2ad9a167f62"
 
-js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.6.1, js-yaml@^3.7.0, js-yaml@^3.9.0, js-yaml@^3.9.1:
+js-yaml@^3.10.0, js-yaml@^3.11.0, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.6.1, js-yaml@^3.7.0, js-yaml@^3.8.4, js-yaml@^3.9.0, js-yaml@^3.9.1:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
   dependencies:
@@ -6251,6 +6413,12 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+magic-string@^0.22.4:
+  version "0.22.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
+  dependencies:
+    vlq "^0.2.2"
+
 make-dir@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.2.0.tgz#6d6a49eead4aae296c53bbf3a1a008bd6c89469b"
@@ -6338,6 +6506,12 @@ media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
 memory-streams@^0.1.0:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/memory-streams/-/memory-streams-0.1.3.tgz#d9b0017b4b87f1d92f55f2745c9caacb1dc93ceb"
@@ -6382,7 +6556,7 @@ methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
-micromatch@^2.1.5, micromatch@^2.3.7:
+micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7:
   version "2.3.11"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565"
   dependencies:
@@ -6443,6 +6617,12 @@ mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -6530,6 +6710,10 @@ morgan@^1.8.1:
     on-finished "~2.3.0"
     on-headers "~1.0.1"
 
+mousetrap@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.1.tgz#2a085f5c751294c75e7e81f6ec2545b29cbf42d9"
+
 mout@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mout/-/mout-1.1.0.tgz#0b29d41e6a80fa9e2d4a5be9d602e1d9d02177f6"
@@ -6579,6 +6763,10 @@ natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
+ncp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
+
 negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
@@ -7151,6 +7339,12 @@ pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
+pkg-dir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  dependencies:
+    find-up "^2.1.0"
+
 pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
@@ -7187,6 +7381,13 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
+pretender@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pretender/-/pretender-2.0.0.tgz#5adae189f1d5b25f86113f9225df25bed54f4072"
+  dependencies:
+    fake-xml-http-request "^2.0.0"
+    route-recognizer "^0.3.3"
+
 prettier@^1.10.2:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.12.0.tgz#d26fc5894b9230de97629b39cae225b503724ce8"
@@ -7749,12 +7950,52 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-rollup@^0.41.4:
+rollup-plugin-commonjs@^9.1.0:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.3.tgz#37bfbf341292ea14f512438a56df8f9ca3ba4d67"
+  dependencies:
+    estree-walker "^0.5.1"
+    magic-string "^0.22.4"
+    resolve "^1.5.0"
+    rollup-pluginutils "^2.0.1"
+
+rollup-plugin-memory@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-memory/-/rollup-plugin-memory-2.0.0.tgz#0a8ac6b57fa0e714f89a15c3ac82bc93f89c47c5"
+
+rollup-plugin-node-resolve@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.3.0.tgz#c26d110a36812cbefa7ce117cadcd3439aa1c713"
+  dependencies:
+    builtin-modules "^2.0.0"
+    is-module "^1.0.0"
+    resolve "^1.1.6"
+
+rollup-pluginutils@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.1.1.tgz#50289c94f8d7426647b14dc9fbb93643645a8d09"
+  dependencies:
+    estree-walker "^0.5.2"
+    micromatch "^2.3.11"
+    tosource "^1.0.0"
+
+rollup@^0.41.4, rollup@^0.41.6:
   version "0.41.6"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.41.6.tgz#e0d05497877a398c104d816d2733a718a7a94e2a"
   dependencies:
     source-map-support "^0.4.0"
 
+rollup@^0.58.1:
+  version "0.58.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.58.2.tgz#2feddea8c0c022f3e74b35c48e3c21b3433803ce"
+  dependencies:
+    "@types/estree" "0.0.38"
+    "@types/node" "*"
+
+route-recognizer@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/route-recognizer/-/route-recognizer-0.3.3.tgz#1d365e27fa6995e091675f7dc940a8c00353bd29"
+
 rsvp@^3.0.14, rsvp@^3.0.16, rsvp@^3.0.17, rsvp@^3.0.18, rsvp@^3.0.21, rsvp@^3.0.6, rsvp@^3.1.0, rsvp@^3.2.1, rsvp@^3.3.3, rsvp@^3.5.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
@@ -8684,6 +8925,10 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+tosource@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tosource/-/tosource-1.0.0.tgz#42d88dd116618bcf00d6106dd5446f3427902ff1"
+
 tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.4.tgz#ec60cee38ac675063ffc97a5c18970578ee83655"
@@ -8765,7 +9010,7 @@ uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.5.tgz#0c65f15f815aa08b560a61ce8b4db7ffc3f45376"
 
-uglify-es@^3.1.3:
+uglify-es@^3.0.17, uglify-es@^3.1.3:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
   dependencies:
@@ -8812,6 +9057,10 @@ underscore@>=1.8.3:
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
 
+unfetch@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-2.1.2.tgz#684fee4d8acdb135bdb26c0364c642fc326ca95b"
+
 union-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
@@ -8891,6 +9140,13 @@ username@^1.0.1:
   dependencies:
     meow "^3.4.0"
 
+username@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/username/-/username-3.0.0.tgz#b3dba982a72b4ce59d52f159fa1aeba266af5fc8"
+  dependencies:
+    execa "^0.7.0"
+    mem "^1.1.0"
+
 util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -8941,6 +9197,10 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vlq@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+
 vm-browserify@~0.0.1:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@@ -9085,6 +9345,10 @@ xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
 
+xhr2@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.4.tgz#7f87658847716db5026323812f818cadab387a5f"
+
 xmldom@^0.1.19:
   version "0.1.27"
   resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
@@ -9101,6 +9365,10 @@ y18n@^3.2.0, y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
 
+yadda@*:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/yadda/-/yadda-1.4.0.tgz#75b87196f4a864c4131705131fbbc2df3367b58f"
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"

From 4fe4ba40b4b64fac48f8f597d8ca6898acce605b Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 25 May 2018 15:14:37 +0100
Subject: [PATCH 10/26] Bump

---
 ui-v2/yarn.lock | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock
index 9586068e29..edf11ee522 100644
--- a/ui-v2/yarn.lock
+++ b/ui-v2/yarn.lock
@@ -69,9 +69,9 @@
   dependencies:
     "@glimmer/di" "^0.2.0"
 
-"@johncowen/api-double@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@johncowen/api-double/-/api-double-1.1.0.tgz#748a87134cd6a0a4e136d262bebbf1c444d6d291"
+"@johncowen/api-double@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@johncowen/api-double/-/api-double-1.1.1.tgz#e6e7dbd54bb9615ddf4bd7293cef976cffe640ef"
   dependencies:
     "@gardenhq/o" "^8.0.1"
     "@gardenhq/tick-control" "^2.0.0"
@@ -87,9 +87,9 @@
 
 "@johncowen/ember-cli-api-double@johncowen/ember-cli-api-double#master":
   version "1.0.0"
-  resolved "https://codeload.github.com/johncowen/ember-cli-api-double/tar.gz/1946b56945e2fc413311a5d782f7748fab0d500c"
+  resolved "https://codeload.github.com/johncowen/ember-cli-api-double/tar.gz/6819bd1c8026f5623a2c32cd45f704f76887771e"
   dependencies:
-    "@johncowen/api-double" "^1.1.0"
+    "@johncowen/api-double" "^1.1.1"
     array-range "^1.0.1"
     ember-cli-babel "^6.6.0"
     js-yaml "^3.11.0"

From c2bd21d8d9f8555ef0920a30d26dac7be82d3923 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 1 Jun 2018 16:04:56 +0100
Subject: [PATCH 11/26] Move testing bits to hashicorp org, also..

Go with `rsync` over `cp` for putting the api double into public for the
moment
---
 ui-v2/package.json         |  6 +++---
 ui-v2/tests/helpers/api.js |  2 +-
 ui-v2/tests/steps.js       |  2 +-
 ui-v2/yarn.lock            | 20 ++++++++++----------
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/ui-v2/package.json b/ui-v2/package.json
index 86db291b19..0ca4f53f4b 100644
--- a/ui-v2/package.json
+++ b/ui-v2/package.json
@@ -17,7 +17,7 @@
     "test": "ember test",
     "test:view": "ember test --server",
     "precommit": "lint-staged",
-    "postinstall": "cp -R ./node_modules/@johncowen/consul-api-double ./public/consul-api-double"
+    "postinstall": "rsync -aq ./node_modules/@hashicorp/consul-api-double/ ./public/consul-api-double/"
   },
   "lint-staged": {
     "{app,config,lib,server,tests}/**/*.js": [
@@ -33,8 +33,8 @@
 
   },
   "devDependencies": {
-    "@johncowen/ember-cli-api-double": "johncowen/ember-cli-api-double#master",
-    "@johncowen/consul-api-double": "johncowen/consul-api-double#master",
+    "@hashicorp/ember-cli-api-double": "^1.0.2",
+    "@hashicorp/consul-api-double": "^1.0.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "base64-js": "^1.3.0",
     "broccoli-asset-rev": "^2.4.5",
diff --git a/ui-v2/tests/helpers/api.js b/ui-v2/tests/helpers/api.js
index 902f039358..800672103e 100644
--- a/ui-v2/tests/helpers/api.js
+++ b/ui-v2/tests/helpers/api.js
@@ -1,4 +1,4 @@
-import getAPI from '@johncowen/ember-cli-api-double';
+import getAPI from '@hashicorp/ember-cli-api-double';
 import setCookies from 'consul-ui/tests/helpers/set-cookies';
 import typeToURL from 'consul-ui/tests/helpers/type-to-url';
 export default getAPI('/consul-api-double', setCookies, typeToURL);
diff --git a/ui-v2/tests/steps.js b/ui-v2/tests/steps.js
index 87f75bac91..b948683b61 100644
--- a/ui-v2/tests/steps.js
+++ b/ui-v2/tests/steps.js
@@ -1,7 +1,7 @@
 /* eslint no-console: "off" */
 import yadda from './helpers/yadda';
 import { currentURL, click, triggerKeyEvent } from '@ember/test-helpers';
-import getDictionary from '@johncowen/ember-cli-api-double/dictionary';
+import getDictionary from '@hashicorp/ember-cli-api-double/dictionary';
 import pages from 'consul-ui/tests/pages';
 import api from 'consul-ui/tests/helpers/api';
 
diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock
index edf11ee522..f55d3c13a0 100644
--- a/ui-v2/yarn.lock
+++ b/ui-v2/yarn.lock
@@ -69,9 +69,9 @@
   dependencies:
     "@glimmer/di" "^0.2.0"
 
-"@johncowen/api-double@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@johncowen/api-double/-/api-double-1.1.1.tgz#e6e7dbd54bb9615ddf4bd7293cef976cffe640ef"
+"@hashicorp/api-double@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/api-double/-/api-double-1.1.0.tgz#299d3c560090dfe9c335db64d63c3ef0c5da79c4"
   dependencies:
     "@gardenhq/o" "^8.0.1"
     "@gardenhq/tick-control" "^2.0.0"
@@ -81,15 +81,15 @@
     faker "^4.1.0"
     js-yaml "^3.10.0"
 
-"@johncowen/consul-api-double@johncowen/consul-api-double#master":
-  version "0.1.0"
-  resolved "https://codeload.github.com/johncowen/consul-api-double/tar.gz/33a81ea3ee17da91cef964ecfbe0659009ce2ca2"
-
-"@johncowen/ember-cli-api-double@johncowen/ember-cli-api-double#master":
+"@hashicorp/consul-api-double@^1.0.0":
   version "1.0.0"
-  resolved "https://codeload.github.com/johncowen/ember-cli-api-double/tar.gz/6819bd1c8026f5623a2c32cd45f704f76887771e"
+  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.0.0.tgz#1fffd85121516fe31dad32a196367ae9087f9838"
+
+"@hashicorp/ember-cli-api-double@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@hashicorp/ember-cli-api-double/-/ember-cli-api-double-1.0.2.tgz#684d418cc2a981254cc23035ceb452c86f0cd934"
   dependencies:
-    "@johncowen/api-double" "^1.1.1"
+    "@hashicorp/api-double" "^1.1.0"
     array-range "^1.0.1"
     ember-cli-babel "^6.6.0"
     js-yaml "^3.11.0"

From 16fc7ebd8b8d0c97c6de03182da21bcc108f3565 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 1 Jun 2018 16:42:54 +0100
Subject: [PATCH 12/26] Remove some pauses

---
 ui-v2/tests/acceptance/components/kv-filter.feature | 1 -
 ui-v2/tests/acceptance/dc/nodes/services.feature    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/ui-v2/tests/acceptance/components/kv-filter.feature b/ui-v2/tests/acceptance/components/kv-filter.feature
index eda504c4b3..ebe740c466 100644
--- a/ui-v2/tests/acceptance/components/kv-filter.feature
+++ b/ui-v2/tests/acceptance/components/kv-filter.feature
@@ -16,7 +16,6 @@ Feature: components / kv-filter
     ---
     s: [Text]
     ---
-    And pause for 3000
     And I see 1 [Model] model with the name "[Text]"
 
   Where:
diff --git a/ui-v2/tests/acceptance/dc/nodes/services.feature b/ui-v2/tests/acceptance/dc/nodes/services.feature
index 1c6383ae94..d7c6713312 100644
--- a/ui-v2/tests/acceptance/dc/nodes/services.feature
+++ b/ui-v2/tests/acceptance/dc/nodes/services.feature
@@ -13,5 +13,4 @@ Feature: Search services within nodes by name and port
     ---
     When I click services on the tabs
     And I see servicesIsSelected on the tabs
-    And then pause for 3000
 

From f1b25c009ecc0b227fefdf6e9b54e12886703b00 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Fri, 1 Jun 2018 18:06:07 +0100
Subject: [PATCH 13/26] WIP: Make sure I can get the values I need to calculate
 sizing

`rect.top` is zero until the tab panel becomes visible, resize will need
to be called when the tab is clicked also
---
 ui-v2/app/components/tabular-collection.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js
index a5cda787bc..06d7a2793d 100644
--- a/ui-v2/app/components/tabular-collection.js
+++ b/ui-v2/app/components/tabular-collection.js
@@ -101,7 +101,7 @@ const change = function(e) {
       // therefore we don't need to calculate
       if (e.currentTarget.getAttribute('id') !== 'actions_close') {
         const $tr = closest('tr', e.currentTarget);
-        const $group = [...$('~ ul', e.currentTarget)][0];
+        const $group = [...$$('~ ul', e.currentTarget)][0];
         const $footer = [...$$('footer[role="contentinfo"]')][0];
         const groupRect = $group.getBoundingClientRect();
         const footerRect = $footer.getBoundingClientRect();
@@ -166,14 +166,18 @@ export default Component.extend(SlotsMixin, {
   },
   resize: function(e) {
     const $tbody = [...$$('tbody', this.element)][0];
-    if ($tbody) {
+    const $appContent = [...$$('main > div')][0];
+    if ($appContent) {
+      // TODO: This is zero if the tabular collection is in a tab
+      // need to make sure this also is calculated when
+      // things become visible
       const rect = $tbody.getBoundingClientRect();
       const $footer = [...$$('footer[role="contentinfo"]')][0];
       const space = rect.top + $footer.clientHeight;
       const height = new Number(e.detail.height - space);
       this.set('height', Math.max(0, height));
       // TODO: The row height should auto calculate properly from the CSS
-      this['cell-layout'] = new ZIndexedGrid($tbody.clientWidth, 50);
+      this['cell-layout'] = new ZIndexedGrid($appContent.clientWidth, 50);
       this.updateItems();
       this.updateScrollPosition();
     }

From 4b46caf77a66c0da61fc00e147bf92c4883f30fd Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Mon, 4 Jun 2018 10:48:40 +0100
Subject: [PATCH 14/26] Make sure `didAppear` and therefore `resize` is called
 on change

Tables need to calculate their sizing depending on other things in the
DOM. When a table is in a tab panel, some of these things aren't visible
and therefore some values are zero during `didInsertElement`.

This commit ensures that the resize calc of the table is performed when
it's parent tab is clicked (and therefore when the table 'appears')
---
 ui-v2/app/components/tabular-collection.js       | 16 +++++++---------
 ui-v2/app/controllers/dc/nodes/show.js           | 16 ++++++++++++++++
 ui-v2/app/templates/dc/nodes/show.hbs            |  2 +-
 ui-v2/app/utils/get-component-factory.js         |  9 +++++++++
 ui-v2/app/utils/qsa-factory.js                   |  5 +++++
 .../unit/utils/get-component-factory-test.js     | 10 ++++++++++
 ui-v2/tests/unit/utils/qsa-factory-test.js       | 10 ++++++++++
 7 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 ui-v2/app/utils/get-component-factory.js
 create mode 100644 ui-v2/app/utils/qsa-factory.js
 create mode 100644 ui-v2/tests/unit/utils/get-component-factory-test.js
 create mode 100644 ui-v2/tests/unit/utils/qsa-factory-test.js

diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js
index 06d7a2793d..8facc6c716 100644
--- a/ui-v2/app/components/tabular-collection.js
+++ b/ui-v2/app/components/tabular-collection.js
@@ -4,6 +4,7 @@ import identity from 'ember-collection/utils/identity';
 import Grid from 'ember-collection/layouts/grid';
 import SlotsMixin from 'ember-block-slots';
 import style from 'ember-computed-style';
+import qsaFactory from 'consul-ui/utils/qsa-factory';
 
 import { computed, get, set } from '@ember/object';
 /**
@@ -18,11 +19,8 @@ import { computed, get, set } from '@ember/object';
  * in the future
  */
 
-// basic DOM selecting utility, emeber doesn't like you using `$`
-// hence `$$`
-const $$ = function(sel, context = document) {
-  return context.querySelectorAll(sel);
-};
+// ember doesn't like you using `$` hence `$$`
+const $$ = qsaFactory();
 // basic pseudo CustomEvent interface
 // TODO: use actual custom events once I've reminded
 // myself re: support/polyfills
@@ -159,18 +157,18 @@ export default Component.extend(SlotsMixin, {
     // TODO: Consider moving all DOM lookups here
     // this seems to be the earliest place I can get them
     window.addEventListener('resize', this.handler);
-    this.handler();
+    this.didAppear();
   },
   willDestroyElement: function() {
     window.removeEventListener('resize', this.handler);
   },
+  didAppear: function() {
+    this.handler();
+  },
   resize: function(e) {
     const $tbody = [...$$('tbody', this.element)][0];
     const $appContent = [...$$('main > div')][0];
     if ($appContent) {
-      // TODO: This is zero if the tabular collection is in a tab
-      // need to make sure this also is calculated when
-      // things become visible
       const rect = $tbody.getBoundingClientRect();
       const $footer = [...$$('footer[role="contentinfo"]')][0];
       const space = rect.top + $footer.clientHeight;
diff --git a/ui-v2/app/controllers/dc/nodes/show.js b/ui-v2/app/controllers/dc/nodes/show.js
index 06c5c4004d..0884b58489 100644
--- a/ui-v2/app/controllers/dc/nodes/show.js
+++ b/ui-v2/app/controllers/dc/nodes/show.js
@@ -1,7 +1,11 @@
 import Controller from '@ember/controller';
 import { get, set } from '@ember/object';
+import { getOwner } from '@ember/application';
 import WithFiltering from 'consul-ui/mixins/with-filtering';
+import qsaFactory from 'consul-ui/utils/qsa-factory';
+import getComponentFactory from 'consul-ui/utils/get-component-factory';
 
+const $$ = qsaFactory();
 export default Controller.extend(WithFiltering, {
   queryParams: {
     s: {
@@ -26,6 +30,18 @@ export default Controller.extend(WithFiltering, {
     );
   },
   actions: {
+    change: function(e) {
+      set(this, 'selectedTab', e.target.value);
+      const getComponent = getComponentFactory(getOwner(this));
+      // Ensure tabular-collections sizing is recalculated
+      // now it is visible in the DOM
+      [...$$('.tab-section input[type="radio"]:checked + div table')].forEach(function(item) {
+        const component = getComponent(item);
+        if (component && typeof component.didAppear === 'function') {
+          getComponent(item).didAppear();
+        }
+      });
+    },
     sortChecksByImportance: function(a, b) {
       const statusA = get(a, 'Status');
       const statusB = get(b, 'Status');
diff --git a/ui-v2/app/templates/dc/nodes/show.hbs b/ui-v2/app/templates/dc/nodes/show.hbs
index 66764222c5..78586c65ee 100644
--- a/ui-v2/app/templates/dc/nodes/show.hbs
+++ b/ui-v2/app/templates/dc/nodes/show.hbs
@@ -45,7 +45,7 @@
                 )
             ) as |panel|
         }}
-            {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab 'health-checks') panel.id) onchange=(action (mut selectedTab) value="target.value")}}
+            {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab 'health-checks') panel.id) onchange=(action "change")}}
                 {{partial panel.partial}}
             {{/tab-section}}
         {{/each}}
diff --git a/ui-v2/app/utils/get-component-factory.js b/ui-v2/app/utils/get-component-factory.js
new file mode 100644
index 0000000000..5ebc174ca7
--- /dev/null
+++ b/ui-v2/app/utils/get-component-factory.js
@@ -0,0 +1,9 @@
+export default function(owner, key = '-view-registry:main') {
+  const components = owner.lookup(key);
+  return function(el) {
+    const id = el.getAttribute('id');
+    if (id) {
+      return components[id];
+    }
+  };
+}
diff --git a/ui-v2/app/utils/qsa-factory.js b/ui-v2/app/utils/qsa-factory.js
new file mode 100644
index 0000000000..ff5770a349
--- /dev/null
+++ b/ui-v2/app/utils/qsa-factory.js
@@ -0,0 +1,5 @@
+export default function(doc = document) {
+  return function(sel, context = doc) {
+    return context.querySelectorAll(sel);
+  };
+}
diff --git a/ui-v2/tests/unit/utils/get-component-factory-test.js b/ui-v2/tests/unit/utils/get-component-factory-test.js
new file mode 100644
index 0000000000..ad39e3ae23
--- /dev/null
+++ b/ui-v2/tests/unit/utils/get-component-factory-test.js
@@ -0,0 +1,10 @@
+import getComponentFactory from 'consul-ui/utils/get-component-factory';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | get component factory');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = getComponentFactory({ lookup: function() {} });
+  assert.ok(result);
+});
diff --git a/ui-v2/tests/unit/utils/qsa-factory-test.js b/ui-v2/tests/unit/utils/qsa-factory-test.js
new file mode 100644
index 0000000000..76ed1ea144
--- /dev/null
+++ b/ui-v2/tests/unit/utils/qsa-factory-test.js
@@ -0,0 +1,10 @@
+import qsaFactory from 'consul-ui/utils/qsa-factory';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | qsa factory');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = qsaFactory();
+  assert.ok(result);
+});

From 46419ac4666ed01b2ed88a99335281fc3f23b3a4 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Mon, 4 Jun 2018 14:52:39 +0100
Subject: [PATCH 15/26] QSA doesn't like searching with sibling selectors, make
 a `sibling`

---
 ui-v2/app/components/tabular-collection.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui-v2/app/components/tabular-collection.js b/ui-v2/app/components/tabular-collection.js
index 8facc6c716..180652dc21 100644
--- a/ui-v2/app/components/tabular-collection.js
+++ b/ui-v2/app/components/tabular-collection.js
@@ -70,6 +70,16 @@ const closest = function(sel, el) {
     return;
   }
 };
+const sibling = function(el, name) {
+  let sibling = el;
+  while ((sibling = sibling.nextSibling)) {
+    if (sibling.nodeType === 1) {
+      if (sibling.nodeName.toLowerCase() === name) {
+        return sibling;
+      }
+    }
+  }
+};
 /**
  * The tabular-collection can contain 'actions' the UI for which
  * uses dropdown 'action groups', so a group of different actions.
@@ -99,7 +109,7 @@ const change = function(e) {
       // therefore we don't need to calculate
       if (e.currentTarget.getAttribute('id') !== 'actions_close') {
         const $tr = closest('tr', e.currentTarget);
-        const $group = [...$$('~ ul', e.currentTarget)][0];
+        const $group = sibling(e.currentTarget, 'ul');
         const $footer = [...$$('footer[role="contentinfo"]')][0];
         const groupRect = $group.getBoundingClientRect();
         const footerRect = $footer.getBoundingClientRect();

From 5e5fffe30098125de5b93b12e5ba30fd7b3f506a Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Mon, 4 Jun 2018 14:53:51 +0100
Subject: [PATCH 16/26] Add some delete testing to KV and ACL

---
 ui-v2/tests/acceptance/dc/acls/delete.feature | 17 +++++++++++
 ui-v2/tests/acceptance/dc/acls/update.feature |  2 +-
 ui-v2/tests/acceptance/dc/kvs/delete.feature  | 16 ++++++++++
 ui-v2/tests/acceptance/dc/kvs/update.feature  | 29 ++++++++++---------
 .../acceptance/steps/dc/acls/delete-steps.js  | 10 +++++++
 .../acceptance/steps/dc/kvs/delete-steps.js   | 10 +++++++
 ui-v2/tests/pages/dc/acls/index.js            |  7 +++--
 ui-v2/tests/pages/dc/kv/index.js              | 10 +++++--
 ui-v2/tests/steps.js                          | 25 ++++++++++++++--
 9 files changed, 105 insertions(+), 21 deletions(-)
 create mode 100644 ui-v2/tests/acceptance/dc/acls/delete.feature
 create mode 100644 ui-v2/tests/acceptance/dc/kvs/delete.feature
 create mode 100644 ui-v2/tests/acceptance/steps/dc/acls/delete-steps.js
 create mode 100644 ui-v2/tests/acceptance/steps/dc/kvs/delete-steps.js

diff --git a/ui-v2/tests/acceptance/dc/acls/delete.feature b/ui-v2/tests/acceptance/dc/acls/delete.feature
new file mode 100644
index 0000000000..9a59d1ec0b
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/acls/delete.feature
@@ -0,0 +1,17 @@
+@setupApplicationTest
+Feature: dc / acls / delete: ACL Delete
+  Scenario: Delete ACL
+    Given 1 datacenter model with the value "datacenter"
+    And 1 acl model from yaml
+    ---
+      Name: something
+      ID: key
+    ---
+    When I visit the acls page for yaml
+    ---
+      dc: datacenter
+    ---
+    And I click actions on the acls
+    And I click delete on the acls
+    And I click confirmDelete on the acls
+    Then a PUT request is made to "/v1/acl/destroy/key?dc=datacenter"
diff --git a/ui-v2/tests/acceptance/dc/acls/update.feature b/ui-v2/tests/acceptance/dc/acls/update.feature
index 84385f51e0..1ca2a93272 100644
--- a/ui-v2/tests/acceptance/dc/acls/update.feature
+++ b/ui-v2/tests/acceptance/dc/acls/update.feature
@@ -1,5 +1,5 @@
 @setupApplicationTest
-Feature: ACL Update
+Feature: dc / acls / update: ACL Update
   Scenario: Update to [Name], [Type], [Rules]
     Given 1 datacenter model with the value "datacenter"
     And 1 acl model from yaml
diff --git a/ui-v2/tests/acceptance/dc/kvs/delete.feature b/ui-v2/tests/acceptance/dc/kvs/delete.feature
new file mode 100644
index 0000000000..324240b9c9
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/kvs/delete.feature
@@ -0,0 +1,16 @@
+@setupApplicationTest
+Feature: dc / kvs / delete: KV Delete
+  Scenario: Delete ACL
+    Given 1 datacenter model with the value "datacenter"
+    And 1 kv model from yaml
+    ---
+      - key-name
+    ---
+    When I visit the kvs page for yaml
+    ---
+      dc: datacenter
+    ---
+    And I click actions on the kvs
+    And I click delete on the kvs
+    And I click confirmDelete on the kvs
+    Then a DELETE request is made to "/v1/kv/key-name?dc=datacenter"
diff --git a/ui-v2/tests/acceptance/dc/kvs/update.feature b/ui-v2/tests/acceptance/dc/kvs/update.feature
index 3ff81466a0..5eb92fd28f 100644
--- a/ui-v2/tests/acceptance/dc/kvs/update.feature
+++ b/ui-v2/tests/acceptance/dc/kvs/update.feature
@@ -1,5 +1,5 @@
 @setupApplicationTest
-Feature: KV Update
+Feature: dc / kvs / update: KV Update
   Scenario: Update to [Name] change value to [Value]
     Given 1 datacenter model with the value "datacenter"
     And 1 kv model from yaml
@@ -18,15 +18,18 @@ Feature: KV Update
     And I submit
     Then a PUT request is made to "/v1/kv/[Name]?dc=datacenter" with the body "[Value]"
   Where:
-      ------------------------------------
-      | Name              | Value        |
-      # | key               | value        |
-      # | key-name          | a value      |
-      | folder/key-name   | a value      |
-      ------------------------------------
-# @ignore
-  # Scenario: Rules can be edited/updated
-    # Then ok
-# @ignore
-  # Scenario: The feedback dialog says success or failure
-    # Then ok
+      --------------------------------------------
+      | Name                      | Value        |
+      | key                       | value        |
+      | key-name                  | a value      |
+      | folder/key-name           | a value      |
+      --------------------------------------------
+@ignore
+  Scenario: The feedback dialog says success or failure
+    Then ok
+@ignore
+  Scenario: KV's with spaces are saved correctly
+    Then ok
+@ignore
+  Scenario: KV's with returns are saved correctly
+    Then ok
diff --git a/ui-v2/tests/acceptance/steps/dc/acls/delete-steps.js b/ui-v2/tests/acceptance/steps/dc/acls/delete-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/acls/delete-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/kvs/delete-steps.js b/ui-v2/tests/acceptance/steps/dc/kvs/delete-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/kvs/delete-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/pages/dc/acls/index.js b/ui-v2/tests/pages/dc/acls/index.js
index be5881be83..7b03bb7586 100644
--- a/ui-v2/tests/pages/dc/acls/index.js
+++ b/ui-v2/tests/pages/dc/acls/index.js
@@ -3,9 +3,12 @@ import { create, visitable, collection, attribute, clickable } from 'ember-cli-p
 import filter from 'consul-ui/tests/pages/components/acl-filter';
 export default create({
   visit: visitable('/:dc/acls'),
-  acls: collection('[data-test-acl]', {
-    name: attribute('data-test-acl'),
+  acls: collection('[data-test-tabular-row]', {
+    name: attribute('data-test-acl', '[data-test-acl]'),
     acl: clickable('a'),
+    actions: clickable('label'),
+    delete: clickable('li:last-child a'),
+    confirmDelete: clickable('button.type-delete'),
   }),
   filter: filter,
 });
diff --git a/ui-v2/tests/pages/dc/kv/index.js b/ui-v2/tests/pages/dc/kv/index.js
index 785264ec83..08c2237787 100644
--- a/ui-v2/tests/pages/dc/kv/index.js
+++ b/ui-v2/tests/pages/dc/kv/index.js
@@ -1,8 +1,12 @@
-import { create, visitable, collection, attribute } from 'ember-cli-page-object';
+import { create, visitable, collection, attribute, clickable } from 'ember-cli-page-object';
 
 export default create({
   visit: visitable('/:dc/kv'),
-  kvs: collection('[data-test-kv]', {
-    name: attribute('data-test-kv'),
+  kvs: collection('[data-test-tabular-row]', {
+    name: attribute('data-test-kv', '[data-test-kv]'),
+    kv: clickable('a'),
+    actions: clickable('label'),
+    delete: clickable('li:last-child a'),
+    confirmDelete: clickable('button.type-delete'),
   }),
 });
diff --git a/ui-v2/tests/steps.js b/ui-v2/tests/steps.js
index b948683b61..2bdb27180b 100644
--- a/ui-v2/tests/steps.js
+++ b/ui-v2/tests/steps.js
@@ -73,10 +73,18 @@ export default function(assert) {
       })
       .when('I click $prop on the $component', function(prop, component) {
         // Collection
+        var obj;
         if (typeof currentPage[component].objectAt === 'function') {
-          return currentPage[component].objectAt(0)[prop]();
+          obj = currentPage[component].objectAt(0);
         } else {
-          return currentPage[component][prop]();
+          obj = currentPage[component];
+        }
+        const func = obj[prop].bind(obj);
+        try {
+          return func();
+        } catch (e) {
+          console.error(e);
+          throw new Error(`The '${prop}' property on the '${component}' page object doesn't exist`);
         }
       })
       .when('I submit', function(selector) {
@@ -169,6 +177,19 @@ export default function(assert) {
           `Expected the request body to be ${body} but was ${request.requestBody}`
         );
       })
+      .then('a $method request is made to "$url"', function(method, url) {
+        const request = api.server.history[api.server.history.length - 2];
+        assert.equal(
+          request.method,
+          method,
+          `Expected the request method to be ${method} but was ${request.method}`
+        );
+        assert.equal(
+          request.url,
+          url,
+          `Expected the request url to be ${url} but was ${request.url}`
+        );
+      })
       .then('the url should be $url', function(url) {
         const current = currentURL();
         assert.equal(current, url, `Expected the url to be ${url} but was ${current}`);

From 7bd90886770fe3f47af56c55a783a09c44d02003 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Mon, 4 Jun 2018 15:00:50 +0100
Subject: [PATCH 17/26] Upgrade consul-api-double

---
 ui-v2/package.json | 6 ++----
 ui-v2/yarn.lock    | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/ui-v2/package.json b/ui-v2/package.json
index 0ca4f53f4b..13642f549c 100644
--- a/ui-v2/package.json
+++ b/ui-v2/package.json
@@ -29,12 +29,10 @@
       "git add"
     ]
   },
-  "dependencies": {
-
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@hashicorp/ember-cli-api-double": "^1.0.2",
     "@hashicorp/consul-api-double": "^1.0.0",
+    "@hashicorp/ember-cli-api-double": "^1.0.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "base64-js": "^1.3.0",
     "broccoli-asset-rev": "^2.4.5",
diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock
index f55d3c13a0..c760ef53b3 100644
--- a/ui-v2/yarn.lock
+++ b/ui-v2/yarn.lock
@@ -82,8 +82,8 @@
     js-yaml "^3.10.0"
 
 "@hashicorp/consul-api-double@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.0.0.tgz#1fffd85121516fe31dad32a196367ae9087f9838"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.1.0.tgz#658f9e89208fa23f251ca66c66aeb7241a13f23f"
 
 "@hashicorp/ember-cli-api-double@^1.0.2":
   version "1.0.2"

From 950a704b746010b5ec83bf4762b5cec59843f5cb Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Mon, 4 Jun 2018 15:47:51 +0100
Subject: [PATCH 18/26] Add a couple more unit tests for the utils folder

---
 .../unit/utils/get-component-factory-test.js  | 46 ++++++++-
 ui-v2/tests/unit/utils/hasStatus-test.js      | 19 ++++
 ui-v2/tests/unit/utils/qsa-factory-test.js    | 32 ++++++-
 ui-v2/tests/unit/utils/sumOfUnhealthy-test.js | 93 +++++++++++++++++++
 4 files changed, 182 insertions(+), 8 deletions(-)
 create mode 100644 ui-v2/tests/unit/utils/hasStatus-test.js
 create mode 100644 ui-v2/tests/unit/utils/sumOfUnhealthy-test.js

diff --git a/ui-v2/tests/unit/utils/get-component-factory-test.js b/ui-v2/tests/unit/utils/get-component-factory-test.js
index ad39e3ae23..16be5c677e 100644
--- a/ui-v2/tests/unit/utils/get-component-factory-test.js
+++ b/ui-v2/tests/unit/utils/get-component-factory-test.js
@@ -3,8 +3,46 @@ import { module, test } from 'qunit';
 
 module('Unit | Utility | get component factory');
 
-// Replace this with your real tests.
-test('it works', function(assert) {
-  let result = getComponentFactory({ lookup: function() {} });
-  assert.ok(result);
+test("it uses lookup to locate the instance of the component based on the DOM element's id", function(assert) {
+  const expected = 'name';
+  let getComponent = getComponentFactory({
+    lookup: function() {
+      return { id: expected };
+    },
+  });
+  assert.equal(typeof getComponent, 'function', 'returns a function');
+  const actual = getComponent({
+    getAttribute: function(name) {
+      return 'id';
+    },
+  });
+  assert.equal(actual, expected, 'performs a lookup based on the id');
+});
+test("it returns null if it can't find it", function(assert) {
+  const expected = null;
+  let getComponent = getComponentFactory({
+    lookup: function() {
+      return { id: '' };
+    },
+  });
+  const actual = getComponent({
+    getAttribute: function(name) {
+      return 'non-existent';
+    },
+  });
+  assert.equal(actual, expected);
+});
+test('it returns null if there is no id', function(assert) {
+  const expected = null;
+  let getComponent = getComponentFactory({
+    lookup: function() {
+      return { id: '' };
+    },
+  });
+  const actual = getComponent({
+    getAttribute: function(name) {
+      return;
+    },
+  });
+  assert.equal(actual, expected);
 });
diff --git a/ui-v2/tests/unit/utils/hasStatus-test.js b/ui-v2/tests/unit/utils/hasStatus-test.js
new file mode 100644
index 0000000000..6ddfe37a1d
--- /dev/null
+++ b/ui-v2/tests/unit/utils/hasStatus-test.js
@@ -0,0 +1,19 @@
+import hasStatus from 'consul-ui/utils/hasStatus';
+import { module, test, skip } from 'qunit';
+
+module('Unit | Utility | has status');
+
+const checks = {
+  filterBy: function(prop, value) {
+    return { length: 0 };
+  },
+};
+test('it returns true when passing an empty string (therefore "all")', function(assert) {
+  assert.ok(hasStatus(checks, ''));
+});
+test('it returns false when passing an actual status', function(assert) {
+  ['passing', 'critical', 'warning'].forEach(function(item) {
+    assert.ok(!hasStatus(checks, item), `, with ${item}`);
+  });
+});
+skip('it works as a factory, passing ember `get` in to create the function');
diff --git a/ui-v2/tests/unit/utils/qsa-factory-test.js b/ui-v2/tests/unit/utils/qsa-factory-test.js
index 76ed1ea144..feadc8c3f5 100644
--- a/ui-v2/tests/unit/utils/qsa-factory-test.js
+++ b/ui-v2/tests/unit/utils/qsa-factory-test.js
@@ -3,8 +3,32 @@ import { module, test } from 'qunit';
 
 module('Unit | Utility | qsa factory');
 
-// Replace this with your real tests.
-test('it works', function(assert) {
-  let result = qsaFactory();
-  assert.ok(result);
+test('querySelectorAll is called on `document` when called with document', function(assert) {
+  assert.expect(2);
+  const expected = 'html';
+  const $$ = qsaFactory({
+    querySelectorAll: function(sel) {
+      assert.equal(sel, expected);
+      return true;
+    },
+  });
+  assert.ok($$(expected));
+});
+test('querySelectorAll is called on `context` when called with context', function(assert) {
+  assert.expect(2);
+  const expected = 'html';
+  const context = {
+    querySelectorAll: function(sel) {
+      assert.equal(sel, expected);
+      return true;
+    },
+  };
+  const $$ = qsaFactory({
+    // this should never be called
+    querySelectorAll: function(sel) {
+      assert.equal(sel, expected);
+      return false;
+    },
+  });
+  assert.ok($$(expected, context));
 });
diff --git a/ui-v2/tests/unit/utils/sumOfUnhealthy-test.js b/ui-v2/tests/unit/utils/sumOfUnhealthy-test.js
new file mode 100644
index 0000000000..a8766db048
--- /dev/null
+++ b/ui-v2/tests/unit/utils/sumOfUnhealthy-test.js
@@ -0,0 +1,93 @@
+import sumOfUnhealthy from 'consul-ui/utils/sumOfUnhealthy';
+import { module, test, skip } from 'qunit';
+
+module('Unit | Utility | sum of unhealthy');
+
+test('it returns the correct single count', function(assert) {
+  const expected = 1;
+  [
+    [
+      {
+        Status: 'critical',
+      },
+    ],
+    [
+      {
+        Status: 'warning',
+      },
+    ],
+  ].forEach(function(checks) {
+    const actual = sumOfUnhealthy(checks);
+    assert.equal(actual, expected);
+  });
+});
+test('it returns the correct single count when there are none', function(assert) {
+  const expected = 0;
+  [
+    [
+      {
+        Status: 'passing',
+      },
+      {
+        Status: 'passing',
+      },
+      {
+        Status: 'passing',
+      },
+      {
+        Status: 'passing',
+      },
+    ],
+    [
+      {
+        Status: 'passing',
+      },
+    ],
+  ].forEach(function(checks) {
+    const actual = sumOfUnhealthy(checks);
+    assert.equal(actual, expected);
+  });
+});
+test('it returns the correct multiple count', function(assert) {
+  const expected = 3;
+  [
+    [
+      {
+        Status: 'critical',
+      },
+      {
+        Status: 'warning',
+      },
+      {
+        Status: 'warning',
+      },
+      {
+        Status: 'passing',
+      },
+    ],
+    [
+      {
+        Status: 'passing',
+      },
+      {
+        Status: 'critical',
+      },
+      {
+        Status: 'passing',
+      },
+      {
+        Status: 'warning',
+      },
+      {
+        Status: 'warning',
+      },
+      {
+        Status: 'passing',
+      },
+    ],
+  ].forEach(function(checks) {
+    const actual = sumOfUnhealthy(checks);
+    assert.equal(actual, expected);
+  });
+});
+skip('it works as a factory, passing ember `get` in to create the function');

From ae2da814d8d9ab2fa630eca47cd8f1ff9fe3a1e3 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 7 Jun 2018 12:11:24 +0100
Subject: [PATCH 19/26] Tweak vocab

---
 ui-v2/tests/acceptance/components/acl-filter.feature | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui-v2/tests/acceptance/components/acl-filter.feature b/ui-v2/tests/acceptance/components/acl-filter.feature
index b5659f9855..4502db4515 100644
--- a/ui-v2/tests/acceptance/components/acl-filter.feature
+++ b/ui-v2/tests/acceptance/components/acl-filter.feature
@@ -13,15 +13,15 @@ Feature: Acl Filter
     And I see allIsSelected on the filter
 
     When I click management on the filter
-    And I see managementIsSelected on the filter
+    Then I see managementIsSelected on the filter
     And I see 1 [Model] model
 
     When I click client on the filter
-    And I see clientIsSelected on the filter
+    Then I see clientIsSelected on the filter
     And I see 1 [Model] model
 
     When I click all on the filter
-    And I see allIsSelected on the filter
+    Then I see allIsSelected on the filter
     Then I type with yaml
     ---
     s: Anonymous Token

From 947417689faae45d466957066d338505fc6ba86a Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 7 Jun 2018 12:17:45 +0100
Subject: [PATCH 20/26] Make sure KV clicking is tested (WIP)

---
 ui-v2/tests/acceptance/page-navigation.feature | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui-v2/tests/acceptance/page-navigation.feature b/ui-v2/tests/acceptance/page-navigation.feature
index 605fc9d8c7..360b910757 100644
--- a/ui-v2/tests/acceptance/page-navigation.feature
+++ b/ui-v2/tests/acceptance/page-navigation.feature
@@ -31,13 +31,13 @@ Feature: Page Navigation
     When I click [Item] on the [Model]
     Then the url should be [Url]
   Where:
-    ---------------------------------------------------
-    | Item     | Model    | Url                       |
-    | service  | services | /dc-1/services/service-0  |
-    | node     | nodes    | /dc-1/nodes/node-0        |
-    # | kv       | kvs      | /dc-1/kv/key-0            |
-    | acl       | acls      | /dc-1/acls/anonymous    |
-    ---------------------------------------------------
+    --------------------------------------------------------
+    | Item     | Model    | Url                            |
+    | service  | services | /dc-1/services/service-0       |
+    | node     | nodes    | /dc-1/nodes/node-0             |
+    | kv       | kvs      | /dc-1/kv/necessitatibus-0/edit |
+    | acl      | acls     | /dc-1/acls/anonymous           |
+    --------------------------------------------------------
 @ignore
-  Scenario: Clicking a kv in the kvs listing
+  Scenario: Clicking a kv in the kvs listing, without depending on the salt ^
     Then ok

From 28e56aa92f86b77352a7625a6782d956a0d2950e Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 7 Jun 2018 12:19:54 +0100
Subject: [PATCH 21/26] Make this steps file the same as the others...

WIP: Ideally all of these would go
---
 ui-v2/tests/acceptance/steps/index-forwarding-steps.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/ui-v2/tests/acceptance/steps/index-forwarding-steps.js b/ui-v2/tests/acceptance/steps/index-forwarding-steps.js
index 13b9b426d0..c900334997 100644
--- a/ui-v2/tests/acceptance/steps/index-forwarding-steps.js
+++ b/ui-v2/tests/acceptance/steps/index-forwarding-steps.js
@@ -4,8 +4,7 @@ import steps from './steps';
 // tests/acceptance/steps/steps.js file
 
 export default function(assert) {
-  return steps(assert);
-  // .then('I should find a file', function() {
-  //   assert.ok(true, this.step);
-  // });
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
 }

From d4328ffa094bd2aaebff9eb4538b4031a878bd2b Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 7 Jun 2018 12:35:37 +0100
Subject: [PATCH 22/26] Remove buts

---
 ui-v2/tests/steps.js | 36 +++++++++++-------------------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/ui-v2/tests/steps.js b/ui-v2/tests/steps.js
index 2bdb27180b..766de7802c 100644
--- a/ui-v2/tests/steps.js
+++ b/ui-v2/tests/steps.js
@@ -136,21 +136,15 @@ export default function(assert) {
         assert.equal(
           request.method,
           method,
-          `Expected the request method to be ${method} but was ${request.method}`
-        );
-        assert.equal(
-          request.url,
-          url,
-          `Expected the request url to be ${url} but was ${request.url}`
+          `Expected the request method to be ${method}, was ${request.method}`
         );
+        assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
         const body = JSON.parse(request.requestBody);
         Object.keys(data).forEach(function(key, i, arr) {
           assert.equal(
             body[key],
             data[key],
-            `Expected the payload to contain ${key} to equal ${body[key]} but ${key} was ${
-              data[key]
-            }`
+            `Expected the payload to contain ${key} to equal ${body[key]}, ${key} was ${data[key]}`
           );
         });
       })
@@ -163,18 +157,14 @@ export default function(assert) {
         assert.equal(
           request.method,
           method,
-          `Expected the request method to be ${method} but was ${request.method}`
-        );
-        assert.equal(
-          request.url,
-          url,
-          `Expected the request url to be ${url} but was ${request.url}`
+          `Expected the request method to be ${method}, was ${request.method}`
         );
+        assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
         const body = request.requestBody;
         assert.equal(
           body,
           data,
-          `Expected the request body to be ${body} but was ${request.requestBody}`
+          `Expected the request body to be ${body}, was ${request.requestBody}`
         );
       })
       .then('a $method request is made to "$url"', function(method, url) {
@@ -182,17 +172,13 @@ export default function(assert) {
         assert.equal(
           request.method,
           method,
-          `Expected the request method to be ${method} but was ${request.method}`
-        );
-        assert.equal(
-          request.url,
-          url,
-          `Expected the request url to be ${url} but was ${request.url}`
+          `Expected the request method to be ${method}, was ${request.method}`
         );
+        assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
       })
       .then('the url should be $url', function(url) {
         const current = currentURL();
-        assert.equal(current, url, `Expected the url to be ${url} but was ${current}`);
+        assert.equal(current, url, `Expected the url to be ${url} was ${current}`);
       })
       .then(['I see $num $model', 'I see $num $model model', 'I see $num $model models'], function(
         num,
@@ -202,7 +188,7 @@ export default function(assert) {
           return item.isVisible;
         }).length;
 
-        assert.equal(len, num, `Expected ${num} ${model}s but saw ${len}`);
+        assert.equal(len, num, `Expected ${num} ${model}s, saw ${len}`);
       })
       .then(['I see $num $model model with the $property "$value"'], function(
         num,
@@ -216,7 +202,7 @@ export default function(assert) {
         assert.equal(
           len,
           num,
-          `Expected ${num} ${model}s with ${property} set to "${value}" but saw ${len}`
+          `Expected ${num} ${model}s with ${property} set to "${value}", saw ${len}`
         );
       })
       .then(['I see $property on the $component'], function(property, component) {

From 59ce55227cbeb1eefa8dcd1d52087bb88affdc81 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Thu, 7 Jun 2018 14:15:44 +0100
Subject: [PATCH 23/26] Explicitly sort by Key after folder/file

---
 ui-v2/app/templates/dc/kv/index.hbs           |  2 +-
 .../acceptance/dc/kvs/list-order.feature      | 56 +++++++++++++++++++
 .../steps/dc/kvs/list-order-steps.js          | 10 ++++
 ui-v2/tests/steps.js                          | 19 +++++++
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 ui-v2/tests/acceptance/dc/kvs/list-order.feature
 create mode 100644 ui-v2/tests/acceptance/steps/dc/kvs/list-order-steps.js

diff --git a/ui-v2/app/templates/dc/kv/index.hbs b/ui-v2/app/templates/dc/kv/index.hbs
index c408fca70e..6db169a64d 100644
--- a/ui-v2/app/templates/dc/kv/index.hbs
+++ b/ui-v2/app/templates/dc/kv/index.hbs
@@ -35,7 +35,7 @@
     {{#block-slot 'content'}}
 {{#if (gt filtered.length 0)}}
         {{#tabular-collection
-            items=(sort-by 'isFolder:desc' filtered) as |item index|
+            items=(sort-by 'isFolder:desc' 'Key:asc' filtered) as |item index|
         }}
             {{#block-slot 'header'}}
                 <th>Name</th>
diff --git a/ui-v2/tests/acceptance/dc/kvs/list-order.feature b/ui-v2/tests/acceptance/dc/kvs/list-order.feature
new file mode 100644
index 0000000000..072f28ab27
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/kvs/list-order.feature
@@ -0,0 +1,56 @@
+@setupApplicationTest
+Feature: dc / kvs / list-order
+  In order to be able to find key values easier
+  As a user
+  I want to see the Key/Values listed alphabetically
+
+  Scenario: I have 19 folders
+    Given 1 datacenter model with the value "datacenter"
+    And 19 kv models from yaml
+    ---
+      - __secretzzz/
+      - a-thing-service/
+      - a-thing-y-again-service/
+      - a-thing-y-againzz-service/
+      - a-z-search-service/
+      - blood-pressure-service/
+      - callToAction-items/
+      - configuration/
+      - content-service/
+      - currentRepository-jobs/
+      - currentRepository-service/
+      - first-service/
+      - logs-service/
+      - rabmq-svc/
+      - rabmqUtilities/
+      - schedule-service/
+      - vanApp-service/
+      - vanCat-service/
+      - vanTaxi-service/
+    ---
+    When I visit the kvs page for yaml
+    ---
+      dc: datacenter
+    ---
+    Then I see name on the kvs like yaml
+    ---
+      - __secretzzz/
+      - a-thing-service/
+      - a-thing-y-again-service/
+      - a-thing-y-againzz-service/
+      - a-z-search-service/
+      - blood-pressure-service/
+      - callToAction-items/
+      - configuration/
+      - content-service/
+      - currentRepository-jobs/
+      - currentRepository-service/
+      - first-service/
+      - logs-service/
+      - rabmq-svc/
+      - rabmqUtilities/
+      - schedule-service/
+      - vanApp-service/
+      - vanCat-service/
+      - vanTaxi-service/
+    ---
diff --git a/ui-v2/tests/acceptance/steps/dc/kvs/list-order-steps.js b/ui-v2/tests/acceptance/steps/dc/kvs/list-order-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/kvs/list-order-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/steps.js b/ui-v2/tests/steps.js
index 766de7802c..48b68ae999 100644
--- a/ui-v2/tests/steps.js
+++ b/ui-v2/tests/steps.js
@@ -205,6 +205,25 @@ export default function(assert) {
           `Expected ${num} ${model}s with ${property} set to "${value}", saw ${len}`
         );
       })
+      .then('I see $property on the $component like yaml\n$yaml', function(
+        property,
+        component,
+        yaml
+      ) {
+        const _component = currentPage[component];
+        const iterator = new Array(_component.length).fill(true);
+        iterator.forEach(function(item, i, arr) {
+          const actual = _component.objectAt(i)[property];
+          const expected = yaml[i];
+          assert.deepEqual(
+            actual,
+            expected,
+            `Expected to see ${property} on ${component}[${i}] as ${JSON.stringify(
+              expected
+            )}, was ${JSON.stringify(actual)}`
+          );
+        });
+      })
       .then(['I see $property on the $component'], function(property, component) {
         assert.ok(currentPage[component][property], `Expected to see ${property} on ${component}`);
       })

From e37136ecaef3f318a86ad24546062e986f336004 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Mon, 11 Jun 2018 12:50:58 +0100
Subject: [PATCH 24/26] Prevent being able to submit a create form with empty
 values

---
 ui-v2/app/routes/dc/acls/create.js            |  2 ++
 ui-v2/app/templates/dc/acls/-form.hbs         |  5 ++--
 ui-v2/app/templates/dc/kv/-form.hbs           |  4 +++-
 ui-v2/app/validations/acl.js                  |  1 -
 ui-v2/tests/acceptance/dc/acls/update.feature |  1 +
 ui-v2/tests/acceptance/dc/kvs/update.feature  |  1 +
 .../acceptance/steps/submit-blank-steps.js    | 10 ++++++++
 ui-v2/tests/acceptance/submit-blank.feature   | 24 +++++++++++++++++++
 ui-v2/tests/lib/page-object/visitable.js      | 19 ++++++++++++---
 ui-v2/tests/pages/dc/acls/edit.js             |  5 ++--
 ui-v2/tests/pages/dc/kv/edit.js               |  2 +-
 ui-v2/tests/steps.js                          |  2 ++
 12 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 ui-v2/tests/acceptance/steps/submit-blank-steps.js
 create mode 100644 ui-v2/tests/acceptance/submit-blank.feature

diff --git a/ui-v2/app/routes/dc/acls/create.js b/ui-v2/app/routes/dc/acls/create.js
index ee36d06030..e71a805c1a 100644
--- a/ui-v2/app/routes/dc/acls/create.js
+++ b/ui-v2/app/routes/dc/acls/create.js
@@ -13,6 +13,8 @@ export default Route.extend(WithAclActions, {
   },
   model: function(params) {
     this.item = get(this, 'repo').create();
+    // TODO: Why didn't I have to do this for KV's?
+    set(this.item, 'Name', '');
     set(this.item, 'Datacenter', this.modelFor('dc').dc.Name);
     return hash({
       create: true,
diff --git a/ui-v2/app/templates/dc/acls/-form.hbs b/ui-v2/app/templates/dc/acls/-form.hbs
index f9ea411ff6..2d0ef5edf1 100644
--- a/ui-v2/app/templates/dc/acls/-form.hbs
+++ b/ui-v2/app/templates/dc/acls/-form.hbs
@@ -26,12 +26,13 @@
     </fieldset>
     <div>
 {{#if create }}
-        <button type="submit" {{ action "create" item}} disabled={{if item.isInvalid 'disabled'}}>Save</button>
+        {{! we only need to check for an empty name here as ember munges autofocus, once we have autofocus back revisit this}}
+        <button type="submit" {{ action "create" item}} disabled={{if (or item.isPristine item.isInvalid (eq item.Name '')) 'disabled'}}>Save</button>
 {{ else }}
         <button type="submit" {{ action "update" item}} disabled={{if item.isInvalid 'disabled'}}>Save</button>
 {{/if}}
         <button type="reset" {{ action "cancel" item}}>Cancel</button>
-{{# if (and item.ID (not-eq item.ID 'anonymous')) }}
+{{# if (and (not create) (not-eq item.ID 'anonymous')) }}
         {{#confirmation-dialog message='Are you sure you want to delete this ACL token?'}}
             {{#block-slot 'action' as |confirm|}}
                 <button type="button" class="type-delete" {{action confirm 'delete' item parent}}>Delete</button>
diff --git a/ui-v2/app/templates/dc/kv/-form.hbs b/ui-v2/app/templates/dc/kv/-form.hbs
index 16d7f41bc3..6303969045 100644
--- a/ui-v2/app/templates/dc/kv/-form.hbs
+++ b/ui-v2/app/templates/dc/kv/-form.hbs
@@ -24,8 +24,10 @@
         </div>
 {{/if}}
     </fieldset>
+    {{!TODO This has a <div> around it in acls, remove or add for consistency }}
 {{#if create }}
-    <button type="submit" {{ action "create" item parent}} disabled={{if item.isInvalid 'disabled'}}>Save</button>
+    {{! we only need to check for an empty keyname here as ember munges autofocus, once we have autofocus back revisit this}}
+    <button type="submit" {{ action "create" item parent}} disabled={{if (or item.isPristine item.isInvalid (eq (left-trim item.Key parent.Key) '')) 'disabled'}}>Save</button>
 {{ else }}
     <button type="submit" {{ action "update" item parent}} disabled={{if item.isInvalid 'disabled'}}>Save</button>
     <button type="reset" {{ action "cancel" item parent}}>Cancel changes</button>
diff --git a/ui-v2/app/validations/acl.js b/ui-v2/app/validations/acl.js
index 8760894873..5878e768ee 100644
--- a/ui-v2/app/validations/acl.js
+++ b/ui-v2/app/validations/acl.js
@@ -2,5 +2,4 @@ import { validatePresence, validateLength } from 'ember-changeset-validations/va
 export default {
   Name: [validatePresence(true), validateLength({ min: 1 })],
   Type: validatePresence(true),
-  ID: validateLength({ min: 1 }),
 };
diff --git a/ui-v2/tests/acceptance/dc/acls/update.feature b/ui-v2/tests/acceptance/dc/acls/update.feature
index 1ca2a93272..77c6417fd7 100644
--- a/ui-v2/tests/acceptance/dc/acls/update.feature
+++ b/ui-v2/tests/acceptance/dc/acls/update.feature
@@ -11,6 +11,7 @@ Feature: dc / acls / update: ACL Update
       dc: datacenter
       acl: key
     ---
+    Then the url should be /datacenter/acls/key
     Then I type with yaml
     ---
       name: [Name]
diff --git a/ui-v2/tests/acceptance/dc/kvs/update.feature b/ui-v2/tests/acceptance/dc/kvs/update.feature
index 5eb92fd28f..b6a880c8dc 100644
--- a/ui-v2/tests/acceptance/dc/kvs/update.feature
+++ b/ui-v2/tests/acceptance/dc/kvs/update.feature
@@ -11,6 +11,7 @@ Feature: dc / kvs / update: KV Update
       dc: datacenter
       kv: [Name]
     ---
+    Then the url should be /datacenter/kv/[Name]/edit
     Then I type with yaml
     ---
       value: [Value]
diff --git a/ui-v2/tests/acceptance/steps/submit-blank-steps.js b/ui-v2/tests/acceptance/steps/submit-blank-steps.js
new file mode 100644
index 0000000000..c5f07c8043
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/submit-blank-steps.js
@@ -0,0 +1,10 @@
+import steps from './steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/submit-blank.feature b/ui-v2/tests/acceptance/submit-blank.feature
new file mode 100644
index 0000000000..a8024a384d
--- /dev/null
+++ b/ui-v2/tests/acceptance/submit-blank.feature
@@ -0,0 +1,24 @@
+@setupApplicationTest
+Feature: submit blank
+  In order to prevent form's being saved without values
+  As a user
+  I shouldn't be able to submit a blank form
+  Scenario: Visiting a blank form for [Model]
+    Given 1 datacenter model with the value "datacenter"
+    When I visit the [Model] page for yaml
+    ---
+      dc: datacenter
+    ---
+    Then the url should be /datacenter/[Slug]/create
+    And I submit
+    Then the url should be /datacenter/[Slug]/create
+  Where:
+    ------------------
+    | Model   | Slug |
+    | kv      | kv   |
+    | acl     | acls |
+    ------------------
+@ignore
+  Scenario: The button is disabled
+    Then ok
+
diff --git a/ui-v2/tests/lib/page-object/visitable.js b/ui-v2/tests/lib/page-object/visitable.js
index 8c8e985ae8..5b7d42d7e1 100644
--- a/ui-v2/tests/lib/page-object/visitable.js
+++ b/ui-v2/tests/lib/page-object/visitable.js
@@ -44,9 +44,22 @@ export function visitable(path, encoder = encodeURIComponent) {
       let executionContext = getExecutionContext(this);
 
       return executionContext.runAsync(context => {
-        let params = assign({}, dynamicSegmentsAndQueryParams);
-        let fullPath = fillInDynamicSegments(path, params, encoder);
-
+        var params;
+        let fullPath = (function _try(paths) {
+          const path = paths.shift();
+          params = assign({}, dynamicSegmentsAndQueryParams);
+          var fullPath;
+          try {
+            fullPath = fillInDynamicSegments(path, params, encoder);
+          } catch (e) {
+            if (paths.length > 0) {
+              fullPath = _try(paths);
+            } else {
+              throw e;
+            }
+          }
+          return fullPath;
+        })(typeof path === 'string' ? [path] : path.slice(0));
         fullPath = appendQueryParams(fullPath, params);
 
         return context.visit(fullPath);
diff --git a/ui-v2/tests/pages/dc/acls/edit.js b/ui-v2/tests/pages/dc/acls/edit.js
index 5dbf7dc787..4170f45ea3 100644
--- a/ui-v2/tests/pages/dc/acls/edit.js
+++ b/ui-v2/tests/pages/dc/acls/edit.js
@@ -1,7 +1,8 @@
-import { create, visitable, clickable, triggerable } from 'ember-cli-page-object';
+import { create, clickable, triggerable } from 'ember-cli-page-object';
+import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
 
 export default create({
-  visit: visitable('/:dc/acls/:acl'),
+  visit: visitable(['/:dc/acls/:acl', '/:dc/acls/create']),
   // fillIn: fillable('input, textarea, [contenteditable]'),
   name: triggerable('keypress', '[name="name"]'),
   submit: clickable('[type=submit]'),
diff --git a/ui-v2/tests/pages/dc/kv/edit.js b/ui-v2/tests/pages/dc/kv/edit.js
index 7915cf1791..521981a24f 100644
--- a/ui-v2/tests/pages/dc/kv/edit.js
+++ b/ui-v2/tests/pages/dc/kv/edit.js
@@ -2,7 +2,7 @@ import { create, clickable } from 'ember-cli-page-object';
 import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
 
 export default create({
-  visit: visitable('/:dc/kv/:kv/edit', str => str),
+  visit: visitable(['/:dc/kv/:kv/edit', '/:dc/kv/create'], str => str),
   // fillIn: fillable('input, textarea, [contenteditable]'),
   // name: triggerable('keypress', '[name="additional"]'),
   submit: clickable('[type=submit]'),
diff --git a/ui-v2/tests/steps.js b/ui-v2/tests/steps.js
index 48b68ae999..98208ac03c 100644
--- a/ui-v2/tests/steps.js
+++ b/ui-v2/tests/steps.js
@@ -65,6 +65,8 @@ export default function(assert) {
         ['I visit the $name page for yaml\n$yaml', 'I visit the $name page for json\n$json'],
         function(name, data) {
           currentPage = pages[name];
+          // TODO: Consider putting an assertion here for testing the current url
+          // do I absolutely definitely need that all the time?
           return pages[name].visit(data);
         }
       )

From f87f410e3ab4ca8bd1c6ab6036c4bb842d131f5d Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Mon, 11 Jun 2018 17:49:22 +0100
Subject: [PATCH 25/26] Use defaultValue for making sure Name is at least ''

---
 ui-v2/app/models/acl.js            | 7 ++++++-
 ui-v2/app/routes/dc/acls/create.js | 2 --
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui-v2/app/models/acl.js b/ui-v2/app/models/acl.js
index e467b43772..7c55bb64ef 100644
--- a/ui-v2/app/models/acl.js
+++ b/ui-v2/app/models/acl.js
@@ -7,7 +7,12 @@ export const SLUG_KEY = 'ID';
 export default Model.extend({
   [PRIMARY_KEY]: attr('string'),
   [SLUG_KEY]: attr('string'),
-  Name: attr('string'),
+  Name: attr('string', {
+    // TODO: Why didn't I have to do this for KV's?
+    // this is to ensure that Name is '' and not null when creating
+    // maybe its due to the fact that `Key` is the primaryKey in Kv's
+    defaultValue: '',
+  }),
   Type: attr('string'),
   Rules: attr('string'),
   CreateIndex: attr('number'),
diff --git a/ui-v2/app/routes/dc/acls/create.js b/ui-v2/app/routes/dc/acls/create.js
index e71a805c1a..ee36d06030 100644
--- a/ui-v2/app/routes/dc/acls/create.js
+++ b/ui-v2/app/routes/dc/acls/create.js
@@ -13,8 +13,6 @@ export default Route.extend(WithAclActions, {
   },
   model: function(params) {
     this.item = get(this, 'repo').create();
-    // TODO: Why didn't I have to do this for KV's?
-    set(this.item, 'Name', '');
     set(this.item, 'Datacenter', this.modelFor('dc').dc.Name);
     return hash({
       create: true,

From 4998029670c5de30f95976b4e7a26e673d7dbdd1 Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Mon, 11 Jun 2018 17:49:47 +0100
Subject: [PATCH 26/26] Comment up custom visitable and add a couple of
 comments to be clearer

---
 ui-v2/tests/lib/page-object/visitable.js | 17 ++++++++++++++++-
 ui-v2/tests/pages/dc/acls/edit.js        |  1 +
 ui-v2/tests/pages/dc/kv/edit.js          |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/ui-v2/tests/lib/page-object/visitable.js b/ui-v2/tests/lib/page-object/visitable.js
index 5b7d42d7e1..c6abebc637 100644
--- a/ui-v2/tests/lib/page-object/visitable.js
+++ b/ui-v2/tests/lib/page-object/visitable.js
@@ -35,7 +35,22 @@ function appendQueryParams(path, queryParams) {
 
   return path;
 }
-
+/**
+ * Custom implementation of `visitable`
+ * Currently aims to be compatible and as close as possible to the
+ * actual `ember-cli-page-object` version
+ *
+ * Additions:
+ * 1. Injectable encoder, for when you don't want your segments to be encoded
+ *    or you have specific encoding needs
+ *    Specifically in my case for KV urls where the `Key`/Slug shouldn't be encoded,
+ *    defaults to the browsers `encodeURIComponent` for compatibility and ease.
+ * 2. `path` can be an array of (string) paths OR a string for compatibility.
+ *    If a path cannot be generated due to a lack of properties on the
+ *    dynamic segment params, if will keep trying 'path' in the array
+ *    until it finds one that it can construct. This follows the same thinking
+ *    as 'if you don't specify an item, then we are looking to create one'
+ */
 export function visitable(path, encoder = encodeURIComponent) {
   return {
     isDescriptor: true,
diff --git a/ui-v2/tests/pages/dc/acls/edit.js b/ui-v2/tests/pages/dc/acls/edit.js
index 4170f45ea3..d15301ef46 100644
--- a/ui-v2/tests/pages/dc/acls/edit.js
+++ b/ui-v2/tests/pages/dc/acls/edit.js
@@ -2,6 +2,7 @@ import { create, clickable, triggerable } from 'ember-cli-page-object';
 import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
 
 export default create({
+  // custom visitable
   visit: visitable(['/:dc/acls/:acl', '/:dc/acls/create']),
   // fillIn: fillable('input, textarea, [contenteditable]'),
   name: triggerable('keypress', '[name="name"]'),
diff --git a/ui-v2/tests/pages/dc/kv/edit.js b/ui-v2/tests/pages/dc/kv/edit.js
index 521981a24f..c8af7bae0f 100644
--- a/ui-v2/tests/pages/dc/kv/edit.js
+++ b/ui-v2/tests/pages/dc/kv/edit.js
@@ -2,6 +2,7 @@ import { create, clickable } from 'ember-cli-page-object';
 import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
 
 export default create({
+  // custom visitable
   visit: visitable(['/:dc/kv/:kv/edit', '/:dc/kv/create'], str => str),
   // fillIn: fillable('input, textarea, [contenteditable]'),
   // name: triggerable('keypress', '[name="additional"]'),