ydb-embedded-ui 22.2.0 → 22.3.0

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',
 });

package/src/store/reducers/query/parsers/prepareStreamingQueryPlan.ts

@@ -0,0 +1,74 @@
+import type {QueryPlan} from '../../../../types/api/query';
+import type {PreparedQueryData} from '../types';
+
+import {preparePlanData} from './preparePlanData';
+
+// empty: nothing has been published yet; unparsed: a plan arrived but cannot be read,
+// for instance truncated by the backend; unsupported: a readable plan of an unknown version.
+export type StreamingQueryPlanState = 'empty' | 'unparsed' | 'unsupported' | 'ready';
+
+interface StreamingQueryPlan {
+    state: StreamingQueryPlanState;
+    prepared?: PreparedQueryData['preparedPlan'];
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function isPlanNode(value: unknown) {
+    return isObject(value) && typeof value['Node Type'] === 'string';
+}
+
+function isStringList(value: unknown) {
+    return (
+        value === undefined || (Array.isArray(value) && value.every((i) => typeof i === 'string'))
+    );
+}
+
+// The graph blocks render these fields directly, so anything else would throw while drawing.
+function isRenderable(prepared: PreparedQueryData['preparedPlan']) {
+    return (prepared?.nodes ?? []).every(({data}) => {
+        return (
+            (data?.id === undefined || typeof data.id === 'number') &&
+            (data?.name === undefined || typeof data.name === 'string') &&
+            isStringList(data?.operators) &&
+            isStringList(data?.tables)
+        );
+    });
+}
+
+export function prepareStreamingQueryPlan(planText?: string): StreamingQueryPlan {
+    if (!planText) {
+        return {state: 'empty'};
+    }
+
+    let parsed: unknown;
+    try {
+        parsed = JSON.parse(planText);
+    } catch {
+        return {state: 'unparsed'};
+    }
+
+    if (!isObject(parsed) || !isObject(parsed.meta)) {
+        return {state: 'empty'};
+    }
+    if (!parsed.Plan) {
+        return {state: 'empty'};
+    }
+    if (!isPlanNode(parsed.Plan)) {
+        return {state: 'unparsed'};
+    }
+
+    try {
+        const {simplifiedPlan: _simplifiedPlan, ...prepared} = preparePlanData(
+            parsed as unknown as QueryPlan,
+        );
+        if (!isRenderable(prepared)) {
+            return {state: 'unparsed'};
+        }
+        return prepared.nodes?.length ? {state: 'ready', prepared} : {state: 'unsupported'};
+    } catch {
+        return {state: 'unparsed'};
+    }
+}

package/src/store/reducers/streamingQuery/streamingQuery.ts

@@ -14,27 +14,54 @@ WHERE Path = '${safePath}'
 LIMIT 1`;
 }
 
+function getStreamingQueryPlanSQL(path: string) {
+    const safePath = path.replace(/'/g, "''");
+    return `${QUERY_TECHNICAL_MARK}
+SELECT
+    Status,
+    Issues,
+    Plan
+FROM \`.sys/streaming_queries\`
+WHERE Path = '${safePath}'
+LIMIT 1`;
+}
+
+async function execStreamingSQL(
+    sql: string,
+    {database, signal}: {database: string; signal: AbortSignal},
+) {
+    const response = await window.api.viewer.sendQuery(
+        {query: sql, database, action: 'execute-query', internal_call: true},
+        {signal, withRetries: true},
+    );
+    if (isQueryErrorResponse(response)) {
+        return {error: response};
+    }
+    return {data: parseQueryAPIResponse(response)};
+}
+
 export const streamingQueriesApi = api.injectEndpoints({
     endpoints: (build) => ({
         getStreamingQueryInfo: build.query({
             queryFn: async ({database, path}: {database: string; path: string}, {signal}) => {
                 try {
-                    const response = await window.api.viewer.sendQuery(
-                        {
-                            query: getStreamingQueryInfoSQL(path),
-                            database,
-                            action: 'execute-query',
-                            internal_call: true,
-                        },
-                        {signal, withRetries: true},
-                    );
-
-                    if (isQueryErrorResponse(response)) {
-                        return {error: response};
-                    }
-
-                    const data = parseQueryAPIResponse(response);
-                    return {data};
+                    return await execStreamingSQL(getStreamingQueryInfoSQL(path), {
+                        database,
+                        signal,
+                    });
+                } catch (error) {
+                    return {error};
+                }
+            },
+            providesTags: ['All'],
+        }),
+        getStreamingQueryPlan: build.query({
+            queryFn: async ({database, path}: {database: string; path: string}, {signal}) => {
+                try {
+                    return await execStreamingSQL(getStreamingQueryPlanSQL(path), {
+                        database,
+                        signal,
+                    });
                 } catch (error) {
                     return {error};
                 }

package/src/store/reducers/tenant/constants.ts

@@ -37,6 +37,7 @@ export const TENANT_DIAGNOSTICS_TABS_IDS = {
     access: 'access',
     backups: 'backups',
     monitoring: 'monitoring',
+    computationGraph: 'computationGraph',
 } as const;
 
 export const TENANT_SUMMARY_TABS_IDS = {

package/src/types/api/schema/columnEntity.ts

@@ -1,5 +1,5 @@
 import type {EColumnCodec, EUnit, TPathID, TStorageSettings, TTypeInfo} from './shared';
-import type {TFamilyDescription} from './table';
+import type {TFamilyDescription, TTTLTier} from './table';
 
 export interface TColumnTableDescription {
     Name?: string;
@@ -71,6 +71,7 @@ interface TTtl {
     ExpireAfterBytes?: string;
 
     ColumnUnit?: EUnit;
+    Tiers?: TTTLTier[];
 }
 
 interface TColumnTableSchema {

package/src/types/api/schema/sysView.ts

@@ -2,43 +2,66 @@ import type {TPathID} from './shared';
 
 export interface TSysViewDescription {
     Name?: string;
-    Type?: ESysViewType;
+    /**
+     * ESysViewType: enum name ("EVSlots") on YDB <= 26.3.1.x,
+     * numeric value (13) since ydb-platform/ydb#54332
+     */
+    Type?: ESysViewType | number;
     SourceObject?: TPathID;
 }
 
-export type ESysViewType =
-    | 'EPartitionStats'
-    | 'ENodes'
-    | 'ETopQueriesByDurationOneMinute'
-    | 'ETopQueriesByDurationOneHour'
-    | 'ETopQueriesByReadBytesOneMinute'
-    | 'ETopQueriesByReadBytesOneHour'
-    | 'ETopQueriesByCpuTimeOneMinute'
-    | 'ETopQueriesByCpuTimeOneHour'
-    | 'ETopQueriesByRequestUnitsOneMinute'
-    | 'ETopQueriesByRequestUnitsOneHour'
-    | 'EQuerySessions'
-    | 'EPDisks'
-    | 'EVSlots'
-    | 'EGroups'
-    | 'EStoragePools'
-    | 'EStorageStats'
-    | 'ETablets'
-    | 'EQueryMetricsOneMinute'
-    | 'ETopPartitionsByCpuOneMinute'
-    | 'ETopPartitionsByCpuOneHour'
-    | 'ETopPartitionsByTliOneMinute'
-    | 'ETopPartitionsByTliOneHour'
-    | 'EResourcePoolClassifiers'
-    | 'EResourcePools'
-    | 'EAuthUsers'
-    | 'EAuthGroups'
-    | 'EAuthGroupMembers'
-    | 'EAuthOwners'
-    | 'EAuthPermissions'
-    | 'EAuthEffectivePermissions'
-    | 'EPgTables'
-    | 'EInformationSchemaTables'
-    | 'EPgClass'
-    | 'EShowCreate'
-    | 'ECompileCacheQueries';
+/**
+ * Numeric ESysViewType values
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/protos/sys_view_types.proto
+ */
+export const SYS_VIEW_TYPE_IDS = {
+    EPartitionStats: 1,
+    ENodes: 2,
+    ETopQueriesByDurationOneMinute: 3,
+    ETopQueriesByDurationOneHour: 4,
+    ETopQueriesByReadBytesOneMinute: 5,
+    ETopQueriesByReadBytesOneHour: 6,
+    ETopQueriesByCpuTimeOneMinute: 7,
+    ETopQueriesByCpuTimeOneHour: 8,
+    ETopQueriesByRequestUnitsOneMinute: 9,
+    ETopQueriesByRequestUnitsOneHour: 10,
+    EQuerySessions: 11,
+    EPDisks: 12,
+    EVSlots: 13,
+    EGroups: 14,
+    EStoragePools: 15,
+    EStorageStats: 16,
+    ETablets: 17,
+    EQueryMetricsOneMinute: 18,
+    ETopPartitionsByCpuOneMinute: 19,
+    ETopPartitionsByCpuOneHour: 20,
+    ETopPartitionsByTliOneMinute: 21,
+    ETopPartitionsByTliOneHour: 22,
+    EResourcePoolClassifiers: 23,
+    EResourcePools: 24,
+    EAuthUsers: 25,
+    EAuthGroups: 26,
+    EAuthGroupMembers: 27,
+    EAuthOwners: 28,
+    EAuthPermissions: 29,
+    EAuthEffectivePermissions: 30,
+    EPgTables: 31,
+    EInformationSchemaTables: 32,
+    EPgClass: 33,
+    EShowCreate: 34,
+    ECompileCacheQueries: 35,
+    EStorePrimaryIndexStats: 36,
+    EStorePrimaryIndexSchemaStats: 37,
+    EStorePrimaryIndexPortionStats: 38,
+    EStorePrimaryIndexGranuleStats: 39,
+    EStorePrimaryIndexOptimizerStats: 40,
+    ETablePrimaryIndexStats: 41,
+    ETablePrimaryIndexSchemaStats: 42,
+    ETablePrimaryIndexPortionStats: 43,
+    ETablePrimaryIndexGranuleStats: 44,
+    ETablePrimaryIndexOptimizerStats: 45,
+    EStreamingQueries: 46,
+    EUdfModules: 47,
+} as const;
+
+export type ESysViewType = keyof typeof SYS_VIEW_TYPE_IDS;

package/src/types/api/schema/table.ts

@@ -66,6 +66,13 @@ interface TEnabled {
     ExpireAfterSeconds?: number;
     ColumnUnit?: EUnit;
     SysSettings?: TSysSettings;
+    Tiers?: TTTLTier[];
+}
+
+export interface TTTLTier {
+    ApplyAfterSeconds?: number;
+    Delete?: {};
+    EvictToExternalStorage?: {Storage?: string};
 }
 
 interface TSysSettings {

package/src/utils/query.ts

@@ -253,6 +253,61 @@ export function isErrorResponse(data: unknown): data is ErrorResponse {
     return Boolean(data && typeof data === 'object' && 'issues' in data);
 }
 
+function hasIssueContent(data: ErrorResponse) {
+    return Boolean(data.error || data.issues?.length);
+}
+
+// The issues view walks this tree and renders these fields, so anything else would throw while drawing.
+function isIssueTree(value: unknown): boolean {
+    return (
+        Array.isArray(value) &&
+        value.every((issue) => {
+            if (!issue || typeof issue !== 'object' || Array.isArray(issue)) {
+                return false;
+            }
+            const {
+                message,
+                issue_code: issueCode,
+                issues,
+            } = issue as {
+                message?: unknown;
+                issue_code?: unknown;
+                issues?: unknown;
+            };
+            return (
+                (message === undefined || typeof message === 'string') &&
+                (issueCode === undefined || typeof issueCode === 'number') &&
+                (issues === undefined || issues === null || isIssueTree(issues))
+            );
+        })
+    );
+}
+
+function hasRenderableIssues(data: ErrorResponse) {
+    const message: unknown = data.error?.message;
+    return (
+        (message === undefined || typeof message === 'string') &&
+        (data.issues === undefined || data.issues === null || isIssueTree(data.issues))
+    );
+}
+
+export function parseIssuesData(raw: unknown): ErrorResponse | string | undefined {
+    if (typeof raw === 'string' && raw) {
+        try {
+            const parsed: unknown = JSON.parse(raw);
+            return isErrorResponse(parsed) && hasIssueContent(parsed) && hasRenderableIssues(parsed)
+                ? parsed
+                : undefined;
+        } catch {
+            return raw;
+        }
+    }
+    if (isErrorResponse(raw) && hasIssueContent(raw) && hasRenderableIssues(raw)) {
+        return raw;
+    }
+    return undefined;
+}
+
 // Although schema is set in request, if schema is not supported default schema for the version will be used
 // So we should additionally parse response
 export function parseQueryAPIResponse(

package/src/utils/schema.ts

@@ -1,14 +1,31 @@
 import type {ESysViewType} from '../types/api/schema/sysView';
+import {SYS_VIEW_TYPE_IDS} from '../types/api/schema/sysView';
 
-export function prepareSystemViewType(type?: ESysViewType) {
-    if (!type) {
+const SYS_VIEW_TYPE_NAMES_BY_ID = new Map<number, ESysViewType>(
+    (Object.keys(SYS_VIEW_TYPE_IDS) as ESysViewType[]).map(
+        (name) => [SYS_VIEW_TYPE_IDS[name], name] as const,
+    ),
+);
+
+/**
+ * Normalizes SysViewDescription.Type for display.
+ * YDB <= 26.3.1.x returns the enum name ("EVSlots"),
+ * YDB with ydb-platform/ydb#54332 returns the numeric value (13).
+ */
+export function prepareSystemViewType(type?: string | number | null): string | undefined {
+    if (type === undefined || type === null || type === '') {
         return undefined;
     }
+
+    // Ids unknown to this UI version are shown as-is instead of hiding the row
+    const name =
+        typeof type === 'number' ? (SYS_VIEW_TYPE_NAMES_BY_ID.get(type) ?? String(type)) : type;
+
     // System view type is enum, its format from backend is EType
     // We need to display only Type, remove redundant E
     // EStoragePools -> StoragePools, EStorageStats -> StorageStats
-    if (type.startsWith('E')) {
-        return type.slice(1);
+    if (name.startsWith('E')) {
+        return name.slice(1);
     }
-    return type;
+    return name;
 }