Fix visualizations not showing graph name (#1125)

* Pass cell name through to Visualization component.

* Rename Header components in Dashboard page to better match their actual component names.

* Update changelog.

* Fix number on update changelog

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### Bug Fixes
   1. [#1104](https://github.com/influxdata/chronograf/pull/1104): Fix windows hosts on host list
+  2. [#1125](https://github.com/influxdata/chronograf/pull/1125): Fix visualizations not showing graph name
 
 ### Features
   1. [#1112](https://github.com/influxdata/chronograf/pull/1112): Add ability to delete a dashboard

ui/src/dashboards/components/CellEditorOverlay.js

@@ -91,7 +91,13 @@ class CellEditorOverlay extends Component {
 
   render() {
     const {onCancel, autoRefresh, timeRange} = this.props
-    const {activeQueryIndex, cellWorkingType, queriesWorkingDraft} = this.state
+    const {
+      activeQueryIndex,
+      cellWorkingName,
+      cellWorkingType,
+      queriesWorkingDraft,
+    } = this.state
+
     const queryActions = {
       addQuery: this.handleAddQuery,
       ..._.mapValues(queryModifiers, (qm) => this.queryStateReducer(qm)),
@@ -106,6 +112,7 @@ class CellEditorOverlay extends Component {
             queryConfigs={queriesWorkingDraft}
             activeQueryIndex={0}
             cellType={cellWorkingType}
+            cellName={cellWorkingName}
           />
           <ResizeBottom>
             <OverlayControls

ui/src/dashboards/containers/DashboardPage.js

@@ -4,8 +4,8 @@ import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 
 import CellEditorOverlay from 'src/dashboards/components/CellEditorOverlay'
-import Header from 'src/dashboards/components/DashboardHeader'
-import EditHeader from 'src/dashboards/components/DashboardHeaderEdit'
+import DashboardHeader from 'src/dashboards/components/DashboardHeader'
+import DashboardHeaderEdit from 'src/dashboards/components/DashboardHeaderEdit'
 import Dashboard from 'src/dashboards/components/Dashboard'
 
 import * as dashboardActionCreators from 'src/dashboards/actions'
@@ -205,12 +205,12 @@ const DashboardPage = React.createClass({
         }
         {
           isEditMode ?
-            <EditHeader
+            <DashboardHeaderEdit
               dashboard={dashboard}
               onCancel={this.handleCancelEditDashboard}
               onSave={this.handleRenameDashboard}
             /> :
-            <Header
+            <DashboardHeader
               buttonText={dashboard ? dashboard.name : ''}
               handleChooseAutoRefresh={handleChooseAutoRefresh}
               autoRefresh={autoRefresh}
@@ -237,7 +237,7 @@ const DashboardPage = React.createClass({
                 }) :
                 null
               }
-            </Header>
+            </DashboardHeader>
         }
         {
           dashboard ?

ui/src/data_explorer/components/Visualization.js

@@ -18,6 +18,7 @@ const {
 
 const Visualization = React.createClass({
   propTypes: {
+    cellName: string,
     cellType: string,
     autoRefresh: number.isRequired,
     timeRange: shape({
@@ -25,7 +26,6 @@ const Visualization = React.createClass({
       lower: string,
     }).isRequired,
     queryConfigs: arrayOf(shape({})).isRequired,
-    name: string,
     activeQueryIndex: number,
     height: string,
     heightPixels: number,
@@ -74,7 +74,14 @@ const Visualization = React.createClass({
   },
 
   render() {
-    const {queryConfigs, timeRange, height, heightPixels} = this.props
+    const {
+      queryConfigs,
+      timeRange,
+      height,
+      heightPixels,
+      cellName,
+    } = this.props
+
     const {source} = this.context
     const proxyLink = source.links.proxy
 
@@ -91,7 +98,7 @@ const Visualization = React.createClass({
       <div className={classNames("graph", {active: true})} style={{height}}>
         <div className="graph-heading">
           <div className="graph-title">
-            {name || "Graph"}
+            {cellName || "Graph"}
           </div>
           <div className="graph-actions">
             <ul className="toggle toggle-sm">