Allow a source override on SourceIndicator

Use SourceIndicator server icon with tooltip on cells

Signed-off-by: Jared Scheib <jared.scheib@gmail.com>

ui/src/shared/components/LayoutCellHeader.js

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
 
+import SourceIndicator from 'shared/components/SourceIndicator'
 import CustomTimeIndicator from 'shared/components/CustomTimeIndicator'
 
 import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants/index'
@@ -30,9 +31,7 @@ const LayoutCellHeader = (
         {cellName}
         <div className="dash-graph--custom-indicators">
           {querySource && querySource.id !== defaultSource.id
-            ? <span className="custom-indicator">
+            ? <SourceIndicator sourceOverride={querySource} />
-                {querySource.name}
-              </span>
             : null}
           {queries && queries.length
             ? <CustomTimeIndicator queries={queries} />

ui/src/shared/components/SourceIndicator.js

@@ -1,11 +1,19 @@
 import React, {PropTypes} from 'react'
+import _ from 'lodash'
 import ReactTooltip from 'react-tooltip'
 
-const SourceIndicator = (_, {source: {name: sourceName, url}}) => {
+const SourceIndicator = ({sourceOverride}, {source: {name, url}}) => {
+  const sourceName = _.get(sourceOverride, 'name', null)
+    ? sourceOverride.name
+    : name
+  const sourceUrl = _.get(sourceOverride, 'url', null)
+    ? sourceOverride.url
+    : url
+
   if (!sourceName) {
     return null
   }
-  const sourceNameTooltip = `Connected to <code>${sourceName} @ ${url}</code>`
+  const sourceNameTooltip = `Connected to <code>${sourceName} @ ${sourceUrl}</code>`
   return (
     <div
       className="source-indicator"
@@ -27,6 +35,13 @@ const SourceIndicator = (_, {source: {name: sourceName, url}}) => {
 
 const {shape, string} = PropTypes
 
+SourceIndicator.propTypes = {
+  sourceOverride: shape({
+    name: string,
+    url: string,
+  }),
+}
+
 SourceIndicator.contextTypes = {
   source: shape({
     name: string,