ydb-embedded-ui 22.2.0 → 22.3.0

package/src/components/Graph/GravityGraph.tsx

@@ -21,7 +21,7 @@ import {NonSelectableConnection} from './NonSelectableConnection';
 import {graphColorsConfig} from './colorsConfig';
 import {runTreeLayout} from './runTreeLayout';
 import type {Data} from './types';
-import {parseCustomPropertyValue} from './utils';
+import {getLayoutSignature, parseCustomPropertyValue} from './utils';
 
 import './GravityGraph.scss';
 
@@ -81,6 +81,7 @@ export function GravityGraph<T>({data, onError, theme}: Props<T>) {
     const {graph, start} = useGraph(config);
     const cameraSizeRef = React.useRef({width: 0, height: 0});
     const graphBlockIdsRef = React.useRef<TBlockId[]>([]);
+    const layoutSignatureRef = React.useRef<string>();
     const fitFrameRef = React.useRef<number>();
     const fitGraphToViewport = React.useCallback(() => {
         const {width, height} = graph.cameraService.getCameraState();
@@ -125,11 +126,17 @@ export function GravityGraph<T>({data, onError, theme}: Props<T>) {
             createWorker: createGraphLayoutWorker,
             onResult: ({layout, edges}) => {
                 graphBlockIdsRef.current = layout.map(({id}) => id);
+                // Statistics-only updates keep the layout, so the camera stays where the user put it.
+                const signature = getLayoutSignature(layout, edges);
+                const sameLayout = layoutSignatureRef.current === signature;
+                layoutSignatureRef.current = signature;
                 graph.setEntities({
                     blocks: layout,
                     connections: edges,
                 });
-                scheduleGraphFit();
+                if (!sameLayout) {
+                    scheduleGraphFit();
+                }
             },
             onError,
         });

package/src/components/Graph/utils.ts

@@ -3,7 +3,7 @@ import type {TBlock} from '@gravity-ui/graph';
 import type {ExplainPlanNodeData} from '../../store/reducers/query/types';
 
 import type {AbstractGraphColorsConfig} from './colorsConfig';
-import type {Data, TreeConnection} from './types';
+import type {Data, EdgeResult, TreeConnection} from './types';
 
 const BLOCK_TOP_PADDING = 8;
 const BLOCK_LINE_HEIGHT = 16;
@@ -110,3 +110,11 @@ export function parseCustomPropertyValue<T extends AbstractGraphColorsConfig>(
 
     return parsed as T;
 }
+
+// Identifies the geometry the camera is aimed at: block placement and the edges between them.
+export function getLayoutSignature(blocks: TBlock[], edges: EdgeResult[]) {
+    return JSON.stringify([
+        blocks.map(({id, x, y, width, height}) => [id, x, y, width, height]),
+        edges.map(({sourceBlockId, targetBlockId}) => [sourceBlockId, targetBlockId]),
+    ]);
+}

package/src/components/PaginatedTable/rowLookup.ts

@@ -33,15 +33,11 @@ function hasChunkAdvanced(
         return false;
     }
 
-    if (!previous.has(offset)) {
-        return true;
-    }
-
     const previousFulfilledTimeStamp = previous.get(offset);
     return (
-        previousFulfilledTimeStamp === null ||
-        (previousFulfilledTimeStamp !== undefined &&
-            fulfilledTimeStamp > previousFulfilledTimeStamp)
+        previousFulfilledTimeStamp !== null &&
+        previousFulfilledTimeStamp !== undefined &&
+        fulfilledTimeStamp > previousFulfilledTimeStamp
     );
 }
 
@@ -49,15 +45,44 @@ export function getChunkLookupRevision(states: ChunkLookupState[], revision?: st
     if (!revision) {
         return serializeChunkLookupRevision(states);
     }
+    if (states.length === 0) {
+        return revision;
+    }
 
     const previous = parseChunkLookupRevision(revision);
-    return states.length > 0 && states.every((state) => hasChunkAdvanced(state, previous))
-        ? serializeChunkLookupRevision(states)
+    if (states.every((state) => hasChunkAdvanced(state, previous))) {
+        return serializeChunkLookupRevision(states);
+    }
+
+    let changed = false;
+    const activeOffsets = new Set(states.map(({offset}) => offset));
+    for (const offset of previous.keys()) {
+        if (!activeOffsets.has(offset)) {
+            previous.delete(offset);
+            changed = true;
+        }
+    }
+    for (const {offset, status, fulfilledTimeStamp} of states) {
+        const previousFulfilledTimeStamp = previous.get(offset);
+        if (
+            (previousFulfilledTimeStamp === null || previousFulfilledTimeStamp === undefined) &&
+            status === QueryStatus.fulfilled &&
+            fulfilledTimeStamp !== undefined
+        ) {
+            // Initial loading establishes a baseline, not a completed polling cycle.
+            previous.set(offset, fulfilledTimeStamp);
+            changed = true;
+        }
+    }
+    return changed
+        ? JSON.stringify(
+              Array.from(previous).sort(([leftOffset], [rightOffset]) => leftOffset - rightOffset),
+          )
         : revision;
 }
 
 export function isChunkLookupPending(states: ChunkLookupState[], revision?: string) {
     const previous = parseChunkLookupRevision(revision);
 
-    return states.some((state) => !hasChunkAdvanced(state, previous));
+    return states.length === 0 || states.some((state) => !hasChunkAdvanced(state, previous));
 }

package/src/components/TableKeyboardNavigation/TableKeyboardNavigation.tsx

@@ -338,7 +338,11 @@ export function useTableKeyboardAdapter(options: AdapterOptions) {
                     ? findRowIndex(current.key, current.index)
                     : current.index;
             if (matchedIndex === undefined && isRowLookupPending?.(current.lookupRevision)) {
-                next = {...current, pending: true};
+                next = {
+                    ...current,
+                    lookupRevision: getRowLookupRevision?.(current.lookupRevision),
+                    pending: true,
+                };
             } else {
                 const position = matchedIndex ?? current.index;
                 const index = isValidIndex?.(position) === false ? getLast() : position;

package/src/containers/Authentication/Authentication.tsx

@@ -4,7 +4,7 @@ import {Eye, EyeSlash, Xmark} from '@gravity-ui/icons';
 import {ActionTooltip, Button, Link as ExternalLink, Icon, TextInput} from '@gravity-ui/uikit';
 import {useHistory, useLocation, useRouteMatch} from 'react-router-dom';
 
-import routes, {getHomePagePath, parseQuery} from '../../routes';
+import routes, {getClusterPath, getHomePagePath, parseQuery} from '../../routes';
 import {basename} from '../../store';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
 import {useLoginWithDatabase, useOidcAvailable} from '../../store/reducers/capabilities/hooks';
@@ -12,11 +12,12 @@ import {cn} from '../../utils/cn';
 import {BRAND_BUTTON_CLASS} from '../../utils/constants';
 import {prepareCommonErrorMessage} from '../../utils/errors';
 import {useMetaAuth} from '../../utils/hooks/useMetaAuth';
+import {useTypedSelector} from '../../utils/hooks/useTypedSelector';
 
 import i18n from './i18n';
 import {
     createSsoAuthorizeUrl,
-    getSsoReturnTo,
+    getAuthReturnTo,
     isDatabaseError,
     isPasswordError,
     isUserError,
@@ -36,6 +37,7 @@ function Authentication({closable = false}: AuthenticationProps) {
     const history = useHistory();
     const location = useLocation();
     const isDirectAuthPage = Boolean(useRouteMatch({path: routes.auth, exact: true}));
+    const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
 
     const needDatabase = useLoginWithDatabase();
     const oidcAvailable = useOidcAvailable();
@@ -45,49 +47,40 @@ function Authentication({closable = false}: AuthenticationProps) {
     const {returnUrl, database: databaseFromQuery} = parseQuery(location);
     const currentHref = window.location.href;
 
-    const path = React.useMemo(() => {
-        let path: string | undefined;
+    const returnTo = React.useMemo(() => {
+        const fallbackPath = singleClusterMode
+            ? getClusterPath(undefined, undefined, {withBasename: true})
+            : getHomePagePath(undefined, undefined, {withBasename: true});
 
-        if (returnUrl) {
-            const decodedUrl = decodeURIComponent(returnUrl.toString());
-
-            // to prevent page reload we use router history
-            // history navigates relative to origin
-            // so we remove origin to make it work properly
-            const url = new URL(decodedUrl);
-            let pathname = url.pathname;
-
-            // Remove basename from pathname since history.replace expects paths relative to basename
-            if (basename && pathname.startsWith(basename)) {
-                pathname = pathname.slice(basename.length);
-            }
-
-            // Ensure pathname starts with /
-            if (pathname && !pathname.startsWith('/')) {
-                pathname = '/' + pathname;
-            }
-
-            path = pathname + url.search;
-        }
-        return path;
-    }, [returnUrl]);
+        return getAuthReturnTo({
+            currentUrl: new URL(currentHref),
+            fallbackPath,
+            isDirectAuthPage,
+            returnUrl,
+        });
+    }, [currentHref, isDirectAuthPage, returnUrl, singleClusterMode]);
 
-    const useMeta = useMetaAuth(path);
+    const pathname = new URL(returnTo, currentHref).pathname;
+    // Route matching for meta authentication expects a pathname without the router basename.
+    const authPath =
+        basename && pathname.startsWith(`${basename}/`)
+            ? pathname.slice(basename.length)
+            : pathname;
+    const useMeta = useMetaAuth(authPath);
 
     const ssoUrl = React.useMemo(() => {
         if (!oidcAvailable) {
             return undefined;
         }
 
-        const homePath = getHomePagePath(undefined, undefined, {withBasename: true});
         const currentUrl = new URL(currentHref);
-        const returnTo = getSsoReturnTo({
+        const ssoReturnTo = getAuthReturnTo({
             currentUrl,
-            fallbackPath: homePath,
+            fallbackPath: getHomePagePath(undefined, undefined, {withBasename: true}),
             isDirectAuthPage,
             returnUrl,
         });
-        return createSsoAuthorizeUrl(currentUrl.host, returnTo);
+        return createSsoAuthorizeUrl(currentUrl.host, ssoReturnTo);
     }, [currentHref, isDirectAuthPage, oidcAvailable, returnUrl]);
 
     const [login, setLogin] = React.useState('');
@@ -121,8 +114,10 @@ function Authentication({closable = false}: AuthenticationProps) {
         authenticate({user: login, password, database, useMeta})
             .unwrap()
             .then(() => {
-                if (path) {
-                    history.replace(path);
+                if (isDirectAuthPage) {
+                    window.location.replace(returnTo);
+                } else {
+                    window.location.reload();
                 }
             })
             .catch((error) => {

package/src/containers/Authentication/utils.ts

@@ -11,7 +11,7 @@ export function createSsoAuthorizeUrl(host: string, returnTo: string) {
     return url.href;
 }
 
-interface GetSsoReturnToParams {
+interface GetAuthReturnToParams {
     currentUrl: URL;
     fallbackPath: string;
     isDirectAuthPage: boolean;
@@ -28,12 +28,12 @@ function isSafeLocalReturnTo(path: string) {
     );
 }
 
-export function getSsoReturnTo({
+export function getAuthReturnTo({
     currentUrl,
     fallbackPath,
     isDirectAuthPage,
     returnUrl,
-}: GetSsoReturnToParams) {
+}: GetAuthReturnToParams) {
     if (!isDirectAuthPage) {
         const path = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`;
         return isSafeLocalReturnTo(path) ? path : fallbackPath;

package/src/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -115,6 +115,11 @@ const graph = {
     title: i18n('title_graph'),
 };
 
+const computationGraph = {
+    id: TENANT_DIAGNOSTICS_TABS_IDS.computationGraph,
+    title: i18n('title_computation-graph'),
+};
+
 const consumers = {
     id: TENANT_DIAGNOSTICS_TABS_IDS.consumers,
     title: i18n('title_consumers'),
@@ -241,7 +246,7 @@ const EXTERNAL_TABLE_PAGES = [overview, schema, describe, access];
 
 const VIEW_PAGES = [overview, schema, describe, access];
 
-const STREAMING_QUERY_PAGES = [overview, describe, access];
+const STREAMING_QUERY_PAGES = [overview, computationGraph, describe, access];
 const SECRET_PAGES = [overview, describe, access];
 
 // verbose mapping to guarantee correct tabs for new path types

package/src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -6,6 +6,7 @@ import {Loader} from '../../../../components/Loader';
 import {useClusterWithProxy} from '../../../../store/reducers/cluster/cluster';
 import {overviewApi} from '../../../../store/reducers/overview/overview';
 import {EPathType} from '../../../../types/api/schema';
+import {cn} from '../../../../utils/cn';
 import {useAutoRefreshInterval} from '../../../../utils/hooks';
 import {ViewInfo} from '../../Info/View/View';
 import {isDomain} from '../../ObjectSummary/transformPath';
@@ -16,6 +17,7 @@ import {ChangefeedInfo} from './ChangefeedInfo';
 import {DatabaseInfo} from './DatabaseInfo/DatabaseInfo';
 import {DefaultEntityInfo} from './DefaultEntityInfo';
 import {ResourcePoolInfo} from './ResourcePoolInfo';
+import {ResourcePoolUsage} from './ResourcePoolInfo/ResourcePoolUsage';
 import {SchemaObjectInfoContainer} from './SchemaObjectInfo/SchemaObjectInfoContainer';
 import {StreamingQueryInfo} from './StreamingQueryInfo';
 import {TableInfo} from './TableInfo';
@@ -29,6 +31,8 @@ interface OverviewProps {
     databaseFullPath: string;
 }
 
+const b = cn('ydb-diagnostics-resource-pool-info');
+
 function Overview({type, path, database, databaseFullPath}: OverviewProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const useMetaProxy = useClusterWithProxy();
@@ -56,7 +60,19 @@ function Overview({type, path, database, databaseFullPath}: OverviewProps) {
         const pathTypeToComponent: Record<EPathType, (() => React.ReactNode) | undefined> = {
             [EPathType.EPathTypeInvalid]: undefined,
             [EPathType.EPathTypeDir]: undefined,
-            [EPathType.EPathTypeResourcePool]: () => <ResourcePoolInfo data={data} />,
+            [EPathType.EPathTypeResourcePool]: () => (
+                <div className={b('row')}>
+                    <div className={b('col')}>
+                        <ResourcePoolInfo data={data} />
+                    </div>
+                    <div className={b('col')}>
+                        <ResourcePoolUsage
+                            database={database}
+                            poolName={data?.PathDescription?.ResourcePoolDescription?.Name || ''}
+                        />
+                    </div>
+                </div>
+            ),
             [EPathType.EPathTypeSecret]: undefined,
             [EPathType.EPathTypeTable]: renderTableInfo,
             [EPathType.EPathTypeSysView]: undefined,

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/ResourcePoolInfo.scss

@@ -0,0 +1,24 @@
+.ydb-diagnostics-resource-pool-info {
+    $column-width: 310px;
+
+    &__row {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        align-items: flex-start;
+        gap: var(--g-spacing-9);
+    }
+
+    &__col {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: stretch;
+
+        width: $column-width;
+    }
+
+    &__loader {
+        margin-top: 50px;
+    }
+}

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/ResourcePoolUsage.tsx

@@ -0,0 +1,53 @@
+import {Loader} from '../../../../../components/Loader';
+import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {topQueriesApi} from '../../../../../store/reducers/executeTopQueries/executeTopQueries';
+import {cn} from '../../../../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../../utils/constants';
+import {useAutoRefreshInterval} from '../../../../../utils/hooks';
+
+import i18n from './i18n';
+
+import './ResourcePoolInfo.scss';
+
+const b = cn('ydb-diagnostics-resource-pool-info');
+
+interface ResourcePoolUsageProps {
+    database: string;
+    poolName: string;
+}
+
+/** Displays running/queued query counts for a resource pool */
+export function ResourcePoolUsage({database, poolName}: ResourcePoolUsageProps) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {currentData, isFetching, error} = topQueriesApi.useGetRunningQueriesByPoolQuery(
+        {database, poolName},
+        {skip: !poolName, pollingInterval: autoRefreshInterval, refetchOnMountOrArgChange: true},
+    );
+
+    const loading = isFetching && currentData === undefined;
+
+    if (loading) {
+        return <Loader size="s" className={b('loader')} />;
+    }
+
+    if (error || !poolName) {
+        return null;
+    }
+
+    return (
+        <YDBDefinitionList
+            items={[
+                {
+                    name: i18n('field_running-queries'),
+                    content: currentData?.runningQueriesCount ?? EMPTY_DATA_PLACEHOLDER,
+                },
+                {
+                    name: i18n('field_queued-queries'),
+                    content: currentData?.queuedQueriesCount ?? EMPTY_DATA_PLACEHOLDER,
+                },
+            ]}
+            title={i18n('title_usage')}
+            responsive
+        />
+    );
+}

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/i18n/en.json

@@ -1,9 +1,12 @@
 {
   "title_pool-settings": "Pool Settings",
+  "title_usage": "Usage",
   "group_queue": "Queue & Concurrency",
   "group_cpu": "CPU",
   "field_concurrent-query-limit": "Concurrent query limit",
   "field_queue-size": "Queue size",
   "field_database-load-cpu-threshold": "Database load CPU threshold",
-  "field_total-cpu-limit-percent-per-node": "Total CPU limit % per node"
+  "field_total-cpu-limit-percent-per-node": "Total CPU limit % per node",
+  "field_running-queries": "Running queries",
+  "field_queued-queries": "Queued queries"
 }

package/src/containers/Tenant/Diagnostics/Overview/ResourcePoolInfo/index.ts

@@ -1 +1,2 @@
 export * from './ResourcePoolInfo';
+export * from './ResourcePoolUsage';

package/src/containers/Tenant/Diagnostics/Overview/SchemaObjectInfo/SchemaObjectInfo.tsx

@@ -42,6 +42,12 @@ export function SchemaObjectInfo({
     );
 
     return (
-        <YDBDefinitionList items={items} responsive className={b('list')} wrapperClassName={b()} />
+        <YDBDefinitionList
+            items={items}
+            responsive
+            className={b('list')}
+            wrapperClassName={b()}
+            dataQa="schema-object-info"
+        />
     );
 }

package/src/containers/Tenant/Diagnostics/Overview/StreamingQueryInfo/StreamingQueryInfo.tsx

@@ -7,7 +7,6 @@ import type {YDBDefinitionListItem} from '../../../../../components/YDBDefinitio
 import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
 import {YQLCodePreview} from '../../../../../components/YQLCodePreview/YQLCodePreview';
 import {streamingQueriesApi} from '../../../../../store/reducers/streamingQuery/streamingQuery';
-import type {ErrorResponse} from '../../../../../types/api/query';
 import type {IQueryResult} from '../../../../../types/store/query';
 import {cn} from '../../../../../utils/cn';
 import {
@@ -15,7 +14,7 @@ import {
     stripIndentByFirstLine,
     trimOuterEmptyLines,
 } from '../../../../../utils/dataFormatters/dataFormatters';
-import {isErrorResponse} from '../../../../../utils/query';
+import {parseIssuesData} from '../../../../../utils/query';
 import {ResultIssuesModal} from '../../../Query/Issues/Issues';
 
 import i18n from './i18n';
@@ -89,7 +88,7 @@ function prepareStreamingQueryItems(sysData?: IQueryResult) {
     const errorRaw = sysData.resultSets?.[0]?.result?.[0]?.Error;
 
     // We use custom error check, because error type can be non-standard
-    const errorData = parseErrorData(errorRaw);
+    const errorData = parseIssuesData(errorRaw);
 
     info.push({
         name: i18n('field_query-state'),
@@ -105,20 +104,3 @@ function prepareStreamingQueryItems(sysData?: IQueryResult) {
 
     return {items: info, queryText: normalizedQueryText};
 }
-
-function parseErrorData(raw: unknown): ErrorResponse | string | undefined {
-    if (typeof raw === 'string') {
-        try {
-            const parsed = JSON.parse(raw);
-            return isErrorResponse(parsed) ? parsed : undefined;
-        } catch {
-            return raw;
-        }
-    }
-
-    if (isErrorResponse(raw)) {
-        return raw;
-    }
-
-    return undefined;
-}

package/src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json

@@ -26,6 +26,10 @@
   "field_compression-groups": "Compression & families",
 
   "value_ttl-config": "column: '{{columnName}}', expire after: {{expireTime}}",
+  "value_ttl-tiered-config": "column: '{{columnName}}'\n{{tiers}}",
+  "value_ttl-evict": "evict to: '{{storageName}}', after: {{expireTime}}",
+  "value_ttl-delete": "delete after: {{expireTime}}",
+  "value_ttl-unknown-action": "unknown action, after: {{expireTime}}",
   "value_partitioning-by-size-enabled": "Enabled, split size: {{size}}",
   "value_enabled": "Enabled",
   "value_disabled": "Disabled",

package/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo/prepareColumnTableInfo.tsx

@@ -42,7 +42,17 @@ export function prepareColumnTableGeneralInfo(columnTable: TColumnTableDescripti
     if (columnTable.TtlSettings) {
         const ttlInfo = prepareTTL(columnTable?.TtlSettings);
         if (ttlInfo) {
-            left.push(ttlInfo);
+            left.push({
+                ...ttlInfo,
+                content: (
+                    <span
+                        style={{whiteSpace: 'break-spaces', wordBreak: 'break-word'}}
+                        data-qa="table-ttl"
+                    >
+                        {ttlInfo.content}
+                    </span>
+                ),
+            });
         }
     }
 

package/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo/prepareRowTableInfo.tsx

@@ -66,7 +66,17 @@ export function prepareRowTableGeneralInfo(
     if (TTLSettings) {
         const ttlInfo = prepareTTL(TTLSettings);
         if (ttlInfo) {
-            left.push(ttlInfo);
+            left.push({
+                ...ttlInfo,
+                content: (
+                    <span
+                        style={{whiteSpace: 'break-spaces', wordBreak: 'break-word'}}
+                        data-qa="table-ttl"
+                    >
+                        {ttlInfo.content}
+                    </span>
+                ),
+            });
         }
     }
 

package/src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo/prepareTTL.ts

@@ -1,4 +1,5 @@
 import type {TColumnDataLifeCycle, TTTLSettings} from '../../../../../../types/api/schema';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../../../utils/constants';
 import {formatDurationToShortTimeFormat} from '../../../../../../utils/timeParsers';
 import i18n from '../i18n';
 
@@ -8,11 +9,52 @@ import i18n from '../i18n';
  * @returns Definition list item with TTL info, or undefined if TTL is not configured
  */
 export function prepareTTL(ttl: TTTLSettings | TColumnDataLifeCycle) {
+    const enabled = ttl.Enabled;
+    if (!enabled?.ColumnName) {
+        return undefined;
+    }
+
+    if (enabled.Tiers?.length) {
+        const tiers = enabled.Tiers.flatMap((tier) => {
+            const seconds = tier.ApplyAfterSeconds;
+            if (seconds === undefined || !Number.isFinite(seconds) || seconds < 0) {
+                return [];
+            }
+
+            const expireTime = formatDurationToShortTimeFormat(seconds * 1000, 1);
+            if (tier.EvictToExternalStorage) {
+                return [
+                    i18n('value_ttl-evict', {
+                        storageName: tier.EvictToExternalStorage.Storage || EMPTY_DATA_PLACEHOLDER,
+                        expireTime,
+                    }),
+                ];
+            }
+            if (tier.Delete) {
+                return [i18n('value_ttl-delete', {expireTime})];
+            }
+            return [i18n('value_ttl-unknown-action', {expireTime})];
+        });
+
+        // Nonempty tiers supersede the legacy expiry, even if all delays are invalid.
+        if (!tiers.length) {
+            return undefined;
+        }
+
+        return {
+            name: i18n('field_ttl-for-rows'),
+            content: i18n('value_ttl-tiered-config', {
+                columnName: enabled.ColumnName,
+                tiers: tiers.join('\n'),
+            }),
+        };
+    }
+
     // ExpireAfterSeconds could be 0
-    if (ttl.Enabled && ttl.Enabled.ColumnName && ttl.Enabled.ExpireAfterSeconds !== undefined) {
+    if (enabled.ExpireAfterSeconds !== undefined) {
         const value = i18n('value_ttl-config', {
-            columnName: ttl.Enabled.ColumnName,
-            expireTime: formatDurationToShortTimeFormat(ttl.Enabled.ExpireAfterSeconds * 1000, 1),
+            columnName: enabled.ColumnName,
+            expireTime: formatDurationToShortTimeFormat(enabled.ExpireAfterSeconds * 1000, 1),
         });
 
         return {name: i18n('field_ttl-for-rows'), content: value};

package/src/containers/Tenant/Diagnostics/StreamingQueryGraph/StreamingQueryGraph.scss

@@ -0,0 +1,18 @@
+@use '../../../../styles/mixins.scss';
+
+.ydb-streaming-query-graph {
+    overflow: auto;
+    flex-grow: 1;
+
+    height: 100%;
+
+    @include mixins.flex-container();
+
+    > * {
+        flex-shrink: 0;
+    }
+
+    &__loader {
+        margin: auto;
+    }
+}