ydb-embedded-ui 22.2.0 → 22.4.0

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,
@@ -94,7 +110,7 @@ function Overview({type, path, database, databaseFullPath}: OverviewProps) {
                 />
             ),
             [EPathType.EPathTypeStreamingQuery]: () => (
-                <StreamingQueryInfo path={path} database={database} />
+                <StreamingQueryInfo path={path} database={database} data={data} />
             ),
         };
 
@@ -113,6 +129,10 @@ function Overview({type, path, database, databaseFullPath}: OverviewProps) {
 
         const content = pathTypeToComponent[type]?.();
 
+        if (isStreamingQuery) {
+            return content;
+        }
+
         const commonInfo = (
             <SchemaObjectInfoContainer data={currentData ?? undefined} type={type} path={path} />
         );

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

@@ -18,6 +18,7 @@ export interface SchemaObjectInfoProps {
     path: string;
     itemsAfterType?: YDBDefinitionListItem[];
     additionalItems?: YDBDefinitionListItem[];
+    createdContent?: YDBDefinitionListItem['content'];
 }
 
 export function SchemaObjectInfo({
@@ -26,6 +27,7 @@ export function SchemaObjectInfo({
     path,
     itemsAfterType,
     additionalItems,
+    createdContent,
 }: SchemaObjectInfoProps) {
     const showAdministrativeFields = useUserPermissions()?.IsAdministrationAllowed === true;
     const items = React.useMemo(
@@ -37,11 +39,26 @@ export function SchemaObjectInfo({
                 itemsAfterType,
                 additionalItems,
                 showAdministrativeFields,
+                createdContent,
             }),
-        [additionalItems, data, fallbackType, itemsAfterType, path, showAdministrativeFields],
+        [
+            additionalItems,
+            createdContent,
+            data,
+            fallbackType,
+            itemsAfterType,
+            path,
+            showAdministrativeFields,
+        ],
     );
 
     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/SchemaObjectInfo/prepareSchemaObjectInfo.tsx

@@ -40,6 +40,7 @@ interface PrepareSchemaObjectInfoItemsParams {
     itemsAfterType?: YDBDefinitionListItem[];
     additionalItems?: YDBDefinitionListItem[];
     showAdministrativeFields?: boolean;
+    createdContent?: YDBDefinitionListItem['content'];
 }
 
 function isPresent(value: string | number | undefined): value is string | number {
@@ -83,6 +84,7 @@ export function prepareSchemaObjectInfoItems({
     itemsAfterType = [],
     additionalItems = [],
     showAdministrativeFields = false,
+    createdContent,
 }: PrepareSchemaObjectInfoItemsParams): YDBDefinitionListItem[] {
     const self = data?.PathDescription?.Self;
     let pathId = self?.PathId;
@@ -116,21 +118,20 @@ export function prepareSchemaObjectInfoItems({
         );
     }
 
-    if (Number(createStep)) {
+    items.push({
+        name: schemaObjectInfoKeyset('field_full-path'),
+        content: isPresent(fullPath) ? fullPath : EMPTY_DATA_PLACEHOLDER,
+        copyText: isPresent(fullPath) ? fullPath : undefined,
+    });
+
+    if (createdContent || Number(createStep)) {
         items.push({
             name: tenantKeyset('field_created'),
-            content: formatDateTime(createStep),
+            content: createdContent || formatDateTime(createStep),
         });
     }
 
-    items.push(
-        {
-            name: schemaObjectInfoKeyset('field_full-path'),
-            content: isPresent(fullPath) ? fullPath : EMPTY_DATA_PLACEHOLDER,
-            copyText: isPresent(fullPath) ? fullPath : undefined,
-        },
-        ...additionalItems,
-    );
+    items.push(...additionalItems);
 
     return items.filter(({content}) => content !== undefined && content !== null && content !== '');
 }

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {dateTimeParse} from '@gravity-ui/date-utils';
 import {Label} from '@gravity-ui/uikit';
 
 import {Loader} from '../../../../../components/Loader';
@@ -7,16 +8,19 @@ 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 {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import {EPathType} from '../../../../../types/api/schema';
 import type {IQueryResult} from '../../../../../types/store/query';
 import {cn} from '../../../../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../../../../utils/constants';
 import {
     getStringifiedData,
     stripIndentByFirstLine,
     trimOuterEmptyLines,
 } from '../../../../../utils/dataFormatters/dataFormatters';
-import {isErrorResponse} from '../../../../../utils/query';
+import {parseIssuesData} from '../../../../../utils/query';
 import {ResultIssuesModal} from '../../../Query/Issues/Issues';
+import {SchemaObjectInfo} from '../SchemaObjectInfo/SchemaObjectInfo';
 
 import i18n from './i18n';
 
@@ -25,26 +29,37 @@ import './StreamingQueryInfo.scss';
 interface StreamingQueryProps {
     database: string;
     path: string;
+    data?: TEvDescribeSchemeResult;
 }
 
 const b = cn('ydb-streaming-query-info');
 
-export function StreamingQueryInfo({database, path}: StreamingQueryProps) {
-    const {data: sysData, isFetching} = streamingQueriesApi.useGetStreamingQueryInfoQuery(
+export function StreamingQueryInfo({database, path, data}: StreamingQueryProps) {
+    const {currentData: sysData, isFetching} = streamingQueriesApi.useGetStreamingQueryInfoQuery(
         {database, path},
         {skip: !database || !path},
     );
     const loading = isFetching && sysData === undefined;
 
-    if (loading) {
-        return <Loader size="s" className={b('loader')} />;
-    }
-
-    const {items, queryText} = prepareStreamingQueryItems(sysData);
+    const {items, queryText, createdContent, stateItems} = prepareStreamingQueryInfo(
+        sysData,
+        data?.PathDescription?.Self?.CreateStep,
+    );
 
     return (
         <React.Fragment>
-            <YDBDefinitionList items={items} />
+            <SchemaObjectInfo
+                data={data}
+                fallbackType={EPathType.EPathTypeStreamingQuery}
+                path={path}
+                createdContent={createdContent}
+                itemsAfterType={stateItems}
+            />
+            {loading ? (
+                <Loader size="s" className={b('loader')} />
+            ) : items.length ? (
+                <YDBDefinitionList items={items} />
+            ) : null}
             {queryText ? (
                 <YQLCodePreview title={i18n('field_query-text')} text={queryText} />
             ) : null}
@@ -74,27 +89,40 @@ function StateLabel({state}: {state?: string}) {
     return <Label theme={theme}>{state}</Label>;
 }
 
-function prepareStreamingQueryItems(sysData?: IQueryResult) {
+export function prepareStreamingQueryInfo(sysData?: IQueryResult, createStep?: string | number) {
     if (!sysData) {
-        return {items: [], queryText: undefined};
+        return {items: [], queryText: undefined, createdContent: undefined, stateItems: []};
     }
 
-    const info: YDBDefinitionListItem[] = [];
-    const state = getStringifiedData(sysData.resultSets?.[0]?.result?.[0]?.State);
-
-    const queryText = getStringifiedData(sysData.resultSets?.[0]?.result?.[0]?.Text);
+    const row = sysData.resultSets?.[0]?.result?.[0];
+    const createdContent =
+        formatLifecycleValue(row?.CreatedAt, row?.CreatedBy, createStep) ??
+        (row && 'CreatedAt' in row ? EMPTY_DATA_PLACEHOLDER : undefined);
+    const lifecycleFields = [
+        {name: i18n('field_started'), timestamp: 'StartedAt', user: 'StartedBy'},
+        {name: i18n('field_modified'), timestamp: 'ModifiedAt', user: 'ModifiedBy'},
+        {name: i18n('field_stopped'), timestamp: 'FinishedAt', user: 'StoppedBy'},
+    ];
+    const info: YDBDefinitionListItem[] = lifecycleFields
+        .filter(({timestamp}) => row && timestamp in row)
+        .map(({name, timestamp, user}) => ({
+            name,
+            content: formatLifecycleValue(row?.[timestamp], row?.[user]) ?? EMPTY_DATA_PLACEHOLDER,
+        }));
+    const state = getStringifiedData(row?.Status);
+
+    const queryText = getStringifiedData(row?.Text);
     let normalizedQueryText = trimOuterEmptyLines(queryText);
     normalizedQueryText = stripIndentByFirstLine(normalizedQueryText);
 
-    const errorRaw = sysData.resultSets?.[0]?.result?.[0]?.Error;
+    const errorRaw = row?.Issues;
 
     // 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'),
-        content: <StateLabel state={state} />,
-    });
+    const stateItems: YDBDefinitionListItem[] = [
+        {name: i18n('field_query-state'), content: <StateLabel state={state} />},
+    ];
 
     if (errorData) {
         info.push({
@@ -103,22 +131,39 @@ function prepareStreamingQueryItems(sysData?: IQueryResult) {
         });
     }
 
-    return {items: info, queryText: normalizedQueryText};
+    return {items: info, queryText: normalizedQueryText, createdContent, stateItems};
 }
 
-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;
-        }
+function formatLifecycleValue(
+    timestamp: string | number | null | undefined,
+    user: string | number | null | undefined,
+    fallback?: string | number,
+) {
+    let milliseconds = NaN;
+    if (typeof timestamp === 'number') {
+        milliseconds = timestamp;
+    } else if (typeof timestamp === 'string') {
+        milliseconds = Date.parse(timestamp);
+    }
+    const dateMilliseconds =
+        Number.isFinite(milliseconds) && milliseconds > 0 ? milliseconds : Number(fallback);
+    const date =
+        Number.isFinite(dateMilliseconds) && dateMilliseconds > 0
+            ? dateTimeParse(dateMilliseconds)?.format('YYYY-MM-DD HH:mm:ss')
+            : undefined;
+
+    if (!date && !user) {
+        return undefined;
     }
 
-    if (isErrorResponse(raw)) {
-        return raw;
+    if (!user) {
+        return date;
     }
 
-    return undefined;
+    return (
+        <React.Fragment>
+            {i18n('value_date-by-user', {date: date || EMPTY_DATA_PLACEHOLDER})}{' '}
+            <Label theme="normal">{String(user)}</Label>
+        </React.Fragment>
+    );
 }

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

@@ -1,5 +1,9 @@
 {
   "field_query-state": "State",
   "field_query-error": "Error",
-  "field_query-text": "Text"
+  "field_query-text": "Text",
+  "field_started": "Started",
+  "field_modified": "Modified",
+  "field_stopped": "Stopped",
+  "value_date-by-user": "{{date}} by"
 }

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