Web console: better error reporting

web-console/src/components/show-log/show-log.spec.tsx

@@ -23,9 +23,7 @@ import { ShowLog } from './show-log';
 
 describe('ShowLog', () => {
   it('describe show log', () => {
-    const showLog = (
-      <ShowLog status="RUNNING" endpoint="/druid/index/test/log" downloadFilename="test" />
-    );
+    const showLog = <ShowLog tail endpoint="/druid/index/test/log" downloadFilename="test" />;
     const { container } = render(showLog);
     expect(container.firstChild).toMatchSnapshot();
   });

web-console/src/components/show-log/show-log.tsx

@@ -39,7 +39,7 @@ export interface ShowLogProps {
   endpoint: string;
   downloadFilename?: string;
   tailOffset?: number;
-  status?: string;
+  tail?: boolean;
 }
 
 export interface ShowLogState {
@@ -85,9 +85,9 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
   }
 
   componentDidMount(): void {
-    const { status } = this.props;
+    const { tail } = this.props;
 
-    if (status === 'RUNNING') {
+    if (tail) {
       this.addTailer();
     }
 
@@ -138,13 +138,13 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
   };
 
   render(): JSX.Element {
-    const { endpoint, downloadFilename, status } = this.props;
+    const { endpoint, downloadFilename, tail } = this.props;
     const { logState } = this.state;
 
     return (
       <div className="show-log">
         <div className="top-actions">
-          {status === 'RUNNING' && (
+          {tail && (
             <Switch
               className="tail-log"
               label="Tail log"

web-console/src/dialogs/history-dialog/history-dialog.scss

@@ -22,13 +22,17 @@
   &.#{$bp-ns}-dialog {
     width: 75%;
     top: 5%;
-    height: 75vh;
   }
 
   .#{$bp-ns}-tabs {
     position: relative;
-    height: 100%;
     width: 100%;
+    height: 75vh;
+
+    .#{$bp-ns}-tab-list {
+      max-width: 300px;
+      overflow: auto;
+    }
 
     .#{$bp-ns}-tab-panel {
       flex: 1;

web-console/src/dialogs/snitch-dialog/snitch-dialog.tsx

@@ -112,12 +112,11 @@ export class SnitchDialog extends React.PureComponent<SnitchDialogProps, SnitchD
   }
 
   renderHistoryDialog(): JSX.Element | null {
-    const { className, title, historyRecords } = this.props;
+    const { title, historyRecords } = this.props;
     if (!historyRecords) return null;
 
     return (
       <HistoryDialog
-        className={className}
         title={title + ' history'}
         historyRecords={historyRecords}
         onBack={this.back}

web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx

@@ -28,7 +28,7 @@ interface TaskTableActionDialogProps {
   taskId: string;
   actions: BasicAction[];
   onClose: () => void;
-  status?: string;
+  status: string;
 }
 
 export const TaskTableActionDialog = React.memo(function TaskTableActionDialog(
@@ -95,7 +95,7 @@ export const TaskTableActionDialog = React.memo(function TaskTableActionDialog(
       )}
       {activeTab === 'log' && (
         <ShowLog
-          status={status}
+          tail={status === 'RUNNING'}
           endpoint={`${taskEndpointBase}/log`}
           downloadFilename={`task-log-${taskId}.log`}
           tailOffset={16000}

web-console/src/singletons/api.ts

@@ -16,14 +16,33 @@
  * limitations under the License.
  */
 
-import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
 import * as JSONBig from 'json-bigint-native';
 
 export class Api {
   static instance: AxiosInstance;
 
   static initialize(config?: AxiosRequestConfig): void {
     Api.instance = axios.create(config);
+
+    // Intercept the request and if we get an error (status code > 2xx) and we have a "message" in the response then
+    // show it as it will be more informative than the default "Request failed with status code xxx" message.
+    Api.instance.interceptors.response.use(
+      resp => resp,
+      (error: AxiosError) => {
+        const responseData = error.response?.data;
+        const message = responseData?.message;
+        if (typeof message === 'string') {
+          return Promise.reject(new Error(message));
+        }
+
+        if (error.config.method?.toLowerCase() === 'get' && typeof responseData === 'string') {
+          return Promise.reject(new Error(responseData));
+        }
+
+        return Promise.reject(error);
+      },
+    );
   }
 
   static getDefaultConfig(): AxiosRequestConfig {

web-console/src/views/load-data-view/load-data-view.tsx

@@ -1243,7 +1243,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           )}
           {inputQueryState.isLoading() && <Loader />}
           {inputQueryState.error && (
-            <CenterMessage>{`Error: ${inputQueryState.getErrorMessage()}`}</CenterMessage>
+            <CenterMessage>{inputQueryState.getErrorMessage()}</CenterMessage>
           )}
         </>
       );
@@ -1479,7 +1479,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           )}
           {parserQueryState.isLoading() && <Loader />}
           {parserQueryState.error && (
-            <CenterMessage>{`Error: ${parserQueryState.getErrorMessage()}`}</CenterMessage>
+            <CenterMessage>{parserQueryState.getErrorMessage()}</CenterMessage>
           )}
         </div>
       );
@@ -1721,7 +1721,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           )}
           {timestampQueryState.isLoading() && <Loader />}
           {timestampQueryState.error && (
-            <CenterMessage>{`Error: ${timestampQueryState.getErrorMessage()}`}</CenterMessage>
+            <CenterMessage>{timestampQueryState.getErrorMessage()}</CenterMessage>
           )}
         </div>
       );
@@ -1900,7 +1900,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           )}
           {transformQueryState.isLoading() && <Loader />}
           {transformQueryState.error && (
-            <CenterMessage>{`Error: ${transformQueryState.getErrorMessage()}`}</CenterMessage>
+            <CenterMessage>{transformQueryState.getErrorMessage()}</CenterMessage>
           )}
         </div>
       );
@@ -2112,7 +2112,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           )}
           {filterQueryState.isLoading() && <Loader />}
           {filterQueryState.error && (
-            <CenterMessage>{`Error: ${filterQueryState.getErrorMessage()}`}</CenterMessage>
+            <CenterMessage>{filterQueryState.getErrorMessage()}</CenterMessage>
           )}
         </div>
       );
@@ -2297,7 +2297,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           )}
           {schemaQueryState.isLoading() && <Loader />}
           {schemaQueryState.error && (
-            <CenterMessage>{`Error: ${schemaQueryState.getErrorMessage()}`}</CenterMessage>
+            <CenterMessage>{schemaQueryState.getErrorMessage()}</CenterMessage>
           )}
         </div>
       );