ydb-embedded-ui 4.5.2 → 4.7.0

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

@@ -1,39 +1,27 @@
-import {useCallback, useEffect, useMemo} from 'react';
-import {useDispatch} from 'react-redux';
-import {useLocation} from 'react-router';
 import block from 'bem-cn-lite';
-import qs from 'qs';
+
+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 {Loader} from '../../../components/Loader';
 import {ResponseError} from '../../../components/Errors/ResponseError';
 import {ExternalLinkWithIcon} from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
+import {IconWrapper as Icon} from '../../../components/Icon/Icon';
 
-import type {
-    AdditionalClusterProps,
-    AdditionalVersionsProps,
-    ClusterLink,
-} from '../../../types/additionalProps';
+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 {getClusterNodes} from '../../../store/reducers/clusterNodes/clusterNodes';
-import {getClusterInfo} from '../../../store/reducers/cluster/cluster';
 import {backend, customBackend} from '../../../store';
-import {setHeader} from '../../../store/reducers/header';
 import {formatStorageValues} from '../../../utils';
-import {useAutofetcher, useTypedSelector} from '../../../utils/hooks';
-import {
-    parseVersionsToVersionToColorMap,
-    parseNodesToVersionsValues,
-} from '../../../utils/versions';
-import routes, {CLUSTER_PAGES, createHref} from '../../../routes';
-
-import {Versions} from '../../Versions/Versions';
+import {useSetting, useTypedSelector} from '../../../utils/hooks';
+import {CLUSTER_INFO_HIDDEN_KEY, DEVELOPER_UI} from '../../../utils/constants';
+
 import {VersionsBar} from '../VersionsBar/VersionsBar';
+import {ClusterInfoSkeleton} from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
 
 import {compareTablets} from './utils';
 
@@ -122,74 +110,27 @@ const getInfo = (
 };
 
 interface ClusterInfoProps {
-    clusterTitle?: string;
+    cluster?: TClusterInfo;
+    versionsValues?: VersionValue[];
+    loading?: boolean;
+    error?: IResponseError;
     additionalClusterProps?: AdditionalClusterProps;
-    additionalVersionsProps?: AdditionalVersionsProps;
 }
 
 export const ClusterInfo = ({
-    clusterTitle,
+    cluster = {},
+    versionsValues = [],
+    loading,
+    error,
     additionalClusterProps = {},
-    additionalVersionsProps = {},
 }: ClusterInfoProps) => {
-    const dispatch = useDispatch();
-    const location = useLocation();
-
-    const queryParams = qs.parse(location.search, {
-        ignoreQueryPrefix: true,
-    });
-    const {clusterName} = queryParams;
-
-    const {
-        data: cluster = {},
-        loading,
-        wasLoaded,
-        error,
-    } = useTypedSelector((state) => state.cluster);
-    const {
-        nodes,
-        loading: nodesLoading,
-        wasLoaded: nodesWasLoaded,
-        error: nodesError,
-    } = useTypedSelector((state) => state.clusterNodes);
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
 
-    useEffect(() => {
-        dispatch(
-            setHeader([
-                {
-                    text: CLUSTER_PAGES.cluster.title,
-                    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.cluster.id}),
-                },
-            ]),
-        );
-    }, [dispatch]);
-
-    const fetchData = useCallback(() => {
-        dispatch(getClusterInfo(clusterName ? String(clusterName) : undefined));
-        dispatch(getClusterNodes());
-    }, [dispatch, clusterName]);
-
-    useAutofetcher(fetchData, [fetchData], true);
-
-    const versionToColor = useMemo(() => {
-        if (additionalVersionsProps?.getVersionToColorMap) {
-            return additionalVersionsProps.getVersionToColorMap();
-        }
-        return parseVersionsToVersionToColorMap(cluster.Versions);
-    }, [additionalVersionsProps, cluster]);
-
-    const versionsValues = useMemo(() => {
-        return parseNodesToVersionsValues(nodes, versionToColor);
-    }, [nodes, versionToColor]);
-
-    if ((loading && !wasLoaded) || (nodesLoading && !nodesWasLoaded)) {
-        return <Loader size="l" />;
-    }
+    const [clusterInfoHidden, setClusterInfoHidden] = useSetting<boolean>(CLUSTER_INFO_HIDDEN_KEY);
 
-    if (error || nodesError) {
-        return <ResponseError error={error || nodesError} />;
-    }
+    const togleClusterInfoVisibility = () => {
+        setClusterInfoHidden(!clusterInfoHidden);
+    };
 
     let internalLink = backend + '/internal';
 
@@ -200,24 +141,49 @@ export const ClusterInfo = ({
     const {info = [], links = []} = additionalClusterProps;
 
     const clusterInfo = getInfo(cluster, versionsValues, info, [
-        {title: 'Internal Viewer', url: internalLink},
+        {title: DEVELOPER_UI, 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 ?? 'Unknown cluster'}
+                className={b('title')}
+            />
+        );
+    };
+
     return (
         <div className={b()}>
-            <div className={b('header')}>
-                <div className={b('title')}>
-                    <EntityStatus
-                        size="m"
-                        status={cluster.Overall}
-                        name={clusterTitle ?? cluster.Name ?? 'Unknown cluster'}
-                    />
-                </div>
-                <InfoViewer dots={true} info={clusterInfo} />
+            <div className={b('header')} onClick={togleClusterInfoVisibility}>
+                {getClusterTitle()}
+                <Icon
+                    name="chevron-down"
+                    width={24}
+                    height={24}
+                    className={b('header__expand-button', {rotate: clusterInfoHidden})}
+                />
             </div>
-
-            <Versions nodes={nodes} versionToColor={versionToColor} />
+            <div className={b('info', {hidden: clusterInfoHidden})}>{getContent()}</div>
         </div>
     );
 };

package/dist/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.scss

@@ -0,0 +1,48 @@
+.ydb-cluster-info-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    margin-top: 5px;
+
+    &__row {
+        display: flex;
+        align-items: flex-start;
+
+        min-height: var(--yc-text-body-2-font-size);
+
+        .yc-skeleton {
+            min-height: var(--yc-text-body-2-font-size);
+        }
+    }
+
+    &__label {
+        display: flex;
+        flex: 0 1 auto;
+        align-items: baseline;
+
+        width: 200px;
+
+        &__text {
+            width: 100px;
+        }
+
+        &__dots {
+            width: 100px;
+            margin: 0 2px;
+
+            border-bottom: 1px dotted var(--yc-color-text-secondary);
+        }
+    }
+
+    &__value {
+        min-width: 200px;
+        max-width: 20%;
+    }
+
+    &__versions {
+        min-width: 400px;
+        max-width: 40%;
+        height: 36px;
+    }
+}

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

@@ -0,0 +1,34 @@
+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 = 6, 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/utils.tsx

@@ -0,0 +1,45 @@
+import {Icon} from '@gravity-ui/uikit';
+import cubes3Icon from '@gravity-ui/icons/svgs/cubes-3.svg';
+import databasesIcon from '@gravity-ui/icons/svgs/databases.svg';
+import hardDriveIcon from '@gravity-ui/icons/svgs/hard-drive.svg';
+
+import versionsIcon from '../../assets/icons/versions.svg';
+
+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',
+    icon: <Icon data={databasesIcon} />,
+};
+const nodes = {
+    id: clusterTabsIds.nodes,
+    title: 'Nodes',
+    icon: <Icon data={cubes3Icon} />,
+};
+const storage = {
+    id: clusterTabsIds.storage,
+    title: 'Storage',
+    icon: <Icon data={hardDriveIcon} />,
+};
+const versions = {
+    id: clusterTabsIds.versions,
+    title: 'Versions',
+    icon: <Icon data={versionsIcon} />,
+};
+
+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.scss

@@ -14,27 +14,12 @@
 
     @include body2-typography;
 
-    &__cluster-info-title {
-        font-size: var(--yc-text-body-1-font-size);
-        text-transform: uppercase;
-
-        color: var(--yc-color-text-secondary);
-    }
-
-    &__cluster-info-name {
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 500;
-    }
-
-    &__cluster-name-wrapper {
+    &__breadcrumb {
         display: flex;
         align-items: center;
 
-        height: 100%;
-        gap: 5px;
-    }
-
-    &__divider {
-        height: 80%;
+        &__icon {
+            margin-right: 3px;
+        }
     }
 }

package/dist/containers/Header/Header.tsx

@@ -1,66 +1,83 @@
-import React, {useEffect} from 'react';
+import {useEffect, useMemo} from 'react';
+import {useHistory, useLocation} from 'react-router';
 import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
-import {useHistory} from 'react-router';
-import {Breadcrumbs, BreadcrumbsItem} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
+
+import {Breadcrumbs, Icon} from '@gravity-ui/uikit';
 
-import Divider from '../../components/Divider/Divider';
 import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
 
 import {backend, customBackend} from '../../store';
-import {getHostInfo} from '../../store/reducers/host';
-import {HeaderItemType} from '../../store/reducers/header';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {useTypedSelector} from '../../utils/hooks';
+import {DEVELOPER_UI} from '../../utils/constants';
+import {parseQuery} from '../../routes';
+
+import {RawBreadcrumbItem, getBreadcrumbs} from './breadcrumbs';
 
 import './Header.scss';
 
-const b = cn('header');
+const b = block('header');
 
-function ClusterName({name}: {name: string}) {
-    return (
-        <div className={b('cluster-info')}>
-            <div className={b('cluster-info-title')}>cluster</div>
-            <div className={b('cluster-info-name')}>{name}</div>
-        </div>
-    );
-}
+const getInternalLink = (singleClusterMode: boolean) => {
+    if (singleClusterMode && !customBackend) {
+        return `/internal`;
+    }
+
+    return backend + '/internal';
+};
 
 interface HeaderProps {
-    clusterName: string;
+    mainPage?: RawBreadcrumbItem;
 }
 
-function Header({clusterName}: HeaderProps) {
+function Header({mainPage}: HeaderProps) {
     const dispatch = useDispatch();
+    const history = useHistory();
+    const location = useLocation();
 
-    const {singleClusterMode, header}: {singleClusterMode: boolean; header: HeaderItemType[]} =
-        useTypedSelector((state) => state);
-    const {data: host} = useTypedSelector((state) => state.host);
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+    const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
+    const {data} = useTypedSelector((state) => state.cluster);
 
-    const history = useHistory();
+    const queryParams = parseQuery(location);
+
+    const clusterNameFromQuery = queryParams.clusterName?.toString();
+
+    const clusterNameFinal = data?.Name || clusterNameFromQuery;
 
     useEffect(() => {
-        dispatch(getHostInfo());
-    }, [dispatch]);
+        dispatch(getClusterInfo(clusterNameFromQuery));
+    }, [dispatch, clusterNameFromQuery]);
 
-    const renderHeader = () => {
-        const clusterNameFinal = singleClusterMode ? host?.ClusterName : clusterName;
+    const breadcrumbItems = useMemo(() => {
+        const rawBreadcrumbs: RawBreadcrumbItem[] = [];
+        let options = pageBreadcrumbsOptions;
 
-        let link = backend + '/internal';
+        if (mainPage) {
+            rawBreadcrumbs.push(mainPage);
+        }
 
-        if (singleClusterMode && !customBackend) {
-            link = `/internal`;
+        if (clusterNameFinal) {
+            options = {
+                ...pageBreadcrumbsOptions,
+                clusterName: clusterNameFinal,
+            };
         }
 
-        const breadcrumbItems = header.reduce((acc, el) => {
+        const breadcrumbs = getBreadcrumbs(page, options, rawBreadcrumbs, queryParams);
+
+        return breadcrumbs.map((item) => {
             const action = () => {
-                if (el.link) {
-                    history.push(el.link);
+                if (item.link) {
+                    history.push(item.link);
                 }
             };
-            acc.push({text: el.text, action});
-            return acc;
-        }, [] as BreadcrumbsItem[]);
+            return {...item, action};
+        });
+    }, [clusterNameFinal, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
 
+    const renderHeader = () => {
         return (
             <header className={b()}>
                 <div>
@@ -68,20 +85,29 @@ function Header({clusterName}: HeaderProps) {
                         items={breadcrumbItems}
                         lastDisplayedItemsCount={1}
                         firstDisplayedItemsCount={1}
+                        renderItemContent={({icon, text}) => {
+                            if (!icon) {
+                                return text;
+                            }
+                            return (
+                                <span className={b('breadcrumb')}>
+                                    <Icon
+                                        width={16}
+                                        height={16}
+                                        data={icon}
+                                        className={b('breadcrumb__icon')}
+                                    />
+                                    {text}
+                                </span>
+                            );
+                        }}
                     />
                 </div>
 
-                <div className={b('cluster-name-wrapper')}>
-                    <ExternalLinkWithIcon title={'Internal Viewer'} url={link} />
-                    {clusterNameFinal && (
-                        <React.Fragment>
-                            <div className={b('divider')}>
-                                <Divider />
-                            </div>
-                            <ClusterName name={clusterNameFinal} />
-                        </React.Fragment>
-                    )}
-                </div>
+                <ExternalLinkWithIcon
+                    title={DEVELOPER_UI}
+                    url={getInternalLink(singleClusterMode)}
+                />
             </header>
         );
     };

package/dist/containers/Header/breadcrumbs.ts

@@ -0,0 +1,146 @@
+import nodesRightIcon from '@gravity-ui/icons/svgs/nodes-right.svg';
+import databaseIcon from '@gravity-ui/icons/svgs/database.svg';
+
+import type {
+    BreadcrumbsOptions,
+    ClusterBreadcrumbsOptions,
+    NodeBreadcrumbsOptions,
+    Page,
+    TabletBreadcrumbsOptions,
+    TabletsBreadcrumbsOptions,
+    TenantBreadcrumbsOptions,
+} from '../../store/reducers/header/types';
+import routes, {createHref} from '../../routes';
+
+import {getClusterPath} from '../Cluster/utils';
+import {getTenantPath} from '../Tenant/TenantPages';
+import {getDefaultNodePath} from '../Node/NodePages';
+
+const prepareTenantName = (tenantName: string) => {
+    return tenantName.startsWith('/') ? tenantName.slice(1) : tenantName;
+};
+
+export interface RawBreadcrumbItem {
+    text: string;
+    link?: string;
+    icon?: SVGIconData;
+}
+
+const getClusterBreadcrumbs = (
+    options: ClusterBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {clusterName, clusterTab} = options;
+
+    return [
+        {
+            text: clusterName || 'Cluster',
+            link: getClusterPath(clusterTab, query),
+            icon: nodesRightIcon,
+        },
+    ];
+};
+
+const getTenantBreadcrumbs = (
+    options: TenantBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tenantName} = options;
+
+    const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
+    const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
+
+    return [...getClusterBreadcrumbs(options, query), {text, link, icon: databaseIcon}];
+};
+
+const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBreadcrumbItem[] => {
+    const {tenantName, nodeId} = options;
+
+    let breadcrumbs: RawBreadcrumbItem[];
+
+    // Compute nodes have tenantName, storage nodes doesn't
+    const isStorageNode = !tenantName;
+
+    if (isStorageNode) {
+        breadcrumbs = getClusterBreadcrumbs(options, query);
+    } else {
+        breadcrumbs = getTenantBreadcrumbs(options, query);
+    }
+
+    const text = nodeId ? `Node ${nodeId}` : 'Node';
+    const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
+
+    breadcrumbs.push({text, link});
+
+    return breadcrumbs;
+};
+
+const getTabletsBreadcrubms = (
+    options: TabletsBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tenantName, nodeIds, state, type} = options;
+
+    let breadcrumbs: RawBreadcrumbItem[];
+
+    // Cluster system tablets don't have tenantName
+    if (tenantName) {
+        breadcrumbs = getTenantBreadcrumbs(options, query);
+    } else {
+        breadcrumbs = getClusterBreadcrumbs(options, query);
+    }
+
+    const link = createHref(routes.tabletsFilters, undefined, {
+        nodeIds,
+        state,
+        type,
+        path: tenantName,
+    });
+
+    breadcrumbs.push({text: 'Tablets', link});
+
+    return breadcrumbs;
+};
+
+const getTabletBreadcrubms = (
+    options: TabletBreadcrumbsOptions,
+    query = {},
+): RawBreadcrumbItem[] => {
+    const {tabletId} = options;
+
+    const breadcrumbs = getTabletsBreadcrubms(options, query);
+
+    breadcrumbs.push({
+        text: tabletId || 'Tablet',
+    });
+
+    return breadcrumbs;
+};
+
+export const getBreadcrumbs = (
+    page: Page,
+    options: BreadcrumbsOptions,
+    rawBreadcrumbs: RawBreadcrumbItem[] = [],
+    query = {},
+) => {
+    switch (page) {
+        case 'cluster': {
+            return [...rawBreadcrumbs, ...getClusterBreadcrumbs(options, query)];
+        }
+        case 'tenant': {
+            return [...rawBreadcrumbs, ...getTenantBreadcrumbs(options, query)];
+        }
+        case 'node': {
+            return [...rawBreadcrumbs, ...getNodeBreadcrumbs(options, query)];
+        }
+        case 'tablets': {
+            return [...rawBreadcrumbs, ...getTabletsBreadcrubms(options, query)];
+        }
+        case 'tablet': {
+            return [...rawBreadcrumbs, ...getTabletBreadcrubms(options, query)];
+        }
+        default: {
+            return rawBreadcrumbs;
+        }
+    }
+};