ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/containers/Header/Header.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router';
+import { useDispatch } from 'react-redux';
+import block from 'bem-cn-lite';
+import { Breadcrumbs } from '@gravity-ui/uikit';
+import { ExternalLinkWithIcon } from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
+import { backend, customBackend } from '../../store';
+import { getClusterInfo } from '../../store/reducers/cluster/cluster';
+import { useTypedSelector } from '../../utils/hooks';
+import { DEVELOPER_UI_TITLE } from '../../utils/constants';
+import { parseQuery } from '../../routes';
+import { getBreadcrumbs } from './breadcrumbs';
+import './Header.scss';
+const b = block('header');
+const getInternalLink = (singleClusterMode) => {
+    if (singleClusterMode && !customBackend) {
+        return `/internal`;
+    }
+    return backend + '/internal';
+};
+function Header({ mainPage }) {
+    var _a;
+    const dispatch = useDispatch();
+    const history = useHistory();
+    const location = useLocation();
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
+    const { page, pageBreadcrumbsOptions } = useTypedSelector((state) => state.header);
+    const { data } = useTypedSelector((state) => state.cluster);
+    const queryParams = parseQuery(location);
+    const clusterNameFromQuery = (_a = queryParams.clusterName) === null || _a === void 0 ? void 0 : _a.toString();
+    const clusterNameFinal = (data === null || data === void 0 ? void 0 : data.Name) || clusterNameFromQuery;
+    useEffect(() => {
+        dispatch(getClusterInfo(clusterNameFromQuery));
+    }, [dispatch, clusterNameFromQuery]);
+    const breadcrumbItems = useMemo(() => {
+        const rawBreadcrumbs = [];
+        let options = pageBreadcrumbsOptions;
+        if (mainPage) {
+            rawBreadcrumbs.push(mainPage);
+        }
+        if (clusterNameFinal) {
+            options = Object.assign(Object.assign({}, pageBreadcrumbsOptions), { clusterName: clusterNameFinal });
+        }
+        const breadcrumbs = getBreadcrumbs(page, options, rawBreadcrumbs, queryParams);
+        return breadcrumbs.map((item) => {
+            const action = () => {
+                if (item.link) {
+                    history.push(item.link);
+                }
+            };
+            return Object.assign(Object.assign({}, item), { action });
+        });
+    }, [clusterNameFinal, mainPage, history, queryParams, page, pageBreadcrumbsOptions]);
+    const renderHeader = () => {
+        return (_jsxs("header", Object.assign({ className: b() }, { children: [_jsx("div", { children: _jsx(Breadcrumbs, { items: breadcrumbItems, lastDisplayedItemsCount: 1, firstDisplayedItemsCount: 1, renderItemContent: ({ icon, text }) => {
+                            if (!icon) {
+                                return text;
+                            }
+                            return (_jsxs("span", Object.assign({ className: b('breadcrumb') }, { children: [_jsx("div", Object.assign({ className: b('breadcrumb__icon') }, { children: icon })), text] })));
+                        } }) }), _jsx(ExternalLinkWithIcon, { title: DEVELOPER_UI_TITLE, url: getInternalLink(singleClusterMode) })] })));
+    };
+    return renderHeader();
+}
+export default Header;

package/dist/containers/Header/breadcrumbs.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { BreadcrumbsOptions, Page } from '../../store/reducers/header/types';
+export interface RawBreadcrumbItem {
+    text: string;
+    link?: string;
+    icon?: JSX.Element;
+}
+export declare const getBreadcrumbs: (page: Page, options: BreadcrumbsOptions, rawBreadcrumbs?: RawBreadcrumbItem[], query?: {}) => RawBreadcrumbItem[];

package/dist/containers/Header/breadcrumbs.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NodesRight as ClusterIcon, Database as DatabaseIcon, Cpu as ComputeNodeIcon, HardDrive as StorageNodeIcon, } from '@gravity-ui/icons';
+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) => {
+    return tenantName.startsWith('/') ? tenantName.slice(1) : tenantName;
+};
+const getClusterBreadcrumbs = (options, query = {}) => {
+    const { clusterName, clusterTab } = options;
+    return [
+        {
+            text: clusterName || CLUSTER_DEFAULT_TITLE,
+            link: getClusterPath(clusterTab, query),
+            icon: _jsx(ClusterIcon, {}),
+        },
+    ];
+};
+const getTenantBreadcrumbs = (options, query = {}) => {
+    const { tenantName } = options;
+    const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
+    const link = tenantName ? getTenantPath(Object.assign(Object.assign({}, query), { name: tenantName })) : undefined;
+    return [...getClusterBreadcrumbs(options, query), { text, link, icon: _jsx(DatabaseIcon, {}) }];
+};
+const getNodeBreadcrumbs = (options, query = {}) => {
+    const { tenantName, nodeId } = options;
+    let breadcrumbs;
+    // Compute nodes have tenantName, storage nodes doesn't
+    const isStorageNode = !tenantName;
+    const newQuery = Object.assign(Object.assign({}, 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 ? _jsx(StorageNodeIcon, {}) : _jsx(ComputeNodeIcon, {});
+    breadcrumbs.push({
+        text,
+        link,
+        icon,
+    });
+    return breadcrumbs;
+};
+const getTabletsBreadcrubms = (options, query = {}) => {
+    const { tenantName, nodeIds } = options;
+    const newQuery = Object.assign(Object.assign({}, query), { [TENANT_PAGE]: TENANT_PAGES_IDS.diagnostics, [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.tablets });
+    let breadcrumbs;
+    // Cluster system tablets don't have tenantName
+    if (tenantName) {
+        breadcrumbs = getTenantBreadcrumbs(options, newQuery);
+    }
+    else {
+        breadcrumbs = getClusterBreadcrumbs(options, query);
+    }
+    const link = createHref(routes.tabletsFilters, undefined, Object.assign(Object.assign({}, query), { nodeIds, path: tenantName }));
+    breadcrumbs.push({ text: 'Tablets', link });
+    return breadcrumbs;
+};
+const getTabletBreadcrubms = (options, query = {}) => {
+    const { tabletId, tabletType } = options;
+    const breadcrumbs = getTabletsBreadcrubms(options, query);
+    breadcrumbs.push({
+        text: tabletId || 'Tablet',
+        icon: _jsx(TabletIcon, { text: getTabletLabel(tabletType) }),
+    });
+    return breadcrumbs;
+};
+export const getBreadcrumbs = (page, options, rawBreadcrumbs = [], 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.d.ts

@@ -0,0 +1,6 @@
+import './Heatmap.scss';
+interface HeatmapProps {
+    path: string;
+}
+export declare const Heatmap: ({ path }: HeatmapProps) => JSX.Element;
+export {};

package/dist/containers/Heatmap/Heatmap.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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);
+export const Heatmap = ({ path }) => {
+    const dispatch = useDispatch();
+    const itemsContainer = React.createRef();
+    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) => {
+        if (!isBackground) {
+            dispatch(setHeatmapOptions({ wasLoaded: false }));
+        }
+        dispatch(getTabletsInfo({ path }));
+    }, [path, dispatch]);
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+    const onShowTooltip = (...args) => {
+        dispatch(showTooltip(...args));
+    };
+    const onHideTooltip = () => {
+        dispatch(hideTooltip);
+    };
+    const handleMetricChange = (value) => {
+        dispatch(setHeatmapOptions({
+            currentMetric: value[0],
+        }));
+    };
+    const handleCheckboxChange = () => {
+        dispatch(setHeatmapOptions({
+            sort: !sort,
+        }));
+    };
+    const handleHeatmapChange = () => {
+        dispatch(setHeatmapOptions({
+            heatmap: !heatmap,
+        }));
+    };
+    const renderHistogram = () => {
+        return (_jsx(Histogram, { tablets: tablets, currentMetric: currentMetric, showTooltip: onShowTooltip, hideTooltip: onHideTooltip }));
+    };
+    const renderHeatmapCanvas = () => {
+        const { min, max } = getCurrentMetricLimits(currentMetric, tablets);
+        const preparedTablets = tablets.map((tablet) => {
+            var _a;
+            const value = currentMetric && Number((_a = tablet.metrics) === null || _a === void 0 ? void 0 : _a[currentMetric]);
+            const colorIndex = getColorIndex(value, min, max);
+            const color = COLORS_RANGE[colorIndex];
+            return Object.assign(Object.assign({}, tablet), { color,
+                value, formattedValue: formatNumber(value), currentMetric });
+        });
+        const sortedTablets = sort
+            ? preparedTablets.sort((x, y) => Number(y.value) - Number(x.value))
+            : preparedTablets;
+        return (_jsx("div", Object.assign({ ref: itemsContainer, className: b('items') }, { children: _jsx(HeatmapCanvas, { tablets: sortedTablets, parentRef: itemsContainer, showTooltip: onShowTooltip, hideTooltip: onHideTooltip, currentMetric: currentMetric }) })));
+    };
+    const renderContent = () => {
+        const { min, max } = getCurrentMetricLimits(currentMetric, tablets);
+        return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('filters') }, { children: [_jsx(Select, { className: b('heatmap-select'), value: selectedMetric, options: metrics, onUpdate: handleMetricChange, width: 200 }), _jsx("div", Object.assign({ className: b('sort-checkbox') }, { children: _jsx(Checkbox, Object.assign({ onUpdate: handleCheckboxChange, checked: sort }, { children: "Sort" })) })), _jsx("div", Object.assign({ className: b('histogram-checkbox') }, { children: _jsx(Checkbox, Object.assign({ onUpdate: handleHeatmapChange, checked: heatmap }, { children: "Heatmap" })) })), _jsxs("div", Object.assign({ className: b('limits') }, { children: [_jsxs("div", Object.assign({ className: b('limits-block') }, { children: [_jsx("div", Object.assign({ className: b('limits-title') }, { children: "min:" })), _jsx("div", Object.assign({ className: b('limits-value') }, { children: Number.isInteger(min) ? formatNumber(min) : '—' }))] })), _jsxs("div", Object.assign({ className: b('limits-block') }, { children: [_jsx("div", Object.assign({ className: b('limits-title') }, { children: "max:" })), _jsx("div", Object.assign({ className: b('limits-value') }, { children: Number.isInteger(max) ? formatNumber(max) : '—' }))] })), _jsxs("div", Object.assign({ className: b('limits-block') }, { children: [_jsx("div", Object.assign({ className: b('limits-title') }, { children: "count:" })), _jsx("div", Object.assign({ className: b('limits-value') }, { children: formatNumber(tablets.length) }))] }))] }))] })), heatmap ? renderHeatmapCanvas() : renderHistogram()] })));
+    };
+    if (loading && !wasLoaded) {
+        return _jsx(Loader, {});
+    }
+    if (error) {
+        return _jsx(ResponseError, { error: error });
+    }
+    return renderContent();
+};

package/dist/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.d.ts

@@ -0,0 +1,11 @@
+export function HeatmapCanvas(props: any): JSX.Element;
+export namespace HeatmapCanvas {
+    namespace propTypes {
+        const tablets: PropTypes.Requireable<any[]>;
+        const parentRef: PropTypes.Requireable<object>;
+        const showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        const hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        const currentMetric: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/dist/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js

@@ -1,51 +1,41 @@
-import {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
-
-import {basename as appBasename} from '../../../store/index';
-import routes, {createHref} from '../../../routes';
-
+import { basename as appBasename } from '../../../store/index';
+import routes, { createHref } from '../../../routes';
 const b = cn('heatmap');
-const defaultDimensions = {width: 0, height: 0};
-
+const defaultDimensions = { width: 0, height: 0 };
 const TABLET_SIZE = 10;
 const TABLET_PADDING = 2;
-
 export const HeatmapCanvas = (props) => {
     const [dimensions, setDimensions] = useState(defaultDimensions);
-    const {tablets} = props;
+    const { tablets } = props;
     const canvasRef = useRef(null);
     const containerRef = useRef(null);
-
     function drawTablet(ctx) {
         return (tablet, index) => {
-            const {columnsCount} = dimensions;
+            const { columnsCount } = dimensions;
             const rectX = (index % columnsCount) * (TABLET_SIZE + TABLET_PADDING);
             const rectY = Math.floor(index / columnsCount) * (TABLET_SIZE + TABLET_PADDING);
-
             ctx.fillStyle = tablet.color || 'gray';
             ctx.fillRect(rectX, rectY, TABLET_SIZE, TABLET_SIZE);
         };
     }
-
     useEffect(() => {
         const canvas = canvasRef.current;
         const ctx = canvas.getContext('2d');
-
         ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
         tablets.map(drawTablet(ctx));
     });
-
     useLayoutEffect(() => {
         const container = containerRef.current;
-
         if (container) {
             const width = container.offsetWidth - 15;
             const columnsCount = Math.floor(width / (TABLET_SIZE + TABLET_PADDING));
             const rowsCount = Math.ceil(tablets.length / columnsCount);
             const height = rowsCount * (TABLET_SIZE + TABLET_PADDING);
-
             setDimensions({
                 width,
                 height,
@@ -54,7 +44,6 @@ export const HeatmapCanvas = (props) => {
             });
         }
     }, []);
-
     const getOffsetTop = () => {
         let element = canvasRef.current;
         let offsetTop = 0;
@@ -64,7 +53,6 @@ export const HeatmapCanvas = (props) => {
         }
         return offsetTop;
     };
-
     const getOffsetLeft = () => {
         let element = canvasRef.current;
         let offsetLeft = 0;
@@ -74,38 +62,32 @@ export const HeatmapCanvas = (props) => {
         }
         return offsetLeft;
     };
-
     const getTabletIndex = (x, y) => {
-        const {columnsCount} = dimensions;
+        const { columnsCount } = dimensions;
         const colStep = TABLET_SIZE + TABLET_PADDING;
         const rowStep = TABLET_SIZE + TABLET_PADDING;
-
         const xCol = Math.floor(x / colStep);
         const yRow = Math.floor(y / rowStep);
         const index = columnsCount * yRow + xCol;
-
         return index;
     };
     const generateTabletExternalLink = (tablet) => {
-        const {TabletId: id} = tablet;
+        const { TabletId: id } = tablet;
         const hostname = window.location.hostname;
-        const path = createHref(routes.tablet, {id});
+        const path = createHref(routes.tablet, { id });
         const protocol = 'https://';
         const href = [hostname, appBasename, path]
             .map((item) => (item.startsWith('/') ? item.slice(1) : item))
             .filter(Boolean)
             .join('/');
-
         return `${protocol}${href}`;
     };
     const _onCanvasClick = (e) => {
         const parent = props.parentRef.current;
         const x = e.clientX - getOffsetLeft() + parent.scrollLeft;
         const y = e.clientY - getOffsetTop() + parent.scrollTop;
-
         const tabletIndex = getTabletIndex(x, y);
         const tablet = tablets[tabletIndex];
-
         if (tablet) {
             window.open(generateTabletExternalLink(tablet), '_blank');
         }
@@ -125,7 +107,6 @@ export const HeatmapCanvas = (props) => {
         const parent = props.parentRef.current;
         const xPos = x - getOffsetLeft() + parent.scrollLeft;
         const yPos = y - getOffsetTop() + parent.scrollTop;
-
         const tabletIndex = getTabletIndex(xPos, yPos);
         const tablet = tablets[tabletIndex];
         if (tablet) {
@@ -137,28 +118,13 @@ export const HeatmapCanvas = (props) => {
                 left: x - 20,
                 top: y - 20,
             });
-        } else {
+        }
+        else {
             props.hideTooltip();
         }
     }, 20);
-
-    return (
-        <div
-            ref={containerRef}
-            className={b('canvas-container')}
-            onMouseLeave={_onCanvasMouseLeave}
-        >
-            <canvas
-                ref={canvasRef}
-                width={dimensions.width}
-                height={dimensions.height}
-                onClick={_onCanvasClick}
-                onMouseMove={(e) => _onCanvasMouseMove(e.clientX, e.clientY)}
-            />
-        </div>
-    );
+    return (_jsx("div", Object.assign({ ref: containerRef, className: b('canvas-container'), onMouseLeave: _onCanvasMouseLeave }, { children: _jsx("canvas", { ref: canvasRef, width: dimensions.width, height: dimensions.height, onClick: _onCanvasClick, onMouseMove: (e) => _onCanvasMouseMove(e.clientX, e.clientY) }) })));
 };
-
 HeatmapCanvas.propTypes = {
     tablets: PropTypes.array,
     parentRef: PropTypes.object,

package/dist/containers/Heatmap/Histogram/Histogram.d.ts

@@ -0,0 +1,10 @@
+export function Histogram(props: any): JSX.Element;
+export namespace Histogram {
+    namespace propTypes {
+        const tablets: PropTypes.Requireable<any[]>;
+        const currentMetric: PropTypes.Requireable<string>;
+        const showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+        const hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";

package/dist/containers/Heatmap/Histogram/Histogram.js

@@ -1,43 +1,25 @@
-import {useRef} from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-
-import {getColorRange, getCurrentMetricLimits} from '../util';
-import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
-
+import { getColorRange, getCurrentMetricLimits } from '../util';
+import { formatNumber } from '../../../utils/dataFormatters/dataFormatters';
 import './Histogram.scss';
-
 const b = cn('histogram');
-
 const HistogramBar = (props) => {
     const barRef = useRef();
-    const {data = {}, maxCount} = props;
-    const {count, leftBound, rightBound, color} = data;
+    const { data = {}, maxCount } = props;
+    const { count, leftBound, rightBound, color } = data;
     const height = (count / maxCount) * 100;
-
     const _onHistogramItemEnter = () => {
         const ref = barRef.current;
-
-        props.showTooltip(
-            ref,
-            {
-                count,
-                leftBound,
-                rightBound,
-            },
-            'histogram',
-        );
+        props.showTooltip(ref, {
+            count,
+            leftBound,
+            rightBound,
+        }, 'histogram');
     };
-
-    return (
-        <div
-            ref={barRef}
-            className={b('item')}
-            style={{backgroundColor: color, height: `${height}%`}}
-            onMouseEnter={_onHistogramItemEnter}
-            onMouseLeave={props.hideTooltip}
-        />
-    );
+    return (_jsx("div", { ref: barRef, className: b('item'), style: { backgroundColor: color, height: `${height}%` }, onMouseEnter: _onHistogramItemEnter, onMouseLeave: props.hideTooltip }));
 };
 HistogramBar.propTypes = {
     data: PropTypes.object,
@@ -45,11 +27,9 @@ HistogramBar.propTypes = {
     showTooltip: PropTypes.func,
     hideTooltip: PropTypes.func,
 };
-
 export const Histogram = (props) => {
-    const {tablets, currentMetric} = props;
-    const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
-
+    const { tablets, currentMetric } = props;
+    const { min, max } = getCurrentMetricLimits(currentMetric, tablets);
     const histogramColorRange = getColorRange(50);
     const step = (max - min) / 50;
     const histogramRange = histogramColorRange.map((item, index) => {
@@ -62,43 +42,19 @@ export const Histogram = (props) => {
     });
     let maxCount = 0;
     tablets.forEach((tablet) => {
+        var _a;
         const value = currentMetric && Number(tablet.metrics[currentMetric]);
         const bucketIndex = Math.floor(value / step);
-        const nextCountValue = histogramRange[bucketIndex]?.count + 1;
-
+        const nextCountValue = ((_a = histogramRange[bucketIndex]) === null || _a === void 0 ? void 0 : _a.count) + 1;
         if (nextCountValue > maxCount) {
             maxCount = nextCountValue;
         }
-
-        histogramRange[bucketIndex] = {
-            ...histogramRange[bucketIndex],
-            count: nextCountValue,
-        };
+        histogramRange[bucketIndex] = Object.assign(Object.assign({}, histogramRange[bucketIndex]), { count: nextCountValue });
     });
-
     const renderHistogramItem = (item, index) => {
-        return (
-            <HistogramBar
-                key={index}
-                data={item}
-                maxCount={maxCount}
-                showTooltip={props.showTooltip}
-                hideTooltip={props.hideTooltip}
-            />
-        );
+        return (_jsx(HistogramBar, { data: item, maxCount: maxCount, showTooltip: props.showTooltip, hideTooltip: props.hideTooltip }, index));
     };
-
-    return (
-        <div className={b()}>
-            <div className={b('chart')}>
-                {Boolean(max) && histogramRange.map(renderHistogramItem)}
-                <div className={b('x-min')}>{formatNumber(min)}</div>
-                <div className={b('x-max')}>{formatNumber(max)}</div>
-                <div className={b('y-min')}>0</div>
-                <div className={b('y-max')}>{formatNumber(maxCount)}</div>
-            </div>
-        </div>
-    );
+    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('chart') }, { children: [Boolean(max) && histogramRange.map(renderHistogramItem), _jsx("div", Object.assign({ className: b('x-min') }, { children: formatNumber(min) })), _jsx("div", Object.assign({ className: b('x-max') }, { children: formatNumber(max) })), _jsx("div", Object.assign({ className: b('y-min') }, { children: "0" })), _jsx("div", Object.assign({ className: b('y-max') }, { children: formatNumber(maxCount) }))] })) })));
 };
 Histogram.propTypes = {
     tablets: PropTypes.array,

package/dist/containers/Heatmap/index.js

@@ -0,0 +1 @@
+export * from './Heatmap';

package/dist/containers/Heatmap/util.d.ts

@@ -0,0 +1,40 @@
+export const COLORS_RANGE_SIZE: 500;
+export namespace LIMITED_METRICS {
+    namespace CPU {
+        const min: number;
+        const max: number;
+    }
+    namespace Network {
+        const min_1: number;
+        export { min_1 as min };
+        const max_1: number;
+        export { max_1 as max };
+    }
+    namespace Storage {
+        const min_2: number;
+        export { min_2 as min };
+        const max_2: number;
+        export { max_2 as max };
+    }
+    namespace DataSize {
+        const min_3: number;
+        export { min_3 as min };
+        const max_3: number;
+        export { max_3 as max };
+    }
+    namespace RowCount {
+        const min_4: number;
+        export { min_4 as min };
+    }
+    namespace IndexSize {
+        const min_5: number;
+        export { min_5 as min };
+    }
+}
+export function getRangeBetweenColors(range: any, color1: any, color2: any): any[];
+export function getColorRange(range: any): any[];
+export function getColorIndex(value: any, min: any, max: any): number;
+export function getCurrentMetricLimits(metric: any, tablets: any): {
+    min: any;
+    max: any;
+};