Skip to content

Commit

Permalink
fix(ui): keep search as querystring
Browse files Browse the repository at this point in the history 
close #443
  • Loading branch information
polarising-java committed Oct 11, 2020
1 parent e91bf61 commit cd16b3b
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 29 deletions.
50 changes: 35 additions & 15 deletions client/src/components/SearchBar/SearchBar.jsx
View file
Expand Up @@ -9,8 +9,8 @@ class SearchBar extends Form {
showPagination: PropTypes.bool,
showTopicListView: PropTypes.bool,
showSearch: PropTypes.bool,
showConsumerGroup: PropTypes.bool,
showFilters: PropTypes.string
showFilters: PropTypes.string,
showKeepSearch: PropTypes.bool
};
state = {
formData: {},
Expand Down Expand Up @@ -38,25 +38,35 @@ class SearchBar extends Form {
schema = {};

componentDidMount() {
const { showSearch, showTopicListView, showConsumerGroup } = this.props;
const { formData, errors } = this.state;
this.setState({ formData: this.setupProps() });
}

componentDidUpdate(prevProps, prevState) {
const { search, topicListView, keepSearch } = this.props;

if(search !== prevProps.search || topicListView !== prevProps.topicListView || keepSearch !== prevProps.keepSearch) {
this.setupProps();
}
}

setupProps() {
const { showSearch, showTopicListView, showKeepSearch } = this.props;
const { formData } = this.state;
if (showSearch) {
const { search } = this.props;
formData['search'] = search;
this.schema['search'] = Joi.string().allow('');
}

if (showTopicListView) {
const { topicListView } = this.props;
formData['topicListView'] = topicListView;
this.schema['topicListView'] = Joi.string().required();
} else if (showConsumerGroup) {
const { groupListView } = this.props;
formData['groupListView'] = groupListView;
this.schema['groupListView'] = Joi.string().required();
}

this.setState({ formData, errors });
if(showKeepSearch) {
formData['keepSearch'] = this.props.keepSearch;
this.schema['keepSearch'] = Joi.boolean();
}
return formData;
}

setValue(value) {
Expand All @@ -72,13 +82,14 @@ class SearchBar extends Form {
}

doSubmit = () => {
const { pagination, search, topicListView } = this.state.formData;
const { pagination, search, topicListView, keepSearch } = this.state.formData;
const data = {
pagination: pagination,
searchData: {
search: search,
topicListView: topicListView
}
},
keepSearch: keepSearch
};
this.props.doSubmit(data);
};
Expand All @@ -90,9 +101,10 @@ class SearchBar extends Form {
this.setState({ showFilters: 'show' });
}
}

render() {
const { showSearch, showTopicListView } = this.props;
const { topicListViewOptions, showFilters } = this.state;
const { showSearch, showTopicListView, showKeepSearch } = this.props;
const { topicListViewOptions, showFilters, formData } = this.state;

return (
<React.Fragment>
Expand Down Expand Up @@ -143,6 +155,14 @@ class SearchBar extends Form {
<span className="d-md-none">Search </span>
<i className="fa fa-search" />
</button>
{showKeepSearch && <span><input
type="checkbox"
name="keepSearch"
id="keepSearch"
onClick={(event) => this.props.onKeepSearchChange(event.target.checked)}
defaultChecked={formData['keepSearch']}
/> Keep search
</span>}
</form>
</div>
</React.Fragment>
Expand Down
16 changes: 13 additions & 3 deletions client/src/containers/Acl/AclList/Acls.jsx
View file
Expand Up @@ -17,14 +17,20 @@ class Acls extends Root {
};

componentDidMount() {
this.getAcls();
const { searchData } = this.state;
const query = new URLSearchParams(this.props.location.search);
const { clusterId } = this.props.match.params;

this.setState({ selectedCluster: clusterId, searchData: { search: (query.get('search'))? query.get('search') : searchData.search }}, () => {
this.getAcls();
});
}

async getAcls() {
let acls = [];
const { clusterId } = this.props.match.params;
const { selectedCluster } = this.state;

acls = await this.getApi(uriAclsList(clusterId, this.state.searchData.search));
acls = await this.getApi(uriAclsList(selectedCluster, this.state.searchData.search));
this.handleData(acls.data);
}

Expand All @@ -44,6 +50,10 @@ class Acls extends Root {
const { searchData } = data;
this.setState({ searchData, loading: true }, () => {
this.getAcls();
this.props.history.push({
pathname: `/ui/${this.state.selectedCluster}/acls`,
search: `search=${searchData.search}`
});
});
};

Expand Down
11 changes: 9 additions & 2 deletions client/src/containers/ConsumerGroup/ConsumerGroupList/ConsumerGroupList.jsx
View file
Expand Up @@ -28,15 +28,22 @@ class ConsumerGroupList extends Root {
};

componentDidMount() {
let { clusterId } = this.props.match.params;
this.setState({ selectedCluster: clusterId }, () => {
const { clusterId } = this.props.match.params;
const { search } = this.state;
const query = new URLSearchParams(this.props.location.search);

this.setState({ selectedCluster: clusterId, search: (query.get('search'))? query.get('search') : search }, () => {
this.getConsumerGroup();
});
}

handleSearch = data => {
this.setState({ pageNumber: 1, search: data.searchData.search }, () => {
this.getConsumerGroup();
this.props.history.push({
pathname: `/ui/${this.state.selectedCluster}/group`,
search: `search=${data.searchData.search}`
});
});
};

Expand Down
8 changes: 7 additions & 1 deletion client/src/containers/Schema/SchemaList/SchemaList.jsx
View file
Expand Up @@ -41,8 +41,10 @@ class SchemaList extends Root {

componentDidMount() {
let { clusterId } = this.props.match.params;
const { searchData } = this.state;
const query = new URLSearchParams(this.props.location.search);

this.setState({ selectedCluster: clusterId }, () => {
this.setState({ selectedCluster: clusterId, searchData: { search: (query.get('search'))? query.get('search') : searchData.search }}, () => {
this.getSchemaRegistry();
});
}
Expand All @@ -51,6 +53,10 @@ class SchemaList extends Root {
const { searchData } = data;
this.setState({ pageNumber: 1, searchData }, () => {
this.getSchemaRegistry();
this.props.history.push({
pathname: `/ui/${this.state.selectedCluster}/schema`,
search: `search=${searchData.search}`
});
});
};

Expand Down
58 changes: 50 additions & 8 deletions client/src/containers/Topic/TopicList/TopicList.jsx
View file
Expand Up @@ -28,6 +28,7 @@ class TopicList extends Root {
search: '',
topicListView: 'HIDE_INTERNAL'
},
keepSearch: false,
createTopicFormData: {
name: '',
partition: 1,
Expand All @@ -42,8 +43,32 @@ class TopicList extends Root {
};

componentDidMount() {
let { clusterId } = this.props.match.params;
this.setState({ selectedCluster: clusterId }, this.getTopics);
const { clusterId } = this.props.match.params;
const query = new URLSearchParams(this.props.location.search);
const {searchData, keepSearch} = this.state;

let searchDataTmp;
let keepSearchTmp = keepSearch;

const topicListSearch = localStorage.getItem('topicListSearch');
if(topicListSearch) {
searchDataTmp = JSON.parse(topicListSearch);
keepSearchTmp = true;
} else {
searchDataTmp = {
search: (query.get('search'))? query.get('search') : searchData.search,
topicListView: (query.get('topicListView'))? query.get('topicListView') : searchData.topicListView,
}
}

this.setState({selectedCluster: clusterId, searchData: searchDataTmp, keepSearch: keepSearchTmp}, () => {
this.getTopics();
this.props.history.replace({
pathname: `/ui/${this.state.selectedCluster}/topic`,
search: this.props.location.search
});
});

}

componentDidUpdate(prevProps, prevState) {
Expand Down Expand Up @@ -84,8 +109,15 @@ class TopicList extends Root {

handleSearch = data => {
const { searchData } = data;


this.setState({ pageNumber: 1, searchData }, () => {
this.getTopics();
this.handleKeepSearchChange(data.keepSearch);
this.props.history.push({
pathname: `/ui/${this.state.selectedCluster}/topic`,
search: `search=${searchData.search}&topicListView=${searchData.topicListView}`
});
});
};

Expand Down Expand Up @@ -121,9 +153,7 @@ class TopicList extends Root {
} else {
this.setState({ topics: [] });
}
this.setState({ selectedCluster, totalPageNumber: data.page, loading: false }, () =>
this.props.history.replace(`/ui/${selectedCluster}/topic`)
)
this.setState({ selectedCluster, totalPageNumber: data.page, loading: false } )
} else {
this.setState({ topics: [], loading: false, totalPageNumber: 0});
}
Expand Down Expand Up @@ -205,9 +235,18 @@ class TopicList extends Root {
this.setState({collapseConsumerGroups : tmpGroups});
}

handleKeepSearchChange(value){
const { searchData } = this.state;
if(value) {
localStorage.setItem('topicListSearch', JSON.stringify(searchData));
} else {
localStorage.removeItem('topicListSearch');
}

}

render() {
const { topics, selectedCluster, searchData, pageNumber, totalPageNumber, loading, collapseConsumerGroups } = this.state;
const { topics, selectedCluster, searchData, pageNumber, totalPageNumber, loading, collapseConsumerGroups, keepSearch } = this.state;
const roles = this.state.roles || {};
const { clusterId } = this.props.match.params;
const firstColumns = [
Expand All @@ -217,7 +256,6 @@ class TopicList extends Root {
{ colName: 'Consumer Groups', colSpan: 1 }
];


return (
<div>
<Header title="Topics" history={this.props.history} />
Expand All @@ -232,14 +270,18 @@ class TopicList extends Root {
pagination={pageNumber}
showTopicListView={true}
topicListView={searchData.topicListView}
showKeepSearch={true}
keepSearch={keepSearch}
onTopicListViewChange={value => {
let { searchData } = { ...this.state };
searchData.topicListView = value;
this.setState(searchData);
}}
onKeepSearchChange={value => {
this.handleKeepSearchChange(value);
}}
doSubmit={this.handleSearch}
/>

<Pagination
pageNumber={pageNumber}
totalPageNumber={totalPageNumber}
Expand Down

0 comments on commit cd16b3b

Please sign in to comment.