FE: CONSUMERS: Add a tooltip for state (#3729)

kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx

@@ -25,6 +25,8 @@ import {
 } from 'lib/hooks/api/consumers';
 
 import ListItem from './ListItem';
+import Tooltip from '../../common/Tooltip/Tooltip';
+import { CONSUMER_GROUP_STATE_TOOLTIPS } from '../../../lib/constants';
 
 const Details: React.FC = () => {
   const navigate = useNavigate();
@@ -93,9 +95,15 @@ const Details: React.FC = () => {
       <Metrics.Wrapper>
         <Metrics.Section>
           <Metrics.Indicator label="State">
-            <Tag color={getTagColor(consumerGroup.data?.state)}>
-              {consumerGroup.data?.state}
-            </Tag>
+            <Tooltip
+              value={
+                <Tag color={getTagColor(consumerGroup.data?.state)}>
+                  {consumerGroup.data?.state}
+                </Tag>
+              }
+              content={CONSUMER_GROUP_STATE_TOOLTIPS[consumerGroup.data?.state]}
+              placement="bottom-start"
+            />
           </Metrics.Indicator>
           <Metrics.Indicator label="Members">
             {consumerGroup.data?.members}

kafka-ui-react-app/src/components/ConsumerGroups/List.tsx

@@ -5,15 +5,17 @@ import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel
 import {
   ConsumerGroupDetails,
   ConsumerGroupOrdering,
+  ConsumerGroupState,
   SortOrder,
 } from 'generated-sources';
 import useAppParams from 'lib/hooks/useAppParams';
 import { clusterConsumerGroupDetailsPath, ClusterNameRoute } from 'lib/paths';
 import { ColumnDef } from '@tanstack/react-table';
-import Table, { TagCell, LinkCell } from 'components/common/NewTable';
+import Table, { LinkCell, TagCell } from 'components/common/NewTable';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { PER_PAGE } from 'lib/constants';
+import { CONSUMER_GROUP_STATE_TOOLTIPS, PER_PAGE } from 'lib/constants';
 import { useConsumerGroups } from 'lib/hooks/api/consumers';
+import Tooltip from '../common/Tooltip/Tooltip';
 
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -69,7 +71,16 @@ const List = () => {
         id: ConsumerGroupOrdering.STATE,
         header: 'State',
         accessorKey: 'state',
-        cell: TagCell,
+        cell: (args) => {
+          const value = args.getValue() as ConsumerGroupState;
+          return (
+            <Tooltip
+              value={<TagCell {...args} />}
+              content={CONSUMER_GROUP_STATE_TOOLTIPS[value]}
+              placement="bottom-end"
+            />
+          );
+        },
       },
     ],
     []

kafka-ui-react-app/src/lib/constants.ts

@@ -1,5 +1,5 @@
 import { SelectOption } from 'components/common/Select/Select';
-import { ConfigurationParameters } from 'generated-sources';
+import {ConfigurationParameters, ConsumerGroupState} from 'generated-sources';
 
 declare global {
   interface Window {
@@ -96,3 +96,12 @@ export const METRICS_OPTIONS: SelectOption[] = [
   { value: 'JMX', label: 'JMX' },
   { value: 'PROMETHEUS', label: 'PROMETHEUS' },
 ];
+
+export const CONSUMER_GROUP_STATE_TOOLTIPS : Record<ConsumerGroupState, string> = {
+  EMPTY: 'The group exists but has no members.',
+  STABLE: 'Consumers are happily consuming and have assigned partitions.',
+  PREPARING_REBALANCE: 'Something has changed, and the reassignment of partitions is required.',
+  COMPLETING_REBALANCE: 'Partition reassignment is in progress.',
+  DEAD: 'The group is going to be removed. It might be due to the inactivity, or the group is being migrated to different group coordinator.',
+  UNKNOWN: ''
+}