feat(groups): improve consumer groups loading (#1889)

Author: AlexisSouquiere

application.example.yml

@@ -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)
@@ -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
 

client/src/components/SearchBar/SearchBar.jsx

@@ -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: {},
@@ -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 = {};
@@ -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;
@@ -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;
   }
 
@@ -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);
   };
@@ -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>
@@ -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>

client/src/containers/Settings/Settings.jsx

@@ -17,7 +17,8 @@ class Settings extends Form {
       topicDataDateTimeFormat: '',
       skipConsumerGroups: false,
       skipLastRecord: false,
-      showAllConsumerGroups: true
+      showAllConsumerGroups: true,
+      groupsDefaultView: ''
     },
     errors: {}
   };
@@ -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() {
@@ -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
+                : ''
           }
         });
       });
@@ -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,
@@ -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">