feat: add a dropdown button to the topic table on the Consumer Group page for deleting offsets.

Author: p-eye

contract/src/main/resources/swagger/kafbat-ui-api.yaml

@@ -1048,6 +1048,32 @@ paths:
         200:
           description: OK
 
+  /api/clusters/{clusterName}/consumer-groups/{id}/topics/{topicName}:
+    delete:
+      tags:
+        - Consumer Groups
+      summary: delete consumer group offsets
+      operationId: deleteConsumerGroupOffsets
+      parameters:
+        - name: clusterName
+          in: path
+          required: true
+          schema:
+            type: string
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: string
+        - name: topicName
+          in: path
+          required: true
+          schema:
+            type: string
+      responses:
+        200:
+          description: OK
+
   /api/clusters/{clusterName}/schemas:
     post:
       tags:

frontend/src/components/ConsumerGroups/Details/ListItem.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
-import { ConsumerGroupTopicPartition } from 'generated-sources';
+import { Action, ConsumerGroupTopicPartition, ResourceType } from 'generated-sources';
 import { Link } from 'react-router-dom';
 import { ClusterName } from 'lib/interfaces/cluster';
-import { clusterTopicPath } from 'lib/paths';
+import { ClusterGroupParam, clusterTopicPath } from 'lib/paths';
+import { useDeleteConsumerGroupOffsetsMutation } from 'lib/hooks/api/consumers';
+import useAppParams from 'lib/hooks/useAppParams';
+import { Dropdown } from 'components/common/Dropdown';
+import { ActionDropdownItem } from 'components/common/ActionComponent';
 import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
@@ -18,6 +22,8 @@ interface Props {
 
 const ListItem: React.FC<Props> = ({ clusterName, name, consumers }) => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const consumerProps = useAppParams<ClusterGroupParam>();
+  const deleteOffsetMutation = useDeleteConsumerGroupOffsetsMutation(consumerProps);
 
   const getTotalconsumerLag = () => {
     let count = 0;
@@ -27,6 +33,11 @@ const ListItem: React.FC<Props> = ({ clusterName, name, consumers }) => {
     return count;
   };
 
+  const deleteOffsetHandler = (topicName?: string) => {
+    if (topicName === undefined) return;
+    deleteOffsetMutation.mutateAsync(topicName);
+  };
+
   return (
     <>
       <tr>
@@ -41,6 +52,22 @@ const ListItem: React.FC<Props> = ({ clusterName, name, consumers }) => {
           </FlexWrapper>
         </td>
         <td>{getTotalconsumerLag()}</td>
+        <td>
+          <Dropdown>
+            <ActionDropdownItem
+              onClick={() => deleteOffsetHandler(name)}
+              danger
+              confirm="Are you sure you want to delete offsets from the topic?"
+              permission={{
+                resource: ResourceType.CONSUMER,
+                action: Action.RESET_OFFSETS,
+                value: consumerProps.consumerGroupID,
+              }}
+            >
+              <span>Delete offsets</span>
+            </ActionDropdownItem>
+          </Dropdown>
+        </td>
       </tr>
       {isOpen && <TopicContents consumers={consumers} />}
     </>

frontend/src/lib/hooks/api/consumers.ts

@@ -90,3 +90,30 @@ export const useResetConsumerGroupOffsetsMutation = ({
     }
   );
 };
+
+export const useDeleteConsumerGroupOffsetsMutation = ({
+  clusterName,
+  consumerGroupID,
+}: UseConsumerGroupDetailsProps) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (topicName: string) =>
+      api.deleteConsumerGroupOffsets({
+        clusterName,
+        id: consumerGroupID,
+        topicName,
+      }),
+    {
+      onSuccess: (_, topicName) => {
+        showSuccessAlert({
+          message: `Consumer ${consumerGroupID} group offsets in topic ${topicName} deleted`,
+        });
+        queryClient.invalidateQueries([
+          'clusters',
+          clusterName,
+          'consumerGroups',
+        ]);
+      },
+    }
+  );
+};