ydb-embedded-ui 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [4.3.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.2.1...v4.3.0) (2023-05-18)
+
+
+### Features
+
+* **Partitions:** display partitions for topic without consumers ([0843a49](https://github.com/ydb-platform/ydb-embedded-ui/commit/0843a49c46cb6765b376832a847c3ac0ce8b6b85))
+
+
+### Bug Fixes
+
+* **Tablet:** update state to color mapping ([7ccc8c7](https://github.com/ydb-platform/ydb-embedded-ui/commit/7ccc8c79225cd311a7a3674150335b58a94f293e))
+
+## [4.2.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.2.0...v4.2.1) (2023-05-18)
+
+
+### Bug Fixes
+
+* export toaster ([b5d12c0](https://github.com/ydb-platform/ydb-embedded-ui/commit/b5d12c0aa39ea3877a9b74071e3124f89a309ca3))
+
 ## [4.2.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.1.0...v4.2.0) (2023-05-16)
 
 

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -27,7 +27,7 @@ import {Nodes} from '../../Nodes';
 //@ts-ignore
 import {Tablets} from '../../Tablets';
 import {Consumers} from './Consumers';
-import {PartitionsWrapper} from './Partitions';
+import {Partitions} from './Partitions/Partitions';
 
 import routes, {createHref} from '../../../routes';
 import type {EPathType} from '../../../types/api/schema';
@@ -159,7 +159,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Consumers path={currentSchemaPath} type={type} />;
             }
             case GeneralPagesIds.partitions: {
-                return <PartitionsWrapper path={currentSchemaPath} type={type} />;
+                return <Partitions path={currentSchemaPath} />;
             }
             default: {
                 return <div>No data...</div>;

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.tsx

@@ -1,39 +1,32 @@
 import block from 'bem-cn-lite';
 import {useCallback, useEffect, useMemo, useState} from 'react';
 import {useDispatch} from 'react-redux';
-import {escapeRegExp} from 'lodash/fp';
 
 import DataTable from '@gravity-ui/react-data-table';
-import {Select, TableColumnSetup} from '@gravity-ui/uikit';
-import {TableColumnSetupItem} from '@gravity-ui/uikit/build/esm/components/Table/hoc/withTableSettings/withTableSettings';
 
-import type {EPathType} from '../../../../types/api/schema';
+import {useAutofetcher, useTypedSelector, useSetting} from '../../../../utils/hooks';
+import {DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY} from '../../../../utils/constants';
 
-import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
-import {DEFAULT_TABLE_SETTINGS, PARTITIONS_SELECTED_COLUMNS_KEY} from '../../../../utils/constants';
-
-import {getSettingValue, setSettingValue} from '../../../../store/reducers/settings';
+import {getNodesList, selectNodesMap} from '../../../../store/reducers/nodesList';
+import {
+    cleanTopicData,
+    getTopic,
+    selectConsumersNames,
+    setDataWasNotLoaded as setTopicDataWasNotLoaded,
+} from '../../../../store/reducers/topic';
 import {
-    getConsumer,
-    selectPreparedPartitionsData,
-    setDataWasNotLoaded,
+    getPartitions,
+    setDataWasNotLoaded as setPartitionsDataWasNotLoaded,
     setSelectedConsumer,
-} from '../../../../store/reducers/consumer';
+} from '../../../../store/reducers/partitions/partitions';
 
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
-import {Search} from '../../../../components/Search';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 
-import {isCdcStreamEntityType} from '../../utils/schema';
-
-import type {IPreparedPartitionDataWithHosts} from './utils/types';
-import {
-    PARTITIONS_COLUMNS_IDS,
-    PARTITIONS_COLUMNS_TITILES,
-    PARTITIONS_DEFAULT_SELECTED_COLUMNS,
-} from './utils/constants';
-
-import {columns as partitionsColumns} from './columns';
+import type {PreparedPartitionDataWithHosts} from './utils/types';
+import {addHostToPartitions} from './utils';
+import {PartitionsControls} from './PartitionsControls/PartitionsControls';
+import {useGetPartitionsColumns} from './utils/useGetPartitionsColumns';
 
 import i18n from './i18n';
 
@@ -43,215 +36,140 @@ export const b = block('ydb-diagnostics-partitions');
 
 interface PartitionsProps {
     path?: string;
-    type?: EPathType;
-    nodes?: Record<number, string>;
-    consumers?: string[];
 }
 
-export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
-    const isCdcStream = isCdcStreamEntityType(type);
-
+export const Partitions = ({path}: PartitionsProps) => {
     const dispatch = useDispatch();
 
-    const [generalSearchValue, setGeneralSearchValue] = useState('');
-    const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
-
+    // Manual path control to ensure that topic state will be reset before data fetch
+    // so no request with wrong params will be sent
     const [componentCurrentPath, setComponentCurrentPath] = useState(path);
 
-    const {autorefresh} = useTypedSelector((state) => state.schema);
-    const {loading, wasLoaded, error, selectedConsumer} = useTypedSelector(
-        (state) => state.consumer,
+    const [partitionsToRender, setPartitionsToRender] = useState<PreparedPartitionDataWithHosts[]>(
+        [],
     );
 
-    const partitions = useTypedSelector((state) => selectPreparedPartitionsData(state));
-
-    const savedSelectedColumns: string = useTypedSelector((state) =>
-        getSettingValue(state, PARTITIONS_SELECTED_COLUMNS_KEY),
+    const consumers = useTypedSelector(selectConsumersNames);
+    const nodesMap = useTypedSelector(selectNodesMap);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const {
+        loading: partitionsLoading,
+        wasLoaded: partitionsWasLoaded,
+        error: partitionsError,
+        partitions: rawPartitions,
+        selectedConsumer,
+    } = useTypedSelector((state) => state.partitions);
+    const {
+        loading: topicLoading,
+        wasLoaded: topicWasLoaded,
+        error: topicError,
+    } = useTypedSelector((state) => state.topic);
+    const {
+        loading: nodesLoading,
+        wasLoaded: nodesWasLoaded,
+        error: nodesError,
+    } = useTypedSelector((state) => state.nodesList);
+
+    const [hiddenColumns, setHiddenColumns] = useSetting<string[]>(
+        PARTITIONS_HIDDEN_COLUMNS_KEY,
+        [],
     );
 
+    const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer);
+
     useEffect(() => {
-        // Manual path control to ensure it updates with other values so no request with wrong params will be sent
+        dispatch(cleanTopicData());
+        dispatch(setTopicDataWasNotLoaded());
+
+        dispatch(getNodesList());
+        dispatch(getTopic(path));
+
         setComponentCurrentPath(path);
     }, [dispatch, path]);
 
-    const fetchConsumerData = useCallback(
+    const partitionsWithHosts = useMemo(() => {
+        return addHostToPartitions(rawPartitions, nodesMap);
+    }, [rawPartitions, nodesMap]);
+
+    const fetchData = useCallback(
         (isBackground: boolean) => {
             if (!isBackground) {
-                dispatch(setDataWasNotLoaded());
+                dispatch(setPartitionsDataWasNotLoaded());
             }
-
-            if (selectedConsumer && consumers && consumers.includes(selectedConsumer)) {
-                dispatch(getConsumer(componentCurrentPath, selectedConsumer));
+            if (topicWasLoaded && componentCurrentPath) {
+                dispatch(getPartitions(componentCurrentPath, selectedConsumer));
             }
         },
-        [dispatch, selectedConsumer, componentCurrentPath, consumers],
+        [dispatch, selectedConsumer, componentCurrentPath, topicWasLoaded],
     );
 
-    useAutofetcher(fetchConsumerData, [fetchConsumerData], autorefresh);
-
-    const consumersToSelect = useMemo(
-        () =>
-            consumers
-                ? consumers.map((consumer) => ({
-                      value: consumer,
-                      content: consumer,
-                  }))
-                : undefined,
-        [consumers],
-    );
+    useAutofetcher(fetchData, [fetchData], autorefresh);
 
+    // Wrong consumer could be passed in search query
+    // Reset consumer if it doesn't exist for current topic
     useEffect(() => {
-        const shouldUpdateSelectedConsumer =
-            !selectedConsumer || (consumers && !consumers.includes(selectedConsumer));
+        const isTopicWithoutConsumers = topicWasLoaded && !consumers;
+        const wrongSelectedConsumer =
+            selectedConsumer && consumers && !consumers.includes(selectedConsumer);
 
-        if (consumersToSelect && consumersToSelect.length && shouldUpdateSelectedConsumer) {
-            dispatch(setSelectedConsumer(consumersToSelect[0].value));
+        if (isTopicWithoutConsumers || wrongSelectedConsumer) {
+            dispatch(setSelectedConsumer());
         }
-    }, [dispatch, consumersToSelect, selectedConsumer, consumers]);
-
-    const selectedColumns: string[] = useMemo(
-        () =>
-            savedSelectedColumns
-                ? JSON.parse(savedSelectedColumns)
-                : PARTITIONS_DEFAULT_SELECTED_COLUMNS,
-        [savedSelectedColumns],
-    );
-
-    const columnsToSelect = useMemo(() => {
-        return Object.values(PARTITIONS_COLUMNS_IDS).map((id) => {
-            return {
-                title: PARTITIONS_COLUMNS_TITILES[id],
-                selected: Boolean(selectedColumns?.includes(id)),
-                id: id,
-                required: id === PARTITIONS_COLUMNS_IDS.PARTITION_ID,
-            };
-        });
-    }, [selectedColumns]);
+    }, [dispatch, topicWasLoaded, selectedConsumer, consumers]);
 
     const columnsToShow = useMemo(() => {
-        return partitionsColumns.filter((column) => selectedColumns?.includes(column.name));
-    }, [selectedColumns]);
-
-    const partitionsWithHosts: IPreparedPartitionDataWithHosts[] | undefined = useMemo(() => {
-        return partitions?.map((partition) => {
-            const partitionHost =
-                partition.partitionNodeId && nodes ? nodes[partition.partitionNodeId] : undefined;
-
-            const connectionHost =
-                partition.connectionNodeId && nodes ? nodes[partition.connectionNodeId] : undefined;
-
-            return {
-                ...partition,
-                partitionHost,
-                connectionHost,
-            };
-        });
-    }, [partitions, nodes]);
-
-    const dataToRender = useMemo(() => {
-        if (!partitionsWithHosts) {
-            return [];
-        }
-
-        const partitionIdRe = new RegExp(escapeRegExp(partitionIdSearchValue), 'i');
-        const generalRe = new RegExp(escapeRegExp(generalSearchValue), 'i');
-
-        return partitionsWithHosts.filter((partition) => {
-            const {
-                partitionId,
-                readerName = '',
-                readSessionId = '',
-                partitionNodeId,
-                connectionNodeId,
-                partitionHost = '',
-                connectionHost = '',
-            } = partition;
+        return columns.filter((column) => !hiddenColumns.includes(column.name));
+    }, [columns, hiddenColumns]);
 
-            const isPartitionIdMatch = partitionIdRe.test(partitionId);
-            const isOtherValuesMatch =
-                generalRe.test(readerName) ||
-                generalRe.test(readSessionId) ||
-                generalRe.test(String(partitionNodeId)) ||
-                generalRe.test(String(connectionNodeId)) ||
-                generalRe.test(partitionHost) ||
-                generalRe.test(connectionHost);
-
-            return isPartitionIdMatch && isOtherValuesMatch;
-        });
-    }, [partitionIdSearchValue, generalSearchValue, partitionsWithHosts]);
-
-    const hadleTableColumnsSetupChange = (value: TableColumnSetupItem[]) => {
-        const columns = value.filter((el) => el.selected).map((el) => el.id);
-        dispatch(setSettingValue(PARTITIONS_SELECTED_COLUMNS_KEY, JSON.stringify(columns)));
+    const hadleTableColumnsSetupChange = (newHiddenColumns: string[]) => {
+        setHiddenColumns(newHiddenColumns);
     };
 
-    const handleConsumerSelectChange = (value: string[]) => {
-        dispatch(setSelectedConsumer(value[0]));
+    const handleSelectedConsumerChange = (value?: string) => {
+        dispatch(setSelectedConsumer(value));
     };
 
-    const handlePartitionIdSearchChange = (value: string) => {
-        setPartitionIdSearchValue(value);
-    };
+    const loading =
+        (topicLoading && !topicWasLoaded) ||
+        (nodesLoading && !nodesWasLoaded) ||
+        (partitionsLoading && !partitionsWasLoaded);
 
-    const handleGeneralSearchChange = (value: string) => {
-        setGeneralSearchValue(value);
-    };
+    const error = nodesError || topicError || partitionsError;
 
-    if (error) {
-        return <ResponseError error={error} />;
-    }
+    const getContent = () => {
+        if (loading) {
+            return <TableSkeleton className={b('loader')} />;
+        }
+        if (error) {
+            return <ResponseError error={error} />;
+        }
 
-    if (!consumersToSelect || !consumersToSelect.length) {
-        return <div>{i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`)}</div>;
-    }
+        return (
+            <DataTable
+                theme="yandex-cloud"
+                data={partitionsToRender}
+                columns={columnsToShow}
+                settings={DEFAULT_TABLE_SETTINGS}
+                emptyDataMessage={i18n('table.emptyDataMessage')}
+            />
+        );
+    };
 
     return (
         <div className={b()}>
-            <div className={b('controls')}>
-                <Select
-                    className={b('consumer-select')}
-                    placeholder={i18n('controls.consumerSelector.placeholder')}
-                    label={i18n('controls.consumerSelector')}
-                    options={consumersToSelect}
-                    value={[selectedConsumer || '']}
-                    onUpdate={handleConsumerSelectChange}
-                    filterable={consumers && consumers.length > 5}
-                />
-                <Search
-                    onChange={handlePartitionIdSearchChange}
-                    placeholder={i18n('controls.partitionSearch')}
-                    className={b('search', {partition: true})}
-                    value={partitionIdSearchValue}
-                />
-                <Search
-                    onChange={handleGeneralSearchChange}
-                    placeholder={i18n('controls.generalSearch')}
-                    className={b('search', {general: true})}
-                    value={generalSearchValue}
-                />
-                <TableColumnSetup
-                    key="TableColumnSetup"
-                    popupWidth="242px"
-                    items={columnsToSelect}
-                    showStatus
-                    onUpdate={hadleTableColumnsSetupChange}
-                    className={b('table-settings')}
-                />
-            </div>
+            <PartitionsControls
+                consumers={consumers}
+                selectedConsumer={selectedConsumer}
+                onSelectedConsumerChange={handleSelectedConsumerChange}
+                selectDisabled={Boolean(error) || loading}
+                partitions={partitionsWithHosts}
+                onSearchChange={setPartitionsToRender}
+                hiddenColumns={hiddenColumns}
+                onHiddenColumnsChange={hadleTableColumnsSetupChange}
+                initialColumnsIds={columnsIdsForSelector}
+            />
             <div className={b('table-wrapper')}>
-                <div className={b('table-content')}>
-                    {loading && !wasLoaded ? (
-                        <TableSkeleton className={b('loader')} />
-                    ) : (
-                        <DataTable
-                            theme="yandex-cloud"
-                            data={dataToRender}
-                            columns={columnsToShow}
-                            settings={DEFAULT_TABLE_SETTINGS}
-                            emptyDataMessage={i18n('table.emptyDataMessage')}
-                        />
-                    )}
-                </div>
+                <div className={b('table-content')}>{getContent()}</div>
             </div>
         </div>
     );

package/dist/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.tsx

@@ -0,0 +1,182 @@
+import {useEffect, useMemo, useState} from 'react';
+import {escapeRegExp} from 'lodash/fp';
+
+import {TableColumnSetupItem} from '@gravity-ui/uikit/build/esm/components/Table/hoc/withTableSettings/withTableSettings';
+import {Select, TableColumnSetup} from '@gravity-ui/uikit';
+
+import type {ValueOf} from '../../../../../types/common';
+
+import {Search} from '../../../../../components/Search/Search';
+
+import type {PreparedPartitionDataWithHosts} from '../utils/types';
+import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES} from '../utils/constants';
+import i18n from '../i18n';
+import {b} from '../Partitions';
+
+interface PartitionsControlsProps {
+    consumers: string[] | undefined;
+    selectedConsumer: string | undefined;
+    onSelectedConsumerChange: (consumer: string | undefined) => void;
+    selectDisabled: boolean;
+    partitions: PreparedPartitionDataWithHosts[] | undefined;
+    onSearchChange: (filteredPartitions: PreparedPartitionDataWithHosts[]) => void;
+    hiddenColumns: string[];
+    onHiddenColumnsChange: (newHiddenColumns: string[]) => void;
+    initialColumnsIds: string[];
+}
+
+export const PartitionsControls = ({
+    consumers,
+    selectedConsumer,
+    onSelectedConsumerChange,
+    selectDisabled,
+    partitions,
+    onSearchChange,
+    hiddenColumns,
+    onHiddenColumnsChange,
+    initialColumnsIds,
+}: PartitionsControlsProps) => {
+    const [generalSearchValue, setGeneralSearchValue] = useState('');
+    const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
+
+    // Manual select control to enforce single-select behaviour for multiple select type
+    const [consumerSelectOpen, setConsumerSelectOpen] = useState(false);
+
+    useEffect(() => {
+        if (!partitions) {
+            return;
+        }
+
+        const partitionIdRe = new RegExp(escapeRegExp(partitionIdSearchValue), 'i');
+        const generalRe = new RegExp(escapeRegExp(generalSearchValue), 'i');
+
+        const filteredPartitions = partitions.filter((partition) => {
+            const {
+                partitionId,
+                readerName,
+                readSessionId,
+                partitionNodeId,
+                connectionNodeId,
+                partitionHost,
+                connectionHost,
+            } = partition;
+
+            const isPartitionIdMatch = partitionIdRe.test(partitionId);
+
+            const otherValues = [
+                readerName,
+                readSessionId,
+                partitionNodeId,
+                connectionNodeId,
+                partitionHost,
+                connectionHost,
+            ]
+                .filter(Boolean)
+                .map(String);
+
+            const isOtherValuesMatch =
+                otherValues.length === 0 || otherValues.some((value) => generalRe.test(value));
+
+            return isPartitionIdMatch && isOtherValuesMatch;
+        });
+
+        onSearchChange(filteredPartitions);
+    }, [partitionIdSearchValue, generalSearchValue, partitions, onSearchChange]);
+
+    const consumersToSelect = useMemo(
+        () =>
+            consumers
+                ? consumers.map((consumer) => ({
+                      value: consumer,
+                      content: consumer,
+                  }))
+                : undefined,
+        [consumers],
+    );
+
+    const columnsToSelect = useMemo(() => {
+        return initialColumnsIds.map((id) => {
+            return {
+                title: PARTITIONS_COLUMNS_TITILES[id as ValueOf<typeof PARTITIONS_COLUMNS_IDS>],
+                selected: Boolean(!hiddenColumns.includes(id)),
+                id: id,
+                required: id === PARTITIONS_COLUMNS_IDS.PARTITION_ID,
+            };
+        });
+    }, [initialColumnsIds, hiddenColumns]);
+
+    const handleConsumerSelectChange = (value: string[]) => {
+        // As we have selector with multiple options, the first value corresponds to previous value
+        // The second value is currently chosen consumer
+        onSelectedConsumerChange(value[1]);
+        setConsumerSelectOpen(false);
+    };
+
+    const handlePartitionIdSearchChange = (value: string) => {
+        setPartitionIdSearchValue(value);
+    };
+
+    const handleGeneralSearchChange = (value: string) => {
+        setGeneralSearchValue(value);
+    };
+
+    const hadleTableColumnsSetupChange = (value: TableColumnSetupItem[]) => {
+        const result = [...hiddenColumns];
+
+        // Process current set of columns
+        // This way we do not remove from hidden these columns, that are not displayed currently
+        // The reasons: set of columns differs for partitions with and without consumers
+        value.forEach((el) => {
+            if (!el.selected && !hiddenColumns.includes(el.id)) {
+                result.push(el.id);
+            } else if (el.selected && hiddenColumns.includes(el.id)) {
+                result.splice(hiddenColumns.indexOf(el.id));
+            }
+        });
+
+        onHiddenColumnsChange(result);
+    };
+
+    return (
+        <div className={b('controls')}>
+            <Select
+                className={b('consumer-select')}
+                placeholder={i18n('controls.consumerSelector.placeholder')}
+                label={i18n('controls.consumerSelector')}
+                options={consumersToSelect}
+                value={[selectedConsumer || '']}
+                onUpdate={handleConsumerSelectChange}
+                filterable={consumers && consumers.length > 5}
+                disabled={selectDisabled || !consumers || !consumers.length}
+                open={consumerSelectOpen}
+                onOpenChange={setConsumerSelectOpen}
+                // Although only one value could be selected
+                // Multiple type Select is used
+                // The reason - we need Select to be able to work with no value
+                // And it is easier to make multiple Select close on value change
+                // Than to enable single select to work with empty values
+                multiple
+            />
+            <Search
+                onChange={handlePartitionIdSearchChange}
+                placeholder={i18n('controls.partitionSearch')}
+                className={b('search', {partition: true})}
+                value={partitionIdSearchValue}
+            />
+            <Search
+                onChange={handleGeneralSearchChange}
+                placeholder={i18n('controls.generalSearch')}
+                className={b('search', {general: true})}
+                value={generalSearchValue}
+            />
+            <TableColumnSetup
+                key="TableColumnSetup"
+                popupWidth="242px"
+                items={columnsToSelect}
+                showStatus
+                onUpdate={hadleTableColumnsSetupChange}
+                className={b('table-settings')}
+            />
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Partitions/columns/Columns.scss

@@ -6,7 +6,7 @@
     &__string-with-copy {
         overflow: hidden;
 
-        max-width: 150px;
+        width: 150px;
 
         text-overflow: ellipsis;
     }

package/dist/containers/Tenant/Diagnostics/Partitions/columns/columns.tsx

@@ -14,8 +14,9 @@ import {
     PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES,
     PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS,
     PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES,
+    generalPartitionColumnsIds,
 } from '../utils/constants';
-import type {IPreparedPartitionDataWithHosts} from '../utils/types';
+import type {PreparedPartitionDataWithHosts} from '../utils/types';
 
 import {
     MultilineHeader,
@@ -30,7 +31,7 @@ import './Columns.scss';
 
 const b = block('ydb-diagnostics-partitions-columns');
 
-export const columns: Column<IPreparedPartitionDataWithHosts>[] = [
+export const allColumns: Column<PreparedPartitionDataWithHosts>[] = [
     {
         name: PARTITIONS_COLUMNS_IDS.PARTITION_ID,
         header: (
@@ -63,7 +64,7 @@ export const columns: Column<IPreparedPartitionDataWithHosts>[] = [
         name: PARTITIONS_COLUMNS_IDS.READ_SPEED,
         header: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_SPEED],
         align: DataTable.LEFT,
-        sortAccessor: (row) => row.readSpeed.perMinute,
+        sortAccessor: (row) => row.readSpeed?.perMinute,
         render: ({row}) => <SpeedMultiMeter data={row.readSpeed} />,
     },
     {
@@ -210,10 +211,10 @@ export const columns: Column<IPreparedPartitionDataWithHosts>[] = [
         ),
         align: DataTable.LEFT,
         render: ({row}) =>
-            row.partitionHost ? (
+            row.partitionNodeId && row.partitionHost ? (
                 <EntityStatus
                     name={row.partitionHost}
-                    path={getDefaultNodePath(row.partitionHost)}
+                    path={getDefaultNodePath(row.partitionNodeId)}
                     showStatus={false}
                     hasClipboardButton
                     className={b('string-with-copy')}
@@ -231,7 +232,7 @@ export const columns: Column<IPreparedPartitionDataWithHosts>[] = [
         ),
         align: DataTable.LEFT,
         render: ({row}) =>
-            row.connectionHost ? (
+            row.connectionNodeId && row.connectionHost ? (
                 <EntityStatus
                     name={row.connectionHost}
                     path={getDefaultNodePath(row.connectionNodeId)}
@@ -244,3 +245,11 @@ export const columns: Column<IPreparedPartitionDataWithHosts>[] = [
             ),
     },
 ];
+
+// Topics without consumers have partitions data with no data corresponding to consumers
+// These columns will be empty and should not be displayed
+export const generalColumns = allColumns.filter((column) => {
+    return generalPartitionColumnsIds.includes(
+        column.name as typeof generalPartitionColumnsIds[number],
+    );
+});