Issues/1475 fe

e2e-playwright/src/pages/Connectors/ConnectorsLocators.ts

@@ -13,7 +13,7 @@ export default class ConnectorsLocators {
     get rowMenu():Locator { return this.page.getByRole('cell', { name: 'Dropdown Toggle' })};
     get internalMenuButton(): Locator { return this.page.locator('button').filter({ hasText: 'Restart' })};
 
-    rowData(value:string): Locator { return this.page.getByRole('cell', { name: value })};
+    rowData(value:string): Locator { return this.page.getByRole('cell', { name: value, exact: true })};
     rowMenuItem(value:string): Locator { return this.page.getByRole('menuitem', { name: value })};
 
     cellData(value:string): Locator { return this.page.getByText(value, { exact: true })};

frontend/src/components/Connect/Details/Overview/Overview.tsx

@@ -5,6 +5,8 @@ import { Button } from 'components/common/Button/Button';
 import { Modal } from 'components/common/Modal';
 import getTagColor from 'components/common/Tag/getTagColor';
 import { Connector, ConnectorState, Task } from 'generated-sources';
+import { clusterConsumerGroupDetailsPath } from 'lib/paths';
+import { Link, useParams } from 'react-router-dom';
 
 import getTaskMetrics from './getTaskMetrics';
 import * as S from './Overview.styled';
@@ -14,6 +16,7 @@ const Overview: React.FC<{ tasks: Task[]; connector: Connector }> = ({
   connector,
 }) => {
   const [showTraceModal, setShowTraceModal] = useState(false);
+  const { clusterName } = useParams<{ clusterName: string }>();
 
   const { running, failed } = getTaskMetrics(tasks);
 
@@ -59,6 +62,18 @@ const Overview: React.FC<{ tasks: Task[]; connector: Connector }> = ({
           >
             {failed}
           </Metrics.Indicator>
+          {connector.consumer && clusterName && (
+            <Metrics.Indicator label="Consumer Group">
+              <Link
+                to={clusterConsumerGroupDetailsPath(
+                  clusterName,
+                  encodeURIComponent(connector.consumer)
+                )}
+              >
+                {connector.consumer}
+              </Link>
+            </Metrics.Indicator>
+          )}
         </Metrics.Section>
       </Metrics.Wrapper>
 

frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/ConsumerGroupCell.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CellContext } from '@tanstack/react-table';
+import { FullConnectorInfo } from 'generated-sources';
+import { Link, useParams } from 'react-router-dom';
+import { clusterConsumerGroupDetailsPath } from 'lib/paths';
+
+const ConsumerGroupCell = ({ row }: CellContext<FullConnectorInfo, string>) => {
+  const { consumer } = row.original;
+  const { clusterName } = useParams<{ clusterName: string }>();
+
+  if (!consumer || !clusterName) {
+    return <span>-</span>;
+  }
+
+  return (
+    <Link
+      to={clusterConsumerGroupDetailsPath(
+        clusterName,
+        encodeURIComponent(consumer)
+      )}
+      style={{ color: 'var(--color-primary)' }}
+    >
+      {consumer}
+    </Link>
+  );
+};
+
+export default ConsumerGroupCell;

frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/columns.tsx

@@ -9,6 +9,7 @@ import RunningTasksCell, {
   getRunningTasksCountText,
 } from './cells/RunningTasksCell';
 import ActionsCell from './cells/ActionsCell';
+import ConsumerGroupCell from './cells/ConsumerGroupCell';
 
 export const connectorsColumns: ColumnDef<FullConnectorInfo, string>[] = [
   {
@@ -59,6 +60,18 @@ export const connectorsColumns: ColumnDef<FullConnectorInfo, string>[] = [
     meta: { filterVariant: 'multi-select', csvFn: (row) => row.status.state },
     filterFn: 'arrIncludesSome',
   },
+  {
+    header: 'Consumers',
+    accessorKey: 'consumer',
+    cell: ConsumerGroupCell,
+    enableColumnFilter: true,
+    meta: {
+      filterVariant: 'text',
+      csvFn: (row) => row.consumer || '-',
+    },
+    filterFn: 'includesString',
+    enableResizing: true,
+  },
   {
     id: 'running_task',
     accessorKey: 'tasksCount',

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import useAppParams from 'lib/hooks/useAppParams';
 import {
   clusterConsumerGroupResetRelativePath,
   clusterConsumerGroupsPath,
   ClusterGroupParam,
+  clusterConnectorsPath,
 } from 'lib/paths';
 import Search from 'components/common/Search/Search';
 import ClusterContext from 'components/contexts/ClusterContext';
@@ -27,6 +28,7 @@ import { Button } from 'components/common/Button/Button';
 import ExportIcon from 'components/common/Icons/ExportIcon';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import ErrorPage from 'components/ErrorPage/ErrorPage';
+import { getConnectorNameFromConsumerGroup } from 'lib/utils/connectorUtils';
 
 import { TopicsTable } from './TopicsTable/TopicsTable';
 
@@ -56,6 +58,7 @@ const Details: React.FC = () => {
   };
 
   const hasAssignedTopics = consumerGroup?.topics !== 0;
+  const connectorName = getConnectorNameFromConsumerGroup(consumerGroupID);
 
   return (
     <TableProvider>
@@ -122,6 +125,7 @@ const Details: React.FC = () => {
 
             {isSuccess && (
               <>
+                {' '}
                 <Metrics.Wrapper>
                   <Metrics.Section>
                     <Metrics.Indicator label="State">
@@ -154,12 +158,20 @@ const Details: React.FC = () => {
                     <Metrics.Indicator label="Total lag">
                       {consumerGroup?.consumerLag}
                     </Metrics.Indicator>
+                    {connectorName && (
+                      <Metrics.Indicator label="Connector">
+                        <Link
+                          to={`${clusterConnectorsPath(clusterName)}?search=${encodeURIComponent(connectorName)}`}
+                        >
+                          {connectorName}
+                        </Link>
+                      </Metrics.Indicator>
+                    )}
                   </Metrics.Section>
                 </Metrics.Wrapper>
                 <ControlPanelWrapper hasInput style={{ margin: '16px 0 20px' }}>
                   <Search placeholder="Search by Topic Name" />
                 </ControlPanelWrapper>
-
                 <TopicsTable partitions={consumerGroup?.partitions ?? []} />
               </>
             )}

frontend/src/lib/utils/connectorUtils.ts

@@ -0,0 +1,11 @@
+export const getConnectorNameFromConsumerGroup = (
+  consumerGroupId: string
+): string | null => {
+  const CONNECTOR_PREFIX = 'connect-';
+
+  if (consumerGroupId && consumerGroupId.startsWith(CONNECTOR_PREFIX)) {
+    return consumerGroupId.substring(CONNECTOR_PREFIX.length);
+  }
+
+  return null;
+};