From d38a25bb9a96bde2663838c22d4c7f8e31adc90f Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 25 May 2018 13:15:27 +0100 Subject: [PATCH] Adds filtering to the KV listing page --- ui-v2/app/controllers/dc/kv/folder.js | 2 + ui-v2/app/controllers/dc/kv/index.js | 18 ++++++++ ui-v2/app/helpers/left-trim.js | 9 ++-- ui-v2/app/helpers/right-trim.js | 9 ++-- ui-v2/app/routes/dc/kv/index.js | 6 +++ ui-v2/app/templates/dc/kv/index.hbs | 11 ++++- ui-v2/app/utils/left-trim.js | 3 ++ ui-v2/app/utils/right-trim.js | 4 ++ .../integration/helpers/left-trim-test.js | 4 +- .../integration/helpers/right-trim-test.js | 4 +- .../unit/controllers/dc/kv/folder-test.js | 12 +++++ .../unit/controllers/dc/kv/index-test.js | 12 +++++ ui-v2/tests/unit/utils/left-trim-test.js | 44 +++++++++++++++++++ ui-v2/tests/unit/utils/right-trim-test.js | 44 +++++++++++++++++++ 14 files changed, 166 insertions(+), 16 deletions(-) create mode 100644 ui-v2/app/controllers/dc/kv/folder.js create mode 100644 ui-v2/app/controllers/dc/kv/index.js create mode 100644 ui-v2/app/utils/left-trim.js create mode 100644 ui-v2/app/utils/right-trim.js create mode 100644 ui-v2/tests/unit/controllers/dc/kv/folder-test.js create mode 100644 ui-v2/tests/unit/controllers/dc/kv/index-test.js create mode 100644 ui-v2/tests/unit/utils/left-trim-test.js create mode 100644 ui-v2/tests/unit/utils/right-trim-test.js diff --git a/ui-v2/app/controllers/dc/kv/folder.js b/ui-v2/app/controllers/dc/kv/folder.js new file mode 100644 index 000000000..5f88002bf --- /dev/null +++ b/ui-v2/app/controllers/dc/kv/folder.js @@ -0,0 +1,2 @@ +import Controller from './index'; +export default Controller.extend(); diff --git a/ui-v2/app/controllers/dc/kv/index.js b/ui-v2/app/controllers/dc/kv/index.js new file mode 100644 index 000000000..20a239905 --- /dev/null +++ b/ui-v2/app/controllers/dc/kv/index.js @@ -0,0 +1,18 @@ +import Controller from '@ember/controller'; +import { get } from '@ember/object'; +import WithFiltering from 'consul-ui/mixins/with-filtering'; +import rightTrim from 'consul-ui/utils/right-trim'; +export default Controller.extend(WithFiltering, { + queryParams: { + s: { + as: 'filter', + replace: true, + }, + }, + filter: function(item, { s = '' }) { + const key = rightTrim(get(item, 'Key'), '/') + .split('/') + .pop(); + return key.toLowerCase().indexOf(s.toLowerCase()) !== -1; + }, +}); diff --git a/ui-v2/app/helpers/left-trim.js b/ui-v2/app/helpers/left-trim.js index 4f3677831..bb49e028f 100644 --- a/ui-v2/app/helpers/left-trim.js +++ b/ui-v2/app/helpers/left-trim.js @@ -1,7 +1,6 @@ import { helper } from '@ember/component/helper'; +import leftTrim from 'consul-ui/utils/left-trim'; -export function leftTrim([str = '', search = ''], hash) { - return str.indexOf(search) === 0 ? str.substr(search.length) : str; -} - -export default helper(leftTrim); +export default helper(function([str = '', search = ''], hash) { + return leftTrim(str, search); +}); diff --git a/ui-v2/app/helpers/right-trim.js b/ui-v2/app/helpers/right-trim.js index 8ad3cceb6..27c272137 100644 --- a/ui-v2/app/helpers/right-trim.js +++ b/ui-v2/app/helpers/right-trim.js @@ -1,8 +1,7 @@ import { helper } from '@ember/component/helper'; -export function rightTrim([str = '', search = ''], hash) { - const pos = str.length - search.length; - return str.indexOf(search) === pos ? str.substr(0, pos) : str; -} +import rightTrim from 'consul-ui/utils/right-trim'; -export default helper(rightTrim); +export default helper(function([str = '', search = ''], hash) { + return rightTrim(str, search); +}); diff --git a/ui-v2/app/routes/dc/kv/index.js b/ui-v2/app/routes/dc/kv/index.js index a39615aa8..01529d64d 100644 --- a/ui-v2/app/routes/dc/kv/index.js +++ b/ui-v2/app/routes/dc/kv/index.js @@ -5,6 +5,12 @@ import { get } from '@ember/object'; import WithKvActions from 'consul-ui/mixins/kv/with-actions'; export default Route.extend(WithKvActions, { + queryParams: { + s: { + as: 'filter', + replace: true, + }, + }, repo: service('kv'), model: function(params) { const key = params.key || '/'; diff --git a/ui-v2/app/templates/dc/kv/index.hbs b/ui-v2/app/templates/dc/kv/index.hbs index 20ce7c747..c408fca70 100644 --- a/ui-v2/app/templates/dc/kv/index.hbs +++ b/ui-v2/app/templates/dc/kv/index.hbs @@ -18,6 +18,13 @@ {{/if}} {{/block-slot}} + {{#block-slot 'toolbar'}} +{{#if (gt items.length 0) }} +
+ {{freetext-filter onchange=(action 'filter') value=filter.s placeholder="Search by name"}} +
+{{/if}} + {{/block-slot}} {{#block-slot 'actions'}} {{#if (not-eq parent.Key '/') }} Create @@ -26,9 +33,9 @@ {{/if}} {{/block-slot}} {{#block-slot 'content'}} -{{#if (gt items.length 0)}} +{{#if (gt filtered.length 0)}} {{#tabular-collection - items=(sort-by 'isFolder:desc' items) as |item index| + items=(sort-by 'isFolder:desc' filtered) as |item index| }} {{#block-slot 'header'}} Name diff --git a/ui-v2/app/utils/left-trim.js b/ui-v2/app/utils/left-trim.js new file mode 100644 index 000000000..279b3d02d --- /dev/null +++ b/ui-v2/app/utils/left-trim.js @@ -0,0 +1,3 @@ +export default function leftTrim(str = '', search = '') { + return str.indexOf(search) === 0 ? str.substr(search.length) : str; +} diff --git a/ui-v2/app/utils/right-trim.js b/ui-v2/app/utils/right-trim.js new file mode 100644 index 000000000..5e1b1d3c4 --- /dev/null +++ b/ui-v2/app/utils/right-trim.js @@ -0,0 +1,4 @@ +export default function rightTrim(str = '', search = '') { + const pos = str.length - search.length; + return str.lastIndexOf(search) === pos ? str.substr(0, pos) : str; +} diff --git a/ui-v2/tests/integration/helpers/left-trim-test.js b/ui-v2/tests/integration/helpers/left-trim-test.js index 587e789a1..805ae9382 100644 --- a/ui-v2/tests/integration/helpers/left-trim-test.js +++ b/ui-v2/tests/integration/helpers/left-trim-test.js @@ -1,4 +1,4 @@ -import { moduleForComponent, skip } from 'ember-qunit'; +import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; moduleForComponent('left trim', 'helper:left-trim', { @@ -6,7 +6,7 @@ moduleForComponent('left trim', 'helper:left-trim', { }); // Replace this with your real tests. -skip('it renders', function(assert) { +test('it renders', function(assert) { this.set('inputValue', '1234'); this.render(hbs`{{left-trim inputValue}}`); diff --git a/ui-v2/tests/integration/helpers/right-trim-test.js b/ui-v2/tests/integration/helpers/right-trim-test.js index 7e0ccac8a..0cb91cadb 100644 --- a/ui-v2/tests/integration/helpers/right-trim-test.js +++ b/ui-v2/tests/integration/helpers/right-trim-test.js @@ -1,4 +1,4 @@ -import { moduleForComponent, skip } from 'ember-qunit'; +import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; moduleForComponent('right-trim', 'helper:right-trim', { @@ -6,7 +6,7 @@ moduleForComponent('right-trim', 'helper:right-trim', { }); // Replace this with your real tests. -skip('it renders', function(assert) { +test('it renders', function(assert) { this.set('inputValue', '1234'); this.render(hbs`{{right-trim inputValue}}`); diff --git a/ui-v2/tests/unit/controllers/dc/kv/folder-test.js b/ui-v2/tests/unit/controllers/dc/kv/folder-test.js new file mode 100644 index 000000000..c9edb0e62 --- /dev/null +++ b/ui-v2/tests/unit/controllers/dc/kv/folder-test.js @@ -0,0 +1,12 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('controller:dc/kv/folder', 'Unit | Controller | dc/kv/folder', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +// Replace this with your real tests. +test('it exists', function(assert) { + let controller = this.subject(); + assert.ok(controller); +}); diff --git a/ui-v2/tests/unit/controllers/dc/kv/index-test.js b/ui-v2/tests/unit/controllers/dc/kv/index-test.js new file mode 100644 index 000000000..af2dfbad1 --- /dev/null +++ b/ui-v2/tests/unit/controllers/dc/kv/index-test.js @@ -0,0 +1,12 @@ +import { moduleFor, test } from 'ember-qunit'; + +moduleFor('controller:dc/kv/index', 'Unit | Controller | dc/kv/index', { + // Specify the other units that are required for this test. + // needs: ['controller:foo'] +}); + +// Replace this with your real tests. +test('it exists', function(assert) { + let controller = this.subject(); + assert.ok(controller); +}); diff --git a/ui-v2/tests/unit/utils/left-trim-test.js b/ui-v2/tests/unit/utils/left-trim-test.js new file mode 100644 index 000000000..03e38a707 --- /dev/null +++ b/ui-v2/tests/unit/utils/left-trim-test.js @@ -0,0 +1,44 @@ +import { module } from 'ember-qunit'; +import test from 'ember-sinon-qunit/test-support/test'; +import leftTrim from 'consul-ui/utils/left-trim'; +module('Unit | Utility | left trim'); + +test('it trims characters from the left hand side', function(assert) { + [ + { + args: ['/a/folder/here', '/'], + expected: 'a/folder/here', + }, + { + args: ['/a/folder/here', ''], + expected: '/a/folder/here', + }, + { + args: ['a/folder/here', '/'], + expected: 'a/folder/here', + }, + { + args: ['a/folder/here/', '/'], + expected: 'a/folder/here/', + }, + { + args: [], + expected: '', + }, + { + args: ['/a/folder/here', '/a/folder'], + expected: '/here', + }, + { + args: ['/a/folder/here/', '/a/folder/here'], + expected: '/', + }, + { + args: ['/a/folder/here/', '/a/folder/here/'], + expected: '', + }, + ].forEach(function(item) { + const actual = leftTrim(...item.args); + assert.equal(actual, item.expected); + }); +}); diff --git a/ui-v2/tests/unit/utils/right-trim-test.js b/ui-v2/tests/unit/utils/right-trim-test.js new file mode 100644 index 000000000..567a2a422 --- /dev/null +++ b/ui-v2/tests/unit/utils/right-trim-test.js @@ -0,0 +1,44 @@ +import { module } from 'ember-qunit'; +import test from 'ember-sinon-qunit/test-support/test'; +import rightTrim from 'consul-ui/utils/right-trim'; +module('Unit | Utility | right trim'); + +test('it trims characters from the right hand side', function(assert) { + [ + { + args: ['/a/folder/here/', '/'], + expected: '/a/folder/here', + }, + { + args: ['/a/folder/here', ''], + expected: '/a/folder/here', + }, + { + args: ['a/folder/here', '/'], + expected: 'a/folder/here', + }, + { + args: ['a/folder/here/', '/'], + expected: 'a/folder/here', + }, + { + args: [], + expected: '', + }, + { + args: ['/a/folder/here', '/folder/here'], + expected: '/a', + }, + { + args: ['/a/folder/here', 'a/folder/here'], + expected: '/', + }, + { + args: ['/a/folder/here/', '/a/folder/here/'], + expected: '', + }, + ].forEach(function(item) { + const actual = rightTrim(...item.args); + assert.equal(actual, item.expected); + }); +});