import React, {PropTypes} from 'react'
import ReactTooltip from 'react-tooltip'

const SourceIndicator = React.createClass({
  propTypes: {
    sourceName: PropTypes.string,
  },

  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>
    )
  },
})

export default SourceIndicator

@@ -102,134 +102,52 @@
 r = 
-React.createClass(%7B%0A  propTypes: %7B%0A    
+(_, %7B
 source
-N
+: %7Bn
 ame: 
-PropTypes.string,%0A  %7D,%0A%0A  render() %7B%0A    const %7BsourceName%7D = this.props%0A  
+sourceName, url%7D%7D) =%3E %7B%0A
   if
@@ -167,18 +167,16 @@
 ) %7B%0A    
- 
- 
 return n
@@ -185,14 +185,10 @@
 l%0A  
-  %7D%0A  
+%7D%0A
   co
@@ -244,16 +244,25 @@
 rceName%7D
+ @ $%7Burl%7D
 %3C/code%3E%60
@@ -262,18 +262,16 @@
 /code%3E%60%0A
-  
   return
@@ -273,18 +273,16 @@
 eturn (%0A
-  
     %3Cdiv
@@ -284,26 +284,24 @@
  %3Cdiv%0A      
-  
 className=%22s
@@ -317,18 +317,16 @@
 icator%22%0A
-  
       da
@@ -361,26 +361,24 @@
 ltip%22%0A      
-  
 data-tip=%7Bso
@@ -394,18 +394,16 @@
 ooltip%7D%0A
-  
     %3E%0A  
@@ -406,18 +406,16 @@
 %3E%0A      
-  
 %3Cspan cl
@@ -436,26 +436,24 @@
 server2%22 /%3E%0A
-  
       %3CReact
@@ -468,18 +468,16 @@
         
-  
 id=%22sour
@@ -506,18 +506,16 @@
         
-  
 effect=%22
@@ -529,18 +529,16 @@
         
- 
- 
 html=%7Btr
@@ -541,18 +541,16 @@
 =%7Btrue%7D%0A
-  
         
@@ -575,18 +575,16 @@
         
- 
- 
 place=%22b
@@ -586,26 +586,24 @@
 ce=%22bottom%22%0A
-  
         clas
@@ -644,15 +644,11 @@
     
-  
 /%3E%0A
-  
     
@@ -658,21 +658,143 @@
 iv%3E%0A
-  
   )%0A
-  %7D,%0A%7D)
+%7D%0A%0Aconst %7Bshape, string%7D = PropTypes%0A%0ASourceIndicator.contextTypes = %7B%0A  source: shape(%7B%0A    name: string,%0A    url: string,%0A  %7D),%0A%7D
 %0A%0Aex

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