ydb-embedded-ui 4.5.2 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [4.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.2...v4.6.0) (2023-06-13)
+
+
+### Features
+
+* **QueryEditor:** add data and query modes ([#422](https://github.com/ydb-platform/ydb-embedded-ui/issues/422)) ([c142f03](https://github.com/ydb-platform/ydb-embedded-ui/commit/c142f03e9caeab4dcf1d34b3988e949a94213932))
+* rework navigation, update breadcrumbs ([#418](https://github.com/ydb-platform/ydb-embedded-ui/issues/418)) ([2d807d6](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d807d6a52e13edcf2a7e1591672224339d91949))
+
+
+### Bug Fixes
+
+* **Diagnostics:** remove unneded tenantInfo fetch ([#420](https://github.com/ydb-platform/ydb-embedded-ui/issues/420)) ([ccaafe4](https://github.com/ydb-platform/ydb-embedded-ui/commit/ccaafe4ec9346ee1ec2ebd2a62600274f2175bfb))
+
 ## [4.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.1...v4.5.2) (2023-06-06)
 
 

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -16,7 +16,7 @@ const b = block('ydb-node-host-wrapper');
 
 interface NodeHostWrapperProps {
     node: INodesPreparedEntity;
-    getNodeRef?: (node?: NodeAddress) => string;
+    getNodeRef?: (node?: NodeAddress) => string | null;
 }
 
 export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {

package/dist/containers/App/Content.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 
 import {ThemeProvider} from '@gravity-ui/uikit';
 
-import routes, {createHref, CLUSTER_PAGES} from '../../routes';
+import routes, {createHref} from '../../routes';
 
 import Cluster from '../Cluster/Cluster';
 import Tenant from '../Tenant/Tenant';
@@ -23,6 +23,7 @@ import './App.scss';
 import PropTypes from 'prop-types';
 import HistoryContext from '../../contexts/HistoryContext';
 import Authentication from '../Authentication/Authentication';
+import {clusterTabsIds} from '../Cluster/utils';
 
 const b = cn('app');
 
@@ -44,7 +45,7 @@ export function Content(props) {
                     <Route path={routes.tabletsFilters} component={TabletsFilters} />
                     <Redirect
                         to={createHref(routes.cluster, {
-                            activeTab: CLUSTER_PAGES.tenants.id,
+                            activeTab: clusterTabsIds.tenants,
                         })}
                     />
                 </Switch>

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -9,11 +9,7 @@ import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity
 
 import signOutIcon from '../../assets/icons/signOut.svg';
 import signInIcon from '../../assets/icons/signIn.svg';
-import databaseIcon from '../../assets/icons/server.svg';
-import storageIcon from '../../assets/icons/storage.svg';
-import clusterIcon from '../../assets/icons/cluster.svg';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import databasesIcon from '../../assets/icons/databases.svg';
 import userSecret from '../../assets/icons/user-secret.svg';
 import userChecked from '../../assets/icons/user-check.svg';
 import settingsIcon from '../../assets/icons/settings.svg';
@@ -21,7 +17,7 @@ import supportIcon from '../../assets/icons/support.svg';
 
 import {UserSettings} from '../UserSettings/UserSettings';
 
-import routes, {createHref, CLUSTER_PAGES} from '../../routes';
+import routes, {createHref} from '../../routes';
 
 import {logout} from '../../store/reducers/authentication';
 import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
@@ -115,46 +111,8 @@ interface AsideNavigationProps {
     setSettingValue: (name: string, value: string) => void;
 }
 
-const items: MenuItem[] = [
-    {
-        id: CLUSTER_PAGES.tenants.id,
-        title: 'Databases',
-        icon: databasesIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.tenants.id,
-        }),
-        locationKeys: ['/tenant'],
-    },
-    {
-        id: CLUSTER_PAGES.nodes.id,
-        title: 'Nodes',
-        icon: databaseIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
-        locationKeys: ['/node'],
-    },
-    {
-        id: CLUSTER_PAGES.storage.id,
-        title: 'Storage',
-        icon: storageIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.storage.id,
-        }),
-        locationKeys: ['/storage'],
-    },
-    {
-        id: CLUSTER_PAGES.cluster.id,
-        title: 'Cluster',
-        icon: clusterIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.cluster.id,
-        }),
-        locationKeys: ['/cluster/cluster'],
-    },
-];
+// FIXME: add items or delete
+const items: MenuItem[] = [];
 
 enum Panel {
     UserSettings = 'UserSettings',
@@ -172,17 +130,13 @@ function AsideNavigation(props: AsideNavigationProps) {
 
     const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
         const {pathname} = location;
-        const isClusterPage = pathname === '/cluster';
         const menuItems: AsideHeaderMenuItem[] = items.map((item) => {
             const locationKeysCoincidence = item.locationKeys?.filter((key) =>
                 pathname.startsWith(key),
             );
-            let current =
+            const current =
                 (locationKeysCoincidence && locationKeysCoincidence.length > 0) ||
                 item.location.startsWith(pathname);
-            if (isClusterPage && item.id !== CLUSTER_PAGES.tenants.id) {
-                current = false;
-            }
             return {
                 id: item.id,
                 title: item.title,

package/dist/containers/Cluster/Cluster.scss

@@ -2,57 +2,16 @@
 
 .cluster {
     overflow: auto;
+    flex-grow: 1;
 
-    padding: 0 20px;
-    @include flex-container();
-
-    &_tab_cluster {
-        padding: 0px;
-    }
-
-    &__tab {
-        text-decoration: none;
-
-        &:first-letter {
-            text-transform: uppercase;
-        }
-    }
-
-    &__format-label {
-        margin-right: 15px;
-    }
-
-    &__title {
-        text-align: center;
-    }
+    height: 100%;
+    padding: 20px 20px 0px;
 
-    &__tooltip {
-        animation: none !important;
-    }
-
-    &__search {
-        width: 255px;
-        margin: 0 15px 0 0;
-    }
-
-    &__tablets {
-        padding: 0 !important;
-
-        .tablets-viewer__grid {
-            grid-template-columns: 125px;
-        }
-    }
-
-    &__controls {
-        display: flex;
-        justify-content: space-between;
+    @include flex-container();
 
-        margin: 17px 0;
-    }
+    &__content {
+        overflow: auto;
 
-    &__table-wrapper {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
+        height: 100%;
     }
 }

package/dist/containers/Cluster/Cluster.tsx

@@ -1,51 +1,133 @@
-import {useRouteMatch} from 'react-router';
+import {useEffect, useMemo} 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, AdditionalVersionsProps} from '../../types/additionalProps';
-import routes, {CLUSTER_PAGES} from '../../routes';
+import type {AdditionalNodesInfo} from '../../utils/nodes';
+import routes from '../../routes';
 
-import {ClusterInfo} from './ClusterInfo/ClusterInfo';
+import {setHeader} from '../../store/reducers/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 {Nodes} from '../Nodes/Nodes';
 import Storage from '../Storage/Storage';
+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 {
-    additionalTenantsInfo?: any;
-    additionalNodesInfo?: any;
+    additionalTenantsInfo?: unknown;
+    additionalNodesInfo?: AdditionalNodesInfo;
     additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
 }
 
 function Cluster({
+    additionalClusterProps,
     additionalTenantsInfo,
     additionalNodesInfo,
-    additionalClusterProps,
     additionalVersionsProps,
 }: ClusterProps) {
-    const match = useRouteMatch<{activeTab?: string}>(routes.cluster);
-    const activeTab = match?.params?.activeTab ?? CLUSTER_PAGES.tenants.id;
-    const renderRoutes = () => {
+    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,
+    } = 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(
+            setHeader([
+                {
+                    text: Name || 'Cluster',
+                    link: getClusterPath(),
+                },
+            ]),
+        );
+    }, [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 CLUSTER_PAGES.tenants.id: {
+            case clusterTabsIds.tenants: {
                 return <Tenants additionalTenantsInfo={additionalTenantsInfo} />;
             }
-            case CLUSTER_PAGES.nodes.id: {
+            case clusterTabsIds.nodes: {
                 return <Nodes additionalNodesInfo={additionalNodesInfo} />;
             }
-            case CLUSTER_PAGES.storage.id: {
+            case clusterTabsIds.storage: {
                 return <Storage additionalNodesInfo={additionalNodesInfo} />;
             }
-            case CLUSTER_PAGES.cluster.id: {
-                return (
-                    <ClusterInfo
-                        additionalClusterProps={additionalClusterProps}
-                        additionalVersionsProps={additionalVersionsProps}
-                    />
-                );
+            case clusterTabsIds.versions: {
+                return <Versions versionToColor={versionToColor} />;
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+
+    const getTabEntityCount = (tabId: ClusterTab) => {
+        switch (tabId) {
+            case clusterTabsIds.tenants: {
+                return cluster?.Tenants;
+            }
+            case clusterTabsIds.nodes: {
+                return cluster?.NodesTotal;
             }
             default: {
                 return null;
@@ -53,7 +135,41 @@ function Cluster({
         }
     };
 
-    return <div className={b({tab: activeTab})}>{renderRoutes()}</div>;
+    return (
+        <div className={b()}>
+            <ClusterInfo
+                cluster={cluster}
+                versionsValues={versionsValues}
+                loading={infoLoading}
+                error={clusterError}
+                additionalClusterProps={additionalClusterProps}
+            />
+
+            <div>
+                <Tabs
+                    size="l"
+                    allowNotSelected={true}
+                    activeTab={activeTab as string}
+                    items={clusterTabs.map((item) => {
+                        return {
+                            ...item,
+                            title: `${item.title} ${getTabEntityCount(item.id) || ''}`,
+                        };
+                    })}
+                    wrapTo={({id}, node) => {
+                        const path = getClusterPath(id as ClusterTab, queryParams);
+                        return (
+                            <InternalLink to={path} key={id}>
+                                {node}
+                            </InternalLink>
+                        );
+                    }}
+                />
+            </div>
+
+            <div className={b('content')}>{renderTab()}</div>
+        </div>
+    );
 }
 
 export default Cluster;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -1,31 +1,48 @@
 @import '../../../styles/mixins';
 
 .cluster-info {
-    $_: &;
-    $progress_width: 100%;
+    width: 100%;
 
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
+    &__header {
+        display: flex;
 
-    width: 100%;
+        width: fit-content;
+        margin-bottom: 20px;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+        cursor: pointer;
 
-    &__header {
-        padding: 20px;
+        &__expand-button {
+            margin-left: 6px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background: var(--yc-color-base-background);
+            &_rotate {
+                transform: rotate(180deg);
+            }
+        }
     }
 
-    &__title {
-        display: flex;
-        align-items: center;
+    &__title .entity-status__name {
+        font-size: var(--yc-text-header-1-font-size);
+        font-weight: var(--yc-text-header-font-weight);
+        line-height: var(--yc-text-header-1-line-height);
+    }
+
+    &__title-skeleton {
+        width: 20%;
+        min-width: 200px;
+        height: var(--yc-text-header-1-line-height);
+    }
 
-        margin-top: 16px;
+    &__error {
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
+    }
+
+    &__info {
         margin-bottom: 20px;
+
+        &_hidden {
+            display: none;
+        }
     }
 
     &__metric-field {
@@ -38,7 +55,7 @@
         align-items: center;
 
         & .tablet {
-            margin-bottom: 2px;
+            margin-top: 2px;
         }
     }
 

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>
     );
 };