feat(ui): add option to show all consumer groups by default (#971)

Co-authored-by: Max Meijer <[email protected]>
tchiotludo · Jan 5, 2022 · 37e85ab · 37e85ab
1 parent ff3bf9c
commit 37e85ab
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 9 deletions.
diff --git a/application.example.yml b/application.example.yml
@@ -102,6 +102,7 @@ akhq:
           default-view: ALL  # default list view (ALL, HIDE_INTERNAL, HIDE_INTERNAL_STREAM, HIDE_STREAM). Overrides default
           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.
         topic-data:
           sort: NEWEST # default sort order (OLDEST, NEWEST) (default: OLDEST).  Overrides default
 
@@ -154,6 +155,7 @@ akhq:
       - "^.*-rekey$"
     skip-consumer-groups: false # Skip loading consumer group information when showing topics
     skip-last-record: false # Skip loading last record date information when showing topics
+    show-all-consumer-groups: false # Expand list of consumer groups instead of showing one.
     # Retry options for topic operations
     retry:
       topic-exists: # Delay between retries when checking for existence of newly created topics. This is needed as it might take the kafka broker a few seconds to create new topics.
@@ -170,6 +172,7 @@ akhq:
       default-view: ALL  # default list view (ALL, HIDE_INTERNAL, HIDE_INTERNAL_STREAM, HIDE_STREAM). Overrides default
       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.
     topic-data:
       sort: NEWEST # default sort order (OLDEST, NEWEST) (default: OLDEST).  Overrides default
 

diff --git a/client/src/containers/Settings/Settings.jsx b/client/src/containers/Settings/Settings.jsx
@@ -13,7 +13,8 @@ class Settings extends Form {
       topicDefaultView: '',
       topicDataSort: '',
       skipConsumerGroups: false,
-      skipLastRecord: false
+      skipLastRecord: false,
+      showAllConsumerGroups: true
     },
     errors: {}
   };
@@ -26,7 +27,8 @@ class Settings extends Form {
     topicDefaultView: Joi.string().required(),
     topicDataSort: Joi.string().required(),
     skipConsumerGroups: Joi.boolean().optional(),
-    skipLastRecord: Joi.boolean().optional()
+    skipLastRecord: Joi.boolean().optional(),
+    showAllConsumerGroups: Joi.boolean().optional()
   };
 
   componentDidMount() {
@@ -38,7 +40,8 @@ class Settings extends Form {
         topicDefaultView: (uiOptions && uiOptions.topic)? uiOptions.topic.defaultView : '',
         topicDataSort: (uiOptions && uiOptions.topicData)? uiOptions.topicData.sort : '',
         skipConsumerGroups: (uiOptions && uiOptions.topic)? uiOptions.topic.skipConsumerGroups : false,
-        skipLastRecord: (uiOptions && uiOptions.topic)? uiOptions.topic.skipLastRecord : false
+        skipLastRecord: (uiOptions && uiOptions.topic)? uiOptions.topic.skipLastRecord : false,
+        showAllConsumerGroups: (uiOptions && uiOptions.topic)? uiOptions.topic.showAllConsumerGroups : false
       }})
   }
 
@@ -53,10 +56,17 @@ class Settings extends Form {
   doSubmit() {
     const { clusterId, formData } = this.state;
     setUIOptions(clusterId,
-        { topic: { defaultView: formData.topicDefaultView,
-                               skipConsumerGroups: formData.skipConsumerGroups,
-                               skipLastRecord: formData.skipLastRecord },
-                      topicData: {sort: formData.topicDataSort} });
+        { 
+          topic: { 
+            defaultView: formData.topicDefaultView,
+            skipConsumerGroups: formData.skipConsumerGroups,
+            skipLastRecord: formData.skipLastRecord,
+            showAllConsumerGroups: formData.showAllConsumerGroups
+          },
+          topicData: {
+            sort: formData.topicDataSort
+          } 
+        });
     toast.success(`Settings for cluster '${clusterId}' updated successfully.`);
   }
 
@@ -109,6 +119,20 @@ class Settings extends Form {
                   }}
               /></span>
             </div>
+            <div className="select-wrapper settings-wrapper row">
+              <span className="col-sm-2 col-form-label">Show All Consumer Groups</span>
+              <span className="col-sm-10 row-checkbox-settings">
+              <input
+                  type="checkbox"
+                  value="showAllConsumerGroups"
+                  checked={this.state.formData.showAllConsumerGroups || false}
+                  onChange={ event => {
+                    const { formData } = this.state;
+                    formData.showAllConsumerGroups = event.target.checked;
+                    this.setState({formData});
+                  }}
+              /></span>
+            </div>            
           </fieldset>
 
           <fieldset id="topicData" key="topicData">

diff --git a/client/src/containers/Topic/TopicList/TopicList.jsx b/client/src/containers/Topic/TopicList/TopicList.jsx
@@ -191,7 +191,7 @@ class TopicList extends Root {
         groupComponent: undefined,
         internal: topic.internal
       }
-      collapseConsumerGroups[topic.name] = false;
+      collapseConsumerGroups[topic.name] = (uiOptions.showAllConsumerGroups)  ? true : false;
     });
     this.setState({collapseConsumerGroups});
     setState()

diff --git a/docs/docs/configuration/akhq.md b/docs/docs/configuration/akhq.md
@@ -28,6 +28,7 @@ These parameters are the default values used in the topic creation page.
 * `akhq.ui-options.topic.default-view` is default list view (ALL, HIDE_INTERNAL, HIDE_INTERNAL_STREAM, HIDE_STREAM) (default: HIDE_INTERNAL)
 * `akhq.ui-options.topic.skip-consumer-groups` hide consumer groups columns on topic list
 * `akhq.ui-options.topic.skip-last-record` hide the last records on topic list
+* `akhq.ui-options.topic.show-all-consumer-groups` expand lists of consumer groups on topic list
 
 ### Topic Data
 * `akhq.ui-options.topic-data.sort`: default sort order (OLDEST, NEWEST) (default: OLDEST)

diff --git a/src/main/java/org/akhq/configs/Connection.java b/src/main/java/org/akhq/configs/Connection.java
@@ -74,7 +74,8 @@ public UiOptions mergeOptions(UIOptions defaultOptions) {
         options.topic = new UiOptionsTopic(
             StringUtils.isNotEmpty(this.uiOptions.topic.getDefaultView()) ? this.uiOptions.topic.getDefaultView() : defaultOptions.getTopic().getDefaultView(),
             (this.uiOptions.topic.getSkipConsumerGroups() != null) ? this.uiOptions.topic.getSkipConsumerGroups() : defaultOptions.getTopic().getSkipConsumerGroups(),
-            (this.uiOptions.topic.getSkipLastRecord() != null) ? this.uiOptions.topic.getSkipLastRecord() : defaultOptions.getTopic().getSkipLastRecord()
+            (this.uiOptions.topic.getSkipLastRecord() != null) ? this.uiOptions.topic.getSkipLastRecord() : defaultOptions.getTopic().getSkipLastRecord(),
+            (this.uiOptions.topic.getShowAllConsumerGroups() != null) ? this.uiOptions.topic.getShowAllConsumerGroups() : defaultOptions.getTopic().getShowAllConsumerGroups()
         );
 
         options.topicData = new UiOptionsTopicData(

diff --git a/src/main/java/org/akhq/configs/UiOptionsTopic.java b/src/main/java/org/akhq/configs/UiOptionsTopic.java
@@ -11,4 +11,5 @@ public class UiOptionsTopic {
     private String defaultView;
     private Boolean skipConsumerGroups;
     private Boolean skipLastRecord;
+    private Boolean showAllConsumerGroups;
 }