diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.style.ts b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.style.ts
new file mode 100644
index 0000000000..f5f8373333
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.style.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const ClickableRow = styled.tr`
+ cursor: pointer;
+`;
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
index 36e36368c3..6423891f42 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { ClusterName } from 'redux/interfaces';
import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
import { Table } from 'components/common/table/Table/Table.styled';
import PageHeading from 'components/common/PageHeading/PageHeading';
@@ -10,7 +10,10 @@ import useAppParams from 'lib/hooks/useAppParams';
import useBrokers from 'lib/hooks/useBrokers';
import useClusterStats from 'lib/hooks/useClusterStats';
+import { ClickableRow } from './BrokersList.style';
+
const BrokersList: React.FC = () => {
+ const navigate = useNavigate();
const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
const { data: clusterStats } = useClusterStats(clusterName);
const { data: brokers } = useBrokers(clusterName);
@@ -58,7 +61,6 @@ const BrokersList: React.FC = () => {
onlinePartitionCount
)}
- {' '}
of {(onlinePartitionCount || 0) + (offlinePartitionCount || 0)}
@@ -114,8 +116,12 @@ const BrokersList: React.FC = () => {
diskUsage.length !== 0 &&
diskUsage.map(({ brokerId, segmentSize, segmentCount }) => {
const brokerItem = brokers?.find(({ id }) => id === brokerId);
+
return (
-
+ navigate(`${brokerId}`)}
+ >
{brokerId}
@@ -127,7 +133,7 @@ const BrokersList: React.FC = () => {
{segmentCount} |
{brokerItem?.port} |
{brokerItem?.host} |
- |
+
);
})}
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
index 437cc44cd4..94ffa0b77a 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/__test__/BrokersList.spec.tsx
@@ -9,6 +9,14 @@ import {
brokersPayload,
clusterStatsPayload,
} from 'components/Brokers/__test__/fixtures';
+import userEvent from '@testing-library/user-event';
+
+const mockedUsedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedUsedNavigate,
+}));
describe('BrokersList Component', () => {
afterEach(() => fetchMock.reset());
@@ -53,6 +61,22 @@ describe('BrokersList Component', () => {
expect(rows.length).toEqual(3);
});
+ it('opens broker when row clicked', async () => {
+ const fetchStatsMock = fetchMock.get(fetchStatsUrl, clusterStatsPayload);
+ await act(() => {
+ renderComponent();
+ });
+ await waitFor(() => expect(fetchStatsMock.called()).toBeTruthy());
+ await act(() => {
+ userEvent.click(screen.getByRole('cell', { name: '0' }));
+ });
+
+ await waitFor(() => {
+ expect(mockedUsedNavigate).toBeCalled();
+ expect(mockedUsedNavigate).toBeCalledWith('0');
+ });
+ });
+
it('shows warning when offlinePartitionCount > 0', async () => {
const fetchStatsMock = fetchMock.getOnce(fetchStatsUrl, {
...clusterStatsPayload,
@@ -93,6 +117,7 @@ describe('BrokersList Component', () => {
expect(onlineWidgetDef).toBeInTheDocument();
expect(onlineWidget).toBeInTheDocument();
});
+
it('shows right count when inSyncReplicasCount: undefined outOfSyncReplicasCount: 1', async () => {
const fetchStatsMock = fetchMock.getOnce(fetchStatsUrl, {
...clusterStatsPayload,