From cb171e8a7b7ead5d19a3687be1f6e7750b19304d Mon Sep 17 00:00:00 2001
From: lukevmorris <lukevmorris@gmail.com>
Date: Wed, 12 Apr 2017 18:11:38 -0700
Subject: [PATCH] Add default display for an empty dashboard (#1259)

* Inline Dashboard.renderDashboard; add empty state

* Update CHANGELOG

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 ui/src/dashboards/components/Dashboard.js     | 51 +++++++++++--------
 ui/src/dashboards/containers/DashboardPage.js |  1 +
 ui/src/style/pages/dashboards.scss            | 14 +++++
 4 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2b183963e..344465bc8e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Bug Fixes
 ### Features
 ### UI Improvements
+  1. [#1259](https://github.com/influxdata/chronograf/pull/1259): Add default display for empty dashboard
   1. [#1258](https://github.com/influxdata/chronograf/pull/1258): Display Kapacitor alert endpoint options as radio button group
 
 ## v1.2.0-beta8 [2017-04-07]
diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js
index 0a06ea8330..b94e2c4543 100644
--- a/ui/src/dashboards/components/Dashboard.js
+++ b/ui/src/dashboards/components/Dashboard.js
@@ -7,6 +7,7 @@ const Dashboard = ({
   dashboard,
   isEditMode,
   inPresentationMode,
+  onAddCell,
   onPositionChange,
   onEditCell,
   onRenameCell,
@@ -21,16 +22,6 @@ const Dashboard = ({
     return null
   }
 
-  return (
-    <div className={classnames({'page-contents': true, 'presentation-mode': inPresentationMode})}>
-      <div className={classnames('container-fluid full-width dashboard', {'dashboard-edit': isEditMode})}>
-        {Dashboard.renderDashboard(dashboard, autoRefresh, timeRange, source, onPositionChange, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies)}
-      </div>
-    </div>
-  )
-}
-
-Dashboard.renderDashboard = (dashboard, autoRefresh, timeRange, source, onPositionChange, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies) => {
   const cells = dashboard.cells.map((cell) => {
     const dashboardCell = {...cell}
     dashboardCell.queries = dashboardCell.queries.map(({label, query, queryConfig, db}) =>
@@ -47,18 +38,33 @@ Dashboard.renderDashboard = (dashboard, autoRefresh, timeRange, source, onPositi
   })
 
   return (
-    <LayoutRenderer
-      timeRange={timeRange}
-      cells={cells}
-      autoRefresh={autoRefresh}
-      source={source.links.proxy}
-      onPositionChange={onPositionChange}
-      onEditCell={onEditCell}
-      onRenameCell={onRenameCell}
-      onUpdateCell={onUpdateCell}
-      onDeleteCell={onDeleteCell}
-      onSummonOverlayTechnologies={onSummonOverlayTechnologies}
-    />
+    <div className={classnames({'page-contents': true, 'presentation-mode': inPresentationMode})}>
+      {cells.length ?
+        <div className={classnames('container-fluid full-width dashboard', {'dashboard-edit': isEditMode})}>
+          <LayoutRenderer
+            timeRange={timeRange}
+            cells={cells}
+            autoRefresh={autoRefresh}
+            source={source.links.proxy}
+            onPositionChange={onPositionChange}
+            onEditCell={onEditCell}
+            onRenameCell={onRenameCell}
+            onUpdateCell={onUpdateCell}
+            onDeleteCell={onDeleteCell}
+            onSummonOverlayTechnologies={onSummonOverlayTechnologies}
+          />
+        </div> :
+        <div className="dashboard__empty">
+          <p>This Dashboard has no Graphs</p>
+          <button
+            className="btn btn-primary btn-m"
+            onClick={onAddCell}
+          >
+            Add Graph
+          </button>
+        </div>
+      }
+    </div>
   )
 }
 
@@ -74,6 +80,7 @@ Dashboard.propTypes = {
   dashboard: shape({}).isRequired,
   isEditMode: bool,
   inPresentationMode: bool,
+  onAddCell: func,
   onPositionChange: func,
   onEditCell: func,
   onRenameCell: func,
diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js
index 95d7a6c992..46389c83f3 100644
--- a/ui/src/dashboards/containers/DashboardPage.js
+++ b/ui/src/dashboards/containers/DashboardPage.js
@@ -232,6 +232,7 @@ const DashboardPage = React.createClass({
             source={source}
             autoRefresh={autoRefresh}
             timeRange={timeRange}
+            onAddCell={this.handleAddCell}
             onPositionChange={this.handleUpdatePosition}
             onEditCell={this.handleEditDashboardCell}
             onRenameCell={this.handleRenameDashboardCell}
diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss
index 46cc66094b..f9183629bc 100644
--- a/ui/src/style/pages/dashboards.scss
+++ b/ui/src/style/pages/dashboards.scss
@@ -49,6 +49,20 @@ $dash-graph-options-arrow: 8px;
     left: 0;
   }
 }
+.dashboard__empty {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    color: $g13-mist;
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
 .dash-graph {
   position: absolute;
   width: 100%;