feat: show streaming query stats in Info tab (#3060)

Author: DaryaVorontsova

src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -25,4 +25,9 @@
         top: 23px;
         right: 13px;
     }
+
+    // Delete padding for all query text on Diagnostics -> Info tab
+    pre {
+        padding: 0;
+    }
 }

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

@@ -13,6 +13,7 @@ import {ViewInfo} from '../../Info/View/View';
 
 import {AsyncReplicationInfo} from './AsyncReplicationInfo';
 import {ChangefeedInfo} from './ChangefeedInfo';
+import {StreamingQueryInfo} from './StreamingQueryInfo';
 import {TableInfo} from './TableInfo';
 import {TopicInfo} from './TopicInfo';
 import {TransferInfo} from './TransferInfo';
@@ -77,7 +78,9 @@ function Overview({type, path, database, databaseFullPath}: OverviewProps) {
                     data={data}
                 />
             ),
-            [EPathType.EPathTypeStreamingQuery]: undefined,
+            [EPathType.EPathTypeStreamingQuery]: () => (
+                <StreamingQueryInfo data={data} path={path} database={database} />
+            ),
         };
 
         return (type && pathTypeToComponent[type]?.()) || <TableInfo data={data} type={type} />;

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

@@ -0,0 +1,128 @@
+import React from 'react';
+
+import {Label} from '@gravity-ui/uikit';
+
+import {YDBSyntaxHighlighter} from '../../../../../components/SyntaxHighlighter/YDBSyntaxHighlighter';
+import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
+import type {YDBDefinitionListItem} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
+import {streamingQueriesApi} from '../../../../../store/reducers/streamingQuery/streamingQuery';
+import type {ErrorResponse} from '../../../../../types/api/query';
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+import type {IQueryResult} from '../../../../../types/store/query';
+import {
+    getStringifiedData,
+    stripIndentByFirstLine,
+    trimOuterEmptyLines,
+} from '../../../../../utils/dataFormatters/dataFormatters';
+import {isErrorResponse} from '../../../../../utils/query';
+import {ResultIssuesModal} from '../../../Query/Issues/Issues';
+import {getEntityName} from '../../../utils';
+
+import i18n from './i18n';
+
+interface StreamingQueryProps {
+    data?: TEvDescribeSchemeResult;
+    database: string;
+    path: string;
+}
+
+/** Displays overview for StreamingQuery EPathType */
+export function StreamingQueryInfo({data, database, path}: StreamingQueryProps) {
+    const entityName = getEntityName(data?.PathDescription);
+
+    if (!data) {
+        return (
+            <div className="error">
+                {i18n('alert_no-data')} {entityName}
+            </div>
+        );
+    }
+
+    const {data: sysData} = streamingQueriesApi.useGetStreamingQueryInfoQuery(
+        {database, path},
+        {skip: !database || !path},
+    );
+
+    const items = prepareStreamingQueryItems(sysData);
+
+    return <YDBDefinitionList title={entityName} items={items} />;
+}
+
+const STATE_THEME_MAP: Record<string, React.ComponentProps<typeof Label>['theme']> = {
+    CREATING: 'info',
+    CREATED: 'normal',
+    STARTING: 'info',
+    RUNNING: 'success',
+    STOPPING: 'info',
+    STOPPED: 'normal',
+    COMPLETED: 'success',
+    SUSPENDED: 'warning',
+    FAILED: 'danger',
+};
+
+function StateLabel({state}: {state?: string}) {
+    if (!state) {
+        return null;
+    }
+
+    const theme = STATE_THEME_MAP[state] ?? 'normal';
+
+    return <Label theme={theme}>{state}</Label>;
+}
+
+function prepareStreamingQueryItems(sysData?: IQueryResult): YDBDefinitionListItem[] {
+    if (!sysData) {
+        return [];
+    }
+
+    const info: YDBDefinitionListItem[] = [];
+    const state = getStringifiedData(sysData.resultSets?.[0]?.result?.[0]?.State);
+
+    const queryText = getStringifiedData(sysData.resultSets?.[0]?.result?.[0]?.Text);
+    let normalizedQueryText = trimOuterEmptyLines(queryText);
+    normalizedQueryText = stripIndentByFirstLine(normalizedQueryText);
+
+    const errorRaw = sysData.resultSets?.[0]?.result?.[0]?.Error;
+
+    // We use custom error check, because error type can be non-standard
+    const errorData = parseErrorData(errorRaw);
+
+    info.push({
+        name: i18n('field_query-state'),
+        content: <StateLabel state={state} />,
+    });
+
+    if (errorData) {
+        info.push({
+            name: i18n('field_query-error'),
+            content: <ResultIssuesModal data={errorData} />,
+        });
+    }
+
+    info.push({
+        name: i18n('field_query-text'),
+        copyText: normalizedQueryText,
+        content: normalizedQueryText ? (
+            <YDBSyntaxHighlighter language="yql" text={normalizedQueryText} />
+        ) : null,
+    });
+
+    return info;
+}
+
+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;
+}

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

@@ -0,0 +1,6 @@
+{
+  "alert_no-data": "No data for entity:",
+  "field_query-state": "State",
+  "field_query-error": "Error",
+  "field_query-text": "Text"
+}

src/containers/Tenant/Diagnostics/Overview/StreamingQueryInfo/i18n/index.ts

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

src/containers/Tenant/Diagnostics/Overview/StreamingQueryInfo/index.ts

@@ -0,0 +1 @@
+export * from './StreamingQueryInfo';

src/containers/Tenant/Query/Issues/Issues.scss

@@ -1,6 +1,4 @@
 .kv-result-issues {
-    padding: 0 10px;
-
     &__error-message {
         position: sticky;
         z-index: 2;
@@ -10,8 +8,6 @@
         display: flex;
         align-items: center;
 
-        padding: 10px 0;
-
         background-color: var(--g-color-base-background);
     }