ydb-embedded-ui 21.1.0 → 22.0.0

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

@@ -1,121 +0,0 @@
-import React from 'react';
-
-import isEmpty from 'lodash/isEmpty';
-import {StringParam, useQueryParams} from 'use-query-params';
-
-import {Loader} from '../.././../components/Loader';
-import {ResponseError} from '../../../components/Errors/ResponseError';
-import {nodeApi} from '../../../store/reducers/node/node';
-import {selectNodeStructure} from '../../../store/reducers/node/selectors';
-import {cn} from '../../../utils/cn';
-import {useAutoRefreshInterval, useTypedSelector} from '../../../utils/hooks';
-
-import {PDisk} from './Pdisk';
-
-import './NodeStructure.scss';
-
-const b = cn('kv-node-structure');
-
-function generateId({type, id}: {type: 'pdisk' | 'vdisk'; id: string}) {
-    return `${type}-${id}`;
-}
-
-interface NodeStructureProps {
-    nodeId: string;
-    className?: string;
-}
-
-function NodeStructure({nodeId, className}: NodeStructureProps) {
-    const nodeStructure = useTypedSelector((state) => selectNodeStructure(state, nodeId));
-
-    const [autoRefreshInterval] = useAutoRefreshInterval();
-    const {currentData, isFetching, error} = nodeApi.useGetNodeStructureQuery(
-        {nodeId},
-        {pollingInterval: autoRefreshInterval},
-    );
-
-    const loadingStructure = isFetching && currentData === undefined;
-
-    const [{pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl}] = useQueryParams({
-        pdiskId: StringParam,
-        vdiskId: StringParam,
-    });
-
-    const scrollContainerRef = React.useRef<HTMLDivElement>(null);
-
-    const scrolled = React.useRef(false);
-
-    React.useEffect(() => {
-        if (
-            !isEmpty(nodeStructure) &&
-            !scrolled.current &&
-            scrollContainerRef.current &&
-            pdiskIdFromUrl
-        ) {
-            const element = document.getElementById(
-                generateId({type: 'pdisk', id: pdiskIdFromUrl}),
-            );
-
-            let scrollToVdisk = 0;
-
-            if (vdiskIdFromUrl) {
-                const vDisks = nodeStructure[pdiskIdFromUrl]?.vDisks;
-                const vDisk = vDisks?.find((el) => el.id === vdiskIdFromUrl);
-                const dataTable = vDisk ? document.querySelector('.data-table') : undefined;
-                const order = vDisk?.order || 0;
-
-                if (dataTable) {
-                    scrollToVdisk += (dataTable as HTMLElement).offsetTop + 40 * order;
-                }
-            }
-
-            if (element) {
-                scrollContainerRef.current.scrollTo({
-                    behavior: 'smooth',
-                    // should subtract 20 to avoid sticking the element to tabs
-                    top: scrollToVdisk ? scrollToVdisk : element.offsetTop,
-                });
-                scrolled.current = true;
-            }
-        }
-    }, [nodeStructure, pdiskIdFromUrl, vdiskIdFromUrl]);
-
-    const renderStub = () => {
-        return 'There is no information about node structure.';
-    };
-
-    const renderStructure = () => {
-        const pDisksIds = Object.keys(nodeStructure);
-        return pDisksIds.length > 0
-            ? pDisksIds.map((pDiskId) => (
-                  <PDisk
-                      data={nodeStructure[pDiskId]}
-                      key={pDiskId}
-                      id={generateId({type: 'pdisk', id: pDiskId})}
-                      unfolded={pdiskIdFromUrl === pDiskId}
-                      selectedVdiskId={vdiskIdFromUrl as string}
-                      nodeId={nodeId}
-                  />
-              ))
-            : renderStub();
-    };
-
-    const renderContent = () => {
-        if (loadingStructure) {
-            return <Loader size="m" />;
-        }
-        if (error && !currentData) {
-            return null;
-        }
-        return renderStructure();
-    };
-
-    return (
-        <div className={b()} ref={scrollContainerRef}>
-            {error ? <ResponseError error={error} className={b('error')} /> : null}
-            <div className={className}>{renderContent()}</div>
-        </div>
-    );
-}
-
-export default NodeStructure;

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

@@ -1,18 +0,0 @@
-import {cn} from '../../../utils/cn';
-
-const b = cn('kv-node-structure');
-
-interface PDiskTitleBadgeProps {
-    label?: string;
-    value: React.ReactNode;
-    className?: string;
-}
-
-export function PDiskTitleBadge({label, value, className}: PDiskTitleBadgeProps) {
-    return (
-        <span className={b('pdisk-title-item', className)}>
-            {label && <span className={b('pdisk-title-item-label')}>{label}:</span>}
-            <span className={b('pdisk-title-item-value')}>{value}</span>
-        </span>
-    );
-}

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/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;
-    },
-);