ydb-embedded-ui 4.5.1 → 4.6.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} 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(CLUSTER_INFO_HIDDEN_KEY, false);
 
-    if (error || nodesError) {
-        return <ResponseError error={error || nodesError} />;
-    }
+    const togleClusterInfoVisibility = () => {
+        setClusterInfoHidden(!clusterInfoHidden);
+    };
 
     let internalLink = backend + '/internal';
 
@@ -204,20 +145,45 @@ export const ClusterInfo = ({
         ...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.ts

@@ -0,0 +1,34 @@
+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.scss

@@ -13,28 +13,4 @@
     border-bottom: 1px solid var(--yc-color-line-generic);
 
     @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 {
-        display: flex;
-        align-items: center;
-
-        height: 100%;
-        gap: 5px;
-    }
-
-    &__divider {
-        height: 80%;
-    }
 }

package/dist/containers/Header/Header.tsx

@@ -1,56 +1,33 @@
-import React, {useEffect} from 'react';
-import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
+import block from 'bem-cn-lite';
 import {useHistory} from 'react-router';
+
 import {Breadcrumbs, BreadcrumbsItem} 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 {useTypedSelector} from '../../utils/hooks';
 
 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`;
+    }
 
-interface HeaderProps {
-    clusterName: string;
-}
-
-function Header({clusterName}: HeaderProps) {
-    const dispatch = useDispatch();
+    return backend + '/internal';
+};
 
+function Header() {
     const {singleClusterMode, header}: {singleClusterMode: boolean; header: HeaderItemType[]} =
         useTypedSelector((state) => state);
-    const {data: host} = useTypedSelector((state) => state.host);
 
     const history = useHistory();
 
-    useEffect(() => {
-        dispatch(getHostInfo());
-    }, [dispatch]);
-
     const renderHeader = () => {
-        const clusterNameFinal = singleClusterMode ? host?.ClusterName : clusterName;
-
-        let link = backend + '/internal';
-
-        if (singleClusterMode && !customBackend) {
-            link = `/internal`;
-        }
-
         const breadcrumbItems = header.reduce((acc, el) => {
             const action = () => {
                 if (el.link) {
@@ -71,17 +48,10 @@ function Header({clusterName}: HeaderProps) {
                     />
                 </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={'Internal Viewer'}
+                    url={getInternalLink(singleClusterMode)}
+                />
             </header>
         );
     };

package/dist/containers/Node/Node.tsx

@@ -15,10 +15,11 @@ import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
-import {getNodeInfo, resetNode} from '../../store/reducers/node';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-import {setHeader} from '../../store/reducers/header';
+import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
+import routes, {createHref} from '../../routes';
+import {HeaderItemType, setHeader} from '../../store/reducers/header';
 import {AutoFetcher} from '../../utils/autofetcher';
+import {clusterTabsIds, getClusterPath} from '../Cluster/utils';
 
 import './Node.scss';
 
@@ -26,11 +27,6 @@ const b = cn('node');
 
 export const STORAGE_ROLE = 'Storage';
 
-const headerNodes = {
-    text: CLUSTER_PAGES.nodes.title,
-    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
-};
-
 const autofetcher = new AutoFetcher();
 
 interface NodeProps {
@@ -72,28 +68,34 @@ function Node(props: NodeProps) {
         return {activeTabVerified, nodeTabs};
     }, [activeTab, node]);
 
+    React.useEffect(() => {
+        const headerItems: HeaderItemType[] = [
+            {
+                text: 'Cluster',
+                link: getClusterPath(clusterTabsIds.nodes),
+            },
+        ];
+
+        if (nodeHost) {
+            headerItems.push({
+                text: nodeHost,
+            });
+        }
+
+        dispatch(setHeader(headerItems));
+    }, [dispatch, nodeHost]);
+
     React.useEffect(() => {
         const fetchData = () => dispatch(getNodeInfo(nodeId));
         fetchData();
         autofetcher.start();
         autofetcher.fetch(() => fetchData());
-        dispatch(setHeader([headerNodes]));
+
         return () => {
             autofetcher.stop();
             dispatch(resetNode());
         };
-    }, [nodeId]);
-
-    React.useEffect(() => {
-        dispatch(
-            setHeader([
-                headerNodes,
-                {
-                    text: nodeHost,
-                },
-            ]),
-        );
-    }, [nodeHost]);
+    }, [dispatch, nodeId]);
 
     const renderTabs = () => {
         return (

package/dist/containers/Node/NodeStructure/NodeStructure.tsx

@@ -1,16 +1,19 @@
 import {useEffect, useRef, useMemo} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import url from 'url';
 import _ from 'lodash';
 
 import cn from 'bem-cn-lite';
 
-import {PDisk} from './Pdisk';
 import {Loader} from '../.././../components/Loader';
 
-import {getNodeStructure, selectNodeStructure} from '../../../store/reducers/node';
+import {getNodeStructure} from '../../../store/reducers/node/node';
+import {selectNodeStructure} from '../../../store/reducers/node/selectors';
 
 import {AutoFetcher} from '../../../utils/autofetcher';
+import {useTypedSelector} from '../../../utils/hooks';
+
+import {PDisk} from './Pdisk';
 
 import './NodeStructure.scss';
 
@@ -32,20 +35,19 @@ interface NodeStructureProps {
 
 const autofetcher = new AutoFetcher();
 
-function NodeStructure(props: NodeStructureProps) {
+function NodeStructure({nodeId, className, additionalNodesInfo}: NodeStructureProps) {
     const dispatch = useDispatch();
 
-    const nodeStructure: any = useSelector(selectNodeStructure);
+    const nodeStructure = useTypedSelector(selectNodeStructure);
 
-    const loadingStructure = useSelector((state: any) => state.node.loadingStructure);
-    const wasLoadedStructure = useSelector((state: any) => state.node.wasLoadedStructure);
-    const nodeData = useSelector((state: any) => state.node?.data?.SystemStateInfo?.[0]);
+    const {loadingStructure, wasLoadedStructure} = useTypedSelector((state) => state.node);
+    const nodeData = useTypedSelector((state) => state.node?.data?.SystemStateInfo?.[0]);
 
     const nodeHref = useMemo(() => {
-        return props.additionalNodesInfo?.getNodeRef
-            ? props.additionalNodesInfo.getNodeRef(nodeData)
+        return additionalNodesInfo?.getNodeRef
+            ? additionalNodesInfo.getNodeRef(nodeData)
             : undefined;
-    }, [nodeData, props.additionalNodesInfo]);
+    }, [nodeData, additionalNodesInfo]);
 
     const {pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl} = url.parse(
         window.location.href,
@@ -71,16 +73,16 @@ function NodeStructure(props: NodeStructureProps) {
     }, []);
 
     useEffect(() => {
-        dispatch(getNodeStructure(props.nodeId));
+        dispatch(getNodeStructure(nodeId));
         autofetcher.start();
-        autofetcher.fetch(() => dispatch(getNodeStructure(props.nodeId)));
+        autofetcher.fetch(() => dispatch(getNodeStructure(nodeId)));
 
         return () => {
             scrolled.current = false;
             isReady.current = false;
             autofetcher.stop();
         };
-    }, [props.nodeId, dispatch]);
+    }, [nodeId, dispatch]);
 
     useEffect(() => {
         if (!_.isEmpty(nodeStructure) && scrollContainer) {
@@ -98,9 +100,9 @@ function NodeStructure(props: NodeStructureProps) {
 
             if (vdiskIdFromUrl) {
                 const vDisks = nodeStructure[pdiskIdFromUrl as string]?.vDisks;
-                const vDisk = vDisks?.find((el: any) => el.id === vdiskIdFromUrl);
+                const vDisk = vDisks?.find((el) => el.id === vdiskIdFromUrl);
                 const dataTable = vDisk ? document.querySelector('.data-table') : undefined;
-                const order = vDisk?.order;
+                const order = vDisk?.order || 0;
 
                 if (dataTable) {
                     scrollToVdisk += (dataTable as HTMLElement).offsetTop + 40 * order;
@@ -147,7 +149,7 @@ function NodeStructure(props: NodeStructureProps) {
 
     return (
         <div className={b()} ref={scrollContainerRef}>
-            <div className={props.className}>{renderContent()}</div>
+            <div className={className}>{renderContent()}</div>
         </div>
     );
 }

package/dist/containers/Nodes/Nodes.tsx

@@ -15,13 +15,10 @@ import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {EntitiesCount} from '../../components/EntitiesCount';
 
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-
 import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
 import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
 import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
-import {setHeader} from '../../store/reducers/header';
 import {
     getNodes,
     getFilteredPreparedNodesList,
@@ -82,19 +79,6 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
 
-    useEffect(() => {
-        if (isClusterNodes) {
-            dispatch(
-                setHeader([
-                    {
-                        text: CLUSTER_PAGES.nodes.title,
-                        link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
-                    },
-                ]),
-            );
-        }
-    }, [dispatch, isClusterNodes]);
-
     const handleSearchQueryChange = (value: string) => {
         dispatch(setSearchValue(value));
     };

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -13,7 +13,7 @@ import type {INodesPreparedEntity} from '../../types/store/nodes';
 
 interface GetNodesColumnsProps {
     tabletsPath?: string;
-    getNodeRef?: (node?: NodeAddress) => string;
+    getNodeRef?: (node?: NodeAddress) => string | null;
 }
 
 export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {