ydb-embedded-ui 6.11.0 → 6.13.0

package/dist/components/PDiskInfo/PDiskInfo.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getPDiskPagePath } from '../../routes';
+import { selectIsUserAllowedToMakeChanges } from '../../store/reducers/authentication/authentication';
+import { useDiskPagesAvailable } from '../../store/reducers/capabilities/hooks';
 import { valueIsDefined } from '../../utils';
+import { formatBytes } from '../../utils/bytesParsers';
 import { cn } from '../../utils/cn';
-import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
 import { formatStorageValuesToGb } from '../../utils/dataFormatters/dataFormatters';
 import { createPDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
+import { useTypedSelector } from '../../utils/hooks';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
 import { InfoViewer } from '../InfoViewer/InfoViewer';
 import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon';
@@ -12,58 +15,105 @@ import { ProgressViewer } from '../ProgressViewer/ProgressViewer';
 import { pDiskInfoKeyset } from './i18n';
 import './PDiskInfo.scss';
 const b = cn('ydb-pdisk-info');
-export function PDiskInfo({ pDisk, nodeId, isPDiskPage = false, ...infoViewerProps }) {
-    const { PDiskId, Path, Guid, Category, Type, Device, Realtime, State, SerialNumber, TotalSize, AvailableSize, } = pDisk;
-    const total = Number(TotalSize);
-    const available = Number(AvailableSize);
-    const pdiskInfo = [];
+// eslint-disable-next-line complexity
+function getPDiskInfo({ pDisk, nodeId, withPDiskPageLink, isUserAllowedToMakeChanges, }) {
+    const { PDiskId, Path, Guid, Category, Type, Device, Realtime, State, SerialNumber, TotalSize, AllocatedSize, DecommitStatus, StatusV2, NumActiveSlots, ExpectedSlotCount, LogUsedSize, LogTotalSize, SystemSize, SharedWithOs, } = pDisk || {};
+    const generalInfo = [];
+    if (valueIsDefined(DecommitStatus)) {
+        generalInfo.push({
+            label: pDiskInfoKeyset('decomission-status'),
+            value: DecommitStatus.replace('DECOMMIT_', ''),
+        });
+    }
+    if (valueIsDefined(Category)) {
+        generalInfo.push({ label: pDiskInfoKeyset('type'), value: Type });
+    }
     if (valueIsDefined(Path)) {
-        pdiskInfo.push({ label: pDiskInfoKeyset('path'), value: Path });
+        generalInfo.push({ label: pDiskInfoKeyset('path'), value: Path });
     }
     if (valueIsDefined(Guid)) {
-        pdiskInfo.push({ label: pDiskInfoKeyset('guid'), value: Guid });
+        generalInfo.push({ label: pDiskInfoKeyset('guid'), value: Guid });
     }
-    if (valueIsDefined(Category)) {
-        pdiskInfo.push({ label: pDiskInfoKeyset('category'), value: Category });
-        pdiskInfo.push({ label: pDiskInfoKeyset('type'), value: Type });
+    // SerialNumber could be an empty string ""
+    if (SerialNumber) {
+        generalInfo.push({
+            label: pDiskInfoKeyset('serial-number'),
+            value: SerialNumber,
+        });
     }
-    if (total >= 0 && available >= 0) {
-        pdiskInfo.push({
-            label: pDiskInfoKeyset('size'),
-            value: (_jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
+    if (valueIsDefined(SharedWithOs)) {
+        generalInfo.push({
+            label: pDiskInfoKeyset('shared-with-os'),
+            value: pDiskInfoKeyset('yes'),
         });
     }
+    const statusInfo = [];
+    if (valueIsDefined(StatusV2)) {
+        statusInfo.push({ label: pDiskInfoKeyset('drive-status'), value: StatusV2 });
+    }
     if (valueIsDefined(State)) {
-        pdiskInfo.push({ label: pDiskInfoKeyset('state'), value: State });
+        statusInfo.push({ label: pDiskInfoKeyset('state'), value: State });
     }
     if (valueIsDefined(Device)) {
-        pdiskInfo.push({
+        statusInfo.push({
             label: pDiskInfoKeyset('device'),
             value: _jsx(EntityStatus, { status: Device }),
         });
     }
     if (valueIsDefined(Realtime)) {
-        pdiskInfo.push({
+        statusInfo.push({
             label: pDiskInfoKeyset('realtime'),
             value: _jsx(EntityStatus, { status: Realtime }),
         });
     }
-    if (valueIsDefined(SerialNumber)) {
-        pdiskInfo.push({
-            label: pDiskInfoKeyset('serial-number'),
-            value: SerialNumber || EMPTY_DATA_PLACEHOLDER,
+    const spaceInfo = [];
+    spaceInfo.push({
+        label: pDiskInfoKeyset('space'),
+        value: (_jsx(ProgressViewer, { value: AllocatedSize, capacity: TotalSize, formatValues: formatStorageValuesToGb, colorizeProgress: true })),
+    });
+    if (valueIsDefined(NumActiveSlots) && valueIsDefined(ExpectedSlotCount)) {
+        spaceInfo.push({
+            label: pDiskInfoKeyset('slots'),
+            value: _jsx(ProgressViewer, { value: NumActiveSlots, capacity: ExpectedSlotCount }),
+        });
+    }
+    if (valueIsDefined(LogUsedSize) && valueIsDefined(LogTotalSize)) {
+        spaceInfo.push({
+            label: pDiskInfoKeyset('log-size'),
+            value: (_jsx(ProgressViewer, { value: LogUsedSize, capacity: LogTotalSize, formatValues: formatStorageValuesToGb })),
         });
     }
-    if (valueIsDefined(PDiskId) && valueIsDefined(nodeId)) {
+    if (valueIsDefined(SystemSize)) {
+        spaceInfo.push({
+            label: pDiskInfoKeyset('system-size'),
+            value: formatBytes({ value: SystemSize }),
+        });
+    }
+    const additionalInfo = [];
+    const shouldDisplayLinks = (withPDiskPageLink || isUserAllowedToMakeChanges) &&
+        valueIsDefined(PDiskId) &&
+        valueIsDefined(nodeId);
+    if (shouldDisplayLinks) {
         const pDiskPagePath = getPDiskPagePath(PDiskId, nodeId);
         const pDiskInternalViewerPath = createPDiskDeveloperUILink({
             nodeId,
             pDiskId: PDiskId,
         });
-        pdiskInfo.push({
+        additionalInfo.push({
             label: pDiskInfoKeyset('links'),
-            value: (_jsxs("span", { className: b('links'), children: [!isPDiskPage && (_jsx(LinkWithIcon, { title: pDiskInfoKeyset('pdisk-page'), url: pDiskPagePath, external: false })), _jsx(LinkWithIcon, { title: pDiskInfoKeyset('developer-ui'), url: pDiskInternalViewerPath })] })),
+            value: (_jsxs("span", { className: b('links'), children: [withPDiskPageLink && (_jsx(LinkWithIcon, { title: pDiskInfoKeyset('pdisk-page'), url: pDiskPagePath, external: false })), isUserAllowedToMakeChanges && (_jsx(LinkWithIcon, { title: pDiskInfoKeyset('developer-ui'), url: pDiskInternalViewerPath }))] })),
         });
     }
-    return _jsx(InfoViewer, { info: pdiskInfo, ...infoViewerProps });
+    return [generalInfo, statusInfo, spaceInfo, additionalInfo];
+}
+export function PDiskInfo({ pDisk, nodeId, withPDiskPageLink, className, }) {
+    const isUserAllowedToMakeChanges = useTypedSelector(selectIsUserAllowedToMakeChanges);
+    const diskPagesAvailable = useDiskPagesAvailable();
+    const [generalInfo, statusInfo, spaceInfo, additionalInfo] = getPDiskInfo({
+        pDisk,
+        nodeId,
+        withPDiskPageLink: withPDiskPageLink && diskPagesAvailable,
+        isUserAllowedToMakeChanges,
+    });
+    return (_jsxs("div", { className: b('wrapper', className), children: [_jsxs("div", { className: b('col'), children: [_jsx(InfoViewer, { info: generalInfo, renderEmptyState: () => null }), _jsx(InfoViewer, { info: spaceInfo, renderEmptyState: () => null })] }), _jsxs("div", { className: b('col'), children: [_jsx(InfoViewer, { info: statusInfo, renderEmptyState: () => null }), _jsx(InfoViewer, { info: additionalInfo, renderEmptyState: () => null })] })] }));
 }

package/dist/components/PDiskInfo/PDiskInfo.scss

@@ -1,7 +1,21 @@
 .ydb-pdisk-info {
+    &__wrapper {
+        display: flex;
+        flex-flow: row wrap;
+        gap: 7px;
+    }
+
+    &__col {
+        display: flex;
+        flex-direction: column;
+        gap: 7px;
+
+        width: 500px;
+    }
+
     &__links {
         display: flex;
         flex-flow: row wrap;
-        gap: 12px;
+        gap: var(--g-spacing-2);
     }
 }

package/dist/components/PDiskInfo/i18n/en.json

@@ -1,14 +1,20 @@
 {
+    "decomission-status": "Decomission Status",
+    "type": "Type",
     "path": "Path",
     "guid": "GUID",
-    "category": "Category",
-    "type": "Type",
-    "size": "Size",
+    "serial-number": "Serial Number",
+    "shared-with-os": "SharedWithOs",
+    "drive-status": "Drive Status",
     "state": "State",
     "device": "Device",
     "realtime": "Realtime",
-    "serial-number": "SerialNumber",
+    "space": "Space",
+    "slots": "Slots",
+    "log-size": "Log Size",
+    "system-size": "System Size",
     "links": "Links",
     "developer-ui": "Developer UI",
-    "pdisk-page": "PDisk page"
+    "pdisk-page": "PDisk page",
+    "yes": "Yes"
 }

package/dist/components/PDiskInfo/i18n/index.d.ts

@@ -1 +1 @@
-export declare const pDiskInfoKeyset: (key: "path" | "type" | "size" | "state" | "links" | "guid" | "category" | "device" | "realtime" | "serial-number" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params) => string;
+export declare const pDiskInfoKeyset: (key: "type" | "path" | "space" | "state" | "yes" | "links" | "decomission-status" | "guid" | "serial-number" | "shared-with-os" | "drive-status" | "device" | "realtime" | "slots" | "log-size" | "system-size" | "developer-ui" | "pdisk-page", params?: import("@gravity-ui/i18n").Params) => string;

package/dist/components/PDiskPopup/PDiskPopup.js

@@ -2,9 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Popup } from '@gravity-ui/uikit';
 import { EFlag } from '../../types/api/enums';
+import { valueIsDefined } from '../../utils';
 import { cn } from '../../utils/cn';
 import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
-import { getPDiskId } from '../../utils/dataFormatters/dataFormatters';
+import { getPDiskId } from '../../utils/disks/helpers';
 import { bytesToGB } from '../../utils/utils';
 import { InfoViewer } from '../InfoViewer';
 import './PDiskPopup.scss';
@@ -13,7 +14,12 @@ const errorColors = [EFlag.Orange, EFlag.Red, EFlag.Yellow];
 export const preparePDiskData = (data, nodes) => {
     const { AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Type, Device } = data;
     const pdiskData = [
-        { label: 'PDisk', value: getPDiskId({ NodeId, PDiskId }) || EMPTY_DATA_PLACEHOLDER },
+        {
+            label: 'PDisk',
+            value: valueIsDefined(NodeId) && valueIsDefined(PDiskId)
+                ? getPDiskId(NodeId, PDiskId)
+                : EMPTY_DATA_PLACEHOLDER,
+        },
         { label: 'State', value: State || 'not available' },
         { label: 'Type', value: Type || 'unknown' },
     ];

package/dist/components/ProgressViewer/ProgressViewer.js

@@ -32,6 +32,9 @@ export function ProgressViewer({ value, capacity, formatValues = defaultFormatVa
         else if (fillWidth > dangerThreshold) {
             status = inverseColorize ? 'good' : 'danger';
         }
+        if (!isNumeric(capacity)) {
+            fillWidth = 100;
+        }
     }
     const lineStyle = {
         width: fillWidth + '%',

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.js

@@ -1,10 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircleCheck, CircleQuestionFill, CircleXmark } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
+import { CircleCheck, CircleInfo, CircleQuestionFill, CircleXmark } from '@gravity-ui/icons';
+import { Icon, Tooltip } from '@gravity-ui/uikit';
 import { isAxiosError } from 'axios';
+import i18n from '../../containers/Tenant/Query/i18n';
 import { cn } from '../../utils/cn';
+import { useChangedQuerySettings } from '../../utils/hooks/useChangedQuerySettings';
+import QuerySettingsDescription from '../QuerySettingsDescription/QuerySettingsDescription';
 import './QueryExecutionStatus.scss';
 const b = cn('kv-query-execution-status');
+const QuerySettingsIndicator = () => {
+    const { isIndicatorShown, changedLastExecutionSettingsDescriptions } = useChangedQuerySettings();
+    if (!isIndicatorShown) {
+        return null;
+    }
+    return (_jsx(Tooltip, { openDelay: 0, content: _jsx(QuerySettingsDescription, { prefix: i18n('banner.query-settings.message'), querySettings: changedLastExecutionSettingsDescriptions }), children: _jsx(Icon, { data: CircleInfo, className: b('query-settings-icon') }) }));
+};
 export const QueryExecutionStatus = ({ className, error }) => {
     let icon;
     let label;
@@ -17,5 +27,5 @@ export const QueryExecutionStatus = ({ className, error }) => {
         icon = (_jsx(Icon, { data: hasError ? CircleXmark : CircleCheck, className: b('result-status-icon', { error: hasError }) }));
         label = hasError ? 'Failed' : 'Completed';
     }
-    return (_jsxs("div", { className: b(null, className), children: [icon, label] }));
+    return (_jsxs("div", { className: b(null, className), children: [icon, label, _jsx(QuerySettingsIndicator, {})] }));
 };

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.scss

@@ -10,4 +10,8 @@
             color: var(--g-color-text-danger);
         }
     }
+
+    &__query-settings-icon {
+        color: var(--g-color-text-hint);
+    }
 }

package/dist/components/QuerySettingsDescription/QuerySettingsDescription.d.ts

@@ -0,0 +1,7 @@
+import './QuerySettingsDescription.scss';
+interface QuerySettingsDescriptionProps {
+    prefix: string;
+    querySettings: Record<string, string>;
+}
+declare const QuerySettingsDescription: ({ querySettings, prefix }: QuerySettingsDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export default QuerySettingsDescription;

package/dist/components/QuerySettingsDescription/QuerySettingsDescription.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+import './QuerySettingsDescription.scss';
+const b = cn('ydb-query-settings-description');
+const QuerySettingsDescription = ({ querySettings, prefix }) => {
+    return (_jsxs("div", { className: b('message'), children: [prefix, Object.entries(querySettings).map(([key, value], index, arr) => (_jsxs("span", { className: b('description-item'), children: [`${key}: ${value}`, index < arr.length - 1 ? ', ' : null] }, index)))] }));
+};
+export default QuerySettingsDescription;

package/dist/components/QuerySettingsDescription/QuerySettingsDescription.scss

@@ -0,0 +1,8 @@
+.ydb-query-settings-description {
+    &__message {
+        display: flex;
+        flex-wrap: wrap;
+
+        white-space: pre;
+    }
+}

package/dist/components/QuerySettingsDescription/index.d.ts

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

package/dist/components/QuerySettingsDescription/index.js

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

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

@@ -2,8 +2,9 @@ import type { PreparedVDisk } from '../../utils/disks/types';
 import type { InfoViewerProps } from '../InfoViewer/InfoViewer';
 import './VDiskInfo.scss';
 interface VDiskInfoProps<T extends PreparedVDisk> extends Omit<InfoViewerProps, 'info'> {
-    data: T;
-    isVDiskPage?: boolean;
+    data?: T;
+    withVDiskPageLink?: boolean;
+    withTitle?: boolean;
 }
-export declare function VDiskInfo<T extends PreparedVDisk>({ data, isVDiskPage, ...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,9 +1,11 @@
 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 } from '../../utils/dataFormatters/dataFormatters';
+import { formatStorageValuesToGb, stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
 import { createVDiskDeveloperUILink } from '../../utils/developerUI/developerUI';
+import { getSeverityColor } from '../../utils/disks/helpers';
 import { bytesToSpeed } from '../../utils/utils';
 import { EntityStatus } from '../EntityStatus/EntityStatus';
 import { InfoViewer } from '../InfoViewer';
@@ -13,9 +15,10 @@ import { vDiskInfoKeyset } from './i18n';
 import './VDiskInfo.scss';
 const b = cn('ydb-vdisk-info');
 // eslint-disable-next-line complexity
-export function VDiskInfo({ data, isVDiskPage = false, ...infoViewerProps }) {
+export function VDiskInfo({ data, withVDiskPageLink, withTitle, ...infoViewerProps }) {
     var _a, _b, _c, _d;
-    const { AllocatedSize, DiskSpace, FrontQueues, Guid, Replicated, VDiskState, VDiskSlotId, Kind, SatisfactionRank, AvailableSize, HasUnreadableBlobs, IncarnationGuid, InstanceGuid, StoragePoolName, ReadThroughput, WriteThroughput, PDiskId, NodeId, } = data;
+    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)) {
         vdiskInfo.push({ label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId });
@@ -104,8 +107,12 @@ export function VDiskInfo({ data, isVDiskPage = false, ...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 })] })),
         });
     }
-    return _jsx(InfoViewer, { info: vdiskInfo, ...infoViewerProps });
+    const title = data && withTitle ? _jsx(VDiskTitle, { data: data }) : null;
+    return _jsx(InfoViewer, { info: vdiskInfo, title: title, ...infoViewerProps });
+}
+function VDiskTitle({ data }) {
+    return (_jsxs("div", { className: b('title'), children: [vDiskInfoKeyset('vdiks-title'), _jsx(EntityStatus, { status: getSeverityColor(data.Severity), name: stringifyVdiskId(data.VDiskId) })] }));
 }

package/dist/components/VDiskInfo/VDiskInfo.scss

@@ -2,6 +2,12 @@
     &__links {
         display: flex;
         flex-flow: row wrap;
-        gap: 12px;
+        gap: var(--g-spacing-2);
+    }
+
+    &__title {
+        display: flex;
+        flex-direction: row;
+        gap: var(--g-spacing-2);
     }
 }

package/dist/components/VDiskInfo/i18n/en.json

@@ -19,5 +19,6 @@
     "vdisk-page": "VDisk Page",
     "developer-ui": "Developer UI",
     "yes": "Yes",
-    "no": "No"
+    "no": "No",
+    "vdiks-title": "VDisk"
 }

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

@@ -1 +1 @@
-export declare const vDiskInfoKeyset: (key: "size" | "kind" | "yes" | "no" | "links" | "pool-name" | "guid" | "developer-ui" | "slot-id" | "incarnation-guid" | "instance-guid" | "replication-status" | "state-status" | "space-status" | "fresh-rank-satisfaction" | "level-rank-satisfaction" | "front-queues" | "has-unreadable-blobs" | "read-throughput" | "write-throughput" | "vdisk-page", params?: import("@gravity-ui/i18n").Params) => string;
+export declare const vDiskInfoKeyset: (key: "size" | "kind" | "yes" | "no" | "links" | "pool-name" | "guid" | "developer-ui" | "slot-id" | "incarnation-guid" | "instance-guid" | "replication-status" | "state-status" | "space-status" | "fresh-rank-satisfaction" | "level-rank-satisfaction" | "front-queues" | "has-unreadable-blobs" | "read-throughput" | "write-throughput" | "vdisk-page" | "vdiks-title", params?: import("@gravity-ui/i18n").Params) => string;

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');
+}