You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by GitBox <gi...@apache.org> on 2021/06/10 21:38:51 UTC
[GitHub] [druid] jgoz opened a new pull request #11357: Web console: Remove support for IE11 and other older browsers
jgoz opened a new pull request #11357:
URL: https://github.com/apache/druid/pull/11357
### Description
There are some ES6 features, such as `Proxy`, that would make sense to use in various parts of the web console. Unfortunately, many of these cannot be polyfilled and therefore cannot be used in older browsers like IE11.
Since IE11 will be officially retired in about 1 year and its rendering engine still exists inside of the new Edge for those who need it, there is no compelling reason to continue supporting it in the web console. Dropping IE and other browsers that lack ES6 support will both slim down the JS payload and allow us to use new ES features that have ostensibly been available for a few years in the majority of browsers.
<hr>
##### Key changes
* Consolidate and update `browserslist` declaration to include only those browsers that support ES6
* Update TypeScript compilation target to `es2016`
* Add a banner to `unified-console.html` if an unsupported browser is detected (using existence of `Proxy` as a rough indicator of support)
<hr>
<!-- Check the items by putting "x" in the brackets for the done things. Not all of these items apply to every PR. Remove the items which are not done or not relevant to the PR. None of the items from the checklist below are strictly necessary, but it would be very helpful if you at least self-review the PR. -->
This PR has:
- [x] been self-reviewed.
- [x] been tested in a test Druid cluster.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org
[GitHub] [druid] jgoz commented on a change in pull request #11357: Web console: Remove support for IE11 and other older browsers
Posted by GitBox <gi...@apache.org>.
jgoz commented on a change in pull request #11357:
URL: https://github.com/apache/druid/pull/11357#discussion_r649612141
##########
File path: web-console/src/views/query-view/run-button/run-button.tsx
##########
@@ -59,127 +57,123 @@ export interface RunButtonProps {
onPrettier: () => void;
}
-@HotkeysTarget
-export class RunButton extends React.PureComponent<RunButtonProps> {
- public renderHotkeys() {
- return (
- <Hotkeys>
- <Hotkey
- allowInInput
- global
- combo="ctrl + enter"
- label="run on click"
- onKeyDown={this.handleRun}
- />
- </Hotkeys>
- );
- }
+const RunButtonExtraMenu = (props: RunButtonProps) => {
+ const {
+ runeMode,
+ onExplain,
+ queryContext,
+ onQueryContextChange,
+ onEditContext,
+ onHistory,
+ onPrettier,
+ } = props;
+
+ const useCache = getUseCache(queryContext);
+ const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
+ const useApproximateTopN = getUseApproximateTopN(queryContext);
+ const numContextKeys = Object.keys(queryContext).length;
+
+ return (
+ <Menu>
+ <MenuItem
+ icon={IconNames.HELP}
+ text={runeMode ? 'Native query documentation' : 'DruidSQL documentation'}
+ href={getLink(runeMode ? 'DOCS_RUNE' : 'DOCS_SQL')}
+ target="_blank"
+ />
+ <MenuItem icon={IconNames.HISTORY} text="Query history" onClick={onHistory} />
+ {!runeMode && onExplain && (
+ <MenuItem icon={IconNames.CLEAN} text="Explain SQL query" onClick={onExplain} />
+ )}
+ {runeMode && (
+ <MenuItem icon={IconNames.ALIGN_LEFT} text="Prettify JSON" onClick={onPrettier} />
+ )}
+ <MenuItem
+ icon={IconNames.PROPERTIES}
+ text="Edit context"
+ onClick={onEditContext}
+ label={numContextKeys ? pluralIfNeeded(numContextKeys, 'key') : undefined}
+ />
+ <MenuDivider />
+ {!runeMode && (
+ <>
+ <MenuCheckbox
+ checked={useApproximateCountDistinct}
+ text="Use approximate COUNT(DISTINCT)"
+ onChange={() => {
+ onQueryContextChange(
+ setUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
+ );
+ }}
+ />
+ <MenuCheckbox
+ checked={useApproximateTopN}
+ text="Use approximate TopN"
+ onChange={() => {
+ onQueryContextChange(setUseApproximateTopN(queryContext, !useApproximateTopN));
+ }}
+ />
+ </>
+ )}
+ <MenuCheckbox
+ checked={useCache}
+ text="Use cache"
+ onChange={() => {
+ onQueryContextChange(setUseCache(queryContext, !useCache));
+ }}
+ />
+ </Menu>
+ );
+};
+
+export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
+ const { runeMode, onRun, loading } = props;
- private readonly handleRun = () => {
- const { onRun } = this.props;
+ const handleRun = React.useCallback(() => {
if (!onRun) return;
onRun();
- };
+ }, [onRun]);
- renderExtraMenu() {
- const {
- runeMode,
- onExplain,
- queryContext,
- onQueryContextChange,
- onEditContext,
- onHistory,
- onPrettier,
- } = this.props;
+ const hotkeys = React.useMemo(() => {
+ return [
+ {
+ allowInInput: true,
+ global: true,
+ combo: 'ctrl + enter',
+ label: 'run on click',
+ onKeyDown: handleRun,
+ },
+ ];
+ }, [handleRun]);
- const useCache = getUseCache(queryContext);
- const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
- const useApproximateTopN = getUseApproximateTopN(queryContext);
- const numContextKeys = Object.keys(queryContext).length;
+ const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
Review comment:
Yeah that makes total sense
##########
File path: web-console/src/views/query-view/run-button/run-button.tsx
##########
@@ -59,127 +57,123 @@ export interface RunButtonProps {
onPrettier: () => void;
}
-@HotkeysTarget
-export class RunButton extends React.PureComponent<RunButtonProps> {
- public renderHotkeys() {
- return (
- <Hotkeys>
- <Hotkey
- allowInInput
- global
- combo="ctrl + enter"
- label="run on click"
- onKeyDown={this.handleRun}
- />
- </Hotkeys>
- );
- }
+const RunButtonExtraMenu = (props: RunButtonProps) => {
+ const {
+ runeMode,
+ onExplain,
+ queryContext,
+ onQueryContextChange,
+ onEditContext,
+ onHistory,
+ onPrettier,
+ } = props;
+
+ const useCache = getUseCache(queryContext);
+ const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
+ const useApproximateTopN = getUseApproximateTopN(queryContext);
+ const numContextKeys = Object.keys(queryContext).length;
+
+ return (
+ <Menu>
+ <MenuItem
+ icon={IconNames.HELP}
+ text={runeMode ? 'Native query documentation' : 'DruidSQL documentation'}
+ href={getLink(runeMode ? 'DOCS_RUNE' : 'DOCS_SQL')}
+ target="_blank"
+ />
+ <MenuItem icon={IconNames.HISTORY} text="Query history" onClick={onHistory} />
+ {!runeMode && onExplain && (
+ <MenuItem icon={IconNames.CLEAN} text="Explain SQL query" onClick={onExplain} />
+ )}
+ {runeMode && (
+ <MenuItem icon={IconNames.ALIGN_LEFT} text="Prettify JSON" onClick={onPrettier} />
+ )}
+ <MenuItem
+ icon={IconNames.PROPERTIES}
+ text="Edit context"
+ onClick={onEditContext}
+ label={numContextKeys ? pluralIfNeeded(numContextKeys, 'key') : undefined}
+ />
+ <MenuDivider />
+ {!runeMode && (
+ <>
+ <MenuCheckbox
+ checked={useApproximateCountDistinct}
+ text="Use approximate COUNT(DISTINCT)"
+ onChange={() => {
+ onQueryContextChange(
+ setUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
+ );
+ }}
+ />
+ <MenuCheckbox
+ checked={useApproximateTopN}
+ text="Use approximate TopN"
+ onChange={() => {
+ onQueryContextChange(setUseApproximateTopN(queryContext, !useApproximateTopN));
+ }}
+ />
+ </>
+ )}
+ <MenuCheckbox
+ checked={useCache}
+ text="Use cache"
+ onChange={() => {
+ onQueryContextChange(setUseCache(queryContext, !useCache));
+ }}
+ />
+ </Menu>
+ );
+};
+
+export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
+ const { runeMode, onRun, loading } = props;
- private readonly handleRun = () => {
- const { onRun } = this.props;
+ const handleRun = React.useCallback(() => {
if (!onRun) return;
onRun();
- };
+ }, [onRun]);
- renderExtraMenu() {
- const {
- runeMode,
- onExplain,
- queryContext,
- onQueryContextChange,
- onEditContext,
- onHistory,
- onPrettier,
- } = this.props;
+ const hotkeys = React.useMemo(() => {
+ return [
+ {
+ allowInInput: true,
+ global: true,
+ combo: 'ctrl + enter',
+ label: 'run on click',
Review comment:
Done
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org
[GitHub] [druid] vogievetsky merged pull request #11357: Web console: Remove support for IE11 and other older browsers
Posted by GitBox <gi...@apache.org>.
vogievetsky merged pull request #11357:
URL: https://github.com/apache/druid/pull/11357
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org
[GitHub] [druid] vogievetsky commented on a change in pull request #11357: Web console: Remove support for IE11 and other older browsers
Posted by GitBox <gi...@apache.org>.
vogievetsky commented on a change in pull request #11357:
URL: https://github.com/apache/druid/pull/11357#discussion_r649614804
##########
File path: web-console/unified-console.html
##########
@@ -27,9 +27,49 @@
<title>Apache Druid</title>
<meta name="description" content="Apache Druid console" />
<link rel="shortcut icon" href="favicon.png" />
+ <style>
+ body {
+ background: #24283b;
+ }
+ #browser-update {
+ background-color: #d9822b;
+ border-radius: 3px;
+ color: #ffffff;
+ font-family: sans-serif;
+ font-size: 13px;
+ line-height: 1.2;
+ padding: 13px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ z-index: 11;
+ }
+ #browser-update a {
+ color: white;
+ font-weight: bold;
+ }
+ </style>
</head>
<body class="bp3-dark mouse-mode">
<div class="app-container"></div>
+ <div id="browser-update" style="display: none">
+ You are using an unsupported browser, so the console will not work properly.
Review comment:
```suggestion
You are using an unsupported browser. The console will not work properly.
```
##########
File path: web-console/src/views/query-view/run-button/run-button.tsx
##########
@@ -59,127 +57,123 @@ export interface RunButtonProps {
onPrettier: () => void;
}
-@HotkeysTarget
-export class RunButton extends React.PureComponent<RunButtonProps> {
- public renderHotkeys() {
- return (
- <Hotkeys>
- <Hotkey
- allowInInput
- global
- combo="ctrl + enter"
- label="run on click"
- onKeyDown={this.handleRun}
- />
- </Hotkeys>
- );
- }
+const RunButtonExtraMenu = (props: RunButtonProps) => {
+ const {
+ runeMode,
+ onExplain,
+ queryContext,
+ onQueryContextChange,
+ onEditContext,
+ onHistory,
+ onPrettier,
+ } = props;
+
+ const useCache = getUseCache(queryContext);
+ const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
+ const useApproximateTopN = getUseApproximateTopN(queryContext);
+ const numContextKeys = Object.keys(queryContext).length;
+
+ return (
+ <Menu>
+ <MenuItem
+ icon={IconNames.HELP}
+ text={runeMode ? 'Native query documentation' : 'DruidSQL documentation'}
+ href={getLink(runeMode ? 'DOCS_RUNE' : 'DOCS_SQL')}
+ target="_blank"
+ />
+ <MenuItem icon={IconNames.HISTORY} text="Query history" onClick={onHistory} />
+ {!runeMode && onExplain && (
+ <MenuItem icon={IconNames.CLEAN} text="Explain SQL query" onClick={onExplain} />
+ )}
+ {runeMode && (
+ <MenuItem icon={IconNames.ALIGN_LEFT} text="Prettify JSON" onClick={onPrettier} />
+ )}
+ <MenuItem
+ icon={IconNames.PROPERTIES}
+ text="Edit context"
+ onClick={onEditContext}
+ label={numContextKeys ? pluralIfNeeded(numContextKeys, 'key') : undefined}
+ />
+ <MenuDivider />
+ {!runeMode && (
+ <>
+ <MenuCheckbox
+ checked={useApproximateCountDistinct}
+ text="Use approximate COUNT(DISTINCT)"
+ onChange={() => {
+ onQueryContextChange(
+ setUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
+ );
+ }}
+ />
+ <MenuCheckbox
+ checked={useApproximateTopN}
+ text="Use approximate TopN"
+ onChange={() => {
+ onQueryContextChange(setUseApproximateTopN(queryContext, !useApproximateTopN));
+ }}
+ />
+ </>
+ )}
+ <MenuCheckbox
+ checked={useCache}
+ text="Use cache"
+ onChange={() => {
+ onQueryContextChange(setUseCache(queryContext, !useCache));
+ }}
+ />
+ </Menu>
+ );
+};
+
+export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
+ const { runeMode, onRun, loading } = props;
- private readonly handleRun = () => {
- const { onRun } = this.props;
+ const handleRun = React.useCallback(() => {
if (!onRun) return;
onRun();
- };
+ }, [onRun]);
- renderExtraMenu() {
- const {
- runeMode,
- onExplain,
- queryContext,
- onQueryContextChange,
- onEditContext,
- onHistory,
- onPrettier,
- } = this.props;
+ const hotkeys = React.useMemo(() => {
+ return [
+ {
+ allowInInput: true,
+ global: true,
+ combo: 'ctrl + enter',
+ label: 'run on click',
+ onKeyDown: handleRun,
+ },
+ ];
+ }, [handleRun]);
- const useCache = getUseCache(queryContext);
- const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
- const useApproximateTopN = getUseApproximateTopN(queryContext);
- const numContextKeys = Object.keys(queryContext).length;
+ const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys);
Review comment:
Love the new API! I don't think you need to bind the local `handleKeyDown`, `handleKeyUp` handlers since we only have a global hot key here (and that is not going to change - we will not have hotkeys local to a button).
##########
File path: web-console/src/views/query-view/run-button/run-button.tsx
##########
@@ -59,127 +57,123 @@ export interface RunButtonProps {
onPrettier: () => void;
}
-@HotkeysTarget
-export class RunButton extends React.PureComponent<RunButtonProps> {
- public renderHotkeys() {
- return (
- <Hotkeys>
- <Hotkey
- allowInInput
- global
- combo="ctrl + enter"
- label="run on click"
- onKeyDown={this.handleRun}
- />
- </Hotkeys>
- );
- }
+const RunButtonExtraMenu = (props: RunButtonProps) => {
+ const {
+ runeMode,
+ onExplain,
+ queryContext,
+ onQueryContextChange,
+ onEditContext,
+ onHistory,
+ onPrettier,
+ } = props;
+
+ const useCache = getUseCache(queryContext);
+ const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
+ const useApproximateTopN = getUseApproximateTopN(queryContext);
+ const numContextKeys = Object.keys(queryContext).length;
+
+ return (
+ <Menu>
+ <MenuItem
+ icon={IconNames.HELP}
+ text={runeMode ? 'Native query documentation' : 'DruidSQL documentation'}
+ href={getLink(runeMode ? 'DOCS_RUNE' : 'DOCS_SQL')}
+ target="_blank"
+ />
+ <MenuItem icon={IconNames.HISTORY} text="Query history" onClick={onHistory} />
+ {!runeMode && onExplain && (
+ <MenuItem icon={IconNames.CLEAN} text="Explain SQL query" onClick={onExplain} />
+ )}
+ {runeMode && (
+ <MenuItem icon={IconNames.ALIGN_LEFT} text="Prettify JSON" onClick={onPrettier} />
+ )}
+ <MenuItem
+ icon={IconNames.PROPERTIES}
+ text="Edit context"
+ onClick={onEditContext}
+ label={numContextKeys ? pluralIfNeeded(numContextKeys, 'key') : undefined}
+ />
+ <MenuDivider />
+ {!runeMode && (
+ <>
+ <MenuCheckbox
+ checked={useApproximateCountDistinct}
+ text="Use approximate COUNT(DISTINCT)"
+ onChange={() => {
+ onQueryContextChange(
+ setUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
+ );
+ }}
+ />
+ <MenuCheckbox
+ checked={useApproximateTopN}
+ text="Use approximate TopN"
+ onChange={() => {
+ onQueryContextChange(setUseApproximateTopN(queryContext, !useApproximateTopN));
+ }}
+ />
+ </>
+ )}
+ <MenuCheckbox
+ checked={useCache}
+ text="Use cache"
+ onChange={() => {
+ onQueryContextChange(setUseCache(queryContext, !useCache));
+ }}
+ />
+ </Menu>
+ );
+};
+
+export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
+ const { runeMode, onRun, loading } = props;
- private readonly handleRun = () => {
- const { onRun } = this.props;
+ const handleRun = React.useCallback(() => {
if (!onRun) return;
onRun();
- };
+ }, [onRun]);
- renderExtraMenu() {
- const {
- runeMode,
- onExplain,
- queryContext,
- onQueryContextChange,
- onEditContext,
- onHistory,
- onPrettier,
- } = this.props;
+ const hotkeys = React.useMemo(() => {
+ return [
+ {
+ allowInInput: true,
+ global: true,
+ combo: 'ctrl + enter',
+ label: 'run on click',
Review comment:
```suggestion
label: 'Runs the current query',
```
##########
File path: web-console/unified-console.html
##########
@@ -27,9 +27,49 @@
<title>Apache Druid</title>
<meta name="description" content="Apache Druid console" />
<link rel="shortcut icon" href="favicon.png" />
+ <style>
+ body {
+ background: #24283b;
+ }
+ #browser-update {
+ background-color: #d9822b;
+ border-radius: 3px;
+ color: #ffffff;
+ font-family: sans-serif;
+ font-size: 13px;
+ line-height: 1.2;
+ padding: 13px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ z-index: 11;
+ }
+ #browser-update a {
+ color: white;
+ font-weight: bold;
+ }
+ </style>
</head>
<body class="bp3-dark mouse-mode">
<div class="app-container"></div>
+ <div id="browser-update" style="display: none">
+ You are using an unsupported browser, so the console will not work properly.
Review comment:
```suggestion
You are using an unsupported browser. The console will not work properly.
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org
[GitHub] [druid] suneet-s commented on pull request #11357: Web console: Remove support for IE11 and other older browsers
Posted by GitBox <gi...@apache.org>.
suneet-s commented on pull request #11357:
URL: https://github.com/apache/druid/pull/11357#issuecomment-884434519
Added `Release Notes` label to warn users who might be using some of these older browsers. Hopefully no one :)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org