WIP redesign of KapacitorPage

ui/src/kapacitor/components/AlertTabs.js

@@ -12,7 +12,7 @@ import TalkConfig from './TalkConfig'
 import TelegramConfig from './TelegramConfig'
 import VictorOpsConfig from './VictorOpsConfig'
 
-const AlertOutputs = React.createClass({
+const AlertTabs = React.createClass({
   propTypes: {
     source: PropTypes.shape({
       id: PropTypes.string.isRequired,
@@ -104,9 +104,10 @@ const AlertOutputs = React.createClass({
 
     return (
       <div className="panel panel-minimal">
+        <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+          <h2 className="panel-title">Configure Alert Endpoints</h2>
+        </div>
         <div className="panel-body">
-          <h4 className="text-center no-user-select">Configure Alert Endpoints</h4>
-          <br/>
           <div className="row">
             <div className="form-group col-xs-12 col-sm-8 col-sm-offset-2">
               <label htmlFor="alert-endpoint" className="sr-only">Alert Enpoint</label>
@@ -181,4 +182,4 @@ const AlertOutputs = React.createClass({
   },
 })
 
-export default AlertOutputs
+export default AlertTabs

ui/src/kapacitor/components/KapacitorForm.js

@@ -1,31 +1,9 @@
-import React, {PropTypes} from 'react'
-import AlertOutputs from './AlertOutputs'
-
-const {
-  func,
-  shape,
-  string,
-  bool,
-} = PropTypes
-
-const KapacitorForm = React.createClass({
-  propTypes: {
-    onSubmit: func.isRequired,
-    onInputChange: func.isRequired,
-    onReset: func.isRequired,
-    kapacitor: shape({
-      url: string.isRequired,
-      name: string.isRequired,
-      username: string,
-      password: string,
-    }).isRequired,
-    source: shape({}).isRequired,
-    addFlashMessage: func.isRequired,
-    exists: bool.isRequired,
-  },
+import React, {Component, PropTypes} from 'react'
+import AlertTabs from './AlertTabs'
 
+class KapacitorForm extends Component {
   render() {
-    const {onInputChange, onReset, kapacitor, source, onSubmit} = this.props
+    const {onInputChange, onReset, kapacitor, onSubmit} = this.props
     const {url, name, username, password} = kapacitor
 
     return (
@@ -42,21 +20,15 @@ const KapacitorForm = React.createClass({
         <div className="page-contents">
           <div className="container-fluid">
             <div className="row">
-              <div className="col-md-8 col-md-offset-2">
+              <div className="col-md-3">
                 <div className="panel panel-minimal">
+                  <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+                    <h2 className="panel-title">Connection Details</h2>
+                  </div>
                   <div className="panel-body">
-                    <p className="no-user-select">
-                      Kapacitor is used as the monitoring and alerting agent.
-                      This page will let you configure which Kapacitor to use and
-                      set up alert end points like email, Slack, and others.
-                    </p>
-                    <hr/>
-                    <h4 className="text-center no-user-select">Connect Kapacitor to Source</h4>
-                    <h4 className="text-center">{source.url}</h4>
-                    <br/>
                     <form onSubmit={onSubmit}>
                       <div>
-                        <div className="form-group col-xs-12 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-2">
+                        <div className="form-group">
                           <label htmlFor="url">Kapacitor URL</label>
                           <input
                             className="form-control"
@@ -67,7 +39,7 @@ const KapacitorForm = React.createClass({
                             onChange={onInputChange}>
                           </input>
                         </div>
-                        <div className="form-group col-xs-12 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-0">
+                        <div className="form-group">
                           <label htmlFor="name">Name</label>
                           <input
                             className="form-control"
@@ -78,7 +50,7 @@ const KapacitorForm = React.createClass({
                             onChange={onInputChange}>
                           </input>
                         </div>
-                        <div className="form-group col-xs-12 col-sm-4 col-sm-offset-2 col-md-4 col-md-offset-2">
+                        <div className="form-group">
                           <label htmlFor="username">Username</label>
                           <input
                             className="form-control"
@@ -89,7 +61,7 @@ const KapacitorForm = React.createClass({
                             onChange={onInputChange}>
                           </input>
                         </div>
-                        <div className="form-group col-xs-12 col-sm-4 col-md-4">
+                        <div className="form-group">
                           <label htmlFor="password">Password</label>
                           <input
                             className="form-control"
@@ -104,16 +76,14 @@ const KapacitorForm = React.createClass({
                       </div>
 
                       <div className="form-group form-group-submit col-xs-12 text-center">
-                        <button className="btn btn-info" type="button" onClick={onReset}>Reset to Default</button>
-                        <button className="btn btn-success" type="submit">Connect Kapacitor</button>
+                        <button className="btn btn-info" type="button" onClick={onReset}>Reset</button>
+                        <button className="btn btn-success" type="submit">Connect</button>
                       </div>
                     </form>
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="row">
-              <div className="col-md-8 col-md-offset-2">
+              <div className="col-md-9">
                 {this.renderAlertOutputs()}
               </div>
             </div>
@@ -121,26 +91,50 @@ const KapacitorForm = React.createClass({
         </div>
       </div>
     )
-  },
+  }
 
   // TODO: move these to another page.  they dont belong on this page
   renderAlertOutputs() {
     const {exists, kapacitor, addFlashMessage, source} = this.props
 
     if (exists) {
-      return <AlertOutputs source={source} kapacitor={kapacitor} addFlashMessage={addFlashMessage} />
+      return <AlertTabs source={source} kapacitor={kapacitor} addFlashMessage={addFlashMessage} />
     }
 
     return (
       <div className="panel panel-minimal">
+        <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+          <h2 className="panel-title">Configure Alert Endpoints</h2>
+        </div>
         <div className="panel-body">
-          <h4 className="text-center">Configure Alert Endpoints</h4>
           <br/>
           <p className="text-center">Set your Kapacitor connection info to configure alerting endpoints.</p>
         </div>
       </div>
     )
-  },
-})
+  }
+}
+
+const {
+  func,
+  shape,
+  string,
+  bool,
+} = PropTypes
+
+KapacitorForm.propTypes = {
+  onSubmit: func.isRequired,
+  onInputChange: func.isRequired,
+  onReset: func.isRequired,
+  kapacitor: shape({
+    url: string.isRequired,
+    name: string.isRequired,
+    username: string,
+    password: string,
+  }).isRequired,
+  source: shape({}).isRequired,
+  addFlashMessage: func.isRequired,
+  exists: bool.isRequired,
+}
 
 export default KapacitorForm

ui/src/kapacitor/containers/KapacitorPage.js

@@ -7,8 +7,8 @@ import {
 } from 'shared/apis'
 import KapacitorForm from '../components/KapacitorForm'
 
-const defaultName = "My Kapacitor"
-const kapacitorPort = "9092"
+const defaultName = 'My Kapacitor'
+const kapacitorPort = '9092'
 
 class KapacitorPage extends Component {
   constructor(props) {