ydb-embedded-ui 4.4.2 → 4.5.1

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

@@ -0,0 +1,223 @@
+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 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 type {
+    AdditionalClusterProps,
+    AdditionalVersionsProps,
+    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 {VersionsBar} from '../VersionsBar/VersionsBar';
+
+import {compareTablets} from './utils';
+
+import './ClusterInfo.scss';
+
+const b = block('cluster-info');
+
+const getInfo = (
+    cluster: TClusterInfo,
+    versionsValues: VersionValue[],
+    additionalInfo: InfoViewerItem[],
+    links: ClusterLink[],
+) => {
+    const info: InfoViewerItem[] = [];
+
+    if (cluster.DataCenters) {
+        info.push({
+            label: 'DC',
+            value: <Tags tags={cluster.DataCenters} />,
+        });
+    }
+
+    if (cluster.SystemTablets) {
+        info.push({
+            label: 'Tablets',
+            value: (
+                <div className={b('system-tablets')}>
+                    {cluster.SystemTablets.sort(compareTablets).map((tablet, tabletIndex) => (
+                        <Tablet key={tabletIndex} tablet={tablet} />
+                    ))}
+                </div>
+            ),
+        });
+    }
+
+    info.push(
+        {
+            label: 'Nodes',
+            value: (
+                <ProgressViewer
+                    className={b('metric-field')}
+                    value={cluster?.NodesAlive}
+                    capacity={cluster?.NodesTotal}
+                />
+            ),
+        },
+        {
+            label: 'Load',
+            value: (
+                <ProgressViewer
+                    className={b('metric-field')}
+                    value={cluster?.LoadAverage}
+                    capacity={cluster?.NumberOfCpus}
+                />
+            ),
+        },
+        {
+            label: 'Storage',
+            value: (
+                <ProgressViewer
+                    className={b('metric-field')}
+                    value={cluster?.StorageUsed}
+                    capacity={cluster?.StorageTotal}
+                    formatValues={formatStorageValues}
+                />
+            ),
+        },
+        ...additionalInfo,
+        {
+            label: 'Links',
+            value: (
+                <div className={b('links')}>
+                    {links.map(({title, url}) => (
+                        <ExternalLinkWithIcon key={title} title={title} url={url} />
+                    ))}
+                </div>
+            ),
+        },
+        {
+            label: 'Versions',
+            value: <VersionsBar versionsValues={versionsValues} />,
+        },
+    );
+
+    return info;
+};
+
+interface ClusterInfoProps {
+    clusterTitle?: string;
+    additionalClusterProps?: AdditionalClusterProps;
+    additionalVersionsProps?: AdditionalVersionsProps;
+}
+
+export const ClusterInfo = ({
+    clusterTitle,
+    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" />;
+    }
+
+    if (error || nodesError) {
+        return <ResponseError error={error || nodesError} />;
+    }
+
+    let internalLink = backend + '/internal';
+
+    if (singleClusterMode && !customBackend) {
+        internalLink = `/internal`;
+    }
+
+    const {info = [], links = []} = additionalClusterProps;
+
+    const clusterInfo = getInfo(cluster, versionsValues, info, [
+        {title: 'Internal Viewer', url: internalLink},
+        ...links,
+    ]);
+
+    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>
+
+            <Versions nodes={nodes} versionToColor={versionToColor} />
+        </div>
+    );
+};

package/dist/containers/{ClusterInfo → Cluster/ClusterInfo}/utils.ts

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

package/dist/containers/Cluster/VersionsBar/VersionsBar.scss

@@ -0,0 +1,27 @@
+.ydb-cluster-versions-bar {
+    display: flex;
+    flex-direction: column;
+
+    width: 600px;
+
+    & .yc-progress {
+        width: 100%;
+    }
+
+    &__versions {
+        display: flex;
+        flex-flow: row wrap;
+
+        margin-top: 6px;
+    }
+
+    &__version-title {
+        margin-left: 3px;
+
+        white-space: nowrap;
+    }
+
+    & .yc-progress__stack {
+        cursor: pointer;
+    }
+}

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

@@ -0,0 +1,33 @@
+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} view="thin" />
+            <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/Header/Header.tsx

@@ -2,10 +2,10 @@ import React, {useEffect} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 import {useHistory} from 'react-router';
-import {Breadcrumbs, BreadcrumbsItem, Link} from '@gravity-ui/uikit';
+import {Breadcrumbs, BreadcrumbsItem} from '@gravity-ui/uikit';
 
 import Divider from '../../components/Divider/Divider';
-import {Icon} from '../../components/Icon';
+import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
 
 import {backend, customBackend} from '../../store';
 import {getHostInfo} from '../../store/reducers/host';
@@ -72,10 +72,7 @@ function Header({clusterName}: HeaderProps) {
                 </div>
 
                 <div className={b('cluster-name-wrapper')}>
-                    <Link href={link} target="_blank">
-                        Internal viewer{' '}
-                        <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
-                    </Link>
+                    <ExternalLinkWithIcon title={'Internal Viewer'} url={link} />
                     {clusterNameFinal && (
                         <React.Fragment>
                             <div className={b('divider')}>

package/dist/containers/Nodes/Nodes.tsx

@@ -31,7 +31,6 @@ import {
     getComputeNodes,
 } from '../../store/reducers/nodes';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 
 import {isDatabaseEntityType} from '../Tenant/utils/schema';
 
@@ -129,18 +128,8 @@ export const Nodes = ({path, type, className, additionalNodesInfo = {}}: NodesPr
         );
     };
 
-    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
-        dispatch(showTooltip(...args));
-    };
-
-    const onHideTooltip = () => {
-        dispatch(hideTooltip());
-    };
-
     const renderTable = () => {
         const columns = getNodesColumns({
-            showTooltip: onShowTooltip,
-            hideTooltip: onHideTooltip,
             getNodeRef: additionalNodesInfo.getNodeRef,
         });
 

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -1,7 +1,7 @@
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Popover} from '@gravity-ui/uikit';
 
-import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
+import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
@@ -10,21 +10,13 @@ import type {NodeAddress} from '../../utils/nodes';
 import {formatBytesToGigabyte} from '../../utils/index';
 
 import type {INodesPreparedEntity} from '../../types/store/nodes';
-import {showTooltip as externalShowTooltip} from '../../store/reducers/tooltip';
 
 interface GetNodesColumnsProps {
-    showTooltip: (...args: Parameters<typeof externalShowTooltip>) => void;
-    hideTooltip: VoidFunction;
     tabletsPath?: string;
     getNodeRef?: (node?: NodeAddress) => string;
 }
 
-export function getNodesColumns({
-    showTooltip,
-    hideTooltip,
-    tabletsPath,
-    getNodeRef,
-}: GetNodesColumnsProps) {
+export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {
     const columns: Column<INodesPreparedEntity>[] = [
         {
             name: 'NodeId',
@@ -96,16 +88,7 @@ export function getNodesColumns({
                     }
                 }, 0),
             defaultOrder: DataTable.DESCENDING,
-            render: ({row}) =>
-                row.PoolStats ? (
-                    <PoolsGraph
-                        onMouseEnter={showTooltip}
-                        onMouseLeave={hideTooltip}
-                        pools={row.PoolStats}
-                    />
-                ) : (
-                    '—'
-                ),
+            render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
             align: DataTable.LEFT,
             width: '120px',
         },

package/dist/containers/Tablet/Tablet.scss

@@ -52,6 +52,10 @@
         text-transform: uppercase;
     }
 
+    &__loader {
+        width: 25px;
+    }
+
     .info-viewer__items {
         grid-template-columns: auto;
     }

package/dist/containers/Tablet/Tablet.tsx

@@ -108,9 +108,10 @@ export const Tablet = () => {
                             <Icon name="external" />
                         </a>
                         {Leader && <Tag text="Leader" type="blue" />}
+                        <span className={b('loader')}>{loading && <Loader size="s" />}</span>
                     </div>
                     <TabletInfo tablet={tablet} tenantPath={tenantPath} />
-                    <TabletControls tablet={tablet} />
+                    <TabletControls tablet={tablet} fetchData={fetchData} />
                 </div>
                 <div className={b('rigth-pane')}>
                     <TabletTable history={history} />

package/dist/containers/Tablet/TabletControls/TabletControls.tsx

@@ -17,18 +17,19 @@ type VisibleDialogType = EVisibleDialogType | null;
 
 interface TabletControlsProps {
     tablet: TTabletStateInfo;
+    fetchData: VoidFunction;
 }
 
-export const TabletControls = ({tablet}: TabletControlsProps) => {
+export const TabletControls = ({tablet, fetchData}: TabletControlsProps) => {
     const {TabletId, HiveId} = tablet;
 
     const [isDialogVisible, setIsDialogVisible] = useState(false);
     const [visibleDialogType, setVisibleDialogType] = useState<VisibleDialogType>(null);
-    const [isTabletActionsDisabled, setIsTabletActionsDisabled] = useState(false);
+    const [isTabletActionLoading, setIsTabletActionLoading] = useState(false);
 
     // Enable controls after data update
     useEffect(() => {
-        setIsTabletActionsDisabled(false);
+        setIsTabletActionLoading(false);
     }, [tablet]);
 
     const makeShowDialog = (type: VisibleDialogType) => () => {
@@ -46,15 +47,15 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
     };
 
     const _onKillClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.killTablet(TabletId);
     };
     const _onStopClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.stopTablet(TabletId, HiveId);
     };
     const _onResumeClick = () => {
-        setIsTabletActionsDisabled(true);
+        setIsTabletActionLoading(true);
         return window.api.resumeTablet(TabletId, HiveId);
     };
 
@@ -62,25 +63,11 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
         return HiveId && HiveId !== '0';
     };
 
-    const isDisabledResume = () => {
-        if (isTabletActionsDisabled) {
-            return true;
-        }
-
-        return tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
-    };
-
-    const isDisabledKill = () => {
-        return isTabletActionsDisabled;
-    };
-
-    const isDisabledStop = () => {
-        if (isTabletActionsDisabled) {
-            return true;
-        }
+    const isDisabledResume =
+        tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
 
-        return tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
-    };
+    const isDisabledStop =
+        tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
 
     const renderDialog = () => {
         if (!isDialogVisible) {
@@ -95,6 +82,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.kill')}
                         onClose={hideDialog}
                         onConfirm={_onKillClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -105,6 +93,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.stop')}
                         onClose={hideDialog}
                         onConfirm={_onStopClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -115,6 +104,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                         text={i18n('dialog.resume')}
                         onClose={hideDialog}
                         onConfirm={_onResumeClick}
+                        onConfirmActionFinish={fetchData}
                     />
                 );
             }
@@ -128,7 +118,7 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
             <Button
                 onClick={showKillDialog}
                 view="action"
-                disabled={isDisabledKill()}
+                loading={isTabletActionLoading}
                 className={b('control')}
             >
                 {i18n('controls.kill')}
@@ -138,7 +128,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <Button
                         onClick={showStopDialog}
                         view="action"
-                        disabled={isDisabledStop()}
+                        disabled={isDisabledStop}
+                        loading={!isDisabledStop && isTabletActionLoading}
                         className={b('control')}
                     >
                         {i18n('controls.stop')}
@@ -146,7 +137,8 @@ export const TabletControls = ({tablet}: TabletControlsProps) => {
                     <Button
                         onClick={showResumeDialog}
                         view="action"
-                        disabled={isDisabledResume()}
+                        disabled={isDisabledResume}
+                        loading={!isDisabledResume && isTabletActionLoading}
                         className={b('control')}
                     >
                         {i18n('controls.resume')}

package/dist/containers/Tablets/Tablets.tsx

@@ -12,7 +12,6 @@ import {Loader} from '../../components/Loader';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 import {ETabletState, EType, TTabletStateInfo} from '../../types/api/tablet';
 
-import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {
     getTabletsInfo,
     clearWasLoadingFlag,
@@ -89,23 +88,8 @@ export const Tablets = ({path, nodeId, className}: TabletsProps) => {
         dispatch(setTypeFilter(value as EType[]));
     };
 
-    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
-        dispatch(showTooltip(...args));
-    };
-
-    const onHideTooltip = () => {
-        dispatch(hideTooltip());
-    };
-
     const renderTablet = (tabletIndex: number) => {
-        return (
-            <Tablet
-                onMouseLeave={onHideTooltip}
-                onMouseEnter={onShowTooltip}
-                tablet={tabletsToRender[tabletIndex]}
-                key={tabletIndex}
-            />
-        );
+        return <Tablet tablet={tabletsToRender[tabletIndex]} key={tabletIndex} />;
     };
 
     const renderContent = () => {

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -12,7 +12,6 @@ import {Tablet} from '../../components/Tablet';
 import {AccessDenied} from '../../components/Errors/403';
 
 import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';
-import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {
     getTabletsInfo,
     clearWasLoadingFlag,
@@ -30,8 +29,6 @@ class TabletsFilters extends React.Component {
     static propTypes = {
         wasLoaded: PropTypes.bool,
         loading: PropTypes.bool,
-        showTooltip: PropTypes.func,
-        hideTooltip: PropTypes.func,
         getTabletsInfo: PropTypes.func,
         timeoutForRequest: PropTypes.number,
         path: PropTypes.string,
@@ -141,17 +138,10 @@ class TabletsFilters extends React.Component {
     };
 
     renderTablet = (index, key) => {
-        const {filteredTablets, hideTooltip, showTooltip, size} = this.props;
+        const {filteredTablets, size} = this.props;
 
         return (
-            <Tablet
-                onMouseLeave={hideTooltip}
-                onMouseEnter={showTooltip}
-                tablet={filteredTablets[index]}
-                key={key}
-                size={size}
-                className={b('tablet')}
-            />
+            <Tablet tablet={filteredTablets[index]} key={key} size={size} className={b('tablet')} />
         );
     };
 
@@ -333,8 +323,6 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
     getTabletsInfo,
-    hideTooltip,
-    showTooltip,
     clearWasLoadingFlag,
     setStateFilter,
     setTypeFilter,

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

@@ -3,13 +3,13 @@ import block from 'bem-cn-lite';
 import qs from 'qs';
 
 import type {IPreparedConsumerData} from '../../../../../types/store/topic';
+import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import {InternalLink} from '../../../../../components/InternalLink';
 import {formatMsToUptime} from '../../../../../utils';
 import routes, {createHref} from '../../../../../routes';
 
 import {TenantTabsGroups} from '../../../TenantPages';
-import {GeneralPagesIds} from '../../DiagnosticsPages';
 
 import {
     CONSUMERS_COLUMNS_IDS,
@@ -42,7 +42,7 @@ export const columns: Column<IPreparedConsumerData>[] = [
                 <InternalLink
                     to={createHref(routes.tenant, undefined, {
                         ...queryParams,
-                        [TenantTabsGroups.generalTab]: GeneralPagesIds.partitions,
+                        [TenantTabsGroups.generalTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
                         selectedConsumer: row.name,
                     })}
                 >