ydb-embedded-ui 4.33.0 → 5.0.0

package/dist/containers/Storage/StorageNodes/shared.ts

@@ -1,9 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
-import {isUnavailableNode} from '../../../utils/nodes';
-
-export const b = cn('global-storage-nodes');
-
-export const getRowUnavailableClassName = (row: PreparedStorageNode) =>
-    b('node', {unavailable: isUnavailableNode(row)});

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx

@@ -1,29 +0,0 @@
-import {RadioButton} from '@gravity-ui/uikit';
-
-import type {StorageType} from '../../../store/reducers/storage/types';
-import {STORAGE_TYPES} from '../../../store/reducers/storage/constants';
-
-const StorageTypesTitles = {
-    [STORAGE_TYPES.groups]: 'Groups',
-    [STORAGE_TYPES.nodes]: 'Nodes',
-};
-
-interface StorageTypeFilterProps {
-    value: StorageType;
-    onChange: (value: StorageType) => void;
-}
-
-const storageTypeFilterQa = 'storage-type-filter';
-
-export const StorageTypeFilter = ({value, onChange}: StorageTypeFilterProps) => {
-    return (
-        <RadioButton value={value} onUpdate={onChange} qa={storageTypeFilterQa}>
-            <RadioButton.Option value={STORAGE_TYPES.groups}>
-                {StorageTypesTitles[STORAGE_TYPES.groups]}
-            </RadioButton.Option>
-            <RadioButton.Option value={STORAGE_TYPES.nodes}>
-                {StorageTypesTitles[STORAGE_TYPES.nodes]}
-            </RadioButton.Option>
-        </RadioButton>
-    );
-};

package/dist/containers/Storage/StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter.tsx

@@ -1,33 +0,0 @@
-import {RadioButton} from '@gravity-ui/uikit';
-
-import type {VisibleEntities} from '../../../store/reducers/storage/types';
-import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
-
-export const VisibleEntitiesTitles = {
-    [VISIBLE_ENTITIES.all]: 'All',
-    [VISIBLE_ENTITIES.missing]: 'Degraded',
-    [VISIBLE_ENTITIES.space]: 'Out of Space',
-};
-
-interface StorageProblemFilterProps {
-    value: VisibleEntities;
-    onChange: (value: VisibleEntities) => void;
-}
-
-const storageVisibleEntitiesFilterQa = 'storage-visible-entities-filter';
-
-export const StorageVisibleEntitiesFilter = ({value, onChange}: StorageProblemFilterProps) => {
-    return (
-        <RadioButton value={value} onUpdate={onChange} qa={storageVisibleEntitiesFilterQa}>
-            <RadioButton.Option value={VISIBLE_ENTITIES.missing}>
-                {VisibleEntitiesTitles[VISIBLE_ENTITIES.missing]}
-            </RadioButton.Option>
-            <RadioButton.Option value={VISIBLE_ENTITIES.space}>
-                {VisibleEntitiesTitles[VISIBLE_ENTITIES.space]}
-            </RadioButton.Option>
-            <RadioButton.Option value={VISIBLE_ENTITIES.all}>
-                {VisibleEntitiesTitles[VISIBLE_ENTITIES.all]}
-            </RadioButton.Option>
-        </RadioButton>
-    );
-};

package/dist/containers/Storage/StorageWrapper.tsx

@@ -1,23 +0,0 @@
-import type {AdditionalNodesProps} from '../../types/additionalProps';
-import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../../utils/constants';
-import {useSetting} from '../../utils/hooks';
-
-import {VirtualStorage} from './VirtualStorage';
-import {Storage} from './Storage';
-
-interface StorageWrapperProps {
-    tenant?: string;
-    nodeId?: string;
-    parentContainer?: Element | null;
-    additionalNodesProps?: AdditionalNodesProps;
-}
-
-export const StorageWrapper = ({parentContainer, ...props}: StorageWrapperProps) => {
-    const [useVirtualTable] = useSetting<boolean>(USE_BACKEND_PARAMS_FOR_TABLES_KEY);
-
-    if (useVirtualTable) {
-        return <VirtualStorage parentContainer={parentContainer} {...props} />;
-    }
-
-    return <Storage {...props} />;
-};

package/dist/containers/Storage/UsageFilter/UsageFilter.tsx

@@ -1,99 +0,0 @@
-import {useEffect, useMemo, useRef, useState} from 'react';
-import cn from 'bem-cn-lite';
-
-import {Select, SelectOption} from '@gravity-ui/uikit';
-
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-
-import {getUsageSeverityForEntityStatus} from '../utils';
-
-import i18n from './i18n';
-import './UsageFilter.scss';
-
-export interface UsageFilterItem {
-    threshold: number;
-    count: number;
-}
-
-interface UsageFilterProps {
-    className?: string;
-    value?: string[];
-    groups?: UsageFilterItem[];
-    onChange?: (value: string[]) => void;
-    debounce?: number;
-}
-
-const b = cn('usage-filter');
-
-export const UsageFilter = (props: UsageFilterProps) => {
-    const {className, value = [], groups = [], onChange, debounce = 200} = props;
-
-    const [filterValue, setFilterValue] = useState(value);
-    const timer = useRef<number>();
-
-    useEffect(() => {
-        // sync inner state with external value
-        setFilterValue((prevValue) => {
-            if (prevValue.join(',') !== value.join(',')) {
-                return value;
-            }
-
-            return prevValue;
-        });
-    }, [value]);
-
-    const options = useMemo(
-        () =>
-            groups.map(({threshold, count}) => ({
-                value: String(threshold),
-                text: `${threshold}%`,
-                data: {count},
-            })),
-        [groups],
-    );
-
-    const handleUpdate = (newValue: string[]) => {
-        setFilterValue(newValue);
-
-        window.clearTimeout(timer.current);
-        timer.current = window.setTimeout(() => {
-            onChange?.(newValue);
-        }, debounce);
-    };
-
-    const maxWidth = Math.max(...groups.map(({count}) => count));
-
-    const renderOption = ({value: optionValue, data, text}: SelectOption) => (
-        <div className={b('option')}>
-            <EntityStatus
-                className={b('option-title')}
-                status={getUsageSeverityForEntityStatus(Number(optionValue))}
-                name={text}
-                size="xs"
-            />
-            <div className={b('option-meta')}>
-                {i18n('groups_count', {count: data.count})}
-                <div
-                    className={b('option-bar')}
-                    style={{width: `${(data.count / maxWidth) * 100}%`}}
-                />
-            </div>
-        </div>
-    );
-
-    return (
-        <Select
-            className={b(null, className)}
-            label={i18n('label')}
-            value={filterValue}
-            placeholder={i18n('default_value')}
-            options={options}
-            multiple
-            onUpdate={handleUpdate}
-            renderOption={renderOption}
-            getOptionHeight={() => 50}
-            popupWidth={280}
-            disabled={groups.length === 0}
-        />
-    );
-};

package/dist/containers/Storage/UsageFilter/i18n/index.ts

@@ -1,11 +0,0 @@
-import {i18n, Lang} from '../../../../utils/i18n';
-
-import en from './en.json';
-import ru from './ru.json';
-
-const COMPONENT = 'ydb-usage-filter';
-
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);

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

@@ -1,157 +0,0 @@
-import React, {useEffect, useState, useRef, useMemo} from 'react';
-import cn from 'bem-cn-lite';
-
-import type {NodesMap} from '../../../types/store/nodesList';
-
-import {InternalLink} from '../../../components/InternalLink';
-
-import routes, {createHref} from '../../../routes';
-import {EFlag} from '../../../types/api/enums';
-import {EVDiskState, TVDiskStateInfo} from '../../../types/api/vdisk';
-import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {isFullVDiskData} from '../../../utils/storage';
-
-import {STRUCTURE} from '../../Node/NodePages';
-
-import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
-import {VDiskPopup} from '../VDiskPopup';
-
-import type {UnavailableDonor} from '../utils/types';
-import {NOT_AVAILABLE_SEVERITY} from '../utils';
-
-import './VDisk.scss';
-
-const b = cn('vdisk-storage');
-
-const stateSeverity: Record<EVDiskState, EDiskStateSeverity> = {
-    Initial: EDiskStateSeverity.Yellow,
-    LocalRecoveryError: EDiskStateSeverity.Red,
-    SyncGuidRecoveryError: EDiskStateSeverity.Red,
-    SyncGuidRecovery: EDiskStateSeverity.Yellow,
-    PDiskError: EDiskStateSeverity.Red,
-    OK: EDiskStateSeverity.Green,
-};
-
-const getStateSeverity = (vDiskState?: EVDiskState) => {
-    if (!vDiskState) {
-        return NOT_AVAILABLE_SEVERITY;
-    }
-
-    return stateSeverity[vDiskState] ?? NOT_AVAILABLE_SEVERITY;
-};
-
-const getColorSeverity = (color?: EFlag) => {
-    if (!color) {
-        return EDiskStateSeverity.Grey;
-    }
-
-    return EDiskStateSeverity[color] ?? EDiskStateSeverity.Grey;
-};
-
-interface VDiskProps {
-    data?: TVDiskStateInfo | UnavailableDonor;
-    nodes?: NodesMap;
-    compact?: boolean;
-}
-
-export const VDisk = ({data = {}, nodes, compact}: VDiskProps) => {
-    const isFullData = isFullVDiskData(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
-        if (!VDiskState) {
-            setSeverity(NOT_AVAILABLE_SEVERITY);
-            return;
-        }
-
-        const DiskSpaceSeverity = getColorSeverity(DiskSpace);
-        const VDiskSpaceSeverity = getStateSeverity(VDiskState);
-        const FrontQueuesSeverity = Math.min(
-            EDiskStateSeverity.Orange,
-            getColorSeverity(FrontQueues),
-        );
-
-        let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
-
-        // donors are always in the not replicated state since they are leftovers
-        // painting them blue is useless
-        if (!Replicated && !DonorMode && newSeverity === EDiskStateSeverity.Green) {
-            newSeverity = EDiskStateSeverity.Blue;
-        }
-
-        setSeverity(newSeverity);
-    }, [data, isFullData]);
-
-    const showPopup = () => {
-        setIsPopupVisible(true);
-    };
-
-    const hidePopup = () => {
-        setIsPopupVisible(false);
-    };
-
-    const vdiskAllocatedPercent = useMemo(() => {
-        if (!isFullData) {
-            return undefined;
-        }
-
-        const {AvailableSize, AllocatedSize, PDisk} = data;
-        const available = AvailableSize ? AvailableSize : PDisk?.AvailableSize;
-
-        if (!available) {
-            return undefined;
-        }
-
-        return isNaN(Number(AllocatedSize))
-            ? undefined
-            : (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize));
-    }, [data, isFullData]);
-
-    return (
-        <React.Fragment>
-            <VDiskPopup data={data} nodes={nodes} anchorRef={anchor} open={isPopupVisible} />
-            <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                {data.NodeId && isFullData ? (
-                    <InternalLink
-                        to={createHref(
-                            routes.node,
-                            {id: data.NodeId, activeTab: STRUCTURE},
-                            {
-                                pdiskId: data.PDiskId ?? data.PDisk?.PDiskId,
-                                vdiskId: stringifyVdiskId(data.VDiskId),
-                            },
-                        )}
-                        className={b('content')}
-                    >
-                        <DiskStateProgressBar
-                            diskAllocatedPercent={vdiskAllocatedPercent}
-                            severity={severity}
-                            compact={compact}
-                        />
-                    </InternalLink>
-                ) : (
-                    <DiskStateProgressBar
-                        diskAllocatedPercent={vdiskAllocatedPercent}
-                        severity={severity}
-                        compact={compact}
-                    />
-                )}
-            </div>
-        </React.Fragment>
-    );
-};

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

@@ -1,209 +0,0 @@
-import {renderWithStore} from '../../../../utils/tests/providers';
-
-import {EVDiskState} from '../../../../types/api/vdisk';
-import {EFlag} from '../../../../types/api/enums';
-
-import {VDisk} from '../VDisk';
-
-describe('VDisk state', () => {
-    it('Should determine severity based on the highest value among VDiskState, DiskSpace and FrontQueues', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 1},
-                        VDiskState: EVDiskState.OK, // severity 1, green
-                        DiskSpace: EFlag.Yellow, // severity 3, yellow
-                        FrontQueues: EFlag.Green, // severity 1, green
-                    }}
-                />
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 2},
-                        VDiskState: EVDiskState.PDiskError, // severity 5, red
-                        DiskSpace: EFlag.Yellow, // severity 3, yellow
-                        FrontQueues: EFlag.Green, // severity 1, green
-                    }}
-                />
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 3},
-                        VDiskState: EVDiskState.OK, // severity 1, green
-                        DiskSpace: EFlag.Yellow, // severity 3, yellow
-                        FrontQueues: EFlag.Orange, // severity 4, orange
-                    }}
-                />
-            </>,
-        );
-
-        const [disk1, disk2, disk3] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_yellow\b/i);
-        expect(disk2.className).toMatch(/_red\b/i);
-        expect(disk3.className).toMatch(/_orange\b/i);
-    });
-
-    it('Should not pick the highest severity based on FrontQueues value', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 1},
-                        VDiskState: EVDiskState.OK, // severity 1, green
-                        DiskSpace: EFlag.Green, // severity 1, green
-                        FrontQueues: EFlag.Red, // severity 5, red
-                    }}
-                />
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 2},
-                        VDiskState: EVDiskState.OK, // severity 1, green
-                        DiskSpace: EFlag.Red, // severity 5, red
-                        FrontQueues: EFlag.Red, // severity 5, red
-                    }}
-                />
-            </>,
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        expect(disk1.className).not.toMatch(/_red\b/i);
-        expect(disk2.className).toMatch(/_red\b/i);
-    });
-
-    // prettier-ignore
-    it('Should display as unavailable when no VDiskState is provided', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk data={{VDiskId: {Domain: 1}}} />
-                <VDisk data={{VDiskId: {Domain: 2}, VDiskState: EVDiskState.OK}} />
-                <VDisk data={{VDiskId: {Domain: 3},                             DiskSpace: EFlag.Green}} />
-                <VDisk data={{VDiskId: {Domain: 4},                                                     FrontQueues: EFlag.Green}} />
-                <VDisk data={{VDiskId: {Domain: 5}, VDiskState: EVDiskState.OK, DiskSpace: EFlag.Green}} />
-                <VDisk data={{VDiskId: {Domain: 6}, VDiskState: EVDiskState.OK,                         FrontQueues: EFlag.Green}} />
-                <VDisk data={{VDiskId: {Domain: 7},                             DiskSpace: EFlag.Green, FrontQueues: EFlag.Green}} />
-                <VDisk data={{VDiskId: {Domain: 8}, VDiskState: EVDiskState.OK, DiskSpace: EFlag.Green, FrontQueues: EFlag.Green}} />
-            </>
-        );
-
-        const [disk1, disk2, disk3, disk4, disk5, disk6, disk7, disk8] =
-            getAllByRole('meter');
-
-        // unavailable disks display with the grey color
-        expect(disk1.className).toMatch(/_grey\b/i);
-        expect(disk2.className).not.toMatch(/_grey\b/i);
-        expect(disk3.className).toMatch(/_grey\b/i);
-        expect(disk4.className).toMatch(/_grey\b/i);
-        expect(disk5.className).not.toMatch(/_grey\b/i);
-        expect(disk6.className).not.toMatch(/_grey\b/i);
-        expect(disk7.className).toMatch(/_grey\b/i);
-        expect(disk8.className).not.toMatch(/_grey\b/i);
-    });
-
-    it('Should display as unavailable when no VDiskState is provided even if DiskSpace or FrontQueues flags are not green', () => {
-        const {getByRole} = renderWithStore(
-            <VDisk
-                data={{
-                    VDiskId: {Domain: 1},
-                    DiskSpace: EFlag.Red,
-                    FrontQueues: EFlag.Yellow,
-                }}
-            />,
-        );
-
-        const disk = getByRole('meter');
-
-        // unavailable disks display with the grey color
-        expect(disk.className).toMatch(/_grey\b/i);
-    });
-
-    it('Should display replicating VDisks in OK state with a distinct color', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 1},
-                        VDiskState: EVDiskState.OK, // severity 1, green
-                        Replicated: false,
-                    }}
-                />
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 2},
-                        VDiskState: EVDiskState.OK, // severity 1, green
-                        Replicated: true,
-                    }}
-                />
-            </>,
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_blue\b/i);
-        expect(disk2.className).not.toMatch(/_blue\b/i);
-    });
-
-    it('Should display replicating VDisks in a not-OK state with a regular color', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 1},
-                        VDiskState: EVDiskState.Initial, // severity 3, yellow
-                        Replicated: false,
-                    }}
-                />
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 2},
-                        VDiskState: EVDiskState.PDiskError, // severity 5, red
-                        Replicated: false,
-                    }}
-                />
-            </>,
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_yellow\b/i);
-        expect(disk2.className).toMatch(/_red\b/i);
-    });
-
-    it('Should always display donor VDisks with a regular color', () => {
-        const {getAllByRole} = renderWithStore(
-            <>
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 1},
-                        VDiskState: EVDiskState.OK, // severity 1, green
-                        Replicated: false, // donors are always in the not replicated state since they are leftovers
-                        DonorMode: true,
-                    }}
-                />
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 2},
-                        VDiskState: EVDiskState.Initial, // severity 3, yellow
-                        Replicated: false,
-                        DonorMode: true,
-                    }}
-                />
-                <VDisk
-                    data={{
-                        VDiskId: {Domain: 3},
-                        VDiskState: EVDiskState.PDiskError, // severity 5, red
-                        Replicated: false,
-                        DonorMode: true,
-                    }}
-                />
-            </>,
-        );
-
-        const [disk1, disk2, disk3] = getAllByRole('meter');
-
-        expect(disk1.className).not.toMatch(/_blue\b/i);
-        expect(disk1.className).toMatch(/_green\b/i);
-        expect(disk2.className).toMatch(/_yellow\b/i);
-        expect(disk3.className).toMatch(/_red\b/i);
-    });
-});