ydb-embedded-ui 4.33.0 → 5.0.0

package/dist/containers/Cluster/Cluster.tsx

@@ -1,167 +0,0 @@
-import {useEffect, useMemo, useRef} from 'react';
-import {useLocation, useRouteMatch} from 'react-router';
-import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
-import qs from 'qs';
-
-import {Tabs} from '@gravity-ui/uikit';
-
-import type {
-    AdditionalClusterProps,
-    AdditionalTenantsProps,
-    AdditionalVersionsProps,
-    AdditionalNodesProps,
-} from '../../types/additionalProps';
-import routes from '../../routes';
-
-import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
-import {getClusterInfo} from '../../store/reducers/cluster/cluster';
-import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
-import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions';
-import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-
-import {InternalLink} from '../../components/InternalLink';
-import {Tenants} from '../Tenants/Tenants';
-import {StorageWrapper} from '../Storage/StorageWrapper';
-import {NodesWrapper} from '../Nodes/NodesWrapper';
-import {Versions} from '../Versions/Versions';
-
-import {ClusterInfo} from './ClusterInfo/ClusterInfo';
-import {ClusterTab, clusterTabs, clusterTabsIds, getClusterPath} from './utils';
-
-import './Cluster.scss';
-
-const b = cn('cluster');
-
-interface ClusterProps {
-    additionalTenantsProps?: AdditionalTenantsProps;
-    additionalNodesProps?: AdditionalNodesProps;
-    additionalClusterProps?: AdditionalClusterProps;
-    additionalVersionsProps?: AdditionalVersionsProps;
-}
-
-function Cluster({
-    additionalClusterProps,
-    additionalTenantsProps,
-    additionalNodesProps,
-    additionalVersionsProps,
-}: ClusterProps) {
-    const container = useRef<HTMLDivElement>(null);
-
-    const dispatch = useDispatch();
-
-    const match = useRouteMatch<{activeTab: string}>(routes.cluster);
-    const {activeTab = clusterTabsIds.tenants} = match?.params || {};
-
-    const location = useLocation();
-    const queryParams = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-    });
-    const {clusterName} = queryParams;
-
-    const {
-        data: cluster = {},
-        loading: clusterLoading,
-        wasLoaded: clusterWasLoaded,
-        error: clusterError,
-        groupsStats,
-    } = useTypedSelector((state) => state.cluster);
-    const {
-        nodes,
-        loading: nodesLoading,
-        wasLoaded: nodesWasLoaded,
-    } = useTypedSelector((state) => state.clusterNodes);
-
-    const {Name} = cluster;
-
-    const infoLoading = (clusterLoading && !clusterWasLoaded) || (nodesLoading && !nodesWasLoaded);
-
-    useEffect(() => {
-        dispatch(getClusterNodes());
-    }, [dispatch]);
-
-    useAutofetcher(
-        () => dispatch(getClusterInfo(clusterName ? String(clusterName) : undefined)),
-        [dispatch, clusterName],
-        true,
-    );
-
-    useEffect(() => {
-        dispatch(setHeaderBreadcrumbs('cluster', {}));
-    }, [dispatch, Name]);
-
-    const versionToColor = useMemo(() => {
-        if (additionalVersionsProps?.getVersionToColorMap) {
-            return additionalVersionsProps?.getVersionToColorMap();
-        }
-        return parseVersionsToVersionToColorMap(cluster?.Versions);
-    }, [additionalVersionsProps, cluster]);
-
-    const versionsValues = useMemo(() => {
-        return parseNodesToVersionsValues(nodes, versionToColor);
-    }, [nodes, versionToColor]);
-
-    const renderTab = () => {
-        switch (activeTab) {
-            case clusterTabsIds.tenants: {
-                return <Tenants additionalTenantsProps={additionalTenantsProps} />;
-            }
-            case clusterTabsIds.nodes: {
-                return (
-                    <NodesWrapper
-                        parentContainer={container.current}
-                        additionalNodesProps={additionalNodesProps}
-                    />
-                );
-            }
-            case clusterTabsIds.storage: {
-                return (
-                    <StorageWrapper
-                        parentContainer={container.current}
-                        additionalNodesProps={additionalNodesProps}
-                    />
-                );
-            }
-            case clusterTabsIds.versions: {
-                return <Versions versionToColor={versionToColor} />;
-            }
-            default: {
-                return null;
-            }
-        }
-    };
-
-    return (
-        <div className={b()} ref={container}>
-            <ClusterInfo
-                cluster={cluster}
-                groupsStats={groupsStats}
-                versionsValues={versionsValues}
-                loading={infoLoading}
-                error={clusterError}
-                additionalClusterProps={additionalClusterProps}
-            />
-
-            <div className={b('tabs')}>
-                <Tabs
-                    size="l"
-                    allowNotSelected={true}
-                    activeTab={activeTab as string}
-                    items={clusterTabs}
-                    wrapTo={({id}, node) => {
-                        const path = getClusterPath(id as ClusterTab, queryParams);
-                        return (
-                            <InternalLink to={path} key={id}>
-                                {node}
-                            </InternalLink>
-                        );
-                    }}
-                />
-            </div>
-
-            <div>{renderTab()}</div>
-        </div>
-    );
-}
-
-export default Cluster;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -1,280 +0,0 @@
-import block from 'bem-cn-lite';
-
-import {Skeleton} from '@gravity-ui/uikit';
-
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import InfoViewer, {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
-import {Tags} from '../../../components/Tags';
-import {Tablet} from '../../../components/Tablet';
-import {ResponseError} from '../../../components/Errors/ResponseError';
-import {ExternalLinkWithIcon} from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
-import {Icon} from '../../../components/Icon/Icon';
-import {ContentWithPopup} from '../../../components/ContentWithPopup/ContentWithPopup';
-
-import type {IResponseError} from '../../../types/api/error';
-import type {AdditionalClusterProps, ClusterLink} from '../../../types/additionalProps';
-import type {VersionValue} from '../../../types/versions';
-import type {TClusterInfo} from '../../../types/api/cluster';
-import {backend, customBackend} from '../../../store';
-import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
-import {useSetting, useTypedSelector} from '../../../utils/hooks';
-import {formatBytes, getSizeWithSignificantDigits} from '../../../utils/bytesParsers';
-import {
-    CLUSTER_DEFAULT_TITLE,
-    CLUSTER_INFO_HIDDEN_KEY,
-    DEVELOPER_UI_TITLE,
-} from '../../../utils/constants';
-import type {
-    ClusterGroupsStats,
-    DiskErasureGroupsStats,
-    DiskGroupsStats,
-} from '../../../store/reducers/cluster/types';
-
-import {VersionsBar} from '../VersionsBar/VersionsBar';
-import {ClusterInfoSkeleton} from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
-import i18n from '../i18n';
-
-import {compareTablets} from './utils';
-
-import './ClusterInfo.scss';
-
-const b = block('cluster-info');
-
-interface GroupsStatsPopupContentProps {
-    stats: DiskErasureGroupsStats;
-}
-
-const GroupsStatsPopupContent = ({stats}: GroupsStatsPopupContentProps) => {
-    const {diskType, erasure, allocatedSize, availableSize} = stats;
-
-    const sizeToConvert = getSizeWithSignificantDigits(Math.max(allocatedSize, availableSize), 2);
-
-    const convertedAllocatedSize = formatBytes({value: allocatedSize, size: sizeToConvert});
-    const convertedAvailableSize = formatBytes({value: availableSize, size: sizeToConvert});
-
-    const usage = Math.round((allocatedSize / (allocatedSize + availableSize)) * 100);
-
-    const info = [
-        {
-            label: i18n('disk-type'),
-            value: diskType,
-        },
-        {
-            label: i18n('erasure'),
-            value: erasure,
-        },
-        {
-            label: i18n('allocated'),
-            value: convertedAllocatedSize,
-        },
-        {
-            label: i18n('available'),
-            value: convertedAvailableSize,
-        },
-        {
-            label: i18n('usage'),
-            value: usage + '%',
-        },
-    ];
-
-    return (
-        <InfoViewer dots={true} info={info} className={b('groups-stats-popup-content')} size="s" />
-    );
-};
-
-interface DiskGroupsStatsProps {
-    stats: DiskGroupsStats;
-}
-
-const DiskGroupsStatsBars = ({stats}: DiskGroupsStatsProps) => {
-    return (
-        <div className={b('storage-groups-stats')}>
-            {Object.values(stats).map((erasureStats) => (
-                <ContentWithPopup
-                    placement={['right']}
-                    key={erasureStats.erasure}
-                    content={<GroupsStatsPopupContent stats={erasureStats} />}
-                >
-                    <ProgressViewer
-                        className={b('groups-stats-bar')}
-                        value={erasureStats.createdGroups}
-                        capacity={erasureStats.totalGroups}
-                    />
-                </ContentWithPopup>
-            ))}
-        </div>
-    );
-};
-
-const getGroupsStatsFields = (groupsStats: ClusterGroupsStats) => {
-    return Object.keys(groupsStats).map((diskType) => {
-        return {
-            label: i18n('storage-groups', {diskType}),
-            value: <DiskGroupsStatsBars stats={groupsStats[diskType]} />,
-        };
-    });
-};
-
-const getInfo = (
-    cluster: TClusterInfo,
-    versionsValues: VersionValue[],
-    groupsStats: ClusterGroupsStats,
-    additionalInfo: InfoViewerItem[],
-    links: ClusterLink[],
-) => {
-    const info: InfoViewerItem[] = [];
-
-    if (cluster.DataCenters) {
-        info.push({
-            label: i18n('dc'),
-            value: <Tags tags={cluster.DataCenters} />,
-        });
-    }
-
-    if (cluster.SystemTablets) {
-        info.push({
-            label: i18n('tablets'),
-            value: (
-                <div className={b('system-tablets')}>
-                    {cluster.SystemTablets.sort(compareTablets).map((tablet, tabletIndex) => (
-                        <Tablet key={tabletIndex} tablet={tablet} />
-                    ))}
-                </div>
-            ),
-        });
-    }
-
-    if (cluster.Tenants) {
-        info.push({
-            label: i18n('databases'),
-            value: cluster.Tenants,
-        });
-    }
-
-    info.push(
-        {
-            label: i18n('nodes'),
-            value: <ProgressViewer value={cluster?.NodesAlive} capacity={cluster?.NodesTotal} />,
-        },
-        {
-            label: i18n('load'),
-            value: <ProgressViewer value={cluster?.LoadAverage} capacity={cluster?.NumberOfCpus} />,
-        },
-        {
-            label: i18n('storage-size'),
-            value: (
-                <ProgressViewer
-                    value={cluster?.StorageUsed}
-                    capacity={cluster?.StorageTotal}
-                    formatValues={formatStorageValues}
-                />
-            ),
-        },
-    );
-
-    if (Object.keys(groupsStats).length) {
-        info.push(...getGroupsStatsFields(groupsStats));
-    }
-
-    info.push(
-        ...additionalInfo,
-        {
-            label: i18n('links'),
-            value: (
-                <div className={b('links')}>
-                    {links.map(({title, url}) => (
-                        <ExternalLinkWithIcon key={title} title={title} url={url} />
-                    ))}
-                </div>
-            ),
-        },
-        {
-            label: i18n('versions'),
-            value: <VersionsBar versionsValues={versionsValues} />,
-        },
-    );
-
-    return info;
-};
-
-interface ClusterInfoProps {
-    cluster?: TClusterInfo;
-    versionsValues?: VersionValue[];
-    groupsStats?: ClusterGroupsStats;
-    loading?: boolean;
-    error?: IResponseError;
-    additionalClusterProps?: AdditionalClusterProps;
-}
-
-export const ClusterInfo = ({
-    cluster = {},
-    versionsValues = [],
-    groupsStats = {},
-    loading,
-    error,
-    additionalClusterProps = {},
-}: ClusterInfoProps) => {
-    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
-
-    const [clusterInfoHidden, setClusterInfoHidden] = useSetting<boolean>(CLUSTER_INFO_HIDDEN_KEY);
-
-    const togleClusterInfoVisibility = () => {
-        setClusterInfoHidden(!clusterInfoHidden);
-    };
-
-    let internalLink = backend + '/internal';
-
-    if (singleClusterMode && !customBackend) {
-        internalLink = `/internal`;
-    }
-
-    const {info = [], links = []} = additionalClusterProps;
-
-    const clusterInfo = getInfo(cluster, versionsValues, groupsStats, info, [
-        {title: DEVELOPER_UI_TITLE, url: internalLink},
-        ...links,
-    ]);
-
-    const getContent = () => {
-        if (loading) {
-            return <ClusterInfoSkeleton />;
-        }
-
-        if (error) {
-            <ResponseError error={error} className={b('error')} />;
-        }
-
-        return <InfoViewer dots={true} info={clusterInfo} />;
-    };
-
-    const getClusterTitle = () => {
-        if (loading) {
-            return <Skeleton className={b('title-skeleton')} />;
-        }
-
-        return (
-            <EntityStatus
-                size="m"
-                status={cluster?.Overall}
-                name={cluster?.Name ?? CLUSTER_DEFAULT_TITLE}
-                className={b('title')}
-            />
-        );
-    };
-
-    return (
-        <div className={b()}>
-            <div className={b('header')} onClick={togleClusterInfoVisibility}>
-                {getClusterTitle()}
-                <Icon
-                    name="chevron-down"
-                    width={24}
-                    height={24}
-                    className={b('header__expand-button', {rotate: clusterInfoHidden})}
-                />
-            </div>
-            <div className={b('info', {hidden: clusterInfoHidden})}>{getContent()}</div>
-        </div>
-    );
-};

package/dist/containers/Cluster/ClusterInfo/utils.ts

@@ -1,13 +0,0 @@
-import {TTabletStateInfo, EType} from '../../../types/api/tablet';
-
-export const compareTablets = (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => {
-    if (tablet1.Type === EType.TxAllocator) {
-        return 1;
-    }
-
-    if (tablet2.Type === EType.TxAllocator) {
-        return -1;
-    }
-
-    return 0;
-};

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.tsx

@@ -1,34 +0,0 @@
-import block from 'bem-cn-lite';
-
-import {Skeleton} from '@gravity-ui/uikit';
-
-import './ClusterInfoSkeleton.scss';
-
-const b = block('ydb-cluster-info-skeleton');
-
-const SkeletonLabel = () => (
-    <div className={b('label')}>
-        <Skeleton className={b('label__text')} />
-        <div className={b('label__dots')} />
-    </div>
-);
-
-interface ClusterInfoSkeletonProps {
-    className?: string;
-    rows?: number;
-}
-
-export const ClusterInfoSkeleton = ({rows = 8, className}: ClusterInfoSkeletonProps) => (
-    <div className={b(null, className)}>
-        {[...new Array(rows)].map((_, index) => (
-            <div className={b('row')} key={`skeleton-row-${index}`}>
-                <SkeletonLabel />
-                <Skeleton className={b('value')} />
-            </div>
-        ))}
-        <div className={b('row')} key="versions">
-            <SkeletonLabel />
-            <Skeleton className={b('versions')} />
-        </div>
-    </div>
-);

package/dist/containers/Cluster/VersionsBar/VersionsBar.tsx

@@ -1,33 +0,0 @@
-import block from 'bem-cn-lite';
-
-import {Progress} from '@gravity-ui/uikit';
-
-import type {VersionValue} from '../../../types/versions';
-
-import './VersionsBar.scss';
-
-const b = block('ydb-cluster-versions-bar');
-
-interface VersionsBarProps {
-    versionsValues?: VersionValue[];
-}
-
-export const VersionsBar = ({versionsValues = []}: VersionsBarProps) => {
-    return (
-        <div className={b()}>
-            <Progress value={100} stack={versionsValues} size="s" />
-            <div className={b('versions')}>
-                {versionsValues.map((item, index) => (
-                    <div
-                        className={b('version-title')}
-                        style={{color: item.color}}
-                        key={item.version}
-                        title={item.version}
-                    >
-                        {`${item.version}${index === versionsValues.length - 1 ? '' : ','}`}
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

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

package/dist/containers/Cluster/utils.tsx

@@ -1,34 +0,0 @@
-import type {ValueOf} from '../../types/common';
-import routes, {createHref} from '../../routes';
-
-export const clusterTabsIds = {
-    tenants: 'tenants',
-    nodes: 'nodes',
-    storage: 'storage',
-    versions: 'versions',
-} as const;
-
-export type ClusterTab = ValueOf<typeof clusterTabsIds>;
-
-const tenants = {
-    id: clusterTabsIds.tenants,
-    title: 'Databases',
-};
-const nodes = {
-    id: clusterTabsIds.nodes,
-    title: 'Nodes',
-};
-const storage = {
-    id: clusterTabsIds.storage,
-    title: 'Storage',
-};
-const versions = {
-    id: clusterTabsIds.versions,
-    title: 'Versions',
-};
-
-export const clusterTabs = [tenants, nodes, storage, versions];
-
-export const getClusterPath = (activeTab: ClusterTab = clusterTabsIds.tenants, query = {}) => {
-    return createHref(routes.cluster, {activeTab}, query);
-};

package/dist/containers/Header/Header.tsx

@@ -1,112 +0,0 @@
-import {useEffect, useMemo} from 'react';
-import {useHistory, useLocation} from 'react-router';
-import {useDispatch} from 'react-redux';
-import block from 'bem-cn-lite';
-
-import {Breadcrumbs} from '@gravity-ui/uikit';
-
-import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
-
-import {backend, customBackend} from '../../store';
-import {getClusterInfo} from '../../store/reducers/cluster/cluster';
-import {useTypedSelector} from '../../utils/hooks';
-import {DEVELOPER_UI_TITLE} from '../../utils/constants';
-import {parseQuery} from '../../routes';
-
-import {RawBreadcrumbItem, getBreadcrumbs} from './breadcrumbs';
-
-import './Header.scss';
-
-const b = block('header');
-
-const getInternalLink = (singleClusterMode: boolean) => {
-    if (singleClusterMode && !customBackend) {
-        return `/internal`;
-    }
-
-    return backend + '/internal';
-};
-
-interface HeaderProps {
-    mainPage?: RawBreadcrumbItem;
-}
-
-function Header({mainPage}: HeaderProps) {
-    const dispatch = useDispatch();
-    const history = useHistory();
-    const location = useLocation();
-
-    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
-    const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
-    const {data} = useTypedSelector((state) => state.cluster);
-
-    const queryParams = parseQuery(location);
-
-    const clusterNameFromQuery = queryParams.clusterName?.toString();
-
-    const clusterNameFinal = data?.Name || clusterNameFromQuery;
-
-    useEffect(() => {
-        dispatch(getClusterInfo(clusterNameFromQuery));
-    }, [dispatch, clusterNameFromQuery]);
-
-    const breadcrumbItems = useMemo(() => {
-        const rawBreadcrumbs: RawBreadcrumbItem[] = [];
-        let options = pageBreadcrumbsOptions;
-
-        if (mainPage) {
-            rawBreadcrumbs.push(mainPage);
-        }
-
-        if (clusterNameFinal) {
-            options = {
-                ...pageBreadcrumbsOptions,
-                clusterName: clusterNameFinal,
-            };
-        }
-
-        const breadcrumbs = getBreadcrumbs(page, options, rawBreadcrumbs, queryParams);
-
-        return breadcrumbs.map((item) => {
-            const action = () => {
-                if (item.link) {
-                    history.push(item.link);
-                }
-            };
-            return {...item, action};
-        });
-    }, [clusterNameFinal, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
-
-    const renderHeader = () => {
-        return (
-            <header className={b()}>
-                <div>
-                    <Breadcrumbs
-                        items={breadcrumbItems}
-                        lastDisplayedItemsCount={1}
-                        firstDisplayedItemsCount={1}
-                        renderItemContent={({icon, text}) => {
-                            if (!icon) {
-                                return text;
-                            }
-                            return (
-                                <span className={b('breadcrumb')}>
-                                    <div className={b('breadcrumb__icon')}>{icon}</div>
-                                    {text}
-                                </span>
-                            );
-                        }}
-                    />
-                </div>
-
-                <ExternalLinkWithIcon
-                    title={DEVELOPER_UI_TITLE}
-                    url={getInternalLink(singleClusterMode)}
-                />
-            </header>
-        );
-    };
-    return renderHeader();
-}
-
-export default Header;