feat(playground): Various dashboard hints

Author: paveltiunov

packages/cubejs-playground/src/ChartContainer.jsx

@@ -158,7 +158,7 @@ class ChartContainer extends React.Component {
               loading={addingToDashboard}
               disabled={!!frameworkItem.docsLink}
             >
-              {addingToDashboard ? 'Creating app and installing modules...' : 'Add to Dashboard'}
+              {addingToDashboard ? 'Installing modules. It may take a while. Please check console for progress...' : 'Add to Dashboard'}
             </Button>
           )}
           <Dropdown overlay={frameworkMenu}>

packages/cubejs-playground/src/DashboardPage.js

@@ -1,6 +1,7 @@
 /* globals window */
 import React, { Component } from 'react';
-import { Spin, Button } from 'antd';
+import { Spin, Button, Alert } from 'antd';
+import { Link } from "react-router-dom";
 import DashboardSource from "./DashboardSource";
 import fetch from './playgroundFetch';
 
@@ -29,7 +30,8 @@ class DashboardPage extends Component {
     const dashboardStatus = await (await fetch('/playground/dashboard-app-status')).json();
     this.setState({
       dashboardRunning: dashboardStatus.running,
-      dashboardPort: dashboardStatus.dashboardPort
+      dashboardPort: dashboardStatus.dashboardPort,
+      dashboardAppPath: dashboardStatus.dashboardAppPath
     });
   }
 
@@ -43,7 +45,7 @@ class DashboardPage extends Component {
 
   render() {
     const {
-      appCode, dashboardPort, loadError, dashboardRunning, dashboardStarting
+      appCode, dashboardPort, loadError, dashboardRunning, dashboardStarting, dashboardAppPath
     } = this.state;
     if (loadError) {
       return (
@@ -67,7 +69,7 @@ class DashboardPage extends Component {
       return (
         <h2 style={{ textAlign: 'center' }}>
           <Spin />
-          &nbsp;Creating dashboard react-app. It may take several minutes...
+          &nbsp;Creating dashboard react-app. It may take several minutes. Please check console for progress...
         </h2>
       );
     }
@@ -77,7 +79,9 @@ class DashboardPage extends Component {
           <h2>
             Dashboard App is not running.
             <br/>
-            Please start dashboard app or run it manually using `$ npm run start` in dashboard-app directory.
+            Please start dashboard app or run it manually using `$ npm run start` in&nbsp;
+            <b>{dashboardAppPath}</b>
+            &nbsp;directory.
           </h2>
           <p style={{ textAlign: 'center' }}>
             <Button
@@ -86,21 +90,40 @@ class DashboardPage extends Component {
               loading={dashboardStarting}
               onClick={() => this.startDashboardApp(true)}
             >
-              Start dashboard app
+              {dashboardStarting ? 'Dashboard app is starting. It may take a while. Please check console for progress...' : 'Start dashboard app'}
             </Button>
           </p>
         </div>
       );
     }
+    const devServerUrl = `http://${window.location.hostname}:${dashboardPort}`;
     return (
-      <iframe
-        src={`http://${window.location.hostname}:${dashboardPort}`}
-        style={{
-          width: '100%', height: '100%', border: 0, borderRadius: 4, overflow: 'hidden'
-        }}
-        sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-        title="Dashboard"
-      />
+      <div style={{ height: '100%', width: '100%' }}>
+        <Alert
+          message={(
+            <span>
+              This dashboard app can be edited at&nbsp;
+              <b>{dashboardAppPath}</b>
+              .
+              Dev server is running at&nbsp;
+              <a href={devServerUrl} target="_blank" rel="noopener noreferrer">{devServerUrl}</a>
+              . Add charts to dashboard using&nbsp;
+              <Link to="/explore">Explore</Link>
+              .
+            </span>
+          )}
+          type="info"
+          closable
+        />
+        <iframe
+          src={devServerUrl}
+          style={{
+            width: '100%', height: '100%', border: 0, borderRadius: 4, overflow: 'hidden'
+          }}
+          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+          title="Dashboard"
+        />
+      </div>
     );
   }
 }

packages/cubejs-playground/src/DashboardSource.js

@@ -62,6 +62,7 @@ const fetchWithRetry = (url, options, retries) => fetch(url, { ...options, retri
 
 class DashboardSource {
   async load(createApp) {
+    this.loadError = null;
     if (createApp) {
       await fetchWithRetry('/playground/ensure-dashboard-app', undefined, 5);
     }

packages/cubejs-server-core/core/DevServer.js

@@ -121,8 +121,8 @@ class DevServer {
       if (!(await fs.pathExists(sourcePath))) {
         res.status(404).json({
           error: await fs.pathExists(dashboardAppPath) ?
-            `Dashboard app corrupted. Please remove '${dashboardAppPath}' directory and recreate it` :
-            `Dashboard app not found in '${dashboardAppPath}' directory`
+            `Dashboard app corrupted. Please remove '${path.resolve(dashboardAppPath)}' directory and recreate it` :
+            `Dashboard app not found in '${path.resolve(dashboardAppPath)}' directory`
         });
         return;
       }
@@ -236,7 +236,8 @@ class DevServer {
       const dashboardPort = this.dashboardAppProcess && await this.dashboardAppProcess.dashboardUrlPromise;
       res.json({
         running: !!dashboardPort,
-        dashboardPort
+        dashboardPort,
+        dashboardAppPath: path.resolve(dashboardAppPath)
       });
     }));