ydb-embedded-ui 6.12.0 → 6.13.0

package/dist/components/VDisk/VDisk.js

@@ -2,12 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { STRUCTURE } from '../../containers/Node/NodePages';
 import routes, { createHref, getVDiskPagePath } from '../../routes';
+import { useDiskPagesAvailable } from '../../store/reducers/capabilities/hooks';
 import { valueIsDefined } from '../../utils';
 import { cn } from '../../utils/cn';
-import { USE_SEPARATE_DISKS_PAGES_KEY } from '../../utils/constants';
 import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
 import { isFullVDiskData } from '../../utils/disks/helpers';
-import { useSetting } from '../../utils/hooks';
 import { DiskStateProgressBar } from '../DiskStateProgressBar/DiskStateProgressBar';
 import { InternalLink } from '../InternalLink';
 import { VDiskPopup } from '../VDiskPopup/VDiskPopup';
@@ -15,7 +14,7 @@ import './VDisk.scss';
 const b = cn('ydb-vdisk-component');
 export const VDisk = ({ data = {}, nodes, compact }) => {
     const isFullData = isFullVDiskData(data);
-    const [useSeparateDisksPages] = useSetting(USE_SEPARATE_DISKS_PAGES_KEY);
+    const diskPagesAvailable = useDiskPagesAvailable();
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
     const anchor = React.useRef(null);
     const showPopup = () => {
@@ -25,7 +24,7 @@ export const VDisk = ({ data = {}, nodes, compact }) => {
         setIsPopupVisible(false);
     };
     let vDiskPath;
-    if (useSeparateDisksPages &&
+    if (diskPagesAvailable &&
         valueIsDefined(data.VDiskSlotId) &&
         valueIsDefined(data.PDiskId) &&
         valueIsDefined(data.NodeId)) {

package/dist/components/VDiskInfo/VDiskInfo.d.ts

@@ -3,8 +3,8 @@ import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
 import './VDiskInfo.scss';
 interface VDiskInfoProps<T extends PreparedVDisk> extends Omit<InfoViewerProps, 'info'> {
     data?: T;
-    isVDiskPage?: boolean;
+    withVDiskPageLink?: boolean;
     withTitle?: boolean;
 }
-export declare function VDiskInfo<T extends PreparedVDisk>({ data, isVDiskPage, withTitle, ...infoViewerProps }: VDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function VDiskInfo<T extends PreparedVDisk>({ data, withVDiskPageLink, withTitle, ...infoViewerProps }: VDiskInfoProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/VDiskInfo/VDiskInfo.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getVDiskPagePath } from '../../routes';
+import { useDiskPagesAvailable } from '../../store/reducers/capabilities/hooks';
 import { valueIsDefined } from '../../utils';
 import { cn } from '../../utils/cn';
 import { formatStorageValuesToGb, stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
@@ -14,8 +15,9 @@ import { vDiskInfoKeyset } from './i18n';
 import './VDiskInfo.scss';
 const b = cn('ydb-vdisk-info');
 // eslint-disable-next-line complexity
-export function VDiskInfo({ data, isVDiskPage, withTitle, ...infoViewerProps }) {
+export function VDiskInfo({ data, withVDiskPageLink, withTitle, ...infoViewerProps }) {
     var _a, _b, _c, _d;
+    const diskPagesAvailable = useDiskPagesAvailable();
     const { AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, PDiskId, NodeId, } = data || {};
     const vdiskInfo = [];
     if (valueIsDefined(VDiskSlotId)) {
@@ -105,7 +107,7 @@ export function VDiskInfo({ data, isVDiskPage, withTitle, ...infoViewerProps })
         });
         vdiskInfo.push({
             label: vDiskInfoKeyset('links'),
-            value: (_jsxs("span", { className: b('links'), children: [!isVDiskPage && (_jsx(LinkWithIcon, { title: vDiskInfoKeyset('vdisk-page'), url: vDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: vDiskInfoKeyset('developer-ui'), url: vDiskInternalViewerPath })] })),
+            value: (_jsxs("span", { className: b('links'), children: [withVDiskPageLink && diskPagesAvailable && (_jsx(LinkWithIcon, { title: vDiskInfoKeyset('vdisk-page'), url: vDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: vDiskInfoKeyset('developer-ui'), url: vDiskInternalViewerPath })] })),
         });
     }
     const title = data && withTitle ? _jsx(VDiskTitle, { data: data }) : null;

package/dist/containers/App/Content.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { connect, shallowEqual } from 'react-redux';
+import { connect } from 'react-redux';
 import { Redirect, Route, Switch } from 'react-router-dom';
+import { PageError } from '../../components/Errors/PageError/PageError';
+import { LoaderWrapper } from '../../components/LoaderWrapper/LoaderWrapper';
 import { useSlots } from '../../components/slots';
 import routes from '../../routes';
-import { getUser } from '../../store/reducers/authentication/authentication';
+import { authenticationApi } from '../../store/reducers/authentication/authentication';
+import { capabilitiesApi } from '../../store/reducers/capabilities/capabilities';
 import { nodesListApi } from '../../store/reducers/nodesList';
 import { cn } from '../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { lazyComponent } from '../../utils/lazyComponent';
 import Authentication from '../Authentication/Authentication';
 import { getClusterPath } from '../Cluster/utils';
@@ -89,27 +90,22 @@ export function Content(props) {
                     exact: true,
                     component: Clusters,
                     slot: ClustersSlot,
-                }), additionalRoutes === null || additionalRoutes === void 0 ? void 0 : additionalRoutes.rendered, _jsxs(Route, { children: [_jsx(GetUser, {}), _jsx(GetNodesList, {}), _jsx(Header, { mainPage: mainPage }), _jsxs(Switch, { children: [routesSlots.map((route) => {
-                                return renderRouteSlot(slots, route);
-                            }), _jsx(Route, { path: redirectProps.from || redirectProps.path, exact: redirectProps.exact, strict: redirectProps.strict, render: () => _jsx(Redirect, { to: redirectProps.to, push: redirectProps.push }) })] })] }, "single-cluster")] }));
+                }), additionalRoutes === null || additionalRoutes === void 0 ? void 0 : additionalRoutes.rendered, _jsx(Route, { children: _jsxs(GetUser, { children: [_jsx(GetNodesList, {}), _jsx(GetCapabilities, {}), _jsx(Header, { mainPage: mainPage }), _jsxs(Switch, { children: [routesSlots.map((route) => {
+                                    return renderRouteSlot(slots, route);
+                                }), _jsx(Route, { path: redirectProps.from || redirectProps.path, exact: redirectProps.exact, strict: redirectProps.strict, render: () => (_jsx(Redirect, { to: redirectProps.to, push: redirectProps.push })) })] })] }) }, "single-cluster")] }));
 }
-function GetUser() {
-    const dispatch = useTypedDispatch();
-    const { isAuthenticated, isInternalUser } = useTypedSelector((state) => ({
-        isAuthenticated: state.authentication.isAuthenticated,
-        isInternalUser: Boolean(state.authentication.user),
-    }), shallowEqual);
-    React.useEffect(() => {
-        if (isAuthenticated && !isInternalUser) {
-            dispatch(getUser());
-        }
-    }, [dispatch, isAuthenticated, isInternalUser]);
-    return null;
+function GetUser({ children }) {
+    const { isLoading, error } = authenticationApi.useWhoamiQuery(undefined);
+    return (_jsx(LoaderWrapper, { loading: isLoading, size: "l", children: _jsx(PageError, { error: error, children: children }) }));
 }
 function GetNodesList() {
     nodesListApi.useGetNodesListQuery(undefined);
     return null;
 }
+function GetCapabilities() {
+    capabilitiesApi.useGetClusterCapabilitiesQuery(undefined);
+    return null;
+}
 function ContentWrapper(props) {
     const { singleClusterMode, isAuthenticated } = props;
     return (_jsxs(Switch, { children: [_jsx(Route, { path: routes.auth, children: _jsx(Authentication, { closable: true }) }), _jsx(Route, { children: _jsx("div", { className: b({ embedded: singleClusterMode }), children: isAuthenticated ? props.children : _jsx(Authentication, {}) }) })] }));

package/dist/containers/AsideNavigation/AsideNavigation.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { CircleQuestion, Gear, Person } from '@gravity-ui/icons';
 import { AsideHeader, FooterItem } from '@gravity-ui/navigation';
 import { useHistory } from 'react-router-dom';
+import { selectUser } from '../../store/reducers/authentication/authentication';
 import { cn } from '../../utils/cn';
 import { ASIDE_HEADER_COMPACT_KEY } from '../../utils/constants';
 import { useSetting, useTypedSelector } from '../../utils/hooks';
@@ -29,7 +30,7 @@ var Panel;
 export function AsideNavigation(props) {
     const history = useHistory();
     const [visiblePanel, setVisiblePanel] = React.useState();
-    const { user: ydbUser } = useTypedSelector((state) => state.authentication);
+    const ydbUser = useTypedSelector(selectUser);
     const [compact, setIsCompact] = useSetting(ASIDE_HEADER_COMPACT_KEY);
     return (_jsx(React.Fragment, { children: _jsx(AsideHeader, { logo: {
                 text: 'YDB',

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

@@ -3,21 +3,21 @@ import { ArrowRightFromSquare, ArrowRightToSquare } from '@gravity-ui/icons';
 import { Button, Icon } from '@gravity-ui/uikit';
 import { useHistory } from 'react-router-dom';
 import routes, { createHref } from '../../../routes';
-import { logout } from '../../../store/reducers/authentication/authentication';
+import { authenticationApi } from '../../../store/reducers/authentication/authentication';
 import { cn } from '../../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
+import { useTypedSelector } from '../../../utils/hooks';
 import i18n from '../i18n';
 import './YdbInternalUser.scss';
 const b = cn('kv-ydb-internal-user');
 export function YdbInternalUser() {
     const { user: ydbUser } = useTypedSelector((state) => state.authentication);
+    const [logout] = authenticationApi.useLogoutMutation();
     const history = useHistory();
     const handleLoginClick = () => {
         history.push(createHref(routes.auth, undefined, { returnUrl: encodeURIComponent(location.href) }));
     };
-    const dispatch = useTypedDispatch();
     const handleLogout = () => {
-        dispatch(logout);
+        logout(undefined);
     };
     return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('user-info-wrapper'), children: [_jsx("div", { className: b('ydb-internal-user-title'), children: i18n('account.user') }), ydbUser && _jsx("div", { className: b('username'), children: ydbUser })] }), ydbUser ? (_jsx(Button, { view: "flat-secondary", title: i18n('account.logout'), onClick: handleLogout, children: _jsx(Icon, { data: ArrowRightFromSquare }) })) : (_jsx(Button, { view: "flat-secondary", title: i18n('account.login'), onClick: handleLoginClick, children: _jsx(Icon, { data: ArrowRightToSquare }) }))] }));
 }

package/dist/containers/Authentication/Authentication.js

@@ -4,29 +4,27 @@ import { Eye, EyeSlash, Xmark } from '@gravity-ui/icons';
 import { Button, Link as ExternalLink, Icon, TextInput } from '@gravity-ui/uikit';
 import { useHistory, useLocation } from 'react-router-dom';
 import { parseQuery } from '../../routes';
-import { authenticate } from '../../store/reducers/authentication/authentication';
+import { authenticationApi } from '../../store/reducers/authentication/authentication';
 import { cn } from '../../utils/cn';
-import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { isPasswordError, isUserError } from './utils';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
 import './Authentication.scss';
 const b = cn('authentication');
 function Authentication({ closable = false }) {
-    const dispatch = useTypedDispatch();
     const history = useHistory();
     const location = useLocation();
+    const [authenticate, { error, isLoading }] = authenticationApi.useAuthenticateMutation(undefined);
     const { returnUrl } = parseQuery(location);
-    const { error } = useTypedSelector((state) => state.authentication);
     const [login, setLogin] = React.useState('');
-    const [pass, setPass] = React.useState('');
+    const [password, setPass] = React.useState('');
     const [loginError, setLoginError] = React.useState('');
     const [passwordError, setPasswordError] = React.useState('');
     const [showPassword, setShowPassword] = React.useState(false);
     React.useEffect(() => {
-        var _a, _b, _c, _d;
-        if ((_b = (_a = error === null || error === void 0 ? void 0 : error.data) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.includes('user')) {
+        if (isUserError(error)) {
             setLoginError(error.data.error);
         }
-        if ((_d = (_c = error === null || error === void 0 ? void 0 : error.data) === null || _c === void 0 ? void 0 : _c.error) === null || _d === void 0 ? void 0 : _d.includes('password')) {
+        if (isPasswordError(error)) {
             setPasswordError(error.data.error);
         }
     }, [error]);
@@ -39,7 +37,7 @@ function Authentication({ closable = false }) {
         setPasswordError('');
     };
     const onLoginClick = () => {
-        dispatch(authenticate(login, pass)).then(() => {
+        authenticate({ user: login, password }).then(() => {
             if (returnUrl) {
                 const decodedUrl = decodeURIComponent(returnUrl.toString());
                 // to prevent page reload we use router history
@@ -62,6 +60,6 @@ function Authentication({ closable = false }) {
     const onTogglePasswordVisibility = () => {
         setShowPassword((prev) => !prev);
     };
-    return (_jsxs("section", { className: b(), children: [_jsxs("form", { className: b('form-wrapper'), children: [_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('logo'), children: [_jsx(Icon, { data: ydbLogoIcon, size: 24 }), "YDB"] }), _jsx(ExternalLink, { href: "http://ydb.tech/docs", target: "_blank", children: "Documentation" })] }), _jsx("h2", { className: b('title'), children: "Sign in" }), _jsx("div", { className: b('field-wrapper'), children: _jsx(TextInput, { value: login, onUpdate: onLoginUpdate, placeholder: 'Username', error: loginError, onKeyDown: onEnterClick, size: "l", autoFocus: true }) }), _jsxs("div", { className: b('field-wrapper'), children: [_jsx(TextInput, { value: pass, onUpdate: onPassUpdate, type: showPassword ? 'text' : 'password', placeholder: 'Password', error: passwordError, onKeyDown: onEnterClick, size: "l" }), _jsx(Button, { onClick: onTogglePasswordVisibility, size: "l", className: b('show-password-button'), children: _jsx(Icon, { data: showPassword ? EyeSlash : Eye, size: 16 }) })] }), _jsx(Button, { view: "action", onClick: onLoginClick, width: "max", size: "l", disabled: Boolean(!login || loginError || passwordError), className: b('button-sign-in'), children: "Sign in" })] }), closable && history.length > 1 && (_jsx(Button, { onClick: onClose, className: b('close'), children: _jsx(Icon, { data: Xmark, size: 24 }) }))] }));
+    return (_jsxs("section", { className: b(), children: [_jsxs("form", { className: b('form-wrapper'), children: [_jsxs("div", { className: b('header'), children: [_jsxs("div", { className: b('logo'), children: [_jsx(Icon, { data: ydbLogoIcon, size: 24 }), "YDB"] }), _jsx(ExternalLink, { href: "https://ydb.tech/docs", target: "_blank", children: "Documentation" })] }), _jsx("h2", { className: b('title'), children: "Sign in" }), _jsx("div", { className: b('field-wrapper'), children: _jsx(TextInput, { value: login, onUpdate: onLoginUpdate, placeholder: 'Username', error: loginError, onKeyDown: onEnterClick, size: "l", autoFocus: true }) }), _jsxs("div", { className: b('field-wrapper'), children: [_jsx(TextInput, { value: password, onUpdate: onPassUpdate, type: showPassword ? 'text' : 'password', placeholder: 'Password', error: passwordError, onKeyDown: onEnterClick, size: "l" }), _jsx(Button, { onClick: onTogglePasswordVisibility, size: "l", className: b('show-password-button'), children: _jsx(Icon, { data: showPassword ? EyeSlash : Eye, size: 16 }) })] }), _jsx(Button, { view: "action", onClick: onLoginClick, width: "max", size: "l", disabled: Boolean(!login || loginError || passwordError), loading: isLoading, className: b('button-sign-in'), children: "Sign in" })] }), closable && history.length > 1 && (_jsx(Button, { onClick: onClose, className: b('close'), children: _jsx(Icon, { data: Xmark, size: 24 }) }))] }));
 }
 export default Authentication;

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

@@ -0,0 +1,8 @@
+interface AuthError {
+    data: {
+        error: string;
+    };
+}
+export declare function isUserError(error: unknown): error is AuthError;
+export declare function isPasswordError(error: unknown): error is AuthError;
+export {};

package/dist/containers/Authentication/utils.js

@@ -0,0 +1,15 @@
+function isAuthError(error) {
+    return Boolean(error &&
+        typeof error === 'object' &&
+        'data' in error &&
+        error.data &&
+        typeof error.data === 'object' &&
+        'error' in error.data &&
+        typeof error.data.error === 'string');
+}
+export function isUserError(error) {
+    return isAuthError(error) && error.data.error.includes('user');
+}
+export function isPasswordError(error) {
+    return isAuthError(error) && error.data.error.includes('password');
+}

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContentWithPopup } from '../../../components/ContentWithPopup/ContentWithPopup';
 import { ResponseError } from '../../../components/Errors/ResponseError';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
@@ -102,14 +102,14 @@ const getInfo = (cluster, versionsValues, groupsStats, additionalInfo, links) =>
     });
     return info;
 };
-export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {}, loading, error, additionalClusterProps = {}, }) => {
+export const ClusterInfo = ({ cluster, versionsValues = [], groupsStats = {}, loading, error, additionalClusterProps = {}, }) => {
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     let internalLink = backend + '/internal';
     if (singleClusterMode && !customBackend) {
         internalLink = `/internal`;
     }
     const { info = [], links = [] } = additionalClusterProps;
-    const clusterInfo = getInfo(cluster, versionsValues, groupsStats, info, [
+    const clusterInfo = getInfo(cluster !== null && cluster !== void 0 ? cluster : {}, versionsValues, groupsStats, info, [
         { title: DEVELOPER_UI_TITLE, url: internalLink },
         ...links,
     ]);
@@ -117,10 +117,10 @@ export const ClusterInfo = ({ cluster = {}, versionsValues = [], groupsStats = {
         if (loading) {
             return _jsx(InfoViewerSkeleton, { className: b('skeleton'), rows: 9 });
         }
-        if (error) {
-            return _jsx(ResponseError, { error: error, className: b('error') });
+        if (error && !cluster) {
+            return null;
         }
         return _jsx(InfoViewer, { dots: true, info: clusterInfo });
     };
-    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('info'), children: getContent() }) }));
+    return (_jsxs("div", { className: b(), children: [error ? _jsx(ResponseError, { error: error, className: b('error') }) : null, _jsx("div", { className: b('info'), children: getContent() })] }));
 };

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

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

package/dist/containers/Heatmap/Heatmap.js

@@ -68,13 +68,14 @@ export const Heatmap = ({ path, database }) => {
     };
     const renderContent = () => {
         const { min, max } = getCurrentMetricLimits(currentMetric, tablets);
-        return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('filters'), children: [_jsx(Select, { className: b('heatmap-select'), value: currentMetric ? [currentMetric] : [], options: metrics, onUpdate: handleMetricChange, width: 200 }), _jsx("div", { className: b('sort-checkbox'), children: _jsx(Checkbox, { onUpdate: handleCheckboxChange, checked: sort, children: "Sort" }) }), _jsx("div", { className: b('histogram-checkbox'), children: _jsx(Checkbox, { onUpdate: handleHeatmapChange, checked: heatmap, children: "Heatmap" }) }), _jsxs("div", { className: b('limits'), children: [_jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "min:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(min) ? formatNumber(min) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "max:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(max) ? formatNumber(max) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "count:" }), _jsx("div", { className: b('limits-value'), children: formatNumber(tablets.length) })] })] })] }), heatmap ? renderHeatmapCanvas() : renderHistogram()] }));
+        let content;
+        if (!error || currentData) {
+            content = heatmap ? renderHeatmapCanvas() : renderHistogram();
+        }
+        return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('filters'), children: [_jsx(Select, { className: b('heatmap-select'), value: currentMetric ? [currentMetric] : [], options: metrics, onUpdate: handleMetricChange, width: 200 }), _jsx("div", { className: b('sort-checkbox'), children: _jsx(Checkbox, { onUpdate: handleCheckboxChange, checked: sort, children: "Sort" }) }), _jsx("div", { className: b('histogram-checkbox'), children: _jsx(Checkbox, { onUpdate: handleHeatmapChange, checked: heatmap, children: "Heatmap" }) }), _jsxs("div", { className: b('limits'), children: [_jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "min:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(min) ? formatNumber(min) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "max:" }), _jsx("div", { className: b('limits-value'), children: Number.isInteger(max) ? formatNumber(max) : '—' })] }), _jsxs("div", { className: b('limits-block'), children: [_jsx("div", { className: b('limits-title'), children: "count:" }), _jsx("div", { className: b('limits-value'), children: formatNumber(tablets.length) })] })] })] }), error ? _jsx(ResponseError, { error: error }) : null, content] }));
     };
     if (loading) {
         return _jsx(Loader, {});
     }
-    if (error) {
-        return _jsx(ResponseError, { error: error });
-    }
     return renderContent();
 };

package/dist/containers/Node/Node.js

@@ -80,13 +80,11 @@ export function Node(props) {
     if (loading) {
         return _jsx(Loader, { size: "l" });
     }
-    else if (error) {
-        return _jsx(ResponseError, { error: error });
+    if (node) {
+        return (_jsxs("div", { className: b(null, props.className), ref: container, children: [_jsx(Helmet, { titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring`, children: _jsx("title", { children: activeTabVerified.title }) }), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), error ? _jsx(ResponseError, { error: error, className: b('error') }) : null, renderTabs(), _jsx("div", { className: b('content'), children: renderTabContent() })] }));
     }
-    else {
-        if (node) {
-            return (_jsxs("div", { className: b(null, props.className), ref: container, children: [_jsx(Helmet, { titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring`, children: _jsx("title", { children: activeTabVerified.title }) }), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), renderTabs(), _jsx("div", { className: b('content'), children: renderTabContent() })] }));
-        }
-        return _jsx("div", { className: "error", children: "no node data" });
+    if (error) {
+        return _jsx(ResponseError, { error: error });
     }
+    return _jsx("div", { className: "error", children: "no node data" });
 }

package/dist/containers/Node/Node.scss

@@ -53,4 +53,8 @@
         height: 100%;
         padding: 20px;
     }
+
+    &__error {
+        padding: 0 20px;
+    }
 }

package/dist/containers/Node/NodeStructure/NodeStructure.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import url from 'url';
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
@@ -59,11 +59,11 @@ function NodeStructure({ nodeId, className }) {
         if (loadingStructure) {
             return _jsx(Loader, { size: "m" });
         }
-        if (error) {
-            return _jsx(ResponseError, { error: error });
+        if (error && !currentData) {
+            return null;
         }
         return renderStructure();
     };
-    return (_jsx("div", { className: b(), ref: scrollContainerRef, children: _jsx("div", { className: className, children: renderContent() }) }));
+    return (_jsxs("div", { className: b(), ref: scrollContainerRef, children: [error ? _jsx(ResponseError, { error: error, className: b('error') }) : null, _jsx("div", { className: className, children: renderContent() })] }));
 }
 export default NodeStructure;

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -10,6 +10,10 @@
     @include flex-container();
     @include body-2-typography();
 
+    &__error {
+        padding: 20px 20px 0;
+    }
+
     &__pdisk {
         display: flex;
         flex-direction: column;

package/dist/containers/Node/NodeStructure/Pdisk.js

@@ -78,7 +78,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
             width: 70,
             render: ({ row }) => {
-                return (_jsx(Popover, { placement: ['right'], content: _jsx(VDiskInfo, { data: row, withTitle: true }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
+                return (_jsx(Popover, { placement: ['right'], content: _jsx(VDiskInfo, { data: row, withTitle: true, withVDiskPageLink: true }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
                             selected: row.id === selectedVdiskId,
                         }), children: _jsx(Icon, { data: CircleInfoFill, size: 18 }) }) }));
             },
@@ -107,7 +107,7 @@ export function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFro
         if (isEmpty(data)) {
             return _jsx("div", { children: "No information about PDisk" });
         }
-        return (_jsxs("div", { children: [_jsx(PDiskInfo, { pDisk: data, nodeId: nodeId, className: b('pdisk-details') }), _jsxs("div", { className: b('vdisks-container'), children: [_jsx("div", { className: b('vdisks-header'), children: "VDisks" }), renderVDisks()] })] }));
+        return (_jsxs("div", { children: [_jsx(PDiskInfo, { pDisk: data, nodeId: nodeId, className: b('pdisk-details'), withPDiskPageLink: true }), _jsxs("div", { className: b('vdisks-container'), children: [_jsx("div", { className: b('vdisks-header'), children: "VDisks" }), renderVDisks()] })] }));
     };
     return (_jsxs("div", { className: b('pdisk'), id: id, children: [_jsxs("div", { className: b('pdisk-header'), children: [_jsxs("div", { className: b('pdisk-title-wrapper'), children: [_jsx(EntityStatus, { status: Device }), _jsx(PDiskTitleBadge, { label: "PDiskID", value: PDiskId, className: b('pdisk-title-id') }), _jsx(PDiskTitleBadge, { value: Type, className: b('pdisk-title-type') }), _jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true, className: b('pdisk-title-size') }), _jsx(PDiskTitleBadge, { label: "VDisks", value: vDisks.length })] }), _jsx(Button, { onClick: unfolded ? onClosePDiskDetails : onOpenPDiskDetails, view: "flat-secondary", children: _jsx(ArrowToggle, { direction: unfolded ? 'top' : 'bottom' }) })] }), unfolded && renderPDiskDetails()] }));
 }

package/dist/containers/Nodes/Nodes.js

@@ -5,6 +5,7 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { StringParam, useQueryParams } from 'use-query-params';
 import { EntitiesCount } from '../../components/EntitiesCount';
 import { AccessDenied } from '../../components/Errors/403';
+import { isAccessError } from '../../components/Errors/PageError/PageError';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { Illustration } from '../../components/Illustration';
 import { ProblemFilter } from '../../components/ProblemFilter';
@@ -65,7 +66,7 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
     }, [data, searchValue, uptimeFilter, problemFilter]);
     const totalNodes = (data === null || data === void 0 ? void 0 : data.TotalNodes) || 0;
     const renderControls = () => {
-        return (_jsxs(React.Fragment, { children: [_jsx(Search, { onChange: handleSearchQueryChange, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: handleUptimeFilterChange }), _jsx(EntitiesCount, { total: totalNodes, current: (nodes === null || nodes === void 0 ? void 0 : nodes.length) || 0, label: 'Nodes', loading: isLoading })] }));
+        return (_jsxs(React.Fragment, { children: [_jsx(Search, { onChange: handleSearchQueryChange, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: handleUptimeFilterChange }), _jsx(EntitiesCount, { total: totalNodes, current: nodes.length, label: 'Nodes', loading: isLoading })] }));
     };
     const renderTable = () => {
         const rawColumns = getNodesColumns({
@@ -74,7 +75,7 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         const columns = rawColumns.map((column) => {
             return { ...column, sortable: isSortableNodesProperty(column.name) };
         });
-        if (nodes && nodes.length === 0) {
+        if (nodes.length === 0) {
             if (problemFilter !== ProblemFilterValues.ALL ||
                 uptimeFilter !== NodesUptimeFilterValues.All) {
                 return _jsx(Illustration, { name: "thumbsUp", width: "200" });
@@ -82,11 +83,8 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         }
         return (_jsx(ResizeableDataTable, { columnsWidthLSKey: NODES_COLUMNS_WIDTH_LS_KEY, data: nodes || [], columns: columns, settings: DEFAULT_TABLE_SETTINGS, sortOrder: sort, onSort: handleSort, emptyDataMessage: i18n('empty.default'), rowClassName: (row) => b('node', { unavailable: isUnavailableNode(row) }) }));
     };
-    if (error) {
-        if (error.status === 403) {
-            return _jsx(AccessDenied, {});
-        }
-        return _jsx(ResponseError, { error: error });
+    if (isAccessError(error)) {
+        return _jsx(AccessDenied, {});
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: isLoading, children: renderTable() })] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), error ? _jsx(ResponseError, { error: error }) : null, _jsx(TableWithControlsLayout.Table, { loading: isLoading, children: data ? renderTable() : null })] }));
 };

package/dist/containers/Nodes/getNodesColumns.js

@@ -8,7 +8,7 @@ import { TabletsStatistic } from '../../components/TabletsStatistic';
 import { UsageLabel } from '../../components/UsageLabel/UsageLabel';
 import { getLoadSeverityForNode } from '../../store/reducers/nodes/utils';
 import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
-import { formatBytesToGigabyte, formatStorageValuesToGb, } from '../../utils/dataFormatters/dataFormatters';
+import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
 export const NODES_COLUMNS_WIDTH_LS_KEY = 'nodesTableColumnsWidth';
 const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
@@ -84,14 +84,7 @@ const memoryColumn = {
     header: 'Memory',
     sortAccessor: ({ MemoryUsed = 0 }) => Number(MemoryUsed),
     defaultOrder: DataTable.DESCENDING,
-    render: ({ row }) => {
-        if (row.MemoryUsed) {
-            return formatBytesToGigabyte(row.MemoryUsed);
-        }
-        else {
-            return '—';
-        }
-    },
+    render: ({ row }) => (_jsx(ProgressViewer, { value: row.MemoryUsed, capacity: row.MemoryLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
     align: DataTable.RIGHT,
     width: 120,
 };
@@ -111,7 +104,9 @@ const loadAverageColumn = {
     header: 'Load average',
     sortAccessor: ({ LoadAveragePercents = [] }) => LoadAveragePercents[0],
     defaultOrder: DataTable.DESCENDING,
-    render: ({ row }) => row.LoadAveragePercents && row.LoadAveragePercents.length > 0 ? (_jsx(ProgressViewer, { value: row.LoadAveragePercents[0], percents: true, colorizeProgress: true, capacity: 100 })) : ('—'),
+    render: ({ row }) => (_jsx(ProgressViewer, { value: row.LoadAveragePercents && row.LoadAveragePercents.length > 0
+            ? row.LoadAveragePercents[0]
+            : undefined, percents: true, colorizeProgress: true, capacity: 100 })),
     align: DataTable.LEFT,
     width: 140,
     resizeMinWidth: 140,
@@ -147,22 +142,13 @@ const topNodesMemoryColumn = {
 };
 const sharedCacheUsageColumn = {
     name: NODES_COLUMNS_IDS.SharedCacheUsage,
-    header: 'Tablet Cache',
+    header: 'Caches',
     render: ({ row }) => (_jsx(ProgressViewer, { value: row.SharedCacheUsed, capacity: row.SharedCacheLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
     align: DataTable.LEFT,
     width: 140,
     resizeMinWidth: 140,
     sortable: false,
 };
-const memoryUsedInAllocColumn = {
-    name: NODES_COLUMNS_IDS.MemoryUsedInAlloc,
-    header: 'Query Runtime',
-    render: ({ row }) => (_jsx(ProgressViewer, { value: row.MemoryUsedInAlloc, capacity: row.MemoryLimit, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
-    align: DataTable.LEFT,
-    width: 140,
-    resizeMinWidth: 140,
-    sortable: false,
-};
 const sessionsColumn = {
     name: NODES_COLUMNS_IDS.TotalSessions,
     header: 'Sessions',
@@ -204,7 +190,6 @@ export function getTopNodesByMemoryColumns({ tabletsPath, getNodeRef, }) {
         topNodesLoadAverageColumn,
         topNodesMemoryColumn,
         sharedCacheUsageColumn,
-        memoryUsedInAllocColumn,
         sessionsColumn,
         getTabletsColumn(tabletsPath),
     ];

package/dist/containers/PDiskPage/PDiskPage.js

@@ -9,12 +9,14 @@ import { z } from 'zod';
 import { AutoRefreshControl } from '../../components/AutoRefreshControl/AutoRefreshControl';
 import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
+import { ResponseError } from '../../components/Errors/ResponseError';
 import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import { InternalLink } from '../../components/InternalLink/InternalLink';
 import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
 import { PageMeta } from '../../components/PageMeta/PageMeta';
 import { getPDiskPagePath } from '../../routes';
 import { api } from '../../store/reducers/api';
+import { selectIsUserAllowedToMakeChanges } from '../../store/reducers/authentication/authentication';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { pDiskApi } from '../../store/reducers/pdisk/pdisk';
 import { valueIsDefined } from '../../utils';
@@ -46,7 +48,7 @@ const PDISK_PAGE_TABS = [
 const pDiskTabSchema = z.nativeEnum(PDISK_TABS_IDS).catch(PDISK_TABS_IDS.diskDistribution);
 export function PDiskPage() {
     const dispatch = useTypedDispatch();
-    const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
     const [{ nodeId, pDiskId, activeTab }] = useQueryParams({
         activeTab: StringParam,
         nodeId: StringParam,
@@ -65,11 +67,14 @@ export function PDiskPage() {
     const pDiskLoading = pdiskDataQuery.isFetching && pdiskDataQuery.currentData === undefined;
     const pDiskData = pdiskDataQuery.currentData;
     const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData || {};
-    const handleRestart = async () => {
+    const handleRestart = async (isRetry) => {
         if (pDiskParamsDefined) {
-            return window.api.restartPDisk(nodeId, pDiskId).then((res) => {
-                if ((res === null || res === void 0 ? void 0 : res.result) === false) {
-                    const err = { statusText: res.error };
+            return window.api.restartPDisk({ nodeId, pDiskId, force: isRetry }).then((response) => {
+                if ((response === null || response === void 0 ? void 0 : response.result) === false) {
+                    const err = {
+                        statusText: response.error,
+                        retryPossible: response.forceRetryPossible,
+                    };
                     throw err;
                 }
             });
@@ -97,13 +102,13 @@ export function PDiskPage() {
         return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskParamsDefined ? getPDiskId(nodeId, pDiskId) : null, className: pdiskPageCn('title') }));
     };
     const renderControls = () => {
-        return (_jsx("div", { className: pdiskPageCn('controls'), children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId || !isUserAllowedToMakeChanges, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), withPopover: true, popoverContent: pDiskPageKeyset('restart-pdisk-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: [_jsx(Icon, { data: ArrowRotateLeft }), pDiskPageKeyset('restart-pdisk-button')] }) }));
+        return (_jsx("div", { className: pdiskPageCn('controls'), children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId || !isUserAllowedToMakeChanges, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), retryButtonText: pDiskPageKeyset('force-restart-pdisk-button'), withPopover: true, popoverContent: pDiskPageKeyset('restart-pdisk-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: [_jsx(Icon, { data: ArrowRotateLeft }), pDiskPageKeyset('restart-pdisk-button')] }) }));
     };
     const renderInfo = () => {
         if (pDiskLoading) {
             return _jsx(InfoViewerSkeleton, { className: pdiskPageCn('info'), rows: 10 });
         }
-        return (_jsx(PDiskInfo, { pDisk: pDiskData, nodeId: nodeId, className: pdiskPageCn('info'), isPDiskPage: true }));
+        return _jsx(PDiskInfo, { pDisk: pDiskData, nodeId: nodeId, className: pdiskPageCn('info') });
     };
     const renderTabs = () => {
         return (_jsx("div", { className: pdiskPageCn('tabs'), children: _jsx(Tabs, { size: "l", items: PDISK_PAGE_TABS, activeTab: pDiskTab, wrapTo: ({ id }, tabNode) => {
@@ -125,5 +130,11 @@ export function PDiskPage() {
                 return null;
         }
     };
-    return (_jsxs("div", { className: pdiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderTabs(), renderTabsContent()] }));
+    const renderError = () => {
+        if (!pdiskDataQuery.error) {
+            return null;
+        }
+        return _jsx(ResponseError, { error: pdiskDataQuery.error });
+    };
+    return (_jsxs("div", { className: pdiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderError(), renderInfo(), renderTabs(), renderTabsContent()] }));
 }

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

@@ -11,6 +11,7 @@
     "label.slot-size": "Slot Size",
     "no-slots-data": "No slots data",
     "restart-pdisk-button": "Restart PDisk",
+    "force-restart-pdisk-button": "Restart anyway",
     "restart-pdisk-dialog": "PDisk will be restarted. Do you want to proceed?",
     "restart-pdisk-not-allowed": "You don't have enough rights to restart PDisk"
 }

package/dist/containers/PDiskPage/i18n/index.d.ts

@@ -1 +1 @@
-export declare const pDiskPageKeyset: (key: "node" | "groups" | "fqdn" | "log" | "pdisk" | "disk-distribution" | "empty-slot" | "label.log-size" | "label.system-size" | "label.slot-size" | "no-slots-data" | "restart-pdisk-button" | "restart-pdisk-dialog" | "restart-pdisk-not-allowed", params?: import("@gravity-ui/i18n").Params) => string;
+export declare const pDiskPageKeyset: (key: "node" | "groups" | "fqdn" | "log" | "pdisk" | "disk-distribution" | "empty-slot" | "label.log-size" | "label.system-size" | "label.slot-size" | "no-slots-data" | "restart-pdisk-button" | "force-restart-pdisk-button" | "restart-pdisk-dialog" | "restart-pdisk-not-allowed", params?: import("@gravity-ui/i18n").Params) => string;