Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(groups): improve consumer groups loading #1889

Open
wants to merge 6 commits into
base: dev
Choose a base branch
from
Open

feat(groups): improve consumer groups loading #1889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f859949
Adding hide empty groups option in topic groups
AlexisSouquiere Jul 30, 2024
98f5ed9
Adding Groups Default View in settings page
AlexisSouquiere Aug 1, 2024
ed39414
Update doc
AlexisSouquiere Aug 1, 2024
5a25cb8
Lint
AlexisSouquiere Aug 1, 2024
ed8d91c
Using groups default view on topics list
AlexisSouquiere Aug 6, 2024
c59840f
Using groups default view on topics list
AlexisSouquiere Aug 6, 2024
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: 2 additions & 0 deletions application.example.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ akhq:
skip-consumer-groups: false # Skip loading consumer group information when showing topics. Overrides default
skip-last-record: true # Skip loading last record date information when showing topics. Overrides default
show-all-consumer-groups: true # Expand list of consumer groups instead of showing one. Overrides default.
groups-default-view: ALL # default consumer groups list view (ALL, HIDE_EMPTY). Overrides default
topic-data:
sort: NEWEST # default sort order (OLDEST, NEWEST) (default: OLDEST). Overrides default
date-time-format: ISO # format of message timestamps (RELATIVE, ISO) (default: RELATIVE)
Expand Down Expand Up @@ -181,6 +182,7 @@ akhq:
skip-consumer-groups: false # Skip loading consumer group information when showing topics. Overrides default
skip-last-record: true # Skip loading last record date information when showing topics. Overrides default
show-all-consumer-groups: true # Expand list of consumer groups instead of showing one. Overrides default.
groups-default-view: ALL # default consumer groups list view (ALL, HIDE_EMPTY). Overrides default
topic-data:
sort: NEWEST # default sort order (OLDEST, NEWEST) (default: OLDEST). Overrides default

Expand Down
55 changes: 42 additions & 13 deletions client/src/components/SearchBar/SearchBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ class SearchBar extends Form {
showTopicListView: PropTypes.bool,
showSearch: PropTypes.bool,
showFilters: PropTypes.string,
showKeepSearch: PropTypes.bool
showKeepSearch: PropTypes.bool,
showGroupsListView: PropTypes.bool
};
state = {
formData: {},
Expand All @@ -34,7 +35,16 @@ class SearchBar extends Form {
_id: SETTINGS_VALUES.TOPIC.TOPIC_DEFAULT_VIEW.HIDE_STREAM,
name: 'Hide stream topics'
}
]
],
groupsListViewOptions: [
{
_id: SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW.ALL,
name: "Show empty consumer groups"
},
{
_id: SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW.HIDE_EMPTY,
name: "Hide empty consumer groups"
}]
};

schema = {};
Expand All @@ -44,19 +54,16 @@ class SearchBar extends Form {
}

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

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

setupProps() {
const { showSearch, showTopicListView, showKeepSearch } = this.props;
const { showSearch, showTopicListView, showKeepSearch, showGroupsListView } = this.props;
const { formData } = this.state;
if (showSearch) {
const { search } = this.props;
Expand All @@ -72,6 +79,11 @@ class SearchBar extends Form {
formData['keepSearch'] = this.props.keepSearch;
this.schema['keepSearch'] = Joi.boolean();
}
if (showGroupsListView) {
const { groupsListView } = this.props;
formData['groupsListView'] = groupsListView;
this.schema['groupsListView'] = Joi.string().required();
}
return formData;
}

Expand All @@ -88,14 +100,15 @@ class SearchBar extends Form {
}

doSubmit = () => {
const { pagination, search, topicListView, keepSearch } = this.state.formData;
const { pagination, search, topicListView, keepSearch, groupsListView } = this.state.formData;
const data = {
pagination: pagination,
searchData: {
search: search,
topicListView: topicListView
},
keepSearch: keepSearch
keepSearch: keepSearch,
groupsListView: groupsListView
};
this.props.doSubmit(data);
};
Expand All @@ -109,8 +122,8 @@ class SearchBar extends Form {
}

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

return (
<React.Fragment>
Expand Down Expand Up @@ -155,6 +168,22 @@ class SearchBar extends Form {
'select-wrapper',
false
)}
{showGroupsListView && (
this.renderSelect(
'groupsListView',
'',
groupsListViewOptions,
({ currentTarget: input }) => {
let { formData } = this.state;
formData.groupsListView = input.value;
this.setState();
this.props.ongroupsListViewChange(input.value);
},
'',
'select-wrapper',
false
)
)}
<button className="btn btn-primary" type="submit">
<FontAwesomeIcon icon={faSearch} />
<span className="d-lg-none"> Search</span>
Expand Down
33 changes: 29 additions & 4 deletions client/src/containers/Settings/Settings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ class Settings extends Form {
topicDataDateTimeFormat: '',
skipConsumerGroups: false,
skipLastRecord: false,
showAllConsumerGroups: true
showAllConsumerGroups: true,
groupsDefaultView: '',
},
errors: {}
};
Expand All @@ -33,14 +34,19 @@ class Settings extends Form {
topicDataDateTimeFormat = Object.entries(SETTINGS_VALUES.TOPIC_DATA.DATE_TIME_FORMAT).map(
([value]) => ({ _id: value, name: value })
);
groupsDefaultView = Object.entries(SETTINGS_VALUES.TOPIC.CONSUMER_GROUP_DEFAULT_VIEW).map(([value]) => ({
_id: value,
name: value
}));

schema = {
topicDefaultView: Joi.string().optional(),
topicDataSort: Joi.string().optional(),
topicDataDateTimeFormat: Joi.string().required(),
skipConsumerGroups: Joi.boolean().optional(),
skipLastRecord: Joi.boolean().optional(),
showAllConsumerGroups: Joi.boolean().optional()
showAllConsumerGroups: Joi.boolean().optional(),
groupsDefaultView: Joi.string().optional(),
};

componentDidMount() {
Expand Down Expand Up @@ -72,7 +78,11 @@ class Settings extends Form {
showAllConsumerGroups:
this.state.uiOptions && this.state.uiOptions.topic
? this.state.uiOptions.topic.showAllConsumerGroups
: false
: false,
groupsDefaultView:
this.state.uiOptions && this.state.uiOptions.topic
? this.state.uiOptions.topic.groupsDefaultView
: '',
}
});
});
Expand Down Expand Up @@ -102,7 +112,8 @@ class Settings extends Form {
defaultView: formData.topicDefaultView,
skipConsumerGroups: formData.skipConsumerGroups,
skipLastRecord: formData.skipLastRecord,
showAllConsumerGroups: formData.showAllConsumerGroups
showAllConsumerGroups: formData.showAllConsumerGroups,
groupsDefaultView: formData.groupsDefaultView,
},
topicData: {
sort: formData.topicDataSort,
Expand Down Expand Up @@ -178,6 +189,20 @@ class Settings extends Form {
/>
</span>
</div>
{this.renderSelect(
'groupsDefaultView',
'Consumer Groups Default View',
this.groupsDefaultView,
({ currentTarget: input }) => {
const { formData } = this.state;
formData.groupsDefaultView = input.value;
this.setState({ formData });
},
'col-sm-10',
'select-wrapper settings-wrapper',
true,
{ className: 'form-control' }
)}
</fieldset>

<fieldset id="topicData" key="topicData">
Expand Down
Loading
Loading