This is an automated email from the ASF dual-hosted git repository.
xiangfu pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/pinot.git
The following commit(s) were added to refs/heads/master by this push:
new af8521cb03 UI: fix sql exception display (#11513)
af8521cb03 is described below
commit af8521cb03d132c172a7923109fc6a28ae2c0acf
Author: Jayesh Choudhary <[email protected]>
AuthorDate: Tue Sep 5 18:47:49 2023 +0530
UI: fix sql exception display (#11513)
* UI: fix sql exception display
* fix styling
---
.../src/main/resources/app/interfaces/types.d.ts | 5 ++++
.../src/main/resources/app/pages/Query.tsx | 28 ++++++++++++++++------
.../main/resources/app/utils/PinotMethodUtils.ts | 14 ++++-------
3 files changed, 31 insertions(+), 16 deletions(-)
diff --git a/pinot-controller/src/main/resources/app/interfaces/types.d.ts
b/pinot-controller/src/main/resources/app/interfaces/types.d.ts
index 1bbc3fee21..3025166c9b 100644
--- a/pinot-controller/src/main/resources/app/interfaces/types.d.ts
+++ b/pinot-controller/src/main/resources/app/interfaces/types.d.ts
@@ -257,4 +257,9 @@ declare module 'Models' {
REALTIME = "realtime",
OFFLINE = "offline"
}
+
+ export interface SqlException {
+ errorCode: number,
+ message: string
+ }
}
diff --git a/pinot-controller/src/main/resources/app/pages/Query.tsx
b/pinot-controller/src/main/resources/app/pages/Query.tsx
index c75e02fe09..55e7ac2944 100644
--- a/pinot-controller/src/main/resources/app/pages/Query.tsx
+++ b/pinot-controller/src/main/resources/app/pages/Query.tsx
@@ -20,10 +20,10 @@
import React, { useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import { Grid, Checkbox, Button, FormControl, Input, InputLabel } from
'@material-ui/core';
+import { Grid, Checkbox, Button, FormControl, Input, InputLabel, Box } from
'@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import FileCopyIcon from '@material-ui/icons/FileCopy';
-import { TableData } from 'Models';
+import { SqlException, TableData } from 'Models';
import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
@@ -88,7 +88,8 @@ const useStyles = makeStyles((theme) => ({
paddingBottom: '48px',
},
sqlError: {
- whiteSpace: 'pre-wrap',
+ whiteSpace: 'pre',
+ overflow: "auto"
},
timeoutControl: {
bottom: 10
@@ -183,7 +184,7 @@ const QueryPage = () => {
const [outputResult, setOutputResult] = useState('');
- const [resultError, setResultError] = useState('');
+ const [resultError, setResultError] = useState<SqlException[] | string>([]);
const [queryStats, setQueryStats] = useState<TableData>({
columns: [],
@@ -299,7 +300,7 @@ const QueryPage = () => {
}
const results = await PinotMethodUtils.getQueryResults(params);
- setResultError(results.error || '');
+ setResultError(results.exceptions || []);
setResultData(results.result || { columns: [], records: [] });
setQueryStats(results.queryStats || { columns: responseStatCols, records:
[] });
setOutputResult(JSON.stringify(results.data, null, 2) || '');
@@ -499,7 +500,7 @@ const QueryPage = () => {
Tracing
</Grid>
- <Grid item xs={2}>
+ <Grid item xs={3}>
<Checkbox
name="useMSE"
color="primary"
@@ -551,11 +552,24 @@ const QueryPage = () => {
}
{/* Sql result errors */}
- {resultError && (
+ {resultError && typeof resultError === "string" && (
<Alert severity="error" className={classes.sqlError}>
{resultError}
</Alert>
)}
+
+ {resultError && typeof resultError === "object" &&
resultError.length && (
+ <>
+ {
+ resultError.map((error) => (
+ <Box style={{paddingBottom: "16px"}}>
+ <Alert className={classes.sqlError}
severity="error">{error.message}</Alert>
+ </Box>
+ ))
+ }
+ </>
+ )
+ }
<Grid item xs style={{ backgroundColor: 'white' }}>
{resultData.columns.length ? (
diff --git a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
index 0085d4ede3..b574a019bc 100644
--- a/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
+++ b/pinot-controller/src/main/resources/app/utils/PinotMethodUtils.ts
@@ -19,7 +19,7 @@
import jwtDecode from "jwt-decode";
import { get, map, each, isEqual, isArray, keys, union } from 'lodash';
-import { DataTable, SQLResult } from 'Models';
+import { DataTable, SqlException, SQLResult } from 'Models';
import moment from 'moment';
import {
getTenants,
@@ -267,19 +267,15 @@ const getQueryResults = (params) => {
return getQueryResult(params).then(({ data }) => {
let queryResponse = getAsObject(data);
- let errorStr = '';
+ let exceptions: SqlException[] | string = [];
let dataArray = [];
let columnList = [];
// if sql api throws error, handle here
if(typeof queryResponse === 'string'){
- errorStr = queryResponse;
+ exceptions = queryResponse;
}
if (queryResponse && queryResponse.exceptions &&
queryResponse.exceptions.length) {
- try{
- errorStr = JSON.stringify(queryResponse.exceptions, null, 2);
- } catch {
- errorStr = "";
- }
+ exceptions = queryResponse.exceptions as SqlException[];
}
if (queryResponse.resultTable?.dataSchema?.columnNames?.length) {
columnList = queryResponse.resultTable.dataSchema.columnNames;
@@ -311,7 +307,7 @@ const getQueryResults = (params) => {
];
return {
- error: errorStr,
+ exceptions: exceptions,
result: {
columns: columnList,
records: dataArray,
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
