ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-
-import {INVERTED_DISKS_KEY} from '../../../utils/constants';
-import {useSetting} from '../../../utils/hooks';
-
-import './DiskStateProgressBar.scss';
-
-const b = cn('storage-disk-progress-bar');
-
-// numeric enum to allow ordinal comparison
-export enum EDiskStateSeverity {
-    Grey = 0,
-    Green = 1,
-    Blue = 2,
-    Yellow = 3,
-    Orange = 4,
-    Red = 5,
-}
-
-const severityToColor = Object.entries(EDiskStateSeverity).reduce(
-    (acc, [color, severity]) => ({...acc, [severity]: color}),
-    {} as Record<EDiskStateSeverity, keyof typeof EDiskStateSeverity>,
-);
-
-interface DiskStateProgressBarProps {
-    diskAllocatedPercent?: number;
-    severity?: EDiskStateSeverity;
-    compact?: boolean;
-}
-
-export function DiskStateProgressBar({
-    diskAllocatedPercent = -1,
-    severity,
-    compact,
-}: DiskStateProgressBarProps) {
-    const [inverted] = useSetting<boolean | undefined>(INVERTED_DISKS_KEY);
-
-    const renderAllocatedPercent = () => {
-        if (compact) {
-            return <div className={b('filled')} style={{width: '100%'}} />;
-        }
-
-        return (
-            diskAllocatedPercent >= 0 && (
-                <React.Fragment>
-                    <div
-                        className={b('filled')}
-                        style={{
-                            width: `${
-                                inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent
-                            }%`,
-                        }}
-                    />
-                    <div className={b('filled-title')}>
-                        {`${Math.round(diskAllocatedPercent)}%`}
-                    </div>
-                </React.Fragment>
-            )
-        );
-    };
-
-    const mods: Record<string, boolean | undefined> = {inverted, compact};
-
-    const color = severity !== undefined && severityToColor[severity];
-    if (color) {
-        mods[color.toLocaleLowerCase()] = true;
-    }
-
-    return (
-        <div
-            className={b(mods)}
-            role="meter"
-            aria-label="Disk allocated space"
-            aria-valuemin={0}
-            aria-valuemax={100}
-            aria-valuenow={diskAllocatedPercent}
-        >
-            {renderAllocatedPercent()}
-        </div>
-    );
-}

package/dist/containers/Storage/EmptyFilter/EmptyFilter.tsx

@@ -1,34 +0,0 @@
-import {Button} from '@gravity-ui/uikit';
-
-import {EmptyState} from '../../../components/EmptyState';
-import {Illustration} from '../../../components/Illustration';
-
-import i18n from './i18n';
-
-interface EmptyFilterProps {
-    title: string;
-    message?: string;
-    showAll?: string;
-    onShowAll?: VoidFunction;
-}
-
-export const EmptyFilter = ({
-    title,
-    message = i18n('default_message'),
-    showAll = i18n('default_button_label'),
-    onShowAll,
-}: EmptyFilterProps) => (
-    <EmptyState
-        image={<Illustration name="thumbsUp" />}
-        position="left"
-        title={title}
-        description={message}
-        actions={
-            onShowAll && [
-                <Button key="show-all" onClick={onShowAll}>
-                    {showAll}
-                </Button>,
-            ]
-        }
-    />
-);

package/dist/containers/Storage/EmptyFilter/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-storage-empty-filter';
-
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);

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

@@ -1,176 +0,0 @@
-import React, {useEffect, useState, useRef, useMemo} from 'react';
-import cn from 'bem-cn-lite';
-
-import type {TVDiskStateInfo} from '../../../types/api/vdisk';
-import {InternalLink} from '../../../components/InternalLink';
-import {Stack} from '../../../components/Stack/Stack';
-
-import routes, {createHref} from '../../../routes';
-import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
-import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {getPDiskType} from '../../../utils/pdisk';
-import {isFullVDiskData} from '../../../utils/storage';
-
-import {STRUCTURE} from '../../Node/NodePages';
-
-import {DiskStateProgressBar, EDiskStateSeverity} from '../DiskStateProgressBar';
-import {PDiskPopup} from '../PDiskPopup';
-import {VDisk} from '../VDisk';
-
-import {getUsageSeverityForPDisk, NOT_AVAILABLE_SEVERITY} from '../utils';
-
-import './PDisk.scss';
-
-const b = cn('pdisk-storage');
-
-const stateSeverity = {
-    [TPDiskState.Initial]: EDiskStateSeverity.Grey,
-    [TPDiskState.Normal]: EDiskStateSeverity.Green,
-    [TPDiskState.InitialFormatRead]: EDiskStateSeverity.Yellow,
-    [TPDiskState.InitialSysLogRead]: EDiskStateSeverity.Yellow,
-    [TPDiskState.InitialCommonLogRead]: EDiskStateSeverity.Yellow,
-    [TPDiskState.InitialFormatReadError]: EDiskStateSeverity.Red,
-    [TPDiskState.InitialSysLogReadError]: EDiskStateSeverity.Red,
-    [TPDiskState.InitialSysLogParseError]: EDiskStateSeverity.Red,
-    [TPDiskState.InitialCommonLogReadError]: EDiskStateSeverity.Red,
-    [TPDiskState.InitialCommonLogParseError]: EDiskStateSeverity.Red,
-    [TPDiskState.CommonLoggerInitError]: EDiskStateSeverity.Red,
-    [TPDiskState.OpenFileError]: EDiskStateSeverity.Red,
-    [TPDiskState.ChunkQuotaError]: EDiskStateSeverity.Red,
-    [TPDiskState.DeviceIoError]: EDiskStateSeverity.Red,
-};
-
-interface PDiskProps {
-    nodeId: number;
-    data?: TPDiskStateInfo;
-    vDisks?: TVDiskStateInfo[];
-}
-
-const isSeverityKey = (key?: TPDiskState): key is keyof typeof stateSeverity =>
-    key !== undefined && key in stateSeverity;
-
-const getStateSeverity = (pDiskState?: TPDiskState) => {
-    return isSeverityKey(pDiskState) ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
-};
-
-export const PDisk = ({nodeId, data: rawData = {}, vDisks}: PDiskProps) => {
-    // NodeId in data is required for the popup
-    const data = useMemo(() => ({...rawData, NodeId: nodeId}), [rawData, nodeId]);
-
-    const [severity, setSeverity] = useState(getStateSeverity(data.State));
-    const [isPopupVisible, setIsPopupVisible] = useState(false);
-
-    const anchor = useRef(null);
-
-    const pdiskAllocatedPercent = useMemo(() => {
-        const {AvailableSize, TotalSize} = data;
-
-        if (!AvailableSize || !TotalSize) {
-            return undefined;
-        }
-
-        return !isNaN(Number(AvailableSize)) && !isNaN(Number(TotalSize))
-            ? Math.round(((Number(TotalSize) - Number(AvailableSize)) * 100) / Number(TotalSize))
-            : undefined;
-    }, [data]);
-
-    useEffect(() => {
-        const newStateSeverity = getStateSeverity(data.State);
-        const newSpaceSeverityFlag = getUsageSeverityForPDisk(pdiskAllocatedPercent || 0);
-
-        let newSeverity: number;
-
-        if (newStateSeverity === NOT_AVAILABLE_SEVERITY || !newSpaceSeverityFlag) {
-            newSeverity = newStateSeverity;
-        } else {
-            newSeverity = Math.max(newStateSeverity, EDiskStateSeverity[newSpaceSeverityFlag]);
-        }
-
-        setSeverity(newSeverity);
-    }, [data.State, pdiskAllocatedPercent]);
-
-    const showPopup = () => {
-        setIsPopupVisible(true);
-    };
-
-    const hidePopup = () => {
-        setIsPopupVisible(false);
-    };
-
-    const renderVDisks = () => {
-        if (!vDisks?.length) {
-            return null;
-        }
-
-        return (
-            <div className={b('vdisks')}>
-                {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 = isFullVDiskData(donor);
-
-                                        return (
-                                            <VDisk
-                                                compact
-                                                data={
-                                                    isFullData ? donor : {...donor, DonorMode: true}
-                                                }
-                                                key={stringifyVdiskId(
-                                                    isFullData ? donor.VDiskId : donor,
-                                                )}
-                                            />
-                                        );
-                                    })}
-                                </Stack>
-                            ) : (
-                                <VDisk data={vdisk} compact />
-                            )}
-                        </div>
-                    );
-                })}
-            </div>
-        );
-    };
-
-    return (
-        <React.Fragment>
-            <PDiskPopup data={data} anchorRef={anchor} open={isPopupVisible} />
-            <div className={b()} ref={anchor}>
-                {renderVDisks()}
-                <InternalLink
-                    to={createHref(
-                        routes.node,
-                        {id: nodeId, activeTab: STRUCTURE},
-                        {pdiskId: data.PDiskId || ''},
-                    )}
-                    className={b('content')}
-                    onMouseEnter={showPopup}
-                    onMouseLeave={hidePopup}
-                >
-                    <DiskStateProgressBar
-                        diskAllocatedPercent={pdiskAllocatedPercent}
-                        severity={severity}
-                    />
-                    <div className={b('media-type')}>{getPDiskType(data)}</div>
-                </InternalLink>
-            </div>
-        </React.Fragment>
-    );
-};

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

@@ -1,100 +0,0 @@
-import {MemoryRouter} from 'react-router-dom';
-
-import {renderWithStore} from '../../../../utils/tests/providers';
-
-import {TPDiskState} from '../../../../types/api/pdisk';
-
-import {PDisk} from '../PDisk';
-
-describe('PDisk state', () => {
-    it('Should determine severity based on State if space severity is OK', () => {
-        const {getAllByRole} = renderWithStore(
-            <MemoryRouter>
-                <PDisk nodeId={1} data={{State: TPDiskState.Normal}} />
-                <PDisk nodeId={2} data={{State: TPDiskState.ChunkQuotaError}} />
-            </MemoryRouter>,
-        );
-
-        const [normalDisk, erroredDisk] = getAllByRole('meter');
-
-        expect(normalDisk.className).not.toBe(erroredDisk.className);
-    });
-
-    it('Should determine severity based on space utilization if state severity is OK', () => {
-        const {getAllByRole} = renderWithStore(
-            <MemoryRouter>
-                <PDisk
-                    nodeId={1}
-                    data={{State: TPDiskState.Normal, AvailableSize: '100', TotalSize: '100'}}
-                />
-                <PDisk
-                    nodeId={2}
-                    data={{State: TPDiskState.Normal, AvailableSize: '14', TotalSize: '100'}}
-                />
-                <PDisk
-                    nodeId={3}
-                    data={{State: TPDiskState.Normal, AvailableSize: '4', TotalSize: '100'}}
-                />
-            </MemoryRouter>,
-        );
-
-        const [disk1, disk2, disk3] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_green\b/i);
-        expect(disk2.className).toMatch(/_yellow\b/i);
-        expect(disk3.className).toMatch(/_red\b/i);
-    });
-
-    it('Should determine severity based on max severity of state and space utilization ', () => {
-        const {getAllByRole} = renderWithStore(
-            <MemoryRouter>
-                <PDisk
-                    nodeId={1}
-                    data={{
-                        State: TPDiskState.ChunkQuotaError,
-                        AvailableSize: '100',
-                        TotalSize: '100',
-                    }}
-                />
-                <PDisk
-                    nodeId={2}
-                    data={{State: TPDiskState.Normal, AvailableSize: '4', TotalSize: '100'}}
-                />
-            </MemoryRouter>,
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_red\b/i);
-        expect(disk2.className).toMatch(/_red\b/i);
-    });
-
-    it('Should display as unavailabe when no State is provided', () => {
-        const {getAllByRole} = renderWithStore(
-            <MemoryRouter>
-                <PDisk nodeId={1} />
-                <PDisk nodeId={2} data={{State: TPDiskState.ChunkQuotaError}} />
-            </MemoryRouter>,
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        // unavailable disks display with the grey color
-        expect(disk1.className).toMatch(/_grey\b/i);
-        expect(disk2.className).not.toMatch(/_grey\b/i);
-    });
-
-    it('Should display as unavailabe when no State is provided event if space severity is not OK', () => {
-        const {getAllByRole} = renderWithStore(
-            <MemoryRouter>
-                <PDisk nodeId={1} data={{AvailableSize: '14', TotalSize: '100'}} />
-                <PDisk nodeId={2} data={{AvailableSize: '4', TotalSize: '100'}} />
-            </MemoryRouter>,
-        );
-
-        const [disk1, disk2] = getAllByRole('meter');
-
-        expect(disk1.className).toMatch(/_grey\b/i);
-        expect(disk2.className).toMatch(/_grey\b/i);
-    });
-});

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -1,79 +0,0 @@
-import {useMemo} from 'react';
-import cn from 'bem-cn-lite';
-
-import {Popup, PopupProps} from '@gravity-ui/uikit';
-
-import type {NodesMap} from '../../../types/store/nodesList';
-
-import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
-
-import {EFlag} from '../../../types/api/enums';
-import {TPDiskStateInfo} from '../../../types/api/pdisk';
-import {getPDiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {getPDiskType} from '../../../utils/pdisk';
-import {bytesToGB} from '../../../utils/utils';
-
-import './PDiskPopup.scss';
-
-const b = cn('pdisk-storage-popup');
-
-const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
-
-export const preparePDiskData = (data: TPDiskStateInfo, nodes?: NodesMap) => {
-    const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Device} = data;
-
-    const pdiskData: InfoViewerItem[] = [
-        {label: 'PDisk', value: getPDiskId({NodeId, PDiskId}) || '-'},
-        {label: 'State', value: State || 'not available'},
-        {label: 'Type', value: getPDiskType(data) || 'unknown'},
-    ];
-
-    if (NodeId) {
-        pdiskData.push({label: 'Node Id', value: NodeId});
-    }
-
-    if (nodes && NodeId && nodes.get(NodeId)) {
-        pdiskData.push({label: 'Host', value: nodes.get(NodeId)});
-    }
-
-    if (Path) {
-        pdiskData.push({label: 'Path', value: Path});
-    }
-
-    pdiskData.push({
-        label: 'Available',
-        value: `${bytesToGB(AvailableSize)} of ${bytesToGB(TotalSize)}`,
-    });
-
-    if (Realtime && errorColors.includes(Realtime)) {
-        pdiskData.push({label: 'Realtime', value: Realtime});
-    }
-
-    if (Device && errorColors.includes(Device)) {
-        pdiskData.push({label: 'Device', value: Device});
-    }
-
-    return pdiskData;
-};
-
-interface PDiskPopupProps extends PopupProps {
-    data: TPDiskStateInfo;
-    nodes?: NodesMap;
-}
-
-export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {
-    const info = useMemo(() => preparePDiskData(data, nodes), [data, nodes]);
-
-    return (
-        <Popup
-            contentClassName={b()}
-            placement={['top', 'bottom']}
-            // bigger offset for easier switching to neighbour nodes
-            // matches the default offset for popup with arrow out of a sense of beauty
-            offset={[0, 12]}
-            {...props}
-        >
-            <InfoViewer title="PDisk" info={info} size="s" />
-        </Popup>
-    );
-};