Merge pull request #328 from influxdata/manage-sources-polish

Manage Sources Polish
2016-11-04 11:52:50 -07:00 · 2016-11-04 11:52:50 -07:00 · 5a5b6c0052
parent 5e6c52ef26 3dde39fa26
commit 5a5b6c0052
5 changed files with 155 additions and 54 deletions
--- a/ui/src/kapacitor/containers/KapacitorPage.js
+++ b/ui/src/kapacitor/containers/KapacitorPage.js
@ -46,7 +46,7 @@ export const KapacitorPage = React.createClass({
      username: newUsername,
      password: this.kapacitorPassword.value,
    }).then(() => {
-      this.props.addFlashMessage({type: 'success', text: 'Kapacitor saved'});
+      this.props.addFlashMessage({type: 'success', text: 'Kapacitor Created!'});
      this.fetchKapacitor();
    }).catch(() => {
      this.props.addFlashMessage({type: 'error', text: 'There was a problem creating the Kapacitor record'});
@ -61,7 +61,7 @@ export const KapacitorPage = React.createClass({
      username: newUsername || kapacitor.username,
      password: this.kapacitorPassword.value,
    }).then(() => {
-      this.props.addFlashMessage({type: 'success', text: 'Kapacitor saved'});
+      this.props.addFlashMessage({type: 'success', text: 'Kapacitor Saved!'});
      this.fetchKapacitor();
    }).catch(() => {
      this.props.addFlashMessage({type: 'error', text: 'There was a problem updating the Kapacitor record'});
@ -93,7 +93,7 @@ export const KapacitorPage = React.createClass({
          <div className="enterprise-header__container">
            <div className="enterprise-header__left">
              <h1>
-                Kapacitor Configuration
+                Configure Kapacitor
              </h1>
            </div>
          </div>
@ -101,7 +101,7 @@ export const KapacitorPage = React.createClass({

        <div className="container-fluid">
          <div className="row">
-            <div className="col-md-8 col-offset-2">
+            <div className="col-md-8 col-md-offset-2">
              <div className="panel panel-minimal">
                <div className="panel-body">
                  <p>
@ -109,10 +109,8 @@ export const KapacitorPage = React.createClass({
                    This page will let you configure which Kapacitor to use and
                    set up alert end points like email, Slack, and others.
                  </p>
-                </div>
-
-                <div className="panel-body">
-                  <h4 className="text-center">Kapacitor Connection Information</h4>
+                  <hr/>
+                  <h4 className="text-center">Connection Details</h4>
                  <br/>
                  <form onSubmit={this.handleKapacitorUpdate}>
                    <div>
@ -134,8 +132,8 @@ export const KapacitorPage = React.createClass({
                      </div>
                    </div>

-                    <div className="form-group col-xs-12 text-center">
-                      <button className="btn btn-success" type="submit">&nbsp;&nbsp;Set Connection Details&nbsp;&nbsp;</button>
+                    <div className="form-group col-xs-4 col-xs-offset-4">
+                      <button className="btn btn-block btn-success" type="submit">Connect Kapacitor</button>
                    </div>
                  </form>
                </div>
@ -143,7 +141,7 @@ export const KapacitorPage = React.createClass({
            </div>
          </div>
          <div className="row">
-            <div className="col-md-8 col-offset-2">
+            <div className="col-md-8 col-md-offset-2">
              {this.renderAlertOutputs()}
            </div>
          </div>
--- a/ui/src/sources/containers/CreateSource.js
+++ b/ui/src/sources/containers/CreateSource.js
@ -41,7 +41,7 @@ export const CreateSource = React.createClass({
  render() {
    return (
      <div id="select-source-page">
-        <div className="container">
+        <div className="container-fluid">
          <div className="row">
            <div className="col-md-8 col-md-offset-2">
              <div className="panel panel-summer">
--- a/ui/src/sources/containers/ManageSources.js
+++ b/ui/src/sources/containers/ManageSources.js
@ -40,48 +40,63 @@ export const ManageSources = React.createClass({
  render() {
    const {sources} = this.state;
    const {pathname} = this.props.location;
+    const numSources = sources.length;
+    let sourcesTitle = `${numSources} Sources`;
+
+    if (numSources === 1) {
+      sourcesTitle = `${numSources} Source`;
+    }

    return (
      <div id="manage-sources-page">
        <div className="enterprise-header">
          <div className="enterprise-header__container">
            <div className="enterprise-header__left">
-              <h1>
-                Manage Sources
-              </h1>
+              <h1>InfluxDB Sources</h1>
            </div>
          </div>
        </div>
-        <div className="container">
+        <div className="container-fluid">
          <div className="row">
-            <div className="col-md-8 col-md-offset-2">
-              <table className="table v-center">
-                <thead>
-                  <tr>
-                    <th>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>{_.get(source, ['kapacitor', 'name'], '')}</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>
+            <div className="col-md-12">
+
+              <div className="panel panel-minimal">
+                <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+                  <h2 className="panel-title">{sourcesTitle}</h2>
+                  <Link to={`/sources/1/manage-sources/new`} className="btn btn-sm btn-primary">Add New Source</Link>
+                </div>
+                <div className="panel-body">
+                  <div className="table-responsive margin-bottom-zero">
+                    <table className="table v-center margin-bottom-zero">
+                      <thead>
+                        <tr>
+                          <th>Name</th>
+                          <th>Host</th>
+                          <th>Kapacitor</th>
+                          <th className="text-right"></th>
                        </tr>
-                      );
-                    })
-                  }
-                </tbody>
-              </table>
-              <Link to={`/sources/1/manage-sources/new`} className="btn btn-primary">Add</Link>
+                      </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>{_.get(source, ['kapacitor', 'name'], '')}</td>
+                                <td className="text-right">
+                                  <Link className="btn btn-default btn-xs" to={`${pathname}/${source.id}/edit`}>Edit</Link>
+                                  <Link className="btn btn-success btn-xs" to={`/sources/${source.id}/hosts`}>Connect</Link>
+                                </td>
+                              </tr>
+                            );
+                          })
+                        }
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
            </div>
          </div>
        </div>
--- a/ui/src/sources/containers/SourceForm.js
+++ b/ui/src/sources/containers/SourceForm.js
@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react';
 import {withRouter} from 'react-router';
 import {getSource, createSource, updateSource} from 'shared/apis';
+import classNames from 'classnames';

 export const SourceForm = React.createClass({
  propTypes: {
@ -81,17 +82,17 @@ export const SourceForm = React.createClass({
          <div className="enterprise-header__container">
            <div className="enterprise-header__left">
              <h1>
-                Source Form
+                {editMode ? "Edit Source" : "Add a New Source"}
              </h1>
            </div>
          </div>
        </div>
-        <div className="container">
+        <div className="container-fluid">
          <div className="row">
            <div className="col-md-8 col-md-offset-2">
              <div className="panel panel-summer">
                <div className="panel-body">
-                  <h4 className="text-center">{editMode ? "Update Existing Source" : "Connect to a New Source"}</h4>
+                  <h4 className="text-center">Connection Details</h4>
                  <br/>

                  <form onSubmit={this.handleSubmit}>
@ -112,18 +113,16 @@ export const SourceForm = React.createClass({
                        <label htmlFor="password">Password</label>
                        <input type="password" name="password" ref={(r) => this.sourcePassword = r} className="form-control" id="password" onChange={this.onInputChange} value={source.password || ''}></input>
                      </div>
-                      <div className="form-group col-xs-6 col-xs-offset-2">
-                        <div className="checkbox">
-                          <label>
-                            <input type="checkbox" defaultChecked={source.default} ref={(r) => this.sourceDefault = r} />
-                            Default source
-                          </label>
+                      <div className="form-group col-xs-8 col-xs-offset-2">
+                        <div className="form-control-static">
+                          <input type="checkbox" id="defaultSourceCheckbox" defaultChecked={source.default} ref={(r) => this.sourceDefault = r} />
+                          <label htmlFor="defaultSourceCheckbox">Make this the default source</label>
                        </div>
                      </div>
                    </div>

-                    <div className="form-group col-xs-12 text-center">
-                      <button className="btn btn-success" type="submit">{editMode ? "Update" : "Create"}</button>
+                    <div className="form-group col-xs-4 col-xs-offset-4">
+                      <button className={classNames('btn btn-block', {'btn-primary': editMode, 'btn-success': !editMode})} type="submit">{editMode ? "Save Changes" : "Add Source"}</button>
                    </div>
                  </form>
                </div>
--- a/ui/src/style/enterprise_style/_enterprise-custom.scss
+++ b/ui/src/style/enterprise_style/_enterprise-custom.scss
@ -609,6 +609,82 @@ table.table.error-table {
  border-radius: 4px;
  padding: 0 18px;
  line-height: 36px;
+  position: relative;
+
+  input[type="checkbox"] {
+    position: relative;
+    left: -9999px;
+    visibility: hidden;
+    width: 0;
+    height: 0;
+    margin: 0;
+
+    // Faux Checkbox
+    & + label {
+      transition: color 0.25s ease;
+      margin-left: 24px;
+      user-select: none;
+      -ms-user-select: none;
+      -moz-user-selct: none;
+      -webkit-user-select: none;
+
+      &:before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 18px;
+        transform: translateY(-50%);
+        width: 16px;
+        height: 16px;
+        background-color: $g18-cloud;
+        border: 2px solid $g17-whisper;
+        border-radius: 3px;
+        z-index: 2;
+        transition:
+          background-color 0.25s ease;
+      }
+      &:after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: (18px + (16px / 2));
+        transform: translate(-50%,-50%) scale(2,2);
+        opacity: 0;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: $c-pool;
+        z-index: 3;
+        transition:
+          opacity 0.25s ease,
+          transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      }
+      &:hover {
+        cursor: pointer;
+
+        &:before {
+          background-color: $g20-white;
+        }
+      }
+    }
+    // Faux Checkbox (Checked)
+    &:checked + label {
+      color: $c-pool;
+
+      &:after {
+        opacity: 1;
+        transform: translate(-50%,-50%) scale(1,1);
+      }
+    }
+  }
+}
+/*
+    Button alignment in tables
+    ----------------------------------------------
+*/
+
+table .text-right .btn {
+  margin: 0 0 0 6px;
 }


@ -646,3 +722,16 @@ table .monotype {
    background-color: $c-fire;
  }
 }
+
+/*
+    Sources / Kapacitor Config Pages
+    ----------------------------------------------
+*/
+
+#source-form-page,
+#manage-sources-page,
+.kapacitor {
+  .enterprise-header {
+    margin-bottom: 45px;
+  }
+}