ydb-platform · astandrik · Dec 23, 2024 · Feb 4, 2025 · Feb 6, 2025 · Feb 6, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@gravity-ui/uikit": "^6.40.0",
     "@gravity-ui/websql-autocomplete": "^13.4.0",
     "@hookform/resolvers": "^3.10.0",
+    "@mjackson/multipart-parser": "^0.8.2",
     "@reduxjs/toolkit": "^2.5.0",
     "@tanstack/react-table": "^8.20.6",
     "axios": "^1.7.9",

diff --git a/src/components/QueryResultTable/QueryResultTable.tsx b/src/components/QueryResultTable/QueryResultTable.tsx
@@ -3,11 +3,12 @@ import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import type {Column, Settings} from '@gravity-ui/react-data-table';
 
+import {INDEX_COLUMN} from '../../store/reducers/query/query';
 import type {ColumnType, KeyValueRow} from '../../types/api/query';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {getColumnWidth} from '../../utils/getColumnWidth';
-import {getColumnType, prepareQueryResponse} from '../../utils/query';
+import {getColumnType} from '../../utils/query';
 import {isNumeric} from '../../utils/utils';
 import type {ResizeableDataTableProps} from '../ResizeableDataTable/ResizeableDataTable';
 import {ResizeableDataTable} from '../ResizeableDataTable/ResizeableDataTable';
@@ -21,7 +22,6 @@ const TABLE_SETTINGS: Settings = {
     ...DEFAULT_TABLE_SETTINGS,
     stripedRows: true,
     sortable: false,
-    displayIndices: true,
 };
 
 export const b = cn('ydb-query-result-table');
@@ -49,8 +49,8 @@ const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => {
     });
 };
 
-const prepareGenericColumns = (data: KeyValueRow[]) => {
-    if (!data.length) {
+const prepareGenericColumns = (data?: KeyValueRow[]) => {
+    if (!data?.length) {
         return [];
     }
 
@@ -80,28 +80,32 @@ interface QueryResultTableProps
 }
 
 export const QueryResultTable = (props: QueryResultTableProps) => {
-    const {columns: rawColumns, data: rawData, ...restProps} = props;
+    const {columns: rawColumns, data, ...restProps} = props;
 
-    const data = React.useMemo(() => prepareQueryResponse(rawData), [rawData]);
     const columns = React.useMemo(() => {
         return rawColumns ? prepareTypedColumns(rawColumns, data) : prepareGenericColumns(data);
     }, [data, rawColumns]);
 
     // empty data is expected to be be an empty array
     // undefined data is not rendered at all
-    if (!Array.isArray(rawData)) {
+    if (!Array.isArray(data)) {
         return null;
     }
 
     if (!columns.length) {
         return <div className={b('message')}>{i18n('empty')}</div>;
     }
 
+    const settings = {
+        ...TABLE_SETTINGS,
+        displayIndices: columns.filter(({name}) => INDEX_COLUMN.name === name).length === 0,
+    };
+
     return (
         <ResizeableDataTable
             data={data}
             columns={columns}
-            settings={TABLE_SETTINGS}
+            settings={settings}
             // prevent accessing row.id in case it is present but is not the PK (i.e. may repeat)
             rowKey={getRowIndex}
             visibleRowIndex={getVisibleRowIndex}

diff --git a/src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.tsx b/src/containers/Tenant/Query/CancelQueryButton/CancelQueryButton.tsx
@@ -14,14 +14,16 @@ const b = cn('cancel-query-button');
 interface CancelQueryButtonProps {
     queryId: string;
     tenantName: string;
+    onClick?: VoidFunction;
 }
 
-export function CancelQueryButton({queryId, tenantName}: CancelQueryButtonProps) {
+export function CancelQueryButton({queryId, tenantName, onClick}: CancelQueryButtonProps) {
     const [sendCancelQuery, cancelQueryResponse] = cancelQueryApi.useCancelQueryMutation();
 
     const onStopButtonClick = React.useCallback(() => {
         sendCancelQuery({queryId, database: tenantName});
-    }, [queryId, sendCancelQuery, tenantName]);
+        onClick?.();
+    }, [onClick, queryId, sendCancelQuery, tenantName]);
 
     return (
         <Button

diff --git a/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx b/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx
@@ -4,7 +4,10 @@ import {isEqual} from 'lodash';
 import {v4 as uuidv4} from 'uuid';
 
 import SplitPane from '../../../../components/SplitPane';
-import {useTracingLevelOptionAvailable} from '../../../../store/reducers/capabilities/hooks';
+import {
+    useStreamingAvailable,
+    useTracingLevelOptionAvailable,
+} from '../../../../store/reducers/capabilities/hooks';
 import {
     queryApi,
     saveQueryToHistory,
@@ -86,8 +89,12 @@ export default function QueryEditor(props: QueryEditorProps) {
         LAST_USED_QUERY_ACTION_KEY,
     );
     const [lastExecutedQueryText, setLastExecutedQueryText] = React.useState<string>('');
+    const isStreamingSupported = useStreamingAvailable();
 
     const [sendQuery] = queryApi.useUseSendQueryMutation();
+    const [streamQuery] = queryApi.useUseStreamQueryMutation();
+
+    const runningQueryRef = React.useRef<{abort: VoidFunction} | null>(null);
 
     React.useEffect(() => {
         if (savedPath !== tenantName) {
@@ -121,14 +128,25 @@ export default function QueryEditor(props: QueryEditorProps) {
         }
         const queryId = uuidv4();
 
-        sendQuery({
-            actionType: 'execute',
-            query: text,
-            database: tenantName,
-            querySettings,
-            enableTracingLevel,
-            queryId,
-        });
+        if (isStreamingSupported) {
+            runningQueryRef.current = streamQuery({
+                actionType: 'execute',
+                query: text,
+                database: tenantName,
+                querySettings,
+                enableTracingLevel,
+                queryId,
+            });
+        } else {
+            runningQueryRef.current = sendQuery({
+                actionType: 'execute',
+                query: text,
+                database: tenantName,
+                querySettings,
+                enableTracingLevel,
+                queryId,
+            });
+        }
 
         dispatch(setShowPreview(false));
 
@@ -155,7 +173,7 @@ export default function QueryEditor(props: QueryEditorProps) {
 
         const queryId = uuidv4();
 
-        sendQuery({
+        runningQueryRef.current = sendQuery({
             actionType: 'explain',
             query: text,
             database: tenantName,
@@ -169,6 +187,12 @@ export default function QueryEditor(props: QueryEditorProps) {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     });
 
+    const handleCancelRunningQuery = React.useCallback(() => {
+        if (runningQueryRef.current) {
+            runningQueryRef.current.abort();
+        }
+    }, []);
+
     const onCollapseResultHandler = () => {
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
     };
@@ -233,6 +257,7 @@ export default function QueryEditor(props: QueryEditorProps) {
                         path={path}
                         showPreview={showPreview}
                         queryText={lastExecutedQueryText}
+                        onCancelRunningQuery={handleCancelRunningQuery}
                     />
                 </div>
             </SplitPane>
@@ -252,6 +277,7 @@ interface ResultProps {
     path: string;
     showPreview?: boolean;
     queryText: string;
+    onCancelRunningQuery: VoidFunction;
 }
 function Result({
     resultVisibilityState,
@@ -264,6 +290,7 @@ function Result({
     path,
     showPreview,
     queryText,
+    onCancelRunningQuery,
 }: ResultProps) {
     if (showPreview) {
         return <Preview database={tenantName} path={path} type={type} />;
@@ -280,6 +307,7 @@ function Result({
                 onExpandResults={onExpandResultHandler}
                 onCollapseResults={onCollapseResultHandler}
                 queryText={queryText}
+                onCancelRunningQuery={onCancelRunningQuery}
             />
         );
     }

diff --git a/src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx b/src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx
@@ -81,9 +81,10 @@ interface ExecuteResultProps {
     isResultsCollapsed?: boolean;
     theme?: string;
     tenantName: string;
+    queryText?: string;
+    onCancelRunningQuery?: VoidFunction;
     onCollapseResults: VoidFunction;
     onExpandResults: VoidFunction;
-    queryText?: string;
 }
 
 export function QueryResultViewer({
@@ -93,6 +94,7 @@ export function QueryResultViewer({
     theme,
     tenantName,
     queryText,
+    onCancelRunningQuery,
     onCollapseResults,
     onExpandResults,
 }: ExecuteResultProps) {
@@ -107,7 +109,7 @@ export function QueryResultViewer({
     });
     const [useShowPlanToSvg] = useSetting<boolean>(USE_SHOW_PLAN_SVG_KEY);
 
-    const {error, isLoading, queryId, data = {}} = result;
+    const {error, isLoading, queryId, data = {}, speedMetrics} = result;
     const {preparedPlan, simplifiedPlan, stats, resultSets, ast} = data;
 
     React.useEffect(() => {
@@ -168,6 +170,10 @@ export function QueryResultViewer({
     };
 
     const renderClipboardButton = () => {
+        if (isLoading) {
+            return null;
+        }
+
         const statsToCopy = getStatsToCopy();
         const copyText = getStringifiedData(statsToCopy);
         if (!copyText) {
@@ -213,19 +219,22 @@ export function QueryResultViewer({
     };
 
     const renderResultSection = () => {
-        if (error) {
-            return <QueryResultError error={error} />;
-        }
         if (activeSection === RESULT_OPTIONS_IDS.result) {
             return (
                 <ResultSetsViewer
+                    rowsPerSecond={speedMetrics?.rowsPerSecond}
                     resultSets={resultSets}
                     selectedResultSet={selectedResultSet}
+                    errorHeader={<QueryResultError error={error} />}
                     setSelectedResultSet={setSelectedResultSet}
                 />
             );
         }
 
+        if (error) {
+            return <QueryResultError error={error} />;
+        }
+
         if (activeSection === RESULT_OPTIONS_IDS.schema) {
             if (!preparedPlan?.nodes?.length) {
                 return renderStubMessage();
@@ -284,7 +293,11 @@ export function QueryResultViewer({
                 {isLoading ? (
                     <React.Fragment>
                         <ElapsedTime className={b('elapsed-time')} />
-                        <CancelQueryButton queryId={queryId} tenantName={tenantName} />
+                        <CancelQueryButton
+                            queryId={queryId}
+                            tenantName={tenantName}
+                            onClick={onCancelRunningQuery}
+                        />
                     </React.Fragment>
                 ) : null}
                 {data?.traceId && isExecute ? <TraceButton traceId={data.traceId} /> : null}
@@ -315,7 +328,7 @@ export function QueryResultViewer({
                 {renderRightControls()}
             </div>
             {isLoading || isQueryCancelledError(error) ? null : <QuerySettingsBanner />}
-            <LoaderWrapper loading={isLoading}>
+            <LoaderWrapper loading={isLoading && !data.resultSets}>
                 <Fullscreen className={b('result')}>{renderResultSection()}</Fullscreen>
             </LoaderWrapper>
         </React.Fragment>

diff --git a/src/containers/Tenant/Query/QueryResult/components/QueryResultError/QueryResultError.tsx b/src/containers/Tenant/Query/QueryResult/components/QueryResultError/QueryResultError.tsx
@@ -1,5 +1,6 @@
 import {cn} from '../../../../../../utils/cn';
 import {parseQueryError} from '../../../../../../utils/query';
+import {isNetworkError} from '../../../../../../utils/response';
 import {ResultIssues} from '../../../Issues/Issues';
 import {isQueryCancelledError} from '../../../utils/isQueryCancelledError';
 
@@ -10,12 +11,16 @@ const b = cn('ydb-query-result-error ');
 export function QueryResultError({error}: {error: unknown}) {
     const parsedError = parseQueryError(error);
 
-    // "Stopped" message is displayd in QueryExecutionStatus
+    // "Stopped" message is displayed in QueryExecutionStatus
     // There is no need to display "Query is cancelled" message too
     if (!parsedError || isQueryCancelledError(error)) {
         return null;
     }
 
+    if (isNetworkError(error)) {
+        return <div className={b('message')}>{error.message}</div>;
+    }
+
     if (typeof parsedError === 'object') {
         return <ResultIssues data={parsedError} />;
     }

diff --git a/src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.tsx b/src/containers/Tenant/Query/QueryResult/components/ResultSetsViewer/ResultSetsViewer.tsx
@@ -11,16 +11,16 @@ import './ResultSetsViewer.scss';
 const b = cn('ydb-query-result-sets-viewer');
 
 interface ResultSetsViewerProps {
+    rowsPerSecond?: number;
     resultSets?: ParsedResultSet[];
     selectedResultSet: number;
+    errorHeader?: React.ReactNode;
     setSelectedResultSet: (resultSet: number) => void;
 }
 
-export function ResultSetsViewer({
-    resultSets,
-    selectedResultSet,
-    setSelectedResultSet,
-}: ResultSetsViewerProps) {
+export function ResultSetsViewer(props: ResultSetsViewerProps) {
+    const {selectedResultSet, setSelectedResultSet, resultSets} = props;
+
     const resultsSetsCount = resultSets?.length || 0;
     const currentResult = resultSets?.[selectedResultSet];
 
@@ -60,13 +60,21 @@ export function ResultSetsViewer({
                         className={b('row-count')}
                     >{`(${currentResult?.result.length})`}</Text>
                 ) : null}
+                {props.rowsPerSecond ? (
+                    <Text
+                        color="secondary"
+                        variant="body-2"
+                        className={b('row-count')}
+                    >{`(${props.rowsPerSecond.toFixed(0)} rows/s)`}</Text>
+                ) : null}
             </div>
         );
     };
 
     return (
         <div className={b('result-wrapper')}>
             {renderTabs()}
+            {props.errorHeader ? props.errorHeader : null}
             {currentResult ? (
                 <div className={b('result')}>
                     {renderResultHeadWithCount()}