Web console: update dev dependencies (#11119)

* Update some dev dependencies, prettify, tslint-fix

* Sort tsconfig keys for easy comparison

* Set noImplicitThis

* Slightly more accurate types

* Bump Jest and related

* Bump react to latest on v16

* Bump node-sass, sass-loader for node14 support

* Remove node-sass-chokidar (unused)

* More unused dependencies

* Fix blueprint imports

* Webpack 5

* Update webpack config for 'process' usage

* Update playwright-chromium

* Emit esnext modules for tree shaking

* Enable source maps in development

* Dedupe

* Bump babel and things

* npm audit fix

* Add .editorconfig file to match prettier settings

* Update licenses (tslib is 0BSD as of 1.11.2)

https://github.com/microsoft/tslib/pull/96

* Require node >= 10

* Use Node 10 to run e2e tests

* Use 'ws' transport mode for dev server (will be default in next version)

* Remove an 'any'

* No sourcemaps in prod

* Exclude .editorconfig from license checks

* Try nvm for setting node version

.travis.yml

@@ -306,9 +306,11 @@ jobs:
     - name: "web console end-to-end test"
       before_install: *setup_generate_license
       install: web-console/script/druid build
-      before_script: web-console/script/druid start
+      before_script:
+        - nvm install 10.24.0
+        - web-console/script/druid start
       script: (cd web-console && npm run test-e2e)
-      after_script:  web-console/script/druid stop
+      after_script: web-console/script/druid stop
 
     - name: "docs"
       install: (cd website && npm install)

licenses.yaml

@@ -4984,7 +4984,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Denis Pushkarev
-version: 3.3.4
+version: 3.10.1
 license_file_path: licenses/bin/core-js.MIT
 
 ---
@@ -5162,7 +5162,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Ruben Verborgh
-version: 1.13.1
+version: 1.13.3
 license_file_path: licenses/bin/follow-redirects.MIT
 
 ---
@@ -5491,7 +5491,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Facebook, Inc. and its affiliates.
-version: 16.11.0
+version: 16.14.0
 license_file_path: licenses/bin/react-dom.MIT
 
 ---
@@ -5581,7 +5581,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Facebook, Inc. and its affiliates.
-version: 16.11.0
+version: 16.14.0
 license_file_path: licenses/bin/react.MIT
 
 ---
@@ -5591,7 +5591,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Ben Newman
-version: 0.13.3
+version: 0.13.7
 license_file_path: licenses/bin/regenerator-runtime.MIT
 
 ---
@@ -5631,7 +5631,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Facebook, Inc. and its affiliates.
-version: 0.17.0
+version: 0.19.1
 license_file_path: licenses/bin/scheduler.MIT
 
 ---
@@ -5669,22 +5669,10 @@ license_file_path: licenses/bin/toggle-selection.MIT
 name: "tslib"
 license_category: binary
 module: web-console
-license_name: Apache License version 2.0
+license_name: Zero-Clause BSD
 copyright: Microsoft Corp.
-version: 1.10.0
+version: 1.13.0
-notice: |
+license_file_path: licenses/bin/tslib.0BSD
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation. All rights reserved.
-  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-  this file except in compliance with the License. You may obtain a copy of the
-  License at http://www.apache.org/licenses/LICENSE-2.0
-  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-  MERCHANTABLITY OR NON-INFRINGEMENT.
-  See the Apache Version 2.0 License for specific language governing permissions
-  and limitations under the License.
-  ***************************************************************************** */
 
 ---
 

licenses/bin/core-js.MIT

@@ -1,4 +1,4 @@
-Copyright (c) 2014-2019 Denis Pushkarev
+Copyright (c) 2014-2021 Denis Pushkarev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

licenses/bin/tslib.0BSD

@@ -0,0 +1,12 @@
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

pom.xml

@@ -1975,6 +1975,7 @@
                                 <exclude>examples/conf/**</exclude>
                                 <exclude>.asf.yaml</exclude>
                                 <exclude>**/dependency-reduced-pom.xml</exclude>
+                                <exclude>.editorconfig</exclude>
                             </excludes>
                         </configuration>
                     </plugin>

web-console/.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+insert_final_newline = false

web-console/jest.common.config.js

@@ -18,5 +18,10 @@
 
 module.exports = {
   "preset": "ts-jest",
+  "globals": {
+    "ts-jest": {
+      "tsconfig": "./tsconfig.test.json"
+    }
+  },
   "testEnvironment": "jsdom",
 };

web-console/package.json

@@ -8,6 +8,9 @@
     "type": "git",
     "url": "https://github.com/apache/druid"
   },
+  "engines": {
+    "node": ">=10"
+  },
   "jest": {
     "preset": "ts-jest",
     "testEnvironment": "jsdom",
@@ -30,7 +33,8 @@
     "semi": true,
     "singleQuote": true,
     "printWidth": 100,
-    "endOfLine": "lf"
+    "endOfLine": "lf",
+    "arrowParens": "avoid"
   },
   "scripts": {
     "compile": "./script/build",
@@ -54,7 +58,7 @@
     "prettify": "prettier --write '{src,e2e-tests}/**/*.{ts,tsx,scss}'",
     "generate-licenses-file": "license-checker --production --json --out licenses.json",
     "check-licenses": "license-checker --production --onlyAllow 'Apache-1.1;Apache-2.0;BSD-2-Clause;BSD-3-Clause;0BSD;MIT;CC0-1.0' --summary",
-    "start": "webpack-dev-server --hot --open"
+    "start": "webpack serve --hot --open"
   },
   "dependencies": {
     "@blueprintjs/core": "^3.33.0",
@@ -64,7 +68,7 @@
     "brace": "^0.11.1",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
-    "core-js": "^3.3.4",
+    "core-js": "^3.10.1",
     "d3-array": "^2.3.3",
     "d3-axis": "^1.0.12",
     "d3-scale": "^3.2.0",
@@ -79,19 +83,19 @@
     "lodash.escape": "^4.0.1",
     "memoize-one": "^5.1.1",
     "numeral": "^2.0.6",
-    "react": "^16.11.0",
+    "react": "^16.14.0",
     "react-ace": "^7.0.2",
-    "react-dom": "^16.11.0",
+    "react-dom": "^16.14.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-splitter-layout": "^4.0.0",
     "react-table": "~6.10.3",
-    "regenerator-runtime": "^0.13.3",
+    "regenerator-runtime": "^0.13.7",
-    "tslib": "^1.10.0"
+    "tslib": "^2.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.4",
+    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-env": "^7.13.15",
     "@testing-library/react": "^8.0.9",
     "@types/classnames": "^2.2.9",
     "@types/d3-array": "^2.0.0",
@@ -102,54 +106,53 @@
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/file-saver": "^2.0.1",
     "@types/hjson": "^2.4.1",
-    "@types/jest": "^24.0.19",
+    "@types/jest": "^26.0.22",
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.escape": "^4.0.6",
     "@types/memoize-one": "^4.1.1",
     "@types/node": "^12.11.7",
     "@types/numeral": "^0.0.26",
-    "@types/react": "^16.9.11",
+    "@types/react": "^16.14.5",
-    "@types/react-dom": "^16.9.3",
+    "@types/react-dom": "^16.9.12",
     "@types/react-router-dom": "^5.1.0",
     "@types/react-splitter-layout": "^3.0.0",
     "@types/react-table": "6.8.5",
     "@types/uuid": "^7.0.2",
-    "autoprefixer": "^9.7.0",
+    "autoprefixer": "^9.8.6",
-    "awesome-code-style": "^1.4.3",
+    "awesome-code-style": "^2.1.0",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.2.2",
     "codecov": "^3.6.1",
-    "css-loader": "^3.2.0",
+    "css-loader": "^5.2.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
-    "file-loader": "^6.1.1",
+    "file-loader": "^6.2.0",
     "fs-extra": "^8.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "ignore-styles": "^5.0.1",
+    "jest": "^26.6.3",
-    "jest": "^24.9.0",
     "license-checker": "^25.0.1",
-    "node-sass": "^4.13.1",
+    "node-sass": "^5.0.0",
-    "node-sass-chokidar": "^1.4.0",
+    "playwright-chromium": "^1.10.0",
-    "playwright-chromium": "^1.4.2",
+    "postcss": "^8.2.10",
-    "postcss-cli": "^6.1.3",
+    "postcss-loader": "^5.2.0",
-    "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
-    "sass-loader": "^8.0.0",
+    "prettier": "^2.2.1",
-    "style-loader": "^1.0.0",
+    "sass-loader": "^11.0.1",
-    "stylelint": "^11.1.1",
+    "style-loader": "^2.0.0",
-    "stylelint-config-recommended-scss": "^4.0.0",
+    "stylelint": "^13.12.0",
-    "stylelint-scss": "^3.12.0",
+    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-scss": "^3.19.0",
     "stylus": "^0.54.7",
-    "ts-jest": "^24.1.0",
+    "ts-jest": "^26.5.5",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "^8.1.0",
     "ts-node": "^8.4.1",
-    "tslint": "^5.20.0",
+    "tslint": "^6.1.3",
     "tslint-loader": "^3.5.4",
-    "typescript": "^3.7.2",
+    "typescript": "^4.2.4",
     "uuid": "^7.0.2",
-    "webpack": "^4.41.2",
+    "webpack": "^5.33.2",
-    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-cli": "^3.3.9",
+    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.9.0"
+    "webpack-dev-server": "^3.11.2"
   }
 }

web-console/script/build

@@ -26,6 +26,6 @@ echo "Transpiling ReactTable CSS..."
 
 # add BUNDLE_ANALYZER_PLUGIN='TRUE' here to enable webpack-bundle-analyzer as a plugin
 echo "Webpacking everything..."
-NODE_ENV=production ./node_modules/.bin/webpack -c webpack.config.js
+NODE_ENV=production ./node_modules/.bin/webpack -c webpack.config.js --mode=production
 
 echo "Done! Have a good day."

web-console/script/licenses

@@ -25,21 +25,7 @@ const START_MARKER_LINE = '# Web console modules start';
 const END_MARKER_LINE = '# Web console modules end';
 const SEPARATOR = '\n\n---\n\n';
 
-const extraLinesForLib = {
+const extraLinesForLib = {};
-  tslib: `notice: |
-  /*! *****************************************************************************
-  Copyright (c) Microsoft Corporation. All rights reserved.
-  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-  this file except in compliance with the License. You may obtain a copy of the
-  License at http://www.apache.org/licenses/LICENSE-2.0
-  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-  MERCHANTABLITY OR NON-INFRINGEMENT.
-  See the Apache Version 2.0 License for specific language governing permissions
-  and limitations under the License.
-  ***************************************************************************** */`
-}
 
 const extraPackages = {
   // This is a OSS font so it is not listed by the npm scraper but we still want to attribute it so pretend to inject it
@@ -49,8 +35,8 @@ const extraPackages = {
     repository: 'https://github.com/google/fonts/tree/master/apache/opensans',
     publisher: 'Google',
     url: 'https://fonts.google.com/specimen/Open+Sans',
-  }
+  },
-}
+};
 
 function injectConsoleLicenses(consoleLicenses) {
   const text = fs.readFileSync(LICENSES_FILE, 'utf-8');
@@ -96,7 +82,7 @@ checker.init(
     start: '.',
     production: true,
   },
-  function(err, packages) {
+  function (err, packages) {
     if (err) {
       console.log('err', err);
       return;
@@ -138,6 +124,11 @@ checker.init(
             licenseExt = 'BSD3';
             break;
 
+          case '0BSD':
+            properLicenseName = 'Zero-Clause BSD';
+            licenseExt = '0BSD';
+            break;
+
           default:
             throw new Error(`Unknown license '${licenses}' in ${p}`);
         }

web-console/src/blueprint-overrides/common/_variables.scss

@@ -28,7 +28,7 @@ $pt-grid-size: 10px;
 $pt-font-family: 'Open Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
   'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Icons16',
   // support inline Palantir icons
-    sans-serif;
+  sans-serif;
 
 $pt-font-family-monospace: monospace;
 

web-console/src/components/interval-input/interval-input.tsx

@@ -48,18 +48,8 @@ function stringifyDateRange(localRange: DateRange): string {
   // Shall Blueprint make any changes to the way dates are selected, this function will have to be reworked
   const [localStartDate, localEndDate] = localRange;
   return `${
-    localStartDate
+    localStartDate ? removeLocalTimezone(localStartDate).toISOString().substring(0, 19) : ''
-      ? removeLocalTimezone(localStartDate)
+  }/${localEndDate ? removeLocalTimezone(localEndDate).toISOString().substring(0, 19) : ''}`;
-          .toISOString()
-          .substring(0, 19)
-      : ''
-  }/${
-    localEndDate
-      ? removeLocalTimezone(localEndDate)
-          .toISOString()
-          .substring(0, 19)
-      : ''
-  }`;
 }
 
 export interface IntervalInputProps {

web-console/src/components/segment-timeline/segment-timeline.tsx

@@ -267,29 +267,33 @@ ORDER BY "start" DESC`;
             const beforeIso = before.toISOString();
 
             datasources = (await Api.instance.get(`/druid/coordinator/v1/datasources`)).data;
-            intervals = (await Promise.all(
+            intervals = (
-              datasources.map(async datasource => {
+              await Promise.all(
-                const intervalMap = (await Api.instance.get(
+                datasources.map(async datasource => {
-                  `/druid/coordinator/v1/datasources/${Api.encodePath(
+                  const intervalMap = (
-                    datasource,
+                    await Api.instance.get(
-                  )}/intervals?simple`,
+                      `/druid/coordinator/v1/datasources/${Api.encodePath(
-                )).data;
+                        datasource,
+                      )}/intervals?simple`,
+                    )
+                  ).data;
 
-                return Object.keys(intervalMap)
+                  return Object.keys(intervalMap)
-                  .map(interval => {
+                    .map(interval => {
-                    const [start, end] = interval.split('/');
+                      const [start, end] = interval.split('/');
-                    const { count, size } = intervalMap[interval];
+                      const { count, size } = intervalMap[interval];
-                    return {
+                      return {
-                      start,
+                        start,
-                      end,
+                        end,
-                      datasource,
+                        datasource,
-                      count,
+                        count,
-                      size,
+                        size,
-                    };
+                      };
-                  })
+                    })
-                  .filter(a => beforeIso < a.start);
+                    .filter(a => beforeIso < a.start);
-              }),
+                }),
-            ))
+              )
+            )
               .flat()
               .sort((a, b) => b.start.localeCompare(a.start));
           } else {
@@ -495,7 +499,7 @@ ORDER BY "start" DESC`;
         svgHeight={chartHeight}
         svgWidth={chartWidth}
         margin={this.chartMargin}
-        changeActiveDatasource={(datasource: string) =>
+        changeActiveDatasource={(datasource: string | null) =>
           this.setState(prevState => ({
             activeDatasource: prevState.activeDatasource ? null : datasource,
           }))

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

@@ -20,7 +20,7 @@ import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
 import { AutoForm, FormJsonSelector, FormJsonTabs, JsonInput } from '../../components';
-import { COMPACTION_CONFIG_FIELDS, CompactionConfig } from '../../druid-models';
+import { CompactionConfig, COMPACTION_CONFIG_FIELDS } from '../../druid-models';
 
 import './compaction-dialog.scss';
 

web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx

@@ -28,7 +28,7 @@ import {
   FormJsonTabs,
   JsonInput,
 } from '../../components';
-import { COORDINATOR_DYNAMIC_CONFIG_FIELDS, CoordinatorDynamicConfig } from '../../druid-models';
+import { CoordinatorDynamicConfig, COORDINATOR_DYNAMIC_CONFIG_FIELDS } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
 import { getLink } from '../../links';
 import { Api, AppToaster } from '../../singletons';

web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx

@@ -29,7 +29,7 @@ import React, { useState } from 'react';
 
 import { AutoForm, JsonInput } from '../../components';
 import { FormJsonSelector, FormJsonTabs } from '../../components';
-import { isLookupInvalid, LOOKUP_FIELDS, LookupSpec } from '../../druid-models';
+import { isLookupInvalid, LookupSpec, LOOKUP_FIELDS } from '../../druid-models';
 
 import './lookup-edit-dialog.scss';
 

web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx

@@ -22,7 +22,7 @@ import React, { useState } from 'react';
 
 import { SnitchDialog } from '..';
 import { AutoForm, ExternalLink } from '../../components';
-import { OVERLORD_DYNAMIC_CONFIG_FIELDS, OverlordDynamicConfig } from '../../druid-models';
+import { OverlordDynamicConfig, OVERLORD_DYNAMIC_CONFIG_FIELDS } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
 import { getLink } from '../../links';
 import { Api, AppToaster } from '../../singletons';

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

@@ -131,9 +131,7 @@ export const RetentionDialog = React.memo(function RetentionDialog(props: Retent
           <p className="no-rules-message">
             This datasource currently has no rules, it will use the cluster defaults.
           </p>
-        ) : (
+        ) : undefined}
-          undefined
-        )}
         <div>
           <Button icon={IconNames.PLUS} onClick={addRule}>
             New rule

web-console/src/druid-models/flatten-spec.spec.ts

@@ -34,13 +34,19 @@ describe('spec-utils', () => {
       {
         context: { host: 'pivot', popic: 'sun' },
         tags: ['a', 'd'],
-        messages: [{ metric: 'request/time', value: 44 }, { metric: 'request/time', value: 65 }],
+        messages: [
+          { metric: 'request/time', value: 44 },
+          { metric: 'request/time', value: 65 },
+        ],
         value: 4,
       },
       {
         context: { host: 'imply', dopik: 'fun' },
         tags: ['x', 'y'],
-        messages: [{ metric: 'request/time', value: 4 }, { metric: 'request/time', value: 5 }],
+        messages: [
+          { metric: 'request/time', value: 4 },
+          { metric: 'request/time', value: 5 },
+        ],
         value: 2,
       },
     ];

web-console/src/druid-models/ingestion-spec.tsx

@@ -1719,7 +1719,8 @@ const TUNING_FORM_FIELDS: Field<IngestionSpec>[] = [
     hideInMore: true,
     info: (
       <>
-        Milliseconds to wait for pushing segments. It must be >= 0, where 0 means to wait forever.
+        Milliseconds to wait for pushing segments. It must be &gt;= 0, where 0 means to wait
+        forever.
       </>
     ),
   },

web-console/src/druid-models/timestamp-spec.tsx

@@ -24,8 +24,8 @@ import { deepGet, EMPTY_ARRAY, EMPTY_OBJECT } from '../utils';
 import { IngestionSpec } from './ingestion-spec';
 import {
   BASIC_TIME_FORMATS,
-  DATE_ONLY_TIME_FORMATS,
   DATETIME_TIME_FORMATS,
+  DATE_ONLY_TIME_FORMATS,
   OTHER_TIME_FORMATS,
 } from './time';
 import { Transform } from './transform-spec';

web-console/src/entry.ts

@@ -90,7 +90,7 @@ ReactDOM.render(
     exampleManifestsUrl: consoleConfig.exampleManifestsUrl,
     defaultQueryContext: consoleConfig.defaultQueryContext,
     mandatoryQueryContext: consoleConfig.mandatoryQueryContext,
-  }) as any,
+  }),
   container,
 );
 

web-console/src/singletons/api.ts

@@ -46,14 +46,6 @@ export class Api {
   }
 
   static encodePath(path: string): string {
-    return path.replace(
+    return path.replace(/[?#%&'\[\]\\]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
-      /[?#%&'\[\]\\]/g,
-      c =>
-        '%' +
-        c
-          .charCodeAt(0)
-          .toString(16)
-          .toUpperCase(),
-    );
   }
 }

web-console/src/utils/query-history.ts

@@ -26,10 +26,7 @@ export interface QueryRecord {
 
 export class QueryRecordUtil {
   static getHistoryVersion(): string {
-    return new Date()
+    return new Date().toISOString().split('.')[0].replace('T', ' ');
-      .toISOString()
-      .split('.')[0]
-      .replace('T', ' ');
   }
 
   static addQueryToHistory(

web-console/src/utils/sampler.ts

@@ -31,8 +31,8 @@ import {
   MetricSpec,
   PLACEHOLDER_TIMESTAMP_SPEC,
   REINDEX_TIMESTAMP_SPEC,
-  TIME_COLUMN,
   TimestampSpec,
+  TIME_COLUMN,
   Transform,
   TransformSpec,
   upgradeSpec,

web-console/src/utils/utils.spec.ts

@@ -75,7 +75,10 @@ describe('utils', () => {
             timeoutMs: 15000,
           },
         }),
-        [{ make: 'Honda', model: 'Accord' }, { make: 'Toyota', model: 'Prius' }],
+        [
+          { make: 'Honda', model: 'Accord' },
+          { make: 'Toyota', model: 'Prius' },
+        ],
       ),
     ).toMatchInlineSnapshot(`
       Object {

web-console/src/variables.scss

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-@import '/blueprint-overrides/common/colors';
+@import './blueprint-overrides/common/colors';
-@import '/blueprint-overrides/common/variables';
+@import './blueprint-overrides/common/variables';
 
 $header-bar-height: 50px;
 $view-control-bar-height: 30px;

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

@@ -24,11 +24,11 @@ import React from 'react';
 import ReactTable, { Filter } from 'react-table';
 
 import {
+  ActionCell,
+  ActionIcon,
   ACTION_COLUMN_ID,
   ACTION_COLUMN_LABEL,
   ACTION_COLUMN_WIDTH,
-  ActionCell,
-  ActionIcon,
   BracedText,
   MoreButton,
   RefreshButton,

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

@@ -51,7 +51,11 @@ export const ServicesCard = React.memo(function ServicesCard(props: ServicesCard
         }[] = await queryDruidSql({
           query: `SELECT server_type AS "service_type", COUNT(*) as "count" FROM sys.servers GROUP BY 1`,
         });
-        return lookupBy(serviceCountsFromQuery, x => x.service_type, x => x.count);
+        return lookupBy(
+          serviceCountsFromQuery,
+          x => x.service_type,
+          x => x.count,
+        );
       } else if (capabilities.hasCoordinatorAccess()) {
         const services = (await Api.instance.get('/druid/coordinator/v1/servers?simple')).data;
 

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

@@ -38,12 +38,14 @@ export const SupervisorsCard = React.memo(function SupervisorsCard(props: Superv
   const [supervisorCountState] = useQueryManager<Capabilities, SupervisorCounts>({
     processQuery: async capabilities => {
       if (capabilities.hasSql()) {
-        return (await queryDruidSql({
+        return (
-          query: `SELECT
+          await queryDruidSql({
+            query: `SELECT
   COUNT(*) FILTER (WHERE "suspended" = 0) AS "running",
   COUNT(*) FILTER (WHERE "suspended" = 1) AS "suspended"
 FROM sys.supervisors`,
-        }))[0];
+          })
+        )[0];
       } else if (capabilities.hasOverlordAccess()) {
         const resp = await Api.instance.get('/druid/indexer/v1/supervisor?full');
         const data = resp.data;

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

@@ -53,7 +53,11 @@ export const TasksCard = React.memo(function TasksCard(props: TasksCardProps) {
 FROM sys.tasks
 GROUP BY 1`,
         });
-        return lookupBy(taskCountsFromQuery, x => x.status, x => x.count);
+        return lookupBy(
+          taskCountsFromQuery,
+          x => x.status,
+          x => x.count,
+        );
       } else if (capabilities.hasOverlordAccess()) {
         const tasks: any[] = (await Api.instance.get('/druid/indexer/v1/tasks')).data;
         return {

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

@@ -24,10 +24,10 @@ import ReactTable from 'react-table';
 import { Filter } from 'react-table';
 
 import {
+  ActionCell,
   ACTION_COLUMN_ID,
   ACTION_COLUMN_LABEL,
   ACTION_COLUMN_WIDTH,
-  ActionCell,
   MoreButton,
   RefreshButton,
   TableColumnSelector,

web-console/src/views/load-data-view/load-data-view.tsx

@@ -62,8 +62,8 @@ import {
   CONSTANT_TIMESTAMP_SPEC,
   CONSTANT_TIMESTAMP_SPEC_FIELDS,
   DIMENSION_SPEC_FIELDS,
-  FILTER_FIELDS,
   FILTERS_FIELDS,
+  FILTER_FIELDS,
   FLATTEN_FIELD_FIELDS,
   getDimensionSpecName,
   getIssueWithSpec,
@@ -76,8 +76,8 @@ import {
   METRIC_SPEC_FIELDS,
   PRIMARY_PARTITION_RELATED_FORM_FIELDS,
   removeTimestampTransform,
-  TIMESTAMP_SPEC_FIELDS,
   TimestampSpec,
+  TIMESTAMP_SPEC_FIELDS,
   Transform,
   TRANSFORM_FIELDS,
   updateSchemaWithSample,
@@ -1445,9 +1445,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
                 }}
               />
             </FormGroup>
-          ) : (
+          ) : undefined}
-            undefined
-          )}
         </div>
         {this.renderNextBar({
           disabled: !parserQueryState.data,

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

@@ -22,10 +22,10 @@ import React from 'react';
 import ReactTable from 'react-table';
 
 import {
+  ActionCell,
   ACTION_COLUMN_ID,
   ACTION_COLUMN_LABEL,
   ACTION_COLUMN_WIDTH,
-  ActionCell,
   RefreshButton,
   TableColumnSelector,
   ViewControlBar,

web-console/src/views/query-view/column-tree/column-tree.tsx

@@ -388,9 +388,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
                   }),
                 )
                 .sort((a, b) =>
-                  String(a.id)
+                  String(a.id).toLowerCase().localeCompare(String(b.id).toLowerCase()),
-                    .toLowerCase()
-                    .localeCompare(String(b.id).toLowerCase()),
                 ),
             }),
           ),

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

@@ -54,9 +54,9 @@ import { QueryRecord, QueryRecordUtil } from '../../utils/query-history';
 
 import { ColumnTree } from './column-tree/column-tree';
 import {
-  LIVE_QUERY_MODES,
   LiveQueryMode,
   LiveQueryModeSelector,
+  LIVE_QUERY_MODES,
 } from './live-query-mode-selector/live-query-mode-selector';
 import { QueryError } from './query-error/query-error';
 import { QueryExtraInfo } from './query-extra-info/query-extra-info';

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

@@ -23,10 +23,10 @@ import React from 'react';
 import ReactTable, { Filter } from 'react-table';
 
 import {
+  ActionCell,
   ACTION_COLUMN_ID,
   ACTION_COLUMN_LABEL,
   ACTION_COLUMN_WIDTH,
-  ActionCell,
   BracedText,
   MoreButton,
   RefreshButton,
@@ -342,9 +342,9 @@ END AS "partitioning"`,
           setIntermediateQuery(sqlQuery);
           return await queryDruidSql({ query: sqlQuery });
         } else if (capabilities.hasCoordinatorAccess()) {
-          let datasourceList: string[] = (await Api.instance.get(
+          let datasourceList: string[] = (
-            '/druid/coordinator/v1/metadata/datasources',
+            await Api.instance.get('/druid/coordinator/v1/metadata/datasources')
-          )).data;
+          ).data;
 
           const datasourceFilter = filtered.find(({ id }) => id === 'datasource');
           if (datasourceFilter) {
@@ -364,9 +364,11 @@ END AS "partitioning"`,
 
           const n = Math.min(datasourceList.length, maxResults);
           for (let i = 0; i < n && results.length < maxResults; i++) {
-            const segments = (await Api.instance.get(
+            const segments = (
-              `/druid/coordinator/v1/datasources/${Api.encodePath(datasourceList[i])}?full`,
+              await Api.instance.get(
-            )).data.segments;
+                `/druid/coordinator/v1/datasources/${Api.encodePath(datasourceList[i])}?full`,
+              )
+            ).data.segments;
             if (!Array.isArray(segments)) continue;
 
             let segmentQueryResultRows: SegmentQueryResultRow[] = segments.map((segment: any) => {

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

@@ -24,10 +24,10 @@ import ReactTable from 'react-table';
 import { Filter } from 'react-table';
 
 import {
+  ActionCell,
   ACTION_COLUMN_ID,
   ACTION_COLUMN_LABEL,
   ACTION_COLUMN_WIDTH,
-  ActionCell,
   MoreButton,
   RefreshButton,
   TableColumnSelector,

web-console/src/visualization/stacked-bar-chart.tsx

@@ -32,7 +32,7 @@ interface StackedBarChartProps {
   margin: BarChartMargin;
   activeDataType?: string;
   dataToRender: BarUnitData[];
-  changeActiveDatasource: (e: string) => void;
+  changeActiveDatasource: (e: string | null) => void;
   formatTick: (e: number) => string;
   xScale: AxisScale<Date>;
   yScale: AxisScale<number>;
@@ -61,7 +61,7 @@ export const StackedBarChart = React.memo(function StackedBarChart(props: Stacke
     changeActiveDatasource,
     barWidth,
   } = props;
-  const [hoverOn, setHoverOn] = useState();
+  const [hoverOn, setHoverOn] = useState<HoveredBarInfo>();
 
   const width = props.svgWidth - props.margin.left - props.margin.right;
   const height = props.svgHeight - props.margin.bottom - props.margin.top;
@@ -113,7 +113,7 @@ export const StackedBarChart = React.memo(function StackedBarChart(props: Stacke
                 className={'hovered-bar'}
                 onClick={() => {
                   setHoverOn(undefined);
-                  changeActiveDatasource(hoverOn.datasource as string);
+                  changeActiveDatasource(hoverOn.datasource ?? null);
                 }}
               >
                 <rect

web-console/tsconfig.json

@@ -1,24 +1,25 @@
 {
   "compilerOptions": {
-    "forceConsistentCasingInFileNames": true,
-    "experimentalDecorators": true,
-    "noEmitOnError": true,
     "declaration": false,
-    "removeComments": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "jsx": "react",
+    "lib": ["dom", "es2016", "esnext"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitReturns": true,
-    "strict": true,
+    "noImplicitThis": true,
-    "skipLibCheck": true,
-    "importHelpers": true,
-    "esModuleInterop": true,
-    "noUnusedParameters": true,
     "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": true,
+    "rootDirs": ["lib", "src"],
+    "skipLibCheck": true,
+    "strict": true,
     "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "lib": ["dom", "es2016", "esnext"],
-    "jsx": "react",
-    "rootDirs": ["lib", "src"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "e2e-tests/**/*.ts"]
 }

web-console/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}

web-console/webpack.config.js

@@ -18,8 +18,8 @@
 
 const process = require('process');
 const path = require('path');
-const postcssPresetEnv = require('postcss-preset-env');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const webpack = require('webpack');
 
 const { version } = require('./package.json');
 
@@ -39,7 +39,15 @@ module.exports = env => {
 
   const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
   const useBabel = process.env.babel || mode === 'production';
-  console.log(`Webpack running in ${mode} mode. ${useBabel ? 'Will' : 'Wont'} use babel.`);
+  console.log(`Webpack running in ${mode} mode. ${useBabel ? 'Will' : "Won't"} use babel.`);
+
+  const plugins = [
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify({ NODE_ENV: mode }),
+      global: {},
+      NODE_ENV: JSON.stringify(mode),
+    }),
+  ];
 
   function babelTest(s) {
     // https://github.com/zloirock/core-js/issues/514
@@ -49,7 +57,7 @@ module.exports = env => {
 
   return {
     mode: mode,
-    devtool: 'hidden-source-map',
+    devtool: mode === 'production' ? undefined : 'eval-cheap-module-source-map',
     entry: {
       'web-console': './src/entry.ts',
     },
@@ -62,6 +70,9 @@ module.exports = env => {
     target: 'web',
     resolve: {
       extensions: ['.tsx', '.ts', '.js', '.scss', '.css'],
+      fallback: {
+        os: false,
+      },
     },
     devServer: {
       publicPath: '/public',
@@ -74,6 +85,7 @@ module.exports = env => {
         '/druid': proxyTarget,
         '/proxy': proxyTarget,
       },
+      transportMode: 'ws',
     },
     module: {
       rules: [
@@ -117,13 +129,14 @@ module.exports = env => {
             {
               loader: 'postcss-loader',
               options: {
-                ident: 'postcss',
+                postcssOptions: {
-                plugins: () => [
+                  plugins: {
-                  postcssPresetEnv({
+                    'postcss-preset-env': {
-                    autoprefixer: { grid: "no-autoplace" },
+                      autoprefixer: { grid: 'no-autoplace' },
-                    browsers: ['> 1%', 'last 3 versions', 'Firefox ESR', 'Opera 12.1', 'ie 11'],
+                      browsers: ['> 1%', 'last 3 versions', 'Firefox ESR', 'Opera 12.1', 'ie 11'],
-                  }),
+                    },
-                ],
+                  },
+                },
               },
             },
             { loader: 'sass-loader' }, // compiles Sass to CSS, using Node Sass by default
@@ -134,15 +147,18 @@ module.exports = env => {
           use: {
             loader: 'file-loader',
             options: {
-              name: '[name].[ext]'
+              name: '[name].[ext]',
-            }
+            },
-          }
+          },
-        }
+        },
       ],
     },
     performance: {
       hints: false,
     },
-    plugins: process.env.BUNDLE_ANALYZER_PLUGIN === 'TRUE' ? [new BundleAnalyzerPlugin()] : [],
+    plugins:
+      process.env.BUNDLE_ANALYZER_PLUGIN === 'TRUE'
+        ? [...plugins, new BundleAnalyzerPlugin()]
+        : plugins,
   };
 };