Add basic welcome message to visualizer

Reviewed By: mjesun

Differential Revision: D13093802

fbshipit-source-id: 93d190c19c2e8ffd7de0ae2fde6d772e0e729687

Author: motiz88

packages/metro-visualizer/src/app/dashboard/DashboardApp.js

@@ -15,6 +15,7 @@
 const BundlePlots = require('./components/BundlePlots');
 const BundleRunForm = require('./components/BundleRunForm');
 const React = require('react');
+const WelcomeMessage = require('./components/WelcomeMessage');
 
 const handleAPIError = require('../utils/handleAPIError');
 
@@ -29,21 +30,29 @@ import {message, Row, Col, Card, Tag, Icon} from 'antd';
 import type {BundleOptions} from 'metro/src/shared/types.flow.js';
 
 type State = {
-  metroHistory: MetroHistory,
-  selectedBundleHash?: ?string,
-  showLoadingIndicator: boolean,
+  metroHistory: ?MetroHistory,
+  selectedBundleHash: ?string,
+  isLoadingData: boolean,
+  isBundling: boolean,
 };
 
 class DashboardApp extends React.Component<mixed, State> {
+  state = {
+    metroHistory: undefined,
+    selectedBundleHash: undefined,
+    isLoadingData: false,
+    isBundling: false,
+  };
+
   componentDidMount() {
     this.fetchBundles();
   }
 
   fetchBundles() {
-    this.setState({showLoadingIndicator: true});
+    this.setState({isLoadingData: true});
     fetch('/visualizer/bundles')
       .then(res => {
-        this.setState({showLoadingIndicator: false});
+        this.setState({isLoadingData: false});
         return handleAPIError(res);
       })
       .then(response => response.json())
@@ -53,50 +62,60 @@ class DashboardApp extends React.Component<mixed, State> {
       .catch(error => message.error(error.message));
   }
 
+  _handleReload = () => {
+    this.fetchBundles();
+  };
+
   render() {
+    const {metroHistory, isLoadingData, isBundling} = this.state;
+    const loadedEmptyHistory =
+      !isLoadingData && metroHistory && Object.keys(metroHistory).length === 0;
     return (
-      this.state && (
-        <div>
-          <Row type="flex" justify="center">
-            <img
-              src={'https://facebook.github.io/metro/img/metro.svg'}
-              className={logo}
-              alt="logo"
+      <div>
+        <Row type="flex" justify="center">
+          <img
+            src={'https://facebook.github.io/metro/img/metro.svg'}
+            className={logo}
+            alt="logo"
+          />
+        </Row>
+
+        <Row type="flex" justify="center">
+          <Col span={16}>
+            <BundleRunForm
+              handleStartedBundling={() => this.setState({isBundling: true})}
+              handleFinishedBundling={() => {
+                this.fetchBundles();
+                this.setState({isBundling: false});
+              }}
             />
-          </Row>
-
-          <Row type="flex" justify="center">
-            <Col span={16}>
-              <BundleRunForm
-                handleStartedBundling={() =>
-                  this.setState({showLoadingIndicator: true})
-                }
-                handleFinishedBundling={() => this.fetchBundles()}
-              />
-            </Col>
-          </Row>
-
-          <Row type="flex" justify="center">
-            <Col span={16}>
-              {this.state.metroHistory &&
-                Object.keys(this.state.metroHistory).map(bundleHash => (
-                  <Link to={`/graph/${bundleHash}`} key={bundleHash}>
-                    <BundleCard
-                      onClick={() =>
-                        this.setState({selectedBundleHash: bundleHash})
-                      }
-                      bundleInfo={this.state.metroHistory[bundleHash]}
-                    />
-                  </Link>
-                ))}
-            </Col>
-          </Row>
-
-          {this.state.showLoadingIndicator && (
-            <Icon type="loading" className={loadingIndicator} />
-          )}
-        </div>
-      )
+          </Col>
+        </Row>
+
+        {loadedEmptyHistory && !isBundling ? (
+          <WelcomeMessage onReload={this._handleReload} />
+        ) : null}
+
+        <Row type="flex" justify="center">
+          <Col span={16}>
+            {metroHistory &&
+              Object.keys(metroHistory).map(bundleHash => (
+                <Link to={`/graph/${bundleHash}`} key={bundleHash}>
+                  <BundleCard
+                    onClick={() =>
+                      this.setState({selectedBundleHash: bundleHash})
+                    }
+                    bundleInfo={metroHistory[bundleHash]}
+                  />
+                </Link>
+              ))}
+          </Col>
+        </Row>
+
+        {(isLoadingData || isBundling) && (
+          <Icon type="loading" className={loadingIndicator} />
+        )}
+      </div>
     );
   }
 }

packages/metro-visualizer/src/app/dashboard/components/WelcomeMessage.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+/* eslint-env browser */
+
+'use strict';
+
+const React = require('react');
+
+const {css} = require('emotion');
+const message = css`
+  text-align: center;
+  margin-top: 8px;
+  margin-bottom: 16px;
+`;
+
+import {Row, Col} from 'antd';
+
+type Props = {|
+  onReload: () => void,
+|};
+
+class WelcomeMessage extends React.Component<Props> {
+  _onReloadClick = e => {
+    e.preventDefault();
+    this.props.onReload();
+  };
+
+  render() {
+    return (
+      <Row type="flex" justify="center">
+        <Col span={16} className={message}>
+          I don't see any bundles here. If you've started a build externally,{' '}
+          <a href="#" onClick={this._onReloadClick}>
+            reload this page
+          </a>{' '}
+          to see it.
+        </Col>
+      </Row>
+    );
+  }
+}
+
+module.exports = WelcomeMessage;