ydb-embedded-ui 21.1.0 → 22.1.0

package/src/containers/Node/NodeStructure/Pdisk.tsx

@@ -1,274 +0,0 @@
-import React from 'react';
-
-import {ArrowUpRightFromSquare, CircleInfoFill} from '@gravity-ui/icons';
-import DataTable from '@gravity-ui/react-data-table';
-import type {Column} from '@gravity-ui/react-data-table';
-import {ArrowToggle, Button, Icon, Popover} from '@gravity-ui/uikit';
-import isEmpty from 'lodash/isEmpty';
-
-import {PDiskInfo} from '../../../components/PDiskInfo/PDiskInfo';
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import {StatusIcon} from '../../../components/StatusIcon/StatusIcon';
-import {VDiskInfo} from '../../../components/VDiskInfo/VDiskInfo';
-import type {
-    PreparedStructurePDisk,
-    PreparedStructureVDisk,
-} from '../../../store/reducers/node/types';
-import {EFlag} from '../../../types/api/enums';
-import {EVDiskState} from '../../../types/api/vdisk';
-import type {ValueOf} from '../../../types/common';
-import {valueIsDefined} from '../../../utils';
-import {cn} from '../../../utils/cn';
-import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../../utils/constants';
-import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
-import {
-    createVDiskDeveloperUILink,
-    useHasDeveloperUi,
-} from '../../../utils/developerUI/developerUI';
-import {isNumeric} from '../../../utils/utils';
-import i18n from '../i18n';
-
-import {PDiskTitleBadge} from './PDiskTitleBadge';
-
-const b = cn('kv-node-structure');
-
-interface PDiskProps {
-    data: PreparedStructurePDisk;
-    unfolded?: boolean;
-    id: string;
-    selectedVdiskId?: string;
-    nodeId: string | number;
-}
-
-enum VDiskTableColumnsIds {
-    slotId = 'VDiskSlotId',
-    VDiskState = 'VDiskState',
-    Size = 'Size',
-    Info = 'Info',
-}
-
-type VDiskTableColumnsIdsValues = ValueOf<typeof VDiskTableColumnsIds>;
-
-const vDiskTableColumnsNames: Record<VDiskTableColumnsIdsValues, string> = {
-    VDiskSlotId: 'Slot id',
-    VDiskState: 'Status',
-    Size: 'Size',
-    Info: '',
-};
-
-function getColumns({
-    pDiskId,
-    selectedVdiskId,
-    nodeId,
-    withDeveloperUILink,
-}: {
-    pDiskId: number | undefined;
-    selectedVdiskId?: string;
-    nodeId?: string | number;
-    withDeveloperUILink?: boolean;
-}) {
-    const columns: Column<PreparedStructureVDisk>[] = [
-        {
-            name: VDiskTableColumnsIds.slotId,
-            header: vDiskTableColumnsNames[VDiskTableColumnsIds.slotId],
-            width: 100,
-            render: ({row}) => {
-                const vDiskSlotId = row.VDiskSlotId;
-                let vdiskInternalViewerLink = null;
-
-                if (
-                    valueIsDefined(nodeId) &&
-                    valueIsDefined(pDiskId) &&
-                    valueIsDefined(vDiskSlotId)
-                ) {
-                    vdiskInternalViewerLink = createVDiskDeveloperUILink({
-                        nodeId,
-                        pDiskId,
-                        vDiskSlotId,
-                    });
-                }
-
-                return (
-                    <div className={b('vdisk-id', {selected: row.id === selectedVdiskId})}>
-                        <span>{vDiskSlotId}</span>
-                        {vdiskInternalViewerLink && withDeveloperUILink ? (
-                            <Button
-                                size="s"
-                                className={b('external-button', {hidden: true})}
-                                href={vdiskInternalViewerLink}
-                                target="_blank"
-                                title={i18n('vdisk.developer-ui-button-title')}
-                            >
-                                <Icon data={ArrowUpRightFromSquare} />
-                            </Button>
-                        ) : null}
-                    </div>
-                );
-            },
-            align: DataTable.LEFT,
-        },
-        {
-            name: VDiskTableColumnsIds.VDiskState,
-            header: vDiskTableColumnsNames[VDiskTableColumnsIds.VDiskState],
-            width: 70,
-            render: ({row}) => {
-                return (
-                    <StatusIcon
-                        status={row.VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red}
-                    />
-                );
-            },
-            sortAccessor: (row) => (row.VDiskState === EVDiskState.OK ? 1 : 0),
-            align: DataTable.CENTER,
-        },
-        {
-            name: VDiskTableColumnsIds.Size,
-            header: vDiskTableColumnsNames[VDiskTableColumnsIds.Size],
-            width: 170,
-            render: ({row}) => {
-                const allocated = row.AllocatedSize;
-
-                if (!isNumeric(allocated)) {
-                    return EMPTY_DATA_PLACEHOLDER;
-                }
-
-                return (
-                    <ProgressViewer
-                        value={allocated}
-                        capacity={Number(row.AllocatedSize) + Number(row.AvailableSize)}
-                        formatValues={formatStorageValuesToGb}
-                        colorizeProgress={true}
-                    />
-                );
-            },
-            sortAccessor: (row) => Number(row.AllocatedSize),
-            align: DataTable.CENTER,
-        },
-        {
-            name: VDiskTableColumnsIds.Info,
-            header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
-            width: 70,
-            render: ({row}) => {
-                return (
-                    <Popover
-                        placement={['right']}
-                        content={
-                            <VDiskInfo
-                                data={row}
-                                withTitle
-                                withVDiskPageLink
-                                className={b('vdisk-details')}
-                            />
-                        }
-                    >
-                        <Button
-                            view="flat-secondary"
-                            className={b('vdisk-details-button', {
-                                selected: row.id === selectedVdiskId,
-                            })}
-                        >
-                            <Icon data={CircleInfoFill} size={18} />
-                        </Button>
-                    </Popover>
-                );
-            },
-            sortable: false,
-        },
-    ];
-    return columns;
-}
-
-export function PDisk({
-    id,
-    data,
-    selectedVdiskId,
-    nodeId,
-    unfolded: unfoldedFromProps,
-}: PDiskProps) {
-    const hasDeveloperUi = useHasDeveloperUi();
-
-    const [unfolded, setUnfolded] = React.useState(unfoldedFromProps ?? false);
-
-    const {TotalSize = 0, AvailableSize = 0, Device, PDiskId, Type, vDisks} = data;
-
-    const total = Number(TotalSize);
-    const available = Number(AvailableSize);
-
-    const onOpenPDiskDetails = () => {
-        setUnfolded(true);
-    };
-    const onClosePDiskDetails = () => {
-        setUnfolded(false);
-    };
-
-    const renderVDisks = () => {
-        return (
-            <DataTable
-                theme="yandex-cloud"
-                data={vDisks}
-                columns={getColumns({
-                    nodeId,
-                    pDiskId: PDiskId,
-                    selectedVdiskId,
-                    withDeveloperUILink: hasDeveloperUi,
-                })}
-                settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
-                rowClassName={(row) => {
-                    return row.id === selectedVdiskId ? b('selected-vdisk') : '';
-                }}
-            />
-        );
-    };
-
-    const renderPDiskDetails = () => {
-        if (isEmpty(data)) {
-            return <div>No information about PDisk</div>;
-        }
-
-        return (
-            <div>
-                <PDiskInfo
-                    pDisk={data}
-                    nodeId={nodeId}
-                    className={b('pdisk-details')}
-                    withPDiskPageLink
-                />
-                <div className={b('vdisks-container')}>
-                    <div className={b('vdisks-header')}>VDisks</div>
-                    {renderVDisks()}
-                </div>
-            </div>
-        );
-    };
-
-    return (
-        <div className={b('pdisk')} id={id}>
-            <div className={b('pdisk-header')}>
-                <div className={b('pdisk-title-wrapper')}>
-                    <StatusIcon status={Device} />
-                    <PDiskTitleBadge
-                        label="PDiskID"
-                        value={PDiskId}
-                        className={b('pdisk-title-id')}
-                    />
-                    <PDiskTitleBadge value={Type} className={b('pdisk-title-type')} />
-                    <ProgressViewer
-                        value={total - available}
-                        capacity={total}
-                        formatValues={formatStorageValuesToGb}
-                        colorizeProgress={true}
-                        className={b('pdisk-title-size')}
-                    />
-                    <PDiskTitleBadge label="VDisks" value={vDisks.length} />
-                </div>
-                <Button
-                    onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails}
-                    view="flat-secondary"
-                >
-                    <ArrowToggle direction={unfolded ? 'top' : 'bottom'} />
-                </Button>
-            </div>
-            {unfolded && renderPDiskDetails()}
-        </div>
-    );
-}

package/src/containers/Storage/PDisk/PDiskVDisks.tsx

@@ -1,65 +0,0 @@
-import {VDisk} from '../../../components/VDisk/VDisk';
-import {cn} from '../../../utils/cn';
-import type {PreparedVDisk} from '../../../utils/disks/types';
-import type {StorageViewContext} from '../types';
-import {isVdiskActive} from '../utils';
-
-const b = cn('pdisk-storage');
-
-interface PDiskVDisksProps {
-    vDisks?: PreparedVDisk[];
-    viewContext?: StorageViewContext;
-    withIcon?: boolean;
-    delayOpen: number;
-    delayClose: number;
-    highlightedDisk?: string;
-    setHighlightedDisk?: (id?: string) => void;
-}
-
-export function PDiskVDisks({
-    vDisks,
-    viewContext,
-    withIcon,
-    delayOpen,
-    delayClose,
-    highlightedDisk,
-    setHighlightedDisk,
-}: PDiskVDisksProps) {
-    if (!vDisks?.length) {
-        return null;
-    }
-
-    return (
-        <div className={b('vdisks')}>
-            {vDisks.map((vDisk) => {
-                const vDiskId = vDisk.StringifiedId;
-                const highlighted = highlightedDisk === vDiskId;
-
-                return (
-                    <div
-                        key={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
-                            withIcon={withIcon}
-                            data={vDisk}
-                            inactive={!isVdiskActive(vDisk, viewContext)}
-                            compact
-                            delayOpen={delayOpen}
-                            delayClose={delayClose}
-                            showPopup={highlighted}
-                            onShowPopup={() => setHighlightedDisk?.(vDiskId)}
-                            onHidePopup={() => setHighlightedDisk?.(undefined)}
-                            highlighted={highlighted}
-                        />
-                    </div>
-                );
-            })}
-        </div>
-    );
-}

package/src/containers/Storage/StorageExpertModePanel/StorageExpertModePanel.tsx

@@ -1,151 +0,0 @@
-import {Flex, SegmentedRadioGroup, Text} from '@gravity-ui/uikit';
-
-import {useStorageQueryParams} from '../useStorageQueryParams';
-
-import {
-    AllLegend,
-    CompactionLegend,
-    FrontQueuesLegend,
-    PDiskDecommitLegend,
-    PDiskDeviceLegend,
-    PDiskDriveLegend,
-    PDiskMaintenanceLegend,
-    PDiskStateLegend,
-    SpaceLegend,
-    StateLegend,
-} from './components';
-import {PDisksGroupBy, VDisksGroupBy, b} from './constants';
-import type {PDisksGroupByValue, VDisksGroupByValue} from './constants';
-import i18n from './i18n';
-
-import './StorageExpertModePanel.scss';
-
-interface StorageExpertModePanelProps {
-    className?: string;
-}
-
-function renderLegend(vdisksGroupBy: VDisksGroupByValue) {
-    switch (vdisksGroupBy) {
-        case VDisksGroupBy.State:
-            return <StateLegend />;
-        case VDisksGroupBy.Space:
-            return <SpaceLegend />;
-        case VDisksGroupBy.FrontQueues:
-            return <FrontQueuesLegend />;
-        case VDisksGroupBy.Compaction:
-            return <CompactionLegend />;
-        case VDisksGroupBy.All:
-            return <AllLegend />;
-        default:
-            return null;
-    }
-}
-
-function getPDisksGroupByLabel(pdisksGroupBy: Exclude<PDisksGroupByValue, 'State'>) {
-    switch (pdisksGroupBy) {
-        case PDisksGroupBy.Space:
-            return i18n('value_pdisks-space');
-        case PDisksGroupBy.Drive:
-            return i18n('value_pdisks-drive');
-        case PDisksGroupBy.Decommit:
-            return i18n('value_pdisks-decommit');
-        case PDisksGroupBy.Maintenance:
-            return i18n('value_pdisks-maintenance');
-        case PDisksGroupBy.Device:
-            return i18n('value_pdisks-device');
-        case PDisksGroupBy.All:
-            return i18n('value_pdisks-all');
-        default:
-            return null;
-    }
-}
-
-function renderPDiskLegend(pdisksGroupBy: PDisksGroupByValue) {
-    switch (pdisksGroupBy) {
-        case PDisksGroupBy.State:
-            return <PDiskStateLegend />;
-        case PDisksGroupBy.Space:
-            return <SpaceLegend selectionScope="pdisks" />;
-        case PDisksGroupBy.Drive:
-            return <PDiskDriveLegend />;
-        case PDisksGroupBy.Decommit:
-            return <PDiskDecommitLegend />;
-        case PDisksGroupBy.Maintenance:
-            return <PDiskMaintenanceLegend />;
-        case PDisksGroupBy.Device:
-            return <PDiskDeviceLegend />;
-        case PDisksGroupBy.All:
-            return <AllLegend selectionScope="pdisks" />;
-        default:
-            return <div>{getPDisksGroupByLabel(pdisksGroupBy)}</div>;
-    }
-}
-
-export function StorageExpertModePanel({className}: StorageExpertModePanelProps) {
-    const {vdisksGroupBy, pdisksGroupBy, handleVDisksGroupByChange, handlePDisksGroupByChange} =
-        useStorageQueryParams();
-
-    return (
-        <div className={b(null, className)}>
-            <Flex gap={3} alignItems="center">
-                <Text variant="subheader-1">{i18n('label_vdisks')}</Text>
-                <SegmentedRadioGroup
-                    value={vdisksGroupBy}
-                    onUpdate={handleVDisksGroupByChange}
-                    size="s"
-                >
-                    <SegmentedRadioGroup.Option value={VDisksGroupBy.State}>
-                        {i18n('value_state')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={VDisksGroupBy.Space}>
-                        {i18n('value_space')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={VDisksGroupBy.FrontQueues}>
-                        {i18n('value_front-queues')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={VDisksGroupBy.Compaction}>
-                        {i18n('value_compaction')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={VDisksGroupBy.All}>
-                        {i18n('value_all')}
-                    </SegmentedRadioGroup.Option>
-                </SegmentedRadioGroup>
-                {renderLegend(vdisksGroupBy)}
-            </Flex>
-            <Flex gap={3} alignItems="center">
-                <Text variant="subheader-1">{i18n('label_pdisks')}</Text>
-                <SegmentedRadioGroup
-                    qa="storage-pdisks-expert-mode"
-                    value={pdisksGroupBy}
-                    onUpdate={handlePDisksGroupByChange}
-                    size="s"
-                >
-                    <SegmentedRadioGroup.Option value={PDisksGroupBy.State}>
-                        {i18n('value_pdisks-state')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={PDisksGroupBy.Space}>
-                        {i18n('value_pdisks-space')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={PDisksGroupBy.Drive}>
-                        {i18n('value_pdisks-drive')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={PDisksGroupBy.Decommit}>
-                        {i18n('value_pdisks-decommit')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={PDisksGroupBy.Maintenance}>
-                        {i18n('value_pdisks-maintenance')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={PDisksGroupBy.Device}>
-                        {i18n('value_pdisks-device')}
-                    </SegmentedRadioGroup.Option>
-                    <SegmentedRadioGroup.Option value={PDisksGroupBy.All}>
-                        {i18n('value_pdisks-all')}
-                    </SegmentedRadioGroup.Option>
-                </SegmentedRadioGroup>
-                <div data-qa="storage-pdisks-expert-mode-legend">
-                    {renderPDiskLegend(pdisksGroupBy)}
-                </div>
-            </Flex>
-        </div>
-    );
-}

package/src/store/reducers/node/selectors.ts

@@ -1,68 +0,0 @@
-import {createSelector} from '@reduxjs/toolkit';
-
-import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {prepareWhiteboardVDiskData} from '../../../utils/disks/prepareDisks';
-import type {RootState} from '../../defaultStore';
-
-import {nodeApi} from './node';
-import type {PreparedNodeStructure, PreparedStructureVDisk, RawNodeStructure} from './types';
-
-const getNodeStructureSelector = createSelector(
-    (nodeId: string) => nodeId,
-    (nodeId) => nodeApi.endpoints.getNodeStructure.select({nodeId}),
-);
-
-const selectGetNodeStructureData = createSelector(
-    (state: RootState) => state,
-    (_state: RootState, nodeId: string) => getNodeStructureSelector(nodeId),
-    (state, selectGetNodeStructure) => selectGetNodeStructure(state).data,
-);
-
-export const selectNodeStructure = createSelector(
-    (_state: RootState, nodeId: string) => Number(nodeId),
-    (state: RootState, nodeId: string) => selectGetNodeStructureData(state, nodeId),
-    (nodeId, storageInfo) => {
-        const pools = storageInfo?.StoragePools;
-        const structure: RawNodeStructure = {};
-
-        pools?.forEach((pool) => {
-            const groups = pool.Groups;
-            groups?.forEach((group) => {
-                const vDisks = group.VDisks?.filter((el) => el.NodeId === nodeId).map(
-                    prepareWhiteboardVDiskData,
-                );
-                vDisks?.forEach((vd) => {
-                    const vDiskId = stringifyVdiskId(vd.VDiskId);
-                    const pDiskId = vd.PDisk?.PDiskId;
-                    if (!structure[String(pDiskId)]) {
-                        structure[String(pDiskId)] = {vDisks: {}, ...vd.PDisk};
-                    }
-                    structure[String(pDiskId)].vDisks[vDiskId] = {
-                        ...vd,
-                        PDiskId: pDiskId,
-                        NodeId: nodeId,
-                        // VDisk doesn't have its own StoragePoolName when located inside StoragePool data
-                        StoragePoolName: pool.Name,
-                    };
-                });
-            });
-        });
-
-        const structureWithVDisksArray = Object.keys(structure).reduce<PreparedNodeStructure>(
-            (preparedStructure, el) => {
-                const vDisks = structure[el].vDisks;
-                const vDisksArray = Object.keys(vDisks).reduce<PreparedStructureVDisk[]>(
-                    (acc, key, index) => {
-                        acc.push({...vDisks[key], id: key, order: index});
-                        return acc;
-                    },
-                    [],
-                );
-                preparedStructure[el] = {...structure[el], vDisks: vDisksArray};
-                return preparedStructure;
-            },
-            {},
-        );
-        return structureWithVDisksArray;
-    },
-);