From 837de78925eba7b14cde48e0cd66cb445563a024 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Sun, 3 Feb 2019 22:15:44 -0800 Subject: [PATCH] Fixing little issues and CSS bugs in the new web console. --- web-console/src/console-application.scss | 5 ++++- web-console/src/console-application.tsx | 8 ++++---- web-console/src/dialogs/coordinator-dynamic-config.scss | 1 - web-console/src/dialogs/retention-dialog.tsx | 2 +- web-console/src/utils/general.tsx | 5 +++++ web-console/src/views/home-view.tsx | 6 +++--- web-console/src/views/tasks-view.tsx | 6 ++++-- 7 files changed, 21 insertions(+), 12 deletions(-) diff --git a/web-console/src/console-application.scss b/web-console/src/console-application.scss index b1df645df8ca..536e59c0d326 100644 --- a/web-console/src/console-application.scss +++ b/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 { diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx index 7aa1975b84b3..38c4c9d89907 100644 --- a/web-console/src/console-application.tsx +++ b/web-console/src/console-application.tsx @@ -131,10 +131,10 @@ export class ConsoleApplication extends React.Component { + const wrapInViewContainer = (active: HeaderActiveTab, el: JSX.Element, scrollable = false) => { return <> -
{el}
+
{el}
; }; @@ -148,10 +148,10 @@ export class ConsoleApplication extends React.Component); }} /> { - return wrapInViewContainer('tasks', ); + return wrapInViewContainer('tasks', , true); }} /> { - return wrapInViewContainer('servers', ); + return wrapInViewContainer('servers', , true); }} /> { return wrapInViewContainer('sql', ); diff --git a/web-console/src/dialogs/coordinator-dynamic-config.scss b/web-console/src/dialogs/coordinator-dynamic-config.scss index 663c029c3849..a95edc25040a 100644 --- a/web-console/src/dialogs/coordinator-dynamic-config.scss +++ b/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 { diff --git a/web-console/src/dialogs/retention-dialog.tsx b/web-console/src/dialogs/retention-dialog.tsx index 668b6887d1cb..36a244a30761 100644 --- a/web-console/src/dialogs/retention-dialog.tsx +++ b/web-console/src/dialogs/retention-dialog.tsx @@ -167,7 +167,7 @@ export class RetentionDialog extends React.Component - This datasource currently has no rule, it will use the cluster defaults (edit cluster defaults) + This datasource currently has no rules, it will use the cluster defaults (edit cluster defaults)

} ; diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx index 32835f90cd68..873e634bc31e 100644 --- a/web-console/src/utils/general.tsx +++ b/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[], prop: string): any { + if (!results || !results.length) return null; + return results[0][prop] || null; +} + // ---------------------------- export function localStorageSet(key: string, value: string): void { diff --git a/web-console/src/views/home-view.tsx b/web-console/src/views/home-view.tsx index 4f8ed85b4f8c..7258fe861ca2 100644 --- a/web-console/src/views/home-view.tsx +++ b/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 { 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({ diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx index 78c69e599ba4..8f394584f33d 100644 --- a/web-console/src/views/tasks-view.tsx +++ b/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 { - 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 '';