ydb-embedded-ui 4.4.2 → 4.5.0

package/dist/utils/tooltip.js

@@ -1,83 +1,11 @@
 import cn from 'bem-cn-lite';
-import {calcUptime} from '.';
 import JSONTree from 'react-json-inspector';
 
-import {NodeEndpointsTooltip} from '../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
-
-const poolB = cn('pool-tooltip');
-
-const PoolTooltip = (props) => {
-    const {data} = props;
-    const usage = (data.Usage * 100).toFixed(2);
-    return (
-        data && (
-            <div className={poolB()}>
-                <table>
-                    <tbody>
-                        <tr>
-                            <td className={poolB('label')}>Pool</td>
-                            <td>{data.Name}</td>
-                        </tr>
-                        <tr>
-                            <td className={poolB('label')}>Usage</td>
-                            <td>{usage} %</td>
-                        </tr>
-                        <tr>
-                            <td className={poolB('label')}>Threads</td>
-                            <td>{data.Threads}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        )
-    );
-};
-
-const tabletB = cn('tablet-tooltip');
-
-const TabletTooltip = (props) => {
-    const {data, additionalData} = props;
-    return (
-        data && (
-            <div className={tabletB()}>
-                <table>
-                    <tbody>
-                        <tr>
-                            <td className={tabletB('label')}>Tablet</td>
-                            <td className={tabletB('value')}>{data.TabletId}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>NodeID</td>
-                            <td className={tabletB('value')}>{data.NodeId}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>State</td>
-                            <td className={tabletB('value')}>{data.State}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>Type</td>
-                            <td className={tabletB('value')}>{data.Type}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>Uptime</td>
-                            <td className={tabletB('value')}>{calcUptime(data.ChangeTime)}</td>
-                        </tr>
-                        <tr>
-                            <td className={tabletB('label')}>Generation</td>
-                            <td className={tabletB('value')}>{data.Generation}</td>
-                        </tr>
-                        {additionalData && (
-                            <tr>
-                                <td className={tabletB('label')}>{additionalData.name}</td>
-                                <td className={tabletB('value')}>{additionalData.value}</td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        )
-    );
-};
+import {
+    NodeEndpointsTooltipContent,
+    TabletTooltipContent,
+    PoolTooltipContent,
+} from '../components/TooltipsContent';
 
 const nodeB = cn('node-tootltip');
 
@@ -172,12 +100,12 @@ const jsonB = cn('json-tooltip');
 
 export const tooltipTemplates = {
     // eslint-disable-next-line react/display-name
-    pool: (data) => <PoolTooltip data={data} />,
+    pool: (data) => <PoolTooltipContent data={data} />,
     // eslint-disable-next-line react/display-name
-    tablet: (data, additionalData) => <TabletTooltip data={data} additionalData={additionalData} />,
+    tablet: (data) => <TabletTooltipContent data={data} />,
     // eslint-disable-next-line react/display-name
     node: (data) => <NodeTooltip data={data} />,
-    nodeEndpoints: (data) => <NodeEndpointsTooltip data={data} />,
+    nodeEndpoints: (data) => <NodeEndpointsTooltipContent data={data} />,
     // eslint-disable-next-line react/display-name
     tabletsOverall: (data) => <TabletsOverallTooltip data={data} />,
     // eslint-disable-next-line react/display-name

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.4.2",
+  "version": "4.5.0",
   "files": [
     "dist"
   ],

package/dist/components/PoolBar/PoolBar.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-
-import './PoolBar.scss';
-
-const b = cn('pool-bar');
-
-const getBarType = (usage) => {
-    if (usage >= 75) {
-        return 'danger';
-    } else if (usage >= 50 && usage < 75) {
-        return 'warning';
-    } else {
-        return 'normal';
-    }
-};
-
-class PoolBar extends React.Component {
-    static propTypes = {
-        data: PropTypes.object,
-        onMouseEnter: PropTypes.func,
-        onMouseLeave: PropTypes.func,
-    };
-
-    bar = React.createRef();
-
-    _onBarHover = () => {
-        this.props.onMouseEnter(this.bar.current, this.props.data, 'pool');
-    };
-    _onBarLeave = () => {
-        this.props.onMouseLeave();
-    };
-    render() {
-        const {Usage: usage = 0} = this.props.data;
-        const usagePercents = Math.min(usage * 100, 100);
-        const type = getBarType(usagePercents);
-
-        return (
-            <div
-                ref={this.bar}
-                className={b({type})}
-                onMouseEnter={this._onBarHover}
-                onMouseLeave={this._onBarLeave}
-            >
-                <div style={{height: `${usagePercents}%`}} className={b('value', {type})} />
-            </div>
-        );
-    }
-}
-
-export default PoolBar;

package/dist/components/PoolsGraph/PoolsGraph.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import PoolBar from '../PoolBar/PoolBar';
-
-import './PoolsGraph.scss';
-
-const b = cn('pools-graph');
-
-class PoolsGraph extends React.Component {
-    static propTypes = {
-        pools: PropTypes.arrayOf(PropTypes.object).isRequired,
-        onMouseLeave: PropTypes.func,
-        onMouseEnter: PropTypes.func,
-    };
-    static defaultProps = {
-        pools: [],
-    };
-    render() {
-        const {pools} = this.props;
-
-        return (
-            <div className={b()}>
-                {pools.map((item, index) => (
-                    <PoolBar key={index} data={item} {...this.props} />
-                ))}
-            </div>
-        );
-    }
-}
-
-export default PoolsGraph;

package/dist/containers/ClusterInfo/ClusterInfo.tsx

@@ -1,207 +0,0 @@
-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 {Link, Progress} 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 {Icon} from '../../components/Icon';
-import {Loader} from '../../components/Loader';
-import {ResponseError} from '../../components/Errors/ResponseError';
-
-import type {AdditionalVersionsProps} from '../../types/additionalProps';
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
-import {getClusterInfo} from '../../store/reducers/cluster/cluster';
-import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
-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 {compareTablets} from './utils';
-
-import './ClusterInfo.scss';
-
-const b = block('cluster-info');
-
-interface ClusterInfoProps {
-    clusterTitle?: string;
-    additionalClusterInfo?: InfoViewerItem[];
-    additionalVersionsProps?: AdditionalVersionsProps;
-}
-
-export const ClusterInfo = ({
-    clusterTitle,
-    additionalClusterInfo = [],
-    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]);
-
-    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
-        dispatch(showTooltip(...args));
-    };
-
-    const onHideTooltip = () => {
-        dispatch(hideTooltip());
-    };
-
-    const getInfo = () => {
-        let link = backend + '/internal';
-
-        if (singleClusterMode && !customBackend) {
-            link = `/internal`;
-        }
-
-        const info: InfoViewerItem[] = [
-            {
-                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}
-                    />
-                ),
-            },
-            {
-                label: 'Versions',
-                value: <div>{cluster?.Versions?.join(', ')}</div>,
-            },
-            ...additionalClusterInfo,
-            {
-                label: 'Internal viewer',
-                value: (
-                    <Link href={link} target="_blank">
-                        <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
-                    </Link>
-                ),
-            },
-        ];
-
-        return info;
-    };
-
-    if ((loading && !wasLoaded) || (nodesLoading && !nodesWasLoaded)) {
-        return <Loader size="l" />;
-    }
-
-    if (error || nodesError) {
-        return <ResponseError error={error || nodesError} />;
-    }
-
-    return (
-        <div className={b()}>
-            <div className={b('header')}>
-                <div className="info">
-                    <div className={b('common')}>
-                        <div className={b('url')}>
-                            <EntityStatus
-                                size="m"
-                                status={cluster?.Overall}
-                                name={clusterTitle ?? cluster?.Name ?? 'Unknown cluster'}
-                            />
-                        </div>
-
-                        {cluster?.DataCenters && <Tags tags={cluster?.DataCenters} />}
-
-                        <div className={b('system-tablets')}>
-                            {cluster?.SystemTablets &&
-                                cluster.SystemTablets.sort(compareTablets).map(
-                                    (tablet, tabletIndex) => (
-                                        <Tablet
-                                            onMouseEnter={onShowTooltip}
-                                            onMouseLeave={onHideTooltip}
-                                            key={tabletIndex}
-                                            tablet={tablet}
-                                        />
-                                    ),
-                                )}
-                        </div>
-                    </div>
-                    <InfoViewer dots={true} info={getInfo()} />
-                </div>
-                <div className={b('version-progress')}>
-                    <h3 className={b('progress-label')}>Versions</h3>
-                    <Progress value={100} stack={versionsValues} />
-                </div>
-            </div>
-
-            <Versions nodes={nodes} versionToColor={versionToColor} />
-        </div>
-    );
-};