Skip to content
This repository has been archived by the owner on Mar 27, 2019. It is now read-only.

Commit

Permalink
Merge pull request #134 from djenriquez/fix/pagination
Browse files Browse the repository at this point in the history 
Fix Pagination
  • Loading branch information
@djenriquez
djenriquez authored Jun 14, 2017
2 parents c184bd1 + bb5bb3d commit 5cb5f59
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 21 deletions.
2 changes: 1 addition & 1 deletion Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
FROM node:7-alpine
FROM node:8.1.0-alpine

MAINTAINER Vault-UI Contributors

Expand Down
47 changes: 27 additions & 20 deletions app/components/Secrets/Generic/Generic.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,9 @@ class GenericSecretBackend extends React.Component {
maxItemsPerPage: 25,
currentPage: 1,
totalPages: 1,
pagedSecrets: []
filterString: "",
pagedSecrets: [],
clickedSecret: ""
}

_.bindAll(
Expand Down Expand Up @@ -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
Expand All @@ -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(
{
Expand Down Expand Up @@ -173,7 +181,6 @@ class GenericSecretBackend extends React.Component {
)
}


displaySecret() {
tokenHasCapabilities(['read'], this.state.currentLogicalPath)
.then(() => {
Expand Down Expand Up @@ -210,7 +217,8 @@ class GenericSecretBackend extends React.Component {
secretList: [],
filteredSecretList: [],
fullSecretList: [],
currentPage: 1
currentPage: 1,
clickedSecret: ''
})
}
}
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -521,21 +529,20 @@ 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)
}}
/>
<SelectField
style={{ width: 150 }}
autoWidth={true}
floatingLabelText="Sort Secrets"
floatingLabelFixed={true}
value={this.state.secretSortDir} onChange={(e, i, 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);
}}
>
<MenuItem value={SORT_DIR.ASC} primaryText="Ascending" />
Expand All @@ -562,7 +569,7 @@ class GenericSecretBackend extends React.Component {
<UltimatePagination
currentPage={this.state.currentPage}
totalPages={this.state.totalPages}
onChange={(e) => { this.setPage(e, this.state.filteredSecretList) }}
onChange={(e) => { this.setPage(e, this.state.filteredSecretList, this.state.sortDirection, this.state.filterString) }}
/>
</div>
</Paper>
Expand Down

0 comments on commit 5cb5f59

Please sign in to comment.