Web-console: fix alerts from lgtm (#8346)

* fix alerts from lgtm * remove unordered imports * fix introduced alert * move getExpanded to renderSchemaSelector * use getDerivedStateFromProps * use prevState * add semi colons, remove unused imports * fixes
apache · Aug 21, 2019 · e4aa7fb · e4aa7fb
1 parent c87b68d
commit e4aa7fb
Show file tree

Hide file tree

Showing 26 changed files with 228 additions and 204 deletions.
diff --git a/web-console/README.md b/web-console/README.md
@@ -27,8 +27,8 @@ This is the unified Druid web console that servers as a data management layer fo
 2. Install the modules with `npm install`
 3. Run `npm start` will start in development mode and will proxy druid requests to `localhost:8888`
 
-**Note:** you can provide an environment variable to proxy to a different Druid host like so: `druid_host=1.2.3.4:8888 npm start` 
-
+**Note:** you can provide an environment variable to proxy to a different Druid host like so: `druid_host=1.2.3.4:8888 npm start`
+**Note:** you can provide an environment variable use webpack-bundle-analyzer as a plugin in the build script or like so: `BUNDLE_ANALYZER_PLUGIN='TRUE' npm start`
 
 ## Description of the directory structure
 
@@ -50,7 +50,6 @@ Generated/copied dynamically
 - `pages/` - The files for the older coordinator console
 - `coordinator-console/` - Files for the coordinator console
 
-
 ## List of non SQL data reading APIs used
 
 ```

diff --git a/web-console/script/build b/web-console/script/build
@@ -29,6 +29,7 @@ PATH="./target/node:$PATH" ./script/create-sql-function-doc.js
 echo "Transpiling ReactTable CSS..."
 PATH="./target/node:$PATH" ./node_modules/.bin/stylus lib/react-table.styl -o lib/react-table.css
 
+# add BUNDLE_ANALYZER_PLUGIN='TRUE' here to enable webpack-bundle-analyzer as a plugin
 echo "Webpacking everything..."
 PATH="./target/node:$PATH" NODE_ENV=production ./node_modules/.bin/webpack -c webpack.config.js
 

diff --git a/web-console/script/licenses b/web-console/script/licenses
@@ -60,116 +60,119 @@ function injectConsoleLicenses(consoleLicenses) {
   // Write out the new file
   fs.writeFileSync(
     LICENSES_FILE,
-    [
-      beforeLines.join('\n'),
-      consoleLicenses.join(SEPARATOR),
-      afterLines.join('\n')
-    ].join('\n')
+    [beforeLines.join('\n'), consoleLicenses.join(SEPARATOR), afterLines.join('\n')].join('\n'),
   );
 }
 
-checker.init({
-  start: '.',
-  production: true
-}, function(err, packages) {
-  if (err) {
-    console.log('err', err);
-    return;
-  }
-
-  const mapped = Object.keys(packages).sort().map(p => {
-    const m = p.match(/^(.+)@(\d+\.\d+\.\d+.*)$/);
-    if (!m) throw new Error(`Malformed name@version`);
-    const name = m[1];
-    if (name === 'web-console') return null; // This is me!
-
-    const version = m[2];
-    const meta = packages[p];
-    let { publisher, licenses, licenseFile } = meta;
-    if (!licenses) throw new Error(`Package '${p} does not have a licenses`);
-
-    let properLicenseName; // Map the licenses to their proper name
-    let licenseExt; // Map the licenses to the right extension
-    switch (licenses) {
-      case 'MIT':
-        properLicenseName = 'MIT License';
-        licenseExt = 'MIT';
-        break;
-
-      case 'Apache-2.0':
-        properLicenseName = 'Apache License version 2.0';
-        licenseExt = 'A2';
-        break;
-
-      case 'BSD-3-Clause':
-        properLicenseName = 'BSD-3-Clause License';
-        licenseExt = 'BSD3';
-        break;
-
-      default:
-        throw new Error(`Unknown license '${licenses}' in ${p}`);
+checker.init(
+  {
+    start: '.',
+    production: true,
+  },
+  function(err, packages) {
+    if (err) {
+      console.log('err', err);
+      return;
     }
 
-    const simpleName = name.replace('/', '-');
-    const licenseDest = `licenses/bin/${simpleName}.${licenseExt}`
-
-    let hasLicense = false;
-    if (licenseExt !== 'A2') {
-      if (licenseFile && licenseFile.match(/\/license(?:\.\w+)?/i)) {
-        // If the file ends with license.ext? then copy it over
-        try {
-          fs.copyFileSync(licenseFile, `../${licenseDest}`);
-          hasLicense = true;
-        } catch (e) {
-          console.log(`Could not copy license for '${p}': ${JSON.stringify(meta)}`);
+    const mapped = Object.keys(packages)
+      .sort()
+      .map(p => {
+        const m = p.match(/^(.+)@(\d+\.\d+\.\d+.*)$/);
+        if (!m) throw new Error(`Malformed name@version`);
+        const name = m[1];
+        if (name === 'web-console') return null; // This is me!
+
+        const version = m[2];
+        const meta = packages[p];
+        let { publisher, licenses, licenseFile } = meta;
+        if (!licenses) throw new Error(`Package '${p} does not have a licenses`);
+
+        let properLicenseName; // Map the licenses to their proper name
+        let licenseExt; // Map the licenses to the right extension
+        switch (licenses) {
+          case 'MIT':
+            properLicenseName = 'MIT License';
+            licenseExt = 'MIT';
+            break;
+
+          case 'Apache-2.0':
+            properLicenseName = 'Apache License version 2.0';
+            licenseExt = 'A2';
+            break;
+
+          case 'BSD-3-Clause':
+            properLicenseName = 'BSD-3-Clause License';
+            licenseExt = 'BSD3';
+            break;
+
+          default:
+            throw new Error(`Unknown license '${licenses}' in ${p}`);
         }
-      } else {
-        // See if the license is already there (manually) keep it
-        try {
-          fs.statSync(`../${licenseDest}`);
-          hasLicense = true;
-        } catch (e) {
-          console.log(`Could not find license for '${p}': ${JSON.stringify(meta)}`);
-        }
-      }
-    }
 
-    if (!publisher && hasLicense) {
-      // Extract copyright from license
-      const licenseText = fs.readFileSync(`../${licenseDest}`, 'utf-8');
-      const m = licenseText.match(/(?:^|\n)\s*Copyright(?: (?:\(c\)|©))?(?: 2[0-9]{3}(?:-\w+)?,?)? ([^0-9][^\n]*)\n/m);
-      if (m) {
-        publisher = m[1]
-          .replace(/All rights reserved./i, '')
-          .replace(/[0-9-]{4,9}/, '')
-          .trim();
-      }
-    }
-
-    if (!publisher) {
-      // Hand coded copyrights
-      if (name === 'asap') publisher = 'Contributors'
-      if (name === 'diff-match-patch') publisher = 'Google'
-    }
-
-    if (!publisher) {
-      console.log(`No license for '${name}' ('${licenseDest}')`);
-    }
+        const simpleName = name.replace('/', '-');
+        const licenseDest = `licenses/bin/${simpleName}.${licenseExt}`;
+
+        let hasLicense = false;
+        if (licenseExt !== 'A2') {
+          if (licenseFile && licenseFile.match(/\/license(?:\.\w+)?/i)) {
+            // If the file ends with license.ext? then copy it over
+            try {
+              fs.copyFileSync(licenseFile, `../${licenseDest}`);
+              hasLicense = true;
+            } catch (e) {
+              console.log(`Could not copy license for '${p}': ${JSON.stringify(meta)}`);
+            }
+          } else {
+            // See if the license is already there (manually) keep it
+            try {
+              fs.statSync(`../${licenseDest}`);
+              hasLicense = true;
+            } catch (e) {
+              console.log(`Could not find license for '${p}': ${JSON.stringify(meta)}`);
+            }
+          }
+        }
 
-    // Make our blob
-    const lines = [
-      `name: "${name}"`,
-      `license_category: binary`,
-      `module: web-console`,
-      `license_name: ${properLicenseName}`,
-      publisher ? `copyright: ${publisher}` : null,
-      `version: ${version}`,
-      hasLicense ? `license_file_path: ${licenseDest}` : null,
-    ];
+        if (!publisher && hasLicense) {
+          // Extract copyright from license
+          const licenseText = fs.readFileSync(`../${licenseDest}`, 'utf-8');
+          const m = licenseText.match(
+            /(?:^|\n)\s*Copyright(?: (?:\(c\)|©))?(?: 2[0-9]{3}(?:-\w+)?,?)? ([^0-9][^\n]*)\n/m,
+          );
+          if (m) {
+            publisher = m[1]
+              .replace(/All rights reserved./i, '')
+              .replace(/[0-9-]{4,9}/, '')
+              .trim();
+          }
+        }
 
-    return lines.filter(Boolean).join('\n');
-  }).filter(Boolean);
+        if (!publisher) {
+          // Hand coded copyrights
+          if (name === 'asap') publisher = 'Contributors';
+          if (name === 'diff-match-patch') publisher = 'Google';
+        }
 
-  injectConsoleLicenses(mapped);
-});
+        if (!publisher) {
+          console.log(`No license for '${name}' ('${licenseDest}')`);
+        }
 
+        // Make our blob
+        const lines = [
+          `name: "${name}"`,
+          `license_category: binary`,
+          `module: web-console`,
+          `license_name: ${properLicenseName}`,
+          publisher ? `copyright: ${publisher}` : null,
+          `version: ${version}`,
+          hasLicense ? `license_file_path: ${licenseDest}` : null,
+        ];
+
+        return lines.filter(Boolean).join('\n');
+      })
+      .filter(Boolean);
+
+    injectConsoleLicenses(mapped);
+  },
+);
diff --git a/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx b/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx
@@ -105,7 +105,7 @@ export class DatasourceColumnsTable extends React.PureComponent<
     return (
       <div className="datasource-columns-table">
         <div className="main-area">
-          {loading ? <Loader loadingText="" loading /> : !loading && this.renderTable()}
+          {loading ? <Loader loadingText="" loading /> : this.renderTable()}
         </div>
       </div>
     );

diff --git a/web-console/src/components/external-link/__snapshots__/external-link.spec.tsx.snap b/web-console/src/components/external-link/__snapshots__/external-link.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`external link matches snapshot 1`] = `
 <a
   href="http://test/"
+  rel="noopener noreferrer"
   target="_blank"
 >
   <div>

diff --git a/web-console/src/components/external-link/external-link.tsx b/web-console/src/components/external-link/external-link.tsx
@@ -27,7 +27,7 @@ export class ExternalLink extends React.PureComponent<ExternalLinkProps> {
     const { href, children } = this.props;
 
     return (
-      <a href={href} target="_blank">
+      <a href={href} target="_blank" rel="noopener noreferrer">
         {children}
       </a>
     );

diff --git a/web-console/src/components/show-history/show-history.tsx b/web-console/src/components/show-history/show-history.tsx
@@ -71,7 +71,7 @@ export class ShowHistory extends React.PureComponent<ShowHistoryProps, ShowHisto
 
   render(): JSX.Element | null {
     const { downloadFilename, endpoint } = this.props;
-    const { data, loading } = this.state;
+    const { data, loading, error } = this.state;
     if (loading) return <Loader />;
     if (!data) return null;
 
@@ -82,7 +82,9 @@ export class ShowHistory extends React.PureComponent<ShowHistoryProps, ShowHisto
         title={pastSupervisor.version}
         panel={
           <ShowValue
-            jsonValue={JSON.stringify(pastSupervisor.spec, undefined, 2)}
+            jsonValue={
+              pastSupervisor.spec ? JSON.stringify(pastSupervisor.spec, undefined, 2) : error
+            }
             downloadFilename={`version-${pastSupervisor.version}-${downloadFilename}`}
             endpoint={endpoint}
           />

diff --git a/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap b/web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap
@@ -60,10 +60,39 @@ exports[`show log describe show log 1`] = `
   <div
     class="main-area"
   >
-    <textarea
-      class="bp3-input"
-      readonly=""
-    />
+    <div
+      class="loader"
+    >
+      <div
+        class="loader-logo"
+      >
+        <svg
+          viewBox="0 0 100 100"
+        >
+          <path
+            class="one"
+            d="M54.2,69.8h-2.7c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h2.7c11.5,0,23.8-7.4,23.8-23.7
+          c0-9.1-6.9-15.8-16.4-15.8H38c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h23.6c5.3,0,10.1,1.9,13.6,5.3c3.5,3.4,5.4,8,5.4,13.1
+          c0,6.6-2.3,13-6.3,17.7C69.5,66.8,62.5,69.8,54.2,69.8z"
+          />
+          <path
+            class="two"
+            d="M55.7,59.5h-26c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h26c7.5,0,11.5-5.8,11.5-11.5
+            c0-4.2-3.2-7.3-7.7-7.3h-26c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h26c5.9,0,10.3,4.3,10.3,9.9c0,3.7-1.3,7.2-3.7,9.8
+            C63.5,58,59.9,59.5,55.7,59.5z"
+          />
+          <path
+            class="three"
+            d="M27.2,38h-6.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h6.3c0.7,0,1.3,0.6,1.3,1.3S27.9,38,27.2,38z"
+          />
+          <path
+            class="four"
+            d="M45.1,69.8h-5.8c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h5.8c0.7,0,1.3,0.6,1.3,1.3
+            C46.4,69.2,45.8,69.8,45.1,69.8z"
+          />
+        </svg>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/web-console/src/components/show-log/show-log.tsx b/web-console/src/components/show-log/show-log.tsx
@@ -21,6 +21,7 @@ import axios from 'axios';
 import copy from 'copy-to-clipboard';
 import React from 'react';
 
+import { Loader } from '../../components';
 import { AppToaster } from '../../singletons/toaster';
 import { UrlBaser } from '../../singletons/url-baser';
 import { QueryManager } from '../../utils';
@@ -109,7 +110,7 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
 
   render(): JSX.Element {
     const { endpoint, downloadFilename, status } = this.props;
-    const { logValue, error } = this.state;
+    const { logValue, error, loading } = this.state;
 
     return (
       <div className="show-log">
@@ -144,12 +145,16 @@ export class ShowLog extends React.PureComponent<ShowLogProps, ShowLogState> {
           </ButtonGroup>
         </div>
         <div className="main-area">
-          <textarea
-            className="bp3-input"
-            readOnly
-            value={logValue ? logValue : error}
-            ref={this.log}
-          />
+          {loading ? (
+            <Loader loadingText="" loading />
+          ) : (
+            <textarea
+              className="bp3-input"
+              readOnly
+              value={logValue ? logValue : error}
+              ref={this.log}
+            />
+          )}
         </div>
       </div>
     );

diff --git a/web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.tsx b/web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.tsx
@@ -170,7 +170,7 @@ export class SupervisorStatisticsTable extends React.PureComponent<
           </ButtonGroup>
         </div>
         <div className="main-area">
-          {loading ? <Loader loadingText="" loading /> : !loading && this.renderTable(error)}
+          {loading ? <Loader loadingText="" loading /> : this.renderTable(error)}
         </div>
       </div>
     );