ydb-embedded-ui 4.4.2 → 4.5.0

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/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/TenantOverview/TenantOverview.js

@@ -9,7 +9,6 @@ import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
 import PoolUsage from '../../../../components/PoolUsage/PoolUsage';
 import {Tablet} from '../../../../components/Tablet';
 
-import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
 import {getTenantInfo} from '../../../../store/reducers/tenant';
 
 import {formatCPU} from '../../../../utils';
@@ -44,8 +43,6 @@ class TenantOverview extends React.Component {
         loading: PropTypes.bool,
         autorefresh: PropTypes.bool,
         tenant: PropTypes.object,
-        hideTooltip: PropTypes.func,
-        showTooltip: PropTypes.func,
         systemTablets: PropTypes.array,
         additionalTenantInfo: PropTypes.func,
         tenantName: PropTypes.string,
@@ -102,7 +99,7 @@ class TenantOverview extends React.Component {
     };
 
     render() {
-        const {tenant, hideTooltip, showTooltip, loading} = this.props;
+        const {tenant, loading} = this.props;
         const {
             Metrics = {},
             PoolStats,
@@ -162,12 +159,7 @@ class TenantOverview extends React.Component {
                 <div className={b('system-tablets')}>
                     {SystemTablets &&
                         SystemTablets.map((tablet, tabletIndex) => (
-                            <Tablet
-                                onMouseEnter={showTooltip}
-                                onMouseLeave={hideTooltip}
-                                key={tabletIndex}
-                                tablet={tablet}
-                            />
+                            <Tablet key={tabletIndex} tablet={tablet} />
                         ))}
                 </div>
                 <div className={b('common-info')}>
@@ -211,8 +203,6 @@ function mapStateToProps(state) {
 }
 
 const mapDispatchToProps = {
-    hideTooltip,
-    showTooltip,
     getTenantInfo,
 };
 

package/dist/containers/Tenants/Tenants.js

@@ -9,7 +9,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import {Loader, TextInput, Button} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
-import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
+import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
@@ -17,7 +17,6 @@ import {AutoFetcher} from '../../utils/autofetcher';
 
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
 import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
@@ -50,8 +49,6 @@ class Tenants extends React.Component {
         error: PropTypes.bool,
         getTenantsInfo: PropTypes.func,
         tenants: PropTypes.array,
-        showTooltip: PropTypes.func,
-        hideTooltip: PropTypes.func,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
         setHeader: PropTypes.func,
@@ -121,8 +118,6 @@ class Tenants extends React.Component {
         const {
             tenants = [],
             searchQuery,
-            showTooltip,
-            hideTooltip,
             filter,
             handleSearchQuery,
             additionalTenantsInfo = {},
@@ -291,15 +286,8 @@ class Tenants extends React.Component {
                 sortAccessor: ({PoolStats = []}) =>
                     PoolStats.reduce((acc, item) => acc + item.Usage, 0),
                 defaultOrder: DataTable.DESCENDING,
-                align: DataTable.CENTER,
-                render: ({value}) => (
-                    <PoolsGraph
-                        onMouseEnter={showTooltip}
-                        onMouseLeave={hideTooltip}
-                        rowInfo={value}
-                        pools={value}
-                    />
-                ),
+                align: DataTable.LEFT,
+                render: ({value}) => <PoolsGraph rowInfo={value} pools={value} />,
             },
             {
                 name: 'Tablets',
@@ -374,8 +362,6 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = {
     getTenantsInfo,
-    hideTooltip,
-    showTooltip,
     changeFilter,
     setHeader,
 };

package/dist/containers/Versions/NodesTable/NodesTable.tsx

@@ -1,26 +1,15 @@
-import {useDispatch} from 'react-redux';
-
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 
 import type {PreparedClusterNode} from '../../../store/reducers/clusterNodes/types';
-import type {ShowTooltipFunction} from '../../../types/store/tooltip';
-
-import {hideTooltip, showTooltip} from '../../../store/reducers/tooltip';
 import {isUnavailableNode} from '../../../utils/nodes';
 import {formatBytes} from '../../../utils';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
 import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
-import PoolsGraph from '../../../components/PoolsGraph/PoolsGraph';
+import {PoolsGraph} from '../../../components/PoolsGraph/PoolsGraph';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 
-const getColumns = ({
-    onShowTooltip,
-    onHideTooltip,
-}: {
-    onShowTooltip: (...args: Parameters<ShowTooltipFunction>) => void;
-    onHideTooltip: VoidFunction;
-}): Column<PreparedClusterNode>[] => [
+const columns: Column<PreparedClusterNode>[] = [
     {
         name: 'NodeId',
         header: '#',
@@ -89,16 +78,7 @@ const getColumns = ({
             PoolStats.reduce((acc, item) => acc + (item.Usage || 0), 0),
         defaultOrder: DataTable.DESCENDING,
         width: '120px',
-        render: ({row}) =>
-            row.PoolStats ? (
-                <PoolsGraph
-                    onMouseEnter={onShowTooltip}
-                    onMouseLeave={onHideTooltip}
-                    pools={row.PoolStats}
-                />
-            ) : (
-                '—'
-            ),
+        render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
         align: DataTable.LEFT,
     },
     {
@@ -127,21 +107,11 @@ interface NodesTableProps {
 }
 
 export const NodesTable = ({nodes}: NodesTableProps) => {
-    const dispatch = useDispatch();
-
-    const onShowTooltip = (...args: Parameters<ShowTooltipFunction>) => {
-        dispatch(showTooltip(...args));
-    };
-
-    const onHideTooltip = () => {
-        dispatch(hideTooltip());
-    };
-
     return (
         <DataTable
             theme="yandex-cloud"
             data={nodes}
-            columns={getColumns({onShowTooltip, onHideTooltip})}
+            columns={columns}
             settings={{
                 displayIndices: false,
             }}

package/dist/types/additionalProps.ts

@@ -1,5 +1,16 @@
+import type {InfoViewerItem} from '../components/InfoViewer';
 import type {VersionToColorMap} from './versions';
 
 export interface AdditionalVersionsProps {
     getVersionToColorMap?: () => VersionToColorMap;
 }
+
+export interface ClusterLink {
+    title: string;
+    url: string;
+}
+
+export interface AdditionalClusterProps {
+    info?: InfoViewerItem[];
+    links?: ClusterLink[];
+}