From e4342531000863b6c3e9b1834f7da01b7a6c1caa Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Tue, 16 Apr 2019 16:26:37 -0700
Subject: [PATCH 01/13] Added no sql mode

---
 web-console/src/console-application.tsx   |  15 +--
 web-console/src/views/datasource-view.tsx |  43 ++++++--
 web-console/src/views/home-view.tsx       |  84 ++++++++++------
 web-console/src/views/segments-view.tsx   | 113 ++++++++++++++++++----
 web-console/src/views/servers-view.tsx    |  61 ++++++------
 web-console/src/views/tasks-view.tsx      |  48 +++++++--
 6 files changed, 266 insertions(+), 98 deletions(-)

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 52aa9b116325..95461e9d87ed 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -45,6 +45,7 @@ export interface ConsoleApplicationProps extends React.Props<any> {
 
 export interface ConsoleApplicationState {
   aboutDialogOpen: boolean;
+  noSqlMode: boolean;
 }
 
 export class ConsoleApplication extends React.Component<ConsoleApplicationProps, ConsoleApplicationState> {
@@ -95,7 +96,8 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
   constructor(props: ConsoleApplicationProps, context: any) {
     super(props, context);
     this.state = {
-      aboutDialogOpen: false
+      aboutDialogOpen: false,
+      noSqlMode: false
     };
 
     if (props.baseURL) {
@@ -147,6 +149,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
 
   render() {
     const { hideLegacy } = this.props;
+    const { noSqlMode } = this.state;
 
     const wrapInViewContainer = (active: HeaderActiveTab, el: JSX.Element, scrollable = false) => {
       return <>
@@ -161,25 +164,25 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
           <Route
             path="/datasources"
             component={() => {
-              return wrapInViewContainer('datasources', <DatasourcesView goToSql={this.goToSql} goToSegments={this.goToSegments}/>);
+              return wrapInViewContainer('datasources', <DatasourcesView goToSql={this.goToSql} goToSegments={this.goToSegments} noSqlMode={noSqlMode}/>);
             }}
           />
           <Route
             path="/segments"
             component={() => {
-              return wrapInViewContainer('segments', <SegmentsView datasource={this.datasource} onlyUnavailable={this.onlyUnavailable} goToSql={this.goToSql}/>);
+              return wrapInViewContainer('segments', <SegmentsView datasource={this.datasource} onlyUnavailable={this.onlyUnavailable} goToSql={this.goToSql} noSqlMode={noSqlMode}/>);
             }}
           />
           <Route
             path="/tasks"
             component={() => {
-              return wrapInViewContainer('tasks', <TasksView taskId={this.taskId} goToSql={this.goToSql} goToMiddleManager={this.goToMiddleManager}/>, true);
+              return wrapInViewContainer('tasks', <TasksView taskId={this.taskId} goToSql={this.goToSql} goToMiddleManager={this.goToMiddleManager} noSqlMode={noSqlMode}/>, true);
             }}
           />
           <Route
             path="/servers"
             component={() => {
-              return wrapInViewContainer('servers', <ServersView middleManager={this.middleManager} goToSql={this.goToSql} goToTask={this.goToTask}/>, true);
+              return wrapInViewContainer('servers', <ServersView middleManager={this.middleManager} goToSql={this.goToSql} goToTask={this.goToTask} noSqlMode={noSqlMode}/>, true);
             }}
           />
           <Route
@@ -196,7 +199,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
           />
           <Route
             component={() => {
-              return wrapInViewContainer(null, <HomeView/>);
+              return wrapInViewContainer(null, <HomeView noSqlMode={noSqlMode}/>);
             }}
           />
         </Switch>
diff --git a/web-console/src/views/datasource-view.tsx b/web-console/src/views/datasource-view.tsx
index 2b13b9652070..70cd1dc6a55f 100644
--- a/web-console/src/views/datasource-view.tsx
+++ b/web-console/src/views/datasource-view.tsx
@@ -44,10 +44,12 @@ import {
 import './datasource-view.scss';
 
 const tableColumns: string[] = ['Datasource', 'Availability', 'Retention', 'Compaction', 'Size', 'Num rows', 'Actions'];
+const tableColumnsNoSql: string[] = ['Datasource', 'Availability', 'Retention', 'Compaction', 'Size', 'Actions'];
 
 export interface DatasourcesViewProps extends React.Props<any> {
   goToSql: (initSql: string) => void;
   goToSegments: (datasource: string, onlyUnavailable?: boolean) => void;
+  noSqlMode: boolean;
 }
 
 interface Datasource {
@@ -116,9 +118,27 @@ export class DatasourcesView extends React.Component<DatasourcesViewProps, Datas
   }
 
   componentDidMount(): void {
+    const { noSqlMode } = this.props;
+
     this.datasourceQueryManager = new QueryManager({
       processQuery: async (query: string) => {
-        const datasources: any[] = await queryDruidSql({ query });
+        let datasources: any[];
+        if (!noSqlMode) {
+          datasources = await queryDruidSql({ query });
+        } else {
+          const datasourcesResp = await axios.get('/druid/coordinator/v1/datasources?simple');
+          const loadstatusResp = await axios.get('/druid/coordinator/v1/loadstatus?simple');
+          const loadstatus = loadstatusResp.data;
+          datasources = datasourcesResp.data.map((d: any) => {
+            return {
+              datasource: d.name,
+              num_available_segments: d.properties.segments.count,
+              size: d.properties.segments.size,
+              num_segments: d.properties.segments.count + loadstatus[d.name]
+            };
+          });
+        }
+
         const seen = countBy(datasources, (x: any) => x.datasource);
 
         const disabledResp = await axios.get('/druid/coordinator/v1/metadata/datasources?includeDisabled');
@@ -354,7 +374,7 @@ GROUP BY 1`);
   }
 
   renderDatasourceTable() {
-    const { goToSegments } = this.props;
+    const { goToSegments, noSqlMode } = this.props;
     const { datasources, defaultRules, datasourcesLoading, datasourcesError, datasourcesFilter, showDisabled } = this.state;
     const { tableColumnSelectionHandler } = this;
     let data = datasources || [];
@@ -482,7 +502,7 @@ GROUP BY 1`);
             filterable: false,
             width: 100,
             Cell: (row) => formatNumber(row.value),
-            show: tableColumnSelectionHandler.showColumn('Num rows')
+            show: !noSqlMode && tableColumnSelectionHandler.showColumn('Num rows')
           },
           {
             Header: 'Actions',
@@ -519,7 +539,7 @@ GROUP BY 1`);
   }
 
   render() {
-    const { goToSql } = this.props;
+    const { goToSql, noSqlMode } = this.props;
     const { showDisabled } = this.state;
     const { tableColumnSelectionHandler } = this;
 
@@ -530,18 +550,21 @@ GROUP BY 1`);
           text="Refresh"
           onClick={() => this.datasourceQueryManager.rerunLastQuery()}
         />
-        <Button
-          icon={IconNames.APPLICATION}
-          text="Go to SQL"
-          onClick={() => goToSql(this.datasourceQueryManager.getLastQuery())}
-        />
+        {
+          !noSqlMode &&
+          <Button
+            icon={IconNames.APPLICATION}
+            text="Go to SQL"
+            onClick={() => goToSql(this.datasourceQueryManager.getLastQuery())}
+          />
+        }
         <Switch
           checked={showDisabled}
           label="Show disabled"
           onChange={() => this.setState({ showDisabled: !showDisabled })}
         />
         <TableColumnSelection
-          columns={tableColumns}
+          columns={noSqlMode ? tableColumnsNoSql : tableColumns}
           onChange={(column) => tableColumnSelectionHandler.changeTableColumnSelection(column)}
           tableColumnsHidden={tableColumnSelectionHandler.hiddenColumns}
         />
diff --git a/web-console/src/views/home-view.tsx b/web-console/src/views/home-view.tsx
index 303096e855d6..f1c07c756e4f 100644
--- a/web-console/src/views/home-view.tsx
+++ b/web-console/src/views/home-view.tsx
@@ -36,6 +36,7 @@ export interface CardOptions {
 }
 
 export interface HomeViewProps extends React.Props<any> {
+  noSqlMode: boolean;
 }
 
 export interface HomeViewState {
@@ -110,6 +111,8 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
   }
 
   componentDidMount(): void {
+    const { noSqlMode } = this.props;
+
     this.statusQueryManager = new QueryManager({
       processQuery: async (query) => {
         const statusResp = await axios.get('/status');
@@ -130,7 +133,13 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
 
     this.datasourceQueryManager = new QueryManager({
       processQuery: async (query) => {
-        const datasources = await queryDruidSql({ query });
+        let datasources: string[];
+        if (!noSqlMode) {
+          datasources = await queryDruidSql({ query });
+        } else {
+          const datasourcesResp = await axios.get('/druid/coordinator/v1/datasources');
+          datasources = datasourcesResp.data;
+        }
         return datasources.length;
       },
       onStateChange: ({ result, loading, error }) => {
@@ -148,8 +157,26 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
 
     this.segmentQueryManager = new QueryManager({
       processQuery: async (query) => {
-        const segments = await queryDruidSql({ query });
-        return getHeadProp(segments, 'count') || 0;
+        if (!noSqlMode) {
+          const segments = await queryDruidSql({ query });
+          return getHeadProp(segments, 'count') || 0;
+        } else {
+
+          const loadstatusResp = await axios.get('/druid/coordinator/v1/loadstatus?simple');
+          const loadstatus = loadstatusResp.data;
+          const unavailableSegmentNum = Object.keys(loadstatus).reduce((sum, key) => {
+            return sum + loadstatus[key];
+          }, 0);
+
+          const datasourcesMetaResp = await axios.get('/druid/coordinator/v1/datasources?simple');
+          const datasourcesMeta = datasourcesMetaResp.data;
+          const availableSegmentNum = datasourcesMeta.reduce((sum: number, curr: any) => {
+            return sum + curr.properties.segments.count;
+          }, 0);
+
+          return availableSegmentNum + unavailableSegmentNum;
+        }
+
       },
       onStateChange: ({ result, loading, error }) => {
         this.setState({
@@ -160,33 +187,31 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
       }
     });
 
-    this.segmentQueryManager.runQuery(`SELECT COUNT(*) as "count" FROM sys.segments`);
+    this.segmentQueryManager.runQuery(`SELECT COUNT (*) as "count" FROM sys.segments`);
 
     // -------------------------
 
     this.taskQueryManager = new QueryManager({
       processQuery: async (query) => {
-        const taskCountsFromSql = await queryDruidSql({ query });
-        const taskCounts = {
-          successTaskCount: 0,
-          failedTaskCount: 0,
-          runningTaskCount: 0,
-          waitingTaskCount: 0,
-          pendingTaskCount: 0
-        };
-        for (const dataStatus of taskCountsFromSql) {
-          if (dataStatus.status === 'SUCCESS') {
-            taskCounts.successTaskCount = dataStatus.count;
-          } else if (dataStatus.status === 'FAILED') {
-            taskCounts.failedTaskCount = dataStatus.count;
-          } else if (dataStatus.status === 'RUNNING') {
-            taskCounts.runningTaskCount = dataStatus.count;
-          } else if (dataStatus.status === 'WAITING') {
-            taskCounts.waitingTaskCount = dataStatus.count;
-          } else {
-            taskCounts.pendingTaskCount = dataStatus.count;
-          }
+        let taskCountsFromQuery: any[] = [];
+        if (!noSqlMode) {
+          taskCountsFromQuery = await queryDruidSql({ query });
+        } else {
+          const completeTasksResp = await axios.get('/druid/indexer/v1/completeTasks');
+          const runningTasksResp = await axios.get('/druid/indexer/v1/runningTasks');
+          const waitingTasksResp = await axios.get('/druid/indexer/v1/waitingTasks');
+          const pendingTasksResp = await axios.get('/druid/indexer/v1/pendingTasks');
+          taskCountsFromQuery.push({status: 'SUCCESS', count: completeTasksResp.data.filter((d: any) => d.status === 'SUCCESS').length});
+          taskCountsFromQuery.push({status: 'FAILED', count: completeTasksResp.data.filter((d: any) => d.status === 'FAILED').length});
+          taskCountsFromQuery.push({status: 'RUNNING', count: runningTasksResp.data.length});
+          taskCountsFromQuery.push({status: 'WAITING', count: waitingTasksResp.data.length});
+          taskCountsFromQuery.push({status: 'PENDING', count: pendingTasksResp.data.length});
         }
+        const taskCounts = taskCountsFromQuery.reduce((acc: any, curr: any) => {
+          const status = curr.status.toLowerCase();
+          const property = `${status}TaskCount`;
+          return {...acc, [property]: curr.count};
+        }, {});
         return taskCounts;
       },
       onStateChange: ({ result, loading, error }) => {
@@ -212,8 +237,10 @@ GROUP BY 1`);
 
     this.dataServerQueryManager = new QueryManager({
       processQuery: async (query) => {
-        const dataServerCounts = await queryDruidSql({ query });
-        return getHeadProp(dataServerCounts, 'count') || 0;
+        if (!noSqlMode) {
+          const dataServerCounts = await queryDruidSql({ query });
+          return getHeadProp(dataServerCounts, 'count') || 0;
+        }
       },
       onStateChange: ({ result, loading, error }) => {
         this.setState({
@@ -306,7 +333,8 @@ GROUP BY 1`);
           {Boolean(state.successTaskCount) && <p>{pluralIfNeeded(state.successTaskCount, 'successful task')}</p>}
           {Boolean(state.waitingTaskCount) && <p>{pluralIfNeeded(state.waitingTaskCount, 'waiting task')}</p>}
           {Boolean(state.failedTaskCount) && <p>{pluralIfNeeded(state.failedTaskCount, 'failed task')}</p>}
-          { !(state.runningTaskCount + state.pendingTaskCount + state.successTaskCount + state.waitingTaskCount + state.failedTaskCount) &&
+          {!(Boolean(state.runningTaskCount) || Boolean(state.pendingTaskCount) || Boolean(state.successTaskCount) ||
+            Boolean(state.waitingTaskCount) || Boolean(state.failedTaskCount)) &&
             <p>There are no tasks</p>
           }
           </>,
@@ -319,7 +347,7 @@ GROUP BY 1`);
         title: 'Data servers',
         loading: state.dataServerCountLoading || state.middleManagerCountLoading,
         content: <>
-          <p>{pluralIfNeeded(state.dataServerCount, 'historical')}</p>
+          {!this.props.noSqlMode && <p>{pluralIfNeeded(state.dataServerCount, 'historical')}</p>}
           <p>{pluralIfNeeded(state.middleManagerCount, 'middlemanager')}</p>
         </>,
         error: state.dataServerCountError
diff --git a/web-console/src/views/segments-view.tsx b/web-console/src/views/segments-view.tsx
index 43bcb019e966..05c6c921fa78 100644
--- a/web-console/src/views/segments-view.tsx
+++ b/web-console/src/views/segments-view.tsx
@@ -42,11 +42,13 @@ import './segments-view.scss';
 
 const tableColumns: string[] = ['Segment ID', 'Datasource', 'Start', 'End', 'Version', 'Partition',
   'Size', 'Num rows', 'Replicas', 'Is published', 'Is realtime', 'Is available'];
+const tableColumnsNoSql: string[] = ['Segment ID', 'Datasource', 'Start', 'End', 'Version', 'Partition', 'Size'];
 
 export interface SegmentsViewProps extends React.Props<any> {
   goToSql: (initSql: string) => void;
   datasource: string | null;
   onlyUnavailable: boolean | null;
+  noSqlMode: boolean;
 }
 
 export interface SegmentsViewState {
@@ -54,6 +56,7 @@ export interface SegmentsViewState {
   segments: any[] | null;
   segmentsError: string | null;
   segmentFilter: Filter[];
+  allSegments?: any[] | null;
 }
 
 interface QueryAndSkip {
@@ -62,7 +65,8 @@ interface QueryAndSkip {
 }
 
 export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsViewState> {
-  private segmentsQueryManager: QueryManager<QueryAndSkip, any[]>;
+  private segmentsSqlQueryManager: QueryManager<QueryAndSkip, any[]>;
+  private segmentsJsonQueryManager: QueryManager<any, any[]>;
   private tableColumnSelectionHandler: TableColumnSelectionHandler;
 
   constructor(props: SegmentsViewProps, context: any) {
@@ -79,7 +83,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
       segmentFilter
     };
 
-    this.segmentsQueryManager = new QueryManager({
+    this.segmentsSqlQueryManager = new QueryManager({
       processQuery: async (query: QueryAndSkip) => {
         const results: any[] = (await queryDruidSql({ query: query.query })).slice(query.skip);
         results.forEach(result => {
@@ -100,13 +104,53 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
       }
     });
 
+    this.segmentsJsonQueryManager = new QueryManager({
+      processQuery: async (query: any) => {
+        const datasourceList = (await axios.get('/druid/coordinator/v1/metadata/datasources')).data;
+        const resultsNested: any[][] = await Promise.all(datasourceList.map(async (d: string) => {
+          const segments = (await axios.get(`/druid/coordinator/v1/datasources/${d}?full`)).data.segments;
+          return segments.map((segment: any) => {
+            return {
+              segment_id: segment.identifier,
+              datasource: segment.dataSource,
+              start: segment.interval.split('/')[0],
+              end: segment.interval.split('/')[1],
+              version: segment.version,
+              partition_num: segment.shardSpec.partitionNum,
+              size: segment.size,
+              payload: segment
+            };
+          });
+        }));
+        const results = [].concat.apply([], resultsNested).sort((d1: any, d2: any) => {
+          return d2.start.localeCompare(d1.start);
+        });
+        return results;
+      },
+      onStateChange: ({ result, loading, error }) => {
+        this.setState({
+          allSegments: result,
+          segments: result ? result.slice(0, 50) : null,
+          segmentsLoading: loading,
+          segmentsError: error
+        });
+      }
+    });
+
     this.tableColumnSelectionHandler = new TableColumnSelectionHandler(
       LocalStorageKeys.SEGMENT_TABLE_COLUMN_SELECTION, () => this.setState({})
     );
   }
 
+  componentDidMount(): void {
+    if (this.props.noSqlMode) {
+      this.segmentsJsonQueryManager.runQuery('init');
+    }
+  }
+
   componentWillUnmount(): void {
-    this.segmentsQueryManager.terminate();
+    this.segmentsSqlQueryManager.terminate();
+    this.segmentsJsonQueryManager.terminate();
   }
 
   private fetchData = (state: any, instance: any) => {
@@ -138,15 +182,42 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
     queryParts.push(`LIMIT ${totalQuerySize}`);
 
     const query = queryParts.join('\n');
-
-    this.segmentsQueryManager.runQuery({
+    this.segmentsSqlQueryManager.runQuery({
       query,
       skip: totalQuerySize - pageSize
     });
   }
 
+  private fecthDataClientSide = (state: any, instance: any) => {
+    const { page, pageSize, filtered, sorted } = state;
+    const { allSegments } = this.state;
+    if (allSegments == null) return;
+    const startPage = page * pageSize;
+    const endPage = (page + 1) * pageSize;
+    const sortPivot = sorted[0].id;
+    const sortDesc = sorted[0].desc;
+    const selectedSegments = allSegments.sort((d1: any, d2: any) => {
+      const v1 = d1[sortPivot];
+      const v2 = d2[sortPivot];
+      if (typeof (d1[sortPivot]) === 'string') {
+        return sortDesc ? v2.localeCompare(v1) : v1.localeCompare(v2);
+      } else {
+        return sortDesc ? v2 - v1 : v1 - v2;
+      }
+    }).filter((d: any) => {
+      return filtered.every((f: any) => {
+        return d[f.id].includes(f.value);
+      });
+    });
+    const segments = selectedSegments.slice(startPage, endPage);
+    this.setState({
+      segments
+    });
+  }
+
   renderSegmentsTable() {
     const { segments, segmentsLoading, segmentsError, segmentFilter } = this.state;
+    const { noSqlMode } = this.props;
     const { tableColumnSelectionHandler } = this;
 
     return <ReactTable
@@ -161,7 +232,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
       onFilteredChange={(filtered, column) => {
         this.setState({ segmentFilter: filtered });
       }}
-      onFetchData={this.fetchData}
+      onFetchData={noSqlMode ? this.fecthDataClientSide : this.fetchData}
       showPageJump={false}
       ofText=""
       columns={[
@@ -230,7 +301,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
           filterable: false,
           defaultSortDesc: true,
           Cell: row => formatNumber(row.value),
-          show: tableColumnSelectionHandler.showColumn('Num rows')
+          show: !noSqlMode && tableColumnSelectionHandler.showColumn('Num rows')
         },
         {
           Header: 'Replicas',
@@ -238,28 +309,28 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
           width: 60,
           filterable: false,
           defaultSortDesc: true,
-          show: tableColumnSelectionHandler.showColumn('Replicas')
+          show: !noSqlMode && tableColumnSelectionHandler.showColumn('Replicas')
         },
         {
           Header: 'Is published',
           id: 'is_published',
           accessor: (row) => String(Boolean(row.is_published)),
           Filter: makeBooleanFilter(),
-          show: tableColumnSelectionHandler.showColumn('Is published')
+          show: !noSqlMode && tableColumnSelectionHandler.showColumn('Is published')
         },
         {
           Header: 'Is realtime',
           id: 'is_realtime',
           accessor: (row) => String(Boolean(row.is_realtime)),
           Filter: makeBooleanFilter(),
-          show: tableColumnSelectionHandler.showColumn('Is realtime')
+          show: !noSqlMode && tableColumnSelectionHandler.showColumn('Is realtime')
         },
         {
           Header: 'Is available',
           id: 'is_available',
           accessor: (row) => String(Boolean(row.is_available)),
           Filter: makeBooleanFilter(),
-          show: tableColumnSelectionHandler.showColumn('Is available')
+          show: !noSqlMode && tableColumnSelectionHandler.showColumn('Is available')
         }
       ]}
       defaultPageSize={50}
@@ -282,7 +353,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
   }
 
   render() {
-    const { goToSql } = this.props;
+    const { goToSql, noSqlMode } = this.props;
     const { tableColumnSelectionHandler } = this;
 
     return <div className="segments-view app-view">
@@ -290,15 +361,19 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
         <Button
           icon={IconNames.REFRESH}
           text="Refresh"
-          onClick={() => this.segmentsQueryManager.rerunLastQuery()}
-        />
-        <Button
-          icon={IconNames.APPLICATION}
-          text="Go to SQL"
-          onClick={() => goToSql(this.segmentsQueryManager.getLastQuery().query)}
+          onClick={() => noSqlMode ? this.segmentsJsonQueryManager.rerunLastQuery() : this.segmentsSqlQueryManager.rerunLastQuery()}
         />
+        {
+          !noSqlMode &&
+          <Button
+            icon={IconNames.APPLICATION}
+            text="Go to SQL"
+            hidden={noSqlMode}
+            onClick={() => goToSql(this.segmentsSqlQueryManager.getLastQuery().query)}
+          />
+        }
         <TableColumnSelection
-          columns={tableColumns}
+          columns={noSqlMode ? tableColumnsNoSql : tableColumns}
           onChange={(column) => tableColumnSelectionHandler.changeTableColumnSelection(column)}
           tableColumnsHidden={tableColumnSelectionHandler.hiddenColumns}
         />
diff --git a/web-console/src/views/servers-view.tsx b/web-console/src/views/servers-view.tsx
index f04ed4410ba2..33598414a918 100644
--- a/web-console/src/views/servers-view.tsx
+++ b/web-console/src/views/servers-view.tsx
@@ -55,6 +55,7 @@ export interface ServersViewProps extends React.Props<any> {
   middleManager: string | null;
   goToSql: (initSql: string) => void;
   goToTask: (taskId: string) => void;
+  noSqlMode: boolean;
 }
 
 export interface ServersViewState {
@@ -101,13 +102,13 @@ export class ServersView extends React.Component<ServersViewProps, ServersViewSt
   }
 
   componentDidMount(): void {
+    const { noSqlMode } = this.props;
     this.serverQueryManager = new QueryManager({
       processQuery: async (query: string) => {
         const servers = await queryDruidSql({ query });
 
         const loadQueueResponse = await axios.get('/druid/coordinator/v1/loadqueue?simple');
         const loadQueues = loadQueueResponse.data;
-
         return servers.map((s: any) => {
           const loadQueueInfo = loadQueues[s.server];
           if (loadQueueInfo) {
@@ -125,10 +126,12 @@ export class ServersView extends React.Component<ServersViewProps, ServersViewSt
       }
     });
 
-    this.serverQueryManager.runQuery(`SELECT
+    if (!noSqlMode) {
+      this.serverQueryManager.runQuery(`SELECT
   "tier", "server", "host", "plaintext_port", "tls_port", "curr_size", "max_size"
 FROM sys.servers
 WHERE "server_type" = 'historical'`);
+    }
 
     this.middleManagerQueryManager = new QueryManager({
       processQuery: async (query: string) => {
@@ -366,36 +369,38 @@ WHERE "server_type" = 'historical'`);
   }
 
   render() {
-    const { goToSql } = this.props;
+    const { goToSql, noSqlMode } = this.props;
     const { groupByTier } = this.state;
     const { serverTableColumnSelectionHandler, middleManagerTableColumnSelectionHandler } = this;
 
     return <div className="servers-view app-view">
-      <ViewControlBar label="Historicals">
-        <Button
-          icon={IconNames.REFRESH}
-          text="Refresh"
-          onClick={() => this.serverQueryManager.rerunLastQuery()}
-        />
-        <Button
-          icon={IconNames.APPLICATION}
-          text="Go to SQL"
-          onClick={() => goToSql(this.serverQueryManager.getLastQuery())}
-        />
-        <Switch
-          checked={groupByTier}
-          label="Group by tier"
-          onChange={() => this.setState({ groupByTier: !groupByTier })}
-        />
-        <TableColumnSelection
-          columns={serverTableColumns}
-          onChange={(column) => serverTableColumnSelectionHandler.changeTableColumnSelection(column)}
-          tableColumnsHidden={serverTableColumnSelectionHandler.hiddenColumns}
-        />
-      </ViewControlBar>
-      {this.renderServersTable()}
-
-      <div className="control-separator"/>
+      {
+        !noSqlMode &&
+        <ViewControlBar label="Historicals">
+          <Button
+            icon={IconNames.REFRESH}
+            text="Refresh"
+            onClick={() => this.serverQueryManager.rerunLastQuery()}
+          />
+          <Button
+            icon={IconNames.APPLICATION}
+            text="Go to SQL"
+            onClick={() => goToSql(this.serverQueryManager.getLastQuery())}
+          />
+          <Switch
+            checked={groupByTier}
+            label="Group by tier"
+            onChange={() => this.setState({groupByTier: !groupByTier})}
+          />
+          <TableColumnSelection
+            columns={serverTableColumns}
+            onChange={(column) => serverTableColumnSelectionHandler.changeTableColumnSelection(column)}
+            tableColumnsHidden={serverTableColumnSelectionHandler.hiddenColumns}
+          />
+        </ViewControlBar>
+      }
+      {!noSqlMode && this.renderServersTable()}
+      {!noSqlMode && <div className="control-separator"/>}
 
       <ViewControlBar label="MiddleManagers">
         <Button
diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx
index 5cd4dc40fa77..0e50f7140ff3 100644
--- a/web-console/src/views/tasks-view.tsx
+++ b/web-console/src/views/tasks-view.tsx
@@ -47,6 +47,7 @@ export interface TasksViewProps extends React.Props<any> {
   taskId: string | null;
   goToSql: (initSql: string) => void;
   goToMiddleManager: (middleManager: string) => void;
+  noSqlMode: boolean;
 }
 
 export interface TasksViewState {
@@ -126,6 +127,7 @@ export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
   }
 
   componentDidMount(): void {
+    const { noSqlMode } = this.props;
     this.supervisorQueryManager = new QueryManager({
       processQuery: async (query: string) => {
         const resp = await axios.get('/druid/indexer/v1/supervisor?full');
@@ -144,7 +146,20 @@ export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
 
     this.taskQueryManager = new QueryManager({
       processQuery: async (query: string) => {
-        return await queryDruidSql({ query });
+        if (!noSqlMode) {
+          return await queryDruidSql({ query });
+        } else {
+          const completeTasksResp = await axios.get('/druid/indexer/v1/completeTasks');
+          const runningTasksResp = await axios.get('/druid/indexer/v1/runningTasks');
+          const waitingTasksResp = await axios.get('/druid/indexer/v1/waitingTasks');
+          const pendingTasksResp = await axios.get('/druid/indexer/v1/pendingTasks');
+          const completeTasksResult = this.parseTasks(completeTasksResp.data);
+          const runningTasksResult = this.parseTasks(runningTasksResp.data);
+          const waitingTasksResult = this.parseTasks(waitingTasksResp.data);
+          const pendingTasksResult = this.parseTasks(pendingTasksResp.data);
+          const result = [].concat.apply([], [completeTasksResult, runningTasksResult, waitingTasksResult, pendingTasksResult]);
+          return result;
+        }
       },
       onStateChange: ({ result, loading, error }) => {
         this.setState({
@@ -179,6 +194,22 @@ ORDER BY "rank" DESC, "created_time" DESC`);
     this.taskQueryManager.terminate();
   }
 
+  private parseTasks = (data: any[]): any[] => {
+    return data.map((d: any) => {
+      return {
+        created_time: d.createdTime,
+        datasource: d.dataSource,
+        duration: d.duration ? d.duration : 0,
+        error_msg: d.errorMsg,
+        location: d.location.host ? `${d.location.host}:${d.location.port}` : null,
+        rank: (this.statusRanking as any)[d.status === 'RUNNING' ? d.runnerStatusCode : d.status],
+        status: d.status === 'RUNNING' ? d.runnerStatusCode : d.status,
+        task_id: d.id,
+        type: d.type
+      };
+    });
+  }
+
   private submitSupervisor = async (spec: JSON) => {
     try {
       await axios.post('/druid/indexer/v1/supervisor', spec);
@@ -566,7 +597,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
   }
 
   render() {
-    const { goToSql } = this.props;
+    const { goToSql, noSqlMode } = this.props;
     const { groupTasksBy, supervisorSpecDialogOpen, taskSpecDialogOpen, alertErrorMsg } = this.state;
     const { supervisorTableColumnSelectionHandler, taskTableColumnSelectionHandler } = this;
 
@@ -605,11 +636,14 @@ ORDER BY "rank" DESC, "created_time" DESC`);
           text="Refresh"
           onClick={() => this.taskQueryManager.rerunLastQuery()}
         />
-        <Button
-          icon={IconNames.APPLICATION}
-          text="Go to SQL"
-          onClick={() => goToSql(this.taskQueryManager.getLastQuery())}
-        />
+        {
+          !noSqlMode &&
+          <Button
+            icon={IconNames.APPLICATION}
+            text="Go to SQL"
+            onClick={() => goToSql(this.taskQueryManager.getLastQuery())}
+          />
+        }
         <Button
           icon={IconNames.PLUS}
           text="Submit task"

From 0468ec3580ce74c8eef874f4c5f30c4b98efecc3 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Tue, 16 Apr 2019 16:42:25 -0700
Subject: [PATCH 02/13] Use status code

---
 web-console/src/views/tasks-view.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx
index 0e50f7140ff3..bc4a7026d1f7 100644
--- a/web-console/src/views/tasks-view.tsx
+++ b/web-console/src/views/tasks-view.tsx
@@ -202,8 +202,8 @@ ORDER BY "rank" DESC, "created_time" DESC`);
         duration: d.duration ? d.duration : 0,
         error_msg: d.errorMsg,
         location: d.location.host ? `${d.location.host}:${d.location.port}` : null,
-        rank: (this.statusRanking as any)[d.status === 'RUNNING' ? d.runnerStatusCode : d.status],
-        status: d.status === 'RUNNING' ? d.runnerStatusCode : d.status,
+        rank: (this.statusRanking as any)[d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode],
+        status: d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode,
         task_id: d.id,
         type: d.type
       };

From 5f626ea277e41fbaaf3ca23a13d3666cdd6b2085 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Wed, 17 Apr 2019 11:49:20 -0700
Subject: [PATCH 03/13] Add no sql mode to server view

---
 web-console/src/views/servers-view.tsx | 72 ++++++++++++++++----------
 1 file changed, 44 insertions(+), 28 deletions(-)

diff --git a/web-console/src/views/servers-view.tsx b/web-console/src/views/servers-view.tsx
index 33598414a918..057516c71276 100644
--- a/web-console/src/views/servers-view.tsx
+++ b/web-console/src/views/servers-view.tsx
@@ -105,8 +105,26 @@ export class ServersView extends React.Component<ServersViewProps, ServersViewSt
     const { noSqlMode } = this.props;
     this.serverQueryManager = new QueryManager({
       processQuery: async (query: string) => {
-        const servers = await queryDruidSql({ query });
-
+        let servers: any[];
+        if (!noSqlMode) {
+          servers = await queryDruidSql({ query });
+        } else {
+          const allServerResp = await axios.get('/druid/coordinator/v1/servers?simple');
+          const allServers = allServerResp.data;
+          servers = allServers.map((s: any) => {
+            if (s.type === 'historical') {
+              return {
+                host: s.host.split(':')[0],
+                plaintext_port: parseInt(s.host.split(':')[1], 10),
+                server: s.host,
+                curr_size: s.currSize,
+                max_size: s.maxSize,
+                tier: s.tier
+              };
+            }
+            return null;
+          }).filter((s: any) => s != null);
+        }
         const loadQueueResponse = await axios.get('/druid/coordinator/v1/loadqueue?simple');
         const loadQueues = loadQueueResponse.data;
         return servers.map((s: any) => {
@@ -126,12 +144,10 @@ export class ServersView extends React.Component<ServersViewProps, ServersViewSt
       }
     });
 
-    if (!noSqlMode) {
-      this.serverQueryManager.runQuery(`SELECT
+    this.serverQueryManager.runQuery(`SELECT
   "tier", "server", "host", "plaintext_port", "tls_port", "curr_size", "max_size"
 FROM sys.servers
 WHERE "server_type" = 'historical'`);
-    }
 
     this.middleManagerQueryManager = new QueryManager({
       processQuery: async (query: string) => {
@@ -284,7 +300,7 @@ WHERE "server_type" = 'historical'`);
             if (row.plaintext_port !== -1) {
               ports.push(`${row.plaintext_port} (plain)`);
             }
-            if (row.tls_port !== -1) {
+            if (row.tls_port !== undefined && row.tls_port !== -1) {
               ports.push(`${row.tls_port} (TLS)`);
             }
             return ports.join(', ') || 'No port';
@@ -374,33 +390,33 @@ WHERE "server_type" = 'historical'`);
     const { serverTableColumnSelectionHandler, middleManagerTableColumnSelectionHandler } = this;
 
     return <div className="servers-view app-view">
-      {
-        !noSqlMode &&
-        <ViewControlBar label="Historicals">
-          <Button
-            icon={IconNames.REFRESH}
-            text="Refresh"
-            onClick={() => this.serverQueryManager.rerunLastQuery()}
-          />
+      <ViewControlBar label="Historicals">
+        <Button
+          icon={IconNames.REFRESH}
+          text="Refresh"
+          onClick={() => this.serverQueryManager.rerunLastQuery()}
+        />
+        {
+          !noSqlMode &&
           <Button
             icon={IconNames.APPLICATION}
             text="Go to SQL"
             onClick={() => goToSql(this.serverQueryManager.getLastQuery())}
           />
-          <Switch
-            checked={groupByTier}
-            label="Group by tier"
-            onChange={() => this.setState({groupByTier: !groupByTier})}
-          />
-          <TableColumnSelection
-            columns={serverTableColumns}
-            onChange={(column) => serverTableColumnSelectionHandler.changeTableColumnSelection(column)}
-            tableColumnsHidden={serverTableColumnSelectionHandler.hiddenColumns}
-          />
-        </ViewControlBar>
-      }
-      {!noSqlMode && this.renderServersTable()}
-      {!noSqlMode && <div className="control-separator"/>}
+        }
+        <Switch
+          checked={groupByTier}
+          label="Group by tier"
+          onChange={() => this.setState({groupByTier: !groupByTier})}
+        />
+        <TableColumnSelection
+          columns={serverTableColumns}
+          onChange={(column) => serverTableColumnSelectionHandler.changeTableColumnSelection(column)}
+          tableColumnsHidden={serverTableColumnSelectionHandler.hiddenColumns}
+        />
+      </ViewControlBar>
+      {this.renderServersTable()}
+      <div className="control-separator"/>
 
       <ViewControlBar label="MiddleManagers">
         <Button

From 8e842f9cb2f3937a0528925fced89534e716d56c Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Wed, 17 Apr 2019 12:40:06 -0700
Subject: [PATCH 04/13] add sql broker check to decide if no sql mode should be
 enabled

---
 web-console/src/console-application.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 95461e9d87ed..218d95c1d8f1 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -110,6 +110,17 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
 
   componentDidMount(): void {
     ConsoleApplication.shownNotifications();
+    this.setSqlMode();
+  }
+
+  private setSqlMode = async () => {
+    try {
+      await axios.post('/druid/v2/sql', {query: 'SELECT 1337'});
+    } catch (e) {
+      this.setState({
+        noSqlMode: true
+      });
+    }
   }
 
   private resetInitialsDelay() {

From db9dd171685c5a1548a538741e764171e897c4fa Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Wed, 17 Apr 2019 12:58:12 -0700
Subject: [PATCH 05/13] Fix historicals in home view

---
 web-console/src/views/home-view.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web-console/src/views/home-view.tsx b/web-console/src/views/home-view.tsx
index f1c07c756e4f..8f87b03bea7f 100644
--- a/web-console/src/views/home-view.tsx
+++ b/web-console/src/views/home-view.tsx
@@ -240,6 +240,12 @@ GROUP BY 1`);
         if (!noSqlMode) {
           const dataServerCounts = await queryDruidSql({ query });
           return getHeadProp(dataServerCounts, 'count') || 0;
+        } else {
+          const allServerResp = await axios.get('/druid/coordinator/v1/servers?simple');
+          const allServers = allServerResp.data;
+          return allServers.reduce((acc: number, s: any) => {
+            return acc + Number(s.type === 'historical');
+          }, 0);
         }
       },
       onStateChange: ({ result, loading, error }) => {
@@ -347,7 +353,7 @@ GROUP BY 1`);
         title: 'Data servers',
         loading: state.dataServerCountLoading || state.middleManagerCountLoading,
         content: <>
-          {!this.props.noSqlMode && <p>{pluralIfNeeded(state.dataServerCount, 'historical')}</p>}
+          <p>{pluralIfNeeded(state.dataServerCount, 'historical')}</p>
           <p>{pluralIfNeeded(state.middleManagerCount, 'middlemanager')}</p>
         </>,
         error: state.dataServerCountError

From 36185ae3560a377240e7107c28dbe3a1ea335c92 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Wed, 17 Apr 2019 13:10:46 -0700
Subject: [PATCH 06/13] Name change

---
 web-console/src/views/segments-view.tsx | 8 ++++----
 web-console/src/views/servers-view.tsx  | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web-console/src/views/segments-view.tsx b/web-console/src/views/segments-view.tsx
index 05c6c921fa78..4e14a65bd8fc 100644
--- a/web-console/src/views/segments-view.tsx
+++ b/web-console/src/views/segments-view.tsx
@@ -107,7 +107,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
     this.segmentsJsonQueryManager = new QueryManager({
       processQuery: async (query: any) => {
         const datasourceList = (await axios.get('/druid/coordinator/v1/metadata/datasources')).data;
-        const resultsNested: any[][] = await Promise.all(datasourceList.map(async (d: string) => {
+        const nestedResults: any[][] = await Promise.all(datasourceList.map(async (d: string) => {
           const segments = (await axios.get(`/druid/coordinator/v1/datasources/${d}?full`)).data.segments;
           return segments.map((segment: any) => {
             return {
@@ -122,7 +122,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
             };
           });
         }));
-        const results = [].concat.apply([], resultsNested).sort((d1: any, d2: any) => {
+        const results = [].concat.apply([], nestedResults).sort((d1: any, d2: any) => {
           return d2.start.localeCompare(d1.start);
         });
         return results;
@@ -188,7 +188,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
     });
   }
 
-  private fecthDataClientSide = (state: any, instance: any) => {
+  private fecthClientSideData = (state: any, instance: any) => {
     const { page, pageSize, filtered, sorted } = state;
     const { allSegments } = this.state;
     if (allSegments == null) return;
@@ -232,7 +232,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
       onFilteredChange={(filtered, column) => {
         this.setState({ segmentFilter: filtered });
       }}
-      onFetchData={noSqlMode ? this.fecthDataClientSide : this.fetchData}
+      onFetchData={noSqlMode ? this.fecthClientSideData : this.fetchData}
       showPageJump={false}
       ofText=""
       columns={[
diff --git a/web-console/src/views/servers-view.tsx b/web-console/src/views/servers-view.tsx
index 057516c71276..b355ecad3381 100644
--- a/web-console/src/views/servers-view.tsx
+++ b/web-console/src/views/servers-view.tsx
@@ -407,7 +407,7 @@ WHERE "server_type" = 'historical'`);
         <Switch
           checked={groupByTier}
           label="Group by tier"
-          onChange={() => this.setState({groupByTier: !groupByTier})}
+          onChange={() => this.setState({ groupByTier: !groupByTier })}
         />
         <TableColumnSelection
           columns={serverTableColumns}
@@ -416,6 +416,7 @@ WHERE "server_type" = 'historical'`);
         />
       </ViewControlBar>
       {this.renderServersTable()}
+
       <div className="control-separator"/>
 
       <ViewControlBar label="MiddleManagers">

From 8cd2559c71b7e2feb51841b46bb1150f2ea5e4fd Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 18 Apr 2019 13:55:56 -0700
Subject: [PATCH 07/13] Add types for query result; improved functions

---
 web-console/src/console-application.tsx   | 53 ++++++++---------
 web-console/src/variables.ts              |  1 +
 web-console/src/views/datasource-view.tsx | 15 ++++-
 web-console/src/views/home-view.tsx       | 13 +++--
 web-console/src/views/segments-view.tsx   | 33 +++++++++--
 web-console/src/views/servers-view.tsx    | 69 ++++++++++++++++-------
 web-console/src/views/tasks-view.tsx      | 67 ++++++++++++++--------
 7 files changed, 165 insertions(+), 86 deletions(-)

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 218d95c1d8f1..d063b5ca9f3b 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -25,7 +25,7 @@ import { HashRouter, Route, Switch } from 'react-router-dom';
 
 import { HeaderActiveTab, HeaderBar } from './components/header-bar';
 import { AppToaster } from './singletons/toaster';
-import { DRUID_DOCS_SQL, LEGACY_COORDINATOR_CONSOLE, LEGACY_OVERLORD_CONSOLE } from './variables';
+import {DRUID_DOCS_API, DRUID_DOCS_SQL, LEGACY_COORDINATOR_CONSOLE, LEGACY_OVERLORD_CONSOLE} from './variables';
 import { DatasourcesView } from './views/datasource-view';
 import { HomeView } from './views/home-view';
 import { LookupsView } from './views/lookups-view';
@@ -63,28 +63,34 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
       } catch (e) {
         return true; // total failure
       }
-
       // Status works but SQL 405s => the SQL endpoint is disabled
-      AppToaster.show({
-        icon: IconNames.ERROR,
-        intent: Intent.DANGER,
-        timeout: 120000,
-        /* tslint:disable:jsx-alignment */
-        message: <>
-          It appears that the SQL endpoint is disabled. Either <a
-          href={DRUID_DOCS_SQL}>enable the SQL endpoint</a> or use the old <a
-          href={LEGACY_COORDINATOR_CONSOLE}>coordinator</a> and <a
-          href={LEGACY_OVERLORD_CONSOLE}>overlord</a> consoles that do not rely on the SQL endpoint.
-        </>
-        /* tslint:enable:jsx-alignment */
-      });
       return false;
     }
-    return true;
+    return false;
+  }
+
+  static shownNotifications() {
+    AppToaster.show({
+      icon: IconNames.ERROR,
+      intent: Intent.DANGER,
+      timeout: 120000,
+      /* tslint:disable:jsx-alignment */
+      message: <>
+        It appears that the SQL endpoint is disabled. No SQL endpoint is
+        used and all requests rely on <a href={DRUID_DOCS_API}>native Druid query API</a>,
+        but you may still <a href={DRUID_DOCS_SQL}>enable the SQL endpoint</a>
+      </>
+      /* tslint:enable:jsx-alignment */
+    });
   }
 
-  static async shownNotifications() {
-    await ConsoleApplication.ensureSql();
+  private async setSqlMode() {
+    if (!(await ConsoleApplication.ensureSql())) {
+      ConsoleApplication.shownNotifications();
+      this.setState({
+        noSqlMode: true
+      });
+    }
   }
 
   private taskId: string | null;
@@ -109,20 +115,9 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
   }
 
   componentDidMount(): void {
-    ConsoleApplication.shownNotifications();
     this.setSqlMode();
   }
 
-  private setSqlMode = async () => {
-    try {
-      await axios.post('/druid/v2/sql', {query: 'SELECT 1337'});
-    } catch (e) {
-      this.setState({
-        noSqlMode: true
-      });
-    }
-  }
-
   private resetInitialsDelay() {
     setTimeout(() => {
       this.taskId = null;
diff --git a/web-console/src/variables.ts b/web-console/src/variables.ts
index b338bc29e7ad..10a51ec9f27a 100644
--- a/web-console/src/variables.ts
+++ b/web-console/src/variables.ts
@@ -26,3 +26,4 @@ export const DRUID_DOCS_SQL = 'http://druid.io/docs/latest/querying/sql.html';
 export const DRUID_COMMUNITY = 'http://druid.io/community/';
 export const DRUID_USER_GROUP = 'https://groups.google.com/forum/#!forum/druid-user';
 export const DRUID_DEVELOPER_GROUP = 'https://lists.apache.org/list.html?dev@druid.apache.org';
+export const DRUID_DOCS_API = 'http://druid.io/docs/latest/operations/api-reference.html';
diff --git a/web-console/src/views/datasource-view.tsx b/web-console/src/views/datasource-view.tsx
index 70cd1dc6a55f..13b0124e9cf6 100644
--- a/web-console/src/views/datasource-view.tsx
+++ b/web-console/src/views/datasource-view.tsx
@@ -58,6 +58,14 @@ interface Datasource {
   [key: string]: any;
 }
 
+interface DatasourceQueryResultRow {
+  datasource: string;
+  num_available_segments: number;
+  num_rows: number;
+  num_segments: number;
+  size: number;
+}
+
 export interface DatasourcesViewState {
   datasourcesLoading: boolean;
   datasources: Datasource[] | null;
@@ -122,7 +130,7 @@ export class DatasourcesView extends React.Component<DatasourcesViewProps, Datas
 
     this.datasourceQueryManager = new QueryManager({
       processQuery: async (query: string) => {
-        let datasources: any[];
+        let datasources: DatasourceQueryResultRow[];
         if (!noSqlMode) {
           datasources = await queryDruidSql({ query });
         } else {
@@ -134,7 +142,8 @@ export class DatasourcesView extends React.Component<DatasourcesViewProps, Datas
               datasource: d.name,
               num_available_segments: d.properties.segments.count,
               size: d.properties.segments.size,
-              num_segments: d.properties.segments.count + loadstatus[d.name]
+              num_segments: d.properties.segments.count + loadstatus[d.name],
+              num_rows: -1
             };
           });
         }
@@ -153,7 +162,7 @@ export class DatasourcesView extends React.Component<DatasourcesViewProps, Datas
         const tiersResp = await axios.get('/druid/coordinator/v1/tiers');
         const tiers = tiersResp.data;
 
-        const allDatasources = datasources.concat(disabled.map(d => ({ datasource: d, disabled: true })));
+        const allDatasources = (datasources as any).concat(disabled.map(d => ({ datasource: d, disabled: true })));
         allDatasources.forEach((ds: any) => {
           ds.rules = rules[ds.datasource] || [];
           ds.compaction = compaction[ds.datasource];
diff --git a/web-console/src/views/home-view.tsx b/web-console/src/views/home-view.tsx
index 8f87b03bea7f..541f368f1763 100644
--- a/web-console/src/views/home-view.tsx
+++ b/web-console/src/views/home-view.tsx
@@ -237,15 +237,20 @@ GROUP BY 1`);
 
     this.dataServerQueryManager = new QueryManager({
       processQuery: async (query) => {
-        if (!noSqlMode) {
-          const dataServerCounts = await queryDruidSql({ query });
-          return getHeadProp(dataServerCounts, 'count') || 0;
-        } else {
+        const getDataServerNum = async () => {
           const allServerResp = await axios.get('/druid/coordinator/v1/servers?simple');
           const allServers = allServerResp.data;
           return allServers.reduce((acc: number, s: any) => {
             return acc + Number(s.type === 'historical');
           }, 0);
+        };
+        if (!noSqlMode) {
+          const dataServerCounts = await queryDruidSql({ query });
+          const serverNum = getHeadProp(dataServerCounts, 'count') || 0;
+          if (serverNum === 0) return await getDataServerNum();
+          return serverNum;
+        } else {
+          return await getDataServerNum();
         }
       },
       onStateChange: ({ result, loading, error }) => {
diff --git a/web-console/src/views/segments-view.tsx b/web-console/src/views/segments-view.tsx
index 4e14a65bd8fc..c74829c11e0a 100644
--- a/web-console/src/views/segments-view.tsx
+++ b/web-console/src/views/segments-view.tsx
@@ -64,9 +64,25 @@ interface QueryAndSkip {
   skip: number;
 }
 
+interface SegmentQueryResultRow {
+  datasource: string;
+  start: string;
+  end: string;
+  segment_id: string;
+  version: string;
+  size: 0;
+  partition_num: number;
+  payload: any;
+  num_rows: number;
+  num_replicas: number;
+  is_available: number;
+  is_published: number;
+  is_realtime: number;
+}
+
 export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsViewState> {
-  private segmentsSqlQueryManager: QueryManager<QueryAndSkip, any[]>;
-  private segmentsJsonQueryManager: QueryManager<any, any[]>;
+  private segmentsSqlQueryManager: QueryManager<QueryAndSkip, SegmentQueryResultRow[]>;
+  private segmentsJsonQueryManager: QueryManager<any, SegmentQueryResultRow[]>;
   private tableColumnSelectionHandler: TableColumnSelectionHandler;
 
   constructor(props: SegmentsViewProps, context: any) {
@@ -107,7 +123,7 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
     this.segmentsJsonQueryManager = new QueryManager({
       processQuery: async (query: any) => {
         const datasourceList = (await axios.get('/druid/coordinator/v1/metadata/datasources')).data;
-        const nestedResults: any[][] = await Promise.all(datasourceList.map(async (d: string) => {
+        const nestedResults: SegmentQueryResultRow[][] = await Promise.all(datasourceList.map(async (d: string) => {
           const segments = (await axios.get(`/druid/coordinator/v1/datasources/${d}?full`)).data.segments;
           return segments.map((segment: any) => {
             return {
@@ -116,13 +132,18 @@ export class SegmentsView extends React.Component<SegmentsViewProps, SegmentsVie
               start: segment.interval.split('/')[0],
               end: segment.interval.split('/')[1],
               version: segment.version,
-              partition_num: segment.shardSpec.partitionNum,
+              partition_num: segment.shardSpec.partitionNum ? 0 : segment.shardSpec.partitionNum,
               size: segment.size,
-              payload: segment
+              payload: segment,
+              num_rows: -1,
+              num_replicas: -1,
+              is_available: -1,
+              is_published: -1,
+              is_realtime: -1
             };
           });
         }));
-        const results = [].concat.apply([], nestedResults).sort((d1: any, d2: any) => {
+        const results: SegmentQueryResultRow[] = [].concat.apply([], nestedResults).sort((d1: any, d2: any) => {
           return d2.start.localeCompare(d1.start);
         });
         return results;
diff --git a/web-console/src/views/servers-view.tsx b/web-console/src/views/servers-view.tsx
index b355ecad3381..9f77ad411266 100644
--- a/web-console/src/views/servers-view.tsx
+++ b/web-console/src/views/servers-view.tsx
@@ -71,9 +71,32 @@ export interface ServersViewState {
   middleManagerFilter: Filter[];
 }
 
+interface ServerQueryResultRow {
+  curr_size: number;
+  host: string;
+  max_size: number;
+  plaintext_port: number;
+  server: string;
+  tier: string;
+  tls_port: number;
+  segmentsToDrop?: number;
+  segmentsToDropSize?: number;
+  segmentsToLoad?: number;
+  segmentsToLoadSize?: number;
+}
+
+interface MiddleManagerQueryResultRow {
+  availabilityGroups: string[];
+  blacklistedUntil: string | null;
+  currCapacityUsed: number;
+  lastCompletedTaskTime: string;
+  runningTasks: string[];
+  worker: any;
+}
+
 export class ServersView extends React.Component<ServersViewProps, ServersViewState> {
-  private serverQueryManager: QueryManager<string, any[]>;
-  private middleManagerQueryManager: QueryManager<string, any[]>;
+  private serverQueryManager: QueryManager<string, ServerQueryResultRow[]>;
+  private middleManagerQueryManager: QueryManager<string, MiddleManagerQueryResultRow[]>;
   private serverTableColumnSelectionHandler: TableColumnSelectionHandler;
   private middleManagerTableColumnSelectionHandler: TableColumnSelectionHandler;
 
@@ -101,29 +124,37 @@ export class ServersView extends React.Component<ServersViewProps, ServersViewSt
     );
   }
 
+  static getServers = async (): Promise<ServerQueryResultRow[]> => {
+    const allServerResp = await axios.get('/druid/coordinator/v1/servers?simple');
+    const allServers = allServerResp.data;
+    return allServers.reduce((result: ServerQueryResultRow[], s: any) => {
+      if (s.type === 'historical') {
+        result.push({
+          host: s.host.split(':')[0],
+          plaintext_port: parseInt(s.host.split(':')[1], 10),
+          server: s.host,
+          curr_size: s.currSize,
+          max_size: s.maxSize,
+          tier: s.tier,
+          tls_port: -1
+        });
+      }
+      return result;
+    }, []);
+  }
+
   componentDidMount(): void {
     const { noSqlMode } = this.props;
     this.serverQueryManager = new QueryManager({
       processQuery: async (query: string) => {
-        let servers: any[];
+        let servers: ServerQueryResultRow[];
         if (!noSqlMode) {
           servers = await queryDruidSql({ query });
+          if (servers.length === 0) {
+            servers = await ServersView.getServers();
+          }
         } else {
-          const allServerResp = await axios.get('/druid/coordinator/v1/servers?simple');
-          const allServers = allServerResp.data;
-          servers = allServers.map((s: any) => {
-            if (s.type === 'historical') {
-              return {
-                host: s.host.split(':')[0],
-                plaintext_port: parseInt(s.host.split(':')[1], 10),
-                server: s.host,
-                curr_size: s.currSize,
-                max_size: s.maxSize,
-                tier: s.tier
-              };
-            }
-            return null;
-          }).filter((s: any) => s != null);
+          servers = await ServersView.getServers();
         }
         const loadQueueResponse = await axios.get('/druid/coordinator/v1/loadqueue?simple');
         const loadQueues = loadQueueResponse.data;
@@ -300,7 +331,7 @@ WHERE "server_type" = 'historical'`);
             if (row.plaintext_port !== -1) {
               ports.push(`${row.plaintext_port} (plain)`);
             }
-            if (row.tls_port !== undefined && row.tls_port !== -1) {
+            if (row.tls_port !== -1) {
               ports.push(`${row.tls_port} (TLS)`);
             }
             return ports.join(', ') || 'No port';
diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx
index bc4a7026d1f7..a24bb1af2f49 100644
--- a/web-console/src/views/tasks-view.tsx
+++ b/web-console/src/views/tasks-view.tsx
@@ -73,6 +73,23 @@ export interface TasksViewState {
   alertErrorMsg: string | null;
 }
 
+interface TaskQueryResultRow {
+  created_time: string;
+  datasource: string;
+  duration: number;
+  error_msg: string | null;
+  location: string | null;
+  rank: number;
+  status: string;
+  task_id: string;
+  type: string;
+}
+
+interface SupervisorQueryResultRow {
+  id: string;
+  spec: any;
+}
+
 function statusToColor(status: string): string {
   switch (status) {
     case 'RUNNING': return '#2167d5';
@@ -85,11 +102,11 @@ function statusToColor(status: string): string {
 }
 
 export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
-  private supervisorQueryManager: QueryManager<string, any[]>;
-  private taskQueryManager: QueryManager<string, any[]>;
+  private supervisorQueryManager: QueryManager<string, SupervisorQueryResultRow[]>;
+  private taskQueryManager: QueryManager<string, TaskQueryResultRow[]>;
   private supervisorTableColumnSelectionHandler: TableColumnSelectionHandler;
   private taskTableColumnSelectionHandler: TableColumnSelectionHandler;
-  private statusRanking = {RUNNING: 4, PENDING: 3, WAITING: 2, SUCCESS: 1, FAILED: 1};
+  static statusRanking = {RUNNING: 4, PENDING: 3, WAITING: 2, SUCCESS: 1, FAILED: 1};
 
   constructor(props: TasksViewProps, context: any) {
     super(props, context);
@@ -126,6 +143,22 @@ export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
     );
   }
 
+  static parseTasks = (data: any[]): TaskQueryResultRow[] => {
+    return data.map((d: any) => {
+      return {
+        created_time: d.createdTime,
+        datasource: d.dataSource,
+        duration: d.duration ? d.duration : 0,
+        error_msg: d.errorMsg,
+        location: d.location.host ? `${d.location.host}:${d.location.port}` : null,
+        rank: (TasksView.statusRanking as any)[d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode],
+        status: d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode,
+        task_id: d.id,
+        type: d.typTasksView
+      };
+    });
+  }
+
   componentDidMount(): void {
     const { noSqlMode } = this.props;
     this.supervisorQueryManager = new QueryManager({
@@ -153,11 +186,11 @@ export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
           const runningTasksResp = await axios.get('/druid/indexer/v1/runningTasks');
           const waitingTasksResp = await axios.get('/druid/indexer/v1/waitingTasks');
           const pendingTasksResp = await axios.get('/druid/indexer/v1/pendingTasks');
-          const completeTasksResult = this.parseTasks(completeTasksResp.data);
-          const runningTasksResult = this.parseTasks(runningTasksResp.data);
-          const waitingTasksResult = this.parseTasks(waitingTasksResp.data);
-          const pendingTasksResult = this.parseTasks(pendingTasksResp.data);
-          const result = [].concat.apply([], [completeTasksResult, runningTasksResult, waitingTasksResult, pendingTasksResult]);
+          const completeTasksResult = TasksView.parseTasks(completeTasksResp.data);
+          const runningTasksResult = TasksView.parseTasks(runningTasksResp.data);
+          const waitingTasksResult = TasksView.parseTasks(waitingTasksResp.data);
+          const pendingTasksResult = TasksView.parseTasks(pendingTasksResp.data);
+          const result: TaskQueryResultRow[] = [].concat.apply([], [completeTasksResult, runningTasksResult, waitingTasksResult, pendingTasksResult]);
           return result;
         }
       },
@@ -194,22 +227,6 @@ ORDER BY "rank" DESC, "created_time" DESC`);
     this.taskQueryManager.terminate();
   }
 
-  private parseTasks = (data: any[]): any[] => {
-    return data.map((d: any) => {
-      return {
-        created_time: d.createdTime,
-        datasource: d.dataSource,
-        duration: d.duration ? d.duration : 0,
-        error_msg: d.errorMsg,
-        location: d.location.host ? `${d.location.host}:${d.location.port}` : null,
-        rank: (this.statusRanking as any)[d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode],
-        status: d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode,
-        task_id: d.id,
-        type: d.type
-      };
-    });
-  }
-
   private submitSupervisor = async (spec: JSON) => {
     try {
       await axios.post('/druid/indexer/v1/supervisor', spec);
@@ -553,7 +570,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
               return <span>{Object.keys(previewCount).sort().map(v => `${v} (${previewCount[v]})`).join(', ')}</span>;
             },
             sortMethod: (status1: string, status2: string) => {
-              const statusRanking: any = this.statusRanking;
+              const statusRanking: any = TasksView.statusRanking;
               return statusRanking[status1] - statusRanking[status2];
             },
             show: taskTableColumnSelectionHandler.showColumn('Status')

From b64d8970b78733930102ad7046bce7f4b54caf40 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 18 Apr 2019 14:02:08 -0700
Subject: [PATCH 08/13] Fixed a conflict/bug

---
 web-console/src/views/tasks-view.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx
index a24bb1af2f49..794e9ce2c6d1 100644
--- a/web-console/src/views/tasks-view.tsx
+++ b/web-console/src/views/tasks-view.tsx
@@ -569,9 +569,9 @@ ORDER BY "rank" DESC, "created_time" DESC`);
               const previewCount = countBy(previewValues);
               return <span>{Object.keys(previewCount).sort().map(v => `${v} (${previewCount[v]})`).join(', ')}</span>;
             },
-            sortMethod: (status1: string, status2: string) => {
+            sortMethod: (d1, d2) => {
               const statusRanking: any = TasksView.statusRanking;
-              return statusRanking[status1] - statusRanking[status2];
+              return statusRanking[d1.status] - statusRanking[d2.status] || d1.created_time.localeCompare(d2.created_time);
             },
             show: taskTableColumnSelectionHandler.showColumn('Status')
           },

From 5df0c3134617238e6c780e36812deecd95387174 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 18 Apr 2019 14:21:11 -0700
Subject: [PATCH 09/13] Fixed a bug

---
 web-console/src/console-application.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index d063b5ca9f3b..f4a7f0bc649e 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -66,7 +66,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
       // Status works but SQL 405s => the SQL endpoint is disabled
       return false;
     }
-    return false;
+    return true;
   }
 
   static shownNotifications() {

From e07a7a8742fee1fd8f56916758075cc3cf4c0b5d Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 18 Apr 2019 22:55:47 -0700
Subject: [PATCH 10/13] multiple fix

---
 web-console/src/console-application.tsx | 79 +++++++++++++++++--------
 web-console/src/views/home-view.tsx     | 21 +++----
 web-console/src/views/segments-view.tsx |  4 +-
 web-console/src/views/servers-view.tsx  | 25 ++++----
 web-console/src/views/tasks-view.tsx    | 16 ++---
 5 files changed, 84 insertions(+), 61 deletions(-)

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index f4a7f0bc649e..69e12304bec6 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -24,7 +24,9 @@ import * as React from 'react';
 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 {QueryManager} from './utils';
 import {DRUID_DOCS_API, DRUID_DOCS_SQL, LEGACY_COORDINATOR_CONSOLE, LEGACY_OVERLORD_CONSOLE} from './variables';
 import { DatasourcesView } from './views/datasource-view';
 import { HomeView } from './views/home-view';
@@ -46,53 +48,54 @@ export interface ConsoleApplicationProps extends React.Props<any> {
 export interface ConsoleApplicationState {
   aboutDialogOpen: boolean;
   noSqlMode: boolean;
+  capabilitiesLoading: boolean;
 }
 
 export class ConsoleApplication extends React.Component<ConsoleApplicationProps, ConsoleApplicationState> {
   static MESSAGE_KEY = 'druid-console-message';
   static MESSAGE_DISMISSED = 'dismissed';
+  private capabilitiesQueryManager: QueryManager<string, string>;
 
-  static async ensureSql() {
+  static async discoverCapabilities(): Promise<'working-with-sql' | 'working-without-sql' | 'broken'> {
     try {
       await axios.post('/druid/v2/sql', { query: 'SELECT 1337' });
     } catch (e) {
       const { response } = e;
-      if (response.status !== 405 || response.statusText !== 'Method Not Allowed') return true; // other failure
+      if (response.status !== 405 || response.statusText !== 'Method Not Allowed') return 'working-with-sql'; // other failure
       try {
         await axios.get('/status');
       } catch (e) {
-        return true; // total failure
+        return 'broken'; // total failure
       }
       // Status works but SQL 405s => the SQL endpoint is disabled
-      return false;
+      return 'working-without-sql';
     }
-    return true;
+    return 'working-with-sql';
   }
 
-  static shownNotifications() {
+  static shownNotifications(capabilities: string) {
+    let message: JSX.Element;
+    /* tslint:disable:jsx-alignment */
+    if (capabilities === 'working-without-sql') {
+      message = <>
+        It appears that the SQL endpoint is disabled. No SQL endpoint is
+        used and all requests rely on <a href={DRUID_DOCS_API}>native Druid query API</a>,
+        but you may still <a href={DRUID_DOCS_SQL}>enable the SQL endpoint</a>
+      </>;
+    } else {
+      message = <>
+        It appears that the Druid is not responding. Data cannot be retrieved right now
+      </>;
+    }
+    /* tslint:enable:jsx-alignment */
     AppToaster.show({
       icon: IconNames.ERROR,
       intent: Intent.DANGER,
       timeout: 120000,
-      /* tslint:disable:jsx-alignment */
-      message: <>
-        It appears that the SQL endpoint is disabled. No SQL endpoint is
-        used and all requests rely on <a href={DRUID_DOCS_API}>native Druid query API</a>,
-        but you may still <a href={DRUID_DOCS_SQL}>enable the SQL endpoint</a>
-      </>
-      /* tslint:enable:jsx-alignment */
+      message: message
     });
   }
 
-  private async setSqlMode() {
-    if (!(await ConsoleApplication.ensureSql())) {
-      ConsoleApplication.shownNotifications();
-      this.setState({
-        noSqlMode: true
-      });
-    }
-  }
-
   private taskId: string | null;
   private datasource: string | null;
   private onlyUnavailable: boolean | null;
@@ -103,7 +106,8 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
     super(props, context);
     this.state = {
       aboutDialogOpen: false,
-      noSqlMode: false
+      noSqlMode: false,
+      capabilitiesLoading: true
     };
 
     if (props.baseURL) {
@@ -112,10 +116,26 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
     if (props.customHeaderName && props.customHeaderValue) {
       axios.defaults.headers.common[props.customHeaderName] = props.customHeaderValue;
     }
+
+    this.capabilitiesQueryManager = new QueryManager({
+      processQuery: async (query: string) => {
+        const capabilities = await ConsoleApplication.discoverCapabilities();
+        if (capabilities !== 'working-with-sql') {
+          ConsoleApplication.shownNotifications(capabilities);
+        }
+        return capabilities;
+      },
+      onStateChange: ({ result, loading, error }) => {
+        this.setState({
+          noSqlMode: result === 'working-with-sql' ? false : true,
+          capabilitiesLoading: loading
+        });
+      }
+    });
   }
 
   componentDidMount(): void {
-    this.setSqlMode();
+    this.capabilitiesQueryManager.runQuery('dummy');
   }
 
   private resetInitialsDelay() {
@@ -155,7 +175,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
 
   render() {
     const { hideLegacy } = this.props;
-    const { noSqlMode } = this.state;
+    const { noSqlMode, capabilitiesLoading } = this.state;
 
     const wrapInViewContainer = (active: HeaderActiveTab, el: JSX.Element, scrollable = false) => {
       return <>
@@ -164,6 +184,15 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
       </>;
     };
 
+    if (capabilitiesLoading) {
+      return <div className={'loading-capabilities'}>
+        <Loader
+          loadingText={''}
+          loading={capabilitiesLoading}
+        />
+      </div>;
+    }
+
     return <HashRouter hashType="noslash">
       <div className="console-application">
         <Switch>
diff --git a/web-console/src/views/home-view.tsx b/web-console/src/views/home-view.tsx
index 541f368f1763..55863d663717 100644
--- a/web-console/src/views/home-view.tsx
+++ b/web-console/src/views/home-view.tsx
@@ -20,6 +20,7 @@ import { Card, H5, Icon } from '@blueprintjs/core';
 import { IconName, IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
 import * as classNames from 'classnames';
+import {sum} from 'd3-array';
 import * as React from 'react';
 
 import { getHeadProp, pluralIfNeeded, queryDruidSql, QueryManager } from '../utils';
@@ -187,13 +188,13 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
       }
     });
 
-    this.segmentQueryManager.runQuery(`SELECT COUNT (*) as "count" FROM sys.segments`);
+    this.segmentQueryManager.runQuery(`SELECT COUNT(*) as "count" FROM sys.segments`);
 
     // -------------------------
 
     this.taskQueryManager = new QueryManager({
       processQuery: async (query) => {
-        let taskCountsFromQuery: any[] = [];
+        let taskCountsFromQuery: {status: string, count: number}[] = [];
         if (!noSqlMode) {
           taskCountsFromQuery = await queryDruidSql({ query });
         } else {
@@ -201,11 +202,13 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
           const runningTasksResp = await axios.get('/druid/indexer/v1/runningTasks');
           const waitingTasksResp = await axios.get('/druid/indexer/v1/waitingTasks');
           const pendingTasksResp = await axios.get('/druid/indexer/v1/pendingTasks');
-          taskCountsFromQuery.push({status: 'SUCCESS', count: completeTasksResp.data.filter((d: any) => d.status === 'SUCCESS').length});
-          taskCountsFromQuery.push({status: 'FAILED', count: completeTasksResp.data.filter((d: any) => d.status === 'FAILED').length});
-          taskCountsFromQuery.push({status: 'RUNNING', count: runningTasksResp.data.length});
-          taskCountsFromQuery.push({status: 'WAITING', count: waitingTasksResp.data.length});
-          taskCountsFromQuery.push({status: 'PENDING', count: pendingTasksResp.data.length});
+          taskCountsFromQuery.push(
+            {status: 'SUCCESS', count: completeTasksResp.data.filter((d: any) => d.status === 'SUCCESS').length},
+            {status: 'FAILED', count: completeTasksResp.data.filter((d: any) => d.status === 'FAILED').length},
+            {status: 'RUNNING', count: runningTasksResp.data.length},
+            {status: 'WAITING', count: waitingTasksResp.data.length},
+            {status: 'PENDING', count: pendingTasksResp.data.length}
+          );
         }
         const taskCounts = taskCountsFromQuery.reduce((acc: any, curr: any) => {
           const status = curr.status.toLowerCase();
@@ -240,9 +243,7 @@ GROUP BY 1`);
         const getDataServerNum = async () => {
           const allServerResp = await axios.get('/druid/coordinator/v1/servers?simple');
           const allServers = allServerResp.data;
-          return allServers.reduce((acc: number, s: any) => {
-            return acc + Number(s.type === 'historical');
-          }, 0);
+          return allServers.filter((s: any) => s.type === 'historical').length;
         };
         if (!noSqlMode) {
           const dataServerCounts = await queryDruidSql({ query });
diff --git a/web-console/src/views/segments-view.tsx b/web-console/src/views/segments-view.tsx
index 22bafee8da88..21e2c64ee442 100644
--- a/web-console/src/views/segments-view.tsx
+++ b/web-console/src/views/segments-view.tsx
@@ -53,10 +53,10 @@ export interface SegmentsViewProps extends React.Props<any> {
 
 export interface SegmentsViewState {
   segmentsLoading: boolean;
-  segments: any[] | null;
+  segments: SegmentQueryResultRow[] | null;
   segmentsError: string | null;
   segmentFilter: Filter[];
-  allSegments?: any[] | null;
+  allSegments?: SegmentQueryResultRow[] | null;
 }
 
 interface QueryAndSkip {
diff --git a/web-console/src/views/servers-view.tsx b/web-console/src/views/servers-view.tsx
index 9f77ad411266..8d7aa8c30f71 100644
--- a/web-console/src/views/servers-view.tsx
+++ b/web-console/src/views/servers-view.tsx
@@ -127,20 +127,17 @@ export class ServersView extends React.Component<ServersViewProps, ServersViewSt
   static getServers = async (): Promise<ServerQueryResultRow[]> => {
     const allServerResp = await axios.get('/druid/coordinator/v1/servers?simple');
     const allServers = allServerResp.data;
-    return allServers.reduce((result: ServerQueryResultRow[], s: any) => {
-      if (s.type === 'historical') {
-        result.push({
-          host: s.host.split(':')[0],
-          plaintext_port: parseInt(s.host.split(':')[1], 10),
-          server: s.host,
-          curr_size: s.currSize,
-          max_size: s.maxSize,
-          tier: s.tier,
-          tls_port: -1
-        });
-      }
-      return result;
-    }, []);
+    return allServers.filter((s: any) => s.type === 'historical').map((s: any) => {
+      return {
+        host: s.host.split(':')[0],
+        plaintext_port: parseInt(s.host.split(':')[1], 10),
+        server: s.host,
+        curr_size: s.currSize,
+        max_size: s.maxSize,
+        tier: s.tier,
+        tls_port: -1
+      };
+    });
   }
 
   componentDidMount(): void {
diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx
index d7cdc05e565a..bfdfd8ee1478 100644
--- a/web-console/src/views/tasks-view.tsx
+++ b/web-console/src/views/tasks-view.tsx
@@ -182,16 +182,12 @@ export class TasksView extends React.Component<TasksViewProps, TasksViewState> {
         if (!noSqlMode) {
           return await queryDruidSql({ query });
         } else {
-          const completeTasksResp = await axios.get('/druid/indexer/v1/completeTasks');
-          const runningTasksResp = await axios.get('/druid/indexer/v1/runningTasks');
-          const waitingTasksResp = await axios.get('/druid/indexer/v1/waitingTasks');
-          const pendingTasksResp = await axios.get('/druid/indexer/v1/pendingTasks');
-          const completeTasksResult = TasksView.parseTasks(completeTasksResp.data);
-          const runningTasksResult = TasksView.parseTasks(runningTasksResp.data);
-          const waitingTasksResult = TasksView.parseTasks(waitingTasksResp.data);
-          const pendingTasksResult = TasksView.parseTasks(pendingTasksResp.data);
-          const result: TaskQueryResultRow[] = [].concat.apply([], [completeTasksResult, runningTasksResult, waitingTasksResult, pendingTasksResult]);
-          return result;
+          const taskEndpoints: string[] = ['completeTasks', 'runningTasks', 'waitingTasks', 'pendingTasks'];
+          const result: TaskQueryResultRow[][] = await Promise.all(taskEndpoints.map(async (endpoint: string) => {
+            const resp = await axios.get(`/druid/indexer/v1/${endpoint}`);
+            return TasksView.parseTasks(resp.data);
+          }));
+          return [].concat.apply([], result);
         }
       },
       onStateChange: ({ result, loading, error }) => {

From 975019cd5accecdc8199454014b84142128891e3 Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 18 Apr 2019 22:58:42 -0700
Subject: [PATCH 11/13] removed unused imports

---
 web-console/src/views/home-view.tsx     | 2 --
 web-console/src/views/segments-view.tsx | 2 --
 web-console/src/views/servers-view.tsx  | 1 -
 web-console/src/views/tasks-view.tsx    | 1 -
 4 files changed, 6 deletions(-)

diff --git a/web-console/src/views/home-view.tsx b/web-console/src/views/home-view.tsx
index 55863d663717..33eb6e3c5220 100644
--- a/web-console/src/views/home-view.tsx
+++ b/web-console/src/views/home-view.tsx
@@ -19,8 +19,6 @@
 import { Card, H5, Icon } from '@blueprintjs/core';
 import { IconName, IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
-import * as classNames from 'classnames';
-import {sum} from 'd3-array';
 import * as React from 'react';
 
 import { getHeadProp, pluralIfNeeded, queryDruidSql, QueryManager } from '../utils';
diff --git a/web-console/src/views/segments-view.tsx b/web-console/src/views/segments-view.tsx
index 21e2c64ee442..1527534d63d8 100644
--- a/web-console/src/views/segments-view.tsx
+++ b/web-console/src/views/segments-view.tsx
@@ -20,14 +20,12 @@ import { Button, Intent } from '@blueprintjs/core';
 import { H5 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
-import * as classNames from 'classnames';
 import * as React from 'react';
 import ReactTable from 'react-table';
 import { Filter } from 'react-table';
 
 import { TableColumnSelection } from '../components/table-column-selection';
 import { ViewControlBar } from '../components/view-control-bar';
-import { AppToaster } from '../singletons/toaster';
 import {
   addFilter, customTableFilter,
   formatBytes,
diff --git a/web-console/src/views/servers-view.tsx b/web-console/src/views/servers-view.tsx
index 8d7aa8c30f71..832cebd023cd 100644
--- a/web-console/src/views/servers-view.tsx
+++ b/web-console/src/views/servers-view.tsx
@@ -19,7 +19,6 @@
 import { Button, Switch } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
-import * as classNames from 'classnames';
 import { sum } from 'd3-array';
 import * as React from 'react';
 import ReactTable from 'react-table';
diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx
index bfdfd8ee1478..8d559bc2159e 100644
--- a/web-console/src/views/tasks-view.tsx
+++ b/web-console/src/views/tasks-view.tsx
@@ -19,7 +19,6 @@
 import { Alert, Button, ButtonGroup, Intent, Label } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
-import * as classNames from 'classnames';
 import * as React from 'react';
 import ReactTable from 'react-table';
 import { Filter } from 'react-table';

From 257b3eb7dfcc01ac8ffb362f01dad60f290cfe7e Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Thu, 18 Apr 2019 23:06:59 -0700
Subject: [PATCH 12/13] terminate query manager

---
 web-console/src/console-application.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 69e12304bec6..0f069274062e 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -74,7 +74,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
   }
 
   static shownNotifications(capabilities: string) {
-    let message: JSX.Element;
+    let message: JSX.Element = <></>;
     /* tslint:disable:jsx-alignment */
     if (capabilities === 'working-without-sql') {
       message = <>
@@ -82,7 +82,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
         used and all requests rely on <a href={DRUID_DOCS_API}>native Druid query API</a>,
         but you may still <a href={DRUID_DOCS_SQL}>enable the SQL endpoint</a>
       </>;
-    } else {
+    } else if (capabilities === 'broken') {
       message = <>
         It appears that the Druid is not responding. Data cannot be retrieved right now
       </>;
@@ -138,6 +138,10 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
     this.capabilitiesQueryManager.runQuery('dummy');
   }
 
+  componentWillUnmount(): void {
+    this.capabilitiesQueryManager.terminate();
+  }
+
   private resetInitialsDelay() {
     setTimeout(() => {
       this.taskId = null;

From 72ba0f3d95e5a2d535addd6029a7b59e58c312de Mon Sep 17 00:00:00 2001
From: shuqi7 <shuqi7sq@gmail.com>
Date: Fri, 19 Apr 2019 15:20:01 -0700
Subject: [PATCH 13/13] fix wording

---
 web-console/src/console-application.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 0f069274062e..1c84632d1d45 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -78,9 +78,10 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
     /* tslint:disable:jsx-alignment */
     if (capabilities === 'working-without-sql') {
       message = <>
-        It appears that the SQL endpoint is disabled. No SQL endpoint is
-        used and all requests rely on <a href={DRUID_DOCS_API}>native Druid query API</a>,
-        but you may still <a href={DRUID_DOCS_SQL}>enable the SQL endpoint</a>
+        It appears that the SQL endpoint is disabled. The console will fall back
+        to <a href={DRUID_DOCS_API} target="_blank">native Druid APIs</a> and will be
+        limited in functionality. Look at <a href={DRUID_DOCS_SQL} target="_blank">the SQL docs</a> to
+        enable the SQL endpoint.
       </>;
     } else if (capabilities === 'broken') {
       message = <>