import React, {PropTypes} from 'react';
import {withRouter, Link} from 'react-router';
import {getSources} from 'shared/apis';

export const ManageSources = React.createClass({
  propTypes: {
    location: PropTypes.shape({
      pathname: PropTypes.string.isRequired,
    }).isRequired,
  },
  getInitialState() {
    return {
      sources: [],
    };
  },

  componentDidMount() {
    getSources().then(({data: {sources}}) => {
      this.setState({sources});
    });
  },

  changeSort() {},

  render() {
    const {sources} = this.state;
    const {pathname} = this.props.location;

    return (
      <div id="manage-sources-page">
        <div className="enterprise-header">
          <div className="enterprise-header__container">
            <div className="enterprise-header__left">
              <h1>
                Manage Sources
              </h1>
            </div>
          </div>
        </div>
        <div className="container">
          <div className="row">
            <div className="col-md-8 col-md-offset-2">
              <table className="table v-center">
                <thead>
                  <tr>
                    <th onClick={this.changeSort} className="sortable-header">Name</th>
                    <th>Host</th>
                    <th>Kapacitor</th>
                    <th></th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {
                    sources.map((source) => {
                      return (
                        <tr key={source.id}>
                          <td>{source.name}{source.default ? <span className="label label-primary">Default</span> : null}</td>
                          <td>{source.url}</td>
                          <td>{source.links.kapacitors}</td>
                          <td><Link className="btn btn-default btn-xs" to={`${pathname}/${source.id}/edit`}>Edit</Link></td>
                          <td><Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link></td>
                        </tr>
                        );
                    })
                  }
                </tbody>
              </table>
              <div className="btn btn-primary">Add</div>
            </div>
          </div>
        </div>
      </div>
    );
  },
});

export default withRouter(ManageSources);

@@ -33,16 +33,40 @@
 react';%0A
+import _ from 'lodash';%0A
 import %7B
@@ -122,16 +122,30 @@
 tSources
+, getKapacitor
 %7D from '
@@ -495,41 +495,550 @@
 ces%7D
-);%0A    %7D);%0A  %7D,%0A%0A  changeSort() %7B
+, () =%3E %7B%0A        sources.forEach((source) =%3E %7B%0A          getKapacitor(source).then((kapacitor) =%3E %7B%0A            this.setState((prevState) =%3E %7B%0A              const newSources = prevState.sources.map((newSource) =%3E %7B%0A                if (newSource.id !== source.id) %7B%0A                  return newSource;%0A                %7D%0A%0A                return Object.assign(%7B%7D, newSource, %7Bkapacitor%7D);%0A              %7D);%0A%0A              return Object.assign(%7B%7D, prevState, %7Bsources: newSources%7D);%0A            %7D);%0A          %7D);%0A        %7D);%0A      %7D);%0A    %7D);%0A  
 %7D,%0A%0A
@@ -1701,62 +1701,8 @@
  %3Cth
- onClick=%7Bthis.changeSort%7D className=%22sortable-header%22
 %3ENam
@@ -2266,31 +2266,48 @@
 td%3E%7B
-source.links.kapacitors
+_.get(source, %5B'kapacitor', 'name'%5D, '')
 %7D%3C/t

Update the kapacitor column on manage sources page