Add souce indicator to cell

If a cell is getting data from a source besides the
default, it will display that sources name in the cell header

ui/src/shared/components/Layout.js

@@ -34,12 +34,13 @@ const Layout = ({
   onSummonOverlayTechnologies,
 }) =>
   <LayoutCell
-    onCancelEditCell={onCancelEditCell}
+    cell={cell}
+    sources={sources}
     isEditable={isEditable}
     onEditCell={onEditCell}
     onDeleteCell={onDeleteCell}
+    onCancelEditCell={onCancelEditCell}
     onSummonOverlayTechnologies={onSummonOverlayTechnologies}
-    cell={cell}
   >
     {cell.isWidget
       ? <WidgetCell cell={cell} timeRange={timeRange} source={source} />
@@ -48,6 +49,7 @@ const Layout = ({
           type={type}
           cellHeight={h}
           onZoom={onZoom}
+          sources={sources}
           timeRange={timeRange}
           templates={templates}
           autoRefresh={autoRefresh}

ui/src/shared/components/LayoutCell.js

@@ -31,7 +31,7 @@ class LayoutCell extends Component {
   }
 
   render() {
-    const {cell, children, isEditable} = this.props
+    const {cell, children, isEditable, sources} = this.props
 
     const {isDeleting} = this.state
     const queries = _.get(cell, ['queries'], [])
@@ -40,16 +40,18 @@ class LayoutCell extends Component {
       <div className="dash-graph">
         <LayoutCellMenu
           cell={cell}
-          onDeleteClick={this.handleDeleteClick}
-          onDelete={this.handleDeleteCell}
+          sources={sources}
           isDeleting={isDeleting}
           isEditable={isEditable}
-          handleClickOutside={this.closeMenu}
+          onDelete={this.handleDeleteCell}
           onEdit={this.handleSummonOverlay}
+          handleClickOutside={this.closeMenu}
+          onDeleteClick={this.handleDeleteClick}
         />
         <LayoutCellHeader
-          cellName={cell.name}
           queries={queries}
+          sources={sources}
+          cellName={cell.name}
           isEditable={isEditable}
         />
         <div className="dash-graph--container">
@@ -69,7 +71,7 @@ class LayoutCell extends Component {
   }
 }
 
-const {array, bool, func, node, number, shape, string} = PropTypes
+const {arrayOf, bool, func, node, number, shape, string} = PropTypes
 
 LayoutCell.propTypes = {
   cell: shape({
@@ -77,8 +79,9 @@ LayoutCell.propTypes = {
     isEditing: bool,
     x: number.isRequired,
     y: number.isRequired,
-    queries: array,
+    queries: arrayOf(shape()),
   }).isRequired,
+  sources: arrayOf(shape()),
   children: node.isRequired,
   onDeleteCell: func,
   onSummonOverlayTechnologies: func,

ui/src/shared/components/LayoutCellHeader.js

@@ -1,12 +1,19 @@
 import React, {PropTypes} from 'react'
 import classnames from 'classnames'
+import _ from 'lodash'
 
 import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
 
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
 
-const LayoutCellHeader = ({queries, isEditable, cellName}) => {
+const LayoutCellHeader = (
+  {queries, isEditable, cellName, sources},
+  {source: defaultSource}
+) => {
   const cellNameIsDefault = cellName === NEW_DEFAULT_DASHBOARD_CELL.name
+  const querySource = sources.find(
+    s => s.links.self === _.get(queries, ['0', 'source'], null)
+  )
 
   return (
     <div
@@ -21,6 +28,11 @@ const LayoutCellHeader = ({queries, isEditable, cellName}) => {
             : 'dash-graph--name'
         }
       >
+        {querySource && querySource.id !== defaultSource.id
+          ? <span className="dash-graph--custom-time">
+              {querySource.name}
+            </span>
+          : null}
         {cellName}
         {queries && queries.length
           ? <CustomTimeIndicator queries={queries} />
@@ -30,12 +42,17 @@ const LayoutCellHeader = ({queries, isEditable, cellName}) => {
   )
 }
 
-const {array, bool, string} = PropTypes
+const {arrayOf, bool, shape, string} = PropTypes
+
+LayoutCellHeader.contextTypes = {
+  source: shape({}),
+}
 
 LayoutCellHeader.propTypes = {
-  queries: array,
+  queries: arrayOf(shape()),
   isEditable: bool,
   cellName: string,
+  sources: arrayOf(shape()),
 }
 
 export default LayoutCellHeader

ui/src/shared/components/LayoutRenderer.js

@@ -170,7 +170,7 @@ LayoutRenderer.propTypes = {
   isEditable: bool,
   onCancelEditCell: func,
   onZoom: func,
-  sources: arrayOf(shape({})).isRequired,
+  sources: arrayOf(shape({})),
 }
 
 export default LayoutRenderer