ydb-embedded-ui 22.2.0-hotfix.1 → 22.3.0

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

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

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import {Text, useThemeValue} from '@gravity-ui/uikit';
+
+import {ResponseError} from '../../../../components/Errors/ResponseError';
+import {Loader} from '../../../../components/Loader';
+import {prepareStreamingQueryPlan} from '../../../../store/reducers/query/parsers/prepareStreamingQueryPlan';
+import {streamingQueriesApi} from '../../../../store/reducers/streamingQuery/streamingQuery';
+import {cn} from '../../../../utils/cn';
+import {getStringifiedData} from '../../../../utils/dataFormatters/dataFormatters';
+import {useAutoRefreshInterval} from '../../../../utils/hooks';
+import {parseIssuesData} from '../../../../utils/query';
+import {ResultIssues} from '../../Query/Issues/Issues';
+import {Graph} from '../../Query/QueryResult/components/Graph/Graph';
+
+import i18n from './i18n';
+
+import './StreamingQueryGraph.scss';
+
+interface StreamingQueryGraphProps {
+    database: string;
+    path: string;
+}
+
+const RUNNING_STATUS = 'RUNNING';
+
+const b = cn('ydb-streaming-query-graph');
+
+const PLAN_STATE_MESSAGES = {
+    empty: 'description_no-plan',
+    unparsed: 'description_unparsed-plan',
+    unsupported: 'description_unsupported-plan',
+} as const;
+
+export function StreamingQueryGraph({database, path}: StreamingQueryGraphProps) {
+    const theme = useThemeValue();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+
+    const {
+        currentData: planData,
+        isFetching,
+        error,
+    } = streamingQueriesApi.useGetStreamingQueryPlanQuery(
+        {database, path},
+        {skip: !database || !path, pollingInterval: autoRefreshInterval},
+    );
+
+    const row = planData?.resultSets?.[0]?.result?.[0];
+
+    const {state, prepared} = React.useMemo(
+        () => prepareStreamingQueryPlan(getStringifiedData(row?.Plan)),
+        [row?.Plan],
+    );
+
+    if (isFetching && planData === undefined) {
+        return <Loader size="s" className={b('loader')} />;
+    }
+
+    const status = getStringifiedData(row?.Status);
+    const issues = parseIssuesData(row?.Issues);
+    const showStatus = Boolean(issues) || Boolean(status && status !== RUNNING_STATUS);
+
+    return (
+        <div className={b()}>
+            {error ? <ResponseError error={error} /> : null}
+            {showStatus ? (
+                <div className={b('status')}>
+                    {status ? <Text variant="subheader-2">{status}</Text> : null}
+                    {issues ? <ResultIssues data={issues} /> : null}
+                </div>
+            ) : null}
+            {state === 'ready' ? (
+                <Graph explain={prepared} theme={theme} />
+            ) : (
+                <div>{i18n(PLAN_STATE_MESSAGES[state])}</div>
+            )}
+        </div>
+    );
+}

package/src/containers/Tenant/Diagnostics/StreamingQueryGraph/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "description_no-plan": "The query has not reported its plan yet.",
+  "description_unparsed-plan": "The plan cannot be displayed.",
+  "description_unsupported-plan": "The plan version is not supported and cannot be rendered."
+}

package/src/containers/Tenant/Diagnostics/StreamingQueryGraph/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-tenant-diagnostics-streaming-query-graph';
+
+export default registerKeysets(COMPONENT, {en});

package/src/containers/Tenant/Diagnostics/StreamingQueryGraph/index.ts

@@ -0,0 +1 @@
+export {StreamingQueryGraph} from './StreamingQueryGraph';

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

@@ -15,6 +15,7 @@
   "title_describe": "Describe",
   "title_hot-keys": "Hot keys",
   "title_graph": "Graph",
+  "title_computation-graph": "Computation Graph",
   "title_consumers": "Consumers",
   "title_partitions": "Partitions",
   "title_data": "Data",

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

@@ -19,6 +19,7 @@ import {HotKeys} from './HotKeys/HotKeys';
 import {NetworkWrapper} from './Network/NetworkWrapper';
 import {Partitions} from './Partitions/Partitions';
 import {StorageUsage} from './StorageUsage/StorageUsage';
+import {StreamingQueryGraph} from './StreamingQueryGraph';
 import {TenantOverview} from './TenantOverview/TenantOverview';
 import {TopQueries} from './TopQueries/TopQueries';
 import {TopShards} from './TopShards/TopShards';
@@ -182,6 +183,9 @@ const diagnosticsTabRenderers: Record<TenantDiagnosticsTab, DiagnosticsTabRender
             database,
             scrollContainerRef,
         }),
+    [TENANT_DIAGNOSTICS_TABS_IDS.computationGraph]: ({database, path}) => (
+        <StreamingQueryGraph database={database} path={path} />
+    ),
     [TENANT_DIAGNOSTICS_TABS_IDS.monitoring]: ({database, databaseFullPath}) => {
         const content = uiFactory.renderMonitoring?.({database, databaseFullPath});
 

package/src/containers/Tenant/Query/QueryEditor/YqlEditor/YqlEditor.tsx

@@ -119,6 +119,14 @@ export function YqlEditor({
     const currentStatementCleanupRef = React.useRef<VoidFunction>();
     const [isEditorMounted, setIsEditorMounted] = React.useState(false);
 
+    React.useEffect(() => {
+        // onEditorReady removes the parent's visibility:hidden loading state.
+        // Focus after that render commits; focusing during editorDidMount is too early.
+        if (isEditorMounted) {
+            editorRef.current?.focus();
+        }
+    }, [isEditorMounted]);
+
     const isMultiTabQueryEditorEnabled = useMultiTabQueryEditorEnabled();
     const isAutocompleteEnabled = useEventHandler(() => Boolean(enableAutocomplete));
 
@@ -330,7 +338,6 @@ export function YqlEditor({
         if (!isMultiTabQueryEditorEnabled) {
             initUserPrompt(editor, getLastQueryText);
         }
-        editor.focus();
         editor.addAction({
             id: 'sendQuery',
             label: i18n('action_send-query'),

package/src/store/reducers/executeTopQueries/executeTopQueries.ts

@@ -106,6 +106,17 @@ WHERE Query NOT LIKE '%${QUERY_TECHNICAL_MARK}%'
 AND QueryStartAt is not null`;
 }
 
+function getRunningQueriesByPoolText(poolName: string) {
+    const escapedPoolName = poolName.replace(/'/g, "''");
+    return `${QUERY_TECHNICAL_MARK}
+SELECT
+    COUNT_IF(State = 'EXECUTING' AND (WmState IS NULL OR WmState NOT IN ('PENDING', 'DELAYED'))) as RunningQueriesCount,
+    COUNT_IF(State = 'QUEUED' OR WmState = 'PENDING' OR WmState = 'DELAYED') as QueuedQueriesCount
+FROM \`.sys/query_sessions\`
+WHERE Query NOT LIKE '%${QUERY_TECHNICAL_MARK}%'
+AND WmPoolId = '${escapedPoolName}'`;
+}
+
 interface QueriesRequestParams {
     database: string;
     filters?: TopQueriesFilters;
@@ -233,6 +244,41 @@ export const topQueriesApi = api.injectEndpoints({
             },
             providesTags: ['All'],
         }),
+        getRunningQueriesByPool: build.query({
+            queryFn: async (
+                {database, poolName}: {database: string; poolName: string},
+                {signal},
+            ) => {
+                try {
+                    const response = await window.api.viewer.sendQuery(
+                        {
+                            query: getRunningQueriesByPoolText(poolName),
+                            database,
+                            action: 'execute-query',
+                            internal_call: true,
+                        },
+                        {signal, withRetries: true},
+                    );
+
+                    if (isQueryErrorResponse(response)) {
+                        throw response;
+                    }
+
+                    const data = parseQueryAPIResponse(response);
+                    const row = data?.resultSets?.[0]?.result?.[0];
+
+                    return {
+                        data: {
+                            runningQueriesCount: Number(row?.RunningQueriesCount) || 0,
+                            queuedQueriesCount: Number(row?.QueuedQueriesCount) || 0,
+                        },
+                    };
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
     }),
     overrideExisting: 'throw',
 });