Add UI for broker log dirs (#1992)

* change brokker table

* add broker page

* add tests for broker page

* add test for broker

* add test for broker

* remove unused import

* fix comments

* fix coments

* fix new coments

* fix comments

* fix coments

Co-authored-by: Oleg Shur <workshur@gmail.com>

kafka-ui-react-app/src/components/Brokers/Broker/Broker.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import useInterval from 'lib/hooks/useInterval';
+import PageHeading from 'components/common/PageHeading/PageHeading';
+import { BrokersApi, Configuration } from 'generated-sources';
+import { BASE_PARAMS } from 'lib/constants';
+import * as Metrics from 'components/common/Metrics';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
+import {
+  fetchBrokers,
+  fetchClusterStats,
+  selectStats,
+} from 'redux/reducers/brokers/brokersSlice';
+import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+import useAppParams from 'lib/hooks/useAppParams';
+import { translateLogdir } from 'components/Brokers/utils/translateLogdir';
+import { SmartTable } from 'components/common/SmartTable/SmartTable';
+import { TableColumn } from 'components/common/SmartTable/TableColumn';
+import { useTableState } from 'lib/hooks/useTableState';
+import { ClusterBrokerParam } from 'lib/paths';
+
+const apiClientConf = new Configuration(BASE_PARAMS);
+export const brokersApiClient = new BrokersApi(apiClientConf);
+
+export interface BrokerLogdirState {
+  name: string;
+  error: string;
+  topics: number;
+  partitions: number;
+}
+
+const Broker: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const { clusterName, brokerId } = useAppParams<ClusterBrokerParam>();
+
+  const [logdirs, setLogdirs] = useState<BrokerLogdirState[]>([]);
+  const { diskUsage, items } = useAppSelector(selectStats);
+
+  React.useEffect(() => {
+    brokersApiClient
+      .getAllBrokersLogdirs({
+        clusterName,
+        broker: [Number(brokerId)],
+      })
+      .then((res) => {
+        if (res && res[0]) {
+          setLogdirs([translateLogdir(res[0])]);
+        }
+      });
+    dispatch(fetchClusterStats(clusterName));
+    dispatch(fetchBrokers(clusterName));
+  }, [clusterName, brokerId, dispatch]);
+
+  const tableState = useTableState<BrokerLogdirState, string>(logdirs, {
+    idSelector: (logdir) => logdir.name,
+    totalPages: 0,
+  });
+
+  const brokerItem = items?.find((item) => item.id === Number(brokerId));
+  const brokerDiskUsage = diskUsage?.find(
+    (item) => item.brokerId === Number(brokerId)
+  );
+
+  useInterval(() => {
+    fetchClusterStats(clusterName);
+    fetchBrokers(clusterName);
+  }, 5000);
+  return (
+    <>
+      <PageHeading text={`Broker ${brokerId}`} />
+      <Metrics.Wrapper>
+        <Metrics.Section>
+          <Metrics.Indicator label="Segment Size">
+            <BytesFormatted value={brokerDiskUsage?.segmentSize} />
+          </Metrics.Indicator>
+          <Metrics.Indicator label="Segment Count">
+            {brokerDiskUsage?.segmentCount}
+          </Metrics.Indicator>
+          <Metrics.Indicator label="Port">{brokerItem?.port}</Metrics.Indicator>
+          <Metrics.Indicator label="Host">{brokerItem?.host}</Metrics.Indicator>
+        </Metrics.Section>
+      </Metrics.Wrapper>
+      <SmartTable
+        tableState={tableState}
+        placeholder="Log dir data not available"
+        isFullwidth
+      >
+        <TableColumn title="Name" field="name" />
+        <TableColumn title="Error" field="error" />
+        <TableColumn title="Topics" field="topics" />
+        <TableColumn title="Partitions" field="partitions" />
+      </SmartTable>
+    </>
+  );
+};
+
+export default Broker;

kafka-ui-react-app/src/components/Brokers/Broker/__test__/Broker.spec.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, WithRoute } from 'lib/testHelpers';
+import { screen, waitFor } from '@testing-library/dom';
+import { clusterBrokerPath } from 'lib/paths';
+import fetchMock from 'fetch-mock';
+import { clusterStatsPayloadBroker } from 'redux/reducers/brokers/__test__/fixtures';
+import { act } from '@testing-library/react';
+import Broker from 'components/Brokers/Broker/Broker';
+import { BrokersLogdirs } from 'generated-sources';
+
+describe('Broker Component', () => {
+  afterEach(() => fetchMock.reset());
+
+  const clusterName = 'local';
+  const brokerId = 1;
+
+  const renderComponent = () =>
+    render(
+      <WithRoute path={clusterBrokerPath()}>
+        <Broker />
+      </WithRoute>,
+      {
+        initialEntries: [clusterBrokerPath(clusterName, brokerId)],
+      }
+    );
+
+  describe('Broker', () => {
+    const fetchBrokerMockUrl = `/api/clusters/${clusterName}/brokers/logdirs?broker=${brokerId}`;
+
+    const actRender = async (
+      mockData: BrokersLogdirs[] = clusterStatsPayloadBroker
+    ) => {
+      const fetchBrokerMock = fetchMock.getOnce(fetchBrokerMockUrl, mockData);
+
+      await act(() => {
+        renderComponent();
+      });
+      await waitFor(() => expect(fetchBrokerMock.called()).toBeTruthy());
+    };
+
+    it('renders', async () => {
+      await actRender();
+
+      expect(screen.getByRole('table')).toBeInTheDocument();
+      const rows = screen.getAllByRole('row');
+      expect(rows.length).toEqual(2);
+    });
+
+    it('show warning when broker not found', async () => {
+      await actRender([]);
+
+      expect(
+        screen.getByText('Log dir data not available')
+      ).toBeInTheDocument();
+    });
+
+    it('show broker found', async () => {
+      await actRender();
+      const topicCount = screen.getByText(
+        clusterStatsPayloadBroker[0].topics?.length || 0
+      );
+      const partitionsCount = screen.getByText(
+        clusterStatsPayloadBroker[0].topics?.reduce(
+          (previousValue, currentValue) =>
+            previousValue + (currentValue.partitions?.length || 0),
+          0
+        ) || 0
+      );
+      expect(topicCount).toBeInTheDocument();
+      expect(partitionsCount).toBeInTheDocument();
+    });
+
+    it('show 0s when broker has not topics', async () => {
+      await actRender([{ ...clusterStatsPayloadBroker[0], topics: undefined }]);
+
+      expect(screen.getAllByText(0).length).toEqual(2);
+    });
+
+    it('show - when broker has not name', async () => {
+      await actRender([{ ...clusterStatsPayloadBroker[0], name: undefined }]);
+
+      expect(screen.getByText('-')).toBeInTheDocument();
+    });
+
+    it('show - when broker has not error', async () => {
+      await actRender([{ ...clusterStatsPayloadBroker[0], error: undefined }]);
+      expect(screen.getByText('-')).toBeInTheDocument();
+    });
+  });
+});

kafka-ui-react-app/src/components/Brokers/Brokers.tsx

@@ -1,146 +1,29 @@
 import React from 'react';
-import useInterval from 'lib/hooks/useInterval';
-import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
-import { Table } from 'components/common/table/Table/Table.styled';
-import PageHeading from 'components/common/PageHeading/PageHeading';
-import * as Metrics from 'components/common/Metrics';
-import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
-import { ClusterNameRoute } from 'lib/paths';
-import {
-  fetchBrokers,
-  fetchClusterStats,
-  selectStats,
-} from 'redux/reducers/brokers/brokersSlice';
-import useAppParams from 'lib/hooks/useAppParams';
+import { Route, Routes } from 'react-router-dom';
+import { getNonExactPath, RouteParams } from 'lib/paths';
+import BrokersList from 'components/Brokers/List/BrokersList';
+import Broker from 'components/Brokers/Broker/Broker';
+import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
 
-const Brokers: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const { clusterName } = useAppParams<ClusterNameRoute>();
-  const {
-    brokerCount,
-    activeControllers,
-    onlinePartitionCount,
-    offlinePartitionCount,
-    inSyncReplicasCount,
-    outOfSyncReplicasCount,
-    underReplicatedPartitionCount,
-    diskUsage,
-    version,
-    items,
-  } = useAppSelector(selectStats);
-
-  const replicas = (inSyncReplicasCount ?? 0) + (outOfSyncReplicasCount ?? 0);
-  const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
-  const partitionIsOffline = offlinePartitionCount && offlinePartitionCount > 0;
-  React.useEffect(() => {
-    dispatch(fetchClusterStats(clusterName));
-    dispatch(fetchBrokers(clusterName));
-  }, [clusterName, dispatch]);
-
-  useInterval(() => {
-    fetchClusterStats(clusterName);
-    fetchBrokers(clusterName);
-  }, 5000);
-
-  return (
-    <>
-      <PageHeading text="Brokers" />
-      <Metrics.Wrapper>
-        <Metrics.Section title="Uptime">
-          <Metrics.Indicator label="Total Brokers">
-            {brokerCount}
-          </Metrics.Indicator>
-          <Metrics.Indicator label="Active Controllers">
-            {activeControllers}
-          </Metrics.Indicator>
-          <Metrics.Indicator label="Version">{version}</Metrics.Indicator>
-        </Metrics.Section>
-        <Metrics.Section title="Partitions">
-          <Metrics.Indicator
-            label="Online"
-            isAlert
-            alertType={partitionIsOffline ? 'error' : 'success'}
-          >
-            {partitionIsOffline ? (
-              <Metrics.RedText>{onlinePartitionCount}</Metrics.RedText>
-            ) : (
-              onlinePartitionCount
-            )}
-            <Metrics.LightText>
-              {' '}
-              of {(onlinePartitionCount || 0) + (offlinePartitionCount || 0)}
-            </Metrics.LightText>
-          </Metrics.Indicator>
-          <Metrics.Indicator
-            label="URP"
-            title="Under replicated partitions"
-            isAlert
-            alertType={!underReplicatedPartitionCount ? 'success' : 'error'}
-          >
-            {!underReplicatedPartitionCount ? (
-              <Metrics.LightText>
-                {underReplicatedPartitionCount}
-              </Metrics.LightText>
-            ) : (
-              <Metrics.RedText>{underReplicatedPartitionCount}</Metrics.RedText>
-            )}
-          </Metrics.Indicator>
-          <Metrics.Indicator
-            label="In Sync Replicas"
-            isAlert
-            alertType={areAllInSync ? 'success' : 'error'}
-          >
-            {areAllInSync ? (
-              replicas
-            ) : (
-              <Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
-            )}
-            <Metrics.LightText> of {replicas}</Metrics.LightText>
-          </Metrics.Indicator>
-          <Metrics.Indicator label="Out Of Sync Replicas">
-            {outOfSyncReplicasCount}
-          </Metrics.Indicator>
-        </Metrics.Section>
-      </Metrics.Wrapper>
-      <Table isFullwidth>
-        <thead>
-          <tr>
-            <TableHeaderCell title="Broker" />
-            <TableHeaderCell title="Segment Size (Mb)" />
-            <TableHeaderCell title="Segment Count" />
-            <TableHeaderCell title="Port" />
-            <TableHeaderCell title="Host" />
-          </tr>
-        </thead>
-        <tbody>
-          {(!diskUsage || diskUsage.length === 0) && (
-            <tr>
-              <td colSpan={10}>Disk usage data not available</td>
-            </tr>
-          )}
-
-          {diskUsage &&
-            diskUsage.length !== 0 &&
-            diskUsage.map(({ brokerId, segmentSize, segmentCount }) => {
-              const brokerItem = items?.find((item) => item.id === brokerId);
-
-              return (
-                <tr key={brokerId}>
-                  <td>{brokerId}</td>
-                  <td>
-                    <BytesFormatted value={segmentSize} />
-                  </td>
-                  <td>{segmentCount}</td>
-                  <td>{brokerItem?.port}</td>
-                  <td>{brokerItem?.host}</td>
-                </tr>
-              );
-            })}
-        </tbody>
-      </Table>
-    </>
-  );
-};
+const Brokers: React.FC = () => (
+  <Routes>
+    <Route
+      index
+      element={
+        <BreadcrumbRoute>
+          <BrokersList />
+        </BreadcrumbRoute>
+      }
+    />
+    <Route
+      path={getNonExactPath(RouteParams.brokerId)}
+      element={
+        <BreadcrumbRoute>
+          <Broker />
+        </BreadcrumbRoute>
+      }
+    />
+  </Routes>
+);
 
 export default Brokers;

kafka-ui-react-app/src/components/Brokers/List/BrokersList.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { ClusterName } from 'redux/interfaces';
+import useInterval from 'lib/hooks/useInterval';
+import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+import { NavLink } 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';
+import * as Metrics from 'components/common/Metrics';
+import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
+import {
+  fetchBrokers,
+  fetchClusterStats,
+  selectStats,
+} from 'redux/reducers/brokers/brokersSlice';
+import useAppParams from 'lib/hooks/useAppParams';
+
+const BrokersList: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
+  const {
+    brokerCount,
+    activeControllers,
+    onlinePartitionCount,
+    offlinePartitionCount,
+    inSyncReplicasCount,
+    outOfSyncReplicasCount,
+    underReplicatedPartitionCount,
+    diskUsage,
+    version,
+    items,
+  } = useAppSelector(selectStats);
+
+  const replicas = (inSyncReplicasCount ?? 0) + (outOfSyncReplicasCount ?? 0);
+  const areAllInSync = inSyncReplicasCount && replicas === inSyncReplicasCount;
+  const partitionIsOffline = offlinePartitionCount && offlinePartitionCount > 0;
+  React.useEffect(() => {
+    dispatch(fetchClusterStats(clusterName));
+    dispatch(fetchBrokers(clusterName));
+  }, [clusterName, dispatch]);
+
+  useInterval(() => {
+    fetchClusterStats(clusterName);
+    fetchBrokers(clusterName);
+  }, 5000);
+  return (
+    <>
+      <PageHeading text="Broker" />
+      <Metrics.Wrapper>
+        <Metrics.Section title="Uptime">
+          <Metrics.Indicator label="Total Broker">
+            {brokerCount}
+          </Metrics.Indicator>
+          <Metrics.Indicator label="Active Controllers">
+            {activeControllers}
+          </Metrics.Indicator>
+          <Metrics.Indicator label="Version">{version}</Metrics.Indicator>
+        </Metrics.Section>
+        <Metrics.Section title="Partitions">
+          <Metrics.Indicator
+            label="Online"
+            isAlert
+            alertType={partitionIsOffline ? 'error' : 'success'}
+          >
+            {partitionIsOffline ? (
+              <Metrics.RedText>{onlinePartitionCount}</Metrics.RedText>
+            ) : (
+              onlinePartitionCount
+            )}
+            <Metrics.LightText>
+              {' '}
+              of {(onlinePartitionCount || 0) + (offlinePartitionCount || 0)}
+            </Metrics.LightText>
+          </Metrics.Indicator>
+          <Metrics.Indicator
+            label="URP"
+            title="Under replicated partitions"
+            isAlert
+            alertType={!underReplicatedPartitionCount ? 'success' : 'error'}
+          >
+            {!underReplicatedPartitionCount ? (
+              <Metrics.LightText>
+                {underReplicatedPartitionCount}
+              </Metrics.LightText>
+            ) : (
+              <Metrics.RedText>{underReplicatedPartitionCount}</Metrics.RedText>
+            )}
+          </Metrics.Indicator>
+          <Metrics.Indicator
+            label="In Sync Replicas"
+            isAlert
+            alertType={areAllInSync ? 'success' : 'error'}
+          >
+            {areAllInSync ? (
+              replicas
+            ) : (
+              <Metrics.RedText>{inSyncReplicasCount}</Metrics.RedText>
+            )}
+            <Metrics.LightText> of {replicas}</Metrics.LightText>
+          </Metrics.Indicator>
+          <Metrics.Indicator label="Out Of Sync Replicas">
+            {outOfSyncReplicasCount}
+          </Metrics.Indicator>
+        </Metrics.Section>
+      </Metrics.Wrapper>
+      <Table isFullwidth>
+        <thead>
+          <tr>
+            <TableHeaderCell title="Broker" />
+            <TableHeaderCell title="Segment Size" />
+            <TableHeaderCell title="Segment Count" />
+            <TableHeaderCell title="Port" />
+            <TableHeaderCell title="Host" />
+          </tr>
+        </thead>
+        <tbody>
+          {(!diskUsage || diskUsage.length === 0) && (
+            <tr>
+              <td colSpan={10}>Disk usage data not available</td>
+            </tr>
+          )}
+
+          {diskUsage &&
+            diskUsage.length !== 0 &&
+            diskUsage.map(({ brokerId, segmentSize, segmentCount }) => {
+              const brokerItem = items?.find((item) => item.id === brokerId);
+              return (
+                <tr key={brokerId}>
+                  <td>
+                    <NavLink to={`${brokerId}`} role="link">
+                      {brokerId}
+                    </NavLink>
+                  </td>
+                  <td>
+                    <BytesFormatted value={segmentSize} />
+                  </td>
+                  <td>{segmentCount}</td>
+                  <td>{brokerItem?.port}</td>
+                  <td>{brokerItem?.host}</td>
+                </tr>
+              );
+            })}
+        </tbody>
+      </Table>
+    </>
+  );
+};
+
+export default BrokersList;

kafka-ui-react-app/src/components/Brokers/__test__/Brokers.spec.tsx → kafka-ui-react-app/src/components/Brokers/List/__test__/BrokersList.spec.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import Brokers from 'components/Brokers/Brokers';
 import { render, WithRoute } from 'lib/testHelpers';
 import { screen, waitFor } from '@testing-library/dom';
 import { clusterBrokersPath } from 'lib/paths';
 import fetchMock from 'fetch-mock';
 import { clusterStatsPayload } from 'redux/reducers/brokers/__test__/fixtures';
 import { act } from '@testing-library/react';
+import BrokersList from 'components/Brokers/List/BrokersList';
 
-describe('Brokers Component', () => {
+describe('BrokersList Component', () => {
   afterEach(() => fetchMock.reset());
 
   const clusterName = 'local';
@@ -18,14 +18,14 @@ describe('Brokers Component', () => {
   const renderComponent = () =>
     render(
       <WithRoute path={clusterBrokersPath()}>
-        <Brokers />
+        <BrokersList />
       </WithRoute>,
       {
         initialEntries: [clusterBrokersPath(clusterName)],
       }
     );
 
-  describe('Brokers', () => {
+  describe('BrokersList', () => {
     let fetchBrokersMock: fetchMock.FetchMockStatic;
     const fetchStatsUrl = `/api/clusters/${clusterName}/stats`;
 

kafka-ui-react-app/src/components/Brokers/__tests__/Brokers.spec.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
+import { clusterBrokerPath } from 'lib/paths';
+import Brokers from 'components/Brokers/Brokers';
+
+const brokersList = 'brokersList';
+const broker = 'brokers';
+
+jest.mock('components/Brokers/List/BrokersList', () => () => (
+  <div>{brokersList}</div>
+));
+jest.mock('components/Brokers/Broker/Broker', () => () => <div>{broker}</div>);
+
+describe('Brokers Component', () => {
+  const clusterName = 'clusterName';
+  const brokerId = '1';
+  const renderComponent = (path?: string) => {
+    return render(<Brokers />, {
+      initialEntries: path ? [path] : undefined,
+    });
+  };
+
+  it('renders BrokersList', () => {
+    renderComponent();
+    expect(screen.getByText(brokersList)).toBeInTheDocument();
+  });
+
+  it('renders Broker', () => {
+    renderComponent(clusterBrokerPath(clusterName, brokerId));
+    expect(screen.getByText(broker)).toBeInTheDocument();
+  });
+});

kafka-ui-react-app/src/components/Brokers/utils/translateLogdir.ts

@@ -0,0 +1,17 @@
+import { BrokersLogdirs } from 'generated-sources';
+import { BrokerLogdirState } from 'components/Brokers/Broker/Broker';
+
+export const translateLogdir = (data: BrokersLogdirs): BrokerLogdirState => {
+  const partitionsCount =
+    data.topics?.reduce(
+      (prevValue, value) => prevValue + (value.partitions?.length || 0),
+      0
+    ) || 0;
+
+  return {
+    name: data.name || '-',
+    error: data.error || '-',
+    topics: data.topics?.length || 0,
+    partitions: partitionsCount,
+  };
+};

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

@@ -1,4 +1,5 @@
 import {
+  BrokerId,
   ClusterName,
   ConnectName,
   ConnectorName,
@@ -19,6 +20,7 @@ export enum RouteParams {
   topicName = ':topicName',
   connectName = ':connectName',
   connectorName = ':connectorName',
+  brokerId = ':brokerId',
 }
 
 export const getNonExactPath = (path: string) => `${path}/*`;
@@ -35,6 +37,13 @@ export const clusterBrokersPath = (
   clusterName: ClusterName = RouteParams.clusterName
 ) => `${clusterPath(clusterName)}/${clusterBrokerRelativePath}`;
 
+export const clusterBrokerPath = (
+  clusterName: ClusterName = RouteParams.clusterName,
+  brokerId: BrokerId | string = RouteParams.brokerId
+) => `${clusterBrokersPath(clusterName)}/${brokerId}`;
+
+export type ClusterBrokerParam = { clusterName: ClusterName; brokerId: string };
+
 // Consumer Groups
 export const clusterConsumerGroupsRelativePath = 'consumer-groups';
 export const clusterConsumerGroupResetRelativePath = 'reset-offsets';

kafka-ui-react-app/src/redux/reducers/brokers/__test__/fixtures.ts

@@ -1,3 +1,5 @@
+import { BrokersLogdirs } from 'generated-sources';
+
 export const brokersPayload = [
   { id: 1, host: 'b-1.test.kafka.amazonaws.com' },
   { id: 2, host: 'b-2.test.kafka.amazonaws.com' },
@@ -49,3 +51,32 @@ export const updatedBrokersReducerState = {
   ],
   version: '2.2.1',
 };
+
+const partitions = {
+  broker: 2,
+  offsetLag: 0,
+  partition: 2,
+  size: 0,
+};
+const topics = {
+  name: '_confluent-ksql-devquery_CTAS_NUMBER_OF_TESTS_59-Aggregate-Aggregate-Materialize-changelog',
+  partitions: [partitions],
+};
+
+export const clusterStatsPayloadBroker: BrokersLogdirs[] = [
+  {
+    error: 'NONE',
+    name: '/opt/kafka/data-0/logs',
+    topics: [
+      {
+        ...topics,
+        partitions: [partitions, partitions, partitions],
+      },
+      topics,
+      {
+        ...topics,
+        partitions: [],
+      },
+    ],
+  },
+];