FE: Consumers: Add a tooltip for a state (#3871)

Co-authored-by: seonho.jeong <seonho.jeong@navercorp.com>

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

@@ -16,13 +16,15 @@ import { Table } from 'components/common/table/Table/Table.styled';
 import getTagColor from 'components/common/Tag/getTagColor';
 import { Dropdown } from 'components/common/Dropdown';
 import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
-import { Action, ResourceType } from 'generated-sources';
+import { Action, ConsumerGroupState, ResourceType } from 'generated-sources';
 import { ActionDropdownItem } from 'components/common/ActionComponent';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import {
   useConsumerGroupDetails,
   useDeleteConsumerGroupMutation,
 } from 'lib/hooks/api/consumers';
+import Tooltip from 'components/common/Tooltip/Tooltip';
+import { CONSUMER_GROUP_STATE_TOOLTIPS } from 'lib/constants';
 
 import ListItem from './ListItem';
 
@@ -96,9 +98,19 @@ 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 || ConsumerGroupState.UNKNOWN
+                ]
+              }
+              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 'components/common/Tooltip/Tooltip';
 
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -69,7 +71,17 @@ const List = () => {
         id: ConsumerGroupOrdering.STATE,
         header: 'State',
         accessorKey: 'state',
-        cell: TagCell,
+        // eslint-disable-next-line react/no-unstable-nested-components
+        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,14 @@ 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: '',
+  } as const;