feat: multipart response

Author: astandrik

public/index.html

@@ -23,7 +23,7 @@
       window.systemSettings = {};
       window.userSettings = {};
       window.web_version = !'%REACT_APP_BACKEND%';
-      window.custom_backend = 'http://localhost:8765';
+      window.custom_backend = '%NODE_ENV%' === 'development' && '%REACT_APP_BACKEND%';
       window.meta_backend = '%REACT_APP_META_BACKEND%'
     </script>
   </head>

src/components/QueryResultTable/QueryResultTable.tsx

@@ -6,7 +6,7 @@ import type {Column, Settings} from '@gravity-ui/react-data-table';
 import type {ColumnType, KeyValueRow} from '../../types/api/query';
 import {cn} from '../../utils/cn';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
-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';
@@ -80,16 +80,18 @@ 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(() => {
+        if (!data?.length) {
+            return [];
+        }
         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;
     }
 

src/containers/App/Content.tsx

@@ -25,7 +25,6 @@ import type {RawBreadcrumbItem} from '../Header/breadcrumbs';
 import {
     ClusterSlot,
     ClustersSlot,
-    MultipartTestSlot,
     NodeSlot,
     PDiskPageSlot,
     RedirectSlot,
@@ -48,14 +47,7 @@ type RouteSlot = {
     wrapper?: React.ComponentType<any>;
     exact?: boolean;
 };
-
 const routesSlots: RouteSlot[] = [
-    {
-        path: routes.multipartTest,
-        slot: MultipartTestSlot,
-        component: lazyComponent(() => import('../MultipartTest/MultipartTest'), 'MultipartTest'),
-        exact: true,
-    },
     {
         path: routes.cluster,
         slot: ClusterSlot,

src/containers/App/appSlots.tsx

@@ -3,7 +3,6 @@ import type {RedirectProps, RouteComponentProps} from 'react-router-dom';
 import {createSlot} from '../../components/slots';
 import type {Cluster} from '../Cluster/Cluster';
 import type {Clusters} from '../Clusters/Clusters';
-import type {MultipartTest} from '../MultipartTest/MultipartTest';
 import type {Node} from '../Node/Node';
 import type {PDiskPage} from '../PDiskPage/PDiskPage';
 import type {StorageGroupPage} from '../StorageGroupPage/StorageGroupPage';
@@ -12,58 +11,45 @@ import type {Tenant} from '../Tenant/Tenant';
 import type {VDiskPage} from '../VDiskPage/VDiskPage';
 
 export const ClustersSlot = createSlot<{
-    children?:
+    children:
         | React.ReactNode
         | ((props: {component: typeof Clusters} & RouteComponentProps) => React.ReactNode);
 }>('clusters');
-
 export const ClusterSlot = createSlot<{
-    children?:
+    children:
         | React.ReactNode
         | ((props: {component: typeof Cluster} & RouteComponentProps) => React.ReactNode);
 }>('cluster');
-
 export const TenantSlot = createSlot<{
-    children?:
+    children:
         | React.ReactNode
         | ((props: {component: typeof Tenant} & RouteComponentProps) => React.ReactNode);
 }>('tenant');
-
 export const NodeSlot = createSlot<{
-    children?:
+    children:
         | React.ReactNode
         | ((props: {component: typeof Node} & RouteComponentProps) => React.ReactNode);
 }>('node');
-
 export const PDiskPageSlot = createSlot<{
-    children?:
+    children:
         | React.ReactNode
         | ((props: {component: typeof PDiskPage} & RouteComponentProps) => React.ReactNode);
 }>('pDisk');
-
 export const VDiskPageSlot = createSlot<{
-    children?:
+    children:
         | React.ReactNode
         | ((props: {component: typeof VDiskPage} & RouteComponentProps) => React.ReactNode);
 }>('vDisk');
-
 export const StorageGroupSlot = createSlot<{
-    children?:
+    children:
         | React.ReactNode
         | ((props: {component: typeof StorageGroupPage} & RouteComponentProps) => React.ReactNode);
 }>('storageGroup');
-
 export const TabletSlot = createSlot<{
-    children?:
+    children:
         | React.ReactNode
         | ((props: {component: typeof Tablet} & RouteComponentProps) => React.ReactNode);
 }>('tablet');
 
-export const MultipartTestSlot = createSlot<{
-    children?:
-        | React.ReactNode
-        | ((props: {component: typeof MultipartTest} & RouteComponentProps) => React.ReactNode);
-}>('multipartTest');
-
 export const RoutesSlot = createSlot<{children: React.ReactNode}>('routes');
 export const RedirectSlot = createSlot<RedirectProps>('redirect');

src/containers/MultipartTest/MultipartTest.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