ydb-embedded-ui 3.3.4 → 3.4.0

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -12,6 +12,7 @@ export enum GeneralPagesIds {
     'hotKeys' = 'hotKeys',
     'graph' = 'graph',
     'consumers' = 'consumers',
+    'partitions' = 'partitions',
 }
 
 type Page = {
@@ -72,6 +73,11 @@ const consumers = {
     title: 'Consumers',
 };
 
+const partitions = {
+    id: GeneralPagesIds.partitions,
+    title: 'Partitions',
+};
+
 export const DATABASE_PAGES = [
     overview,
     topQueries,
@@ -87,8 +93,8 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
-export const CDC_STREAM_PAGES = [overview, consumers, describe];
-export const TOPIC_PAGES = [overview, consumers, describe];
+export const CDC_STREAM_PAGES = [overview, consumers, partitions, describe];
+export const TOPIC_PAGES = [overview, consumers, partitions, describe];
 
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.scss

@@ -9,8 +9,16 @@
         margin-top: 50px;
     }
 
-    .ydb-bars {
+    .info-viewer__row {
+        align-items: flex-start;
+    }
+
+    .speed-multimeter {
         margin-top: -5px;
+
+        &__content {
+            justify-content: flex-start;
+        }
     }
 
     &__info {

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

@@ -6,12 +6,10 @@ import type {DescribeTopicResult} from '../../../../../types/api/topic';
 import {Loader} from '../../../../../components/Loader';
 import {InfoViewerItem, formatObject, InfoViewer} from '../../../../../components/InfoViewer';
 
-import {
-    prepareBytesWritten,
-    formatTopicStats,
-} from '../../../../../components/InfoViewer/formatters';
+import {formatTopicStats} from '../../../../../components/InfoViewer/formatters';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
+import {convertBytesObjectToSpeed} from '../../../../../utils/bytesParsers';
 import {formatBps} from '../../../../../utils';
 
 import i18n from './i18n';
@@ -29,20 +27,20 @@ const prepareTopicInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
 };
 
 const prepareBytesWrittenInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
-    const preparedBytes = prepareBytesWritten(data?.topic_stats?.bytes_written);
+    const preparedBytes = convertBytesObjectToSpeed(data?.topic_stats?.bytes_written);
 
     return [
         {
             label: 'per minute',
-            value: formatBps(preparedBytes.per_minute),
+            value: formatBps(preparedBytes.perMinute),
         },
         {
             label: 'per hour',
-            value: formatBps(preparedBytes.per_hour),
+            value: formatBps(preparedBytes.perHour),
         },
         {
             label: 'per day',
-            value: formatBps(preparedBytes.per_day),
+            value: formatBps(preparedBytes.perDay),
         },
     ];
 };

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/Headers.scss

@@ -0,0 +1,33 @@
+.ydb-diagnostics-partitions-columns-header {
+    &__multiline {
+        white-space: normal;
+    }
+
+    &__read-session {
+        width: 80px;
+
+        white-space: normal;
+    }
+
+    &__lags {
+        white-space: nowrap;
+    }
+
+    &__messages {
+        width: 90px;
+
+        white-space: normal;
+    }
+
+    &__lags-popover-content {
+        max-width: 300px;
+
+        div:nth-child(1) {
+            margin-bottom: 10px;
+        }
+    }
+
+    &__messages-popover-content {
+        max-width: 200px;
+    }
+}

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

@@ -0,0 +1,76 @@
+import block from 'bem-cn-lite';
+
+import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+import {WriteLagImage, ReadLagImage} from '../../../../../components/LagImages';
+
+import {PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES} from '../utils/constants';
+
+import i18n from '../i18n';
+
+import './Headers.scss';
+
+const b = block('ydb-diagnostics-partitions-columns-header');
+
+interface MultilineHeaderProps {
+    title: string;
+}
+
+export const MultilineHeader = ({title}: MultilineHeaderProps) => (
+    <div className={b('multiline')}>{title}</div>
+);
+
+export const ReadSessionHeader = () => (
+    <div className={b('read-session')}>
+        {PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_SESSION_ID]}
+    </div>
+);
+
+export const WriteLagsHeader = () => (
+    <LabelWithPopover
+        className={b('lags')}
+        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS]}
+        popoverContent={
+            <div className={b('lags-popover-content')}>
+                <div>{i18n('lagsPopover.writeLags')}</div>
+                <div>
+                    <WriteLagImage />
+                </div>
+            </div>
+        }
+    />
+);
+
+export const ReadLagsHeader = () => (
+    <LabelWithPopover
+        className={b('lags')}
+        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS]}
+        popoverContent={
+            <div className={b('lags-popover-content')}>
+                <div>{i18n('lagsPopover.readLags')}</div>
+                <div>
+                    <ReadLagImage />
+                </div>
+            </div>
+        }
+    />
+);
+
+export const UnreadMessagesHeader = () => (
+    <LabelWithPopover
+        className={b('messages')}
+        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES]}
+        popoverContent={
+            <div className={b('messages-popover-content')}>{i18n('headers.unread')}</div>
+        }
+    />
+);
+
+export const UncommitedMessagesHeader = () => (
+    <LabelWithPopover
+        className={b('messages')}
+        headerText={PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES]}
+        popoverContent={
+            <div className={b('messages-popover-content')}>{i18n('headers.uncommited')}</div>
+        }
+    />
+);

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

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

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

@@ -0,0 +1,45 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-diagnostics-partitions {
+    overflow: auto;
+    flex-grow: 1;
+
+    height: 100%;
+
+    @include flex-container();
+
+    &__controls {
+        @include controls();
+    }
+
+    &__consumer-select {
+        width: 220px;
+    }
+
+    &__search {
+        @include search();
+        &_partition {
+            width: 100px;
+        }
+        &_general {
+            width: 280px;
+        }
+    }
+
+    &__table-settings .yc-icon {
+        width: 20px;
+    }
+
+    &__table-wrapper {
+        overflow: auto;
+        @include flex-container();
+    }
+
+    &__table-content {
+        overflow: auto;
+
+        height: 100%;
+
+        @include freeze-nth-column(1);
+    }
+}

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

@@ -0,0 +1,254 @@
+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} from '../../../../utils/hooks';
+import {DEFAULT_TABLE_SETTINGS, PARTITIONS_SELECTED_COLUMNS_KEY} from '../../../../utils/constants';
+
+import {getSettingValue, setSettingValue} from '../../../../store/reducers/settings';
+import {
+    getConsumer,
+    selectPreparedPartitionsData,
+    setDataWasNotLoaded,
+} from '../../../../store/reducers/consumer';
+
+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 i18n from './i18n';
+
+import './Partitions.scss';
+
+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);
+
+    const dispatch = useDispatch();
+
+    const [selectedConsumer, setSelectedConsumer] = useState<string[]>();
+    const [generalSearchValue, setGeneralSearchValue] = useState('');
+    const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
+
+    const [componentCurrentPath, setComponentCurrentPath] = useState(path);
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const {loading, wasLoaded, error} = useTypedSelector((state) => state.consumer);
+
+    const partitions = useTypedSelector((state) => selectPreparedPartitionsData(state));
+
+    const savedSelectedColumns: string = useTypedSelector((state) =>
+        getSettingValue(state, PARTITIONS_SELECTED_COLUMNS_KEY),
+    );
+
+    useEffect(() => {
+        // Manual path control to ensure it updates with other values so no request with wrong params will be sent
+        setComponentCurrentPath(path);
+    }, [path]);
+
+    const fetchConsumerData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            if (selectedConsumer && selectedConsumer.length) {
+                dispatch(getConsumer(componentCurrentPath, selectedConsumer[0]));
+            }
+        },
+        [dispatch, selectedConsumer, componentCurrentPath],
+    );
+
+    useAutofetcher(fetchConsumerData, [fetchConsumerData], autorefresh);
+
+    const consumersToSelect = useMemo(
+        () =>
+            consumers
+                ? consumers.map((consumer) => ({
+                      value: consumer,
+                      content: consumer,
+                  }))
+                : undefined,
+        [consumers],
+    );
+
+    useEffect(() => {
+        if (consumersToSelect && consumersToSelect.length) {
+            setSelectedConsumer([consumersToSelect[0].value]);
+        } else {
+            setSelectedConsumer(undefined);
+        }
+    }, [consumersToSelect]);
+
+    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]);
+
+    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;
+
+            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 handleConsumerSelectChange = (value: string[]) => {
+        setSelectedConsumer(value);
+    };
+
+    const handlePartitionIdSearchChange = (value: string) => {
+        setPartitionIdSearchValue(value);
+    };
+
+    const handleGeneralSearchChange = (value: string) => {
+        setGeneralSearchValue(value);
+    };
+
+    if (error) {
+        return <ResponseError error={error} />;
+    }
+
+    if (!consumersToSelect || !consumersToSelect.length) {
+        return <div>{i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`)}</div>;
+    }
+
+    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}
+                />
+                <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>
+            <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>
+        </div>
+    );
+};

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

@@ -0,0 +1,79 @@
+import {useEffect, useMemo} from 'react';
+import {useDispatch} from 'react-redux';
+
+import type {EPathType} from '../../../../types/api/schema';
+
+import {useTypedSelector} from '../../../../utils/hooks';
+
+import {
+    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(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/columns/Columns.scss

@@ -0,0 +1,13 @@
+.ydb-diagnostics-partitions-columns {
+    &__lags-header {
+        text-align: center;
+    }
+
+    &__string-with-copy {
+        overflow: hidden;
+
+        max-width: 150px;
+
+        text-overflow: ellipsis;
+    }
+}