You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by cw...@apache.org on 2019/04/01 20:10:57 UTC
[incubator-druid] branch master updated: Popovers are no longer
inline (#7389)
This is an automated email from the ASF dual-hosted git repository.
cwylie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-druid.git
The following commit(s) were added to refs/heads/master by this push:
new 1137bb2 Popovers are no longer inline (#7389)
1137bb2 is described below
commit 1137bb2586387b0d150b25c6a7b7a7939307756b
Author: Vadim Ogievetsky <va...@gmail.com>
AuthorDate: Mon Apr 1 13:10:48 2019 -0700
Popovers are no longer inline (#7389)
---
web-console/src/components/filler.tsx | 15 ++++++++-------
web-console/src/components/header-bar.tsx | 8 ++++----
web-console/src/components/sql-control.tsx | 2 +-
.../src/components/table-column-selection.scss | 12 +++++++-----
.../src/components/table-column-selection.tsx | 22 +++++++++++-----------
web-console/src/console-application.scss | 3 ++-
web-console/src/dialogs/about-dialog.tsx | 1 -
web-console/src/dialogs/async-action-dialog.tsx | 1 -
.../src/dialogs/overlord-dynamic-config.scss | 5 ++---
web-console/src/dialogs/retention-dialog.tsx | 1 -
web-console/src/dialogs/snitch-dialog.tsx | 2 +-
web-console/src/dialogs/spec-dialog.scss | 9 +++++++--
web-console/src/dialogs/spec-dialog.tsx | 8 +++++---
web-console/src/entry.scss | 2 ++
web-console/src/utils/general.tsx | 2 +-
15 files changed, 51 insertions(+), 42 deletions(-)
diff --git a/web-console/src/components/filler.tsx b/web-console/src/components/filler.tsx
index 422ae00..7df1594 100644
--- a/web-console/src/components/filler.tsx
+++ b/web-console/src/components/filler.tsx
@@ -268,7 +268,9 @@ export class TagInput extends React.Component<TagInputProps, { stringValue: stri
interface JSONInputProps extends React.Props<any> {
onChange: (newJSONValue: any) => void;
value: any;
- updateInputValidity: (valueValid: boolean) => void;
+ updateInputValidity?: (valueValid: boolean) => void;
+ focus?: boolean;
+ width?: string;
height?: string;
}
@@ -301,10 +303,9 @@ export class JSONInput extends React.Component<JSONInputProps, JSONInputState> {
}
render() {
- const { onChange, updateInputValidity, height } = this.props;
+ const { onChange, updateInputValidity, focus, width, height } = this.props;
const { stringValue } = this.state;
return <AceEditor
- className={"bp3-fill"}
key={"hjson"}
mode={"hjson"}
theme="solarized_dark"
@@ -312,12 +313,12 @@ export class JSONInput extends React.Component<JSONInputProps, JSONInputState> {
onChange={(e: string) => {
this.setState({stringValue: e});
if (validJson(e) || e === "") onChange(parseStringToJSON(e));
- updateInputValidity(validJson(e) || e === '');
+ if (updateInputValidity) updateInputValidity(validJson(e) || e === '');
}}
- focus
+ focus={focus}
fontSize={12}
- width={'100%'}
- height={height ? height : "8vh"}
+ width={width || '100%'}
+ height={height || "8vh"}
showPrintMargin={false}
showGutter={false}
value={stringValue}
diff --git a/web-console/src/components/header-bar.tsx b/web-console/src/components/header-bar.tsx
index ec3e283..821f1e3 100644
--- a/web-console/src/components/header-bar.tsx
+++ b/web-console/src/components/header-bar.tsx
@@ -114,7 +114,7 @@ export class HeaderBar extends React.Component<HeaderBarProps, HeaderBarState> {
<MenuItem iconName={IconNames.MAP} text="Legacy overlord console" href={LEGACY_OVERLORD_CONSOLE} target="_blank" />
</Menu>;
- const helpMenu = <Menu>
+ const helpMenu = <Menu>
<MenuItem iconName={IconNames.GRAPH} text="About" onClick={() => this.setState({ aboutDialogOpen: true })} />
<MenuItem iconName={IconNames.TH} text="Docs" href={DRUID_DOCS} target="_blank" />
<MenuItem iconName={IconNames.USER} text="User group" href={DRUID_USER_GROUP} target="_blank" />
@@ -139,15 +139,15 @@ export class HeaderBar extends React.Component<HeaderBarProps, HeaderBarState> {
<AnchorButton className={classNames(Classes.MINIMAL, { 'pt-active': active === 'servers' })} iconName={IconNames.DATABASE} text="Data servers" href="#servers" />
<NavbarDivider />
<AnchorButton className={classNames(Classes.MINIMAL, { 'pt-active': active === 'sql' })} iconName={IconNames.APPLICATION} text="SQL" href="#sql" />
- <Popover className="config-popover" content={configMenu} position={Position.BOTTOM_LEFT} inline>
+ <Popover className="config-popover" content={configMenu} position={Position.BOTTOM_LEFT}>
<Button className={Classes.MINIMAL} iconName={IconNames.SETTINGS} text="Config"/>
</Popover>
</NavbarGroup>
<NavbarGroup align={Alignment.RIGHT}>
- <Popover className="legacy-popover" content={legacyMenu} position={Position.BOTTOM_RIGHT} inline>
+ <Popover className="legacy-popover" content={legacyMenu} position={Position.BOTTOM_RIGHT}>
<Button className={Classes.MINIMAL} iconName={IconNames.SHARE} text="Legacy" />
</Popover>
- <Popover className="help-popover" content={helpMenu} position={Position.BOTTOM_RIGHT} inline>
+ <Popover className="help-popover" content={helpMenu} position={Position.BOTTOM_RIGHT}>
<Button className={Classes.MINIMAL} iconName={IconNames.HELP} text="Help" />
</Popover>
</NavbarGroup>
diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx
index c63b880..5a2b745 100644
--- a/web-console/src/components/sql-control.tsx
+++ b/web-console/src/components/sql-control.tsx
@@ -208,7 +208,7 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
<Button rightIconName={IconNames.CARET_RIGHT} onClick={() => onRun(query)}>
{isRune ? 'Rune' : 'Run'}
</Button>
- <Popover position={Position.BOTTOM_LEFT} content={autoCompletePopover} inline>
+ <Popover position={Position.BOTTOM_LEFT} content={autoCompletePopover}>
<Button className={`${Classes.MINIMAL} pt-icon-more`}/>
</Popover>
</div>
diff --git a/web-console/src/components/table-column-selection.scss b/web-console/src/components/table-column-selection.scss
index c651a4d..c9755e6 100644
--- a/web-console/src/components/table-column-selection.scss
+++ b/web-console/src/components/table-column-selection.scss
@@ -21,13 +21,15 @@
position: absolute;
right: 0;
}
+}
- .pt-popover-content {
- padding: 10px 10px 1px 10px;
- }
-
+// This will be mounted in a portal
+.table-column-selection-menu {
.form-group {
margin-bottom: 0;
- }
+ .pt-checkbox:last-child {
+ margin-bottom: 0;
+ }
+ }
}
diff --git a/web-console/src/components/table-column-selection.tsx b/web-console/src/components/table-column-selection.tsx
index bd86fe7..da67d6b 100644
--- a/web-console/src/components/table-column-selection.tsx
+++ b/web-console/src/components/table-column-selection.tsx
@@ -16,7 +16,7 @@
* limitations under the License.
*/
-import { Button, Checkbox, Popover, Position } from "@blueprintjs/core";
+import { Button, Checkbox, Menu, Popover, Position } from "@blueprintjs/core";
import * as React from 'react';
import { FormGroup, IconNames } from "./filler";
@@ -44,23 +44,23 @@ export class TableColumnSelection extends React.Component<TableColumnSelectionPr
render() {
const { columns, onChange, tableColumnsHidden } = this.props;
- const checkboxes = <FormGroup>
- {
- columns.map(column => {
- return <Checkbox
+ const checkboxes = <Menu className="table-column-selection-menu">
+ <FormGroup>
+ {columns.map(column => (
+ <Checkbox
label={column}
key={column}
checked={!tableColumnsHidden.includes(column)}
onChange={() => onChange(column)}
- />;
- })
- }
- </FormGroup>;
+ />
+ ))}
+ </FormGroup>
+ </Menu>;
+
return <Popover
- className={"table-column-selection"}
+ className="table-column-selection"
content={checkboxes}
position={Position.BOTTOM_RIGHT}
- inline
>
<Button rightIconName={IconNames.CARET_DOWN} text={"Columns"} />
</Popover>;
diff --git a/web-console/src/console-application.scss b/web-console/src/console-application.scss
index 875b13d..c4de745 100644
--- a/web-console/src/console-application.scss
+++ b/web-console/src/console-application.scss
@@ -19,8 +19,9 @@
@import "./variables";
.console-application {
- position: relative;
+ position: absolute;
height: 100%;
+ width: 100%;
.view-container {
position: absolute;
diff --git a/web-console/src/dialogs/about-dialog.tsx b/web-console/src/dialogs/about-dialog.tsx
index 570fc13..7f6ddfd 100644
--- a/web-console/src/dialogs/about-dialog.tsx
+++ b/web-console/src/dialogs/about-dialog.tsx
@@ -44,7 +44,6 @@ export class AboutDialog extends React.Component<AboutDialogProps, AboutDialogSt
onClose={onClose}
title="Apache Druid"
isOpen
- inline
canEscapeKeyClose
>
<div className={Classes.DIALOG_BODY}>
diff --git a/web-console/src/dialogs/async-action-dialog.tsx b/web-console/src/dialogs/async-action-dialog.tsx
index bbab05c..d943741 100644
--- a/web-console/src/dialogs/async-action-dialog.tsx
+++ b/web-console/src/dialogs/async-action-dialog.tsx
@@ -86,7 +86,6 @@ export class AsyncActionDialog extends React.Component<AsyncAlertDialogProps, As
return <Dialog
isOpen
- inline
className={classNames(Classes.ALERT, 'async-alert-dialog', className)}
canEscapeKeyClose={!working}
onClose={handleClose}
diff --git a/web-console/src/dialogs/overlord-dynamic-config.scss b/web-console/src/dialogs/overlord-dynamic-config.scss
index 0a8dcfc..45a87d0 100644
--- a/web-console/src/dialogs/overlord-dynamic-config.scss
+++ b/web-console/src/dialogs/overlord-dynamic-config.scss
@@ -17,13 +17,12 @@
*/
.overlord-dynamic-config {
-
&.pt-dialog {
+ margin-top: 5vh;
+ top: 5%;
width: 600px;
}
- margin-top: 5vh;
-
.pt-dialog-body {
max-height: 70vh;
diff --git a/web-console/src/dialogs/retention-dialog.tsx b/web-console/src/dialogs/retention-dialog.tsx
index e427ce5..d59e181 100644
--- a/web-console/src/dialogs/retention-dialog.tsx
+++ b/web-console/src/dialogs/retention-dialog.tsx
@@ -168,7 +168,6 @@ export class RetentionDialog extends React.Component<RetentionDialogProps, Reten
saveDisabled={false}
canOutsideClickClose={false}
isOpen
- inline
onClose={onCancel}
title={`Edit retention rules: ${datasource}${datasource === '_default' ? ' (cluster defaults)' : ''}`}
onReset={this.reset}
diff --git a/web-console/src/dialogs/snitch-dialog.tsx b/web-console/src/dialogs/snitch-dialog.tsx
index 1d4cdb0..11052e4 100644
--- a/web-console/src/dialogs/snitch-dialog.tsx
+++ b/web-console/src/dialogs/snitch-dialog.tsx
@@ -161,7 +161,7 @@ export class SnitchDialog extends React.Component<SnitchDialogProps, SnitchDialo
if (showFinalStep) return this.renderFinalStep();
if (showHistory) return this.renderHistoryDialog();
- return <Dialog isOpen inline {...this.props}>
+ return <Dialog isOpen {...this.props}>
<div className={Classes.DIALOG_BODY}>
{children}
</div>
diff --git a/web-console/src/dialogs/spec-dialog.scss b/web-console/src/dialogs/spec-dialog.scss
index 511ddca..abc1493 100644
--- a/web-console/src/dialogs/spec-dialog.scss
+++ b/web-console/src/dialogs/spec-dialog.scss
@@ -16,8 +16,13 @@
* limitations under the License.
*/
-.post-spec-dialog {
- .post-spec-dialog-textarea {
+.spec-dialog {
+ &.pt-dialog {
+ top: 5%;
+ width: 90%;
+ }
+
+ .spec-dialog-textarea {
background-color: #232C35;
margin-bottom: 10px;
diff --git a/web-console/src/dialogs/spec-dialog.tsx b/web-console/src/dialogs/spec-dialog.tsx
index 9b65901..5ff4af6 100644
--- a/web-console/src/dialogs/spec-dialog.tsx
+++ b/web-console/src/dialogs/spec-dialog.tsx
@@ -28,6 +28,7 @@ export interface SpecDialogProps extends React.Props<any> {
onSubmit: (spec: JSON) => void;
onClose: () => void;
title: string;
+ initSpec?: any;
}
export interface SpecDialogState {
@@ -47,7 +48,7 @@ export class SpecDialog extends React.Component<SpecDialogProps, SpecDialogState
constructor(props: SpecDialogProps) {
super(props);
this.state = {
- spec: ""
+ spec: props.initSpec ? JSON.stringify(props.initSpec, null, 2) : '{\n\n}'
};
}
@@ -64,15 +65,16 @@ export class SpecDialog extends React.Component<SpecDialogProps, SpecDialogState
const { spec } = this.state;
return <Dialog
- className={"post-spec-dialog"}
+ className={"spec-dialog"}
isOpen
onClose={onClose}
title={title}
+ canOutsideClickClose={false}
>
<AceEditor
mode="json"
theme="solarized_dark"
- className={"post-spec-dialog-textarea"}
+ className={"spec-dialog-textarea"}
onChange={(e) => { this.setState({ spec: e }); }}
fontSize={12}
showPrintMargin={false}
diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss
index f74afd5..d8c3d39 100644
--- a/web-console/src/entry.scss
+++ b/web-console/src/entry.scss
@@ -46,5 +46,7 @@ svg {
}
.app-container {
+ position: absolute;
height: 100%;
+ width: 100%;
}
diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
index cad6488..5fb696c 100644
--- a/web-console/src/utils/general.tsx
+++ b/web-console/src/utils/general.tsx
@@ -43,7 +43,7 @@ export function makeTextFilter(placeholder = ''): FilterRender {
key={key}
onChange={(e: any) => onChange(e.target.value)}
value={filterValue}
- rightElement={filterValue ? <Button iconName={IconNames.CROSS} className="pt-minimal" onClick={() => onChange('')} /> : undefined}
+ rightElement={filterValue && <Button iconName={IconNames.CROSS} className="pt-minimal" onClick={() => onChange('')} />}
placeholder={placeholder}
/>;
};
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org