ui: Ensure we clean up javascript based DataSources

DataSources added via javascript require cleaning up by assigning it to
an EventSource component in the template, otherwise the blocking query
can stick around when its no longer needed.

We also took the opportunity here to make this consistent with the rest
of the application.

1. Don't use `@model`.
2. Use our <Route /> component.
3. Use extra divs/spans specifically for styling only as a last resort.

ui/packages/consul-ui/app/routes/dc/routing-config.js

@@ -13,7 +13,12 @@ export default class RoutingConfigRoute extends Route {
       dc: dc,
       nspace: nspace,
       slug: name,
-      chain: await this.data.source(uri => uri`/${nspace}/${dc}/discovery-chain/${params.name}`),
+      chain: await this.data.source(uri => uri`/${nspace}/${dc}/discovery-chain/${name}`),
     };
   }
+
+  setupController(controller, model) {
+    super.setupController(...arguments);
+    controller.setProperties(model);
+  }
 }

ui/packages/consul-ui/app/styles/layout.scss

@@ -46,11 +46,11 @@ html[data-route$='edit'] .app-view > header + div > *:first-child {
 }
 /* most tabs have margin after the tab bar, unless the tab has a filter bar */
 /* if it is a filter bar and the thing after the filter bar is a p then it also */
-/* needs a top margun :S */
+/* needs a top margin :S */
 %app-view-content .tab-section > *:first-child:not(.filter-bar):not(table),
 %app-view-content .tab-section > .search-bar + p,
 %app-view-content .tab-section .consul-health-check-list,
-%app-view-content .container {
+html[data-route$='dc.routing-config'] .discovery-chain {
   margin-top: 1.25em;
 }
 .consul-upstream-instance-list,

ui/packages/consul-ui/app/templates/dc/routing-config.hbs

@@ -1,22 +1,27 @@
-{{page-title @model.slug}}
+<Route
+  @name={{routeName}}
+  @title={{slug}}
+as |route|>
 
-<AppView>
-  <BlockSlot @name="breadcrumbs">
-    <ol>
-        <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
-    </ol>
-  </BlockSlot>
-  <BlockSlot @name="header">
-    <h1>
-      {{@model.slug}}
-    </h1>
-    <Consul::Source @source={{t "routes.dc.routing-config.source"}} @withInfo={{true}} />
-  </BlockSlot>
-  <BlockSlot @name="content">
-    <div class="container">
+  <EventSource @src={{chain}} />
+
+  <AppView>
+    <BlockSlot @name="breadcrumbs">
+      <ol>
+          <li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
+      </ol>
+    </BlockSlot>
+    <BlockSlot @name="header">
+      <h1>
+        {{slug}}
+      </h1>
+      <Consul::Source @source={{t "routes.dc.routing-config.source"}} @withInfo={{true}} />
+    </BlockSlot>
+    <BlockSlot @name="content">
       <Consul::DiscoveryChain
-        @chain={{@model.chain.Chain}}
+        @chain={{chain.Chain}}
       />
-    </div>
-  </BlockSlot>
-</AppView>
+    </BlockSlot>
+  </AppView>
+
+</Route>