ydb-embedded-ui 3.4.1 → 3.4.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [3.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.1...v3.4.2) (2023-03-03)
+
+
+### Bug Fixes
+
+* **Partitions:** add search to consumers filter ([95e4462](https://github.com/ydb-platform/ydb-embedded-ui/commit/95e446295cb2b2729daf0d0ef719e37c7c8e0d3c))
+* **Partitions:** fix error on wrong consumer in query string ([44269fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/44269fa9240fe31c9ef69e061c20d58b2b55fae3))
+* **PDisk:** display vdisks donors ([8b39b01](https://github.com/ydb-platform/ydb-embedded-ui/commit/8b39b01e8bf62624e9e12ac0a329fda5d03cc8df))
+
 ## [3.4.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.0...v3.4.1) (2023-03-01)
 
 

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -21,6 +21,21 @@
     &__vdisks-item {
         flex-basis: 5px;
         flex-shrink: 0;
+
+        .stack__layer {
+            background: var(--yc-color-base-background);
+
+            .data-table__row:hover & {
+                background: var(--ydb-data-table-color-hover);
+            }
+        }
+    }
+
+    &__donors-stack {
+        --ydb-stack-offset-x: 0px;
+        --ydb-stack-offset-y: -2px;
+        --ydb-stack-offset-x-hover: 0px;
+        --ydb-stack-offset-y-hover: -7px;
     }
 
     &__media-type {

package/dist/containers/Storage/PDisk/PDisk.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import {InternalLink} from '../../../components/InternalLink';
+import {Stack} from '../../../components/Stack/Stack';
 
 import routes, {createHref} from '../../../routes';
 import {getVDisksForPDisk} from '../../../store/reducers/storage';
@@ -10,6 +11,7 @@ import {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {stringifyVdiskId} from '../../../utils';
 import {useTypedSelector} from '../../../utils/hooks';
 import {getPDiskType} from '../../../utils/pdisk';
+import {isFullVDiksData} from '../../../utils/storage';
 
 import {STRUCTURE} from '../../Node/NodePages';
 
@@ -109,19 +111,42 @@ export const PDisk = ({nodeId, data: rawData = {}}: PDiskProps) => {
 
         return (
             <div className={b('vdisks')}>
-                {vdisks.map((vdisk) => (
-                    <div
-                        key={stringifyVdiskId(vdisk.VDiskId)}
-                        className={b('vdisks-item')}
-                        style={{
-                            // 1 is small enough for empty disks to be of the minimum width
-                            // but if all of them are empty, `flex-grow: 1` would size them evenly
-                            flexGrow: Number(vdisk.AllocatedSize) || 1,
-                        }}
-                    >
-                        <VDisk data={vdisk} compact />
-                    </div>
-                ))}
+                {vdisks.map((vdisk) => {
+                    const donors = vdisk.Donors;
+
+                    return (
+                        <div
+                            key={stringifyVdiskId(vdisk.VDiskId)}
+                            className={b('vdisks-item')}
+                            style={{
+                                // 1 is small enough for empty disks to be of the minimum width
+                                // but if all of them are empty, `flex-grow: 1` would size them evenly
+                                flexGrow: Number(vdisk.AllocatedSize) || 1,
+                            }}
+                        >
+                            {donors && donors.length ? (
+                                <Stack className={b('donors-stack')} key={stringifyVdiskId(vdisk.VDiskId)}>
+                                    <VDisk data={vdisk} compact />
+                                    {donors.map((donor) => {
+                                        const isFullData = isFullVDiksData(donor);
+
+                                        return (
+                                            <VDisk
+                                                compact
+                                                data={isFullData ? donor : {...donor, DonorMode: true}}
+                                                key={stringifyVdiskId(
+                                                    isFullData ? donor.VDiskId : donor,
+                                                )}
+                                            />
+                                        );
+                                    })}
+                                </Stack>
+                            ) : (
+                                <VDisk data={vdisk} compact />
+                            )}
+                        </div>
+                    );
+                })}
             </div>
         );
     };

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -1,8 +1,10 @@
 .global-storage-nodes {
+    &__pdisks-column {
+        overflow: visible; // to enable stacked disks overflow the row
+    }
+
     &__pdisks-wrapper {
         display: flex;
-        overflow-x: auto;
-        overflow-y: hidden;
         justify-content: left;
         align-items: flex-end;
 

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -128,6 +128,7 @@ function StorageNodes({
         },
         {
             name: TableColumnsIds.PDisks,
+            className: b('pdisks-column'),
             header: tableColumnsNames[TableColumnsIds.PDisks],
             render: ({value, row}) => (
                 <div className={b('pdisks-wrapper')}>

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

@@ -1,5 +1,5 @@
 import block from 'bem-cn-lite';
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useCallback, useEffect, useMemo, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {escapeRegExp} from 'lodash/fp';
 
@@ -53,8 +53,6 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
 
     const dispatch = useDispatch();
 
-    const isFirstRenderRef = useRef(true);
-
     const [generalSearchValue, setGeneralSearchValue] = useState('');
     const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
 
@@ -74,14 +72,6 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     useEffect(() => {
         // Manual path control to ensure it updates with other values so no request with wrong params will be sent
         setComponentCurrentPath(path);
-
-        // Do not reset selected consumer on first effect call
-        // To enable navigating to specific consumer
-        if (isFirstRenderRef.current) {
-            isFirstRenderRef.current = false;
-        } else {
-            dispatch(setSelectedConsumer(undefined));
-        }
     }, [dispatch, path]);
 
     const fetchConsumerData = useCallback(
@@ -90,11 +80,11 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
                 dispatch(setDataWasNotLoaded());
             }
 
-            if (selectedConsumer) {
+            if (selectedConsumer && consumers && consumers.includes(selectedConsumer)) {
                 dispatch(getConsumer(componentCurrentPath, selectedConsumer));
             }
         },
-        [dispatch, selectedConsumer, componentCurrentPath],
+        [dispatch, selectedConsumer, componentCurrentPath, consumers],
     );
 
     useAutofetcher(fetchConsumerData, [fetchConsumerData], autorefresh);
@@ -111,10 +101,13 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
     );
 
     useEffect(() => {
-        if (consumersToSelect && consumersToSelect.length && !selectedConsumer) {
+        const shouldUpdateSelectedConsumer =
+            !selectedConsumer || (consumers && !consumers.includes(selectedConsumer));
+
+        if (consumersToSelect && consumersToSelect.length && shouldUpdateSelectedConsumer) {
             dispatch(setSelectedConsumer(consumersToSelect[0].value));
         }
-    }, [dispatch, consumersToSelect, selectedConsumer]);
+    }, [dispatch, consumersToSelect, selectedConsumer, consumers]);
 
     const selectedColumns: string[] = useMemo(
         () =>
@@ -222,6 +215,7 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
                     options={consumersToSelect}
                     value={[selectedConsumer || '']}
                     onUpdate={handleConsumerSelectChange}
+                    filterable={consumers && consumers.length > 5}
                 />
                 <Search
                     onChange={handlePartitionIdSearchChange}

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

@@ -6,6 +6,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import {useTypedSelector} from '../../../../utils/hooks';
 
 import {
+    cleanTopicData,
     getTopic,
     setDataWasNotLoaded as setTopicDataWasNotLoaded,
 } from '../../../../store/reducers/topic';
@@ -61,6 +62,7 @@ export const PartitionsWrapper = ({path, type}: PartitionsWrapperProps) => {
 
     useEffect(() => {
         dispatch(setTopicDataWasNotLoaded());
+        dispatch(cleanTopicData());
         dispatch(setNodesDataWasNotLoaded());
 
         dispatch(getTopic(path));

package/dist/store/reducers/topic.ts

@@ -18,6 +18,7 @@ import {convertBytesObjectToSpeed} from '../../utils/bytesParsers';
 export const FETCH_TOPIC = createRequestActionTypes('topic', 'FETCH_TOPIC');
 
 const SET_DATA_WAS_NOT_LOADED = 'topic/SET_DATA_WAS_NOT_LOADED';
+const CLEAN_TOPIC_DATA = 'topic/CLEAN_TOPIC_DATA';
 
 const initialState = {
     loading: true,
@@ -64,6 +65,12 @@ const topic: Reducer<ITopicState, ITopicAction> = (state = initialState, action)
                 wasLoaded: false,
             };
         }
+        case CLEAN_TOPIC_DATA: {
+            return {
+                ...state,
+                data: undefined,
+            };
+        }
         default:
             return state;
     }
@@ -75,6 +82,12 @@ export const setDataWasNotLoaded = () => {
     } as const;
 };
 
+export const cleanTopicData = () => {
+    return {
+        type: CLEAN_TOPIC_DATA,
+    } as const;
+};
+
 export function getTopic(path?: string) {
     return createApiRequest({
         request: window.api.getTopic({path}),

package/dist/types/store/topic.ts

@@ -1,4 +1,4 @@
-import {FETCH_TOPIC, setDataWasNotLoaded} from '../../store/reducers/topic';
+import {FETCH_TOPIC, cleanTopicData, setDataWasNotLoaded} from '../../store/reducers/topic';
 import type {ApiRequestAction} from '../../store/utils';
 import type {IProcessSpeedStats} from '../../utils/bytesParsers';
 import type {IResponseError} from '../api/error';
@@ -31,7 +31,8 @@ export interface ITopicState {
 
 export type ITopicAction =
     | ApiRequestAction<typeof FETCH_TOPIC, DescribeTopicResult, IResponseError>
-    | ReturnType<typeof setDataWasNotLoaded>;
+    | ReturnType<typeof setDataWasNotLoaded>
+    | ReturnType<typeof cleanTopicData>;
 
 export interface ITopicRootStateSlice {
     topic: ITopicState;

package/package.json

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