ydb-embedded-ui 3.3.3 → 3.4.0

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -7,6 +7,7 @@ import routes, {createHref} from '../../../routes';
 import {EFlag} from '../../../types/api/enums';
 import {EVDiskState, TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
+import {isFullVDiksData} from '../../../utils/storage';
 
 import {STRUCTURE} from '../../Node/NodePages';
 
@@ -14,6 +15,7 @@ import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar'
 import type {NodesHosts} from '../PDiskPopup';
 import {VDiskPopup} from '../VDiskPopup';
 
+import type {IUnavailableDonor} from '../utils/types';
 import {NOT_AVAILABLE_SEVERITY} from '../utils';
 
 import './VDisk.scss';
@@ -46,20 +48,29 @@ const getColorSeverity = (color?: EFlag) => {
 };
 
 interface VDiskProps {
-    data?: TVDiskStateInfo;
+    data?: TVDiskStateInfo | IUnavailableDonor;
     poolName?: string;
     nodes?: NodesHosts;
     compact?: boolean;
 }
 
 export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
-    const [severity, setSeverity] = useState(getStateSeverity(data.VDiskState));
+    const isFullData = isFullVDiksData(data);
+
+    const [severity, setSeverity] = useState(
+        getStateSeverity(isFullData ? data.VDiskState : undefined),
+    );
     const [isPopupVisible, setIsPopupVisible] = useState(false);
 
     const anchor = useRef(null);
 
     // determine disk status severity
     useEffect(() => {
+        if (!isFullData) {
+            setSeverity(NOT_AVAILABLE_SEVERITY);
+            return;
+        }
+
         const {DiskSpace, VDiskState, FrontQueues, Replicated, DonorMode} = data;
 
         // if the disk is not available, this determines its status severity regardless of other features
@@ -84,7 +95,7 @@ export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
         }
 
         setSeverity(newSeverity);
-    }, [data]);
+    }, [data, isFullData]);
 
     const showPopup = () => {
         setIsPopupVisible(true);
@@ -95,6 +106,10 @@ export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
     };
 
     const vdiskAllocatedPercent = useMemo(() => {
+        if (!isFullData) {
+            return undefined;
+        }
+
         const {AvailableSize, AllocatedSize, PDisk} = data;
         const available = AvailableSize ? AvailableSize : PDisk?.AvailableSize;
 
@@ -105,7 +120,7 @@ export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
         return isNaN(Number(AllocatedSize))
             ? undefined
             : (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize));
-    }, [data]);
+    }, [data, isFullData]);
 
     return (
         <React.Fragment>
@@ -117,7 +132,7 @@ export const VDisk = ({data = {}, poolName, nodes, compact}: VDiskProps) => {
                 open={isPopupVisible}
             />
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                {data.NodeId ? (
+                {data.NodeId && isFullData ? (
                     <InternalLink
                         to={createHref(
                             routes.node,

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -6,9 +6,12 @@ import {Label, Popup, PopupProps} from '@gravity-ui/uikit';
 import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
-import {TVDiskStateInfo} from '../../../types/api/vdisk';
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+import {isFullVDiksData} from '../../../utils/storage';
+
+import type {IUnavailableDonor} from '../utils/types';
 
 import {NodesHosts, preparePDiskData} from '../PDiskPopup';
 
@@ -16,6 +19,24 @@ import './VDiskPopup.scss';
 
 const b = cn('vdisk-storage-popup');
 
+const prepareUnavailableVDiskData = (data: IUnavailableDonor, poolName?: string) => {
+    const {NodeId, PDiskId, VSlotId} = data;
+
+    const vdiskData: InfoViewerItem[] = [{label: 'State', value: 'not available'}];
+
+    if (poolName) {
+        vdiskData.push({label: 'StoragePool', value: poolName});
+    }
+
+    vdiskData.push(
+        {label: 'NodeId', value: NodeId ?? '–'},
+        {label: 'PDiskId', value: PDiskId ?? '–'},
+        {label: 'VSlotId', value: VSlotId ?? '–'},
+    );
+
+    return vdiskData;
+};
+
 const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
     const {
         VDiskId,
@@ -105,16 +126,24 @@ const prepareVDiskData = (data: TVDiskStateInfo, poolName?: string) => {
 };
 
 interface VDiskPopupProps extends PopupProps {
-    data: TVDiskStateInfo;
+    data: TVDiskStateInfo | IUnavailableDonor;
     poolName?: string;
     nodes?: NodesHosts;
 }
 
 export const VDiskPopup = ({data, poolName, nodes, ...props}: VDiskPopupProps) => {
-    const vdiskInfo = useMemo(() => prepareVDiskData(data, poolName), [data, poolName]);
+    const isFullData = isFullVDiksData(data);
+
+    const vdiskInfo = useMemo(
+        () =>
+            isFullData
+                ? prepareVDiskData(data, poolName)
+                : prepareUnavailableVDiskData(data, poolName),
+        [data, poolName, isFullData],
+    );
     const pdiskInfo = useMemo(
-        () => data.PDisk && preparePDiskData(data.PDisk, nodes),
-        [data.PDisk, nodes],
+        () => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes),
+        [data, nodes, isFullData],
     );
 
     return (

package/dist/containers/Storage/utils/types.ts

@@ -0,0 +1,5 @@
+import {TVSlotId} from '../../../types/api/vdisk';
+
+export interface IUnavailableDonor extends TVSlotId {
+    DonorMode?: boolean;
+}

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

@@ -1,6 +1,35 @@
-.ydb-consumers {
+@import '../../../../styles/mixins.scss';
+
+.ydb-diagnostics-consumers {
+    overflow: auto;
+    flex-grow: 1;
+
+    height: 100%;
+
+    @include flex-container();
+
+    &__controls {
+        @include controls();
+    }
+
     &__search {
-        width: 200px;
-        margin-bottom: 20px;
+        @include search();
+    }
+
+    &__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/Consumers/Consumers.tsx

@@ -1,31 +1,36 @@
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 import {escapeRegExp} from 'lodash/fp';
 
-import DataTable, {Column} from '@gravity-ui/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 import type {EPathType} from '../../../../types/api/schema';
+
 import {Loader} from '../../../../components/Loader';
-import {prepareQueryError} from '../../../../utils/query';
-import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
-import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {Search} from '../../../../components/Search';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
+
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+
 import {
-    getDescribe,
-    selectConsumers,
-    setCurrentDescribePath,
+    selectPreparedConsumersData,
+    selectPreparedTopicStats,
+    getTopic,
     setDataWasNotLoaded,
-} from '../../../../store/reducers/describe';
-import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema';
+} from '../../../../store/reducers/topic';
 
 import {isCdcStreamEntityType} from '../../utils/schema';
 
+import {ConsumersTopicStats} from './TopicStats';
+import {columns} from './columns';
+
 import i18n from './i18n';
 
 import './Consumers.scss';
 
-const b = block('ydb-consumers');
+const b = block('ydb-diagnostics-consumers');
 
 interface ConsumersProps {
     path: string;
@@ -33,93 +38,81 @@ interface ConsumersProps {
 }
 
 export const Consumers = ({path, type}: ConsumersProps) => {
+    const isCdcStream = isCdcStreamEntityType(type);
+
     const dispatch = useDispatch();
 
-    const isCdcStream = isCdcStreamEntityType(type);
+    const [searchValue, setSearchValue] = useState('');
 
-    const mergedChildrenPaths = useTypedSelector((state) =>
-        selectSchemaMergedChildrenPaths(state, path, type),
-    );
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const {loading, wasLoaded, error} = useTypedSelector((state) => state.topic);
 
-    const dataPath = isCdcStream ? mergedChildrenPaths?.[0] : path;
+    const consumers = useTypedSelector((state) => selectPreparedConsumersData(state));
+    const topic = useTypedSelector((state) => selectPreparedTopicStats(state));
 
     const fetchData = useCallback(
-        (isBackground: boolean) => {
+        (isBackground) => {
             if (!isBackground) {
-                dispatch(setDataWasNotLoaded());
+                dispatch(setDataWasNotLoaded);
             }
 
-            if (dataPath) {
-                dispatch(setCurrentDescribePath(dataPath));
-                dispatch(getDescribe({path: dataPath}));
-            }
+            dispatch(getTopic(path));
         },
-
-        [dispatch, dataPath],
+        [dispatch, path],
     );
 
-    const {autorefresh} = useTypedSelector((state) => state.schema);
-
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    const {loading, wasLoaded, error} = useTypedSelector((state) => state.describe);
-    const consumers = useTypedSelector((state) => selectConsumers(state, dataPath));
+    const dataToRender = useMemo(() => {
+        if (!consumers) {
+            return [];
+        }
 
-    const [consumersToRender, setConsumersToRender] = useState(consumers);
+        const searchRe = new RegExp(escapeRegExp(searchValue), 'i');
 
-    useEffect(() => {
-        setConsumersToRender(consumers);
-    }, [consumers]);
+        return consumers.filter((consumer) => {
+            return searchRe.test(String(consumer.name));
+        });
+    }, [consumers, searchValue]);
 
-    const filterConsumersByName = (search: string) => {
-        const filteredConsumers = search
-            ? consumers.filter((consumer) => {
-                  const re = new RegExp(escapeRegExp(search), 'i');
-                  return re.test(consumer.name);
-              })
-            : consumers;
-
-        setConsumersToRender(filteredConsumers);
-    };
-
-    const handleSearch = (value: string) => {
-        filterConsumersByName(value);
+    const handleSearchChange = (value: string) => {
+        setSearchValue(value);
     };
 
-    const columns: Column<any>[] = [
-        {
-            name: 'name',
-            header: i18n('table.columns.consumerName'),
-            width: 200,
-        },
-    ];
-
     if (loading && !wasLoaded) {
         return <Loader size="m" />;
     }
 
-    if (!loading && error) {
-        return <div className={b('message', 'error')}>{prepareQueryError(error)}</div>;
+    if (error) {
+        return <ResponseError error={error} />;
     }
 
-    if (consumers.length === 0) {
-        return <div className={b('message')}>{i18n('noConsumersMessage')}</div>;
+    if (!consumers || !consumers.length) {
+        return <div>{i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`)}</div>;
     }
 
     return (
         <div className={b()}>
-            <Search
-                onChange={handleSearch}
-                placeholder={i18n('search.placeholder')}
-                className={b('search')}
-            />
-            <DataTable
-                theme="yandex-cloud"
-                settings={DEFAULT_TABLE_SETTINGS}
-                columns={columns}
-                data={consumersToRender}
-                emptyDataMessage={i18n('table.emptyDataMessage')}
-            />
+            <div className={b('controls')}>
+                <Search
+                    onChange={handleSearchChange}
+                    placeholder={i18n('controls.search')}
+                    className={b('search')}
+                    value={searchValue}
+                />
+                {topic && <ConsumersTopicStats data={topic} />}
+            </div>
+            <div className={b('table-wrapper')}>
+                <div className={b('table-content')}>
+                    <DataTable
+                        theme="yandex-cloud"
+                        data={dataToRender}
+                        columns={columns}
+                        settings={DEFAULT_TABLE_SETTINGS}
+                        emptyDataMessage={i18n('table.emptyDataMessage')}
+                    />
+                </div>
+            </div>
         </div>
     );
 };

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

@@ -0,0 +1,13 @@
+.ydb-diagnostics-consumers-columns-header {
+    &__lags {
+        white-space: nowrap;
+    }
+
+    &__lags-popover-content {
+        max-width: 300px;
+
+        div:nth-child(1) {
+            margin-bottom: 10px;
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+import block from 'bem-cn-lite';
+
+import {ReadLagImage} from '../../../../../components/LagImages';
+import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
+
+import {CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES} from '../utils/constants';
+
+import i18n from '../i18n';
+
+import './Headers.scss';
+
+const b = block('ydb-diagnostics-consumers-columns-header');
+
+export const ReadLagsHeader = () => (
+    <LabelWithPopover
+        className={b('lags')}
+        headerText={CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS]}
+        popoverContent={
+            <div className={b('lags-popover-content')}>
+                <div>{i18n('lagsPopover.readLags')}</div>
+                <div>
+                    <ReadLagImage />
+                </div>
+            </div>
+        }
+    />
+);

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

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

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss

@@ -0,0 +1,32 @@
+.ydb-diagnostics-consumers-topic-stats {
+    font-size: var(--yc-text-body-2-font-size);
+    line-height: var(--yc-text-body-2-line-height);
+
+    &__wrapper {
+        display: flex;
+        flex-direction: row;
+
+        padding-left: 16px;
+
+        border-left: 1px solid var(--yc-color-line-generic);
+    }
+
+    &__item {
+        display: flex;
+        flex-direction: column;
+
+        margin-right: 20px;
+    }
+    &__label {
+        margin-bottom: 4px;
+
+        color: var(--yc-color-text-secondary);
+    }
+    &__value {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        height: 30px;
+    }
+}

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.tsx

@@ -0,0 +1,43 @@
+import block from 'bem-cn-lite';
+
+import type {IPreparedTopicStats} from '../../../../../types/store/topic';
+import {formatMsToUptime} from '../../../../../utils';
+import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+
+import './ConsumersTopicStats.scss';
+
+const b = block('ydb-diagnostics-consumers-topic-stats');
+
+interface ConsumersTopicStatsProps {
+    data?: IPreparedTopicStats;
+}
+
+export const ConsumersTopicStats = ({data}: ConsumersTopicStatsProps) => {
+    const {writeSpeed, partitionsWriteLag, partitionsIdleTime} = data || {};
+
+    const values = [
+        {
+            label: 'Write speed',
+            value: <SpeedMultiMeter data={writeSpeed} />,
+        },
+        {
+            label: 'Write lag',
+            value: formatMsToUptime(partitionsWriteLag || 0),
+        },
+        {
+            label: 'Write idle time',
+            value: formatMsToUptime(partitionsIdleTime || 0),
+        },
+    ];
+
+    return (
+        <div className={b('wrapper')}>
+            {values.map((value, index) => (
+                <div key={index} className={b('item')}>
+                    <div className={b('label')}>{value.label}</div>
+                    <div className={b('value')}>{value.value}</div>
+                </div>
+            ))}
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/index.ts

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

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

@@ -0,0 +1,5 @@
+.ydb-diagnostics-consumers-columns {
+    &__lags-header {
+        text-align: center;
+    }
+}

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

@@ -0,0 +1,66 @@
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+import block from 'bem-cn-lite';
+
+import type {IPreparedConsumerData} from '../../../../../types/store/topic';
+import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
+import {formatMsToUptime} from '../../../../../utils';
+
+import {
+    CONSUMERS_COLUMNS_IDS,
+    CONSUMERS_COLUMNS_TITILES,
+    CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS,
+    CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES,
+} from '../utils/constants';
+
+import {ReadLagsHeader} from '../Headers';
+
+import './Columns.scss';
+
+const b = block('ydb-diagnostics-consumers-columns');
+
+export const columns: Column<IPreparedConsumerData>[] = [
+    {
+        name: CONSUMERS_COLUMNS_IDS.CONSUMER,
+        header: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.CONSUMER],
+        align: DataTable.LEFT,
+        render: ({row}) => row.name || '-',
+    },
+    {
+        name: CONSUMERS_COLUMNS_IDS.READ_SPEED,
+        header: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_SPEED],
+        align: DataTable.RIGHT,
+        sortAccessor: (row) => row.readSpeed.perMinute,
+        render: ({row}) => <SpeedMultiMeter data={row.readSpeed} />,
+    },
+    {
+        name: CONSUMERS_COLUMNS_IDS.READ_LAGS,
+        header: <ReadLagsHeader />,
+        className: b('lags-header'),
+        sub: [
+            {
+                name: CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.WRITE_LAG,
+                header: CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES[
+                    CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.WRITE_LAG
+                ],
+                align: DataTable.RIGHT,
+                render: ({row}) => formatMsToUptime(row.writeLag),
+            },
+            {
+                name: CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_LAG,
+                header: CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES[
+                    CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_LAG
+                ],
+                align: DataTable.RIGHT,
+                render: ({row}) => formatMsToUptime(row.readLag),
+            },
+            {
+                name: CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_IDLE_TIME,
+                header: CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES[
+                    CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_IDLE_TIME
+                ],
+                align: DataTable.RIGHT,
+                render: ({row}) => formatMsToUptime(row.readIdleTime),
+            },
+        ],
+    },
+];

package/dist/containers/Tenant/Diagnostics/Consumers/columns/index.ts

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

package/dist/containers/Tenant/Diagnostics/Consumers/i18n/en.json

@@ -1,6 +1,7 @@
 {
-  "search.placeholder": "Consumer name",
+  "noConsumersMessage.topic": "This topic has no consumers",
+  "noConsumersMessage.stream": "This changefeed has no consumers",
+  "lagsPopover.readLags": "Read lags statistics, maximum among all consumer partitions (time format dd hh:mm:ss)",
   "table.emptyDataMessage": "No consumers match the current search",
-  "table.columns.consumerName": "Consumer",
-  "noConsumersMessage": "This topic has no consumers"
+  "controls.search": "Consumer"
 }

package/dist/containers/Tenant/Diagnostics/Consumers/i18n/ru.json

@@ -1,6 +1,7 @@
 {
-  "search.placeholder": "Название читателя",
+  "noConsumersMessage.topic": "У этого топика нет читателей",
+  "noConsumersMessage.stream": "У этого стрима нет читателей",
+  "lagsPopover.readLags": "Статистика лагов чтения, максимальной значение среди всех партиций читателя (формат времени дд чч:мм:сс)",
   "table.emptyDataMessage": "По заданному поиску нет читателей",
-  "table.columns.consumerName": "Читатель",
-  "noConsumersMessage": "У этого топика нет читателей"
+  "controls.search": "Consumer"
 }

package/dist/containers/Tenant/Diagnostics/Consumers/utils/constants.ts

@@ -0,0 +1,23 @@
+export const CONSUMERS_COLUMNS_IDS = {
+    CONSUMER: 'consumer',
+    READ_SPEED: 'readSpeed',
+    READ_LAGS: 'readLags',
+} as const;
+
+export const CONSUMERS_COLUMNS_TITILES = {
+    [CONSUMERS_COLUMNS_IDS.CONSUMER]: 'Consumer',
+    [CONSUMERS_COLUMNS_IDS.READ_SPEED]: 'Read speed',
+    [CONSUMERS_COLUMNS_IDS.READ_LAGS]: 'Read lags, duration',
+} as const;
+
+export const CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS = {
+    WRITE_LAG: 'writeLag',
+    READ_LAG: 'readLag',
+    READ_IDLE_TIME: 'readIdleTime',
+} as const;
+
+export const CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES = {
+    [CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.WRITE_LAG]: 'write lag',
+    [CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_LAG]: 'read lag',
+    [CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS.READ_IDLE_TIME]: 'read idle time',
+} as const;