ydb-embedded-ui 3.1.0 → 3.2.1

package/dist/containers/Heatmap/Heatmap.tsx

@@ -0,0 +1,203 @@
+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';
+import {prepareQueryError} from '../../utils/query';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {Loader} from '../../components/Loader';
+import type {IHeatmapMetricValue} from '../../types/store/heatmap';
+
+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 <div>{prepareQueryError(error)}</div>;
+    }
+
+    return renderContent();
+};

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

@@ -161,7 +161,8 @@ export const HeatmapCanvas = (props) => {
 
 HeatmapCanvas.propTypes = {
     tablets: PropTypes.array,
-    parentRef: PropTypes.node,
+    parentRef: PropTypes.object,
     showTooltip: PropTypes.func,
     hideTooltip: PropTypes.func,
+    currentMetric: PropTypes.string,
 };

package/dist/containers/Heatmap/index.ts

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

package/dist/containers/Node/Node.tsx

@@ -8,7 +8,7 @@ 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/Tablets';
+import {Tablets} from '../Tablets';
 import Storage from '../Storage/Storage';
 import NodeOverview from './NodeOverview/NodeOverview';
 import NodeStructure from './NodeStructure/NodeStructure';

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -27,7 +27,7 @@ function DiskStateProgressBar({
     diskAllocatedPercent = -1,
     severity,
 }: DiskStateProgressBarProps) {
-    const inverted = useSelector((state) => getSettingValue(state, INVERTED_DISKS_KEY));
+    const inverted = useSelector((state) => JSON.parse(getSettingValue(state, INVERTED_DISKS_KEY)));
 
     const renderAllocatedPercent = () => {
         return (

package/dist/containers/Storage/Storage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {RadioButton, Label} from '@gravity-ui/uikit';
+import {RadioButton} from '@gravity-ui/uikit';
 
 import {Search} from '../../components/Search';
 import {UsageFilter} from './UsageFilter';
@@ -12,6 +12,7 @@ import {NodesUptimeFilterValues} from '../../utils/nodes';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {AccessDenied} from '../../components/Errors/403';
+import {EntitiesCount} from '../../components/EntitiesCount';
 
 import {
     getStorageInfo,
@@ -230,22 +231,17 @@ class Storage extends React.Component {
         const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
             this.props;
 
-        let label = `${storageType === StorageTypes.groups ? 'Groups' : 'Nodes'}: `;
+        const entityName = storageType === StorageTypes.groups ? 'Groups' : 'Nodes';
         const count = storageType === StorageTypes.groups ? groupsCount : nodesCount;
 
-        if (loading && !wasLoaded) {
-            label += '...';
-            return label;
-        }
-
-        // count.total can be missing in old versions
-        if (flatListStorageEntities.length === Number(count.total) || !count.total) {
-            label += flatListStorageEntities.length;
-        } else {
-            label += `${flatListStorageEntities.length} of ${count.total}`;
-        }
-
-        return label;
+        return (
+            <EntitiesCount
+                label={entityName}
+                loading={loading && !wasLoaded}
+                total={count.total}
+                current={flatListStorageEntities.length}
+            />
+        );
     }
 
     renderControls() {
@@ -307,10 +303,7 @@ class Storage extends React.Component {
                         disabled={usageFilterOptions.length === 0}
                     />
                 )}
-
-                <Label theme="info" size="m">
-                    {this.renderEntitiesCount()}
-                </Label>
+                {this.renderEntitiesCount()}
             </div>
         );
     }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -16,6 +16,8 @@ import './StorageNodes.scss';
 enum TableColumnsIds {
     NodeId = 'NodeId',
     FQDN = 'FQDN',
+    DataCenter = 'DataCenter',
+    Rack = 'Rack',
     uptime = 'uptime',
     PDisks = 'PDisks',
     Missing = 'Missing',
@@ -36,6 +38,8 @@ interface StorageNodesProps {
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     NodeId: 'Node ID',
     FQDN: 'FQDN',
+    DataCenter: 'DC',
+    Rack: 'Rack',
     uptime: 'Uptime',
     PDisks: 'PDisks',
     Missing: 'Missing',
@@ -96,6 +100,18 @@ function StorageNodes({
             },
             align: DataTable.LEFT,
         },
+        {
+            name: TableColumnsIds.DataCenter,
+            header: tableColumnsNames[TableColumnsIds.DataCenter],
+            render: ({row}) => row.DataCenter || '—',
+            align: DataTable.LEFT,
+        },
+        {
+            name: TableColumnsIds.Rack,
+            header: tableColumnsNames[TableColumnsIds.Rack],
+            render: ({row}) => row.Rack || '—',
+            align: DataTable.LEFT,
+        },
         {
             name: TableColumnsIds.uptime,
             header: tableColumnsNames[TableColumnsIds.uptime],

package/dist/containers/Tablets/Tablets.scss

@@ -37,9 +37,4 @@
         line-height: 18px;
         text-align: center;
     }
-
-    &__loader-wrapper {
-        display: flex;
-        justify-content: center;
-    }
 }

package/dist/containers/Tablets/Tablets.tsx

@@ -0,0 +1,172 @@
+import {useCallback, useEffect, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+import ReactList from 'react-list';
+
+import {Select} from '@gravity-ui/uikit';
+
+import Tablet from '../../components/Tablet/Tablet';
+import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
+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,
+    setStateFilter,
+    setTypeFilter,
+} from '../../store/reducers/tablets';
+
+import './Tablets.scss';
+
+import i18n from './i18n';
+
+const b = cn('tablets');
+
+interface TabletsProps {
+    path?: string;
+    nodeId?: string | number;
+    className?: string;
+}
+
+export const Tablets = ({path, nodeId, className}: TabletsProps) => {
+    const dispatch = useDispatch();
+
+    const {
+        data = {},
+        wasLoaded,
+        loading,
+        error,
+        stateFilter,
+        typeFilter,
+    } = useTypedSelector((state) => state.tablets);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const {TabletStateInfo: tablets = []} = data;
+
+    const fetchData = useCallback(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(clearWasLoadingFlag());
+            }
+            if (nodeId) {
+                dispatch(getTabletsInfo({nodes: [String(nodeId)]}));
+            } else if (path) {
+                dispatch(getTabletsInfo({path}));
+            }
+        },
+        [path, nodeId, dispatch],
+    );
+
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+
+    const [tabletsToRender, setTabletsToRender] = useState<TTabletStateInfo[]>([]);
+
+    useEffect(() => {
+        let filteredTablets = tablets;
+
+        if (typeFilter.length > 0) {
+            filteredTablets = filteredTablets.filter((tablet) =>
+                typeFilter.some((filter) => tablet.Type === filter),
+            );
+        }
+        if (stateFilter.length > 0) {
+            filteredTablets = filteredTablets.filter((tablet) =>
+                stateFilter.some((filter) => tablet.State === filter),
+            );
+        }
+        setTabletsToRender(filteredTablets);
+    }, [tablets, stateFilter, typeFilter]);
+
+    const handleStateFilterChange = (value: string[]) => {
+        dispatch(setStateFilter(value as ETabletState[]));
+    };
+
+    const handleTypeFilterChange = (value: string[]) => {
+        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}
+                className={b('tablet')}
+            />
+        );
+    };
+
+    const renderContent = () => {
+        const states = Array.from(new Set(tablets.map((tablet) => tablet.State)))
+            .filter((state): state is ETabletState => state !== undefined)
+            .map((item) => ({
+                value: item,
+                content: item,
+            }));
+        const types = Array.from(new Set(tablets.map((tablet) => tablet.Type)))
+            .filter((type): type is EType => type !== undefined)
+            .map((item) => ({
+                value: item,
+                content: item,
+            }));
+
+        return (
+            <div className={b(null, className)}>
+                <div className={b('header')}>
+                    <Select
+                        className={b('filter-control')}
+                        multiple
+                        placeholder={i18n('controls.allItems')}
+                        label={`${i18n('controls.state')}:`}
+                        options={states}
+                        value={stateFilter}
+                        onUpdate={handleStateFilterChange}
+                    />
+                    <Select
+                        className={b('filter-control')}
+                        multiple
+                        placeholder={i18n('controls.allItems')}
+                        label={`${i18n('controls.type')}:`}
+                        options={types}
+                        value={typeFilter}
+                        onUpdate={handleTypeFilterChange}
+                    />
+                    <TabletsOverall tablets={tablets} />
+                </div>
+
+                <div className={b('items')}>
+                    <ReactList
+                        itemRenderer={renderTablet}
+                        length={tabletsToRender.length}
+                        type="uniform"
+                    />
+                </div>
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return <Loader />;
+    } else if (error) {
+        return <div className="error">{error.statusText}</div>;
+    } else {
+        return tablets.length > 0 ? (
+            renderContent()
+        ) : (
+            <div className="error">{i18n('noTabletsData')}</div>
+        );
+    }
+};

package/dist/containers/Tablets/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "controls.type": "Type",
+  "controls.state": "State",
+  "controls.allItems": "All items",
+  "noTabletsData": "No tablets data"
+}

package/dist/{components/AsideNavigation → containers/Tablets}/i18n/index.ts

@@ -3,7 +3,7 @@ import {i18n, Lang} from '../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 
-const COMPONENT = 'ydb-embedded-ui';
+const COMPONENT = 'ydb-tablets';
 
 i18n.registerKeyset(Lang.En, COMPONENT, en);
 i18n.registerKeyset(Lang.Ru, COMPONENT, ru);

package/dist/containers/Tablets/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "controls.type": "Тип",
+  "controls.state": "Состояние",
+  "controls.allItems": "Все",
+  "noTabletsData": "Нет информации о таблетках"
+}

package/dist/containers/Tablets/index.ts

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

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -11,7 +11,7 @@ import ReactList from 'react-list';
 import Tablet from '../../components/Tablet/Tablet';
 import {AccessDenied} from '../../components/Errors/403';
 
-import {TABLET_COLOR_TO_STATES, TABLETS_STATES} from '../../utils/constants';
+import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {
     getTabletsInfo,
@@ -61,7 +61,7 @@ class TabletsFilters extends React.Component {
     };
 
     static getStateFiltersFromColor = (color) => {
-        return TABLET_COLOR_TO_STATES[color] || [color];
+        return tabletColorToTabletState[color] || [color];
     };
 
     static CONTROL_WIDTH = 220;
@@ -159,7 +159,7 @@ class TabletsFilters extends React.Component {
         const {nodeFilter, tenantPath} = this.state;
         const {tablets, filteredTablets, nodes, stateFilter, typeFilter, error} = this.props;
 
-        const states = TABLETS_STATES.map((item) => ({value: item, content: item}));
+        const states = tabletStates.map((item) => ({value: item, content: item}));
         const types = Array.from(new Set(...[_.map(tablets, (tblt) => tblt.Type)])).map((item) => ({
             value: item,
             content: item,
@@ -243,8 +243,6 @@ const Filters = ({
                 <Select
                     multiple
                     label="Node ID"
-                    showApply
-                    showItemMeta
                     width={TabletsFilters.CONTROL_WIDTH}
                     popupWidth={TabletsFilters.POPUP_WIDTH}
                     placeholder="All"
@@ -255,7 +253,7 @@ const Filters = ({
                         return (
                             <div className={b('node')}>
                                 <div>{option.content}</div>
-                                <div className={b('node-meta')}>{option.meta}</div>
+                                <div className={b('node-meta')} title={option.meta}>{option.meta}</div>
                             </div>
                         );
                     }}
@@ -267,7 +265,6 @@ const Filters = ({
                 <Select
                     multiple
                     label="multiple"
-                    showApply
                     width={TabletsFilters.CONTROL_WIDTH}
                     placeholder="All"
                     options={states}
@@ -280,7 +277,6 @@ const Filters = ({
                 <Select
                     multiple
                     label="Types"
-                    showApply
                     width={TabletsFilters.CONTROL_WIDTH}
                     placeholder="All"
                     options={types}

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -6,14 +6,18 @@
     @include flex-container();
 
     &__node {
-        display: flex;
-        flex-direction: column;
+        overflow: hidden;
 
         font-size: var(--yc-text-body-1-font-size);
         line-height: var(--yc-text-body-1-line-height);
     }
 
     &__node-meta {
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
         color: var(--yc-color-text-secondary);
     }