Graphs are no longer editable from a Host Page (#1069)

* Graphs can now not be edited in on a HostPage

* Update changelog

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 ### Bug Fixes
   1. [#1065](https://github.com/influxdata/chronograf/pull/1065): Save and Cancel edits to a Dashboard name
+  2. [#1069](https://github.com/influxdata/chronograf/pull/1069): Graphs are no longer editable from a Host Page
 
 ## v1.2.0-beta6 [2017-03-24]
 

ui/src/dashboards/components/DashboardHeader.js

@@ -91,8 +91,8 @@ DashboardHeader.propTypes = {
   handleChooseAutoRefresh: func.isRequired,
   handleClickPresentationButton: func.isRequired,
   source: shape({}),
-  onAddCell: func.isRequired,
-  onEditDashboard: func.isRequired,
+  onAddCell: func,
+  onEditDashboard: func,
 }
 
 export default DashboardHeader

ui/src/hosts/containers/HostPage.js

@@ -145,6 +145,7 @@ export const HostPage = React.createClass({
         autoRefresh={autoRefresh}
         source={source.links.proxy}
         host={this.props.params.hostID}
+        shouldNotBeEditable={true}
       />
     );
   },

ui/src/shared/components/LayoutRenderer.js

@@ -14,6 +14,7 @@ const RefreshingSingleStat = AutoRefresh(SingleStat);
 
 const {
   arrayOf,
+  bool,
   func,
   number,
   shape,
@@ -52,6 +53,7 @@ export const LayoutRenderer = React.createClass({
     onUpdateCell: func,
     onDeleteCell: func,
     onSummonOverlayTechnologies: func,
+    shouldNotBeEditable: bool,
   },
 
   buildQuery(q) {
@@ -87,7 +89,7 @@ export const LayoutRenderer = React.createClass({
   },
 
   generateVisualizations() {
-    const {autoRefresh, source, cells, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies} = this.props;
+    const {autoRefresh, source, cells, onEditCell, onRenameCell, onUpdateCell, onDeleteCell, onSummonOverlayTechnologies, shouldNotBeEditable} = this.props;
 
     return cells.map((cell) => {
       const qs = cell.queries.map((query) => {
@@ -106,6 +108,7 @@ export const LayoutRenderer = React.createClass({
               onUpdateCell={onUpdateCell}
               onDeleteCell={onDeleteCell}
               onSummonOverlayTechnologies={onSummonOverlayTechnologies}
+              shouldNotBeEditable={shouldNotBeEditable}
               cell={cell}
             >
               <RefreshingSingleStat queries={[qs[0]]} autoRefresh={autoRefresh} />
@@ -127,6 +130,7 @@ export const LayoutRenderer = React.createClass({
             onUpdateCell={onUpdateCell}
             onDeleteCell={onDeleteCell}
             onSummonOverlayTechnologies={onSummonOverlayTechnologies}
+            shouldNotBeEditable={shouldNotBeEditable}
             cell={cell}
           >
             <RefreshingLineGraph

ui/src/shared/components/NameableGraph.js

@@ -25,6 +25,7 @@ const NameableGraph = React.createClass({
     onUpdateCell: func,
     onDeleteCell: func,
     onSummonOverlayTechnologies: func,
+    shouldNotBeEditable: bool,
   },
 
   getInitialState() {
@@ -59,6 +60,7 @@ const NameableGraph = React.createClass({
       onUpdateCell,
       onDeleteCell,
       onSummonOverlayTechnologies,
+      shouldNotBeEditable,
       children,
     } = this.props
 
@@ -82,7 +84,7 @@ const NameableGraph = React.createClass({
         />
       )
     } else {
-      nameOrField = (<span className="dash-graph--name">{name}</span>)
+      nameOrField = (<span className={classnames("dash-graph--name", {editable: !shouldNotBeEditable})}>{name}</span>)
     }
 
     let onClickHandler
@@ -98,7 +100,18 @@ const NameableGraph = React.createClass({
       <div className="dash-graph">
         <div className="dash-graph--heading">
           <div onClick={onClickHandler(x, y, isEditing)}>{nameOrField}</div>
-          <ContextMenu isOpen={this.state.isMenuOpen} toggleMenu={this.toggleMenu} onEdit={onSummonOverlayTechnologies} onDelete={onDeleteCell} cell={cell} handleClickOutside={this.closeMenu}/>
+          {
+            shouldNotBeEditable ?
+              null :
+              <ContextMenu
+                isOpen={this.state.isMenuOpen}
+                toggleMenu={this.toggleMenu}
+                onEdit={onSummonOverlayTechnologies}
+                onDelete={onDeleteCell}
+                cell={cell}
+                handleClickOutside={this.closeMenu}
+              />
+          }
         </div>
         <div className="dash-graph--container">
           {children}

ui/src/style/pages/dashboards.scss

@@ -141,28 +141,30 @@ $dash-graph-heading: 30px;
   border: 2px solid $g3-castle;
   top: 2px;
 
-  &:after {
-    display: inline-block;
-    content: "\f058";
-    font-family: 'icomoon' !important;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    line-height: 1;
-    text-transform: none;
-    color: $g11-sidewalk;
-    font-size: 14px;
-    opacity: 0;
-    transition: opacity 0.25s ease;
-    margin-left: 5px;
-  }
-
-  &:hover {
-    cursor: text;
-    color: $g20-white;
-
+  &.editable {
     &:after {
-      opacity: 1;
+      display: inline-block;
+      content: "\f058";
+      font-family: 'icomoon' !important;
+      font-style: normal;
+      font-weight: normal;
+      font-variant: normal;
+      line-height: 1;
+      text-transform: none;
+      color: $g11-sidewalk;
+      font-size: 14px;
+      opacity: 0;
+      transition: opacity 0.25s ease;
+      margin-left: 5px;
+    }
+
+    &:hover {
+      cursor: text;
+      color: $g20-white;
+
+      &:after {
+        opacity: 1;
+      }
     }
   }
 }