ydb-embedded-ui 6.11.0 → 6.12.0

package/dist/containers/PDiskPage/PDiskPage.js

@@ -1,53 +1,72 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ArrowRotateLeft } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
+import { Icon, Tabs } from '@gravity-ui/uikit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { Helmet } from 'react-helmet-async';
 import { StringParam, useQueryParams } from 'use-query-params';
+import { z } from 'zod';
 import { AutoRefreshControl } from '../../components/AutoRefreshControl/AutoRefreshControl';
 import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
 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 { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { selectNodesMap } from '../../store/reducers/nodesList';
 import { pDiskApi } from '../../store/reducers/pdisk/pdisk';
 import { valueIsDefined } from '../../utils';
-import { getSeverityColor } from '../../utils/disks/helpers';
+import { getPDiskId, getSeverityColor } from '../../utils/disks/helpers';
 import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
-import { PDiskGroups } from './PDiskGroups';
+import { PDiskGroups } from './PDiskGroups/PDiskGroups';
+import { PDiskSpaceDistribution } from './PDiskSpaceDistribution/PDiskSpaceDistribution';
 import { pDiskPageKeyset } from './i18n';
 import { pdiskPageCn } from './shared';
 import './PDiskPage.scss';
+const PDISK_TABS_IDS = {
+    diskDistribution: 'diskDistribution',
+    groups: 'groups',
+};
+const PDISK_PAGE_TABS = [
+    {
+        id: PDISK_TABS_IDS.diskDistribution,
+        get title() {
+            return pDiskPageKeyset('disk-distribution');
+        },
+    },
+    {
+        id: PDISK_TABS_IDS.groups,
+        get title() {
+            return pDiskPageKeyset('groups');
+        },
+    },
+];
+const pDiskTabSchema = z.nativeEnum(PDISK_TABS_IDS).catch(PDISK_TABS_IDS.diskDistribution);
 export function PDiskPage() {
-    var _a;
     const dispatch = useTypedDispatch();
-    const nodesMap = useTypedSelector(selectNodesMap);
     const { isUserAllowedToMakeChanges } = useTypedSelector((state) => state.authentication);
-    const [{ nodeId, pDiskId }] = useQueryParams({
+    const [{ nodeId, pDiskId, activeTab }] = useQueryParams({
+        activeTab: StringParam,
         nodeId: StringParam,
         pDiskId: StringParam,
     });
+    const pDiskParamsDefined = valueIsDefined(nodeId) && valueIsDefined(pDiskId);
+    const pDiskTab = pDiskTabSchema.parse(activeTab);
     React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('pDisk', { nodeId, pDiskId }));
     }, [dispatch, nodeId, pDiskId]);
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const params = valueIsDefined(nodeId) && valueIsDefined(pDiskId) ? { nodeId, pDiskId } : skipToken;
+    const params = pDiskParamsDefined ? { nodeId, pDiskId } : skipToken;
     const pdiskDataQuery = pDiskApi.useGetPdiskInfoQuery(params, {
         pollingInterval: autoRefreshInterval,
     });
     const pDiskLoading = pdiskDataQuery.isFetching && pdiskDataQuery.currentData === undefined;
-    const pDiskData = pdiskDataQuery.currentData || {};
-    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData;
-    const pDiskStorageQuery = pDiskApi.useGetStorageInfoQuery(params, {
-        pollingInterval: autoRefreshInterval,
-    });
-    const groupsLoading = pDiskStorageQuery.isFetching && pDiskStorageQuery.currentData === undefined;
-    const groupsData = (_a = pDiskStorageQuery.currentData) !== null && _a !== void 0 ? _a : [];
+    const pDiskData = pdiskDataQuery.currentData;
+    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData || {};
     const handleRestart = async () => {
-        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
+        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 };
@@ -57,8 +76,10 @@ export function PDiskPage() {
         }
         return undefined;
     };
-    const handleAfterRestart = async () => {
-        return Promise.all([pdiskDataQuery.refetch(), pDiskStorageQuery.refetch()]);
+    const handleAfterRestart = () => {
+        if (pDiskParamsDefined) {
+            dispatch(api.util.invalidateTags([{ type: 'PDiskData', id: getPDiskId(nodeId, pDiskId) }]));
+        }
     };
     const renderHelmet = () => {
         const pDiskPagePart = pDiskId
@@ -70,13 +91,13 @@ export function PDiskPage() {
     const renderPageMeta = () => {
         const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
         const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
-        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), loading: pDiskLoading, items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
+        return (_jsxs("div", { className: pdiskPageCn('meta'), children: [_jsx(PageMeta, { loading: pDiskLoading, items: [hostItem, nodeIdItem, NodeType, NodeDC] }), _jsx(AutoRefreshControl, {})] }));
     };
     const renderPageTitle = () => {
-        return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskId, className: pdiskPageCn('title') }));
+        return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskParamsDefined ? getPDiskId(nodeId, pDiskId) : null, className: pdiskPageCn('title') }));
     };
     const renderControls = () => {
-        return (_jsxs("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')] }), _jsx(AutoRefreshControl, { className: pdiskPageCn('auto-refresh-control') })] }));
+        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')] }) }));
     };
     const renderInfo = () => {
         if (pDiskLoading) {
@@ -84,8 +105,25 @@ export function PDiskPage() {
         }
         return (_jsx(PDiskInfo, { pDisk: pDiskData, nodeId: nodeId, className: pdiskPageCn('info'), isPDiskPage: true }));
     };
-    const renderGroupsTable = () => {
-        return _jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading });
+    const renderTabs = () => {
+        return (_jsx("div", { className: pdiskPageCn('tabs'), children: _jsx(Tabs, { size: "l", items: PDISK_PAGE_TABS, activeTab: pDiskTab, wrapTo: ({ id }, tabNode) => {
+                    const path = pDiskParamsDefined
+                        ? getPDiskPagePath(pDiskId, nodeId, { activeTab: id })
+                        : undefined;
+                    return (_jsx(InternalLink, { to: path, children: tabNode }, id));
+                } }) }));
+    };
+    const renderTabsContent = () => {
+        switch (pDiskTab) {
+            case 'diskDistribution': {
+                return pDiskData ? _jsx(PDiskSpaceDistribution, { data: pDiskData }) : null;
+            }
+            case 'groups': {
+                return pDiskParamsDefined ? (_jsx(PDiskGroups, { nodeId: nodeId, pDiskId: pDiskId })) : null;
+            }
+            default:
+                return null;
+        }
     };
-    return (_jsxs("div", { className: pdiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderGroupsTable()] }));
+    return (_jsxs("div", { className: pdiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderTabs(), renderTabsContent()] }));
 }

package/dist/containers/PDiskPage/PDiskPage.scss

@@ -15,13 +15,16 @@
     &__title,
     &__info,
     &__controls,
-    &__groups-title {
+    &__tabs {
         position: sticky;
         left: 0;
     }
 
-    &__groups-title {
-        @include header-1-typography();
+    &__meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--g-spacing-4);
     }
 
     &__controls {
@@ -30,7 +33,7 @@
         gap: var(--g-spacing-2);
     }
 
-    &__auto-refresh-control {
-        margin-inline-start: auto;
+    &__tabs {
+        @include tabs-wrapper-styles();
     }
 }

package/dist/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.d.ts

@@ -0,0 +1,7 @@
+import type { PDiskData } from '../../../store/reducers/pdisk/types';
+import './PDiskSpaceDistribution.scss';
+interface PDiskSpaceDistributionProps {
+    data: PDiskData;
+}
+export declare function PDiskSpaceDistribution({ data }: PDiskSpaceDistributionProps): string | import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContentWithPopup } from '../../../components/ContentWithPopup/ContentWithPopup';
+import { DiskStateProgressBar } from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
+import { InfoViewer } from '../../../components/InfoViewer';
+import { InternalLink } from '../../../components/InternalLink';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
+import { VDiskInfo } from '../../../components/VDiskInfo/VDiskInfo';
+import { getVDiskPagePath } from '../../../routes';
+import { valueIsDefined } from '../../../utils';
+import { formatBytes } from '../../../utils/bytesParsers';
+import { cn } from '../../../utils/cn';
+import { formatStorageValuesToGb } from '../../../utils/dataFormatters/dataFormatters';
+import { pDiskPageKeyset } from '../i18n';
+import { isEmptySlot, isLogSlot, isVDiskSlot } from './utils';
+import './PDiskSpaceDistribution.scss';
+const b = cn('ydb-pdisk-space-distribution');
+const SLOT_HEIGHT = 40;
+export function PDiskSpaceDistribution({ data }) {
+    const { SlotItems } = data;
+    const { PDiskId, NodeId } = data;
+    const containerHeight = SLOT_HEIGHT * ((SlotItems === null || SlotItems === void 0 ? void 0 : SlotItems.length) || 1);
+    const renderSlots = () => {
+        return SlotItems === null || SlotItems === void 0 ? void 0 : SlotItems.map((item, index) => {
+            return _jsx(Slot, { item: item, pDiskId: PDiskId, nodeId: NodeId }, index);
+        });
+    };
+    if (!(SlotItems === null || SlotItems === void 0 ? void 0 : SlotItems.length)) {
+        return pDiskPageKeyset('no-slots-data');
+    }
+    return (_jsx("div", { className: b(null), style: {
+            height: containerHeight,
+            minHeight: containerHeight,
+        }, children: _jsx(DiskStateProgressBar, { className: b('pdisk-bar'), severity: data.Severity, diskAllocatedPercent: data.AllocatedPercent, content: renderSlots(), faded: true }) }));
+}
+function Slot({ item, pDiskId, nodeId }) {
+    const renderContent = () => {
+        var _a;
+        if (isVDiskSlot(item)) {
+            const vDiskPagePath = valueIsDefined((_a = item.SlotData) === null || _a === void 0 ? void 0 : _a.VDiskSlotId) &&
+                valueIsDefined(pDiskId) &&
+                valueIsDefined(nodeId)
+                ? getVDiskPagePath(item.SlotData.VDiskSlotId, pDiskId, nodeId)
+                : undefined;
+            return (_jsx(ContentWithPopup, { content: _jsx(VDiskInfo, { data: item.SlotData, withTitle: true }), contentClassName: b('vdisk-popup'), placement: ['right', 'top'], children: _jsx(InternalLink, { to: vDiskPagePath, children: _jsx(DiskStateProgressBar, { className: b('slot'), severity: item.Severity, diskAllocatedPercent: item.UsagePercent, content: _jsx(SlotContent, { id: item.Id, title: item.Title, used: item.Used, total: item.Total }) }) }) }));
+        }
+        if (isLogSlot(item)) {
+            return (_jsx(ContentWithPopup, { content: _jsx(LogInfo, { data: item.SlotData }), contentClassName: b('vdisk-popup'), placement: ['right', 'top'], children: _jsx(DiskStateProgressBar, { className: b('slot'), severity: item.Severity, diskAllocatedPercent: item.UsagePercent, content: _jsx(SlotContent, { title: pDiskPageKeyset('log'), used: item.Used, total: item.Total }) }) }));
+        }
+        if (isEmptySlot(item)) {
+            return (_jsx(ContentWithPopup, { content: _jsx(EmptySlotInfo, { data: item.SlotData }), contentClassName: b('vdisk-popup'), placement: ['right', 'top'], children: _jsx(DiskStateProgressBar, { className: b('slot'), severity: item.Severity, empty: true, content: _jsx(SlotContent, { title: pDiskPageKeyset('empty-slot'), 
+                        // Empty slots have only total size
+                        used: item.Total }) }) }));
+        }
+        return null;
+    };
+    return (_jsx("div", { className: b('slot-wrapper'), style: { flexGrow: Number(item.Total) || 1 }, children: renderContent() }));
+}
+function SlotContent({ id, title, used, total }) {
+    const renderSize = () => {
+        const [formattedUsed, formattedTotal] = formatStorageValuesToGb(used, total);
+        if (!total) {
+            return formattedUsed;
+        }
+        return `${formattedUsed} / ${formattedTotal}`;
+    };
+    return (_jsxs("div", { className: b('slot-content'), children: [_jsxs("span", { children: [valueIsDefined(id) ? _jsx("span", { className: b('slot-id'), children: id }) : null, title] }), _jsx("span", { className: b('slot-size'), children: renderSize() })] }));
+}
+function LogInfo({ data }) {
+    const { LogTotalSize, LogUsedSize, SystemSize } = data;
+    const info = [
+        {
+            label: pDiskPageKeyset('label.log-size'),
+            value: (_jsx(ProgressViewer, { value: LogUsedSize, capacity: LogTotalSize, formatValues: formatStorageValuesToGb })),
+        },
+    ];
+    if (valueIsDefined(SystemSize)) {
+        info.push({
+            label: pDiskPageKeyset('label.system-size'),
+            value: formatBytes({ value: SystemSize }),
+        });
+    }
+    return _jsx(InfoViewer, { title: pDiskPageKeyset('log'), info: info });
+}
+function EmptySlotInfo({ data }) {
+    const { Size } = data;
+    const info = [
+        {
+            label: pDiskPageKeyset('label.slot-size'),
+            value: formatBytes({ value: Size }),
+        },
+    ];
+    return _jsx(InfoViewer, { title: pDiskPageKeyset('empty-slot'), info: info });
+}

package/dist/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.scss

@@ -0,0 +1,52 @@
+.ydb-pdisk-space-distribution {
+    .storage-disk-progress-bar {
+        height: 100%;
+    }
+
+    &__pdisk-bar {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+        gap: var(--g-spacing-2);
+
+        min-width: 500px;
+        max-width: 800px;
+        padding: var(--g-spacing-2);
+    }
+
+    &__slot-wrapper {
+        z-index: 1;
+
+        background-color: var(--g-color-base-background);
+    }
+
+    &__slot {
+        display: flex;
+
+        width: 100%;
+    }
+
+    &__slot-content {
+        z-index: 1;
+
+        display: flex;
+        flex-grow: 1;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 0 var(--g-spacing-2);
+
+        line-height: 15px;
+    }
+
+    &__slot-id {
+        margin-right: var(--g-spacing-3);
+
+        font-weight: 600;
+    }
+
+    &__vdisk-popup {
+        padding: var(--g-spacing-half) var(--g-spacing-2) var(--g-spacing-2);
+    }
+}

package/dist/containers/PDiskPage/PDiskSpaceDistribution/utils.d.ts

@@ -0,0 +1,4 @@
+import type { SlotItem, SlotItemType } from '../../../store/reducers/pdisk/types';
+export declare function isVDiskSlot(slot: SlotItem<SlotItemType>): slot is SlotItem<'vDisk'>;
+export declare function isLogSlot(slot: SlotItem<SlotItemType>): slot is SlotItem<'log'>;
+export declare function isEmptySlot(slot: SlotItem<SlotItemType>): slot is SlotItem<'empty'>;

package/dist/containers/PDiskPage/PDiskSpaceDistribution/utils.js

@@ -0,0 +1,9 @@
+export function isVDiskSlot(slot) {
+    return slot.SlotType === 'vDisk';
+}
+export function isLogSlot(slot) {
+    return slot.SlotType === 'log';
+}
+export function isEmptySlot(slot) {
+    return slot.SlotType === 'empty';
+}

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

@@ -1,8 +1,15 @@
 {
     "fqdn": "FQDN",
     "pdisk": "PDisk",
-    "groups": "Groups",
     "node": "Node",
+    "groups": "Groups",
+    "disk-distribution": "Disk distribution",
+    "empty-slot": "Empty slot",
+    "log": "Log",
+    "label.log-size": "Log Size",
+    "label.system-size": "System Size",
+    "label.slot-size": "Slot Size",
+    "no-slots-data": "No slots data",
     "restart-pdisk-button": "Restart PDisk",
     "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" | "pdisk" | "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" | "restart-pdisk-dialog" | "restart-pdisk-not-allowed", params?: import("@gravity-ui/i18n").Params) => string;

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.js

@@ -56,9 +56,9 @@ const erasureColumn = {
     name: GROUPS_COLUMNS_IDS.Erasure,
     header: 'Erasure',
     width: 100,
+    sortAccessor: (row) => row.ErasureSpecies,
     render: ({ row }) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
     align: DataTable.LEFT,
-    sortable: false,
 };
 const degradedColumn = {
     name: GROUPS_COLUMNS_IDS.Degraded,
@@ -82,7 +82,6 @@ const usageColumn = {
     // without a limit exclude usage from sort to display at the bottom
     sortAccessor: (row) => (row.Limit ? row.Usage : null),
     align: DataTable.LEFT,
-    sortable: false,
 };
 const groupIdColumn = {
     name: GROUPS_COLUMNS_IDS.GroupId,
@@ -93,7 +92,6 @@ const groupIdColumn = {
     },
     sortAccessor: (row) => Number(row.GroupID),
     align: DataTable.RIGHT,
-    sortable: false,
 };
 const usedColumn = {
     name: GROUPS_COLUMNS_IDS.Used,
@@ -103,7 +101,6 @@ const usedColumn = {
         return bytesToGB(row.Used, true);
     },
     align: DataTable.RIGHT,
-    sortable: false,
 };
 const limitColumn = {
     name: GROUPS_COLUMNS_IDS.Limit,
@@ -113,7 +110,6 @@ const limitColumn = {
         return bytesToGB(row.Limit);
     },
     align: DataTable.RIGHT,
-    sortable: false,
 };
 const usedSpaceFlagColumn = {
     name: GROUPS_COLUMNS_IDS.UsedSpaceFlag,
@@ -166,9 +162,23 @@ const getVDisksColumn = (nodes) => ({
     align: DataTable.CENTER,
     width: 900,
     resizeable: false,
+    sortable: false,
 });
 export const getStorageTopGroupsColumns = () => {
-    return [groupIdColumn, typeColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
+    const columns = [
+        groupIdColumn,
+        typeColumn,
+        erasureColumn,
+        usageColumn,
+        usedColumn,
+        limitColumn,
+    ];
+    return columns.map((column) => {
+        return {
+            ...column,
+            sortable: false,
+        };
+    });
 };
 export const getPDiskStorageColumns = (nodes) => {
     return [

package/dist/containers/Tablets/Tablets.js

@@ -3,19 +3,19 @@ import { ArrowsRotateRight } from '@gravity-ui/icons';
 import { Icon, Label, Text } from '@gravity-ui/uikit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import { DeveloperUiLink } from '../../components/DeveloperUiLink/DeveloperUiLink';
+import { DeveloperUILinkButton } from '../../components/DeveloperUILinkButton/DeveloperUILinkButton';
 import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { InternalLink } from '../../components/InternalLink';
 import { ResizeableDataTable } from '../../components/ResizeableDataTable/ResizeableDataTable';
 import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
 import routes, { createHref } from '../../routes';
-import { backend } from '../../store';
 import { selectTabletsWithFqdn, tabletsApi } from '../../store/reducers/tablets';
 import { ETabletState } from '../../types/api/tablet';
 import { cn } from '../../utils/cn';
-import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
 import { calcUptime } from '../../utils/dataFormatters/dataFormatters';
+import { createTabletDeveloperUIHref } from '../../utils/developerUI/developerUI';
 import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { mapTabletStateToLabelTheme } from '../../utils/tablet';
 import { getDefaultNodePath } from '../Node/NodePages';
@@ -28,20 +28,23 @@ const columns = [
             return i18n('Type');
         },
         render: ({ row }) => {
-            return (_jsxs("span", { children: [row.Type, " ", row.Leader ? '' : _jsx(Text, { color: "secondary", children: "follower" })] }));
+            const isFollower = row.Leader === false;
+            return (_jsxs("span", { children: [row.Type, " ", isFollower ? _jsx(Text, { color: "secondary", children: "follower" }) : ''] }));
         },
     },
     {
         name: 'TabletId',
-        width: 230,
+        width: 220,
         get header() {
             return i18n('Tablet');
         },
         render: ({ row }) => {
             var _a;
-            const tabletPath = row.TabletId &&
-                createHref(routes.tablet, { id: row.TabletId }, { nodeId: row.NodeId, type: row.Type });
-            return (_jsx(EntityStatus, { name: (_a = row.TabletId) === null || _a === void 0 ? void 0 : _a.toString(), path: tabletPath, hasClipboardButton: true, showStatus: false, additionalControls: _jsx(DeveloperUiLink, { href: `${backend}/tablets?TabletID=${row.TabletId}` }) }));
+            if (!row.TabletId) {
+                return EMPTY_DATA_PLACEHOLDER;
+            }
+            const tabletPath = createHref(routes.tablet, { id: row.TabletId }, { nodeId: row.NodeId, type: row.Type });
+            return (_jsx(EntityStatus, { name: (_a = row.TabletId) === null || _a === void 0 ? void 0 : _a.toString(), path: tabletPath, hasClipboardButton: true, showStatus: false, additionalControls: _jsx(DeveloperUILinkButton, { href: createTabletDeveloperUIHref(row.TabletId) }) }));
         },
     },
     {

package/dist/containers/Tenant/Acl/Acl.d.ts

@@ -1,4 +1,5 @@
 import './Acl.scss';
-export declare const Acl: ({ path }: {
+export declare const Acl: ({ path, database }: {
     path: string;
+    database: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/containers/Tenant/Acl/Acl.js

@@ -6,7 +6,7 @@ import { Loader } from '../../../components/Loader';
 import { schemaAclApi } from '../../../store/reducers/schemaAcl/schemaAcl';
 import { valueIsDefined } from '../../../utils';
 import { cn } from '../../../utils/cn';
-import i18n from '../i18n';
+import i18n from './i18n';
 import './Acl.scss';
 const b = cn('ydb-acl');
 const prepareLogin = (value) => {
@@ -87,15 +87,16 @@ function getOwnerItem(owner) {
     return [
         {
             name: _jsx("span", { className: b('owner'), children: preparedOwner }),
-            content: _jsx("span", { className: b('owner'), children: i18n('acl.owner') }),
+            content: _jsx("span", { className: b('owner'), children: i18n('title_owner') }),
         },
     ];
 }
-export const Acl = ({ path }) => {
-    const { currentData, isFetching, error } = schemaAclApi.useGetSchemaAclQuery({ path });
+export const Acl = ({ path, database }) => {
+    const { currentData, isFetching, error } = schemaAclApi.useGetSchemaAclQuery({ path, database });
     const loading = isFetching && !currentData;
-    const { acl, owner } = currentData || {};
+    const { acl, effectiveAcl, owner } = currentData || {};
     const aclListItems = getAclListItems(acl);
+    const effectiveAclListItems = getAclListItems(effectiveAcl);
     const ownerItem = getOwnerItem(owner);
     if (loading) {
         return _jsx(Loader, {});
@@ -103,8 +104,9 @@ export const Acl = ({ path }) => {
     if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    if (!acl && !owner) {
-        return _jsx(React.Fragment, { children: i18n('acl.empty') });
+    if (!acl && !owner && !effectiveAcl) {
+        return _jsx(React.Fragment, { children: i18n('description_empty') });
     }
-    return (_jsxs("div", { className: b(), children: [ownerItem.length ? (_jsx(DefinitionList, { items: ownerItem, nameMaxWidth: 200, className: b('owner-container') })) : null, aclListItems.length ? (_jsx(DefinitionList, { items: aclListItems, nameMaxWidth: 200, className: b('result') })) : null] }));
+    const accessRightsItems = ownerItem.concat(aclListItems);
+    return (_jsxs("div", { className: b(), children: [accessRightsItems.length ? (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('list-title'), children: i18n('title_rights') }), _jsx(DefinitionList, { items: accessRightsItems, nameMaxWidth: 200, className: b('result') })] })) : null, effectiveAclListItems.length ? (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('list-title'), children: i18n('title_effective-rights') }), _jsx(DefinitionList, { items: effectiveAclListItems, nameMaxWidth: 200, className: b('result') })] })) : null] }));
 };

package/dist/containers/Tenant/Acl/Acl.scss

@@ -2,20 +2,20 @@
 
 .ydb-acl {
     width: 100%;
-    &__owner-container {
-        padding-bottom: 25px;
-    }
     &__result {
-        padding-bottom: 16px;
-    }
-
-    &__owner {
-        font-weight: 600;
+        padding-bottom: var(--g-spacing-4);
+        padding-left: var(--g-spacing-2);
     }
     &__definition-content {
         display: flex;
         flex-direction: column;
     }
+    &__list-title {
+        margin: var(--g-spacing-3) 0 var(--g-spacing-5);
+
+        font-weight: 600;
+        @include subheader-2-typography();
+    }
     &__group-label {
         @include subheader-2-typography();
     }

package/dist/containers/Tenant/Acl/i18n/en.json

@@ -0,0 +1,6 @@
+{
+    "title_rights": "Access Rights",
+    "title_effective-rights": "Effective Access Rights",
+    "title_owner": "Owner",
+    "description_empty": "No Acl data"
+}

package/dist/containers/Tenant/Acl/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "title_rights" | "title_effective-rights" | "title_owner" | "description_empty", params?: import("@gravity-ui/i18n").Params) => string;
+export default _default;

package/dist/containers/Tenant/Acl/i18n/index.js

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-acl';
+export default registerKeysets(COMPONENT, { en });

package/dist/containers/Tenant/Diagnostics/Describe/Describe.d.ts

@@ -3,7 +3,8 @@ import './Describe.scss';
 import 'react-json-inspector/json-inspector.css';
 interface IDescribeProps {
     path: string;
+    database: string;
     type?: EPathType;
 }
-declare const Describe: ({ path, type }: IDescribeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Describe: ({ path, database, type }: IDescribeProps) => import("react/jsx-runtime").JSX.Element;
 export default Describe;

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

@@ -13,18 +13,18 @@ import './Describe.scss';
 import 'react-json-inspector/json-inspector.css';
 const b = cn('kv-describe');
 const expandMap = new Map();
-const Describe = ({ path, type }) => {
+const Describe = ({ path, database, type }) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
-    const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, path, type), shallowEqual);
-    let paths = skipToken;
+    const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, path, type, database), shallowEqual);
+    let paths = [];
     if (!isEntityWithMergedImpl) {
         paths = [path];
     }
     else if (mergedChildrenPaths) {
         paths = [path, ...mergedChildrenPaths];
     }
-    const { currentData, isFetching, error } = describeApi.useGetDescribeQuery(paths, {
+    const { currentData, isFetching, error } = describeApi.useGetDescribeQuery(paths.length ? { paths, database } : skipToken, {
         pollingInterval: autoRefreshInterval,
     });
     const loading = isFetching && currentData === undefined;

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

@@ -10,6 +10,6 @@ function DetailedOverview(props) {
         return (_jsx("div", { className: b('section'), children: _jsx(TenantOverview, { tenantName: tenantName, additionalTenantProps: additionalTenantProps, additionalNodesProps: additionalNodesProps }) }));
     };
     const isTenant = tenantName === path;
-    return (_jsx("div", { className: b(), children: isTenant ? renderTenantOverview() : _jsx(Overview, { type: type, path: path }) }));
+    return (_jsx("div", { className: b(), children: isTenant ? (renderTenantOverview()) : (_jsx(Overview, { type: type, path: path, database: tenantName })) }));
 }
 export default DetailedOverview;