diff --git a/js/src/components/query/QueryView.tsx b/js/src/components/query/QueryView.tsx
index 94138dcf..e052f102 100644
--- a/js/src/components/query/QueryView.tsx
+++ b/js/src/components/query/QueryView.tsx
@@ -1,17 +1,25 @@
import "react-data-grid/lib/styles.css";
-import React, { useState, useEffect, useCallback, useMemo } from "react";
-import DataGrid, { ColumnOrColumnGroup } from "react-data-grid";
-import axios, { AxiosError } from "axios";
-import { DataFrame, toDataGrid } from "@/components/query/query";
-import { PUBLIC_API_URL } from "../../lib/const";
-import { Box, Button, Flex, Textarea } from "@chakra-ui/react";
+import React, { useState, useCallback, useMemo } from "react";
+import DataGrid from "react-data-grid";
+import { AxiosError } from "axios";
+import { toDataGrid } from "@/components/query/query";
+import {
+ Alert,
+ AlertIcon,
+ Box,
+ Button,
+ Center,
+ Flex,
+ Spinner,
+ Textarea,
+} from "@chakra-ui/react";
import SqlEditor from "./SqlEditor";
import { useRunQuery } from "@/lib/api/runQuery";
interface QueryViewDataGridProps {
loading: boolean;
- baseError?: string;
- currentError?: string;
+ baseError?: Error | null;
+ currentError?: Error | null;
columns: any;
rows: any;
}
@@ -22,26 +30,62 @@ const QueryViewDataGrid = ({
columns,
rows,
}: QueryViewDataGridProps) => {
+ const isPartialSuccess =
+ (baseError && !currentError) || (!baseError && currentError);
+
+ const getErrorMessage = (err: Error) => {
+ if (err instanceof AxiosError) {
+ const detail = err?.response?.data?.detail;
+ if (detail) {
+ return detail;
+ } else {
+ return err?.message;
+ }
+ } else {
+ return err?.message;
+ }
+ };
+
if (loading) {
- return <>Loading...>;
+ return (
+
+
+ Loading...
+
+ );
}
if (baseError && currentError) {
- return Error: {currentError};
+ // return Error: {getErrorMessage(currentError)};
+ return (
+
+
+ Error: {getErrorMessage(currentError)}
+
+ );
}
if (columns.length === 0) {
- return No data;
+ return No data;
}
return (
-
+
+ {isPartialSuccess && (
+
+
+ {baseError && `Error[Base]: ${getErrorMessage(baseError)}`}
+ {currentError && `Error[Current]: ${getErrorMessage(currentError)}`}
+
+ )}
+
+
);
};
@@ -69,7 +113,7 @@ const QueryView = () => {
}, [queryBase, queryCurrent]);
const isFetching =
- baseQueryResult.isFetching && currentQueryResult.isFetching;
+ baseQueryResult.isFetching || currentQueryResult.isFetching;
const gridData = useMemo(() => {
if (isFetching) {
return { rows: [], columns: [] };
@@ -86,7 +130,7 @@ const QueryView = () => {