Add separate build/serve command for query_viewer_spa page

Author: unidevel

presto-ui/src/components/PageTitle.jsx

@@ -46,6 +46,11 @@ function ClusterResourceGroupNavBar({titles, urls, current = 0} : Props) {
         <>{navBarItems}</>
     );
 }
+
+function isOffline() {
+    return window.location.protocol === 'file:';
+}
+
 export class PageTitle extends React.Component<Props, State> {
     timeoutId: TimeoutID;
 
@@ -98,7 +103,15 @@ export class PageTitle extends React.Component<Props, State> {
     }
 
     componentDidMount() {
-        this.refreshLoop();
+        if ( isOffline() ) {
+            this.setState({
+                noConnection: true,
+                lightShown: true,
+            });
+        }
+        else {
+            this.refreshLoop();
+        }
     }
 
     renderStatusLight(): any {
@@ -115,7 +128,7 @@ export class PageTitle extends React.Component<Props, State> {
 
     render(): any {
         const info = this.state.info;
-        if (!info) {
+        if (!isOffline() && !info) {
             return null;
         }
 
@@ -137,19 +150,19 @@ export class PageTitle extends React.Component<Props, State> {
                         </div>
                         <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                             <span className="navbar-toggler-icon"></span>
-                            </button>
+                        </button>
                         <div id="navbar" className="navbar-collapse collapse">
                             <ul className="nav navbar-nav navbar-right ms-auto">
                                 <li>
                                     <span className="navbar-cluster-info">
                                         <span className="uppercase">Version</span><br/>
-                                        <span className="text" id="version-number">{info.nodeVersion.version}</span>
+                                        <span className="text" id="version-number">{isOffline() ? 'N/A' : info.nodeVersion.version}</span>
                                     </span>
                                 </li>
                                 <li>
                                     <span className="navbar-cluster-info">
                                         <span className="uppercase">Environment</span><br/>
-                                        <span className="text" id="environment">{info.environment}</span>
+                                        <span className="text" id="environment">{isOffline() ? 'N/A' : info.environment}</span>
                                     </span>
                                 </li>
                                 <li>
@@ -159,7 +172,7 @@ export class PageTitle extends React.Component<Props, State> {
                                         {this.renderStatusLight()}
                                          </span>
                                         &nbsp;
-                                        <span className="text" id="uptime">{info.uptime}</span>
+                                        <span className="text" id="uptime">{isOffline() ? 'Offline' : info.uptime}</span>
                                     </span>
                                 </li>
                             </ul>

presto-ui/src/package.json

@@ -41,6 +41,9 @@
     "install": "webpack --env=production --config webpack.config.js",
     "watch": "webpack --config webpack.config.js --watch",
     "serve": "webpack serve --config webpack.config.js",
+    "build:spa": "webpack --config webpack.config.js --env production --env config=spa",
+    "serve:spa": "webpack serve --config webpack.config.js --env config=spa",
+    "watch:spa": "webpack --config webpack.config.js --env config=spa --watch",
     "analyze": "webpack --env=production --config webpack.config.js --profile --json > stats.json && mv stats.json ../target/webapp/ && npx webpack-bundle-analyzer ../target/webapp/stats.json"
   },
   "resolutions": {

presto-ui/src/webpack.config.js

@@ -74,6 +74,20 @@ module.exports = (env) => {
         },
     };
 
+    const devServer = {
+        static: {
+            directory: path.join(__dirname, '..', outputDir),
+        },
+        proxy: [
+            {
+                context: ['/v1'],
+                target: `http://${apiHost}:${apiPort}`,
+                // secure: false, // when using http
+                // changeOrigin: true, // Modify the Origin header to match the target
+            },
+        ],
+    }
+
     const mainConfig = {
         ...baseConfig,
         entry: {
@@ -86,6 +100,7 @@ module.exports = (env) => {
             'timeline': './timeline.jsx',
             'res_groups': './res_groups.jsx',
             'sql_client': './sql_client.jsx',
+            'dev/query_viewer': './query_viewer.jsx',
             ...baseConfig.entry,
         },
         optimization: {
@@ -110,19 +125,7 @@ module.exports = (env) => {
                 },
             },
         },
-        devServer: {
-            static: {
-                directory: path.join(__dirname, '..', outputDir),
-            },
-            proxy: [
-                {
-                    context: ['/v1'],
-                    target: `http://${apiHost}:${apiPort}`,
-                    // secure: false, // when using http
-                    // changeOrigin: true, // Modify the Origin header to match the target
-                },
-            ],
-        },
+        devServer,
     };
 
     const spaConfig = {
@@ -156,5 +159,15 @@ module.exports = (env) => {
             splitChunks: false,
         }
     };
-    return [mainConfig, spaConfig]
+
+    if (env.config === 'all') {
+        return [mainConfig, spaConfig];
+    }
+    if (env.config === 'spa') {
+        return {
+            ...spaConfig,
+            devServer,
+        }
+    }
+    return mainConfig;
 };