ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -1,162 +0,0 @@
-import {useMemo} from 'react';
-import cn from 'bem-cn-lite';
-
-import {Label, 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 type {TVDiskStateInfo} from '../../../types/api/vdisk';
-import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
-import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-import {isFullVDiskData} from '../../../utils/storage';
-
-import type {UnavailableDonor} from '../utils/types';
-
-import {preparePDiskData} from '../PDiskPopup';
-
-import './VDiskPopup.scss';
-
-const b = cn('vdisk-storage-popup');
-
-const prepareUnavailableVDiskData = (data: UnavailableDonor) => {
-    const {NodeId, PDiskId, VSlotId, StoragePoolName} = data;
-
-    const vdiskData: InfoViewerItem[] = [{label: 'State', value: 'not available'}];
-
-    if (StoragePoolName) {
-        vdiskData.push({label: 'StoragePool', value: StoragePoolName});
-    }
-
-    vdiskData.push(
-        {label: 'NodeId', value: NodeId ?? '–'},
-        {label: 'PDiskId', value: PDiskId ?? '–'},
-        {label: 'VSlotId', value: VSlotId ?? '–'},
-    );
-
-    return vdiskData;
-};
-
-const prepareVDiskData = (data: TVDiskStateInfo) => {
-    const {
-        VDiskId,
-        VDiskState,
-        SatisfactionRank,
-        DiskSpace,
-        FrontQueues,
-        Replicated,
-        UnsyncedVDisks,
-        AllocatedSize,
-        ReadThroughput,
-        WriteThroughput,
-        StoragePoolName,
-    } = data;
-
-    const vdiskData: InfoViewerItem[] = [
-        {label: 'VDisk', value: stringifyVdiskId(VDiskId)},
-        {label: 'State', value: VDiskState ?? 'not available'},
-    ];
-
-    if (StoragePoolName) {
-        vdiskData.push({label: 'StoragePool', value: StoragePoolName});
-    }
-
-    if (SatisfactionRank && SatisfactionRank.FreshRank?.Flag !== EFlag.Green) {
-        vdiskData.push({
-            label: 'Fresh',
-            value: SatisfactionRank.FreshRank?.Flag,
-        });
-    }
-
-    if (SatisfactionRank && SatisfactionRank.LevelRank?.Flag !== EFlag.Green) {
-        vdiskData.push({
-            label: 'Level',
-            value: SatisfactionRank.LevelRank?.Flag,
-        });
-    }
-
-    if (SatisfactionRank && SatisfactionRank.FreshRank?.RankPercent) {
-        vdiskData.push({
-            label: 'Fresh',
-            value: SatisfactionRank.FreshRank.RankPercent,
-        });
-    }
-
-    if (SatisfactionRank && SatisfactionRank.LevelRank?.RankPercent) {
-        vdiskData.push({
-            label: 'Level',
-            value: SatisfactionRank.LevelRank.RankPercent,
-        });
-    }
-
-    if (DiskSpace && DiskSpace !== EFlag.Green) {
-        vdiskData.push({label: 'Space', value: DiskSpace});
-    }
-
-    if (FrontQueues && FrontQueues !== EFlag.Green) {
-        vdiskData.push({label: 'FrontQueues', value: FrontQueues});
-    }
-
-    if (!Replicated) {
-        vdiskData.push({label: 'Replicated', value: 'NO'});
-    }
-
-    if (UnsyncedVDisks) {
-        vdiskData.push({label: 'UnsyncVDisks', value: UnsyncedVDisks});
-    }
-
-    if (Number(AllocatedSize)) {
-        vdiskData.push({
-            label: 'Allocated',
-            value: bytesToGB(AllocatedSize),
-        });
-    }
-
-    if (Number(ReadThroughput)) {
-        vdiskData.push({label: 'Read', value: bytesToSpeed(ReadThroughput)});
-    }
-
-    if (Number(WriteThroughput)) {
-        vdiskData.push({
-            label: 'Write',
-            value: bytesToSpeed(WriteThroughput),
-        });
-    }
-
-    return vdiskData;
-};
-
-interface VDiskPopupProps extends PopupProps {
-    data: TVDiskStateInfo | UnavailableDonor;
-    nodes?: NodesMap;
-}
-
-export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
-    const isFullData = isFullVDiskData(data);
-
-    const vdiskInfo = useMemo(
-        () => (isFullData ? prepareVDiskData(data) : prepareUnavailableVDiskData(data)),
-        [data, isFullData],
-    );
-    const pdiskInfo = useMemo(
-        () => isFullData && data.PDisk && preparePDiskData(data.PDisk, nodes),
-        [data, nodes, isFullData],
-    );
-
-    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}
-        >
-            {data.DonorMode && <Label className={b('donor-label')}>Donor</Label>}
-            <InfoViewer title="VDisk" info={vdiskInfo} size="s" />
-            {pdiskInfo && <InfoViewer title="PDisk" info={pdiskInfo} size="s" />}
-        </Popup>
-    );
-};

package/dist/containers/Storage/VirtualStorage.tsx

@@ -1,112 +0,0 @@
-import {useEffect, useState} from 'react';
-import {useDispatch} from 'react-redux';
-
-import type {AdditionalNodesProps} from '../../types/additionalProps';
-import type {RenderControls, RenderErrorMessage} from '../../components/VirtualTable';
-import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types';
-import {STORAGE_TYPES, VISIBLE_ENTITIES} from '../../store/reducers/storage/constants';
-import {NodesUptimeFilterValues} from '../../utils/nodes';
-import {AccessDenied} from '../../components/Errors/403/AccessDenied';
-import {ResponseError} from '../../components/Errors/ResponseError/ResponseError';
-import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
-import {useTypedSelector} from '../../utils/hooks';
-
-import {StorageControls} from './StorageControls/StorageControls';
-import {VirtualStorageGroups} from './StorageGroups/VirtualStorageGroups';
-import {VirtualStorageNodes} from './StorageNodes/VirtualStorageNodes';
-
-interface VirtualStorageProps {
-    tenant?: string;
-    nodeId?: string;
-    parentContainer?: Element | null;
-    additionalNodesProps?: AdditionalNodesProps;
-}
-
-export const VirtualStorage = ({
-    tenant,
-    nodeId,
-    parentContainer,
-    additionalNodesProps,
-}: VirtualStorageProps) => {
-    const dispatch = useDispatch();
-
-    const [searchValue, setSearchValue] = useState('');
-    const [storageType, setStorageType] = useState<StorageType>(STORAGE_TYPES.groups);
-    const [visibleEntities, setVisibleEntities] = useState<VisibleEntities>(VISIBLE_ENTITIES.all);
-    const [nodesUptimeFilter, setNodesUptimeFilter] = useState<NodesUptimeFilterValues>(
-        NodesUptimeFilterValues.All,
-    );
-
-    const nodesMap = useTypedSelector(selectNodesMap);
-
-    useEffect(() => {
-        dispatch(getNodesList());
-    }, [dispatch]);
-
-    const handleShowAllGroups = () => {
-        setVisibleEntities(VISIBLE_ENTITIES.all);
-    };
-
-    const handleShowAllNodes = () => {
-        setVisibleEntities(VISIBLE_ENTITIES.all);
-        setNodesUptimeFilter(NodesUptimeFilterValues.All);
-    };
-
-    const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => {
-        return (
-            <StorageControls
-                searchValue={searchValue}
-                handleSearchValueChange={setSearchValue}
-                withTypeSelector={!nodeId}
-                storageType={storageType}
-                handleStorageTypeChange={setStorageType}
-                visibleEntities={visibleEntities}
-                handleVisibleEntitiesChange={setVisibleEntities}
-                nodesUptimeFilter={nodesUptimeFilter}
-                handleNodesUptimeFilterChange={setNodesUptimeFilter}
-                withGroupsUsageFilter={false}
-                entitiesCountCurrent={foundEntities}
-                entitiesCountTotal={totalEntities}
-                entitiesLoading={!inited}
-            />
-        );
-    };
-
-    const renderErrorMessage: RenderErrorMessage = (error) => {
-        if (error.status === 403) {
-            return <AccessDenied position="left" />;
-        }
-
-        return <ResponseError error={error} />;
-    };
-
-    if (storageType === STORAGE_TYPES.nodes) {
-        return (
-            <VirtualStorageNodes
-                searchValue={searchValue}
-                visibleEntities={visibleEntities}
-                nodesUptimeFilter={nodesUptimeFilter}
-                tenant={tenant}
-                additionalNodesProps={additionalNodesProps}
-                onShowAll={handleShowAllNodes}
-                parentContainer={parentContainer}
-                renderControls={renderControls}
-                renderErrorMessage={renderErrorMessage}
-            />
-        );
-    }
-
-    return (
-        <VirtualStorageGroups
-            searchValue={searchValue}
-            visibleEntities={visibleEntities}
-            tenant={tenant}
-            nodeId={nodeId}
-            nodesMap={nodesMap}
-            onShowAll={handleShowAllGroups}
-            parentContainer={parentContainer}
-            renderControls={renderControls}
-            renderErrorMessage={renderErrorMessage}
-        />
-    );
-};

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

package/dist/containers/Storage/shared.ts

@@ -1,3 +0,0 @@
-import cn from 'bem-cn-lite';
-
-export const b = cn('global-storage');

package/dist/containers/Storage/utils/constants.ts

@@ -1,3 +0,0 @@
-import {EDiskStateSeverity} from '../DiskStateProgressBar';
-
-export const NOT_AVAILABLE_SEVERITY = EDiskStateSeverity.Grey;

package/dist/containers/Storage/utils/index.ts

@@ -1,40 +0,0 @@
-import type {PreparedStorageGroup} from '../../../store/reducers/storage/types';
-import {EFlag} from '../../../types/api/enums';
-import {generateEvaluator} from '../../../utils/generateEvaluator';
-
-export * from './constants';
-
-const defaultDegradationEvaluator = generateEvaluator(1, 2, ['success', 'warning', 'danger']);
-
-const degradationEvaluators = {
-    'block-4-2': generateEvaluator(1, 2, ['success', 'warning', 'danger']),
-    'mirror-3-dc': generateEvaluator(1, 3, ['success', 'warning', 'danger']),
-};
-
-const canEvaluateErasureSpecies = (value?: string): value is keyof typeof degradationEvaluators =>
-    value !== undefined && value in degradationEvaluators;
-
-export const getDegradedSeverity = (group: PreparedStorageGroup) => {
-    const evaluate = canEvaluateErasureSpecies(group.ErasureSpecies)
-        ? degradationEvaluators[group.ErasureSpecies]
-        : defaultDegradationEvaluator;
-
-    return evaluate(group.Degraded);
-};
-
-export const getUsageSeverityForStorageGroup = generateEvaluator(80, 85, [
-    'success',
-    'warning',
-    'danger',
-]);
-export const getUsageSeverityForEntityStatus = generateEvaluator(80, 85, [
-    'Green',
-    'Yellow',
-    'Red',
-]);
-
-export const getUsageSeverityForPDisk = generateEvaluator(85, 95, [
-    EFlag.Green,
-    EFlag.Yellow,
-    EFlag.Red,
-]);

package/dist/containers/Storage/utils/types.ts

@@ -1,6 +0,0 @@
-import {TVSlotId} from '../../../types/api/vdisk';
-
-export interface UnavailableDonor extends TVSlotId {
-    DonorMode?: boolean;
-    StoragePoolName?: string;
-}

package/dist/containers/Tablet/Tablet.tsx

@@ -1,155 +0,0 @@
-import {useCallback, useEffect, useRef} from 'react';
-import {useLocation, useParams} from 'react-router';
-import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
-import {Link as ExternalLink} from '@gravity-ui/uikit';
-
-import {backend} from '../../store';
-import {getTablet, getTabletDescribe, clearTabletData} from '../../store/reducers/tablet';
-import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
-
-import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-import {DEVELOPER_UI_TITLE} from '../../utils/constants';
-import '../../services/api';
-import {parseQuery} from '../../routes';
-
-import type {EType} from '../../types/api/tablet';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
-import {ResponseError} from '../../components/Errors/ResponseError';
-import {Tag} from '../../components/Tag';
-import {Icon} from '../../components/Icon';
-import {EmptyState} from '../../components/EmptyState';
-import {Loader} from '../../components/Loader';
-
-import {TabletTable} from './TabletTable';
-import {TabletInfo} from './TabletInfo';
-import {TabletControls} from './TabletControls';
-
-import i18n from './i18n';
-
-import './Tablet.scss';
-
-export const b = cn('tablet-page');
-
-export const Tablet = () => {
-    const isFirstDataFetchRef = useRef(true);
-
-    const dispatch = useDispatch();
-    const location = useLocation();
-
-    const params = useParams<{id: string}>();
-    const {id} = params;
-
-    const {
-        data: tablet = {},
-        loading,
-        id: tabletId,
-        history = [],
-        tenantPath,
-        error,
-    } = useTypedSelector((state) => state.tablet);
-
-    const {
-        nodeId: queryNodeId,
-        tenantName: queryTenantName,
-        type: queryTabletType,
-    } = parseQuery(location);
-    const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
-    const tenantName = tenantPath || queryTenantName?.toString();
-    const type = tablet.Type || (queryTabletType?.toString() as EType | undefined);
-
-    // NOTE: should be reviewed when migrating to React 18
-    useEffect(() => {
-        return () => {
-            dispatch(clearTabletData());
-        };
-    }, [dispatch]);
-
-    useEffect(() => {
-        if (isFirstDataFetchRef.current && tablet && tablet.TenantId) {
-            dispatch(getTabletDescribe(tablet.TenantId));
-            isFirstDataFetchRef.current = false;
-        }
-    }, [dispatch, tablet]);
-
-    const fetchData = useCallback(() => {
-        dispatch(getTablet(id));
-    }, [dispatch, id]);
-
-    useAutofetcher(fetchData, [fetchData], true);
-
-    useEffect(() => {
-        dispatch(
-            setHeaderBreadcrumbs('tablet', {
-                nodeIds: nodeId ? [nodeId] : [],
-                tenantName,
-                tabletId: id,
-                tabletType: type,
-            }),
-        );
-    }, [dispatch, tenantName, id, nodeId, type]);
-
-    const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
-        return (
-            <li key={index} className={b('link', {external: true})}>
-                <ExternalLink href={`${backend}${link.path}`} target="_blank">
-                    {link.name}
-                </ExternalLink>
-            </li>
-        );
-    };
-
-    if (loading && id !== tabletId && isFirstDataFetchRef.current) {
-        return <Loader size="l" />;
-    }
-
-    if (error) {
-        return <ResponseError error={error} />;
-    }
-
-    if (!tablet || !Object.keys(tablet).length) {
-        return (
-            <div className={b('placeholder')}>
-                <EmptyState title={i18n('emptyState')} />
-            </div>
-        );
-    }
-
-    const {TabletId, Overall, Leader} = tablet;
-
-    const externalLinks = [
-        {
-            name: `${DEVELOPER_UI_TITLE} - tablet`,
-            path: `/tablets?TabletID=${TabletId}`,
-        },
-    ];
-
-    return (
-        <div className={b()}>
-            <div className={b('pane-wrapper')}>
-                <div className={b('left-pane')}>
-                    <ul className={b('links')}>{externalLinks.map(renderExternalLinks)}</ul>
-                    <div className={b('row', {header: true})}>
-                        <span className={b('title')}>{i18n('tablet.header')}</span>
-                        <EntityStatus status={Overall} name={TabletId} />
-                        <a
-                            rel="noopener noreferrer"
-                            className={b('link', {external: true})}
-                            href={`${backend}/tablets?TabletID=${TabletId}`}
-                            target="_blank"
-                        >
-                            <Icon name="external" />
-                        </a>
-                        {Leader && <Tag text="Leader" type="blue" />}
-                        <span className={b('loader')}>{loading && <Loader size="s" />}</span>
-                    </div>
-                    <TabletInfo tablet={tablet} tenantPath={tenantName} />
-                    <TabletControls tablet={tablet} fetchData={fetchData} />
-                </div>
-                <div className={b('rigth-pane')}>
-                    <TabletTable history={history} />
-                </div>
-            </div>
-        </div>
-    );
-};

package/dist/containers/Tablet/TabletControls/TabletControls.tsx

@@ -1,151 +0,0 @@
-import {useEffect, useState} from 'react';
-import {Button} from '@gravity-ui/uikit';
-
-import {ETabletState, TTabletStateInfo} from '../../../types/api/tablet';
-import {CriticalActionDialog} from '../../../components/CriticalActionDialog';
-
-import i18n from '../i18n';
-import {b} from '../Tablet';
-
-enum EVisibleDialogType {
-    'kill' = 'kill',
-    'stop' = 'stop',
-    'resume' = 'resume',
-}
-
-type VisibleDialogType = EVisibleDialogType | null;
-
-interface TabletControlsProps {
-    tablet: TTabletStateInfo;
-    fetchData: VoidFunction;
-}
-
-export const TabletControls = ({tablet, fetchData}: TabletControlsProps) => {
-    const {TabletId, HiveId} = tablet;
-
-    const [isDialogVisible, setIsDialogVisible] = useState(false);
-    const [visibleDialogType, setVisibleDialogType] = useState<VisibleDialogType>(null);
-    const [isTabletActionLoading, setIsTabletActionLoading] = useState(false);
-
-    // Enable controls after data update
-    useEffect(() => {
-        setIsTabletActionLoading(false);
-    }, [tablet]);
-
-    const makeShowDialog = (type: VisibleDialogType) => () => {
-        setIsDialogVisible(true);
-        setVisibleDialogType(type);
-    };
-
-    const showKillDialog = makeShowDialog(EVisibleDialogType.kill);
-    const showStopDialog = makeShowDialog(EVisibleDialogType.stop);
-    const showResumeDialog = makeShowDialog(EVisibleDialogType.resume);
-
-    const hideDialog = () => {
-        setIsDialogVisible(false);
-        setVisibleDialogType(null);
-    };
-
-    const _onKillClick = () => {
-        setIsTabletActionLoading(true);
-        return window.api.killTablet(TabletId);
-    };
-    const _onStopClick = () => {
-        setIsTabletActionLoading(true);
-        return window.api.stopTablet(TabletId, HiveId);
-    };
-    const _onResumeClick = () => {
-        setIsTabletActionLoading(true);
-        return window.api.resumeTablet(TabletId, HiveId);
-    };
-
-    const hasHiveId = () => {
-        return HiveId && HiveId !== '0';
-    };
-
-    const isDisabledResume =
-        tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
-
-    const isDisabledStop =
-        tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
-
-    const renderDialog = () => {
-        if (!isDialogVisible) {
-            return null;
-        }
-
-        switch (visibleDialogType) {
-            case EVisibleDialogType.kill: {
-                return (
-                    <CriticalActionDialog
-                        visible={isDialogVisible}
-                        text={i18n('dialog.kill')}
-                        onClose={hideDialog}
-                        onConfirm={_onKillClick}
-                        onConfirmActionFinish={fetchData}
-                    />
-                );
-            }
-            case EVisibleDialogType.stop: {
-                return (
-                    <CriticalActionDialog
-                        visible={isDialogVisible}
-                        text={i18n('dialog.stop')}
-                        onClose={hideDialog}
-                        onConfirm={_onStopClick}
-                        onConfirmActionFinish={fetchData}
-                    />
-                );
-            }
-            case EVisibleDialogType.resume: {
-                return (
-                    <CriticalActionDialog
-                        visible={isDialogVisible}
-                        text={i18n('dialog.resume')}
-                        onClose={hideDialog}
-                        onConfirm={_onResumeClick}
-                        onConfirmActionFinish={fetchData}
-                    />
-                );
-            }
-            default:
-                return null;
-        }
-    };
-
-    return (
-        <div className={b('controls')}>
-            <Button
-                onClick={showKillDialog}
-                view="action"
-                loading={isTabletActionLoading}
-                className={b('control')}
-            >
-                {i18n('controls.kill')}
-            </Button>
-            {hasHiveId() ? (
-                <>
-                    <Button
-                        onClick={showStopDialog}
-                        view="action"
-                        disabled={isDisabledStop}
-                        loading={!isDisabledStop && isTabletActionLoading}
-                        className={b('control')}
-                    >
-                        {i18n('controls.stop')}
-                    </Button>
-                    <Button
-                        onClick={showResumeDialog}
-                        view="action"
-                        disabled={isDisabledResume}
-                        loading={!isDisabledResume && isTabletActionLoading}
-                        className={b('control')}
-                    >
-                        {i18n('controls.resume')}
-                    </Button>
-                </>
-            ) : null}
-            {renderDialog()}
-        </div>
-    );
-};