Fixing little issues and CSS bugs in the new web console. (#6995)

web-console/src/console-application.scss

@@ -39,8 +39,11 @@
     left: 0;
     right: 0;
     bottom: 0;
-    overflow-y: scroll;
     padding: $standard-padding;
+
+    &.scrollable {
+      overflow-y: scroll;
+    }
   }
 
   .control-separator {

web-console/src/console-application.tsx

@@ -131,10 +131,10 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
   }
 
   render() {
-    const wrapInViewContainer = (active: HeaderActiveTab, el: JSX.Element) => {
+    const wrapInViewContainer = (active: HeaderActiveTab, el: JSX.Element, scrollable = false) => {
       return <>
         <HeaderBar active={active}/>
-        <div className="view-container">{el}</div>
+        <div className={classNames('view-container', { scrollable })}>{el}</div>
       </>;
     };
 
@@ -148,10 +148,10 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
             return wrapInViewContainer('segments', <SegmentsView datasource={this.datasource} onlyUnavailable={this.onlyUnavailable} goToSql={this.goToSql}/>);
           }} />
           <Route path="/tasks" component={() => {
-            return wrapInViewContainer('tasks', <TasksView taskId={this.taskId} goToSql={this.goToSql} goToMiddleManager={this.goToMiddleManager}/>);
+            return wrapInViewContainer('tasks', <TasksView taskId={this.taskId} goToSql={this.goToSql} goToMiddleManager={this.goToMiddleManager}/>, true);
           }} />
           <Route path="/servers" component={() => {
-            return wrapInViewContainer('servers', <ServersView middleManager={this.middleManager} goToSql={this.goToSql} goToTask={this.goToTask}/>);
+            return wrapInViewContainer('servers', <ServersView middleManager={this.middleManager} goToSql={this.goToSql} goToTask={this.goToTask}/>, true);
           }} />
           <Route path="/sql" component={() => {
             return wrapInViewContainer('sql', <SqlView initSql={this.initSql}/>);

web-console/src/dialogs/coordinator-dynamic-config.scss

@@ -18,7 +18,6 @@
 
 .coordinator-dynamic-config {
   .bp3-dialog-body {
-    overflow: scroll;
     max-height: 70vh;
 
     .auto-form {

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

@@ -167,7 +167,7 @@ export class RetentionDialog extends React.Component<RetentionDialogProps, Reten
       {
         (!currentRules.length && datasource !== '_default') &&
         <p>
-          This datasource currently has no rule, it will use the cluster defaults (<a onClick={onEditDefaults}>edit cluster defaults</a>)
+          This datasource currently has no rules, it will use the cluster defaults (<a onClick={onEditDefaults}>edit cluster defaults</a>)
         </p>
       }
     </SnitchDialog>;

web-console/src/utils/general.tsx

@@ -121,6 +121,11 @@ export function pluralIfNeeded(n: number, singular: string, plural?: string): st
   return `${formatNumber(n)} ${n === 1 ? singular : plural}`;
 }
 
+export function getHeadProp(results: Record<string, any>[], prop: string): any {
+  if (!results || !results.length) return null;
+  return results[0][prop] || null;
+}
+
 // ----------------------------
 
 export function localStorageSet(key: string, value: string): void {

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

@@ -21,7 +21,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { H5, Card, Icon } from "@blueprintjs/core";
 import { IconName, IconNames } from "@blueprintjs/icons";
-import { QueryManager, pluralIfNeeded, queryDruidSql } from '../utils';
+import { QueryManager, pluralIfNeeded, queryDruidSql, getHeadProp } from '../utils';
 import './home-view.scss';
 
 export interface CardOptions {
@@ -147,7 +147,7 @@ export class HomeView extends React.Component<HomeViewProps, HomeViewState> {
     this.segmentQueryManager = new QueryManager({
       processQuery: async (query) => {
         const segments = await queryDruidSql({ query });
-        return segments[0].count;
+        return getHeadProp(segments, 'count') || 0;
       },
       onStateChange: ({ result, loading, error }) => {
         this.setState({
@@ -211,7 +211,7 @@ GROUP BY 1`);
     this.dataServerQueryManager = new QueryManager({
       processQuery: async (query) => {
         const dataServerCounts = await queryDruidSql({ query });
-        return dataServerCounts[0].count;
+        return getHeadProp(dataServerCounts, 'count') || 0;
       },
       onStateChange: ({ result, loading, error }) => {
         this.setState({

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

@@ -167,6 +167,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
       message: 'Supervisor submitted successfully',
       intent: Intent.SUCCESS
     });
+    this.supervisorQueryManager.rerunLastQuery();
   }
 
   private async submitTask(spec: JSON) {
@@ -184,6 +185,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
       message: 'Task submitted successfully',
       intent: Intent.SUCCESS
     });
+    this.taskQueryManager.rerunLastQuery();
   }
 
   renderResumeSupervisorAction() {
@@ -192,7 +194,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
     return <AsyncActionDialog
       action={
         resumeSupervisorId ? async () => {
-          const resp = await axios.post(`/druid/indexer/v1/supervisor/${resumeSupervisorId}/suspend`, {})
+          const resp = await axios.post(`/druid/indexer/v1/supervisor/${resumeSupervisorId}/suspend`, {});
           return resp.data;
         } : null
       }
@@ -489,7 +491,7 @@ ORDER BY "rank" DESC, "created_time" DESC`);
             Header: 'Actions',
             id: 'actions',
             accessor: 'task_id',
-            width: 320,
+            width: 360,
             filterable: false,
             Cell: row => {
               if (row.aggregated) return '';