ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/components/EntitiesCount/EntitiesCount.tsx

@@ -1,34 +0,0 @@
-import {Label} from '@gravity-ui/uikit';
-import i18n from './i18n';
-
-interface EntitiesCountProps {
-    current: number | string;
-    total?: number | string;
-    label?: string;
-    loading?: boolean;
-    className?: string;
-}
-
-export const EntitiesCount = ({total, current, label, loading, className}: EntitiesCountProps) => {
-    let content = '';
-
-    if (label) {
-        content += `${label}: `;
-    }
-
-    if (loading) {
-        content += '...';
-    } else {
-        content += `${current}`;
-
-        if (total && Number(total) !== Number(current)) {
-            content += ` ${i18n('of')} ${total}`;
-        }
-    }
-
-    return (
-        <Label theme="info" size="m" className={className}>
-            {content}
-        </Label>
-    );
-};

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

package/dist/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,62 +0,0 @@
-import type {ReactNode} from 'react';
-import {ErrorBoundary as ErrorBoundaryBase} from 'react-error-boundary';
-import cn from 'bem-cn-lite';
-
-import {Button, Disclosure} from '@gravity-ui/uikit';
-
-import {registerError} from '../../utils/registerError';
-import {Illustration} from '../Illustration';
-import i18n from './i18n';
-import './ErrorBoundary.scss';
-
-const b = cn('ydb-error-boundary');
-
-interface ErrorBoundaryProps {
-    children?: ReactNode;
-    useRetry?: boolean;
-    onReportProblem?: (error?: Error) => void;
-}
-
-export const ErrorBoundary = ({children, useRetry = true, onReportProblem}: ErrorBoundaryProps) => {
-    return (
-        <ErrorBoundaryBase
-            onError={(error, info) => {
-                registerError(error, info.componentStack, 'error-boundary');
-            }}
-            fallbackRender={({error, resetErrorBoundary}) => {
-                return (
-                    <div className={b(null)}>
-                        <Illustration name="error" className={b('illustration')} />
-                        <div className={b('content')}>
-                            <h2 className={b('error-title')}>{i18n('error-title')}</h2>
-                            <div className={b('error-description')}>
-                                {i18n('error-description')}
-                            </div>
-                            <Disclosure
-                                summary={i18n('show-details')}
-                                className={b('show-details')}
-                                size="m"
-                            >
-                                <pre className={b('error-details')}>{error.stack}</pre>
-                            </Disclosure>
-                            <div className={b('actions')}>
-                                {useRetry && (
-                                    <Button view="outlined" onClick={resetErrorBoundary}>
-                                        {i18n('button-reset')}
-                                    </Button>
-                                )}
-                                {onReportProblem && (
-                                    <Button view="outlined" onClick={() => onReportProblem(error)}>
-                                        {i18n('report-problem')}
-                                    </Button>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                );
-            }}
-        >
-            {children}
-        </ErrorBoundaryBase>
-    );
-};

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

package/dist/components/Errors/403/AccessDenied.tsx

@@ -1,20 +0,0 @@
-import {EmptyState, type EmptyStateProps} from '../../EmptyState';
-import {Illustration} from '../../Illustration';
-
-import i18n from '../i18n';
-
-interface AccessDeniedProps extends Omit<EmptyStateProps, 'image' | 'title' | 'description'> {
-    title?: string;
-    description?: string;
-}
-
-export const AccessDenied = ({title, description, ...restProps}: AccessDeniedProps) => {
-    return (
-        <EmptyState
-            image={<Illustration name="403" />}
-            title={title || i18n('403.title')}
-            description={description || i18n('403.description')}
-            {...restProps}
-        />
-    );
-};

package/dist/components/Errors/ResponseError/ResponseError.tsx

@@ -1,17 +0,0 @@
-import type {IResponseError} from '../../../types/api/error';
-
-import i18n from '../i18n';
-
-interface ResponseErrorProps {
-    error?: IResponseError;
-    className?: string;
-    defaultMessage?: string;
-}
-
-export const ResponseError = ({
-    error,
-    className,
-    defaultMessage = i18n('responseError.defaultMessage'),
-}: ResponseErrorProps) => {
-    return <div className={`error ${className}`}>{error?.statusText || defaultMessage}</div>;
-};

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

package/dist/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx

@@ -1,24 +0,0 @@
-import block from 'bem-cn-lite';
-
-import {Link} from '@gravity-ui/uikit';
-
-import {Icon} from '../Icon/Icon';
-
-import './ExternalLinkWithIcon.scss';
-
-const b = block('ydb-external-link-with-icon');
-
-interface ExternalLinkWithIconProps {
-    title: string;
-    url: string;
-}
-
-export const ExternalLinkWithIcon = ({title, url}: ExternalLinkWithIconProps) => {
-    return (
-        <Link href={url} target="_blank" className={b()}>
-            {title}
-            {'\u00a0'}
-            <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
-        </Link>
-    );
-};

package/dist/components/FormattedBytes/FormattedBytes.tsx

@@ -1,10 +0,0 @@
-import {FormatBytesArgs, formatBytes} from '../../utils/bytesParsers';
-
-type FormattedBytesProps = FormatBytesArgs;
-
-export const FormattedBytes = ({value, withSpeedLabel, ...params}: FormattedBytesProps) => {
-    const formatted = formatBytes({value, withSpeedLabel, ...params});
-    const bytes = formatBytes({value, withSpeedLabel, size: 'b'});
-
-    return <span title={bytes}>{formatted}</span>;
-};

package/dist/components/FormattedBytes/utils.tsx

@@ -1,13 +0,0 @@
-import type {FormatBytesArgs} from '../../utils/bytesParsers';
-import {FormattedBytes} from './FormattedBytes';
-
-export const toFormattedSize = (
-    value: number | string | undefined,
-    params?: Omit<FormatBytesArgs, 'value'>,
-) => {
-    if (!value) {
-        return null;
-    }
-
-    return <FormattedBytes value={value} significantDigits={2} {...params} />;
-};

package/dist/components/FullNodeViewer/FullNodeViewer.tsx

@@ -1,82 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import type {TSystemStateInfo} from '../../types/api/nodes';
-
-import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
-import {calcUptime} from '../../utils/dataFormatters/dataFormatters';
-
-import InfoViewer, {type InfoViewerItem} from '../InfoViewer/InfoViewer';
-import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
-import {PoolUsage} from '../PoolUsage/PoolUsage';
-
-import './FullNodeViewer.scss';
-
-const b = cn('full-node-viewer');
-
-interface FullNodeViewerProps {
-    node: TSystemStateInfo | undefined;
-    className?: string;
-}
-
-export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
-    const endpointsInfo = node?.Endpoints?.map(({Name, Address}) => ({
-        label: Name,
-        value: Address,
-    }));
-
-    const commonInfo: InfoViewerItem[] = [];
-
-    // Do not add DB field for static nodes (they have no Tenants)
-    if (node?.Tenants?.length) {
-        commonInfo.push({label: 'Database', value: node.Tenants[0]});
-    }
-
-    commonInfo.push(
-        {label: 'Version', value: node?.Version},
-        {label: 'Uptime', value: calcUptime(node?.StartTime)},
-        {label: 'DC', value: node?.DataCenterDescription},
-        {label: 'Rack', value: node?.Rack},
-    );
-
-    const averageInfo = node?.LoadAverage?.map((load, loadIndex) => ({
-        label: LOAD_AVERAGE_TIME_INTERVALS[loadIndex],
-        value: (
-            <ProgressViewer value={load} percents={true} colorizeProgress={true} capacity={100} />
-        ),
-    }));
-
-    return (
-        <div className={`${b()} ${className}`}>
-            {node ? (
-                <div className={b('common-info')}>
-                    <div>
-                        <div className={b('section-title')}>Pools</div>
-                        <div className={b('section', {pools: true})}>
-                            {node?.PoolStats?.map((pool, poolIndex) => (
-                                <PoolUsage key={poolIndex} data={pool} />
-                            ))}
-                        </div>
-                    </div>
-
-                    {endpointsInfo && endpointsInfo.length && (
-                        <InfoViewer
-                            title="Endpoints"
-                            className={b('section')}
-                            info={endpointsInfo}
-                        />
-                    )}
-
-                    <InfoViewer title="Common info" className={b('section')} info={commonInfo} />
-
-                    <InfoViewer
-                        title="Load average"
-                        className={b('section', {average: true})}
-                        info={averageInfo}
-                    />
-                </div>
-            ) : (
-                <div className="error">no data</div>
-            )}
-        </div>
-    );
-};

package/dist/components/Fullscreen/Fullscreen.tsx

@@ -1,81 +0,0 @@
-import React, {useEffect} from 'react';
-import ReactDOM from 'react-dom';
-
-import {Button} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-
-import {useDispatch} from 'react-redux';
-import {disableFullscreen} from '../../store/reducers/fullscreen';
-import {Icon} from '../Icon';
-
-import './Fullscreen.scss';
-
-const b = cn('kv-fullscreen');
-
-interface FullscreenProps {
-    children: React.ReactNode;
-    className?: string;
-}
-
-interface FullscreenWrapperProps {
-    children: React.ReactNode;
-}
-
-class FullscreenWrapper extends React.Component<FullscreenWrapperProps> {
-    constructor(props: FullscreenWrapperProps) {
-        super(props);
-        this.el = document.createElement('div');
-    }
-
-    componentDidMount() {
-        this.modalRoot = document.getElementById('fullscreen-root');
-        if (this.modalRoot) {
-            this.modalRoot.appendChild(this.el);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.modalRoot) {
-            this.modalRoot.removeChild(this.el);
-        }
-    }
-
-    render() {
-        return ReactDOM.createPortal(this.props.children, this.el);
-    }
-
-    modalRoot: null | HTMLElement = null;
-    private el: HTMLElement;
-}
-
-function Fullscreen(props: FullscreenProps) {
-    const dispatch = useDispatch();
-    const escFunction = (event: KeyboardEvent) => {
-        if (event.key === 'Escape') {
-            onDisableFullScreen();
-        }
-    };
-    useEffect(() => {
-        document.addEventListener('keydown', escFunction, false);
-        return () => {
-            document.removeEventListener('keydown', escFunction, false);
-        };
-    }, []);
-
-    const onDisableFullScreen = () => {
-        dispatch(disableFullscreen());
-    };
-
-    return (
-        <FullscreenWrapper>
-            <div className={b(null, props.className)}>
-                <Button onClick={onDisableFullScreen} view="raised" className={b('close-button')}>
-                    <Icon name="disableFullscreen" viewBox={'0 0 16 16 '} width={16} height={16} />
-                </Button>
-                {props.children}
-            </div>
-        </FullscreenWrapper>
-    );
-}
-
-export default Fullscreen;

package/dist/components/Icon/Icon.tsx

@@ -1,35 +0,0 @@
-import {Icon as UiKitIcon} from '@gravity-ui/uikit';
-
-interface IconProps {
-    name: string;
-    height?: number | string;
-    width?: number | string;
-    viewBox?: string;
-    className?: string;
-    onClick?: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
-}
-
-export const Icon = ({
-    name,
-    height = 16,
-    width = 16,
-    viewBox = '0 0 16 16',
-    className,
-    onClick,
-}: IconProps) => {
-    return (
-        <UiKitIcon
-            // @ts-expect-error
-            // Both url and id strings are required in this uikit component.
-            // However, if no url provided, component uses id, which is what we need.
-            // If it is fixed in uikit it could be safely removed
-            data={{id: `icon.${name}`, viewBox}}
-            height={height}
-            width={width}
-            className={className}
-            onClick={onClick}
-        />
-    );
-};
-
-Icon.displayName = 'Icon';

package/dist/components/Illustration/Illustration.tsx

@@ -1,44 +0,0 @@
-import {ImgHTMLAttributes, useEffect, useState} from 'react';
-import cn from 'bem-cn-lite';
-import {useThemeValue} from '@gravity-ui/uikit';
-
-export interface IllustrationProps extends ImgHTMLAttributes<HTMLImageElement> {
-    name: string;
-    className?: string;
-}
-
-type IllustrationStore = Record<string, Record<string, () => Promise<{default: any}>>>;
-
-const store: IllustrationStore = {
-    light: {
-        403: () => import('../../assets/illustrations/light/403.svg'),
-        thumbsUp: () => import('../../assets/illustrations/light/thumbsUp.svg'),
-        error: () => import('../../assets/illustrations/light/error.svg'),
-    },
-    dark: {
-        403: () => import('../../assets/illustrations/dark/403.svg'),
-        thumbsUp: () => import('../../assets/illustrations/dark/thumbsUp.svg'),
-        error: () => import('../../assets/illustrations/dark/error.svg'),
-    },
-};
-
-const b = cn('kv-illustration');
-
-export const Illustration = ({name, className, ...props}: IllustrationProps) => {
-    const theme = useThemeValue();
-    const [src, setSrc] = useState('');
-    const srcGetter = store[theme] && store[theme][name];
-
-    useEffect(() => {
-        if (typeof srcGetter === 'function') {
-            srcGetter()
-                .then((svg) => setSrc(svg.default))
-                .catch((e) => {
-                    console.error(e);
-                    setSrc('');
-                });
-        }
-    }, [srcGetter]);
-
-    return <img alt={name} src={src} className={b(null, className)} {...props} />;
-};

package/dist/components/InfoViewer/InfoViewer.tsx

@@ -1,61 +0,0 @@
-import type {ReactNode} from 'react';
-import cn from 'bem-cn-lite';
-
-import './InfoViewer.scss';
-
-export interface InfoViewerItem {
-    label: ReactNode;
-    value: ReactNode;
-}
-
-interface InfoViewerProps {
-    title?: string;
-    info?: InfoViewerItem[];
-    dots?: boolean;
-    size?: 's';
-    className?: string;
-    multilineLabels?: boolean;
-    renderEmptyState?: (props?: Pick<InfoViewerProps, 'title' | 'size'>) => ReactNode;
-}
-
-const b = cn('info-viewer');
-
-const InfoViewer = ({
-    title,
-    info,
-    dots = true,
-    size,
-    className,
-    multilineLabels,
-    renderEmptyState,
-}: InfoViewerProps) => {
-    if ((!info || !info.length) && renderEmptyState) {
-        return <>{renderEmptyState({title, size})}</>;
-    }
-
-    return (
-        <div className={b({size}, className)}>
-            {title && <div className={b('title')}>{title}</div>}
-            {info && info.length > 0 ? (
-                <div className={b('items')}>
-                    {info.map((data, infoIndex) => (
-                        <div className={b('row')} key={infoIndex}>
-                            <div className={b('label')}>
-                                <div className={b('label-text', {multiline: multilineLabels})}>
-                                    {data.label}
-                                </div>
-                                {dots && <div className={b('dots')} />}
-                            </div>
-
-                            <div className={b('value')}>{data.value}</div>
-                        </div>
-                    ))}
-                </div>
-            ) : (
-                <>No {title} data</>
-            )}
-        </div>
-    );
-};
-
-export default InfoViewer;

package/dist/components/InfoViewer/formatters/cdcStream.ts

@@ -1,10 +0,0 @@
-import {TCdcStreamDescription} from '../../../types/api/schema';
-
-import {createInfoFormatter} from '../utils';
-
-export const formatCdcStreamItem = createInfoFormatter<TCdcStreamDescription>({
-    values: {
-        Mode: (value) => value?.substring('ECdcStreamMode'.length),
-        Format: (value) => value?.substring('ECdcStreamFormat'.length),
-    },
-});

package/dist/components/InfoViewer/formatters/common.ts

@@ -1,17 +0,0 @@
-import type {TDirEntry} from '../../../types/api/schema';
-import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
-
-import {createInfoFormatter} from '../utils';
-
-import i18n from '../i18n';
-
-export const formatCommonItem = createInfoFormatter<TDirEntry>({
-    values: {
-        PathType: (value) => value?.substring('EPathType'.length),
-        CreateStep: formatDateTime,
-    },
-    labels: {
-        PathType: i18n('common.type'),
-        CreateStep: i18n('common.created'),
-    },
-});

package/dist/components/InfoViewer/formatters/pqGroup.ts

@@ -1,51 +0,0 @@
-import {
-    EMeteringMode,
-    TPersQueueGroupDescription,
-    TPQPartitionConfig,
-    TPQTabletConfig,
-} from '../../../types/api/schema';
-import {formatBps, formatBytes, formatNumber} from '../../../utils/dataFormatters/dataFormatters';
-import {HOUR_IN_SECONDS} from '../../../utils/constants';
-
-import {createInfoFormatter} from '../utils';
-
-const EMeteringModeToNames: Record<EMeteringMode, string> = {
-    [EMeteringMode.METERING_MODE_REQUEST_UNITS]: 'request-units',
-    [EMeteringMode.METERING_MODE_RESERVED_CAPACITY]: 'reserved-capacity',
-};
-
-export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>({
-    values: {
-        Partitions: (value) => formatNumber(value?.length || 0),
-        PQTabletConfig: (value) => {
-            const hours =
-                Math.round((value.PartitionConfig.LifetimeSeconds / HOUR_IN_SECONDS) * 100) / 100;
-            return `${formatNumber(hours)} hours`;
-        },
-    },
-    labels: {
-        Partitions: 'Partitions count',
-        PQTabletConfig: 'Retention',
-    },
-});
-
-export const formatPQTabletConfig = createInfoFormatter<TPQTabletConfig>({
-    values: {
-        Codecs: (value) => value && Object.values(value.Codecs || {}).join(', '),
-        MeteringMode: (value) => value && EMeteringModeToNames[value],
-    },
-    labels: {
-        MeteringMode: 'Metering mode',
-    },
-});
-
-export const formatPQPartitionConfig = createInfoFormatter<TPQPartitionConfig>({
-    values: {
-        StorageLimitBytes: formatBytes,
-        WriteSpeedInBytesPerSecond: formatBps,
-    },
-    labels: {
-        StorageLimitBytes: 'Retention storage',
-        WriteSpeedInBytesPerSecond: 'Partitions write speed',
-    },
-});

package/dist/components/InfoViewer/formatters/schema.ts

@@ -1,18 +0,0 @@
-import type {TIndexDescription} from '../../../types/api/schema';
-import {toFormattedSize} from '../../FormattedBytes/utils';
-
-import {createInfoFormatter} from '../utils';
-
-export const formatTableIndexItem = createInfoFormatter<TIndexDescription>({
-    values: {
-        Type: (value) => value?.substring(10), // trims EIndexType prefix
-        State: (value) => value?.substring(11), // trims EIndexState prefix
-        KeyColumnNames: (value) => value?.join(', '),
-        DataColumnNames: (value) => value?.join(', '),
-        DataSize: toFormattedSize,
-    },
-    labels: {
-        KeyColumnNames: 'Columns',
-        DataColumnNames: 'Includes',
-    },
-});