fix(Query): process null issues error (#480)

artemmufazalov · web-flow · commit 4c4e6845e539 · 2023-07-24T11:13:33.000+03:00
diff --git a/src/.eslintrc b/src/.eslintrc
@@ -1,5 +1,7 @@
 {
+    "parser": "@typescript-eslint/parser",
     "extends": "@gravity-ui/eslint-config/client",
+    "plugins": ["@typescript-eslint"],
     "rules": {
         "react/jsx-uses-react": "off",
         "react/react-in-jsx-scope": "off",
diff --git a/src/containers/Heatmap/Heatmap.tsx b/src/containers/Heatmap/Heatmap.tsx
@@ -4,13 +4,14 @@ import cn from 'bem-cn-lite';
 
 import {Checkbox, Select} from '@gravity-ui/uikit';
 
+import type {IHeatmapMetricValue} from '../../types/store/heatmap';
 import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {formatNumber} from '../../utils';
-import {prepareQueryError} from '../../utils/query';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+
 import {Loader} from '../../components/Loader';
-import type {IHeatmapMetricValue} from '../../types/store/heatmap';
+import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
@@ -196,7 +197,7 @@ export const Heatmap = ({path}: HeatmapProps) => {
     }
 
     if (error) {
-        return <div>{prepareQueryError(error)}</div>;
+        return <ResponseError error={error} />;
     }
 
     return renderContent();
diff --git a/src/containers/Tenant/Diagnostics/Describe/Describe.tsx b/src/containers/Tenant/Diagnostics/Describe/Describe.tsx
@@ -6,8 +6,8 @@ import JSONTree from 'react-json-inspector';
 import 'react-json-inspector/json-inspector.css';
 
 import {Loader} from '../../../../components/Loader';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
 
-import {prepareQueryError} from '../../../../utils/query';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {
     getDescribe,
@@ -86,7 +86,7 @@ const Describe = ({tenant, type}: IDescribeProps) => {
     }
 
     if (error) {
-        return <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;
+        return <ResponseError error={error} className={b('message-container')} />;
     }
 
     if (!loading && !preparedDescribeData) {
diff --git a/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.js b/src/containers/Tenant/Diagnostics/HotKeys/HotKeys.js
@@ -5,10 +5,10 @@ import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@gravity-ui/react-data-table';
 
 import {Icon} from '../../../../components/Icon';
+import {ResponseError} from '../../../../components/Errors/ResponseError';
 
 import {AutoFetcher} from '../../../../utils/autofetcher';
 import {getHotKeys, setHotKeysOptions} from '../../../../store/reducers/hotKeys';
-import {prepareQueryError} from '../../../../utils/query';
 
 import {isColumnEntityType, isTableType} from '../../utils/schema';
 
@@ -86,7 +86,7 @@ function HotKeys({
                 sortable: false,
                 align: DataTable.RIGHT,
             },
-            ...keyColumnsIds?.map((col, index) => ({
+            ...keyColumnsIds.map((col, index) => ({
                 name: col,
                 header: (
                     <div className={b('primary-key-column')}>
@@ -107,7 +107,7 @@ function HotKeys({
 
     const renderContent = () => {
         if (error) {
-            return prepareQueryError(error);
+            return <ResponseError error={error} />;
         }
         return data !== null ? (
             <div className={b('table-content')}>
diff --git a/src/containers/Tenant/Query/Issues/Issues.tsx b/src/containers/Tenant/Query/Issues/Issues.tsx
@@ -4,33 +4,31 @@ import cn from 'bem-cn-lite';
 import {Button, Icon, ArrowToggle} from '@gravity-ui/uikit';
 import ShortyString from '../../../../components/ShortyString/ShortyString';
 
-import {IssueType, SEVERITY, getSeverity} from './models';
+import type {ErrorResponse, IssueMessage} from '../../../../types/api/query';
 
 import fatalIcon from '../../../../assets/icons/circle-xmark.svg';
 import errorIcon from '../../../../assets/icons/triangle-exclamation.svg';
 import warningIcon from '../../../../assets/icons/circle-exclamation.svg';
 import infoIcon from '../../../../assets/icons/circle-info.svg';
 
+import {SEVERITY, getSeverity} from './models';
+
 import './Issues.scss';
 
 const blockWrapper = cn('kv-result-issues');
 const blockIssues = cn('kv-issues');
 const blockIssue = cn('kv-issue');
 
-type DataIssues = {
-    error: IssueType;
-    issues?: IssueType[];
-};
-
 interface ResultIssuesProps {
-    data: DataIssues | string;
+    data: ErrorResponse | string;
     className: string;
 }
 
 export default function ResultIssues({data, className}: ResultIssuesProps) {
     const [showIssues, setShowIssues] = React.useState(false);
 
-    const hasIssues = typeof data === 'string' ? false : Array.isArray(data?.issues);
+    const issues = typeof data === 'string' ? undefined : data?.issues;
+    const hasIssues = Array.isArray(issues) && issues.length > 0;
 
     const renderTitle = () => {
         let content;
@@ -61,37 +59,37 @@ export default function ResultIssues({data, className}: ResultIssuesProps) {
                     </Button>
                 )}
             </div>
-            {hasIssues && showIssues && (
-                <Issues issues={(data as DataIssues).issues!} className={className} />
-            )}
+            {hasIssues && showIssues && <Issues issues={issues} className={className} />}
         </div>
     );
 }
 
 interface IssuesProps {
     className?: string;
-    issues: IssueType[];
+    issues: IssueMessage[] | null | undefined;
 }
 export function Issues({issues, className}: IssuesProps) {
-    const mostSevereIssue = issues.reduce((result, issue) => {
+    const mostSevereIssue = issues?.reduce((result, issue) => {
         const severity = issue.severity ?? 10;
         return Math.min(result, severity);
     }, 10);
     return (
         <div className={blockIssues(null, className)}>
-            {issues.map((issue, index) => (
+            {issues?.map((issue, index) => (
                 <Issue key={index} issue={issue} expanded={issue === mostSevereIssue} />
             ))}
         </div>
     );
 }
 
-function Issue({issue, level = 0}: {issue: IssueType; expanded?: boolean; level?: number}) {
+function Issue({issue, level = 0}: {issue: IssueMessage; expanded?: boolean; level?: number}) {
     const [isExpand, setIsExpand] = React.useState(true);
     const severity = getSeverity(issue.severity);
-    const hasIssues = Array.isArray(issue.issues) && issue.issues.length > 0;
     const position = getIssuePosition(issue);
 
+    const issues = issue.issues;
+    const hasIssues = Array.isArray(issues) && issues.length > 0;
+
     const arrowDirection = isExpand ? 'bottom' : 'right';
 
     return (
@@ -123,18 +121,20 @@ function Issue({issue, level = 0}: {issue: IssueType; expanded?: boolean; level?
                         <ShortyString value={issue.message} expandLabel={'Show full message'} />
                     </div>
                 </span>
-                {issue.code ? <span className={blockIssue('code')}>Code: {issue.code}</span> : null}
+                {issue.issue_code ? (
+                    <span className={blockIssue('code')}>Code: {issue.issue_code}</span>
+                ) : null}
             </div>
             {hasIssues && isExpand && (
                 <div className={blockIssue('issues')}>
-                    <IssueList issues={issue.issues!} level={level + 1} expanded={isExpand} />
+                    <IssueList issues={issues} level={level + 1} expanded={isExpand} />
                 </div>
             )}
         </div>
     );
 }
 
-function IssueList(props: {issues: IssueType[]; expanded: boolean; level: number}) {
+function IssueList(props: {issues: IssueMessage[]; expanded: boolean; level: number}) {
     const {issues, level, expanded} = props;
     return (
         <div className={blockIssue('list')}>
@@ -145,7 +145,7 @@ function IssueList(props: {issues: IssueType[]; expanded: boolean; level: number
     );
 }
 
-const severityIcons: Record<SEVERITY, any> = {
+const severityIcons: Record<SEVERITY, string> = {
     S_INFO: infoIcon,
     S_WARNING: warningIcon,
     S_ERROR: errorIcon,
@@ -162,10 +162,14 @@ function IssueSeverity({severity}: {severity: SEVERITY}) {
     );
 }
 
-function getIssuePosition(issue: IssueType) {
-    const {file, position} = issue;
+function getIssuePosition(issue: IssueMessage) {
+    const {position = {}} = issue;
+
     if (!position) {
         return false;
     }
-    return `${file ? 'file:' : ''}${position.row}:${position.column}`;
+
+    const {file, row, column} = position;
+
+    return `${file ? 'file:' : ''}${row}:${column}`;
 }
diff --git a/src/containers/Tenant/Query/Issues/models.ts b/src/containers/Tenant/Query/Issues/models.ts
@@ -1,14 +1,3 @@
-export interface IssueType {
-    file?: string;
-    position?: {row: number; column: number};
-    // eslint-disable-next-line camelcase
-    end_position?: {row: number; column: number};
-    message?: string;
-    code?: number;
-    severity?: number;
-    issues?: IssueType[];
-}
-
 export const SEVERITY_LIST = ['S_FATAL', 'S_ERROR', 'S_WARNING', 'S_INFO'] as const;
 
 export type SEVERITY = typeof SEVERITY_LIST[number];
diff --git a/src/store/reducers/preview.ts b/src/store/reducers/preview.ts
@@ -1,7 +1,7 @@
 import '../../services/api';
 
-import type {ErrorResponse, ExecuteActions} from '../../types/api/query';
-import type {IQueryResult} from '../../types/store/query';
+import type {ExecuteActions} from '../../types/api/query';
+import type {IQueryResult, QueryErrorResponse} from '../../types/store/query';
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
 import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
@@ -16,7 +16,9 @@ const initialState = {
 
 const preview = (
     state = initialState,
-    action: ApiRequestAction<typeof SEND_QUERY, IQueryResult, ErrorResponse> | ReturnType<typeof setQueryOptions>,
+    action:
+        | ApiRequestAction<typeof SEND_QUERY, IQueryResult, QueryErrorResponse>
+        | ReturnType<typeof setQueryOptions>,
 ) => {
     switch (action.type) {
         case SEND_QUERY.REQUEST: {
@@ -57,7 +59,7 @@ interface SendQueryParams {
     query?: string;
     database?: string;
     action?: ExecuteActions;
-};
+}
 
 export const sendQuery = ({query, database, action}: SendQueryParams) => {
     return createApiRequest({
diff --git a/src/types/api/error.ts b/src/types/api/error.ts
@@ -1,5 +1,5 @@
-export interface IResponseError {
-    data?: unknown;
+export interface IResponseError<T = unknown> {
+    data?: T;
     status?: number;
     statusText?: string;
     isCancelled?: boolean;
diff --git a/src/types/api/query.ts b/src/types/api/query.ts
@@ -205,7 +205,7 @@ export type Actions = ExecuteActions | ExplainActions;
 
 export interface ErrorResponse {
     error?: IssueMessage;
-    issues?: IssueMessage[];
+    issues?: IssueMessage[] | null;
 }
 
 // ==== Explain Responses ====
diff --git a/src/types/store/executeQuery.ts b/src/types/store/executeQuery.ts
@@ -9,9 +9,8 @@ import {
     MONACO_HOT_KEY_ACTIONS,
 } from '../../store/reducers/executeQuery';
 import type {ApiRequestAction} from '../../store/utils';
-import type {ErrorResponse} from '../api/query';
 import type {ValueOf} from '../common';
-import type {IQueryResult, QueryError} from './query';
+import type {IQueryResult, QueryError, QueryErrorResponse} from './query';
 
 export type MonacoHotKeyAction = ValueOf<typeof MONACO_HOT_KEY_ACTIONS>;
 
@@ -26,7 +25,7 @@ export interface ExecuteQueryState {
     tenantPath?: string;
     data?: IQueryResult;
     stats?: IQueryResult['stats'];
-    error?: string | ErrorResponse;
+    error?: string | QueryErrorResponse;
 }
 
 type SendQueryAction = ApiRequestAction<typeof SEND_QUERY, IQueryResult, QueryError>;
diff --git a/src/types/store/executeTopQueries.ts b/src/types/store/executeTopQueries.ts
@@ -1,7 +1,10 @@
-import {FETCH_TOP_QUERIES, setTopQueriesState, setTopQueriesFilters} from '../../store/reducers/executeTopQueries';
+import {
+    FETCH_TOP_QUERIES,
+    setTopQueriesState,
+    setTopQueriesFilters,
+} from '../../store/reducers/executeTopQueries';
 import type {ApiRequestAction} from '../../store/utils';
-import type {IResponseError} from '../api/error';
-import type {IQueryResult} from './query';
+import type {IQueryResult, QueryErrorResponse} from './query';
 
 export interface ITopQueriesFilters {
     /** ms from epoch */
@@ -15,12 +18,12 @@ export interface ITopQueriesState {
     loading: boolean;
     wasLoaded: boolean;
     data?: IQueryResult;
-    error?: IResponseError;
+    error?: QueryErrorResponse;
     filters: ITopQueriesFilters;
 }
 
 export type ITopQueriesAction =
-    | ApiRequestAction<typeof FETCH_TOP_QUERIES, IQueryResult, IResponseError>
+    | ApiRequestAction<typeof FETCH_TOP_QUERIES, IQueryResult, QueryErrorResponse>
     | ReturnType<typeof setTopQueriesState>
     | ReturnType<typeof setTopQueriesFilters>;
 
diff --git a/src/types/store/explainQuery.ts b/src/types/store/explainQuery.ts
@@ -2,8 +2,8 @@ import type {ExplainPlanNodeData, GraphNode, Link} from '@gravity-ui/paranoid';
 
 import {GET_EXPLAIN_QUERY, GET_EXPLAIN_QUERY_AST} from '../../store/reducers/explainQuery';
 import type {ApiRequestAction} from '../../store/utils';
-import type {PlanTable, ErrorResponse, QueryPlan, ScriptPlan} from '../api/query';
-import type {IQueryResult, QueryError} from './query';
+import type {PlanTable, QueryPlan, ScriptPlan} from '../api/query';
+import type {IQueryResult, QueryError, QueryErrorResponse} from './query';
 
 export interface PreparedExplainResponse {
     plan?: {
@@ -20,8 +20,8 @@ export interface ExplainQueryState {
     loading: boolean;
     data?: PreparedExplainResponse['plan'];
     dataAst?: PreparedExplainResponse['ast'];
-    error?: string | ErrorResponse;
-    errorAst?: string | ErrorResponse;
+    error?: string | QueryErrorResponse;
+    errorAst?: string | QueryErrorResponse;
 }
 
 type GetExplainQueryAstAction = ApiRequestAction<
diff --git a/src/types/store/query.ts b/src/types/store/query.ts
@@ -1,10 +1,10 @@
 import {QUERY_ACTIONS, QUERY_MODES} from '../../utils/query';
 
-import type {NetworkError} from '../api/error';
+import type {IResponseError, NetworkError} from '../api/error';
 import type {
     KeyValueRow,
     ColumnType,
-    ErrorResponse,
+    ErrorResponse as QueryErrorResponseData,
     ScriptPlan,
     QueryPlan,
     TKqpStatsQuery,
@@ -24,7 +24,8 @@ export interface QueryRequestParams {
     query: string;
 }
 
-export type QueryError = NetworkError | ErrorResponse;
+export type QueryErrorResponse = IResponseError<QueryErrorResponseData>;
+export type QueryError = NetworkError | QueryErrorResponse;
 
 export type QueryAction = ValueOf<typeof QUERY_ACTIONS>;
 export type QueryMode = ValueOf<typeof QUERY_MODES>;
diff --git a/src/types/store/shardsWorkload.ts b/src/types/store/shardsWorkload.ts
diff --git a/src/utils/error.ts b/src/utils/error.ts
diff --git a/src/utils/query.ts b/src/utils/query.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`{`
	`2`	`+ "parser": "@typescript-eslint/parser",`
`2`	`3`	`"extends": "@gravity-ui/eslint-config/client",`
	`4`	`+ "plugins": ["@typescript-eslint"],`
`3`	`5`	`"rules": {`
`4`	`6`	`"react/jsx-uses-react": "off",`
`5`	`7`	`"react/react-in-jsx-scope": "off",`
Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,8 @@ import JSONTree from 'react-json-inspector';`
`6`	`6`	`import 'react-json-inspector/json-inspector.css';`
`7`	`7`
`8`	`8`	`import {Loader} from '../../../../components/Loader';`
	`9`	`+import {ResponseError} from '../../../../components/Errors/ResponseError';`
`9`	`10`
`10`		`-import {prepareQueryError} from '../../../../utils/query';`
`11`	`11`	`import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';`
`12`	`12`	`import {`
`13`	`13`	`getDescribe,`
`@@ -86,7 +86,7 @@ const Describe = ({tenant, type}: IDescribeProps) => {`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`if (error) {`
`89`		`- return <div className={b('message-container', 'error')}>{prepareQueryError(error)}</div>;`
	`89`	`+ return <ResponseError error={error} className={b('message-container')} />;`
`90`	`90`	`}`
`91`	`91`
`92`	`92`	`if (!loading && !preparedDescribeData) {`
Original file line number	Diff line number	Diff line change
`@@ -205,7 +205,7 @@ export type Actions = ExecuteActions \| ExplainActions;`
`205`	`205`
`206`	`206`	`export interface ErrorResponse {`
`207`	`207`	`error?: IssueMessage;`
`208`		`- issues?: IssueMessage[];`
	`208`	`+ issues?: IssueMessage[] \| null;`
`209`	`209`	`}`
`210`	`210`
`211`	`211`	`// ==== Explain Responses ====`