ydb-embedded-ui 4.5.2 → 4.6.0

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

@@ -16,9 +16,10 @@ import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-import {setHeader} from '../../store/reducers/header';
+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/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) {

package/dist/containers/Storage/Storage.js

@@ -35,8 +35,6 @@ import {getNodesList, selectNodesMap} from '../../store/reducers/nodesList';
 import StorageGroups from './StorageGroups/StorageGroups';
 import StorageNodes from './StorageNodes/StorageNodes';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-import {setHeader} from '../../store/reducers/header';
-import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 
 import './Storage.scss';
 
@@ -67,7 +65,6 @@ class Storage extends React.Component {
         setStorageFilter: PropTypes.func,
         setVisibleEntities: PropTypes.func,
         visibleEntities: PropTypes.string,
-        setHeader: PropTypes.func,
         tenant: PropTypes.string,
         nodeId: PropTypes.string,
         nodesUptimeFilter: PropTypes.string,
@@ -77,7 +74,7 @@ class Storage extends React.Component {
     };
 
     componentDidMount() {
-        const {tenant, nodeId, setVisibleEntities, storageType, setHeader, getNodesList} =
+        const {tenant, nodeId, setVisibleEntities, storageType, getNodesList} =
             this.props;
 
         this.autofetcher = new AutoFetcher();
@@ -89,12 +86,6 @@ class Storage extends React.Component {
                 type: storageType,
             });
         } else {
-            setHeader([
-                {
-                    text: CLUSTER_PAGES.storage.title,
-                    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.storage.id}),
-                },
-            ]);
             this.getStorageInfo({
                 filter: FILTER_OPTIONS.Missing,
                 type: storageType,
@@ -375,7 +366,6 @@ const mapDispatchToProps = {
     setNodesUptimeFilter,
     getNodesList,
     setStorageType,
-    setHeader,
     setDataWasNotLoaded,
 };
 

package/dist/containers/Tablet/Tablet.tsx

@@ -6,6 +6,9 @@ import {Link as ExternalLink} from '@gravity-ui/uikit';
 
 import {backend} from '../../store';
 import {getTablet, getTabletDescribe} from '../../store/reducers/tablet';
+import {setHeader} from '../../store/reducers/header';
+import routes, {createHref} from '../../routes';
+
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 import '../../services/api';
 
@@ -16,6 +19,8 @@ import {Icon} from '../../components/Icon';
 import {EmptyState} from '../../components/EmptyState';
 import {Loader} from '../../components/Loader';
 
+import {getClusterPath} from '../Cluster/utils';
+
 import {TabletTable} from './TabletTable';
 import {TabletInfo} from './TabletInfo';
 import {TabletControls} from './TabletControls';
@@ -56,6 +61,29 @@ export const Tablet = () => {
 
     useAutofetcher(fetchData, [fetchData], true);
 
+    useEffect(() => {
+        dispatch(
+            setHeader([
+                {
+                    text: 'Cluster',
+                    link: getClusterPath(),
+                },
+                {
+                    text: 'Tablets',
+                    link: createHref(routes.tabletsFilters, undefined, {
+                        nodeIds: tablet.NodeId ? [tablet.NodeId] : [],
+                        state: tablet.State,
+                        type: tablet.Type,
+                        tenantPath,
+                    }),
+                },
+                {
+                    text: tablet.TabletId ?? 'Tablet',
+                },
+            ]),
+        );
+    }, [dispatch, tenantPath, tablet]);
+
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (
             <li key={index} className={b('link', {external: true})}>

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -11,6 +11,7 @@ import ReactList from 'react-list';
 import {Tablet} from '../../components/Tablet';
 import {AccessDenied} from '../../components/Errors/403';
 
+import {setHeader} from '../../store/reducers/header';
 import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';
 import {
     getTabletsInfo,
@@ -21,6 +22,8 @@ import {
     getTablets,
 } from '../../store/reducers/tabletsFilters';
 
+import {getClusterPath} from '../Cluster/utils';
+
 import './TabletsFilters.scss';
 
 const b = cn('tablets-filters');
@@ -41,6 +44,7 @@ class TabletsFilters extends React.Component {
         stateFilter: PropTypes.array,
         typeFilter: PropTypes.array,
         error: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
+        setHeader: PropTypes.func,
     };
 
     static renderLoader() {
@@ -72,7 +76,7 @@ class TabletsFilters extends React.Component {
     reloadDescriptor = -1;
 
     componentDidMount() {
-        const {setStateFilter, setTypeFilter} = this.props;
+        const {setStateFilter, setTypeFilter, setHeader} = this.props;
 
         const queryParams = qs.parse(this.props.location.search, {
             ignoreQueryPrefix: true,
@@ -87,6 +91,16 @@ class TabletsFilters extends React.Component {
         this.setState({nodeFilter: nodes, tenantPath: path}, () => {
             this.makeRequest();
         });
+
+        setHeader([
+            {
+                text: 'Cluster',
+                link: getClusterPath(),
+            },
+            {
+                text: 'Tablets'
+            }
+        ]);
     }
 
     componentDidUpdate(prevProps) {
@@ -326,6 +340,7 @@ const mapDispatchToProps = {
     clearWasLoadingFlag,
     setStateFilter,
     setTypeFilter,
+    setHeader,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(TabletsFilters);

package/dist/containers/Tenant/Diagnostics/Describe/Describe.tsx

@@ -15,7 +15,7 @@ import {
     setCurrentDescribePath,
     getDescribeBatched,
 } from '../../../../store/reducers/describe';
-import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema';
+import {selectSchemaMergedChildrenPaths} from '../../../../store/reducers/schema/schema';
 import type {EPathType} from '../../../../types/api/schema';
 
 import {isEntityWithMergedImplementation} from '../../utils/schema';

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -4,6 +4,9 @@ $section-title-line-height: 24px;
 .kv-detailed-overview {
     display: flex;
     gap: 20px;
+
+    height: 100%;
+
     &__section {
         display: flex;
         overflow-x: hidden;

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -12,7 +12,7 @@ import type {EPathType} from '../../../types/api/schema';
 import {useTypedSelector} from '../../../utils/hooks';
 import routes, {createHref} from '../../../routes';
 import type {TenantDiagnosticsTab, TenantGeneralTab} from '../../../store/reducers/tenant/types';
-import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema/schema';
 import {setTopLevelTab, setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
@@ -49,8 +49,8 @@ const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
     const dispatch = useDispatch();
-    const {currentSchemaPath, autorefresh} = useSelector((state: any) => state.schema);
-    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview, wasLoaded} = useTypedSelector(
+    const {currentSchemaPath, autorefresh, wasLoaded} = useSelector((state: any) => state.schema);
+    const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
         (state) => state.tenant,
     );
 

package/dist/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/ChangefeedInfo.tsx

@@ -7,7 +7,6 @@ import {
 } from '../../../../../components/InfoViewer/formatters';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
-import {selectSchemaData} from '../../../../../store/reducers/schema';
 
 import {getEntityName} from '../../../utils';
 
@@ -42,27 +41,26 @@ const prepareChangefeedInfo = (
 
 interface ChangefeedProps {
     data?: TEvDescribeSchemeResult;
-    childrenPaths?: string[];
+    topic?: TEvDescribeSchemeResult;
 }
 
 /** Displays overview for CDCStream EPathType */
-export const ChangefeedInfo = ({data, childrenPaths}: ChangefeedProps) => {
+export const ChangefeedInfo = ({data, topic}: ChangefeedProps) => {
     const entityName = getEntityName(data?.PathDescription);
 
     const {error: schemaError} = useTypedSelector((state) => state.schema);
-    const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
 
     if (schemaError) {
         return <div className="error">{schemaError.statusText}</div>;
     }
 
-    if (!data || !pqGroupData) {
+    if (!data || !topic) {
         return <div className="error">No {entityName} data</div>;
     }
 
     return (
         <div>
-            <InfoViewer title={entityName} info={prepareChangefeedInfo(data, pqGroupData)} />
+            <InfoViewer title={entityName} info={prepareChangefeedInfo(data, topic)} />
             <TopicStats />
         </div>
     );