From 59f3fa20fbf4424f7ee6899f5654885bb3c6724c Mon Sep 17 00:00:00 2001 From: djenriquez Date: Tue, 13 Jun 2017 23:25:24 -0700 Subject: [PATCH 1/2] Fix pagination --- app/components/Secrets/Generic/Generic.jsx | 47 +++++++++++++--------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/app/components/Secrets/Generic/Generic.jsx b/app/components/Secrets/Generic/Generic.jsx index 4f7c689..4cfd2b4 100644 --- a/app/components/Secrets/Generic/Generic.jsx +++ b/app/components/Secrets/Generic/Generic.jsx @@ -65,7 +65,9 @@ class GenericSecretBackend extends React.Component { maxItemsPerPage: 25, currentPage: 1, totalPages: 1, - pagedSecrets: [] + filterString: "", + pagedSecrets: [], + clickedSecret: "" } _.bindAll( @@ -110,16 +112,17 @@ class GenericSecretBackend extends React.Component { // Load secret list at current path callVaultApi('get', this.state.currentLogicalPath, { list: true }, null, null) .then((resp) => { - this.setState({ fullSecretList: resp.data.data.keys }); + let secretList = resp.data.data.keys + this.setState({ fullSecretList: secretList }); // Load to the page with the secret directed to let page = this.state.currentPage; if (prevProps && prevProps.params.splat) { - let _pagedSecrets = _.chunk(resp.data.data.keys, this.state.maxItemsPerPage); - page = _.findIndex(_pagedSecrets, (secret) => { return _.indexOf(secret, prevProps.params.splat) >= 0 }) + 1; + let filtered = this.state.filterString ? _.filter(secretList, (item) => { return item.toLowerCase().includes(this.state.filterString.toLowerCase()); }) : secretList; + let _pagedSecrets = _.chunk(filtered, this.state.maxItemsPerPage); + page = _.findIndex(_pagedSecrets, (secret) => { return _.indexOf(secret, this.state.clickedSecret) >= 0 }) + 1; } - - this.setPage(page, resp.data.data.keys); + this.setPage(page, secretList, this.state.sortDirection, this.state.filterString); }) .catch((err) => { // 404 is expected when no secrets are present @@ -133,11 +136,16 @@ class GenericSecretBackend extends React.Component { }) } - setPage(page, filteredSecretList, sortDirection = undefined) { + setPage(page, secretList, sortDirection, filterString) { + + let filtered = filterString ? _.filter(secretList, (item) => { return item.toLowerCase().includes(filterString.toLowerCase()); }) : secretList; + let maxPage = Math.ceil(filtered.length / this.state.maxItemsPerPage); + // Never allow to set to higher page than max + page = page > maxPage ? maxPage : page // Never allow a 0th or negative page page = page <= 0 ? 1 : page; sortDirection = sortDirection ? sortDirection : this.state.secretSortDir; - let sortedSecrets = _.orderBy(filteredSecretList, _.identity, sortDirection); + let sortedSecrets = _.orderBy(filtered, _.identity, sortDirection); let _pagedSecrets = _.chunk(sortedSecrets, this.state.maxItemsPerPage); this.setState( { @@ -173,7 +181,6 @@ class GenericSecretBackend extends React.Component { ) } - displaySecret() { tokenHasCapabilities(['read'], this.state.currentLogicalPath) .then(() => { @@ -210,7 +217,8 @@ class GenericSecretBackend extends React.Component { secretList: [], filteredSecretList: [], fullSecretList: [], - currentPage: 1 + currentPage: 1, + clickedSecret: '' }) } } @@ -464,7 +472,7 @@ class GenericSecretBackend extends React.Component { leftAvatar={avatar} rightIconButton={action} onTouchTap={() => { - this.setState({ newSecretName: '' }); + this.setState({ newSecretName: '' , clickedSecret: key}); tokenHasCapabilities([capability], this.state.currentLogicalPath + key).then(() => { history.push(`/secrets/generic/${this.state.currentLogicalPath}${key}`); }).catch(() => { @@ -521,12 +529,10 @@ class GenericSecretBackend extends React.Component { floatingLabelFixed={true} floatingLabelText="Filter" hintText="Filter list items" - onChange={(e, v) => { - let filtered = v ? _.filter(this.state.fullSecretList, (item) => { return item.toLowerCase().includes(v.toLowerCase()); }) : this.state.fullSecretList; - if (filtered.length > 0) { - let maxPage = Math.ceil(filtered.length / this.state.maxItemsPerPage); - this.setPage(this.state.currentPage > maxPage ? maxPage : this.state.currentPage, filtered); - } + value={this.state.filterString} + onChange={(e,v) => { + this.setState({ filterString: v }); + this.setPage(this.state.currentPage, this.state.fullSecretList, this.state.secretSortDir, v) }} /> { - this.setPage(this.state.currentPage, this.state.filteredSecretList, v); + value={this.state.secretSortDir} + onChange={(e, i, v) => { + this.setPage(this.state.currentPage, this.state.filteredSecretList, v, this.state.filterString); }} > @@ -562,7 +569,7 @@ class GenericSecretBackend extends React.Component { { this.setPage(e, this.state.filteredSecretList) }} + onChange={(e) => { this.setPage(e, this.state.filteredSecretList, this.state.sortDirection, this.state.filterString) }} /> From bb5bb3de0f2afdc5c01f94829f655bb12bdb8f83 Mon Sep 17 00:00:00 2001 From: djenriquez Date: Tue, 13 Jun 2017 23:43:59 -0700 Subject: [PATCH 2/2] Restore node 8-alpine base image --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index 64f6e66..0906bd1 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:7-alpine +FROM node:8.1.0-alpine MAINTAINER Vault-UI Contributors