Merge pull request #115 from influxdata/feature/source-selection

Feature/source selection

ui/src/index.js

@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react';
 import {render} from 'react-dom';
 import {Provider} from 'react-redux';
-import {Router, Route, browserHistory} from 'react-router';
+import {Router, Route, browserHistory, IndexRoute} from 'react-router';
 
 import App from 'src/App';
 import CheckDataNodes from 'src/CheckDataNodes';
@@ -13,6 +13,7 @@ import RetentionPoliciesPage from 'src/retention_policies';
 import DataExplorer from 'src/chronograf';
 import DatabaseManager from 'src/database_manager';
 import SignUp from 'src/sign_up';
+import SelectSourcePage from 'src/select_source';
 import {UsersPage, UserEditPage} from 'src/web_users';
 import {ClusterAccountsPage, ClusterAccountPage} from 'src/cluster_accounts';
 import {RolesPageContainer, RolePageContainer} from 'src/access_control';
@@ -121,6 +122,7 @@ const Root = React.createClass({
           <Route path="/signup/admin/:step" component={SignUp} />
           <Route path="/" component={App}>
             <Route component={CheckDataNodes}>
+              <IndexRoute component={SelectSourcePage} />
               <Route path="overview" component={OverviewPage} />
               <Route path="queries" component={QueriesPage} />
               <Route path="accounts" component={ClusterAccountsPage} />

ui/src/select_source/containers/SelectSourcePage.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import FlashMessages from 'shared/components/FlashMessages';
+import {createSource, getSources} from 'shared/apis';
+
+export const SelectSourcePage = React.createClass({
+  getInitialState() {
+    return {
+      sources: [],
+    };
+  },
+
+  componentDidMount() {
+    getSources().then(({data: {sources}}) => {
+      this.setState({
+        sources,
+      });
+    });
+  },
+
+  handleSelectSource(e) {
+    e.preventDefault();
+    // const source = this.state.sources.find((s) => s.name === this.selectedSource.value);
+    // redirect to /hosts?sourceId=source.id
+  },
+
+  handleNewSource(e) {
+    e.preventDefault();
+    const source = {
+      url: this.sourceURL.value,
+      name: this.sourceName.value,
+      username: this.sourceUser.value,
+      password: this.sourcePassword.value,
+    };
+    createSource(source).then(() => {
+      // redirect to /hosts?sourceId=123
+    });
+  },
+
+  render() {
+    return (
+      <div id="select-source-page">
+        <div className="container">
+          <div className="row">
+            <div className="col-md-8 col-md-offset-2">
+              <div className="panel panel-summer">
+                <div className="panel-heading text-center">
+                  <h2 className="deluxe">Welcome to Chronograf</h2>
+                </div>
+                <div className="panel-body">
+                  <form onSubmit={this.handleSelectSource}>
+                    <div className="form-group col-sm-12">
+                      <h4>Select an InfluxDB server to connect to</h4>
+                      <label htmlFor="source">InfluxDB Server</label>
+                      <select className="form-control input-lg" id="source">
+                        {this.state.sources.map(({name}) => {
+                          return <option ref={(r) => this.selectedSource = r} key={name} value={name}>{name}</option>;
+                        })}
+                      </select>
+                    </div>
+
+                    <div className="form-group col-sm-6 col-sm-offset-3">
+                      <button className="btn btn-lg btn-block btn-success" type="submit">Connect</button>
+                    </div>
+                  </form>
+
+                  <form onSubmit={this.handleNewSource}>
+                    <div>
+                      <h4>Or connect to a new server</h4>
+                      <label htmlFor="connect-string">connection string</label>
+                      <input ref={(r) => this.sourceURL = r} id="connect-string" placeholder="http://localhost:8086"></input>
+                      <label htmlFor="name">name</label>
+                      <input ref={(r) => this.sourceName = r} id="name" placeholder="Influx 1"></input>
+                      <label htmlFor="username">username</label>
+                      <input ref={(r) => this.sourceUser = r} id="username"></input>
+                      <label htmlFor="password">password</label>
+                      <input ref={(r) => this.sourcePassword = r} id="password" type="password"></input>
+                    </div>
+
+                    <div className="form-group col-sm-6 col-sm-offset-3">
+                      <button className="btn btn-lg btn-block btn-success" type="submit">Create</button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+
+export default FlashMessages(SelectSourcePage);

ui/src/select_source/index.js

@@ -0,0 +1,2 @@
+import SelectSourcePage from './containers/SelectSourcePage';
+export default SelectSourcePage;

ui/src/shared/apis/index.js

@@ -6,6 +6,19 @@ export function getSources() {
   });
 }
 
+export function createSource({url, name, username, password}) {
+  return AJAX({
+    url: '/chronograf/v1/sources',
+    method: 'POST',
+    data: {
+      url,
+      name,
+      username,
+      password,
+    },
+  });
+}
+
 export function updateCluster(clusterID, displayName) {
   return AJAX({
     url: `/api/int/v1/clusters/${clusterID}`,

ui/webpack/devConfig.js

@@ -4,7 +4,7 @@ var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
-  devtool: 'cheap-eval-source-map',
+  devtool: 'source-map',
   entry: {
     app: path.resolve(__dirname, '..', 'src', 'index.js'),
   },