ydb-embedded-ui 3.2.0 → 3.2.2

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/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/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, useMemo, 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 tablets = useMemo(() => data?.TabletStateInfo || [], [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);
     }
 

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -22,11 +22,11 @@ import Describe from './Describe/Describe';
 //@ts-ignore
 import HotKeys from './HotKeys/HotKeys';
 //@ts-ignore
-import Heatmap from '../../Heatmap/Heatmap';
+import {Heatmap} from '../../Heatmap';
 //@ts-ignore
 import Compute from './Compute/Compute';
 //@ts-ignore
-import Tablets from '../../Tablets/Tablets';
+import {Tablets} from '../../Tablets';
 import {Consumers} from './Consumers';
 
 import routes, {createHref} from '../../../routes';
@@ -50,11 +50,7 @@ const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
     const dispatch = useDispatch();
-    const {
-        currentSchemaPath,
-        currentSchema: currentItem = {},
-        autorefresh,
-    } = useSelector((state: any) => state.schema);
+    const {currentSchemaPath, autorefresh} = useSelector((state: any) => state.schema);
     const {diagnosticsTab = GeneralPagesIds.overview, wasLoaded} = useSelector(
         (state: any) => state.tenant,
     );
@@ -156,7 +152,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <HotKeys type={type} />;
             }
             case GeneralPagesIds.graph: {
-                return <Heatmap path={currentItem.Path} />;
+                return <Heatmap path={currentSchemaPath} />;
             }
             case GeneralPagesIds.consumers: {
                 return <Consumers path={currentSchemaPath} type={type} />;

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -171,18 +171,18 @@ class TenantOverview extends React.Component {
                         ))}
                 </div>
                 <div className={b('common-info')}>
-                    {PoolStats ? (
-                        <div>
-                            <div className={b('section-title')}>Pools</div>
+                    <div>
+                        <div className={b('section-title')}>Pools</div>
+                        {PoolStats ? (
                             <div className={b('section', {pools: true})}>
                                 {PoolStats.map((pool, poolIndex) => (
                                     <PoolUsage key={poolIndex} data={pool} />
                                 ))}
                             </div>
-                        </div>
-                    ) : (
-                        <div className="error">no pools data</div>
-                    )}
+                        ) : (
+                            <div className="error">no pools data</div>
+                        )}
+                    </div>
                     <InfoViewer
                         title="Metrics"
                         className={b('section', {metrics: true})}

package/dist/containers/Tenants/Tenants.js

@@ -9,7 +9,7 @@ import {Loader, TextInput, Button} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
-import TabletsStatistic from '../../components/TabletsStatistic/TabletsStatistic';
+import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AutoFetcher} from '../../utils/autofetcher';

package/dist/containers/UserSettings/UserSettings.tsx

@@ -1,12 +1,13 @@
 import {connect} from 'react-redux';
 
 import {RadioButton, Switch} from '@gravity-ui/uikit';
-import {Settings} from '../../components/AsideNavigation/Settings';
+import {Settings} from '@gravity-ui/navigation';
+
 import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
-//@ts-ignore
+
 import {INVERTED_DISKS_KEY, THEME_KEY} from '../../utils/constants';
-//@ts-ignore
+
 import {setSettingValue} from '../../store/reducers/settings';
 
 enum Theme {

package/dist/routes.ts

@@ -28,7 +28,7 @@ export const CLUSTER_PAGES = {
 export function createHref(
     route: string,
     params?: object,
-    query: Record<string | number, string | number> = {},
+    query: Record<string | number, string | number | string[] | number[] | undefined> = {},
 ) {
     let extendedQuery = query;
 

package/dist/store/reducers/{heatmap.js → heatmap.ts}

@@ -1,7 +1,17 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
+import type {Reducer} from 'redux';
+
 import '../../services/api';
+import type {
+    IHeatmapAction,
+    IHeatmapApiRequestParams,
+    IHeatmapState,
+    IHeatmapTabletData,
+} from '../../types/store/heatmap';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const FETCH_HEATMAP = createRequestActionTypes('heatmap', 'FETCH_HEATMAP');
 
-const FETCH_TABLETS = createRequestActionTypes('heatmap', 'FETCH_TABLETS');
 const SET_HEATMAP_OPTIONS = 'heatmap/SET_HEATMAP_OPTIONS';
 
 export const initialState = {
@@ -12,15 +22,15 @@ export const initialState = {
     heatmap: false,
 };
 
-const tablets = function z(state = initialState, action) {
+const heatmap: Reducer<IHeatmapState, IHeatmapAction> = (state = initialState, action) => {
     switch (action.type) {
-        case FETCH_TABLETS.REQUEST: {
+        case FETCH_HEATMAP.REQUEST: {
             return {
                 ...state,
                 loading: true,
             };
         }
-        case FETCH_TABLETS.SUCCESS: {
+        case FETCH_HEATMAP.SUCCESS: {
             return {
                 ...state,
                 ...action.data,
@@ -29,7 +39,7 @@ const tablets = function z(state = initialState, action) {
                 error: undefined,
             };
         }
-        case FETCH_TABLETS.FAILURE: {
+        case FETCH_HEATMAP.FAILURE: {
             return {
                 ...state,
                 error: action.error,
@@ -47,16 +57,16 @@ const tablets = function z(state = initialState, action) {
     }
 };
 
-export function getTabletsInfo({nodes, path}) {
+export function getTabletsInfo({nodes, path}: IHeatmapApiRequestParams) {
     return createApiRequest({
         request: Promise.all([
             window.api.getTabletsInfo({nodes, path}),
             window.api.getHeatmapData({path}),
         ]),
-        actions: FETCH_TABLETS,
-        dataHandler: ([tabletsData = [], describe = {}]) => {
+        actions: FETCH_HEATMAP,
+        dataHandler: ([tabletsData = {}, describe = {}]) => {
             const {TabletStateInfo: tablets = []} = tabletsData;
-            const TabletsMap = new Map();
+            const TabletsMap: Map<string, IHeatmapTabletData> = new Map();
             const {PathDescription = {}} = describe;
             const {
                 TablePartitions = [],
@@ -65,7 +75,9 @@ export function getTabletsInfo({nodes, path}) {
             } = PathDescription;
 
             tablets.forEach((item) => {
-                TabletsMap.set(item.TabletId, item);
+                if (item.TabletId) {
+                    TabletsMap.set(item.TabletId, item);
+                }
             });
 
             TablePartitions.forEach((item, index) => {
@@ -74,15 +86,18 @@ export function getTabletsInfo({nodes, path}) {
                     TablePartitionStats[index],
                     TablePartitionMetrics[index],
                 );
-                TabletsMap.set(item.DatashardId, {
-                    ...TabletsMap.get(item.DatashardId),
-                    metrics,
-                });
+                if (item.DatashardId) {
+                    TabletsMap.set(item.DatashardId, {
+                        ...TabletsMap.get(item.DatashardId),
+                        metrics,
+                    });
+                }
             });
 
             const preparedTablets = Array.from(TabletsMap.values());
             const selectMetrics =
                 preparedTablets[0] &&
+                preparedTablets[0].metrics &&
                 Object.keys(preparedTablets[0].metrics).map((item) => {
                     return {
                         value: item,
@@ -95,11 +110,11 @@ export function getTabletsInfo({nodes, path}) {
     });
 }
 
-export function setHeatmapOptions(options) {
+export function setHeatmapOptions(options: Partial<IHeatmapState>) {
     return {
         type: SET_HEATMAP_OPTIONS,
         data: options,
-    };
+    } as const;
 }
 
-export default tablets;
+export default heatmap;

package/dist/store/reducers/settings.js

@@ -1,11 +1,11 @@
 import {
-    defaultUserSettings,
     ALL,
     SAVED_QUERIES_KEY,
     THEME_KEY,
     TENANT_INITIAL_TAB_KEY,
     QUERY_INITIAL_RUN_ACTION_KEY,
     INVERTED_DISKS_KEY,
+    ASIDE_HEADER_COMPACT_KEY,
 } from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
@@ -24,16 +24,26 @@ export function readSavedSettingsValue(key, defaultValue) {
     return savedValue ?? defaultValue;
 }
 
+// navigation managed its compact state internally before, and its approach is not compatible with settings
+// try reading the old localStorage entry to use it as a default value, for backward compatibility
+// assume it is safe to remove this code block if it is at least a few months old
+// there a two of these, search for a similar comment
+let legacyAsideNavCompactState = '';
+try {
+    legacyAsideNavCompactState = String(JSON.parse(getValueFromLS('nvAsideHeader')).isCompact);
+    localStorage.removeItem('nvAsideHeader');
+} catch {}
+
 export const initialState = {
     problemFilter: ALL,
     userSettings: {
-        ...defaultUserSettings,
         ...userSettings,
         [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'light'),
         [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
         [QUERY_INITIAL_RUN_ACTION_KEY]: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY),
+        [ASIDE_HEADER_COMPACT_KEY]: readSavedSettingsValue(ASIDE_HEADER_COMPACT_KEY, legacyAsideNavCompactState || 'true'),
     },
     systemSettings,
 };

package/dist/types/api/compute.ts

@@ -45,7 +45,7 @@ interface TComputeNodeInfo {
 
 // Tablets in compute nodes
 // Types for tabletInfo and tablets inside nodes and storage endpoints are in tablet.ts
-interface TTabletStateInfo {
+export interface TTabletStateInfo {
     Type: string;
     State: EFlag;
     Count: number;