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,17 +1,11 @@
 import React, {PropTypes} from 'react'
 import ReactTooltip from 'react-tooltip'
 
-const SourceIndicator = React.createClass({
-  propTypes: {
-    sourceName: PropTypes.string,
-  },
-
-  render() {
-    const {sourceName} = this.props
+const SourceIndicator = (_, {source: {name: sourceName, url}}) => {
   if (!sourceName) {
     return null
   }
-    const sourceNameTooltip = `Connected to <code>${sourceName}</code>`
+  const sourceNameTooltip = `Connected to <code>${sourceName} @ ${url}</code>`
   return (
     <div
       className="source-indicator"
@@ -29,7 +23,15 @@ const SourceIndicator = React.createClass({
       />
     </div>
   )
-  },
-})
+}
+
+const {shape, string} = PropTypes
+
+SourceIndicator.contextTypes = {
+  source: shape({
+    name: string,
+    url: string,
+  }),
+}
 
 export default SourceIndicator