feat(Partitions): display partitions for topic without consumers

Author: artemmufazalov

src/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>;

src/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 {setSelectedConsumer} from '../../../../store/reducers/consumer';
+import {
+    cleanTopicData,
+    getTopic,
+    selectConsumersNames,
+    setDataWasNotLoaded as setTopicDataWasNotLoaded,
+} from '../../../../store/reducers/topic';
 import {
-    getConsumer,
-    selectPreparedPartitionsData,
-    setDataWasNotLoaded,
-    setSelectedConsumer,
-} from '../../../../store/reducers/consumer';
+    getPartitions,
+    setDataWasNotLoaded as setPartitionsDataWasNotLoaded,
+} 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 {selectedConsumer} = useTypedSelector((state) => state.consumer);
+    const {
+        loading: partitionsLoading,
+        wasLoaded: partitionsWasLoaded,
+        error: partitionsError,
+        partitions: rawPartitions,
+    } = 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>
     );