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

Fix Pagination #134

Merged
merged 2 commits into from
Jun 14, 2017
Merged

Fix Pagination #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59f3fa2
Fix pagination
djenriquez Jun 14, 2017
bb5bb3d
Restore node 8-alpine base image
djenriquez Jun 14, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Dockerfile
View file
Open in desktop
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
Open in desktop
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