ui: Add External Sources Filter to Node > Service Instances (#9368)

* Add service collections to get all ExternalServices

* Add a basic collection helper

* Use the collections to get all ExternalSources

* Remove old Controllers

ui/packages/consul-ui/app/controllers/dc/services/index.js

@@ -1,20 +0,0 @@
-import { computed } from '@ember/object';
-import Controller from '@ember/controller';
-
-export default class IndexController extends Controller {
-  @computed('items.[]')
-  get services() {
-    return this.items.filter(function(item) {
-      return item.Kind !== 'connect-proxy';
-    });
-  }
-
-  @computed('services')
-  get externalSources() {
-    const sources = this.services.reduce(function(prev, item) {
-      return prev.concat(item.ExternalSources || []);
-    }, []);
-    // unique, non-empty values, alpha sort
-    return [...new Set(sources)].filter(Boolean).sort();
-  }
-}

ui/packages/consul-ui/app/controllers/dc/services/show/instances.js

@@ -1,13 +0,0 @@
-import { computed } from '@ember/object';
-import Controller from '@ember/controller';
-
-export default class InstancesController extends Controller {
-  @computed('items')
-  get externalSources() {
-    const sources = this.items.reduce(function(prev, item) {
-      return prev.concat(item.ExternalSources || []);
-    }, []);
-    // unique, non-empty values, alpha sort
-    return [...new Set(sources)].filter(Boolean).sort();
-  }
-}

ui/packages/consul-ui/app/helpers/collection.js

@@ -0,0 +1,23 @@
+import Helper from '@ember/component/helper';
+import { get } from '@ember/object';
+
+import { Collection as Service } from 'consul-ui/models/service';
+import { Collection as ServiceInstance } from 'consul-ui/models/service-instance';
+
+const collections = {
+  service: Service,
+  'service-instance': ServiceInstance,
+};
+class EmptyCollection {}
+export default class CollectionHelper extends Helper {
+  compute([collection, str], hash) {
+    if (collection.length > 0) {
+      // TODO: Looksee if theres ever going to be a public way to get this
+      const modelName = get(collection, 'firstObject')._internalModel.modelName;
+      const Collection = collections[modelName];
+      return new Collection(collection);
+    } else {
+      return new EmptyCollection();
+    }
+  }
+}

ui/packages/consul-ui/app/models/service-instance.js

@@ -2,10 +2,27 @@ import Model, { attr, belongsTo } from '@ember-data/model';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
 import { computed, get, set } from '@ember/object';
 import { or, filter, alias } from '@ember/object/computed';
+import { tracked } from '@glimmer/tracking';
 
 export const PRIMARY_KEY = 'uid';
 export const SLUG_KEY = 'Node.Node,Service.ID';
 
+export const Collection = class Collection {
+  @tracked items;
+
+  constructor(items) {
+    this.items = items;
+  }
+
+  get ExternalSources() {
+    const sources = this.items.reduce(function(prev, item) {
+      return prev.concat(item.ExternalSources || []);
+    }, []);
+    // unique, non-empty values, alpha sort
+    return [...new Set(sources)].filter(Boolean).sort();
+  }
+};
+
 export default class ServiceInstance extends Model {
   @attr('string') uid;
 

ui/packages/consul-ui/app/models/service.js

@@ -1,9 +1,26 @@
 import Model, { attr } from '@ember-data/model';
 import { computed, get } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export const PRIMARY_KEY = 'uid';
 export const SLUG_KEY = 'Name';
 
+export const Collection = class Collection {
+  @tracked items;
+
+  constructor(items) {
+    this.items = items;
+  }
+
+  get ExternalSources() {
+    const sources = this.items.reduce(function(prev, item) {
+      return prev.concat(item.ExternalSources || []);
+    }, []);
+    // unique, non-empty values, alpha sort
+    return [...new Set(sources)].filter(Boolean).sort();
+  }
+};
+
 export default class Service extends Model {
   @attr('string') uid;
   @attr('string') Name;

ui/packages/consul-ui/app/templates/dc/nodes/show/services.hbs

@@ -7,13 +7,13 @@
   )
 ) as |filters|}}
   {{#let (or sortBy "Status:asc") as |sort|}}
-    {{#let item.Services as |items|}}
+  {{#let (reject-by 'Service.Kind' 'connect-proxy' item.Services) as |items|}}
 <div class="tab-section">
   <div role="tabpanel">
   {{#if (gt items.length 0) }}
     <input type="checkbox" id="toolbar-toggle" />
     <Consul::ServiceInstance::SearchBar
-      @sources={{externalSources}}
+      @sources={{get (collection items) 'ExternalSources'}}
       @search={{search}}
       @onsearch={{action (mut search) value="target.value"}}
       @searchproperties={{searchProperties}}

ui/packages/consul-ui/app/templates/dc/services/index.hbs

@@ -1,6 +1,12 @@
 {{page-title 'Services'}}
+
 <EventSource @src={{items}} />
-{{#let (hash
+
+{{#let
+
+  (or sortBy "Status:asc")
+
+  (hash
     statuses=(if status (split status ',') undefined)
     kinds=(if kind (split kind ',') undefined)
     sources=(if source (split source ',') undefined)
@@ -8,8 +14,12 @@
       (split searchproperty ',')
       (array 'Name' 'Tags')
     )
-) as |filters|}}
+  )
-  {{#let (or sortBy "Status:asc") as |sort|}}
+
+  (reject-by 'Kind' 'connect-proxy' items)
+
+as |sort filters items|}}
+
   <AppView>
     <BlockSlot @name="notification" as |status type|>
       <Consul::Service::Notifications
@@ -19,14 +29,14 @@
     </BlockSlot>
     <BlockSlot @name="header">
         <h1>
-            Services <em>{{format-number services.length}} total</em>
+          Services <em>{{format-number items.length}} total</em>
         </h1>
         <label for="toolbar-toggle"></label>
     </BlockSlot>
     <BlockSlot @name="toolbar">
-        {{#if (gt services.length 0) }}
+      {{#if (gt items.length 0) }}
         <Consul::Service::SearchBar
-            @sources={{externalSources}}
+          @sources={{get (collection items) 'ExternalSources'}}
 
           @search={{search}}
           @onsearch={{action (mut search) value="target.value"}}
@@ -50,13 +60,10 @@
         @sort={{sort}}
         @filters={{filters}}
         @search={{search}}
-          @items={{services}}
+        @items={{items}}
       as |collection|>
         <collection.Collection>
           <Consul::Service::List
-              @sort={{sort}}
-              @filters={{filters}}
-              @search={{search}}
             @items={{collection.items}}
           >
           </Consul::Service::List>
@@ -93,6 +100,7 @@
           </collection.Empty>
         </DataCollection>
     </BlockSlot>
+
   </AppView>
-  {{/let}}
+
 {{/let}}

ui/packages/consul-ui/app/templates/dc/services/show/instances.hbs

@@ -12,7 +12,7 @@
     {{#if (gt items.length 0) }}
     <input type="checkbox" id="toolbar-toggle" />
     <Consul::ServiceInstance::SearchBar
-      @sources={{externalSources}}
+      @sources={{get (collection items) 'ExternalSources'}}
       @search={{search}}
       @onsearch={{action (mut search) value="target.value"}}
       @searchproperties={{searchProperties}}