ydb-embedded-ui 21.1.0 → 22.0.0

package/dist/store/reducers/vdisk/vdisk.d.ts

@@ -14,7 +14,7 @@ export type VDiskBlobIndexStatParams = VDiskBlobIndexStatBasicParams & {
     database?: string;
 };
 export declare const vDiskApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, {
-    getVDiskData: import("@reduxjs/toolkit/query").QueryDefinition<VDiskDataRequestParams, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", import("./types").VDiskData | undefined, "api", any>;
-    getVDiskBlobIndexStat: import("@reduxjs/toolkit/query").QueryDefinition<VDiskBlobIndexStatParams, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", import("../../../types/api/vdiskBlobIndex").VDiskBlobIndexResponse | undefined, "api", any>;
-}, "api", "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
+    getVDiskData: import("@reduxjs/toolkit/query").QueryDefinition<VDiskDataRequestParams, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", import("./types").VDiskData | undefined, "api", any>;
+    getVDiskBlobIndexStat: import("@reduxjs/toolkit/query").QueryDefinition<VDiskBlobIndexStatParams, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", import("../../../types/api/vdiskBlobIndex").VDiskBlobIndexResponse | undefined, "api", any>;
+}, "api", "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
 export {};

package/dist/store/reducers/viewSchema/viewSchema.d.ts

@@ -4,5 +4,5 @@ export declare const viewSchemaApi: import("@reduxjs/toolkit/query").Api<import(
         path: string;
         databaseFullPath: string;
         timeout?: number;
-    }, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", import("../../../types/api/query").ColumnType[] | undefined, "api", any>;
-}, "api", "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;
+    }, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../api")._NEVER, unknown, {}>, "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", import("../../../types/api/query").ColumnType[] | undefined, "api", any>;
+}, "api", "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;

package/dist/store/state-url-mapping.js

@@ -1,3 +1,4 @@
+import { createNextState } from '@reduxjs/toolkit';
 import each from 'lodash/each';
 import keys from 'lodash/keys';
 import merge from 'lodash/merge';
@@ -68,7 +69,10 @@ export const paramSetup = {
     '/*/tenant': databasePageParams,
 };
 function mergeLocationToState(state, location) {
-    return merge({}, state, location.query);
+    // Preserve cached API data when updating only URL-backed state.
+    return createNextState(state, (draft) => {
+        merge(draft, location.query);
+    });
 }
 function restoreUnknownParams(location, prevLocation) {
     const { search, ...rest } = location;

package/dist/store/state-url-mapping.js.map

@@ -1 +1 @@
-{"version":3,"file":"state-url-mapping.js","sourceRoot":"","sources":["../../src/store/state-url-mapping.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"state-url-mapping.js","sourceRoot":"","sources":["../../src/store/state-url-mapping.ts"],"names":[],"mappings":"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"}

package/dist/types/api/storage.d.ts

@@ -2,100 +2,6 @@ import type { BackendSortParam, SchemaPathParam } from './common';
 import type { ECapacityAlert, EFlag } from './enums';
 import type { EDecommitStatus, EDriveStatus, EMaintenanceStatus, TPDiskStateInfo } from './pdisk';
 import type { EVDiskStatus, TVDiskStateInfo } from './vdisk';
-/**
- * endpoint: /viewer/storage
- *
- * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
- */
-export interface TStorageInfo {
-    Overall?: EFlag;
-    StoragePools?: TStoragePoolInfo[];
-    StorageGroups?: TStorageGroupInfoV2[];
-    /** uint64 */
-    TotalGroups?: string;
-    /** uint64 */
-    FoundGroups?: string;
-}
-export interface TStoragePoolInfo {
-    Overall?: EFlag;
-    Name?: string;
-    Kind?: string;
-    Groups?: TStorageGroupInfo[];
-    /** uint64 */
-    AcquiredUnits?: string;
-    AcquiredIOPS?: number;
-    /** uint64 */
-    AcquiredThroughput?: string;
-    /** uint64 */
-    AcquiredSize?: string;
-    MaximumIOPS?: number;
-    /** uint64 */
-    MaximumThroughput?: string;
-    /** uint64 */
-    MaximumSize?: string;
-    MediaType?: string;
-}
-export interface TStorageGroupInfoV2 extends TStorageGroupInfo {
-    PoolName?: string;
-    Kind?: string;
-    MediaType?: string;
-    /** uint64 */
-    Degraded?: string;
-    /** uint64 */
-    Used: string;
-    /** uint64 */
-    Limit: string;
-    /** uint64 */
-    Read: string;
-    /** uint64 */
-    Write: string;
-    /** uint64 */
-    Usage?: string;
-}
-export type TStorageGroupInfo = TBSGroupStateInfo & THiveStorageGroupStats & {
-    DiskSpace?: EFlag;
-};
-interface TBSGroupStateInfo {
-    GroupID?: number;
-    ErasureSpecies?: Erasure;
-    VDisks?: TVDiskStateInfo[];
-    /** uint64 */
-    ChangeTime?: string;
-    NodeId?: number;
-    GroupGeneration?: number;
-    Overall?: EFlag;
-    Latency?: EFlag;
-    Count?: number;
-    StoragePoolName?: string;
-    /** uint64 */
-    AllocatedSize?: string;
-    /** uint64 */
-    AvailableSize?: string;
-    /** uint64 */
-    ReadThroughput?: string;
-    /** uint64 */
-    WriteThroughput?: string;
-    Encryption?: boolean;
-}
-interface THiveStorageGroupStats {
-    GroupID?: number;
-    /** uint64 */
-    AcquiredUnits?: string;
-    AcquiredIOPS?: number;
-    /** uint64 */
-    AcquiredThroughput?: string;
-    /** uint64 */
-    AcquiredSize?: string;
-    MaximumIOPS?: number;
-    /** uint64 */
-    MaximumThroughput?: string;
-    /** uint64 */
-    MaximumSize?: string;
-    /** uint64 */
-    AllocatedSize?: string;
-    /** uint64 */
-    AvailableSize?: string;
-}
 /**
  * endpoint: /storage/groups
  *
@@ -230,21 +136,15 @@ export interface TStoragePDisk {
  * https://ydb.tech/docs/en/concepts/topology#cluster-config
  */
 export type Erasure = 'none' | 'block-4-2' | 'mirror-3-dc' | 'mirror-3of4';
-export type EVersion = 'v1' | 'v2';
-/**
- * Values to sort /viewer/storage v2 response
- */
-export type StorageV2SortValue = 'PoolName' | 'Kind' | 'MediaType' | 'Erasure' | 'Degraded' | 'Usage' | 'GroupId' | 'Used' | 'Limit' | 'Read' | 'Write' | 'AllocationUnits' | 'Latency' | 'DiskSpaceUsage' | 'State' | 'MaxPDiskUsage' | 'MaxVDiskSlotUsage' | 'MaxVDiskRawUsage' | 'MaxNormalizedOccupancy' | 'CapacityAlert';
 /**
  * Values to sort /storage/groups response
  */
-export type GroupsSortField = StorageV2SortValue | 'MissingDisks' | 'Available' | 'Encryption';
-export type StorageV2Sort = BackendSortParam<StorageV2SortValue>;
+export type GroupsSortField = 'PoolName' | 'Kind' | 'MediaType' | 'Erasure' | 'Degraded' | 'Usage' | 'GroupId' | 'Used' | 'Limit' | 'Read' | 'Write' | 'AllocationUnits' | 'Latency' | 'DiskSpaceUsage' | 'State' | 'MaxPDiskUsage' | 'MaxVDiskSlotUsage' | 'MaxVDiskRawUsage' | 'MaxNormalizedOccupancy' | 'CapacityAlert' | 'MissingDisks' | 'Available' | 'Encryption';
 export type GroupsSort = BackendSortParam<GroupsSortField>;
 export type StorageWithFilter = 'space' | 'missing' | 'all';
 export type GroupsGroupByField = 'GroupId' | 'Erasure' | 'Usage' | 'DiskSpaceUsage' | 'PoolName' | 'PileName' | 'Kind' | 'Encryption' | 'MediaType' | 'MissingDisks' | 'State' | 'Latency' | 'CapacityAlert';
 export type GroupsRequiredField = 'GroupId' | 'PoolName' | 'PileName' | 'Kind' | 'MediaType' | 'Erasure' | 'MissingDisks' | 'Degraded' | 'State' | 'Used' | 'Limit' | 'Usage' | 'Available' | 'DiskSpaceUsage' | 'Encryption' | 'AllocationUnits' | 'GroupSizeInUnits' | 'Read' | 'Write' | 'PDisk' | 'VDisk' | 'Latency' | 'MaxPDiskUsage' | 'MaxVDiskSlotUsage' | 'MaxVDiskRawUsage' | 'MaxNormalizedOccupancy' | 'CapacityAlert';
-interface BaseStorageRequestParams {
+export interface GroupsRequestParams {
     database?: string;
     pool?: string;
     with?: StorageWithFilter;
@@ -252,15 +152,6 @@ interface BaseStorageRequestParams {
     filter?: string;
     offset?: number;
     limit?: number;
-}
-export interface StorageRequestParams extends BaseStorageRequestParams {
-    nodeId?: string | number;
-    pDiskId?: string | number;
-    groupId?: string | number;
-    sort?: StorageV2Sort;
-    version?: EVersion;
-}
-export interface GroupsRequestParams extends BaseStorageRequestParams {
     nodeId?: string | number | (string | number)[];
     pDiskId?: string | number | (string | number)[];
     groupId?: string | number | (string | number)[];

package/dist/types/api/storage.js.map

@@ -1 +1 @@
-{"version":3,"file":"storage.js","sourceRoot":"","sources":["../../../src/types/api/storage.ts"],"names":[],"mappings":"AAqaA,MAAM,CAAN,IAAY,oBAEX;AAFD,WAAY,oBAAoB;IAC5B,0DAAkC,CAAA;AACtC,CAAC,EAFW,oBAAoB,KAApB,oBAAoB,QAE/B"}
+{"version":3,"file":"storage.js","sourceRoot":"","sources":["../../../src/types/api/storage.ts"],"names":[],"mappings":"AAySA,MAAM,CAAN,IAAY,oBAEX;AAFD,WAAY,oBAAoB;IAC5B,0DAAkC,CAAA;AACtC,CAAC,EAFW,oBAAoB,KAApB,oBAAoB,QAE/B"}

package/dist/uiFactory/types.d.ts

@@ -33,6 +33,7 @@ export interface UIFactory<H extends string = CommonIssueCategory, T extends str
     renderEvents?: RenderEvents;
     renderMonitoring?: RenderMonitoring;
     renderNodeTooltipActions?: RenderNodeTooltipActions;
+    renderChatPanel?: RenderChatPanel;
     clusterOrDatabaseAccessError?: Partial<EmptyStateProps>;
     /** Defaults to true. Undefined preserves the current value when configuring the UI. */
     enableMultiTabQueryEditor?: boolean;
@@ -161,6 +162,7 @@ export type RenderMonitoring = (props: {
 export type RenderNodeTooltipActions = (props: {
     data?: PreparedStorageNode;
 }) => React.ReactNode;
+export type RenderChatPanel = () => React.ReactNode;
 export type RenderHealthcheckAssistantAction = (props: HealthcheckAssistantActionProps) => React.ReactNode;
 export interface UiMetricaGoals {
     runQuery?: string;

package/dist/utils/hooks/useWhoami.d.ts

@@ -33,7 +33,7 @@ export declare function useWhoami(): (import("@reduxjs/toolkit/query").TSHelpers
 }) | import("@reduxjs/toolkit/query").TSHelpersOverride<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<{
     database?: string;
     useMeta?: boolean;
-}, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", TUserToken | undefined, "api", any>> & {
+}, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", TUserToken | undefined, "api", any>> & {
     currentData?: TUserToken | undefined;
     isUninitialized: false;
     isLoading: false;
@@ -51,7 +51,7 @@ export declare function useWhoami(): (import("@reduxjs/toolkit/query").TSHelpers
 } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<{
     database?: string;
     useMeta?: boolean;
-}, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", TUserToken | undefined, "api", any>> & {
+}, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", TUserToken | undefined, "api", any>> & {
     currentData?: TUserToken | undefined;
     isUninitialized: false;
     isLoading: false;
@@ -65,7 +65,7 @@ export declare function useWhoami(): (import("@reduxjs/toolkit/query").TSHelpers
 } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<{
     database?: string;
     useMeta?: boolean;
-}, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", TUserToken | undefined, "api", any>> & {
+}, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", TUserToken | undefined, "api", any>> & {
     currentData?: TUserToken | undefined;
     isUninitialized: false;
     isLoading: false;
@@ -77,7 +77,7 @@ export declare function useWhoami(): (import("@reduxjs/toolkit/query").TSHelpers
 } & Required<Pick<import("@reduxjs/toolkit/query").QuerySubState<import("@reduxjs/toolkit/query").QueryDefinition<{
     database?: string;
     useMeta?: boolean;
-}, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", TUserToken | undefined, "api", any>> & {
+}, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", TUserToken | undefined, "api", any>> & {
     currentData?: TUserToken | undefined;
     isUninitialized: false;
     isLoading: false;
@@ -90,7 +90,7 @@ export declare function useWhoami(): (import("@reduxjs/toolkit/query").TSHelpers
     refetch: () => import("@reduxjs/toolkit/query").QueryActionCreatorResult<import("@reduxjs/toolkit/query").QueryDefinition<{
         database?: string;
         useMeta?: boolean;
-    }, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "Events" | "All" | "Conversations" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList", TUserToken | undefined, "api", any>>;
+    }, import("@reduxjs/toolkit/query").BaseQueryFn<void, typeof import("../../store/reducers/api")._NEVER, unknown, {}>, "All" | "Conversations" | "Events" | "PDiskData" | "PreviewData" | "SchemaTree" | "StorageData" | "TableData" | "Partitions" | "Tablet" | "UserData" | "VDiskData" | "VDiskBlobIndexStat" | "AccessRights" | "Backups" | "BackupsSchedule" | "OperationList" | "DatabaseData" | "ClusterData", TUserToken | undefined, "api", any>>;
 };
 export declare function useUserPermissions(): UserPermissions | undefined;
 export declare function useIsUserAllowedToMakeChanges(): boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "21.1.0",
+  "version": "22.0.0",
   "files": [
     "dist",
     "src"

package/src/components/ComponentsProvider/componentsRegistry.ts

@@ -6,14 +6,11 @@ import {StaffCard} from '../User/StaffCard';
 import type {ComponentsRegistryTemplate} from './registry';
 import {Registry} from './registry';
 
-const EmptyPlaceholder = () => null;
-
 const componentsRegistryInner = new Registry()
     .register('StaffCard', StaffCard)
     .register('AsideNavigation', AsideNavigation)
     .register('ErrorBoundary', ErrorBoundaryInner)
-    .register('ShardsTable', ShardsTable)
-    .register('ChatPanel', EmptyPlaceholder);
+    .register('ShardsTable', ShardsTable);
 
 export type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
 

package/src/components/ContentWithPopup/ContentWithPopup.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import type {PopupProps} from '@gravity-ui/uikit';
 import {Popup} from '@gravity-ui/uikit';
 
+import {getPopupScrollContainer} from '../HoverPopup/getPopupScrollContainer';
+
 interface ContentWithPopupProps extends PopupProps {
     content: React.ReactNode;
     className?: string;
@@ -17,11 +19,13 @@ export const ContentWithPopup = ({
     pinOnClick,
     hasArrow = true,
     placement = ['top', 'bottom'],
+    floatingStyles,
     ...props
 }: ContentWithPopupProps) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
     const [isPinned, setIsPinned] = React.useState(false);
     const anchor = React.useRef(null);
+    const container = getPopupScrollContainer(anchor.current);
 
     const showPopup = () => {
         setIsPopupVisible(true);
@@ -42,6 +46,9 @@ export const ContentWithPopup = ({
     return (
         <React.Fragment>
             <Popup
+                container={container}
+                strategy="fixed"
+                floatingStyles={{fontFamily: 'var(--g-text-body-font-family)', ...floatingStyles}}
                 anchorElement={anchor.current}
                 open={isPinned || isPopupVisible}
                 placement={placement}

package/src/components/HoverPopup/HoverPopup.tsx

@@ -6,8 +6,29 @@ import debounce from 'lodash/debounce';
 
 import {YDB_POPOVER_CLASS_NAME} from '../../utils/constants';
 
+import {getPopupScrollContainer} from './getPopupScrollContainer';
+
 const DEBOUNCE_TIMEOUT = 100;
 
+function useVisibleAnchor(anchorElement: HTMLElement | null, open: boolean) {
+    const [visibleAnchor, setVisibleAnchor] = React.useState<HTMLElement | null>(null);
+
+    React.useLayoutEffect(() => {
+        setVisibleAnchor(null);
+        if (!open || !anchorElement) {
+            return undefined;
+        }
+
+        const observer = new IntersectionObserver(([entry]) => {
+            setVisibleAnchor(entry.isIntersecting ? anchorElement : null);
+        });
+        observer.observe(anchorElement);
+        return () => observer.disconnect();
+    }, [anchorElement, open]);
+
+    return anchorElement !== null && visibleAnchor === anchorElement;
+}
+
 type HoverPopupProps = {
     children: React.ReactNode;
     renderPopupContent: (controls: {onClose: VoidFunction}) => React.ReactNode;
@@ -28,7 +49,7 @@ export const HoverPopup = ({
     anchorRef,
     onShowPopup,
     onHidePopup,
-    placement = ['top', 'bottom'],
+    placement = ['top', 'bottom', 'left', 'right'],
     contentClassName,
     delayClose = DEBOUNCE_TIMEOUT,
     delayOpen = DEBOUNCE_TIMEOUT,
@@ -124,9 +145,12 @@ export const HoverPopup = ({
     }, [closePopup]);
 
     const internalOpen = isPopupVisible || isPopupContentHovered || isFocused;
-    const open = internalOpen || showPopup;
+    const open = Boolean(internalOpen || showPopup);
 
     const anchorElement = anchorRef?.current || anchor.current;
+    // Clipping a paired disk must not clear the shared hover state via onHidePopup.
+    const isAnchorVisible = useVisibleAnchor(anchorElement, open);
+    const container = getPopupScrollContainer(anchorElement);
 
     return (
         <React.Fragment>
@@ -135,6 +159,9 @@ export const HoverPopup = ({
             </span>
             {anchorElement ? (
                 <Popup
+                    container={container}
+                    // Keep portal typography when the page uses a different font.
+                    floatingStyles={{fontFamily: 'var(--g-text-body-font-family)'}}
                     anchorElement={anchorElement}
                     onOpenChange={(_open, _event, reason) => {
                         if (reason === 'escape-key') {
@@ -142,9 +169,11 @@ export const HoverPopup = ({
                         }
                     }}
                     placement={placement}
+                    // Exiting popups must not expand the page when their anchors scroll offscreen.
+                    strategy="fixed"
                     returnFocus={false}
                     hasArrow
-                    open={open}
+                    open={open && isAnchorVisible}
                     // bigger offset for easier switching to neighbour nodes
                     // matches the default offset for popup with arrow out of a sense of beauty
                     offset={offset || {mainAxis: 12, crossAxis: 0}}

package/src/components/HoverPopup/getPopupScrollContainer.ts

@@ -0,0 +1,20 @@
+export function getPopupScrollContainer(anchor: HTMLElement | null) {
+    if (!anchor) {
+        return undefined;
+    }
+    const doc = anchor.ownerDocument;
+    let parent = anchor.parentElement;
+    while (parent) {
+        if (
+            parent === doc.fullscreenElement ||
+            parent.classList.contains('ydb-fullscreen_fullscreen') ||
+            (/auto|scroll/.test(doc.defaultView?.getComputedStyle(parent).overflowY ?? '') &&
+                parent.scrollHeight > parent.clientHeight)
+        ) {
+            // Document scrolling already works through the default portal.
+            return parent === doc.scrollingElement ? undefined : parent;
+        }
+        parent = parent.parentElement;
+    }
+    return undefined;
+}

package/src/components/SegmentedProgress/SegmentedProgress.scss

@@ -35,6 +35,11 @@
 
         border-radius: var(--g-border-radius-xs);
         background-color: var(--ydb-segmented-progress-empty-color);
+
+        &:focus-visible {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: -2px;
+        }
     }
 
     &__section:not(&__section_used) {

package/src/components/SegmentedProgress/SegmentedProgress.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Flex, Text} from '@gravity-ui/uikit';
+import {Flex, Text, Tooltip} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 
@@ -28,6 +28,7 @@ interface SegmentedProgressByValueProps extends SegmentedProgressBaseProps {
     total: number;
     fillPercent?: never;
     displayNoLimit?: DisplayNoLimit;
+    segments?: never;
 }
 
 interface SegmentedProgressByFillPercentProps extends SegmentedProgressBaseProps {
@@ -35,11 +36,33 @@ interface SegmentedProgressByFillPercentProps extends SegmentedProgressBaseProps
     value?: never;
     total?: never;
     displayNoLimit?: never;
+    segments?: never;
+}
+
+export interface SegmentedProgressSegment {
+    id: string;
+    value: number;
+    /** Minimum width in pixels. A positive value keeps zero-value segments visible. */
+    minWidth?: number;
+    color?: string;
+    className?: string;
+    dataQa?: string;
+    tooltip?: string;
+    ariaLabelledBy?: string;
+}
+
+interface SegmentedProgressBySegmentsProps extends SegmentedProgressBaseProps {
+    segments: SegmentedProgressSegment[];
+    total: number;
+    value?: never;
+    fillPercent?: never;
+    displayNoLimit?: never;
 }
 
 export type SegmentedProgressProps =
     | SegmentedProgressByValueProps
-    | SegmentedProgressByFillPercentProps;
+    | SegmentedProgressByFillPercentProps
+    | SegmentedProgressBySegmentsProps;
 
 function clampPercent(percent: number) {
     if (!Number.isFinite(percent) || percent <= 0) {
@@ -51,7 +74,7 @@ function clampPercent(percent: number) {
     return percent;
 }
 
-function defaultNormalizePercent(percent: number) {
+export function defaultNormalizePercent(percent: number) {
     if (percent < 1) {
         return Math.round(percent * 10) / 10;
     }
@@ -64,11 +87,25 @@ function isFillPercentMode(
     return typeof props.fillPercent === 'number';
 }
 
+function isSegmentsMode(props: SegmentedProgressProps): props is SegmentedProgressBySegmentsProps {
+    return Array.isArray(props.segments);
+}
+
 function getPercentUsed(props: SegmentedProgressProps) {
     if (isFillPercentMode(props)) {
         return props.fillPercent;
     }
 
+    if (isSegmentsMode(props)) {
+        if (props.total > 0) {
+            const value = props.segments.reduce((sum, segment) => sum + segment.value, 0);
+
+            return (value / props.total) * 100;
+        }
+
+        return 0;
+    }
+
     if (props.total > 0) {
         return (props.value / props.total) * 100;
     }
@@ -110,9 +147,57 @@ export function SegmentedProgress(props: SegmentedProgressProps) {
         [normalizePercent, percentUsed],
     );
     const fillWidth = getFillWidth(props, normalizedUsed);
-
-    return (
-        <Flex direction="column" gap={1}>
+    const segmentSections = isSegmentsMode(props)
+        ? props.segments.map((segment) => ({
+              ...segment,
+              width: props.total > 0 ? clampPercent((segment.value / props.total) * 100) : 0,
+          }))
+        : undefined;
+    const hasEmptySection = (segmentSections ? percentUsed : fillWidth) < 100;
+
+    const renderSections = () => {
+        if (segmentSections) {
+            return segmentSections
+                .filter((segment) => segment.width > 0 || (segment.minWidth ?? 0) > 0)
+                .map((segment) => {
+                    const section = (
+                        <div
+                            key={segment.id}
+                            aria-label={segment.tooltip}
+                            aria-labelledby={segment.ariaLabelledBy}
+                            className={b('section', {used: true}, segment.className)}
+                            data-qa={segment.dataQa}
+                            role={segment.tooltip ? 'img' : undefined}
+                            style={{
+                                width: `${segment.width}%`,
+                                minWidth: segment.minWidth,
+                                backgroundColor: segment.color,
+                            }}
+                            tabIndex={segment.tooltip ? 0 : undefined}
+                        />
+                    );
+
+                    if (!segment.tooltip) {
+                        return section;
+                    }
+
+                    return (
+                        <Tooltip key={segment.id} content={segment.tooltip}>
+                            {section}
+                        </Tooltip>
+                    );
+                });
+        }
+
+        if (fillWidth > 0) {
+            return <div className={b('section', {used: true})} style={{width: `${fillWidth}%`}} />;
+        }
+
+        return null;
+    };
+
+    const renderProgress = () => {
+        return (
             <div
                 className={b({theme}, className)}
                 data-qa={dataQa}
@@ -122,11 +207,15 @@ export function SegmentedProgress(props: SegmentedProgressProps) {
                 aria-valuemax={100}
                 aria-valuenow={normalizedUsed}
             >
-                {fillWidth > 0 && (
-                    <div className={b('section', {used: true})} style={{width: `${fillWidth}%`}} />
-                )}
-                {100 - fillWidth > 0 && <div className={b('section')} style={{flexGrow: 1}} />}
+                {renderSections()}
+                {hasEmptySection && <div className={b('section')} style={{flexGrow: 1}} />}
             </div>
+        );
+    };
+
+    return (
+        <Flex direction="column" gap={1}>
+            {renderProgress()}
             {!hideLabels && (
                 <Flex width="100%">
                     {labelStart && <Text color="secondary">{labelStart}</Text>}