ui: Add sorting to Policies (#8373)

* Add sorting to ACLs policies with comparator

* Add acls/roles sorting test

* Add navigation test for acls/policies

* Update onchange value for sorting policies
This commit is contained in:
Kenia 2020-07-29 14:36:09 -04:00 committed by GitHub
parent 85ef7ba943
commit 4c8a15b698
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 107 additions and 15 deletions

View File

@ -1,5 +1,5 @@
export default (collection, clickable, attribute, text, actions) => () => { export default (collection, clickable, attribute, text, actions) => () => {
return collection('.consul-policy-list li:not(:first-child)', { return collection('.consul-policy-list [data-test-list-row]', {
name: attribute('data-test-policy', '[data-test-policy]'), name: attribute('data-test-policy', '[data-test-policy]'),
description: text('[data-test-description]'), description: text('[data-test-description]'),
policy: clickable('a'), policy: clickable('a'),

View File

@ -1,6 +1,7 @@
import Controller from '@ember/controller'; import Controller from '@ember/controller';
export default Controller.extend({ export default Controller.extend({
queryParams: { queryParams: {
sortBy: 'sort',
search: { search: {
as: 'filter', as: 'filter',
replace: true, replace: true,

View File

@ -3,6 +3,7 @@ import check from 'consul-ui/sort/comparators/check';
import intention from 'consul-ui/sort/comparators/intention'; import intention from 'consul-ui/sort/comparators/intention';
import token from 'consul-ui/sort/comparators/token'; import token from 'consul-ui/sort/comparators/token';
import role from 'consul-ui/sort/comparators/role'; import role from 'consul-ui/sort/comparators/role';
import policy from 'consul-ui/sort/comparators/policy';
export function initialize(container) { export function initialize(container) {
// Service-less injection using private properties at a per-project level // Service-less injection using private properties at a per-project level
@ -13,6 +14,7 @@ export function initialize(container) {
intention: intention(), intention: intention(),
token: token(), token: token(),
role: role(), role: role(),
policy: policy(),
}; };
Sort.reopen({ Sort.reopen({
comparator: function(type) { comparator: function(type) {

View File

@ -7,6 +7,7 @@ import WithPolicyActions from 'consul-ui/mixins/policy/with-actions';
export default Route.extend(WithPolicyActions, { export default Route.extend(WithPolicyActions, {
repo: service('repository/policy'), repo: service('repository/policy'),
queryParams: { queryParams: {
sortBy: 'sort',
search: { search: {
as: 'filter', as: 'filter',
replace: true, replace: true,

View File

@ -0,0 +1,3 @@
export default () => key => {
return key;
};

View File

@ -3,6 +3,15 @@
{{else}} {{else}}
{{title 'Access Controls'}} {{title 'Access Controls'}}
{{/if}} {{/if}}
{{#let (selectable-key-values
(array "Name:asc" "A to Z")
(array "Name:desc" "Z to A")
selected=sortBy
)
as |sort|
}}
<AppView <AppView
@class="policy list" @class="policy list"
@loading={{isLoading}} @loading={{isLoading}}
@ -31,17 +40,24 @@
<BlockSlot @name="actions"> <BlockSlot @name="actions">
<a data-test-create href="{{href-to 'dc.acls.policies.create'}}" class="type-create">Create</a> <a data-test-create href="{{href-to 'dc.acls.policies.create'}}" class="type-create">Create</a>
</BlockSlot> </BlockSlot>
<BlockSlot @name="content"> <BlockSlot @name="toolbar">
{{#if (gt items.length 0) }} {{#if (gt items.length 0) }}
<SearchBar <SearchBar
@value={{search}} @value={{search}}
@onsearch={{action (mut search) value="target.value"}} @onsearch={{action (mut search) value="target.value"}}
@secondary="sort"
@selected={{sort.selected}}
@options={{sort.items}}
@onchange={{action (mut sortBy) value='target.selected.key'}}
/> />
{{/if}} {{/if}}
<ChangeableSet @dispatcher={{searchable 'policy' items}} @terms={{search}}> </BlockSlot>
<BlockSlot @name="content">
{{#let (sort-by (comparator 'policy' sort.selected.key) items) as |sorted|}}
<ChangeableSet @dispatcher={{searchable 'policy' sorted}} @terms={{search}}>
<BlockSlot @name="set" as |filtered|> <BlockSlot @name="set" as |filtered|>
<ConsulPolicyList <ConsulPolicyList
@items={{sort-by "CreateTime:desc" "Name:asc" filtered}} @items={{filtered}}
@ondelete={{action send 'delete'}} @ondelete={{action send 'delete'}}
/> />
</BlockSlot> </BlockSlot>
@ -76,5 +92,7 @@
</EmptyState> </EmptyState>
</BlockSlot> </BlockSlot>
</ChangeableSet> </ChangeableSet>
{{/let}}
</BlockSlot> </BlockSlot>
</AppView> </AppView>
{{/let}}

View File

@ -0,0 +1,15 @@
@setupApplicationTest
Feature: dc / policies / navigation
Scenario: Clicking a policy in the listing and back again
Given 1 datacenter model with the value "dc-1"
And 3 policy models
When I visit the policies page for yaml
---
dc: dc-1
---
Then the url should be /dc-1/acls/policies
And the title should be "Policies - Consul"
Then I see 3 policy models
When I click policy on the policies
And I click "[data-test-back]"
Then the url should be /dc-1/acls/policies

View File

@ -0,0 +1,36 @@
@setupApplicationTest
Feature: dc / acls / policies / sorting
Scenario: Sorting Policies
Given 1 datacenter model with the value "dc-1"
And 4 policy models from yaml
---
- Name: "system-A"
- Name: "system-D"
- Name: "system-C"
- Name: "system-B"
---
When I visit the policies page for yaml
---
dc: dc-1
---
Then the url should be /dc-1/acls/policies
Then I see 4 policy models
When I click selected on the sort
When I click options.1.button on the sort
Then I see name on the policies vertically like yaml
---
- "system-D"
- "system-C"
- "system-B"
- "system-A"
---
When I click selected on the sort
When I click options.0.button on the sort
Then I see name on the policies vertically like yaml
---
- "system-A"
- "system-B"
- "system-C"
- "system-D"
---

View File

@ -46,10 +46,6 @@ Feature: page-navigation
| node | nodes | /dc-1/nodes/node-0/health-checks | /v1/session/node/node-0?dc=dc-1&ns=@namespace | /dc-1/nodes | | node | nodes | /dc-1/nodes/node-0/health-checks | /v1/session/node/node-0?dc=dc-1&ns=@namespace | /dc-1/nodes |
| kv | kvs | /dc-1/kv/0-key-value/edit | /v1/session/info/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1&ns=@namespace | /dc-1/kv | | kv | kvs | /dc-1/kv/0-key-value/edit | /v1/session/info/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1&ns=@namespace | /dc-1/kv |
# | acl | acls | /dc-1/acls/anonymous | /v1/acl/info/anonymous?dc=dc-1 | /dc-1/acls | # | acl | acls | /dc-1/acls/anonymous | /v1/acl/info/anonymous?dc=dc-1 | /dc-1/acls |
# These Endpoints will be datacenters due to the datacenters checkbox selectors | /dc-1/acls/tokens |
| policy | policies | /dc-1/acls/policies/ee52203d-989f-4f7a-ab5a-2bef004164ca | /v1/catalog/datacenters | /dc-1/acls/policies |
# | token | tokens | /dc-1/acls/tokens/00000000-0000-0000-0000-000000000000 | /v1/acl/token/00000000-0000-0000-0000-000000000000?dc=dc-1 | /dc-1/acls/tokens |
# | policy | policies | /dc-1/acls/policies/ee52203d-989f-4f7a-ab5a-2bef004164ca | /v1/acl/policy/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1 | /dc-1/acls/policies |
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Scenario: The node detail page calls the correct API endpoints Scenario: The node detail page calls the correct API endpoints
When I visit the node page for yaml When I visit the node page for yaml

View File

@ -0,0 +1,10 @@
import steps from '../../../steps';
// step definitions that are shared between features should be moved to the
// tests/acceptance/steps/steps.js file
export default function(assert) {
return steps(assert).then('I should find a file', function() {
assert.ok(true, this.step);
});
}

View File

@ -0,0 +1,10 @@
import steps from '../../../steps';
// step definitions that are shared between features should be moved to the
// tests/acceptance/steps/steps.js file
export default function(assert) {
return steps(assert).then('I should find a file', function() {
assert.ok(true, this.step);
});
}

View File

@ -168,7 +168,7 @@ export default {
kv: create(kv(visitable, attribute, submitable, deletable, cancelable, clickable)), kv: create(kv(visitable, attribute, submitable, deletable, cancelable, clickable)),
acls: create(acls(visitable, deletable, creatable, clickable, attribute, collection, aclFilter)), acls: create(acls(visitable, deletable, creatable, clickable, attribute, collection, aclFilter)),
acl: create(acl(visitable, submitable, deletable, cancelable, clickable)), acl: create(acl(visitable, submitable, deletable, cancelable, clickable)),
policies: create(policies(visitable, creatable, consulPolicyList, freetextFilter)), policies: create(policies(visitable, creatable, consulPolicyList, popoverSelect)),
policy: create(policy(visitable, submitable, deletable, cancelable, clickable, tokenList)), policy: create(policy(visitable, submitable, deletable, cancelable, clickable, tokenList)),
roles: create(roles(visitable, creatable, consulRoleList, popoverSelect)), roles: create(roles(visitable, creatable, consulRoleList, popoverSelect)),
// TODO: This needs a policyList // TODO: This needs a policyList

View File

@ -1,7 +1,7 @@
export default function(visitable, creatable, policies, filter) { export default function(visitable, creatable, policies, popoverSelect) {
return creatable({ return creatable({
visit: visitable('/:dc/acls/policies'), visit: visitable('/:dc/acls/policies'),
policies: policies(), policies: policies(),
filter: filter(), sort: popoverSelect(),
}); });
} }