Add default display for an empty dashboard (#1259)

* Inline Dashboard.renderDashboard; add empty state

* Update CHANGELOG

* Update changelog

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]

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,

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}

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%;