ui: Defer requesting gateway related services until the tab is visible (#8803)

* ui: Defer requesting gateway related services until the tab is visible

* Extend one route with the other as they are the same thing dsatawise

ui-v2/app/routes/dc/services/show.js

@@ -6,7 +6,7 @@ import { get } from '@ember/object';
 export default Route.extend({
   data: service('data-source/service'),
   settings: service('settings'),
-  model: function(params, transition = {}) {
+  model: function(params, transition) {
     const dc = this.modelFor('dc').dc.Name;
     const nspace = this.modelFor('nspace').nspace.substr(1);
     return hash({
@@ -19,32 +19,19 @@ export default Route.extend({
       urls: this.settings.findBySlug('urls'),
       chain: null,
       proxies: [],
-    })
+    }).then(model => {
-      .then(model => {
+      return ['connect-proxy', 'mesh-gateway', 'ingress-gateway', 'terminating-gateway'].includes(
-        return ['connect-proxy', 'mesh-gateway', 'ingress-gateway', 'terminating-gateway'].includes(
+        get(model, 'items.firstObject.Service.Kind')
-          get(model, 'items.firstObject.Service.Kind')
+      )
-        )
+        ? model
-          ? model
+        : hash({
-          : hash({
+            ...model,
-              ...model,
+            chain: this.data.source(uri => uri`/${nspace}/${dc}/discovery-chain/${params.name}`),
-              chain: this.data.source(uri => uri`/${nspace}/${dc}/discovery-chain/${params.name}`),
+            proxies: this.data.source(
-              proxies: this.data.source(
+              uri => uri`/${nspace}/${dc}/proxies/for-service/${params.name}`
-                uri => uri`/${nspace}/${dc}/proxies/for-service/${params.name}`
+            ),
-              ),
+          });
-            });
+    });
-      })
-      .then(model => {
-        return ['ingress-gateway', 'terminating-gateway'].includes(
-          get(model, 'items.firstObject.Service.Kind')
-        )
-          ? hash({
-              ...model,
-              gatewayServices: this.data.source(
-                uri => uri`/${nspace}/${dc}/gateways/for-service/${params.name}`
-              ),
-            })
-          : model;
-      });
   },
   setupController: function(controller, model) {
     this._super(...arguments);

ui-v2/app/routes/dc/services/show/services.js

@@ -1,12 +1,22 @@
 import Route from 'consul-ui/routing/route';
+import { inject as service } from '@ember/service';
+import { hash } from 'rsvp';
 
 export default Route.extend({
+  data: service('data-source/service'),
   model: function() {
+    const dc = this.modelFor('dc').dc.Name;
+    const nspace = this.modelFor('nspace').nspace.substr(1);
     const parent = this.routeName
       .split('.')
       .slice(0, -1)
       .join('.');
-    return this.modelFor(parent);
+    const name = this.modelFor(parent).name;
+    return hash({
+      dc: dc,
+      nspace: nspace,
+      gatewayServices: this.data.source(uri => uri`/${nspace}/${dc}/gateways/for-service/${name}`),
+    });
   },
   setupController: function(controller, model) {
     this._super(...arguments);

ui-v2/app/routes/dc/services/show/upstreams.js

@@ -1,15 +1,5 @@
-import Route from 'consul-ui/routing/route';
+import Route from './services';
 
 export default Route.extend({
-  model: function() {
+  templateName: 'dc/services/show/upstreams',
-    const parent = this.routeName
-      .split('.')
-      .slice(0, -1)
-      .join('.');
-    return this.modelFor(parent);
-  },
-  setupController: function(controller, model) {
-    this._super(...arguments);
-    controller.setProperties(model);
-  },
 });

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

@@ -2,7 +2,6 @@
 <EventSource @src={{chain}} />
 <EventSource @src={{intentions}} />
 <EventSource @src={{proxies}} />
-<EventSource @src={{gatewayServices}} />
 {{title item.Service.Service}}
 <AppView>
   <BlockSlot @name="notification" as |status type|>

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

@@ -1,4 +1,5 @@
-<div id="services" class="tab-section">
+<EventSource @src={{gatewayServices}} />
+<div class="tab-section">
   <div role="tabpanel">
 {{#let (hash
   instances=(if instance (split instance ',') undefined)

ui-v2/app/templates/dc/services/show/upstreams.hbs

@@ -1,4 +1,5 @@
-<div id="upstreams" class="tab-section">
+<EventSource @src={{gatewayServices}} />
+<div class="tab-section">
   <div role="tabpanel">
 {{#let (hash
   instances=(if instance (split instance ',') undefined)