ydb-embedded-ui 4.2.1 → 4.3.0

package/dist/containers/Tenant/Diagnostics/Partitions/utils/index.ts

@@ -0,0 +1,26 @@
+import type {PreparedPartitionData} from '../../../../../store/reducers/partitions/types';
+import type {NodesMap} from '../../../../../types/store/nodesList';
+import type {PreparedPartitionDataWithHosts} from './types';
+
+export const addHostToPartitions = (
+    partitions: PreparedPartitionData[] = [],
+    nodesMap?: NodesMap,
+): PreparedPartitionDataWithHosts[] => {
+    return partitions?.map((partition) => {
+        const partitionHost =
+            partition.partitionNodeId && nodesMap
+                ? nodesMap.get(partition.partitionNodeId)
+                : undefined;
+
+        const connectionHost =
+            partition.connectionNodeId && nodesMap
+                ? nodesMap.get(partition.connectionNodeId)
+                : undefined;
+
+        return {
+            ...partition,
+            partitionHost,
+            connectionHost,
+        };
+    });
+};

package/dist/containers/Tenant/Diagnostics/Partitions/utils/types.ts

@@ -1,6 +1,6 @@
-import type {IPreparedPartitionData} from '../../../../../types/store/consumer';
+import type {PreparedPartitionData} from '../../../../../store/reducers/partitions/types';
 
-export interface IPreparedPartitionDataWithHosts extends IPreparedPartitionData {
+export interface PreparedPartitionDataWithHosts extends PreparedPartitionData {
     partitionHost: string | undefined;
     connectionHost: string | undefined;
 }

package/dist/containers/Tenant/Diagnostics/Partitions/utils/useGetPartitionsColumns.ts

@@ -0,0 +1,27 @@
+import {useEffect, useState} from 'react';
+
+import type {Column} from '@gravity-ui/react-data-table';
+
+import type {PreparedPartitionDataWithHosts} from './types';
+import {allColumns, generalColumns} from '../columns';
+import {allPartitionsColumnsIds, generalPartitionColumnsIds} from './constants';
+
+// Columns are different for partitions with consumers and without
+export const useGetPartitionsColumns = (
+    selectedConsumer: string | undefined,
+): [Column<PreparedPartitionDataWithHosts>[], string[]] => {
+    const [columns, setColumns] = useState<Column<PreparedPartitionDataWithHosts>[]>([]);
+    const [columnsIdsForSelector, setColumnsIdsForSelector] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (selectedConsumer) {
+            setColumns(allColumns);
+            setColumnsIdsForSelector(allPartitionsColumnsIds);
+        } else {
+            setColumns(generalColumns);
+            setColumnsIdsForSelector(generalPartitionColumnsIds);
+        }
+    }, [selectedConsumer]);
+
+    return [columns, columnsIdsForSelector];
+};

package/dist/services/api.ts

@@ -216,7 +216,7 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
         );
     }
     getConsumer(
-        {path, consumer}: {path?: string; consumer?: string},
+        {path, consumer}: {path: string; consumer: string},
         {concurrentId}: AxiosOptions = {},
     ) {
         return this.get<DescribeConsumerResult>(

package/dist/store/reducers/index.ts

@@ -18,7 +18,7 @@ import pool from './pool';
 import tenants from './tenants/tenants';
 import tablet from './tablet';
 import topic from './topic';
-import consumer from './consumer';
+import partitions from './partitions/partitions';
 import executeQuery from './executeQuery';
 import explainQuery from './explainQuery';
 import tabletsFilters from './tabletsFilters';
@@ -58,7 +58,7 @@ export const rootReducer = {
     tenants,
     tablet,
     topic,
-    consumer,
+    partitions,
     executeQuery,
     explainQuery,
     tabletsFilters,

package/dist/store/reducers/partitions/partitions.ts

@@ -0,0 +1,104 @@
+import type {Reducer} from 'redux';
+
+import '../../../services/api';
+
+import {createRequestActionTypes, createApiRequest} from '../../utils';
+
+import type {PartitionsAction, PartitionsState} from './types';
+import {prepareConsumerPartitions, prepareTopicPartitions} from './utils';
+
+export const FETCH_PARTITIONS = createRequestActionTypes('partitions', 'FETCH_PARTITIONS');
+
+const SET_SELECTED_CONSUMER = 'partitions/SET_SELECTED_CONSUMER';
+const SET_DATA_WAS_NOT_LOADED = 'partitions/SET_DATA_WAS_NOT_LOADED';
+
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+    selectedConsumer: undefined,
+};
+
+const partitions: Reducer<PartitionsState, PartitionsAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_PARTITIONS.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_PARTITIONS.SUCCESS: {
+            return {
+                ...state,
+                partitions: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_PARTITIONS.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        case SET_SELECTED_CONSUMER: {
+            return {
+                ...state,
+                selectedConsumer: action.data,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export const setSelectedConsumer = (value?: string) => {
+    return {
+        type: SET_SELECTED_CONSUMER,
+        data: value,
+    } as const;
+};
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
+export function getPartitions(path: string, consumerName?: string) {
+    if (consumerName) {
+        return createApiRequest({
+            request: window.api.getConsumer(
+                {path, consumer: consumerName},
+                {concurrentId: 'getPartitions'},
+            ),
+            actions: FETCH_PARTITIONS,
+            dataHandler: (data) => {
+                const rawPartitions = data.partitions;
+                return prepareConsumerPartitions(rawPartitions);
+            },
+        });
+    }
+
+    return createApiRequest({
+        request: window.api.getTopic({path}, {concurrentId: 'getPartitions'}),
+        actions: FETCH_PARTITIONS,
+        dataHandler: (data) => {
+            const rawPartitions = data.partitions;
+            return prepareTopicPartitions(rawPartitions);
+        },
+    });
+}
+
+export default partitions;

package/dist/store/reducers/partitions/types.ts

@@ -0,0 +1,47 @@
+import type {IResponseError} from '../../../types/api/error';
+import type {IProcessSpeedStats} from '../../../utils/bytesParsers';
+import type {ApiRequestAction} from '../../utils';
+
+import {FETCH_PARTITIONS, setDataWasNotLoaded, setSelectedConsumer} from './partitions';
+
+// Fields that could be undefined corresponds to partitions without consumers
+export interface PreparedPartitionData {
+    partitionId: string;
+    storeSize: string;
+
+    writeSpeed: IProcessSpeedStats;
+    readSpeed?: IProcessSpeedStats;
+
+    partitionWriteLag: number;
+    partitionWriteIdleTime: number;
+
+    consumerWriteLag?: number;
+    consumerReadLag?: number;
+    consumerReadIdleTime?: number;
+
+    uncommitedMessages?: number;
+    unreadMessages?: number;
+
+    startOffset: string;
+    endOffset: string;
+    commitedOffset?: string;
+
+    readSessionId?: string;
+    readerName?: string;
+
+    partitionNodeId: number;
+    connectionNodeId?: number;
+}
+
+export interface PartitionsState {
+    loading: boolean;
+    wasLoaded: boolean;
+    selectedConsumer: string | undefined;
+    partitions?: PreparedPartitionData[];
+    error?: IResponseError;
+}
+
+export type PartitionsAction =
+    | ApiRequestAction<typeof FETCH_PARTITIONS, PreparedPartitionData[], IResponseError>
+    | ReturnType<typeof setDataWasNotLoaded>
+    | ReturnType<typeof setSelectedConsumer>;

package/dist/store/reducers/partitions/utils.ts

@@ -0,0 +1,99 @@
+/* eslint-disable camelcase */
+import type {
+    PartitionInfo as ConsumerPartitionInfo,
+    PartitionStats,
+} from '../../../types/api/consumer';
+import type {PartitionInfo as TopicPartitionInfo} from '../../../types/api/topic';
+
+import {convertBytesObjectToSpeed} from '../../../utils/bytesParsers';
+import {parseLag, parseTimestampToIdleTime} from '../../../utils/timeParsers';
+import {isNumeric} from '../../../utils/utils';
+import {PreparedPartitionData} from './types';
+
+const prepareGeneralPartitionStats = (partitionStats: PartitionStats | undefined) => {
+    const {
+        partition_offsets,
+        store_size_bytes = '0',
+        last_write_time: partition_last_write_time,
+        max_write_time_lag: partition_write_lag,
+        bytes_written,
+        partition_node_id = 0,
+    } = partitionStats || {};
+
+    const {start: start_offset = '0', end: end_offset = '0'} = partition_offsets || {};
+
+    return {
+        storeSize: store_size_bytes,
+        writeSpeed: convertBytesObjectToSpeed(bytes_written),
+        partitionWriteLag: parseLag(partition_write_lag),
+        partitionWriteIdleTime: parseTimestampToIdleTime(partition_last_write_time),
+        startOffset: start_offset,
+        endOffset: end_offset,
+        partitionNodeId: partition_node_id,
+    };
+};
+
+export const prepareTopicPartitions = (
+    partitions?: TopicPartitionInfo[],
+): PreparedPartitionData[] | undefined => {
+    return partitions?.map((partition) => {
+        // describe_topic endpoint doesn't return zero values, so some values will be initialized with 0
+        const {partition_id = '0', partition_stats} = partition;
+
+        const preparedPartitionStats = prepareGeneralPartitionStats(partition_stats);
+
+        return {
+            partitionId: partition_id,
+            ...preparedPartitionStats,
+        };
+    });
+};
+
+export const prepareConsumerPartitions = (
+    partitions?: ConsumerPartitionInfo[],
+): PreparedPartitionData[] | undefined => {
+    return partitions?.map((partition) => {
+        // describe_consumer endpoint doesn't return zero values, so some values will be initialized with 0
+        const {partition_id = '0', partition_stats, partition_consumer_stats} = partition;
+
+        const preparedPartitionStats = prepareGeneralPartitionStats(partition_stats);
+        const endOffset = preparedPartitionStats;
+
+        const {
+            last_read_offset = '0',
+            committed_offset = '0',
+            read_session_id,
+            last_read_time: consumer_last_read_time,
+            max_read_time_lag: consumer_read_lag,
+            max_write_time_lag: consumer_write_lag,
+            bytes_read,
+            reader_name,
+            connection_node_id = 0,
+        } = partition_consumer_stats || {};
+
+        const uncommitedMessages =
+            isNumeric(endOffset) && isNumeric(committed_offset)
+                ? Number(endOffset) - Number(committed_offset)
+                : 0;
+
+        const unreadMessages =
+            isNumeric(endOffset) && isNumeric(last_read_offset)
+                ? Number(endOffset) - Number(last_read_offset)
+                : 0;
+
+        return {
+            ...preparedPartitionStats,
+            partitionId: partition_id,
+            readSpeed: convertBytesObjectToSpeed(bytes_read),
+            consumerWriteLag: parseLag(consumer_write_lag),
+            consumerReadLag: parseLag(consumer_read_lag),
+            consumerReadIdleTime: parseTimestampToIdleTime(consumer_last_read_time),
+            uncommitedMessages,
+            unreadMessages,
+            commitedOffset: committed_offset,
+            readSessionId: read_session_id,
+            readerName: reader_name,
+            connectionNodeId: connection_node_id,
+        };
+    });
+};

package/dist/store/reducers/settings.js

@@ -6,7 +6,7 @@ import {
     INVERTED_DISKS_KEY,
     ASIDE_HEADER_COMPACT_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-    PARTITIONS_SELECTED_COLUMNS_KEY,
+    PARTITIONS_HIDDEN_COLUMNS_KEY,
     QUERY_INITIAL_MODE_KEY,
     ENABLE_QUERY_MODES_FOR_EXPLAIN,
 } from '../../utils/constants';
@@ -44,7 +44,7 @@ export const initialState = {
         [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
         [QUERY_INITIAL_MODE_KEY]: readSavedSettingsValue(QUERY_INITIAL_MODE_KEY, QueryModes.script),
         [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, 'true'),
-        [PARTITIONS_SELECTED_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_SELECTED_COLUMNS_KEY),
+        [PARTITIONS_HIDDEN_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_HIDDEN_COLUMNS_KEY),
     },
     systemSettings,
 };

package/dist/store/reducers/topic.ts

@@ -98,6 +98,13 @@ export function getTopic(path?: string) {
 const selectTopicStats = (state: ITopicRootStateSlice) => state.topic.data?.topic_stats;
 const selectConsumers = (state: ITopicRootStateSlice) => state.topic.data?.consumers;
 
+export const selectConsumersNames: Selector<ITopicRootStateSlice, string[] | undefined> =
+    createSelector([selectConsumers], (consumers) => {
+        return consumers
+            ?.map((consumer) => consumer?.name)
+            .filter((consumer): consumer is string => consumer !== undefined);
+    });
+
 export const selectPreparedTopicStats: Selector<
     ITopicRootStateSlice,
     IPreparedTopicStats | undefined

package/dist/store/state-url-mapping.js

@@ -68,7 +68,7 @@ const paramSetup = {
             type: 'number',
         },
         selectedConsumer: {
-            stateKey: 'consumer.selectedConsumer',
+            stateKey: 'partitions.selectedConsumer',
         },
     },
 };

package/dist/types/api/topic.ts

@@ -74,7 +74,7 @@ export interface DescribeTopicResult {
 }
 
 /** Partition info types differs for consumer and topic, although they are very similar */
-interface PartitionInfo {
+export interface PartitionInfo {
     /** int64  */
     partition_id?: string;
 

package/dist/utils/constants.ts

@@ -121,4 +121,4 @@ export const DEFAULT_TABLE_SETTINGS = {
 export const TENANT_INITIAL_TAB_KEY = 'saved_tenant_initial_tab';
 export const QUERY_INITIAL_MODE_KEY = 'query_initial_mode';
 
-export const PARTITIONS_SELECTED_COLUMNS_KEY = 'partitionsSelectedColumns';
+export const PARTITIONS_HIDDEN_COLUMNS_KEY = 'partitionsHiddenColumns';

package/dist/utils/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useAutofetcher';
 export * from './useTypedSelector';
+export * from './useSetting';

package/dist/utils/hooks/useSetting.ts

@@ -0,0 +1,23 @@
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+
+import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings';
+
+import {useTypedSelector} from './useTypedSelector';
+
+export const useSetting = <T>(key: string, defaultValue: T): [T, (value: T) => void] => {
+    const dispatch = useDispatch();
+
+    const settingValue: T = useTypedSelector(
+        (state) => getParsedSettingValue(state, key) || defaultValue,
+    );
+
+    const setValue = useCallback(
+        (value: T) => {
+            dispatch(setSettingValue(key, JSON.stringify(value)));
+        },
+        [dispatch, key],
+    );
+
+    return [settingValue, setValue];
+};

package/dist/utils/tablet.ts

@@ -1,23 +1,24 @@
 import {EFlag} from '../types/api/enums';
 import {ETabletState} from '../types/api/tablet';
 
+// Similar to mapping in https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/viewer.cpp
 const tabletStateToColorState: Record<ETabletState, EFlag> = {
-    [ETabletState.Active]: EFlag.Green,
-    [ETabletState.Deleted]: EFlag.Green,
+    [ETabletState.Dead]: EFlag.Red,
 
-    [ETabletState.RebuildGraph]: EFlag.Orange,
+    [ETabletState.Created]: EFlag.Yellow,
+    [ETabletState.ResolveStateStorage]: EFlag.Yellow,
+    [ETabletState.Candidate]: EFlag.Yellow,
+    [ETabletState.BlockBlobStorage]: EFlag.Yellow,
+    [ETabletState.WriteZeroEntry]: EFlag.Yellow,
+    [ETabletState.Restored]: EFlag.Yellow,
+    [ETabletState.Discover]: EFlag.Yellow,
+    [ETabletState.Lock]: EFlag.Yellow,
+    [ETabletState.Stopped]: EFlag.Yellow,
     [ETabletState.ResolveLeader]: EFlag.Yellow,
+    [ETabletState.RebuildGraph]: EFlag.Yellow,
 
-    [ETabletState.Created]: EFlag.Red,
-    [ETabletState.ResolveStateStorage]: EFlag.Red,
-    [ETabletState.Candidate]: EFlag.Red,
-    [ETabletState.BlockBlobStorage]: EFlag.Red,
-    [ETabletState.WriteZeroEntry]: EFlag.Red,
-    [ETabletState.Restored]: EFlag.Red,
-    [ETabletState.Discover]: EFlag.Red,
-    [ETabletState.Lock]: EFlag.Red,
-    [ETabletState.Dead]: EFlag.Red,
-    [ETabletState.Stopped]: EFlag.Red,
+    [ETabletState.Deleted]: EFlag.Green,
+    [ETabletState.Active]: EFlag.Green,
 };
 
 export const tabletStates = Object.keys(ETabletState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "files": [
     "dist"
   ],

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

@@ -1,81 +0,0 @@
-import {useEffect, useMemo} from 'react';
-import {useDispatch} from 'react-redux';
-
-import type {EPathType} from '../../../../types/api/schema';
-
-import {useTypedSelector} from '../../../../utils/hooks';
-
-import {
-    cleanTopicData,
-    getTopic,
-    setDataWasNotLoaded as setTopicDataWasNotLoaded,
-} from '../../../../store/reducers/topic';
-import {
-    getNodes,
-    setDataWasNotLoaded as setNodesDataWasNotLoaded,
-} from '../../../../store/reducers/nodes';
-
-import {Loader} from '../../../../components/Loader';
-import {ResponseError} from '../../../../components/Errors/ResponseError';
-
-import {Partitions} from './Partitions';
-
-interface PartitionsWrapperProps {
-    path?: string;
-    type?: EPathType;
-}
-
-export const PartitionsWrapper = ({path, type}: PartitionsWrapperProps) => {
-    const dispatch = useDispatch();
-
-    const {
-        loading: topicLoading,
-        wasLoaded: topicWasLoaded,
-        error: topicError,
-        data: topicData,
-    } = useTypedSelector((state) => state.topic);
-
-    const {
-        loading: nodesLoading,
-        wasLoaded: nodesWasLoaded,
-        error: nodesError,
-        data: nodesData,
-    } = useTypedSelector((state) => state.nodes);
-
-    const consumers = useMemo(
-        () =>
-            topicData?.consumers
-                ?.map((consumer) => consumer?.name)
-                .filter((consumer): consumer is string => consumer !== undefined),
-        [topicData],
-    );
-
-    const nodes = useMemo(() => {
-        const preparedNodesObject: Record<number, string> = {};
-        nodesData?.forEach((node) => {
-            if (node.NodeId && node.Host) {
-                preparedNodesObject[node.NodeId] = node.Host;
-            }
-        });
-        return preparedNodesObject;
-    }, [nodesData]);
-
-    useEffect(() => {
-        dispatch(setTopicDataWasNotLoaded());
-        dispatch(cleanTopicData());
-        dispatch(setNodesDataWasNotLoaded());
-
-        dispatch(getTopic(path));
-        dispatch(getNodes({}));
-    }, [dispatch, path]);
-
-    if ((topicLoading && !topicWasLoaded) || (nodesLoading && !nodesWasLoaded)) {
-        return <Loader />;
-    }
-
-    if (topicError || nodesError) {
-        return <ResponseError error={topicError || nodesError} />;
-    }
-
-    return <Partitions path={path} type={type} consumers={consumers} nodes={nodes} />;
-};

package/dist/containers/Tenant/Diagnostics/Partitions/index.ts

@@ -1 +0,0 @@
-export * from './PartitionsWrapper';