Use context to display source name, host, and port in SourceIndicator

Refactor SourceIndicator into SFC

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

ui/src/shared/components/SourceIndicator.js

@@ -1,35 +1,37 @@
 import React, {PropTypes} from 'react'
 import ReactTooltip from 'react-tooltip'
 
-const SourceIndicator = React.createClass({
-  propTypes: {
-    sourceName: PropTypes.string,
-  },
+const SourceIndicator = (_, {source: {name: sourceName, url}}) => {
+  if (!sourceName) {
+    return null
+  }
+  const sourceNameTooltip = `Connected to <code>${sourceName} @ ${url}</code>`
+  return (
+    <div
+      className="source-indicator"
+      data-for="source-indicator-tooltip"
+      data-tip={sourceNameTooltip}
+    >
+      <span className="icon server2" />
+      <ReactTooltip
+        id="source-indicator-tooltip"
+        effect="solid"
+        html={true}
+        offset={{top: 2}}
+        place="bottom"
+        class="influx-tooltip place-bottom"
+      />
+    </div>
+  )
+}
 
-  render() {
-    const {sourceName} = this.props
-    if (!sourceName) {
-      return null
-    }
-    const sourceNameTooltip = `Connected to <code>${sourceName}</code>`
-    return (
-      <div
-        className="source-indicator"
-        data-for="source-indicator-tooltip"
-        data-tip={sourceNameTooltip}
-      >
-        <span className="icon server2" />
-        <ReactTooltip
-          id="source-indicator-tooltip"
-          effect="solid"
-          html={true}
-          offset={{top: 2}}
-          place="bottom"
-          class="influx-tooltip place-bottom"
-        />
-      </div>
-    )
-  },
-})
+const {shape, string} = PropTypes
+
+SourceIndicator.contextTypes = {
+  source: shape({
+    name: string,
+    url: string,
+  }),
+}
 
 export default SourceIndicator