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
This commit is contained in:
John Cowen
GitHub
parent
83a8f266e5
commit
13fb1445c0
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue