Merge pull request #1862 from influxdata/add-add-graph-to-cell-button

Add button to cell for improved user experience

CHANGELOG.md

@@ -10,6 +10,7 @@
 1. [#1863](https://github.com/influxdata/chronograf/pull/1863): Improve 'new-sources' server flag example by adding 'type' key
 
 ### UI Improvements
+1. [#1862](https://github.com/influxdata/chronograf/pull/1862): Show "Add Graph" button on cells with no queries
 1. [#1846](https://github.com/influxdata/chronograf/pull/1846): Increase screen real estate of Query Maker in the Cell Editor Overlay
 
 ## v1.3.6.0 [2017-08-08]

ui/src/dashboards/components/Dashboard.js

@@ -73,9 +73,9 @@ const Dashboard = ({
               synchronizer={synchronizer}
             />
           : <div className="dashboard__empty">
-              <p>This Dashboard has no Graphs</p>
+              <p>This Dashboard has no Cells</p>
               <button className="btn btn-primary btn-m" onClick={onAddCell}>
-                Add Graph
+                <span className="icon plus" />Add a Cell
               </button>
             </div>}
       </div>

ui/src/shared/components/AutoRefresh.js

@@ -209,10 +209,6 @@ const AutoRefresh = ComposedComponent => {
     },
 
     renderNoResults() {
-      if (this.props.children) {
-        return this.props.children
-      }
-
       return (
         <div className="graph-empty">
           <p data-test="data-explorer-no-results">No Results</p>
@@ -227,7 +223,9 @@ const AutoRefresh = ComposedComponent => {
 
       return data.every(datum => {
         return datum.response.results.every(result => {
-          return Object.keys(result).length === 0
+          return (
+            Object.keys(result).filter(k => k !== 'statement_id').length === 0
+          )
         })
       })
     },

ui/src/shared/components/NameableGraph.js

@@ -69,7 +69,16 @@ class NameableGraph extends Component {
           onEdit={onSummonOverlayTechnologies}
         />
         <div className="dash-graph--container">
-          {children}
+          {cell.queries.length
+            ? children
+            : <div className="graph-empty">
+                <button
+                  className="no-query--button btn btn-md btn-primary"
+                  onClick={() => onSummonOverlayTechnologies(cell)}
+                >
+                  Add Graph
+                </button>
+              </div>}
         </div>
       </div>
     )