add url baser (#7585)

web-console/src/console-application.tsx

@@ -26,6 +26,7 @@ import { HashRouter, Route, Switch } from 'react-router-dom';
 import { HeaderActiveTab, HeaderBar } from './components/header-bar';
 import {Loader} from './components/loader';
 import { AppToaster } from './singletons/toaster';
+import { UrlBaser } from './singletons/url-baser';
 import {QueryManager} from './utils';
 import {DRUID_DOCS_API, DRUID_DOCS_SQL, LEGACY_COORDINATOR_CONSOLE, LEGACY_OVERLORD_CONSOLE} from './variables';
 import { DatasourcesView } from './views/datasource-view';
@@ -113,6 +114,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
 
     if (props.baseURL) {
       axios.defaults.baseURL = props.baseURL;
+      UrlBaser.baseURL = props.baseURL;
     }
     if (props.customHeaderName && props.customHeaderValue) {
       axios.defaults.headers.common[props.customHeaderName] = props.customHeaderValue;

web-console/src/singletons/url-baser.ts

@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class UrlBaser {
+  static baseURL: string = '';
+
+  static base(url: string): string {
+    if (!url.startsWith('/')) return url;
+    return UrlBaser.baseURL + url;
+  }
+}

web-console/src/views/home-view.tsx

@@ -21,6 +21,7 @@ import { IconName, IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
 import * as React from 'react';
 
+import { UrlBaser } from '../singletons/url-baser';
 import { getHeadProp, pluralIfNeeded, queryDruidSql, QueryManager } from '../utils';
 
 import './home-view.scss';
@@ -341,7 +342,7 @@ GROUP BY 1`);
 
     return <div className="home-view app-view">
       {this.renderCard({
-        href: '/status',
+        href: UrlBaser.base('/status'),
         icon: IconNames.GRAPH,
         title: 'Status',
         loading: state.statusLoading,

web-console/src/views/tasks-view.tsx

@@ -28,6 +28,7 @@ import { ViewControlBar } from '../components/view-control-bar';
 import { AsyncActionDialog } from '../dialogs/async-action-dialog';
 import { SpecDialog } from '../dialogs/spec-dialog';
 import { AppToaster } from '../singletons/toaster';
+import { UrlBaser } from '../singletons/url-baser';
 import {
   addFilter,
   booleanCustomTableFilter,
@@ -434,10 +435,10 @@ ORDER BY "rank" DESC, "created_time" DESC`);
                 <a onClick={() => this.setState({ suspendSupervisorId: id })}>Suspend</a>;
 
               return <div>
-                <a href={`/druid/indexer/v1/supervisor/${id}`} target="_blank">Payload</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/supervisor/${id}`)} target="_blank">Payload</a>&nbsp;&nbsp;&nbsp;
-                <a href={`/druid/indexer/v1/supervisor/${id}/status`} target="_blank">Status</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/supervisor/${id}/status`)} target="_blank">Status</a>&nbsp;&nbsp;&nbsp;
-                <a href={`/druid/indexer/v1/supervisor/${id}/stats`} target="_blank">Stats</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/supervisor/${id}/stats`)} target="_blank">Stats</a>&nbsp;&nbsp;&nbsp;
-                <a href={`/druid/indexer/v1/supervisor/${id}/history`} target="_blank">History</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/supervisor/${id}/history`)} target="_blank">History</a>&nbsp;&nbsp;&nbsp;
                 {suspendResume}&nbsp;&nbsp;&nbsp;
                 <a onClick={() => this.setState({ resetSupervisorId: id })}>Reset</a>&nbsp;&nbsp;&nbsp;
                 <a onClick={() => this.setState({ terminateSupervisorId: id })}>Terminate</a>
@@ -593,11 +594,11 @@ ORDER BY "rank" DESC, "created_time" DESC`);
               const id = row.value;
               const { status } = row.original;
               return <div>
-                <a href={`/druid/indexer/v1/task/${id}`} target="_blank">Payload</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/task/${id}`)} target="_blank">Payload</a>&nbsp;&nbsp;&nbsp;
-                <a href={`/druid/indexer/v1/task/${id}/status`} target="_blank">Status</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/task/${id}/status`)} target="_blank">Status</a>&nbsp;&nbsp;&nbsp;
-                <a href={`/druid/indexer/v1/task/${id}/reports`} target="_blank">Reports</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/task/${id}/reports`)} target="_blank">Reports</a>&nbsp;&nbsp;&nbsp;
-                <a href={`/druid/indexer/v1/task/${id}/log`} target="_blank">Log (all)</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/task/${id}/log`)} target="_blank">Log (all)</a>&nbsp;&nbsp;&nbsp;
-                <a href={`/druid/indexer/v1/task/${id}/log?offset=-8192`} target="_blank">Log (last 8kb)</a>&nbsp;&nbsp;&nbsp;
+                <a href={UrlBaser.base(`/druid/indexer/v1/task/${id}/log?offset=-8192`)} target="_blank">Log (last 8kb)</a>&nbsp;&nbsp;&nbsp;
                 {(status === 'RUNNING' || status === 'WAITING' || status === 'PENDING') && <a onClick={() => this.setState({ killTaskId: id })}>Kill</a>}
               </div>;
             },