ydb-embedded-ui 5.2.0 → 5.3.0

package/dist/components/StatusIcon/StatusIcon.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@gravity-ui/uikit';
+import CircleExclamationFillIcon from '@gravity-ui/icons/svgs/circle-exclamation-fill.svg';
+import CircleInfoFillIcon from '@gravity-ui/icons/svgs/circle-info-fill.svg';
+import CircleXmarkFillIcon from '@gravity-ui/icons/svgs/circle-xmark-fill.svg';
+import TriangleExclamationFillIcon from '@gravity-ui/icons/svgs/triangle-exclamation-fill.svg';
+import { EFlag } from '../../types/api/enums';
+import { cn } from '../../utils/cn';
+import './StatusIcon.scss';
+const b = cn('ydb-status-icon');
+const icons = {
+    [EFlag.Blue]: CircleInfoFillIcon,
+    [EFlag.Yellow]: CircleExclamationFillIcon,
+    [EFlag.Orange]: TriangleExclamationFillIcon,
+    [EFlag.Red]: CircleXmarkFillIcon,
+};
+export function StatusIcon({ status = EFlag.Grey, size = 's', mode = 'color' }) {
+    const modifiers = { state: status.toLowerCase(), size };
+    if (mode === 'icons' && status in icons) {
+        return (_jsx(Icon, { className: b('status-icon', modifiers), data: icons[status] }));
+    }
+    return _jsx("div", { className: b('status-color', modifiers) });
+}

package/dist/components/StatusIcon/StatusIcon.scss

@@ -0,0 +1,69 @@
+.ydb-status-icon {
+    &__status-color {
+        &_state_green {
+            background-color: var(--ydb-color-status-green);
+        }
+        &_state_yellow {
+            background-color: var(--ydb-color-status-yellow);
+        }
+        &_state_blue {
+            background-color: var(--ydb-color-status-blue);
+        }
+        &_state_red {
+            background-color: var(--ydb-color-status-red);
+        }
+        &_state_grey {
+            background-color: var(--ydb-color-status-grey);
+        }
+        &_state_orange {
+            background-color: var(--ydb-color-status-orange);
+        }
+    }
+
+    &__status-icon {
+        &_state_blue {
+            color: var(--ydb-color-status-blue);
+        }
+        &_state_yellow {
+            color: var(--ydb-color-status-yellow);
+        }
+        &_state_orange {
+            color: var(--ydb-color-status-orange);
+        }
+        &_state_red {
+            color: var(--ydb-color-status-red);
+        }
+    }
+
+    &__status-color,
+    &__status-icon {
+        flex-shrink: 0;
+
+        margin-right: 8px;
+
+        border-radius: 3px;
+        &_size_xs {
+            aspect-ratio: 1;
+
+            width: 12px;
+            height: 12px;
+        }
+        &_size_s {
+            aspect-ratio: 1;
+
+            width: 16px;
+            height: 16px;
+        }
+        &_size_m {
+            aspect-ratio: 1;
+
+            width: 18px;
+            height: 18px;
+        }
+
+        &_size_l {
+            width: 27px;
+            height: 27px;
+        }
+    }
+}

package/dist/components/Tablet/Tablet.scss

@@ -16,7 +16,7 @@
         padding: 10px;
     }
 
-    &_status_gray {
+    &_status_grey {
         background-color: var(--ydb-color-status-grey);
     }
     &_status_yellow {

package/dist/components/TabletsOverall/TabletsOverall.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDispatch } from 'react-redux';
 import cn from 'bem-cn-lite';
 import { Progress } from '@gravity-ui/uikit';
 import { hideTooltip, showTooltip } from '../../store/reducers/tooltip';
+import { useTypedDispatch } from '../../utils/hooks';
 import { COLORS_PRIORITY } from '../../utils/constants';
 import './TabletsOverall.scss';
 // to be able to see problem places with very small percentage, we'll set minimum percentage to 3.
@@ -17,12 +17,12 @@ const colors = {
 };
 const b = cn('kv-tablets-overall');
 function TabletsOverall({ tablets }) {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const tabletsCount = tablets.length;
-    const substractPercentsFromMaxPercents = (statesForOverallProgress, substractValue) => {
+    const subtractPercentsFromMaxPercents = (statesForOverallProgress, subtractValue) => {
         Object.keys(statesForOverallProgress).some((key) => {
             if (statesForOverallProgress[key] > 10) {
-                statesForOverallProgress[key] -= minOverallPercentValue - substractValue;
+                statesForOverallProgress[key] -= minOverallPercentValue - subtractValue;
                 return true;
             }
             return false;
@@ -51,7 +51,7 @@ function TabletsOverall({ tablets }) {
     // replace percents which are smaller then 3 to 3.
     Object.keys(statesForOverallProgress).forEach((key) => {
         if (statesForOverallProgress[key] < minOverallPercentValue) {
-            substractPercentsFromMaxPercents(statesForOverallProgress, statesForOverallProgress[key]);
+            subtractPercentsFromMaxPercents(statesForOverallProgress, statesForOverallProgress[key]);
             statesForOverallProgress[key] = minOverallPercentValue;
         }
     });
@@ -61,7 +61,7 @@ function TabletsOverall({ tablets }) {
         colorKey: key,
         value: statesForOverallProgress[key],
     }));
-    // sort stack to achieve order "green, orange, yellow, red, blue, gray"
+    // sort stack to achieve order "green, orange, yellow, red, blue, grey"
     stack.sort((a, b) => COLORS_PRIORITY[b.colorKey] - COLORS_PRIORITY[a.colorKey]);
     return (_jsxs("div", Object.assign({ className: b('row', { overall: true }) }, { children: [_jsx("span", Object.assign({ className: b('label', { overall: true }) }, { children: "Overall:" })), _jsx("div", Object.assign({ onMouseLeave: () => dispatch(hideTooltip()), onMouseEnter: (e) => dispatch(showTooltip(e.target, tooltipData, 'tabletsOverall')) }, { children: _jsx(Progress, { value: memoryProgress, stack: stack }) }))] })));
 }

package/dist/components/TabletsStatistic/TabletsStatistic.d.ts

@@ -1,7 +1,7 @@
 import type { TTabletStateInfo as TFullTabletStateInfo } from '../../types/api/tablet';
 import type { TTabletStateInfo as TComputeTabletStateInfo } from '../../types/api/compute';
 import './TabletsStatistic.scss';
-declare type Tablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
+type Tablets = TFullTabletStateInfo[] | TComputeTabletStateInfo[];
 interface TabletsStatisticProps {
     tablets: Tablets;
     path: string | undefined;

package/dist/components/TabletsStatistic/TabletsStatistic.scss

@@ -39,7 +39,7 @@
             color: var(--g-color-text-danger);
             background: var(--g-color-base-danger-light);
         }
-        &_state_gray {
+        &_state_grey {
             color: var(--g-color-text-secondary);
             border: 1px solid var(--g-color-line-generic-hover);
         }

package/dist/components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import './Tag.scss';
-export declare type TagType = 'blue';
+export type TagType = 'blue';
 interface TagProps {
     text: string;
     type?: TagType;

package/dist/components/UsageLabel/UsageLabel.js

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'bem-cn-lite';
 import { Label } from '@gravity-ui/uikit';

package/dist/components/VirtualTable/TableHead.js

@@ -54,7 +54,7 @@ export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder =
             const columnsWidth = {};
             entries.forEach((entry) => {
                 var _a;
-                // @ts-ignore ignore custrom property usage
+                // @ts-expect-error ignore custrom property usage
                 const id = (_a = entry.target.attributes[COLUMN_NAME_HTML_ATTRIBUTE]) === null || _a === void 0 ? void 0 : _a.value;
                 columnsWidth[id] = entry.contentRect.width;
             });
@@ -70,7 +70,7 @@ export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder =
     const handleSort = (columnId) => {
         let newSortParams = {};
         // Order is changed in following order:
-        // 1. Inactive Sort Order - gray icon of default order
+        // 1. Inactive Sort Order - grey icon of default order
         // 2. Active default order
         // 3. Active not default order
         if (columnId === sortParams.columnId) {

package/dist/components/VirtualTable/reducer.d.ts

@@ -2,7 +2,7 @@ import type { Reducer } from 'react';
 import type { IResponseError } from '../../types/api/error';
 import type { Chunk } from './types';
 declare const SET_CHUNK_DATA = "infiniteTable/SET_CHUNK_DATA";
-declare type VirtualTableState<T> = Record<string, Chunk<T> | undefined>;
+type VirtualTableState<T> = Record<string, Chunk<T> | undefined>;
 interface SetChunkDataAction<T> {
     type: typeof SET_CHUNK_DATA;
     data: {
@@ -39,6 +39,6 @@ export declare const removeChunk: (id: string) => {
 export declare const resetChunks: () => {
     readonly type: "infiniteTable/RESET_CHUNKS";
 };
-declare type VirtualTableAction<T> = SetChunkDataAction<T> | ReturnType<typeof setChunkError> | ReturnType<typeof initChunk> | ReturnType<typeof setChunkLoading> | ReturnType<typeof removeChunk> | ReturnType<typeof resetChunks>;
+type VirtualTableAction<T> = SetChunkDataAction<T> | ReturnType<typeof setChunkError> | ReturnType<typeof initChunk> | ReturnType<typeof setChunkLoading> | ReturnType<typeof removeChunk> | ReturnType<typeof resetChunks>;
 export declare const createVirtualTableReducer: <T>() => Reducer<VirtualTableState<T>, VirtualTableAction<T>>;
 export {};

package/dist/components/VirtualTable/types.d.ts

@@ -8,16 +8,16 @@ export interface Chunk<T> {
     data?: T[];
     error?: IResponseError;
 }
-export declare type GetChunk<T> = (id: number) => Chunk<T> | undefined;
-export declare type OnEntry = (id: string) => void;
-export declare type OnLeave = (id: string) => void;
-export declare type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
-export declare type SortOrderType = typeof ASCENDING | typeof DESCENDING;
-export declare type SortParams = {
+export type GetChunk<T> = (id: number) => Chunk<T> | undefined;
+export type OnEntry = (id: string) => void;
+export type OnLeave = (id: string) => void;
+export type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
+export type SortOrderType = typeof ASCENDING | typeof DESCENDING;
+export type SortParams = {
     columnId?: string;
     sortOrder?: SortOrderType;
 };
-export declare type OnSort = (params: SortParams) => void;
+export type OnSort = (params: SortParams) => void;
 export interface Column<T> {
     name: string;
     header?: ReactNode;
@@ -36,15 +36,15 @@ export interface VirtualTableData<T> {
     total: number;
     found: number;
 }
-export declare type FetchData<T> = (limit: number, offset: number, sortParams?: SortParams) => Promise<VirtualTableData<T>>;
-export declare type OnError = (error?: IResponseError) => void;
+export type FetchData<T> = (limit: number, offset: number, sortParams?: SortParams) => Promise<VirtualTableData<T>>;
+export type OnError = (error?: IResponseError) => void;
 interface ControlsParams {
     totalEntities: number;
     foundEntities: number;
     inited: boolean;
 }
-export declare type RenderControls = (params: ControlsParams) => ReactNode;
-export declare type RenderEmptyDataMessage = () => ReactNode;
-export declare type RenderErrorMessage = (error: IResponseError) => ReactNode;
-export declare type GetRowClassName<T> = (row: T) => string | undefined;
+export type RenderControls = (params: ControlsParams) => ReactNode;
+export type RenderEmptyDataMessage = () => ReactNode;
+export type RenderErrorMessage = (error: IResponseError) => ReactNode;
+export type GetRowClassName<T> = (row: T) => string | undefined;
 export {};

package/dist/components/slots/types.d.ts

@@ -7,7 +7,7 @@ export interface SlotItem<Props = {}, Type = unknown> {
     ref?: React.Ref<Type>;
     rendered: ExtractChildrenType<Props>;
 }
-declare type ExtractChildrenType<Props> = Props extends {
+type ExtractChildrenType<Props> = Props extends {
     children: infer Children;
 } ? Children : Props extends {
     children?: infer Children;

package/dist/containers/App/App.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Store } from 'redux';
+import type { Store } from '@reduxjs/toolkit';
 import type { History } from 'history';
 import type { YDBEmbeddedUISettings } from '../UserSettings/settings';
 import './App.scss';

package/dist/containers/App/Content.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import cn from 'bem-cn-lite';
-import { connect, useDispatch } from 'react-redux';
+import { connect } from 'react-redux';
 import routes from '../../routes';
 import { Clusters } from '../Clusters/Clusters';
 import Cluster from '../Cluster/Cluster';
 import Tenant from '../Tenant/Tenant';
 import Node from '../Node/Node';
+import { PDisk } from '../PDisk/PDisk';
 import { Tablet } from '../Tablet';
 import TabletsFilters from '../TabletsFilters/TabletsFilters';
 import Header from '../Header/Header';
@@ -15,8 +16,8 @@ import Authentication from '../Authentication/Authentication';
 import { getUser } from '../../store/reducers/authentication/authentication';
 import { getClusterPath } from '../Cluster/utils';
 import { useSlots } from '../../components/slots';
-import { useTypedSelector } from '../../utils/hooks';
-import { ClusterSlot, ClustersSlot, NodeSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, } from './appSlots';
+import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
+import { ClusterSlot, ClustersSlot, NodeSlot, PDiskSlot, RedirectSlot, RoutesSlot, TabletSlot, TabletsFiltersSlot, TenantSlot, } from './appSlots';
 import i18n from './i18n';
 import './App.scss';
 const b = cn('app');
@@ -36,6 +37,11 @@ const routesSlots = [
         slot: NodeSlot,
         component: Node,
     },
+    {
+        path: routes.pDisk,
+        slot: PDiskSlot,
+        component: PDisk,
+    },
     {
         path: routes.tablet,
         slot: TabletSlot,
@@ -87,7 +93,7 @@ export function Content(props) {
                             }), _jsx(Redirect, Object.assign({}, redirectProps))] })] }, "single-cluster")] }));
 }
 function GetUser() {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const { isAuthenticated, isInternalUser } = useTypedSelector((state) => ({
         isAuthenticated: state.authentication.isAuthenticated,
         isInternalUser: Boolean(state.authentication.user),

package/dist/containers/App/Providers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Store } from 'redux';
+import type { Store } from '@reduxjs/toolkit';
 import type { History } from 'history';
 import type { ComponentsRegistry } from '../../components/ComponentsProvider/componentsRegistry';
 interface ProvidersProps {

package/dist/containers/App/appSlots.d.ts

@@ -2,6 +2,7 @@ import type { RedirectProps, RouteComponentProps } from 'react-router';
 import type Cluster from '../Cluster/Cluster';
 import type { Clusters } from '../Clusters/Clusters';
 import type Node from '../Node/Node';
+import type { PDisk } from '../PDisk/PDisk';
 import type { Tablet } from '../Tablet';
 import type TabletsFilters from '../TabletsFilters/TabletsFilters';
 import type Tenant from '../Tenant/Tenant';
@@ -25,6 +26,11 @@ export declare const NodeSlot: import("../../components/slots/types").SlotCompon
         component: typeof Node;
     } & RouteComponentProps) => React.ReactNode);
 }, never>;
+export declare const PDiskSlot: import("../../components/slots/types").SlotComponent<{
+    children: import("react").ReactNode | ((props: {
+        component: typeof PDisk;
+    } & RouteComponentProps) => React.ReactNode);
+}, never>;
 export declare const TabletSlot: import("../../components/slots/types").SlotComponent<{
     children: import("react").ReactNode | ((props: {
         component: typeof Tablet;

package/dist/containers/App/appSlots.js

@@ -3,6 +3,7 @@ export const ClustersSlot = createSlot('clusters');
 export const ClusterSlot = createSlot('cluster');
 export const TenantSlot = createSlot('tenant');
 export const NodeSlot = createSlot('node');
+export const PDiskSlot = createSlot('pDisk');
 export const TabletSlot = createSlot('tablet');
 export const TabletsFiltersSlot = createSlot('tabletsFilters');
 export const RoutesSlot = createSlot('routes');

package/dist/containers/AppWithClusters/AppWithClusters.d.ts

@@ -1,5 +1,5 @@
 import type { History } from 'history';
-import type { Store } from 'redux';
+import type { Store } from '@reduxjs/toolkit';
 import type { GetMonitoringClusterLink, GetMonitoringLink } from '../../utils/monitoring';
 import { YDBEmbeddedUISettings } from '../UserSettings/settings';
 import React from 'react';

package/dist/containers/AppWithClusters/AppWithClusters.js

@@ -8,7 +8,7 @@ import { settings } from '../UserSettings/settings';
 import { USE_CLUSTER_BALANCER_AS_BACKEND_KEY } from '../../utils/constants';
 import i18n from './i18n';
 const defaultUserSettings = settings;
-defaultUserSettings[1].sections[0].settings.push({
+defaultUserSettings[2].sections[0].settings.push({
     title: i18n('settings.useClusterBalancerAsBackend.title'),
     helpPopoverContent: i18n('settings.useClusterBalancerAsBackend.popover'),
     settingKey: USE_CLUSTER_BALANCER_AS_BACKEND_KEY,

package/dist/containers/AsideNavigation/YdbInternalUser/YdbInternalUser.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useHistory } from 'react-router';
-import { useDispatch } from 'react-redux';
 import { Button, Icon } from '@gravity-ui/uikit';
 import routes, { createHref } from '../../../routes';
-import { useTypedSelector } from '../../../utils/hooks';
+import { useTypedSelector, useTypedDispatch } from '../../../utils/hooks';
 import { logout } from '../../../store/reducers/authentication/authentication';
 import { cn } from '../../../utils/cn';
 import signOutIcon from '@gravity-ui/icons/svgs/arrow-right-from-square.svg';
@@ -17,7 +16,7 @@ export function YdbInternalUser() {
     const handleLoginClick = () => {
         history.push(createHref(routes.auth, undefined, { returnUrl: encodeURIComponent(location.href) }));
     };
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const handleLogout = () => {
         dispatch(logout);
     };

package/dist/containers/Authentication/Authentication.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { useHistory, useLocation } from 'react-router';
 import cn from 'bem-cn-lite';
 import { Button, TextInput, Icon, Link as ExternalLink } from '@gravity-ui/uikit';
 import { authenticate } from '../../store/reducers/authentication/authentication';
-import { useTypedSelector } from '../../utils/hooks';
+import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import { parseQuery } from '../../routes';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import showIcon from '../../assets/icons/show.svg';
@@ -14,7 +13,7 @@ import closeIcon from '../../assets/icons/close.svg';
 import './Authentication.scss';
 const b = cn('authentication');
 function Authentication({ closable = false }) {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const history = useHistory();
     const location = useLocation();
     const { returnUrl } = parseQuery(location);
@@ -42,8 +41,6 @@ function Authentication({ closable = false }) {
         setPasswordError('');
     };
     const onLoginClick = () => {
-        // @ts-expect-error
-        // typed dispatch required, remove error expectation after adding it
         dispatch(authenticate(login, pass)).then(() => {
             if (returnUrl) {
                 const decodedUrl = decodeURIComponent(returnUrl.toString());

package/dist/containers/Cluster/Cluster.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from 'react';
 import { Redirect, Switch, Route, useLocation, useRouteMatch } from 'react-router';
-import { useDispatch } from 'react-redux';
 import { Helmet } from 'react-helmet-async';
 import cn from 'bem-cn-lite';
 import qs from 'qs';
@@ -11,13 +10,13 @@ import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { getClusterInfo, updateDefaultClusterTab } from '../../store/reducers/cluster/cluster';
 import { getClusterNodes } from '../../store/reducers/clusterNodes/clusterNodes';
 import { parseNodesToVersionsValues, parseVersionsToVersionToColorMap } from '../../utils/versions';
-import { useAutofetcher, useTypedSelector } from '../../utils/hooks';
+import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import { InternalLink } from '../../components/InternalLink';
 import { Tenants } from '../Tenants/Tenants';
 import { StorageWrapper } from '../Storage/StorageWrapper';
 import { NodesWrapper } from '../Nodes/NodesWrapper';
 import { Versions } from '../Versions/Versions';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
+import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
 import { CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
 import { ClusterInfo } from './ClusterInfo/ClusterInfo';
 import { clusterTabs, clusterTabsIds, getClusterPath, isClusterTab } from './utils';
@@ -26,7 +25,7 @@ const b = cn('cluster');
 function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNodesProps, additionalVersionsProps, }) {
     var _a, _b;
     const container = useRef(null);
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const activeTabId = useClusterTab();
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
@@ -74,7 +73,7 @@ function Cluster({ additionalClusterProps, additionalTenantsProps, additionalNod
                                 .pathname }, { children: _jsx(Versions, { versionToColor: versionToColor }) })), _jsx(Redirect, { to: getLocationObjectFromHref(getClusterPath(activeTabId)) })] }) })] })));
 }
 function useClusterTab() {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const defaultTab = useTypedSelector((state) => state.cluster.defaultClusterTab);
     const match = useRouteMatch(routes.cluster);
     const { activeTab: activeTabFromParams } = (match === null || match === void 0 ? void 0 : match.params) || {};

package/dist/containers/Cluster/Cluster.scss

@@ -10,6 +10,9 @@
     @include flex-container();
 
     &__header {
+        position: sticky;
+        left: 0;
+
         padding: 20px 0;
     }
 

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.js

@@ -5,15 +5,15 @@ import InfoViewer from '../../../components/InfoViewer/InfoViewer';
 import { Tags } from '../../../components/Tags';
 import { Tablet } from '../../../components/Tablet';
 import { ResponseError } from '../../../components/Errors/ResponseError';
-import { ExternalLinkWithIcon } from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
+import { LinkWithIcon } from '../../../components/LinkWithIcon/LinkWithIcon';
 import { ContentWithPopup } from '../../../components/ContentWithPopup/ContentWithPopup';
+import { InfoViewerSkeleton } from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import { backend, customBackend } from '../../../store';
 import { formatStorageValues } from '../../../utils/dataFormatters/dataFormatters';
 import { useTypedSelector } from '../../../utils/hooks';
 import { formatBytes, getSizeWithSignificantDigits } from '../../../utils/bytesParsers';
 import { DEVELOPER_UI_TITLE } from '../../../utils/constants';
 import { VersionsBar } from '../VersionsBar/VersionsBar';
-import { ClusterInfoSkeleton } from '../ClusterInfoSkeleton/ClusterInfoSkeleton';
 import i18n from '../i18n';
 import { compareTablets } from './utils';
 import './ClusterInfo.scss';
@@ -94,7 +94,7 @@ const getInfo = (cluster, versionsValues, groupsStats, additionalInfo, links) =>
     }
     info.push(...additionalInfo, {
         label: i18n('links'),
-        value: (_jsx("div", Object.assign({ className: b('links') }, { children: links.map(({ title, url }) => (_jsx(ExternalLinkWithIcon, { title: title, url: url }, title))) }))),
+        value: (_jsx("div", Object.assign({ className: b('links') }, { children: links.map(({ title, url }) => (_jsx(LinkWithIcon, { title: title, url: url }, title))) }))),
     }, {
         label: i18n('versions'),
         value: _jsx(VersionsBar, { versionsValues: versionsValues }),
@@ -114,7 +114,7 @@ export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {
     ]);
     const getContent = () => {
         if (loading) {
-            return _jsx(ClusterInfoSkeleton, {});
+            return _jsx(InfoViewerSkeleton, { className: b('skeleton'), rows: 9 });
         }
         if (error) {
             _jsx(ResponseError, { error: error, className: b('error') });

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -3,6 +3,10 @@
 .cluster-info {
     padding-top: 20px;
 
+    &__skeleton {
+        margin-top: 5px;
+    }
+
     &__error {
         @include body-2-typography();
     }

package/dist/containers/Cluster/ClusterInfo/utils.d.ts

@@ -1,2 +1,2 @@
 import { TTabletStateInfo } from '../../../types/api/tablet';
-export declare const compareTablets: (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => 1 | -1 | 0;
+export declare const compareTablets: (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => 0 | 1 | -1;

package/dist/containers/Cluster/utils.d.ts

@@ -6,7 +6,7 @@ export declare const clusterTabsIds: {
     readonly storage: "storage";
     readonly versions: "versions";
 };
-export declare type ClusterTab = ValueOf<typeof clusterTabsIds>;
+export type ClusterTab = ValueOf<typeof clusterTabsIds>;
 export declare const clusterTabs: ({
     id: "overview";
     title: string;
@@ -24,4 +24,4 @@ export declare const clusterTabs: ({
     title: string;
 })[];
 export declare function isClusterTab(tab: any): tab is ClusterTab;
-export declare const getClusterPath: (activeTab?: ClusterTab | undefined, query?: {}) => string;
+export declare const getClusterPath: (activeTab?: ClusterTab, query?: {}) => string;

package/dist/containers/Clusters/Clusters.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
 import { Helmet } from 'react-helmet-async';
 import DataTable from '@gravity-ui/react-data-table';
 import { TableColumnSetup, Select } from '@gravity-ui/uikit';
 import { Search } from '../../components/Search';
 import { Loader } from '../../components/Loader';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useAutofetcher } from '../../utils/hooks';
-import { useTypedSelector } from '../../utils/hooks/useTypedSelector';
+import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../utils/hooks';
 import { fetchClustersList, changeClustersFilters } from '../../store/reducers/clusters/clusters';
 import { selectClustersList, selectLoadingFlag, selectClusterNameFilter, selectStatusFilter, selectServiceFilter, selectVersionFilter, selectVersions, selectFilteredClusters, selectClustersAggregation, } from '../../store/reducers/clusters/selectors';
 import { COLUMNS_NAMES, COLUMNS_TITLES, CLUSTER_STATUSES, DEFAULT_COLUMNS, SELECTED_COLUMNS_KEY, } from './constants';
@@ -19,7 +17,7 @@ import { b } from './shared';
 import i18n from './i18n';
 import './Clusters.scss';
 export function Clusters() {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     const loading = useTypedSelector(selectLoadingFlag);
     const clusters = useTypedSelector(selectClustersList);
     const filteredClusters = useTypedSelector(selectFilteredClusters);

package/dist/containers/Clusters/Clusters.scss

@@ -36,7 +36,7 @@
         &_type_red {
             background: var(--ydb-color-status-red);
         }
-        &_type_gray {
+        &_type_grey {
             background: var(--ydb-color-status-grey);
         }
         &_type_orange {

package/dist/containers/Clusters/constants.d.ts

@@ -15,7 +15,7 @@ export declare const COLUMNS_NAMES: {
     readonly DESCRIPTION: "description";
     readonly BALANCER: "balancer";
 };
-export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "title" | "status" | "tenants" | "versions" | "service" | "hosts" | "balancer" | "load" | "owner")[];
+export declare const DEFAULT_COLUMNS: ("nodes" | "storage" | "tenants" | "versions" | "status" | "service" | "title" | "hosts" | "balancer" | "load" | "owner")[];
 export declare const COLUMNS_TITLES: {
     readonly title: "Cluster";
     readonly versions: "Versions";

package/dist/containers/Clusters/useClustersList.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useTypedDispatch } from '../../utils/hooks';
 import { fetchClustersList } from '../../store/reducers/clusters/clusters';
 export function useClustersList() {
-    const dispatch = useDispatch();
+    const dispatch = useTypedDispatch();
     React.useEffect(() => {
         dispatch(fetchClustersList());
     }, [dispatch]);