From c0abe1e406272221f745d2150e6d657c9a8c3614 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 1 Oct 2020 09:33:22 +0100
Subject: [PATCH] ui: Outlet Loading (#8779)

Moves all Route/model hook loading to use Outlet components which listen on route change.
---
 ui-v2/app/components/app-view/index.hbs       | 174 +++++++++---------
 ui-v2/app/components/app-view/index.js        |  41 +----
 ui-v2/app/components/empty-state/index.hbs    |   2 +-
 .../app/components/empty-state/pageobject.js  |   6 +
 .../components/hashicorp-consul/pageobject.js |   3 +-
 ui-v2/app/components/list-collection/index.js |   6 +-
 ui-v2/app/components/outlet/index.hbs         |  15 ++
 ui-v2/app/components/outlet/index.js          | 140 ++++++++++++++
 ui-v2/app/components/role-selector/index.hbs  |   1 +
 ui-v2/app/components/role-selector/index.scss |   9 +
 .../components/tabular-collection/index.js    |   2 +-
 ui-v2/app/routes/application.js               |  23 +--
 ui-v2/app/routes/dc.js                        |   3 +-
 ui-v2/app/routes/dc/acls.js                   |   2 +-
 ui-v2/app/routes/dc/acls/create.js            |   4 +-
 ui-v2/app/routes/dc/acls/edit.js              |   4 +-
 ui-v2/app/routes/dc/acls/index.js             |   4 +-
 ui-v2/app/routes/dc/acls/policies/edit.js     |   2 +
 ui-v2/app/routes/dc/acls/policies/index.js    |   4 +-
 ui-v2/app/routes/dc/acls/roles/edit.js        |   1 +
 ui-v2/app/routes/dc/acls/roles/index.js       |   4 +-
 ui-v2/app/routes/dc/acls/tokens/edit.js       |   2 +
 ui-v2/app/routes/dc/acls/tokens/index.js      |   4 +-
 ui-v2/app/routes/dc/index.js                  |   2 +-
 ui-v2/app/routes/dc/intentions/edit.js        |   3 +-
 ui-v2/app/routes/dc/intentions/index.js       |   3 +-
 ui-v2/app/routes/dc/kv/edit.js                |   3 +-
 ui-v2/app/routes/dc/kv/folder.js              |   1 -
 ui-v2/app/routes/dc/kv/index.js               |   4 +-
 ui-v2/app/routes/dc/nodes/index.js            |   3 +-
 ui-v2/app/routes/dc/nodes/show.js             |   4 +-
 .../app/routes/dc/nodes/show/healthchecks.js  |   3 +-
 ui-v2/app/routes/dc/nodes/show/index.js       |   2 +-
 ui-v2/app/routes/dc/nodes/show/metadata.js    |   3 +-
 ui-v2/app/routes/dc/nodes/show/rtt.js         |   3 +-
 ui-v2/app/routes/dc/nodes/show/services.js    |   3 +-
 ui-v2/app/routes/dc/nodes/show/sessions.js    |  25 ++-
 ui-v2/app/routes/dc/nspaces/edit.js           |   4 +-
 ui-v2/app/routes/dc/nspaces/index.js          |   4 +-
 ui-v2/app/routes/dc/services/index.js         |   3 +-
 ui-v2/app/routes/dc/services/instance.js      |   3 +-
 .../routes/dc/services/instance/addresses.js  |   3 +-
 .../dc/services/instance/exposedpaths.js      |   3 +-
 .../dc/services/instance/healthchecks.js      |   3 +-
 .../app/routes/dc/services/instance/index.js  |   2 +-
 .../routes/dc/services/instance/metadata.js   |   3 +-
 .../app/routes/dc/services/instance/proxy.js  |   3 +-
 .../routes/dc/services/instance/upstreams.js  |   3 +-
 ui-v2/app/routes/dc/services/notfound.js      |   2 +-
 ui-v2/app/routes/dc/services/show.js          |   3 +-
 ui-v2/app/routes/dc/services/show/index.js    |   2 +-
 .../app/routes/dc/services/show/instances.js  |   3 +-
 .../app/routes/dc/services/show/intentions.js |   9 +-
 .../dc/services/show/intentions/edit.js       |   3 +-
 .../dc/services/show/intentions/index.js      |   3 +-
 ui-v2/app/routes/dc/services/show/routing.js  |   3 +-
 ui-v2/app/routes/dc/services/show/services.js |   3 +-
 ui-v2/app/routes/dc/services/show/tags.js     |   3 +-
 .../app/routes/dc/services/show/upstreams.js  |   3 +-
 ui-v2/app/routes/index.js                     |   2 +-
 ui-v2/app/routes/notfound.js                  |   2 +-
 ui-v2/app/routes/nspace.js                    |   2 +-
 ui-v2/app/routes/settings.js                  |   3 +-
 ui-v2/app/routing/route.js                    |  15 ++
 ui-v2/app/routing/single.js                   |   3 +-
 ui-v2/app/services/feedback.js                |   5 -
 ui-v2/app/styles/components.scss              |   1 +
 ui-v2/app/styles/components/app-view.scss     |   4 +-
 .../app/styles/components/app-view/index.scss |   4 +-
 ui-v2/app/styles/components/loader.scss       |   5 +-
 ui-v2/app/styles/layout.scss                  |   2 +-
 ui-v2/app/styles/routes/dc/acls/index.scss    |  23 +--
 ui-v2/app/styles/routes/dc/kv/index.scss      |   6 +-
 ui-v2/app/styles/routes/dc/nodes/index.scss   |   2 +-
 .../app/styles/routes/dc/services/index.scss  |   4 +-
 ui-v2/app/templates/application.hbs           |   6 +-
 ui-v2/app/templates/dc.hbs                    |   6 +-
 ui-v2/app/templates/dc/acls/edit.hbs          |   2 +-
 ui-v2/app/templates/dc/acls/index.hbs         |   2 +-
 ui-v2/app/templates/dc/acls/policies/edit.hbs |   2 -
 .../app/templates/dc/acls/policies/index.hbs  |   2 -
 ui-v2/app/templates/dc/acls/roles/edit.hbs    |   2 -
 ui-v2/app/templates/dc/acls/roles/index.hbs   |   2 -
 ui-v2/app/templates/dc/acls/tokens/edit.hbs   |   2 -
 ui-v2/app/templates/dc/acls/tokens/index.hbs  |   2 -
 ui-v2/app/templates/dc/intentions/edit.hbs    |   2 +-
 ui-v2/app/templates/dc/intentions/index.hbs   |   2 +-
 ui-v2/app/templates/dc/kv/edit.hbs            |   2 +-
 ui-v2/app/templates/dc/kv/index.hbs           |   2 +-
 ui-v2/app/templates/dc/nodes/index.hbs        |   2 +-
 ui-v2/app/templates/dc/nodes/show.hbs         |   9 +-
 .../app/templates/dc/nodes/show/sessions.hbs  |   1 +
 ui-v2/app/templates/dc/nspaces/edit.hbs       |   2 +-
 ui-v2/app/templates/dc/nspaces/index.hbs      |   2 +-
 ui-v2/app/templates/dc/services/index.hbs     |   2 +-
 ui-v2/app/templates/dc/services/instance.hbs  |   6 +-
 ui-v2/app/templates/dc/services/show.hbs      |   8 +-
 .../templates/dc/services/show/intentions.hbs |   6 +-
 ui-v2/app/templates/nspace.hbs                |   6 +-
 ui-v2/app/templates/settings.hbs              |   2 +-
 ui-v2/tests/acceptance/login-errors.feature   |   4 +-
 .../tests/acceptance/page-navigation.feature  |   1 -
 ui-v2/tests/pages.js                          |   4 +-
 103 files changed, 467 insertions(+), 296 deletions(-)
 create mode 100644 ui-v2/app/components/empty-state/pageobject.js
 create mode 100644 ui-v2/app/components/outlet/index.hbs
 create mode 100644 ui-v2/app/components/outlet/index.js
 create mode 100644 ui-v2/app/components/role-selector/index.scss
 create mode 100644 ui-v2/app/routing/route.js

diff --git a/ui-v2/app/components/app-view/index.hbs b/ui-v2/app/components/app-view/index.hbs
index cdc4c49b4..e7e1a542d 100644
--- a/ui-v2/app/components/app-view/index.hbs
+++ b/ui-v2/app/components/app-view/index.hbs
@@ -1,90 +1,90 @@
-{{yield}}
-<header>
-{{#each flashMessages.queue as |flash|}}
-    <FlashMessage @flash={{flash}} as |component flash|>
-  {{#if flash.dom}}
-        {{{flash.dom}}}
-  {{else}}
-        {{#let (lowercase component.flashType) (lowercase flash.action) as |status type|}}
-          {{! flashes automatically ucfirst the type }}
-
-          <p data-notification role="alert" class={{concat status ' notification-' type}}>
-            <strong>
-              {{capitalize status}}!
-            </strong>
-            {{#yield-slot name="notification" params=(block-params status type flash.item flash.error)}}
-              {{yield}}
-              {{#if (eq type 'logout')}}
-                {{#if (eq status 'success') }}
-                  You are now logged out.
-                {{else}}
-                  There was an error logging out.
-                {{/if}}
-              {{else if (eq type 'authorize')}}
-                {{#if (eq status 'success') }}
-                  You are now logged in.
-                {{else}}
-                  There was an error, please check your SecretID/Token
-                {{/if}}
-              {{/if}}
-            {{else}}
-              {{#if (eq type 'logout')}}
-                {{#if (eq status 'success') }}
-                  You are now logged out.
-                {{else}}
-                  There was an error logging out.
-                {{/if}}
-              {{else if (eq type 'authorize')}}
-                {{#if (eq status 'success') }}
-                  You are now logged in.
-                {{else}}
-                  There was an error, please check your SecretID/Token
-                {{/if}}
-              {{/if}}
-            {{/yield-slot}}
-          </p>
-        {{/let}}
-  {{/if}}
-    </FlashMessage>
-{{/each}}
-    <div>
-        <div>
-  {{#if authorized}}
-            <nav aria-label="Breadcrumb">
-                <YieldSlot @name="breadcrumbs">{{yield}}</YieldSlot>
-            </nav>
-  {{/if}}
-            <div class="title">
-              <YieldSlot @name="header">
-                  {{yield}}
-              </YieldSlot>
-              <div class="actions">
-        {{#if authorized}}
-                  <YieldSlot @name="actions">
-                    <PortalTarget @name="app-view-actions" />
-                    {{yield}}
-                  </YieldSlot>
-        {{/if}}
-              </div>
-            </div>
-            <YieldSlot @name="nav">
-              {{yield}}
-            </YieldSlot>
-        </div>
-    </div>
-  {{#if authorized}}
-    <YieldSlot @name="toolbar">
-      <input type="checkbox" id="toolbar-toggle" />
-      {{yield}}
-    </YieldSlot>
-  {{/if}}
-</header>
-<div>
-    {{#if (not enabled) }}
-      <YieldSlot @name="disabled">{{yield}}</YieldSlot>
-    {{else if (not authorized)}}
-      <YieldSlot @name="authorization">{{yield}}</YieldSlot>
+<div class="app-view">
+  {{yield}}
+  <header>
+  {{#each flashMessages.queue as |flash|}}
+      <FlashMessage @flash={{flash}} as |component flash|>
+    {{#if flash.dom}}
+          {{{flash.dom}}}
     {{else}}
-      <YieldSlot @name="content">{{yield}}</YieldSlot>
+          {{#let (lowercase component.flashType) (lowercase flash.action) as |status type|}}
+            {{! flashes automatically ucfirst the type }}
+
+            <p data-notification role="alert" class={{concat status ' notification-' type}}>
+              <strong>
+                {{capitalize status}}!
+              </strong>
+              {{#yield-slot name="notification" params=(block-params status type flash.item flash.error)}}
+                {{yield}}
+                {{#if (eq type 'logout')}}
+                  {{#if (eq status 'success') }}
+                    You are now logged out.
+                  {{else}}
+                    There was an error logging out.
+                  {{/if}}
+                {{else if (eq type 'authorize')}}
+                  {{#if (eq status 'success') }}
+                    You are now logged in.
+                  {{else}}
+                    There was an error, please check your SecretID/Token
+                  {{/if}}
+                {{/if}}
+              {{else}}
+                {{#if (eq type 'logout')}}
+                  {{#if (eq status 'success') }}
+                    You are now logged out.
+                  {{else}}
+                    There was an error logging out.
+                  {{/if}}
+                {{else if (eq type 'authorize')}}
+                  {{#if (eq status 'success') }}
+                    You are now logged in.
+                  {{else}}
+                    There was an error, please check your SecretID/Token
+                  {{/if}}
+                {{/if}}
+              {{/yield-slot}}
+            </p>
+          {{/let}}
     {{/if}}
+      </FlashMessage>
+  {{/each}}
+      <div>
+          <div>
+    {{#if authorized}}
+              <nav aria-label="Breadcrumb">
+                  <YieldSlot @name="breadcrumbs">{{yield}}</YieldSlot>
+              </nav>
+    {{/if}}
+              <div class="title">
+                <YieldSlot @name="header">
+                    {{yield}}
+                </YieldSlot>
+                <div class="actions">
+          {{#if authorized}}
+                    <YieldSlot @name="actions">
+                      <PortalTarget @name="app-view-actions" />
+                      {{yield}}
+                    </YieldSlot>
+          {{/if}}
+                </div>
+              </div>
+              <YieldSlot @name="nav">
+                {{yield}}
+              </YieldSlot>
+          </div>
+      </div>
+    {{#if authorized}}
+      <YieldSlot @name="toolbar">
+        <input type="checkbox" id="toolbar-toggle" />
+        {{yield}}
+      </YieldSlot>
+    {{/if}}
+  </header>
+  <div>
+      {{#if (not enabled) }}
+        <YieldSlot @name="disabled">{{yield}}</YieldSlot>
+      {{else}}
+        <YieldSlot @name="content">{{yield}}</YieldSlot>
+      {{/if}}
+  </div>
 </div>
diff --git a/ui-v2/app/components/app-view/index.js b/ui-v2/app/components/app-view/index.js
index 7fce237ea..ee99672aa 100644
--- a/ui-v2/app/components/app-view/index.js
+++ b/ui-v2/app/components/app-view/index.js
@@ -1,46 +1,7 @@
 import Component from '@ember/component';
 import SlotsMixin from 'block-slots';
-import { inject as service } from '@ember/service';
-import templatize from 'consul-ui/utils/templatize';
 export default Component.extend(SlotsMixin, {
+  tagName: '',
   authorized: true,
   enabled: true,
-  classNames: ['app-view'],
-  classNameBindings: ['enabled::disabled', 'authorized::unauthorized'],
-  dom: service('dom'),
-  didReceiveAttrs: function() {
-    this._super(...arguments);
-    // right now only manually added classes are hoisted to <html>
-    const $root = this.dom.root();
-    if (this.loading) {
-      $root.classList.add('loading');
-    } else {
-      $root.classList.remove('loading');
-    }
-    let cls = this['class'] || '';
-    if (cls) {
-      // its possible for 'layout' templates to change after insert
-      // check for these specific layouts and clear them out
-      const receivedClasses = new Set(templatize(cls.split(' ')));
-      const difference = new Set([...$root.classList].filter(item => !receivedClasses.has(item)));
-      [...difference].forEach(function(item, i) {
-        if (templatize(['edit', 'show', 'list']).indexOf(item) !== -1) {
-          $root.classList.remove(item);
-        }
-      });
-      $root.classList.add(...receivedClasses);
-    }
-  },
-  didInsertElement: function() {
-    this._super(...arguments);
-    this.didReceiveAttrs();
-  },
-  didDestroyElement: function() {
-    this._super(...arguments);
-    const cls = this['class'] + ' loading';
-    if (cls) {
-      const $root = this.dom.root();
-      $root.classList.remove(...templatize(cls.split(' ')));
-    }
-  },
 });
diff --git a/ui-v2/app/components/empty-state/index.hbs b/ui-v2/app/components/empty-state/index.hbs
index c4c255826..e90dbdeb9 100644
--- a/ui-v2/app/components/empty-state/index.hbs
+++ b/ui-v2/app/components/empty-state/index.hbs
@@ -14,7 +14,7 @@
     <div>
       {{yield}}
       {{#if (and (env 'CONSUL_ACLS_ENABLED') allowLogin)}}
-        <label for="login-toggle">
+        <label for="login-toggle" data-test-empty-state-login>
           <DataSource
             @src="settings://consul:token"
             @onchange={{action (mut token) value="data"}}
diff --git a/ui-v2/app/components/empty-state/pageobject.js b/ui-v2/app/components/empty-state/pageobject.js
new file mode 100644
index 000000000..b6dbb951f
--- /dev/null
+++ b/ui-v2/app/components/empty-state/pageobject.js
@@ -0,0 +1,6 @@
+export default present => (scope = '.empty-state') => {
+  return {
+    scope: scope,
+    login: present('[data-test-empty-state-login]'),
+  };
+};
diff --git a/ui-v2/app/components/hashicorp-consul/pageobject.js b/ui-v2/app/components/hashicorp-consul/pageobject.js
index f940a8d44..4a1128ad0 100644
--- a/ui-v2/app/components/hashicorp-consul/pageobject.js
+++ b/ui-v2/app/components/hashicorp-consul/pageobject.js
@@ -1,4 +1,4 @@
-export default (collection, clickable, attribute, is, authForm) => scope => {
+export default (collection, clickable, attribute, is, authForm, emptyState) => scope => {
   const page = {
     navigation: [
       'services',
@@ -34,6 +34,7 @@ export default (collection, clickable, attribute, is, authForm) => scope => {
     authdialog: {
       form: authForm(),
     },
+    emptystate: emptyState(),
     // TODO: errors aren't strictly part of this component
     error: {
       status: attribute('data-test-status', '[data-test-status]'),
diff --git a/ui-v2/app/components/list-collection/index.js b/ui-v2/app/components/list-collection/index.js
index 05226d77f..6ac7f7a22 100644
--- a/ui-v2/app/components/list-collection/index.js
+++ b/ui-v2/app/components/list-collection/index.js
@@ -55,11 +55,11 @@ export default Component.extend(Slotted, {
     resize: function(e) {
       // TODO: This top part is very similar to resize in tabular-collection
       // see if it make sense to DRY out
-      const $appContent = this.dom.element('main > div');
-      if ($appContent) {
+      const dom = get(this, 'dom');
+      const $footer = dom.element('footer[role="contentinfo"]');
+      if ($footer) {
         const border = 1;
         const rect = this.$element.getBoundingClientRect();
-        const $footer = this.dom.element('footer[role="contentinfo"]');
         const space = rect.top + $footer.clientHeight + border;
         const height = e.target.innerHeight - space;
         this.set('height', Math.max(0, height));
diff --git a/ui-v2/app/components/outlet/index.hbs b/ui-v2/app/components/outlet/index.hbs
new file mode 100644
index 000000000..32f2e1355
--- /dev/null
+++ b/ui-v2/app/components/outlet/index.hbs
@@ -0,0 +1,15 @@
+  {{did-insert this.connect}}
+  {{will-destroy this.disconnect}}
+<section
+  class="outlet"
+  data-outlet={{@name}}
+  data-route={{this.route}}
+  data-state={{this.state.name}}
+  data-transition={{concat this.previousState.name ' ' this.state.name}}
+>
+  {{yield (hash
+    state=this.state
+    previousState=this.previousState
+    route=this.route
+  )}}
+</section>
\ No newline at end of file
diff --git a/ui-v2/app/components/outlet/index.js b/ui-v2/app/components/outlet/index.js
new file mode 100644
index 000000000..02bb8af42
--- /dev/null
+++ b/ui-v2/app/components/outlet/index.js
@@ -0,0 +1,140 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+class State {
+  constructor(name) {
+    this.name = name;
+  }
+  matches(match) {
+    return this.name === match;
+  }
+}
+
+class Outlets {
+  constructor() {
+    this.map = new Map();
+  }
+  sort() {
+    this.sorted = [...this.map.keys()];
+    this.sorted.sort((a, b) => {
+      const al = a.split('.').length;
+      const bl = b.split('.').length;
+      switch (true) {
+        case al > bl:
+          return -1;
+        case al < bl:
+          return 1;
+        default:
+          return 0;
+      }
+    });
+  }
+  set(name, value) {
+    this.map.set(name, value);
+    this.sort();
+  }
+  get(name) {
+    return this.map.get(name);
+  }
+  delete(name) {
+    this.map.delete(name);
+    this.sort();
+  }
+  keys() {
+    return this.sorted;
+  }
+}
+const outlets = new Outlets();
+
+export default class Outlet extends Component {
+  @service('router') router;
+  @service('dom') dom;
+
+  @tracked route;
+  @tracked state;
+  @tracked previousState;
+
+  constructor() {
+    super(...arguments);
+    if (this.args.name === 'application') {
+      this.setAppState('loading');
+      this.setAppRoute(this.router.currentRouteName);
+    }
+  }
+
+  setAppRoute(name) {
+    if (name.startsWith('nspace.')) {
+      name = name.substr(0, 'nspace.'.length);
+    }
+    if (name !== 'loading') {
+      const doc = this.dom.root();
+      if (doc.classList.contains('ember-loading')) {
+        doc.classList.remove('ember-loading');
+      }
+      doc.dataset.route = name;
+      this.setAppState('idle');
+    }
+  }
+
+  setAppState(state) {
+    this.dom.root().dataset.state = state;
+  }
+
+  setOutletRoutes(route) {
+    const keys = [...outlets.keys()];
+    const pos = keys.indexOf(this.name);
+    const key = pos + 1;
+    const parent = outlets.get(keys[key]);
+    parent.route = this.args.name;
+
+    this.route = route;
+  }
+
+  @action
+  startLoad(transition) {
+    const keys = [...outlets.keys()];
+
+    const outlet =
+      keys.find(item => {
+        return transition.to.name.indexOf(item) !== -1;
+      }) || 'application';
+
+    if (this.args.name === outlet) {
+      this.previousState = this.state;
+      this.state = new State('loading');
+    }
+    if (this.args.name === 'application') {
+      this.setAppState('loading');
+    }
+  }
+
+  @action
+  endLoad(transition) {
+    if (this.state.matches('loading')) {
+      this.setOutletRoutes(transition.to.name);
+
+      this.previousState = this.state;
+      this.state = new State('idle');
+    }
+    if (this.args.name === 'application') {
+      this.setAppRoute(this.router.currentRouteName);
+    }
+  }
+
+  @action
+  connect() {
+    outlets.set(this.args.name, this);
+    this.previousState = this.state = new State('idle');
+    this.router.on('routeWillChange', this.startLoad);
+    this.router.on('routeDidChange', this.endLoad);
+  }
+
+  @action
+  disconnect() {
+    outlets.delete(this.args.name);
+    this.router.off('routeWillChange', this.startLoad);
+    this.router.off('routeDidChange', this.endLoad);
+  }
+}
diff --git a/ui-v2/app/components/role-selector/index.hbs b/ui-v2/app/components/role-selector/index.hbs
index 90820ef5f..7f366f968 100644
--- a/ui-v2/app/components/role-selector/index.hbs
+++ b/ui-v2/app/components/role-selector/index.hbs
@@ -1,4 +1,5 @@
 <ModalDialog
+  class="role-selector"
   data-test-role-form
   @onclose={{action (mut state) "role"}}
   @name="new-role-toggle"
diff --git a/ui-v2/app/components/role-selector/index.scss b/ui-v2/app/components/role-selector/index.scss
new file mode 100644
index 000000000..c29629830
--- /dev/null
+++ b/ui-v2/app/components/role-selector/index.scss
@@ -0,0 +1,9 @@
+.role-selector {
+  [name='role[state]'],
+  [name='role[state]'] + * {
+    display: none;
+  }
+  [name='role[state]']:checked + * {
+    display: block;
+  }
+}
diff --git a/ui-v2/app/components/tabular-collection/index.js b/ui-v2/app/components/tabular-collection/index.js
index 127b1017f..ddd8713d9 100644
--- a/ui-v2/app/components/tabular-collection/index.js
+++ b/ui-v2/app/components/tabular-collection/index.js
@@ -69,7 +69,7 @@ export default CollectionComponent.extend(Slotted, {
   actions: {
     resize: function(e) {
       const $tbody = this.element;
-      const $appContent = this.dom.element('main > div');
+      const $appContent = this.dom.element('.app-view');
       if ($appContent) {
         const border = 1;
         const rect = $tbody.getBoundingClientRect();
diff --git a/ui-v2/app/routes/application.js b/ui-v2/app/routes/application.js
index d421e3036..12667edc2 100644
--- a/ui-v2/app/routes/application.js
+++ b/ui-v2/app/routes/application.js
@@ -1,15 +1,10 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
-import { get, set } from '@ember/object';
 
 import WithBlockingActions from 'consul-ui/mixins/with-blocking-actions';
 
-const removeLoading = function($from) {
-  return $from.classList.remove('ember-loading', 'loading');
-};
 export default Route.extend(WithBlockingActions, {
-  dom: service('dom'),
   router: service('router'),
   nspacesRepo: service('repository/nspace/disabled'),
   repo: service('repository/dc'),
@@ -34,21 +29,10 @@ export default Route.extend(WithBlockingActions, {
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
   actions: {
-    loading: function(transition, originRoute) {
-      const from = get(transition, 'from.name') || 'application';
-      const controller = this.controllerFor(from);
-
-      set(controller, 'loading', true);
-      const $root = this.dom.root();
-      $root.classList.add('loading');
-      transition.promise.finally(() => {
-        set(controller, 'loading', false);
-        removeLoading($root);
-      });
-    },
     error: function(e, transition) {
       // TODO: Normalize all this better
       let error = {
@@ -84,7 +68,6 @@ export default Route.extend(WithBlockingActions, {
       const app = this.modelFor('application') || {};
       const dcs = app.dcs || [model.dc];
       const nspaces = app.nspaces || [model.nspace];
-      const $root = this.dom.root();
       hash({
         dc:
           error.status.toString().indexOf('5') !== 0
@@ -96,14 +79,12 @@ export default Route.extend(WithBlockingActions, {
       })
         .then(model => Promise.all([model, this.repo.clearActive()]))
         .then(([model]) => {
-          removeLoading($root);
           // we can't use setupController as we received an error
           // so we do it manually instead
           this.controllerFor('application').setProperties(model);
           this.controllerFor('error').setProperties({ error: error });
         })
         .catch(e => {
-          removeLoading($root);
           this.controllerFor('error').setProperties({ error: error });
         });
       return true;
diff --git a/ui-v2/app/routes/dc.js b/ui-v2/app/routes/dc.js
index 716d82bf1..245ee68ba 100644
--- a/ui-v2/app/routes/dc.js
+++ b/ui-v2/app/routes/dc.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash, Promise } from 'rsvp';
 import { get } from '@ember/object';
@@ -63,6 +63,7 @@ export default Route.extend({
       });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     // the model here is actually required for the entire application
     // but we need to wait until we are in this route so we know what the dc
     // and or nspace is if the below changes please revists the comments
diff --git a/ui-v2/app/routes/dc/acls.js b/ui-v2/app/routes/dc/acls.js
index 46fdd7de0..a9e8e8e12 100644
--- a/ui-v2/app/routes/dc/acls.js
+++ b/ui-v2/app/routes/dc/acls.js
@@ -1,3 +1,3 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import WithBlockingActions from 'consul-ui/mixins/with-blocking-actions';
 export default Route.extend(WithBlockingActions, {});
diff --git a/ui-v2/app/routes/dc/acls/create.js b/ui-v2/app/routes/dc/acls/create.js
index 2d5240c73..89ba3f4e3 100644
--- a/ui-v2/app/routes/dc/acls/create.js
+++ b/ui-v2/app/routes/dc/acls/create.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
@@ -17,12 +17,12 @@ export default Route.extend(WithAclActions, {
     });
     return hash({
       create: true,
-      isLoading: false,
       item: this.item,
       types: ['management', 'client'],
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
   deactivate: function() {
diff --git a/ui-v2/app/routes/dc/acls/edit.js b/ui-v2/app/routes/dc/acls/edit.js
index adb936b0d..c3895b347 100644
--- a/ui-v2/app/routes/dc/acls/edit.js
+++ b/ui-v2/app/routes/dc/acls/edit.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -9,12 +9,12 @@ export default Route.extend(WithAclActions, {
   settings: service('settings'),
   model: function(params) {
     return hash({
-      isLoading: false,
       item: this.repo.findBySlug(params.id, this.modelFor('dc').dc.Name),
       types: ['management', 'client'],
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/acls/index.js b/ui-v2/app/routes/dc/acls/index.js
index f219cfdc3..a78ab1669 100644
--- a/ui-v2/app/routes/dc/acls/index.js
+++ b/ui-v2/app/routes/dc/acls/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
@@ -28,12 +28,12 @@ export default Route.extend(WithAclActions, {
   },
   model: function(params) {
     return hash({
-      isLoading: false,
       items: this.repo.findAllByDatacenter(this.modelFor('dc').dc.Name),
       token: this.settings.findBySlug('token'),
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/acls/policies/edit.js b/ui-v2/app/routes/dc/acls/policies/edit.js
index 6ea8c6365..81e21d2e0 100644
--- a/ui-v2/app/routes/dc/acls/policies/edit.js
+++ b/ui-v2/app/routes/dc/acls/policies/edit.js
@@ -16,6 +16,7 @@ export default SingleRoute.extend(WithPolicyActions, {
       return hash({
         ...model,
         ...{
+          routeName: this.routeName,
           items: tokenRepo.findByPolicy(get(model.item, 'ID'), dc, nspace).catch(function(e) {
             switch (get(e, 'errors.firstObject.status')) {
               case '403':
@@ -30,6 +31,7 @@ export default SingleRoute.extend(WithPolicyActions, {
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/acls/policies/index.js b/ui-v2/app/routes/dc/acls/policies/index.js
index 2093dfa52..ca7b217d7 100644
--- a/ui-v2/app/routes/dc/acls/policies/index.js
+++ b/ui-v2/app/routes/dc/acls/policies/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -21,10 +21,10 @@ export default Route.extend(WithPolicyActions, {
           this.modelFor('nspace').nspace.substr(1)
         ),
       }),
-      isLoading: false,
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/acls/roles/edit.js b/ui-v2/app/routes/dc/acls/roles/edit.js
index a6b13c829..e519f4f4a 100644
--- a/ui-v2/app/routes/dc/acls/roles/edit.js
+++ b/ui-v2/app/routes/dc/acls/roles/edit.js
@@ -30,6 +30,7 @@ export default SingleRoute.extend(WithRoleActions, {
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/acls/roles/index.js b/ui-v2/app/routes/dc/acls/roles/index.js
index 7ddc7a966..f0c52d616 100644
--- a/ui-v2/app/routes/dc/acls/roles/index.js
+++ b/ui-v2/app/routes/dc/acls/roles/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -21,10 +21,10 @@ export default Route.extend(WithRoleActions, {
           this.modelFor('nspace').nspace.substr(1)
         ),
       }),
-      isLoading: false,
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/acls/tokens/edit.js b/ui-v2/app/routes/dc/acls/tokens/edit.js
index eccb6481a..bf1b106ce 100644
--- a/ui-v2/app/routes/dc/acls/tokens/edit.js
+++ b/ui-v2/app/routes/dc/acls/tokens/edit.js
@@ -12,12 +12,14 @@ export default SingleRoute.extend(WithTokenActions, {
       return hash({
         ...model,
         ...{
+          routeName: this.routeName,
           token: this.settings.findBySlug('token'),
         },
       });
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/acls/tokens/index.js b/ui-v2/app/routes/dc/acls/tokens/index.js
index 0b650963a..29ac9dab2 100644
--- a/ui-v2/app/routes/dc/acls/tokens/index.js
+++ b/ui-v2/app/routes/dc/acls/tokens/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
@@ -33,11 +33,11 @@ export default Route.extend(WithTokenActions, {
         ),
       }),
       nspace: this.modelFor('nspace').nspace.substr(1),
-      isLoading: false,
       token: this.settings.findBySlug('token'),
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/index.js b/ui-v2/app/routes/dc/index.js
index 8ff228e5c..e3694636c 100644
--- a/ui-v2/app/routes/dc/index.js
+++ b/ui-v2/app/routes/dc/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   beforeModel: function() {
diff --git a/ui-v2/app/routes/dc/intentions/edit.js b/ui-v2/app/routes/dc/intentions/edit.js
index e434a2b2e..5d24b52c2 100644
--- a/ui-v2/app/routes/dc/intentions/edit.js
+++ b/ui-v2/app/routes/dc/intentions/edit.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -19,6 +19,7 @@ export default Route.extend({
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/intentions/index.js b/ui-v2/app/routes/dc/intentions/index.js
index 16284be80..e3c3e2af6 100644
--- a/ui-v2/app/routes/dc/intentions/index.js
+++ b/ui-v2/app/routes/dc/intentions/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   queryParams: {
@@ -15,6 +15,7 @@ export default Route.extend({
     };
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/kv/edit.js b/ui-v2/app/routes/dc/kv/edit.js
index 9a916a375..6005c13d4 100644
--- a/ui-v2/app/routes/dc/kv/edit.js
+++ b/ui-v2/app/routes/dc/kv/edit.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
@@ -48,6 +48,7 @@ export default Route.extend({
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/kv/folder.js b/ui-v2/app/routes/dc/kv/folder.js
index aae571ea1..287c18c11 100644
--- a/ui-v2/app/routes/dc/kv/folder.js
+++ b/ui-v2/app/routes/dc/kv/folder.js
@@ -1,4 +1,3 @@
-// import Route from '@ember/routing/route';
 import Route from './index';
 
 export default Route.extend({
diff --git a/ui-v2/app/routes/dc/kv/index.js b/ui-v2/app/routes/dc/kv/index.js
index 01da2ac6d..1f4525bb5 100644
--- a/ui-v2/app/routes/dc/kv/index.js
+++ b/ui-v2/app/routes/dc/kv/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
@@ -26,7 +26,6 @@ export default Route.extend({
     const dc = this.modelFor('dc').dc.Name;
     const nspace = this.modelFor('nspace').nspace.substr(1);
     return hash({
-      isLoading: false,
       parent: this.repo.findBySlug(key, dc, nspace),
     }).then(model => {
       return hash({
@@ -54,6 +53,7 @@ export default Route.extend({
     },
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/nodes/index.js b/ui-v2/app/routes/dc/nodes/index.js
index 472366e5b..2be0d8b84 100644
--- a/ui-v2/app/routes/dc/nodes/index.js
+++ b/ui-v2/app/routes/dc/nodes/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -21,6 +21,7 @@ export default Route.extend({
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/nodes/show.js b/ui-v2/app/routes/dc/nodes/show.js
index 10aadb719..7a8ae9330 100644
--- a/ui-v2/app/routes/dc/nodes/show.js
+++ b/ui-v2/app/routes/dc/nodes/show.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -16,11 +16,11 @@ export default Route.extend({
       return hash({
         ...model,
         tomography: this.data.source(uri => uri`/${nspace}/${dc}/coordinates/for-node/${name}`),
-        sessions: this.data.source(uri => uri`/${nspace}/${dc}/sessions/for-node/${name}`),
       });
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/nodes/show/healthchecks.js b/ui-v2/app/routes/dc/nodes/show/healthchecks.js
index 9793d62c0..87d8c2665 100644
--- a/ui-v2/app/routes/dc/nodes/show/healthchecks.js
+++ b/ui-v2/app/routes/dc/nodes/show/healthchecks.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function() {
@@ -9,6 +9,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/nodes/show/index.js b/ui-v2/app/routes/dc/nodes/show/index.js
index e831f4a42..a12f75bc1 100644
--- a/ui-v2/app/routes/dc/nodes/show/index.js
+++ b/ui-v2/app/routes/dc/nodes/show/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { get } from '@ember/object';
 
 export default Route.extend({
diff --git a/ui-v2/app/routes/dc/nodes/show/metadata.js b/ui-v2/app/routes/dc/nodes/show/metadata.js
index 9793d62c0..87d8c2665 100644
--- a/ui-v2/app/routes/dc/nodes/show/metadata.js
+++ b/ui-v2/app/routes/dc/nodes/show/metadata.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function() {
@@ -9,6 +9,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/nodes/show/rtt.js b/ui-v2/app/routes/dc/nodes/show/rtt.js
index ba46ec04c..79a2eb6c2 100644
--- a/ui-v2/app/routes/dc/nodes/show/rtt.js
+++ b/ui-v2/app/routes/dc/nodes/show/rtt.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { get } from '@ember/object';
 
 export default Route.extend({
@@ -19,6 +19,7 @@ export default Route.extend({
     }
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/nodes/show/services.js b/ui-v2/app/routes/dc/nodes/show/services.js
index 8ceda0239..99471befc 100644
--- a/ui-v2/app/routes/dc/nodes/show/services.js
+++ b/ui-v2/app/routes/dc/nodes/show/services.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   queryParams: {
@@ -15,6 +15,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/nodes/show/sessions.js b/ui-v2/app/routes/dc/nodes/show/sessions.js
index a1c4a8864..a2cc3deee 100644
--- a/ui-v2/app/routes/dc/nodes/show/sessions.js
+++ b/ui-v2/app/routes/dc/nodes/show/sessions.js
@@ -1,8 +1,10 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
+import { hash } from 'rsvp';
 import WithBlockingActions from 'consul-ui/mixins/with-blocking-actions';
 
 export default Route.extend(WithBlockingActions, {
+  data: service('data-source/service'),
   sessionRepo: service('repository/session'),
   feedback: service('feedback'),
   model: function() {
@@ -10,23 +12,26 @@ export default Route.extend(WithBlockingActions, {
       .split('.')
       .slice(0, -1)
       .join('.');
-    return this.modelFor(parent);
+    const dc = this.modelFor('dc').dc.Name;
+    const nspace = this.modelFor('nspace').nspace.substr(1);
+    const node = this.paramsFor(parent).name;
+    return hash({
+      dc: dc,
+      nspace: nspace,
+      node: node,
+      sessions: this.data.source(uri => uri`/${nspace}/${dc}/sessions/for-node/${node}`),
+    });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
   actions: {
     invalidateSession: function(item) {
-      const dc = this.modelFor('dc').dc.Name;
-      const nspace = this.modelFor('nspace').nspace.substr(1);
-      const controller = this.controller;
+      const route = this;
       return this.feedback.execute(() => {
         return this.sessionRepo.remove(item).then(() => {
-          return this.sessionRepo.findByNode(item.Node, dc, nspace).then(function(sessions) {
-            controller.setProperties({
-              sessions: sessions,
-            });
-          });
+          route.refresh();
         });
       }, 'delete');
     },
diff --git a/ui-v2/app/routes/dc/nspaces/edit.js b/ui-v2/app/routes/dc/nspaces/edit.js
index 88b86cb4c..68da2a276 100644
--- a/ui-v2/app/routes/dc/nspaces/edit.js
+++ b/ui-v2/app/routes/dc/nspaces/edit.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -14,7 +14,6 @@ export default Route.extend(WithNspaceActions, {
     const create = this.isCreate(...arguments);
     const dc = this.modelFor('dc').dc.Name;
     return hash({
-      isLoading: false,
       create: create,
       dc: dc,
       item: create
@@ -30,6 +29,7 @@ export default Route.extend(WithNspaceActions, {
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/nspaces/index.js b/ui-v2/app/routes/dc/nspaces/index.js
index 0b115b8ee..8bcc45979 100644
--- a/ui-v2/app/routes/dc/nspaces/index.js
+++ b/ui-v2/app/routes/dc/nspaces/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -16,10 +16,10 @@ export default Route.extend(WithNspaceActions, {
   model: function(params) {
     return hash({
       items: this.data.source(uri => uri`/*/*/namespaces`),
-      isLoading: false,
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/index.js b/ui-v2/app/routes/dc/services/index.js
index 905e2bf3a..58441da9d 100644
--- a/ui-v2/app/routes/dc/services/index.js
+++ b/ui-v2/app/routes/dc/services/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 
@@ -39,6 +39,7 @@ export default Route.extend({
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/instance.js b/ui-v2/app/routes/dc/services/instance.js
index 01a52df67..0bac35b1c 100644
--- a/ui-v2/app/routes/dc/services/instance.js
+++ b/ui-v2/app/routes/dc/services/instance.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
@@ -49,6 +49,7 @@ export default Route.extend({
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/instance/addresses.js b/ui-v2/app/routes/dc/services/instance/addresses.js
index 17be8ca7c..80ca41f6d 100644
--- a/ui-v2/app/routes/dc/services/instance/addresses.js
+++ b/ui-v2/app/routes/dc/services/instance/addresses.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { get } from '@ember/object';
 
 export default Route.extend({
@@ -19,6 +19,7 @@ export default Route.extend({
     }
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/instance/exposedpaths.js b/ui-v2/app/routes/dc/services/instance/exposedpaths.js
index 1ee1fe954..156016c5c 100644
--- a/ui-v2/app/routes/dc/services/instance/exposedpaths.js
+++ b/ui-v2/app/routes/dc/services/instance/exposedpaths.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { get } from '@ember/object';
 
 export default Route.extend({
@@ -22,6 +22,7 @@ export default Route.extend({
     }
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/instance/healthchecks.js b/ui-v2/app/routes/dc/services/instance/healthchecks.js
index 9793d62c0..87d8c2665 100644
--- a/ui-v2/app/routes/dc/services/instance/healthchecks.js
+++ b/ui-v2/app/routes/dc/services/instance/healthchecks.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function() {
@@ -9,6 +9,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/instance/index.js b/ui-v2/app/routes/dc/services/instance/index.js
index e552f0338..9f3bbb0f2 100644
--- a/ui-v2/app/routes/dc/services/instance/index.js
+++ b/ui-v2/app/routes/dc/services/instance/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import to from 'consul-ui/utils/routing/redirect-to';
 
 export default Route.extend({
diff --git a/ui-v2/app/routes/dc/services/instance/metadata.js b/ui-v2/app/routes/dc/services/instance/metadata.js
index 9793d62c0..87d8c2665 100644
--- a/ui-v2/app/routes/dc/services/instance/metadata.js
+++ b/ui-v2/app/routes/dc/services/instance/metadata.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function() {
@@ -9,6 +9,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/instance/proxy.js b/ui-v2/app/routes/dc/services/instance/proxy.js
index 9793d62c0..87d8c2665 100644
--- a/ui-v2/app/routes/dc/services/instance/proxy.js
+++ b/ui-v2/app/routes/dc/services/instance/proxy.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function() {
@@ -9,6 +9,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/instance/upstreams.js b/ui-v2/app/routes/dc/services/instance/upstreams.js
index a31853b18..2bdffb3a8 100644
--- a/ui-v2/app/routes/dc/services/instance/upstreams.js
+++ b/ui-v2/app/routes/dc/services/instance/upstreams.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { get } from '@ember/object';
 
 export default Route.extend({
@@ -19,6 +19,7 @@ export default Route.extend({
     }
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/notfound.js b/ui-v2/app/routes/dc/services/notfound.js
index c444e0eba..74dda4a60 100644
--- a/ui-v2/app/routes/dc/services/notfound.js
+++ b/ui-v2/app/routes/dc/services/notfound.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   redirect: function(model, transition) {
diff --git a/ui-v2/app/routes/dc/services/show.js b/ui-v2/app/routes/dc/services/show.js
index 04db68abf..bd06b5483 100644
--- a/ui-v2/app/routes/dc/services/show.js
+++ b/ui-v2/app/routes/dc/services/show.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
@@ -46,6 +46,7 @@ export default Route.extend({
       });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/show/index.js b/ui-v2/app/routes/dc/services/show/index.js
index a70cc5503..ae75a29b7 100644
--- a/ui-v2/app/routes/dc/services/show/index.js
+++ b/ui-v2/app/routes/dc/services/show/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import to from 'consul-ui/utils/routing/redirect-to';
 
 export default Route.extend({
diff --git a/ui-v2/app/routes/dc/services/show/instances.js b/ui-v2/app/routes/dc/services/show/instances.js
index 8ceda0239..99471befc 100644
--- a/ui-v2/app/routes/dc/services/show/instances.js
+++ b/ui-v2/app/routes/dc/services/show/instances.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   queryParams: {
@@ -15,6 +15,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/show/intentions.js b/ui-v2/app/routes/dc/services/show/intentions.js
index b9e2cdfe5..de21844a9 100644
--- a/ui-v2/app/routes/dc/services/show/intentions.js
+++ b/ui-v2/app/routes/dc/services/show/intentions.js
@@ -1,3 +1,8 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
-export default Route.extend();
+export default Route.extend({
+  setupController: function(controller, model) {
+    this._super(...arguments);
+    controller.setProperties(model);
+  },
+});
diff --git a/ui-v2/app/routes/dc/services/show/intentions/edit.js b/ui-v2/app/routes/dc/services/show/intentions/edit.js
index af43c7987..d721d9578 100644
--- a/ui-v2/app/routes/dc/services/show/intentions/edit.js
+++ b/ui-v2/app/routes/dc/services/show/intentions/edit.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function(params, transition) {
@@ -10,6 +10,7 @@ export default Route.extend({
     };
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/show/intentions/index.js b/ui-v2/app/routes/dc/services/show/intentions/index.js
index 82699716b..f0e2b3a50 100644
--- a/ui-v2/app/routes/dc/services/show/intentions/index.js
+++ b/ui-v2/app/routes/dc/services/show/intentions/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   queryParams: {
@@ -15,6 +15,7 @@ export default Route.extend({
     };
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/show/routing.js b/ui-v2/app/routes/dc/services/show/routing.js
index 796e1d65f..a4f90f65e 100644
--- a/ui-v2/app/routes/dc/services/show/routing.js
+++ b/ui-v2/app/routes/dc/services/show/routing.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { get } from '@ember/object';
 
 export default Route.extend({
@@ -19,6 +19,7 @@ export default Route.extend({
     }
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/show/services.js b/ui-v2/app/routes/dc/services/show/services.js
index 9793d62c0..87d8c2665 100644
--- a/ui-v2/app/routes/dc/services/show/services.js
+++ b/ui-v2/app/routes/dc/services/show/services.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function() {
@@ -9,6 +9,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/show/tags.js b/ui-v2/app/routes/dc/services/show/tags.js
index 9793d62c0..87d8c2665 100644
--- a/ui-v2/app/routes/dc/services/show/tags.js
+++ b/ui-v2/app/routes/dc/services/show/tags.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function() {
@@ -9,6 +9,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/dc/services/show/upstreams.js b/ui-v2/app/routes/dc/services/show/upstreams.js
index 9793d62c0..87d8c2665 100644
--- a/ui-v2/app/routes/dc/services/show/upstreams.js
+++ b/ui-v2/app/routes/dc/services/show/upstreams.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 
 export default Route.extend({
   model: function() {
@@ -9,6 +9,7 @@ export default Route.extend({
     return this.modelFor(parent);
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
 });
diff --git a/ui-v2/app/routes/index.js b/ui-v2/app/routes/index.js
index 5fc90236f..b469ac2ee 100644
--- a/ui-v2/app/routes/index.js
+++ b/ui-v2/app/routes/index.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get } from '@ember/object';
diff --git a/ui-v2/app/routes/notfound.js b/ui-v2/app/routes/notfound.js
index 8ec8e2528..bd50ac724 100644
--- a/ui-v2/app/routes/notfound.js
+++ b/ui-v2/app/routes/notfound.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import Error from '@ember/error';
 
 export default Route.extend({
diff --git a/ui-v2/app/routes/nspace.js b/ui-v2/app/routes/nspace.js
index 4f7a3f3b1..9a1acc3e5 100644
--- a/ui-v2/app/routes/nspace.js
+++ b/ui-v2/app/routes/nspace.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { getOwner } from '@ember/application';
diff --git a/ui-v2/app/routes/settings.js b/ui-v2/app/routes/settings.js
index 22770105c..57e970f0f 100644
--- a/ui-v2/app/routes/settings.js
+++ b/ui-v2/app/routes/settings.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { inject as service } from '@ember/service';
 import { hash } from 'rsvp';
 import { get, set } from '@ember/object';
@@ -22,6 +22,7 @@ export default Route.extend({
     });
   },
   setupController: function(controller, model) {
+    this._super(...arguments);
     controller.setProperties(model);
   },
   actions: {
diff --git a/ui-v2/app/routing/route.js b/ui-v2/app/routing/route.js
new file mode 100644
index 000000000..f6c3d730c
--- /dev/null
+++ b/ui-v2/app/routing/route.js
@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+import { setProperties } from '@ember/object';
+
+/**
+ * Set the routeName for the controller so that it is
+ * available in the template for the route/controller
+ */
+export default class BaseRoute extends Route {
+  setupController(controller, model) {
+    setProperties(controller, {
+      routeName: this.routeName,
+    });
+    super.setupController(...arguments);
+  }
+}
diff --git a/ui-v2/app/routing/single.js b/ui-v2/app/routing/single.js
index de247dbfc..d221aa8ab 100644
--- a/ui-v2/app/routing/single.js
+++ b/ui-v2/app/routing/single.js
@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from 'consul-ui/routing/route';
 import { assert } from '@ember/debug';
 import { Promise, hash } from 'rsvp';
 export default Route.extend({
@@ -16,7 +16,6 @@ export default Route.extend({
     const nspace = this.modelFor('nspace').nspace.substr(1);
     const create = this.isCreate(...arguments);
     return hash({
-      isLoading: false,
       dc: dc,
       nspace: nspace,
       create: create,
diff --git a/ui-v2/app/services/feedback.js b/ui-v2/app/services/feedback.js
index fd71648b3..8815192f2 100644
--- a/ui-v2/app/services/feedback.js
+++ b/ui-v2/app/services/feedback.js
@@ -1,5 +1,4 @@
 import Service, { inject as service } from '@ember/service';
-import { set } from '@ember/object';
 import callableType from 'consul-ui/utils/callable-type';
 
 const TYPE_SUCCESS = 'success';
@@ -17,7 +16,6 @@ export default Service.extend({
   notify: service('flashMessages'),
   logger: service('logger'),
   execute: function(handle, action, status = defaultStatus, controller) {
-    set(controller, 'isLoading', true);
     const getAction = callableType(action);
     const getStatus = callableType(status);
     const notify = this.notify;
@@ -59,9 +57,6 @@ export default Service.extend({
             });
           }
         })
-        .finally(function() {
-          set(controller, 'isLoading', false);
-        })
     );
   },
 });
diff --git a/ui-v2/app/styles/components.scss b/ui-v2/app/styles/components.scss
index 11bd086a9..a49e66ee4 100644
--- a/ui-v2/app/styles/components.scss
+++ b/ui-v2/app/styles/components.scss
@@ -66,3 +66,4 @@
 @import 'consul-ui/components/consul-intention-permission-list';
 @import 'consul-ui/components/consul-intention-permission-form';
 @import 'consul-ui/components/consul-intention-permission-header-list';
+@import 'consul-ui/components/role-selector';
diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss
index 28541712b..1a3f92e08 100644
--- a/ui-v2/app/styles/components/app-view.scss
+++ b/ui-v2/app/styles/components/app-view.scss
@@ -8,8 +8,8 @@ main {
   overflow: visible !important;
 }
 
-%app-view > div.unauthorized,
-%app-view > div.error {
+%app-view .outlet > div.unauthorized,
+%app-view .outlet > div.error {
   @extend %app-view-error;
 }
 %app-view header form {
diff --git a/ui-v2/app/styles/components/app-view/index.scss b/ui-v2/app/styles/components/app-view/index.scss
index 008b0a8ae..d2502e623 100644
--- a/ui-v2/app/styles/components/app-view/index.scss
+++ b/ui-v2/app/styles/components/app-view/index.scss
@@ -1,6 +1,6 @@
 @import './skin';
 @import './layout';
-%app-view > div > header {
+%app-view .outlet > div > header {
   @extend %app-view-header;
 }
 %app-view-header .title {
@@ -9,6 +9,6 @@
 %app-view-header .actions {
   @extend %app-view-actions;
 }
-%app-view > div > div {
+%app-view .outlet > div > div {
   @extend %app-view-content;
 }
diff --git a/ui-v2/app/styles/components/loader.scss b/ui-v2/app/styles/components/loader.scss
index 336916d1a..d9c9c45f7 100644
--- a/ui-v2/app/styles/components/loader.scss
+++ b/ui-v2/app/styles/components/loader.scss
@@ -5,9 +5,10 @@
 %loader circle {
   fill: $magenta-100;
 }
-html:not(.loading) .view-loader {
+html.ember-loading .view-loader,
+html[data-state='idle'] .view-loader {
   display: none;
 }
-html.loading .app-view {
+.outlet[data-state='loading'] {
   display: none;
 }
diff --git a/ui-v2/app/styles/layout.scss b/ui-v2/app/styles/layout.scss
index 2cd29bd19..5abb7532a 100644
--- a/ui-v2/app/styles/layout.scss
+++ b/ui-v2/app/styles/layout.scss
@@ -28,7 +28,7 @@ main,
 #wrapper > footer {
   @extend %content-container;
 }
-html.template-edit main {
+html[data-route$='.edit'] main {
   @extend %content-container-restricted;
 }
 
diff --git a/ui-v2/app/styles/routes/dc/acls/index.scss b/ui-v2/app/styles/routes/dc/acls/index.scss
index f2e039d8b..55b1f30d0 100644
--- a/ui-v2/app/styles/routes/dc/acls/index.scss
+++ b/ui-v2/app/styles/routes/dc/acls/index.scss
@@ -1,40 +1,33 @@
-html.template-acl.template-list main td strong {
+html[data-route^='dc.acls.index'] main td strong {
   @extend %pill-500, %frame-gray-900;
   margin-right: 3px;
 }
-html.template-acl.template-list .filter-bar {
+html[data-route^='dc.acls.index'] .filter-bar {
   @extend %filter-bar-reversed;
 }
-html.template-acl.template-list .filter-bar [role='radiogroup'] {
+html[data-route^='dc.acls.index'] .filter-bar [role='radiogroup'] {
   @extend %expanded-single-select;
 }
 @media #{$--horizontal-tabs} {
-  .template-policy.template-list main header .actions,
-  .template-token.template-list main header .actions {
+  html[data-route^='dc.acls.policies.index'] main header .actions,
+  html[data-route^='dc.acls.policies.index'] main header .actions {
     position: relative;
     top: 42px;
   }
 }
 
 @media #{$--lt-wide-form} {
-  html.template-acl.template-edit main header .actions {
+  html[data-route^='dc.acls.edit'] main header .actions {
     float: none;
     display: flex;
     justify-content: space-between;
     margin-bottom: 1em;
   }
-  html.template-acl.template-edit main header .actions .with-feedback {
+  html[data-route^='dc.acls.edit'] main header .actions .with-feedback {
     position: absolute;
     right: 0;
   }
-  html.template-acl.template-edit main header .actions .with-confirmation {
+  html[data-route^='dc.acls.edit'] main header .actions .with-confirmation {
     margin-top: 0;
   }
 }
-[name='role[state]'],
-[name='role[state]'] + * {
-  display: none;
-}
-[name='role[state]']:checked + * {
-  display: block;
-}
diff --git a/ui-v2/app/styles/routes/dc/kv/index.scss b/ui-v2/app/styles/routes/dc/kv/index.scss
index 52f96b767..9532c59d4 100644
--- a/ui-v2/app/styles/routes/dc/kv/index.scss
+++ b/ui-v2/app/styles/routes/dc/kv/index.scss
@@ -1,8 +1,4 @@
-html.template-kv.template-edit div > .with-confirmation {
-  float: none;
-  margin-top: 1.7em;
-}
-html.template-kv.template-edit .type-toggle {
+html[data-route^='dc.kv.edit'] .type-toggle {
   float: right;
   margin-bottom: 0 !important;
 }
diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss
index 58d89f088..09c09f9f5 100644
--- a/ui-v2/app/styles/routes/dc/nodes/index.scss
+++ b/ui-v2/app/styles/routes/dc/nodes/index.scss
@@ -1,3 +1,3 @@
-html.template-node.template-show #meta-data table tr {
+html[data-route^='dc.nodes.show.metadata'] table tr {
   cursor: default;
 }
diff --git a/ui-v2/app/styles/routes/dc/services/index.scss b/ui-v2/app/styles/routes/dc/services/index.scss
index f444421e9..3195ad6ac 100644
--- a/ui-v2/app/styles/routes/dc/services/index.scss
+++ b/ui-v2/app/styles/routes/dc/services/index.scss
@@ -1,10 +1,10 @@
 /* instance detail dl text*/
-html.template-instance.template-show .app-view > header dl {
+html[data-route^='dc.services.instance'] .app-view > header dl {
   float: left;
   margin-top: 19px;
   margin-bottom: 23px;
   margin-right: 50px;
 }
-html.template-instance.template-show .app-view > header dt {
+html[data-route^='dc.services.instance'] .app-view > header dt {
   font-weight: $typo-weight-bold;
 }
diff --git a/ui-v2/app/templates/application.hbs b/ui-v2/app/templates/application.hbs
index ae2f3bc4b..5b4719d5e 100644
--- a/ui-v2/app/templates/application.hbs
+++ b/ui-v2/app/templates/application.hbs
@@ -10,7 +10,11 @@
     @nspace={{or nspace nspaces.firstObject}}
     @onchange={{action "reauthorize"}}
   >
-  {{outlet}}
+  <Outlet
+  @name="application"
+  as |o|>
+    {{outlet}}
+  </Outlet>
     <ConsulLoader class="view-loader" />
   </HashicorpConsul>
 {{/if}}
diff --git a/ui-v2/app/templates/dc.hbs b/ui-v2/app/templates/dc.hbs
index c24cd6895..d20d940ec 100644
--- a/ui-v2/app/templates/dc.hbs
+++ b/ui-v2/app/templates/dc.hbs
@@ -1 +1,5 @@
-{{outlet}}
+<Outlet
+  @name={{routeName}}
+as |o|>
+  {{outlet}}
+</Outlet>
diff --git a/ui-v2/app/templates/dc/acls/edit.hbs b/ui-v2/app/templates/dc/acls/edit.hbs
index c42ef6915..2e9370103 100644
--- a/ui-v2/app/templates/dc/acls/edit.hbs
+++ b/ui-v2/app/templates/dc/acls/edit.hbs
@@ -1,4 +1,4 @@
-<AppView @class="acl edit" @loading={{isLoading}}>
+<AppView>
     <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/acls/notifications'}}
     </BlockSlot>
diff --git a/ui-v2/app/templates/dc/acls/index.hbs b/ui-v2/app/templates/dc/acls/index.hbs
index 35fc23195..ddd7e96df 100644
--- a/ui-v2/app/templates/dc/acls/index.hbs
+++ b/ui-v2/app/templates/dc/acls/index.hbs
@@ -7,7 +7,7 @@
     )
     as |filter|
   }}
-<AppView @class="acl list" @loading={{isLoading}}>
+<AppView>
   <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/acls/notifications'}}
   </BlockSlot>
diff --git a/ui-v2/app/templates/dc/acls/policies/edit.hbs b/ui-v2/app/templates/dc/acls/policies/edit.hbs
index 495648c01..f8d6da715 100644
--- a/ui-v2/app/templates/dc/acls/policies/edit.hbs
+++ b/ui-v2/app/templates/dc/acls/policies/edit.hbs
@@ -8,8 +8,6 @@
   {{title 'Access Controls'}}
 {{/if}}
 <AppView
-  @class={{concat "policy " (if isAuthorized "edit" "list")}}
-  @loading={{isLoading}}
   @authorized={{isAuthorized}}
   @enabled={{isEnabled}}
   >
diff --git a/ui-v2/app/templates/dc/acls/policies/index.hbs b/ui-v2/app/templates/dc/acls/policies/index.hbs
index b7c7094b6..b7fb63dca 100644
--- a/ui-v2/app/templates/dc/acls/policies/index.hbs
+++ b/ui-v2/app/templates/dc/acls/policies/index.hbs
@@ -9,8 +9,6 @@
 ) as |filters|}}
   {{#let (or sortBy "Name:asc") as |sort|}}
     <AppView
-      @class="policy list"
-      @loading={{isLoading}}
       @authorized={{isAuthorized}}
       @enabled={{isEnabled}}
       >
diff --git a/ui-v2/app/templates/dc/acls/roles/edit.hbs b/ui-v2/app/templates/dc/acls/roles/edit.hbs
index f07dc5d35..5cc6c36ba 100644
--- a/ui-v2/app/templates/dc/acls/roles/edit.hbs
+++ b/ui-v2/app/templates/dc/acls/roles/edit.hbs
@@ -8,8 +8,6 @@
   {{title 'Access Controls'}}
 {{/if}}
 <AppView
-  @class={{concat "role " (if isAuthorized "edit" "list")}}
-  @loading={{isLoading}}
   @authorized={{isAuthorized}}
   @enabled={{isEnabled}}
   >
diff --git a/ui-v2/app/templates/dc/acls/roles/index.hbs b/ui-v2/app/templates/dc/acls/roles/index.hbs
index b37322536..738d4f36f 100644
--- a/ui-v2/app/templates/dc/acls/roles/index.hbs
+++ b/ui-v2/app/templates/dc/acls/roles/index.hbs
@@ -6,8 +6,6 @@
 
 {{#let (or sortBy "Name:asc") as |sort|}}
 <AppView
-  @class="role list"
-  @loading={{isLoading}}
   @authorized={{isAuthorized}}
   @enabled={{isEnabled}}
   >
diff --git a/ui-v2/app/templates/dc/acls/tokens/edit.hbs b/ui-v2/app/templates/dc/acls/tokens/edit.hbs
index e648a8058..bc7bb1b6e 100644
--- a/ui-v2/app/templates/dc/acls/tokens/edit.hbs
+++ b/ui-v2/app/templates/dc/acls/tokens/edit.hbs
@@ -8,8 +8,6 @@
   {{title 'Access Controls'}}
 {{/if}}
 <AppView
-  @class={{concat "token " (if isAuthorized "edit" "list")}}
-  @loading={{isLoading}}
   @authorized={{isAuthorized}}
   @enabled={{isEnabled}}
   >
diff --git a/ui-v2/app/templates/dc/acls/tokens/index.hbs b/ui-v2/app/templates/dc/acls/tokens/index.hbs
index d1fad80e1..f5dbad25e 100644
--- a/ui-v2/app/templates/dc/acls/tokens/index.hbs
+++ b/ui-v2/app/templates/dc/acls/tokens/index.hbs
@@ -9,8 +9,6 @@
 ) as |filters|}}
   {{#let (or sortBy "CreateTime:desc") as |sort|}}
     <AppView
-      @class="token list"
-      @loading={{isLoading}}
       @authorized={{isAuthorized}}
       @enabled={{isEnabled}}
       >
diff --git a/ui-v2/app/templates/dc/intentions/edit.hbs b/ui-v2/app/templates/dc/intentions/edit.hbs
index 4ebf47a87..3180d600a 100644
--- a/ui-v2/app/templates/dc/intentions/edit.hbs
+++ b/ui-v2/app/templates/dc/intentions/edit.hbs
@@ -3,7 +3,7 @@
 {{else}}
     {{title 'New Intention'}}
 {{/if}}
-<AppView @class="intention edit">
+<AppView>
     <BlockSlot @name="breadcrumbs">
         <ol>
           <li><a data-test-back href={{href-to 'dc.intentions'}}>All Intentions</a></li>
diff --git a/ui-v2/app/templates/dc/intentions/index.hbs b/ui-v2/app/templates/dc/intentions/index.hbs
index 80047c2dd..f7511e7ce 100644
--- a/ui-v2/app/templates/dc/intentions/index.hbs
+++ b/ui-v2/app/templates/dc/intentions/index.hbs
@@ -11,7 +11,7 @@
     accesses=(if access (split access ',') undefined)
   ) as |filters|}}
     {{#let (or sortBy "Action:asc") as |sort|}}
-      <AppView @class="intention list">
+      <AppView>
         <BlockSlot @name="header">
             <h1>
                 Intentions <em>{{format-number items.length}} total</em>
diff --git a/ui-v2/app/templates/dc/kv/edit.hbs b/ui-v2/app/templates/dc/kv/edit.hbs
index fcb15f31a..894921ad8 100644
--- a/ui-v2/app/templates/dc/kv/edit.hbs
+++ b/ui-v2/app/templates/dc/kv/edit.hbs
@@ -3,7 +3,7 @@
 {{else}}
   {{title 'New Key/Value'}}
 {{/if}}
-<AppView @class="kv edit">
+<AppView>
   <BlockSlot @name="breadcrumbs">
     <ol>
         <li><a data-test-back href={{href-to 'dc.kv.index'}}>Key / Values</a></li>
diff --git a/ui-v2/app/templates/dc/kv/index.hbs b/ui-v2/app/templates/dc/kv/index.hbs
index b21cdafd3..c6b056067 100644
--- a/ui-v2/app/templates/dc/kv/index.hbs
+++ b/ui-v2/app/templates/dc/kv/index.hbs
@@ -1,6 +1,6 @@
 {{title 'Key/Value'}}
 {{#let (or sortBy "isFolder:asc") as |sort|}}
-  <AppView @class="kv list">
+  <AppView>
     <BlockSlot @name="breadcrumbs">
       <ol>
   {{#if (not-eq parent.Key '/') }}
diff --git a/ui-v2/app/templates/dc/nodes/index.hbs b/ui-v2/app/templates/dc/nodes/index.hbs
index 558b18205..19dd4c27b 100644
--- a/ui-v2/app/templates/dc/nodes/index.hbs
+++ b/ui-v2/app/templates/dc/nodes/index.hbs
@@ -4,7 +4,7 @@
   statuses=(if status (split status ',') undefined)
 ) as |filters|}}
 {{#let (or sortBy "Node:asc") as |sort|}}
-  <AppView @class="node list">
+  <AppView>
     <BlockSlot @name="header">
       <h1>
         Nodes <em>{{format-number items.length}} total</em>
diff --git a/ui-v2/app/templates/dc/nodes/show.hbs b/ui-v2/app/templates/dc/nodes/show.hbs
index 3da01b62a..146f84c44 100644
--- a/ui-v2/app/templates/dc/nodes/show.hbs
+++ b/ui-v2/app/templates/dc/nodes/show.hbs
@@ -2,7 +2,6 @@
 <DataLoader as |api|>
 
   <BlockSlot @name="data">
-    <EventSource @src={{sessions}} />
     <EventSource @src={{tomography}} />
     <EventSource @src={{item}} @onerror={{queue (action api.dispatchError)}} />
   </BlockSlot>
@@ -30,7 +29,7 @@
   </BlockSlot>
 
   <BlockSlot @name="loaded">
-    <AppView @class="node show">
+    <AppView>
         <BlockSlot @name="notification" as |status type|>
           {{!TODO: Move sessions to its own folder within nodes }}
           {{partial 'dc/nodes/notifications'}}
@@ -62,7 +61,11 @@
           <CopyButton @value={{item.Address}} @name="Address">{{item.Address}}</CopyButton>
         </BlockSlot>
         <BlockSlot @name="content">
-          {{outlet}}
+          <Outlet
+            @name={{routeName}}
+          as |o|>
+            {{outlet}}
+          </Outlet>
         </BlockSlot>
     </AppView>
 
diff --git a/ui-v2/app/templates/dc/nodes/show/sessions.hbs b/ui-v2/app/templates/dc/nodes/show/sessions.hbs
index 85ac9ae9c..f0aad75d2 100644
--- a/ui-v2/app/templates/dc/nodes/show/sessions.hbs
+++ b/ui-v2/app/templates/dc/nodes/show/sessions.hbs
@@ -1,3 +1,4 @@
+<EventSource @src={{sessions}} />
 <div id="lock-sessions" class="tab-section">
   <div role="tabpanel">
 {{#if (gt sessions.length 0)}}
diff --git a/ui-v2/app/templates/dc/nspaces/edit.hbs b/ui-v2/app/templates/dc/nspaces/edit.hbs
index da9c67588..d19f889a7 100644
--- a/ui-v2/app/templates/dc/nspaces/edit.hbs
+++ b/ui-v2/app/templates/dc/nspaces/edit.hbs
@@ -3,7 +3,7 @@
 {{else}}
   {{title 'Edit Namespace'}}
 {{/if}}
-<AppView @class="nspace edit" @loading={{isLoading}}>
+<AppView>
   <BlockSlot @name="notification" as |status type item error|>
     {{partial 'dc/nspaces/notifications'}}
   </BlockSlot>
diff --git a/ui-v2/app/templates/dc/nspaces/index.hbs b/ui-v2/app/templates/dc/nspaces/index.hbs
index 034d71331..25fb43c91 100644
--- a/ui-v2/app/templates/dc/nspaces/index.hbs
+++ b/ui-v2/app/templates/dc/nspaces/index.hbs
@@ -1,7 +1,7 @@
 {{title 'Namespaces'}}
 {{#let (or sortBy "Name:asc") as |sort|}}
 <EventSource @src={{items}} />
-<AppView @class="nspace list" @loading={{isLoading}}>
+<AppView>
   <BlockSlot @name="notification" as |status type subject|>
     {{partial 'dc/nspaces/notifications'}}
   </BlockSlot>
diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs
index 3eacce3fc..1365e8780 100644
--- a/ui-v2/app/templates/dc/services/index.hbs
+++ b/ui-v2/app/templates/dc/services/index.hbs
@@ -6,7 +6,7 @@
   sources=(if source (split source ',') undefined)
 ) as |filters|}}
   {{#let (or sortBy "Name:asc") as |sort|}}
-    <AppView @class="service list">
+    <AppView>
       <BlockSlot @name="notification" as |status type|>
         {{partial 'dc/services/notifications'}}
       </BlockSlot>
diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs
index d38e093db..d9db2a658 100644
--- a/ui-v2/app/templates/dc/services/instance.hbs
+++ b/ui-v2/app/templates/dc/services/instance.hbs
@@ -2,7 +2,7 @@
 <EventSource @src={{item}} @onerror={{action "error"}} />
 <EventSource @src={{proxy}} />
 <EventSource @src={{proxyMeta}} />
-<AppView @class="instance show">
+<AppView>
     <BlockSlot @name="notification" as |status type|>
       {{partial 'dc/services/notifications'}}
     </BlockSlot>
@@ -50,6 +50,10 @@
                       (hash label="Tags & Meta" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
               )
         }}/>
+      <Outlet
+        @name={{routeName}}
+      as |o|>
         {{outlet}}
+      </Outlet>
     </BlockSlot>
 </AppView>
\ No newline at end of file
diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs
index f74e043bf..0b1a373e1 100644
--- a/ui-v2/app/templates/dc/services/show.hbs
+++ b/ui-v2/app/templates/dc/services/show.hbs
@@ -4,7 +4,7 @@
 <EventSource @src={{proxies}} />
 <EventSource @src={{gatewayServices}} />
 {{title item.Service.Service}}
-<AppView @class="service show">
+<AppView>
   <BlockSlot @name="notification" as |status type|>
     {{partial 'dc/services/notifications'}}
   </BlockSlot>
@@ -51,6 +51,10 @@
     {{/if}}
   </BlockSlot>
   <BlockSlot @name="content">
-    {{outlet}}
+    <Outlet
+      @name={{routeName}}
+    as |o|>
+      {{outlet}}
+    </Outlet>
   </BlockSlot>
 </AppView>
\ No newline at end of file
diff --git a/ui-v2/app/templates/dc/services/show/intentions.hbs b/ui-v2/app/templates/dc/services/show/intentions.hbs
index c24cd6895..d20d940ec 100644
--- a/ui-v2/app/templates/dc/services/show/intentions.hbs
+++ b/ui-v2/app/templates/dc/services/show/intentions.hbs
@@ -1 +1,5 @@
-{{outlet}}
+<Outlet
+  @name={{routeName}}
+as |o|>
+  {{outlet}}
+</Outlet>
diff --git a/ui-v2/app/templates/nspace.hbs b/ui-v2/app/templates/nspace.hbs
index e2147cab0..2929fdf92 100644
--- a/ui-v2/app/templates/nspace.hbs
+++ b/ui-v2/app/templates/nspace.hbs
@@ -1 +1,5 @@
-{{outlet}}
\ No newline at end of file
+<Outlet
+  @name={{routeName}}
+as |o|>
+  {{outlet}}
+</Outlet>
\ No newline at end of file
diff --git a/ui-v2/app/templates/settings.hbs b/ui-v2/app/templates/settings.hbs
index 27523164b..94e719bed 100644
--- a/ui-v2/app/templates/settings.hbs
+++ b/ui-v2/app/templates/settings.hbs
@@ -1,5 +1,5 @@
 {{title "Settings"}}
-<AppView @class="settings show">
+<AppView>
   <BlockSlot @name="header">
     <h1>
       Settings
diff --git a/ui-v2/tests/acceptance/login-errors.feature b/ui-v2/tests/acceptance/login-errors.feature
index f045d4f4c..897426553 100644
--- a/ui-v2/tests/acceptance/login-errors.feature
+++ b/ui-v2/tests/acceptance/login-errors.feature
@@ -22,7 +22,7 @@ Feature: login-errors: Login Errors
       dc: dc-1
     ---
     Then the url should be /dc-1/acls/tokens
-    Then ".app-view" has the "unauthorized" class
+    Then I see login on the emptystate
   @notNamespaceable
   Scenario: I get a 500 error from acl/token/self that is the specific legacy one
     Given 1 datacenter model with the value "dc-1"
@@ -42,7 +42,7 @@ Feature: login-errors: Login Errors
       dc: dc-1
     ---
     Then the url should be /dc-1/acls/tokens
-    Then ".app-view" has the "unauthorized" class
+    Then I see login on the emptystate
     And I click login on the navigation
     And I fill in the auth form with yaml
     ---
diff --git a/ui-v2/tests/acceptance/page-navigation.feature b/ui-v2/tests/acceptance/page-navigation.feature
index b726758e8..aed251312 100644
--- a/ui-v2/tests/acceptance/page-navigation.feature
+++ b/ui-v2/tests/acceptance/page-navigation.feature
@@ -58,7 +58,6 @@ Feature: page-navigation
       - /v1/namespaces
       - /v1/internal/ui/node/node-0?dc=dc-1
       - /v1/coordinate/nodes?dc=dc-1
-      - /v1/session/node/node-0?dc=dc-1&ns=@namespace
     ---
   Scenario: The kv detail page calls the correct API endpoints
     When I visit the kv page for yaml
diff --git a/ui-v2/tests/pages.js b/ui-v2/tests/pages.js
index 2735a3a47..1b46fdeb6 100644
--- a/ui-v2/tests/pages.js
+++ b/ui-v2/tests/pages.js
@@ -27,6 +27,7 @@ import authFormFactory from 'consul-ui/components/auth-form/pageobject';
 import freetextFilterFactory from 'consul-ui/components/freetext-filter/pageobject';
 
 import searchBarFactory from 'consul-ui/components/search-bar/pageobject';
+import emptyStateFactory from 'consul-ui/components/empty-state/pageobject';
 
 import policyFormFactory from 'consul-ui/components/policy-form/pageobject';
 import policySelectorFactory from 'consul-ui/components/policy-selector/pageobject';
@@ -89,6 +90,7 @@ const roleSelector = roleSelectorFactory(clickable, deletable, collection, alias
 
 const morePopoverMenu = morePopoverMenuFactory(clickable);
 const popoverSelect = popoverSelectFactory(clickable, collection);
+const emptyState = emptyStateFactory(isPresent);
 
 const consulIntentionList = consulIntentionListFactory(collection, clickable, attribute, deletable);
 const consulNspaceList = consulNspaceListFactory(
@@ -121,7 +123,7 @@ const consulPolicyList = consulPolicyListFactory(
   morePopoverMenu
 );
 
-const page = pageFactory(collection, clickable, attribute, is, authForm);
+const page = pageFactory(collection, clickable, attribute, is, authForm, emptyState);
 
 // pages
 const create = function(appView) {