ydb-embedded-ui 4.32.0 → 5.0.0

package/dist/containers/Header/breadcrumbs.tsx

@@ -1,174 +0,0 @@
-import {
-    NodesRight as ClusterIcon,
-    Database as DatabaseIcon,
-    Cpu as ComputeNodeIcon,
-    HardDrive as StorageNodeIcon,
-} from '@gravity-ui/icons';
-
-import type {
-    BreadcrumbsOptions,
-    ClusterBreadcrumbsOptions,
-    NodeBreadcrumbsOptions,
-    Page,
-    TabletBreadcrumbsOptions,
-    TabletsBreadcrumbsOptions,
-    TenantBreadcrumbsOptions,
-} from '../../store/reducers/header/types';
-import {
-    TENANT_DIAGNOSTICS_TABS_IDS,
-    TENANT_PAGE,
-    TENANT_PAGES_IDS,
-} from '../../store/reducers/tenant/constants';
-import {TabletIcon} from '../../components/TabletIcon/TabletIcon';
-import routes, {createHref} from '../../routes';
-import {CLUSTER_DEFAULT_TITLE, getTabletLabel} from '../../utils/constants';
-
-import {getClusterPath} from '../Cluster/utils';
-import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
-import {getDefaultNodePath} from '../Node/NodePages';
-
-const prepareTenantName = (tenantName: string) => {
-    return tenantName.startsWith('/') ? tenantName.slice(1) : tenantName;
-};
-
-export interface RawBreadcrumbItem {
-    text: string;
-    link?: string;
-    icon?: JSX.Element;
-}
-
-const getClusterBreadcrumbs = (
-    options: ClusterBreadcrumbsOptions,
-    query = {},
-): RawBreadcrumbItem[] => {
-    const {clusterName, clusterTab} = options;
-
-    return [
-        {
-            text: clusterName || CLUSTER_DEFAULT_TITLE,
-            link: getClusterPath(clusterTab, query),
-            icon: <ClusterIcon />,
-        },
-    ];
-};
-
-const getTenantBreadcrumbs = (
-    options: TenantBreadcrumbsOptions,
-    query = {},
-): RawBreadcrumbItem[] => {
-    const {tenantName} = options;
-
-    const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
-    const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
-
-    return [...getClusterBreadcrumbs(options, query), {text, link, icon: <DatabaseIcon />}];
-};
-
-const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBreadcrumbItem[] => {
-    const {tenantName, nodeId} = options;
-
-    let breadcrumbs: RawBreadcrumbItem[];
-
-    // Compute nodes have tenantName, storage nodes doesn't
-    const isStorageNode = !tenantName;
-
-    const newQuery = {
-        ...query,
-        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
-        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes,
-    };
-
-    if (isStorageNode) {
-        breadcrumbs = getClusterBreadcrumbs(options, query);
-    } else {
-        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
-    }
-
-    const text = nodeId ? `Node ${nodeId}` : 'Node';
-    const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
-    const icon = isStorageNode ? <StorageNodeIcon /> : <ComputeNodeIcon />;
-
-    breadcrumbs.push({
-        text,
-        link,
-        icon,
-    });
-
-    return breadcrumbs;
-};
-
-const getTabletsBreadcrubms = (
-    options: TabletsBreadcrumbsOptions,
-    query = {},
-): RawBreadcrumbItem[] => {
-    const {tenantName, nodeIds} = options;
-
-    const newQuery = {
-        ...query,
-        [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics,
-        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets,
-    };
-
-    let breadcrumbs: RawBreadcrumbItem[];
-
-    // Cluster system tablets don't have tenantName
-    if (tenantName) {
-        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
-    } else {
-        breadcrumbs = getClusterBreadcrumbs(options, query);
-    }
-
-    const link = createHref(routes.tabletsFilters, undefined, {
-        ...query,
-        nodeIds,
-        path: tenantName,
-    });
-
-    breadcrumbs.push({text: 'Tablets', link});
-
-    return breadcrumbs;
-};
-
-const getTabletBreadcrubms = (
-    options: TabletBreadcrumbsOptions,
-    query = {},
-): RawBreadcrumbItem[] => {
-    const {tabletId, tabletType} = options;
-
-    const breadcrumbs = getTabletsBreadcrubms(options, query);
-
-    breadcrumbs.push({
-        text: tabletId || 'Tablet',
-        icon: <TabletIcon text={getTabletLabel(tabletType)} />,
-    });
-
-    return breadcrumbs;
-};
-
-export const getBreadcrumbs = (
-    page: Page,
-    options: BreadcrumbsOptions,
-    rawBreadcrumbs: RawBreadcrumbItem[] = [],
-    query = {},
-) => {
-    switch (page) {
-        case 'cluster': {
-            return [...rawBreadcrumbs, ...getClusterBreadcrumbs(options, query)];
-        }
-        case 'tenant': {
-            return [...rawBreadcrumbs, ...getTenantBreadcrumbs(options, query)];
-        }
-        case 'node': {
-            return [...rawBreadcrumbs, ...getNodeBreadcrumbs(options, query)];
-        }
-        case 'tablets': {
-            return [...rawBreadcrumbs, ...getTabletsBreadcrubms(options, query)];
-        }
-        case 'tablet': {
-            return [...rawBreadcrumbs, ...getTabletBreadcrubms(options, query)];
-        }
-        default: {
-            return rawBreadcrumbs;
-        }
-    }
-};

package/dist/containers/Heatmap/Heatmap.tsx

@@ -1,204 +0,0 @@
-import React, {useCallback, useEffect, useState} from 'react';
-import {useDispatch} from 'react-redux';
-import cn from 'bem-cn-lite';
-
-import {Checkbox, Select} from '@gravity-ui/uikit';
-
-import type {IHeatmapMetricValue} from '../../types/store/heatmap';
-import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
-import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
-import {formatNumber} from '../../utils/dataFormatters/dataFormatters';
-import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-
-import {Loader} from '../../components/Loader';
-import {ResponseError} from '../../components/Errors/ResponseError';
-
-import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
-import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
-import {Histogram} from './Histogram/Histogram';
-
-import './Heatmap.scss';
-
-const b = cn('heatmap');
-const COLORS_RANGE = getColorRange(COLORS_RANGE_SIZE);
-
-interface HeatmapProps {
-    path: string;
-}
-
-export const Heatmap = ({path}: HeatmapProps) => {
-    const dispatch = useDispatch();
-
-    const itemsContainer = React.createRef<HTMLDivElement>();
-
-    const {autorefresh} = useTypedSelector((state) => state.schema);
-    const {
-        loading,
-        wasLoaded,
-        error,
-        sort,
-        heatmap,
-        metrics,
-        currentMetric,
-        data: tablets = [],
-    } = useTypedSelector((state) => state.heatmap);
-
-    const [selectedMetric, setSelectedMetric] = useState(['']);
-
-    useEffect(() => {
-        if (!currentMetric && metrics && metrics.length) {
-            dispatch(
-                setHeatmapOptions({
-                    currentMetric: metrics[0].value,
-                }),
-            );
-        }
-        if (currentMetric) {
-            setSelectedMetric([currentMetric]);
-        }
-    }, [currentMetric, metrics, dispatch]);
-
-    const fetchData = useCallback(
-        (isBackground: boolean) => {
-            if (!isBackground) {
-                dispatch(setHeatmapOptions({wasLoaded: false}));
-            }
-            dispatch(getTabletsInfo({path}));
-        },
-        [path, dispatch],
-    );
-
-    useAutofetcher(fetchData, [fetchData], autorefresh);
-
-    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
-        dispatch(showTooltip(...args));
-    };
-
-    const onHideTooltip = () => {
-        dispatch(hideTooltip);
-    };
-
-    const handleMetricChange = (value: string[]) => {
-        dispatch(
-            setHeatmapOptions({
-                currentMetric: value[0] as IHeatmapMetricValue,
-            }),
-        );
-    };
-    const handleCheckboxChange = () => {
-        dispatch(
-            setHeatmapOptions({
-                sort: !sort,
-            }),
-        );
-    };
-
-    const handleHeatmapChange = () => {
-        dispatch(
-            setHeatmapOptions({
-                heatmap: !heatmap,
-            }),
-        );
-    };
-
-    const renderHistogram = () => {
-        return (
-            <Histogram
-                tablets={tablets}
-                currentMetric={currentMetric}
-                showTooltip={onShowTooltip}
-                hideTooltip={onHideTooltip}
-            />
-        );
-    };
-
-    const renderHeatmapCanvas = () => {
-        const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
-
-        const preparedTablets = tablets.map((tablet) => {
-            const value = currentMetric && Number(tablet.metrics?.[currentMetric]);
-            const colorIndex = getColorIndex(value, min, max);
-            const color = COLORS_RANGE[colorIndex];
-
-            return {
-                ...tablet,
-                color,
-                value,
-                formattedValue: formatNumber(value),
-                currentMetric,
-            };
-        });
-        const sortedTablets = sort
-            ? preparedTablets.sort((x, y) => Number(y.value) - Number(x.value))
-            : preparedTablets;
-
-        return (
-            <div ref={itemsContainer} className={b('items')}>
-                <HeatmapCanvas
-                    tablets={sortedTablets}
-                    parentRef={itemsContainer}
-                    showTooltip={onShowTooltip}
-                    hideTooltip={onHideTooltip}
-                    currentMetric={currentMetric}
-                />
-            </div>
-        );
-    };
-
-    const renderContent = () => {
-        const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
-
-        return (
-            <div className={b()}>
-                <div className={b('filters')}>
-                    <Select
-                        className={b('heatmap-select')}
-                        value={selectedMetric}
-                        options={metrics}
-                        onUpdate={handleMetricChange}
-                        width={200}
-                    />
-                    <div className={b('sort-checkbox')}>
-                        <Checkbox onUpdate={handleCheckboxChange} checked={sort}>
-                            Sort
-                        </Checkbox>
-                    </div>
-                    <div className={b('histogram-checkbox')}>
-                        <Checkbox onUpdate={handleHeatmapChange} checked={heatmap}>
-                            Heatmap
-                        </Checkbox>
-                    </div>
-                    <div className={b('limits')}>
-                        <div className={b('limits-block')}>
-                            <div className={b('limits-title')}>min:</div>
-                            <div className={b('limits-value')}>
-                                {Number.isInteger(min) ? formatNumber(min) : '—'}
-                            </div>
-                        </div>
-                        <div className={b('limits-block')}>
-                            <div className={b('limits-title')}>max:</div>
-                            <div className={b('limits-value')}>
-                                {Number.isInteger(max) ? formatNumber(max) : '—'}
-                            </div>
-                        </div>
-                        <div className={b('limits-block')}>
-                            <div className={b('limits-title')}>count:</div>
-                            <div className={b('limits-value')}>{formatNumber(tablets.length)}</div>
-                        </div>
-                    </div>
-                </div>
-                {heatmap ? renderHeatmapCanvas() : renderHistogram()}
-            </div>
-        );
-    };
-
-    if (loading && !wasLoaded) {
-        return <Loader />;
-    }
-
-    if (error) {
-        return <ResponseError error={error} />;
-    }
-
-    return renderContent();
-};

package/dist/containers/Node/Node.tsx

@@ -1,168 +0,0 @@
-import {useEffect, useMemo, useRef} from 'react';
-import {useLocation, useRouteMatch} from 'react-router';
-import cn from 'bem-cn-lite';
-import {useDispatch} from 'react-redux';
-
-import {Tabs} from '@gravity-ui/uikit';
-import {Link} from 'react-router-dom';
-
-import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';
-import {Tablets} from '../Tablets';
-import {StorageWrapper} from '../Storage/StorageWrapper';
-import NodeStructure from './NodeStructure/NodeStructure';
-import {Loader} from '../../components/Loader';
-import {BasicNodeViewer} from '../../components/BasicNodeViewer';
-import {FullNodeViewer} from '../../components/FullNodeViewer/FullNodeViewer';
-
-import {getNodeInfo, resetNode} from '../../store/reducers/node/node';
-import routes, {createHref, parseQuery} from '../../routes';
-import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
-import {AutoFetcher} from '../../utils/autofetcher';
-import {useTypedSelector} from '../../utils/hooks';
-
-import type {AdditionalNodesProps} from '../../types/additionalProps';
-
-import {clusterTabsIds} from '../Cluster/utils';
-
-import './Node.scss';
-
-const b = cn('node');
-
-export const STORAGE_ROLE = 'Storage';
-
-const autofetcher = new AutoFetcher();
-
-interface NodeProps {
-    additionalNodesProps?: AdditionalNodesProps;
-    className?: string;
-}
-
-function Node(props: NodeProps) {
-    const container = useRef<HTMLDivElement>(null);
-
-    const dispatch = useDispatch();
-    const location = useLocation();
-
-    const {loading, wasLoaded, error, data} = useTypedSelector((state) => state.node);
-    const node = data?.SystemStateInfo?.[0];
-
-    const match =
-        useRouteMatch<{id: string; activeTab: string}>(routes.node) ?? Object.create(null);
-
-    const {id: nodeId, activeTab} = match.params;
-    const {tenantName: tenantNameFromQuery} = parseQuery(location);
-
-    const {activeTabVerified, nodeTabs} = useMemo(() => {
-        const hasStorage = node?.Roles?.find((el) => el === STORAGE_ROLE);
-
-        let actualActiveTab = activeTab;
-        if (!hasStorage && activeTab === STORAGE) {
-            actualActiveTab = OVERVIEW;
-        }
-        const nodePages = hasStorage ? NODE_PAGES : NODE_PAGES.filter((el) => el.id !== STORAGE);
-
-        const actualNodeTabs = nodePages.map((page) => {
-            return {
-                ...page,
-                title: page.name,
-            };
-        });
-
-        return {activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs};
-    }, [activeTab, node]);
-
-    useEffect(() => {
-        const tenantName = node?.Tenants?.[0] || tenantNameFromQuery?.toString();
-
-        dispatch(
-            setHeaderBreadcrumbs('node', {
-                clusterTab: clusterTabsIds.nodes,
-                tenantName,
-                nodeId,
-            }),
-        );
-    }, [dispatch, node, nodeId, tenantNameFromQuery]);
-
-    useEffect(() => {
-        const fetchData = () => dispatch(getNodeInfo(nodeId));
-        fetchData();
-        autofetcher.start();
-        autofetcher.fetch(() => fetchData());
-
-        return () => {
-            autofetcher.stop();
-            dispatch(resetNode());
-        };
-    }, [dispatch, nodeId]);
-
-    const renderTabs = () => {
-        return (
-            <div className={b('tabs')}>
-                <Tabs
-                    size="l"
-                    items={nodeTabs}
-                    activeTab={activeTabVerified}
-                    wrapTo={({id}, tabNode) => (
-                        <Link
-                            to={createHref(routes.node, {id: nodeId, activeTab: id})}
-                            key={id}
-                            className={b('tab')}
-                        >
-                            {tabNode}
-                        </Link>
-                    )}
-                    allowNotSelected={true}
-                />
-            </div>
-        );
-    };
-    const renderTabContent = () => {
-        switch (activeTab) {
-            case STORAGE: {
-                return (
-                    <div className={b('storage')}>
-                        <StorageWrapper nodeId={nodeId} parentContainer={container.current} />
-                    </div>
-                );
-            }
-            case TABLETS: {
-                return <Tablets nodeId={nodeId} className={b('node-page-wrapper')} />;
-            }
-
-            case OVERVIEW: {
-                return <FullNodeViewer node={node} className={b('overview-wrapper')} />;
-            }
-
-            case STRUCTURE: {
-                return <NodeStructure className={b('node-page-wrapper')} nodeId={nodeId} />;
-            }
-            default:
-                return false;
-        }
-    };
-
-    if (loading && !wasLoaded) {
-        return <Loader size="l" />;
-    } else if (error) {
-        return <div>{error.statusText}</div>;
-    } else {
-        if (node) {
-            return (
-                <div className={b(null, props.className)} ref={container}>
-                    <BasicNodeViewer
-                        node={node}
-                        additionalNodesProps={props.additionalNodesProps}
-                        className={b('header')}
-                    />
-
-                    {renderTabs()}
-
-                    <div className={b('content')}>{renderTabContent()}</div>
-                </div>
-            );
-        }
-        return <div className="error">no node data</div>;
-    }
-}
-
-export default Node;

package/dist/containers/Node/NodePages.ts

@@ -1,33 +0,0 @@
-import routes, {Query, createHref} from '../../routes';
-
-export const STORAGE = 'storage';
-export const TABLETS = 'tablets';
-export const OVERVIEW = 'overview';
-export const STRUCTURE = 'structure';
-
-export const NODE_PAGES = [
-    {
-        id: OVERVIEW,
-        name: 'Overview',
-    },
-    {
-        id: STORAGE,
-        name: 'Storage',
-    },
-    {id: STRUCTURE, name: 'Structure'},
-    {
-        id: TABLETS,
-        name: 'Tablets',
-    },
-];
-
-export function getDefaultNodePath(nodeId: string | number, query: Query = {}) {
-    return createHref(
-        routes.node,
-        {
-            id: nodeId,
-            activeTab: OVERVIEW,
-        },
-        query,
-    );
-}