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,98 +1,106 @@
 {{page-title 'Services'}}
+
 <EventSource @src={{items}} />
-{{#let (hash
-  statuses=(if status (split status ',') undefined)
-  kinds=(if kind (split kind ',') undefined)
-  sources=(if source (split source ',') undefined)
-  searchproperties=(if (not-eq searchproperty undefined)
-    (split searchproperty ',')
-    (array 'Name' 'Tags')
+
+{{#let
+
+  (or sortBy "Status:asc")
+
+  (hash
+    statuses=(if status (split status ',') undefined)
+    kinds=(if kind (split kind ',') undefined)
+    sources=(if source (split source ',') undefined)
+    searchproperties=(if (not-eq searchproperty undefined)
+      (split searchproperty ',')
+      (array 'Name' 'Tags')
+    )
   )
-) as |filters|}}
-  {{#let (or sortBy "Status:asc") as |sort|}}
-    <AppView>
-      <BlockSlot @name="notification" as |status type|>
-        <Consul::Service::Notifications
-          @type={{type}}
-          @status={{status}}
-        />
-      </BlockSlot>
-      <BlockSlot @name="header">
-          <h1>
-            Services <em>{{format-number services.length}} total</em>
-          </h1>
-          <label for="toolbar-toggle"></label>
-      </BlockSlot>
-      <BlockSlot @name="toolbar">
-        {{#if (gt services.length 0) }}
-          <Consul::Service::SearchBar
-            @sources={{externalSources}}
 
-            @search={{search}}
-            @onsearch={{action (mut search) value="target.value"}}
+  (reject-by 'Kind' 'connect-proxy' items)
 
-            @sort={{sort}}
-            @onsort={{action (mut sortBy) value="target.selected"}}
+as |sort filters items|}}
+
+  <AppView>
+    <BlockSlot @name="notification" as |status type|>
+      <Consul::Service::Notifications
+        @type={{type}}
+        @status={{status}}
+      />
+    </BlockSlot>
+    <BlockSlot @name="header">
+        <h1>
+          Services <em>{{format-number items.length}} total</em>
+        </h1>
+        <label for="toolbar-toggle"></label>
+    </BlockSlot>
+    <BlockSlot @name="toolbar">
+      {{#if (gt items.length 0) }}
+        <Consul::Service::SearchBar
+          @sources={{get (collection items) 'ExternalSources'}}
 
-            @filter={{filters}}
-            @onfilter={{hash
-              searchproperty=(action (mut searchproperty) value="target.selectedItems")
-              status=(action (mut status) value="target.selectedItems")
-              kind=(action (mut kind) value="target.selectedItems")
-              source=(action (mut source) value="target.selectedItems")
-            }}
-          />
-        {{/if}}
-      </BlockSlot>
-      <BlockSlot @name="content">
-        <DataCollection
-          @type="service"
-          @sort={{sort}}
-          @filters={{filters}}
           @search={{search}}
-          @items={{services}}
-        as |collection|>
-          <collection.Collection>
-            <Consul::Service::List
-              @sort={{sort}}
-              @filters={{filters}}
-              @search={{search}}
-              @items={{collection.items}}
-            >
-            </Consul::Service::List>
-          </collection.Collection>
-          <collection.Empty>
-              <EmptyState @allowLogin={{true}}>
-                <BlockSlot @name="header">
-                  <h2>
-                    {{#if (gt services.length 0)}}
-                      No services found
-                    {{else}}
-                      Welcome to Services
-                    {{/if}}
-                  </h2>
-                </BlockSlot>
-                <BlockSlot @name="body">
-                  <p>
-                    {{#if (gt services.length 0)}}
-                      No services where found matching that search, or you may not have access to view the services you are searching for.
-                    {{else}}
-                      There don't seem to be any registered services, or you may not have access to view services yet.
-                    {{/if}}
-                  </p>
-                </BlockSlot>
-                <BlockSlot @name="actions">
-                  <li class="docs-link">
-                    <a href="{{env 'CONSUL_DOCS_URL'}}/commands/services" rel="noopener noreferrer" target="_blank">Documentation on services</a>
-                  </li>
-                  <li class="learn-link">
-                    <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/services" rel="noopener noreferrer" target="_blank">Read the guide</a>
-                  </li>
-                </BlockSlot>
-              </EmptyState>
-            </collection.Empty>
-          </DataCollection>
-      </BlockSlot>
-    </AppView>
-  {{/let}}
+          @onsearch={{action (mut search) value="target.value"}}
+
+          @sort={{sort}}
+          @onsort={{action (mut sortBy) value="target.selected"}}
+
+          @filter={{filters}}
+          @onfilter={{hash
+            searchproperty=(action (mut searchproperty) value="target.selectedItems")
+            status=(action (mut status) value="target.selectedItems")
+            kind=(action (mut kind) value="target.selectedItems")
+            source=(action (mut source) value="target.selectedItems")
+          }}
+        />
+      {{/if}}
+    </BlockSlot>
+    <BlockSlot @name="content">
+      <DataCollection
+        @type="service"
+        @sort={{sort}}
+        @filters={{filters}}
+        @search={{search}}
+        @items={{items}}
+      as |collection|>
+        <collection.Collection>
+          <Consul::Service::List
+            @items={{collection.items}}
+          >
+          </Consul::Service::List>
+        </collection.Collection>
+        <collection.Empty>
+            <EmptyState @allowLogin={{true}}>
+              <BlockSlot @name="header">
+                <h2>
+                  {{#if (gt services.length 0)}}
+                    No services found
+                  {{else}}
+                    Welcome to Services
+                  {{/if}}
+                </h2>
+              </BlockSlot>
+              <BlockSlot @name="body">
+                <p>
+                  {{#if (gt services.length 0)}}
+                    No services where found matching that search, or you may not have access to view the services you are searching for.
+                  {{else}}
+                    There don't seem to be any registered services, or you may not have access to view services yet.
+                  {{/if}}
+                </p>
+              </BlockSlot>
+              <BlockSlot @name="actions">
+                <li class="docs-link">
+                  <a href="{{env 'CONSUL_DOCS_URL'}}/commands/services" rel="noopener noreferrer" target="_blank">Documentation on services</a>
+                </li>
+                <li class="learn-link">
+                  <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/services" rel="noopener noreferrer" target="_blank">Read the guide</a>
+                </li>
+              </BlockSlot>
+            </EmptyState>
+          </collection.Empty>
+        </DataCollection>
+    </BlockSlot>
+
+  </AppView>
+
 {{/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}}