Add skeleton for tickscript editor page

ui/src/index.js

@@ -23,6 +23,7 @@ import {
   KapacitorRulePage,
   KapacitorRulesPage,
   KapacitorTasksPage,
+  TickscriptPage,
 } from 'src/kapacitor'
 import {AdminPage} from 'src/admin'
 import {CreateSource, SourcePage, ManageSources} from 'src/sources'
@@ -140,6 +141,8 @@ const Root = React.createClass({
               <Route path="alert-rules" component={KapacitorRulesPage} />
               <Route path="alert-rules/:ruleID" component={KapacitorRulePage} />
               <Route path="alert-rules/new" component={KapacitorRulePage} />
+              <Route path="tickscript/new" component={TickscriptPage} />
+              <Route path="tickscript/:ruleID" component={TickscriptPage} />
               <Route path="kapacitors/new" component={KapacitorPage} />
               <Route path="kapacitors/:id/edit" component={KapacitorPage} />
               <Route path="kapacitor-tasks" component={KapacitorTasksPage} />

ui/src/kapacitor/components/KapacitorRules.js

@@ -61,7 +61,13 @@ const KapacitorRules = ({
           to={`/sources/${source.id}/alert-rules/new`}
           className="btn btn-sm btn-primary"
         >
-          Create Rule
+          Build Rule
+        </Link>
+        <Link
+          to={`/sources/${source.id}/tickscript/new`}
+          className="btn btn-sm btn-primary"
+        >
+          Write Rule
         </Link>
       </div>
       <KapacitorRulesTable
@@ -75,7 +81,7 @@ const KapacitorRules = ({
   )
 }
 
-const PageContents = ({children, source, tickscript, onCloseTickscript}) =>
+const PageContents = ({children, source}) =>
   <div className="page">
     <div className="page-header">
       <div className="page-header__container">

ui/src/kapacitor/components/Tickscript.js

@@ -0,0 +1,27 @@
+import React, {PropTypes} from 'react'
+import TickscriptHeader from 'src/kapacitor/components/TickscriptHeader'
+import FancyScrollbar from 'shared/components/FancyScrollbar'
+
+const Tickscript = ({source, onSave}) => (
+  <div className="page">
+    <TickscriptHeader source={source} onSave={onSave} />
+    <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
+      <div className="container-fluid">
+        <div className="row">
+          <div className="col-xs-12">
+            <div className="rule-builder" />
+          </div>
+        </div>
+      </div>
+    </FancyScrollbar>
+  </div>
+)
+
+const {func, shape} = PropTypes
+
+Tickscript.propTypes = {
+  onSave: func,
+  source: shape(),
+}
+
+export default Tickscript

ui/src/kapacitor/components/TickscriptHeader.js

@@ -0,0 +1,29 @@
+import React, {PropTypes} from 'react'
+import SourceIndicator from 'shared/components/SourceIndicator'
+
+const TickscriptHeader = ({source, onSave}) => (
+  <div className="page-header">
+    <div className="page-header__container">
+      <div className="page-header__left">
+        <h1 className="page-header__title kapacitor-theme">
+          TICKscript Editor
+        </h1>
+      </div>
+      <div className="page-header__right">
+        <SourceIndicator sourceName={source.name} />
+        <button className="btn btn-success btn-sm" onClick={onSave}>
+          Save Rule
+        </button>
+      </div>
+    </div>
+  </div>
+)
+
+const {func, shape} = PropTypes
+
+TickscriptHeader.propTypes = {
+  onSave: func,
+  source: shape(),
+}
+
+export default TickscriptHeader

ui/src/kapacitor/containers/TickscriptPage.js

@@ -0,0 +1,28 @@
+import React, {PropTypes, Component} from 'react'
+import Tickscript from 'src/kapacitor/components/Tickscript'
+
+class TickscriptPage extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  handleSave() {
+    console.log('save me!') // eslint-disable-line no-console
+  }
+
+  render() {
+    const {source} = this.props
+
+    return <Tickscript onSave={this.handleSave} source={source} />
+  }
+}
+
+const {shape, string} = PropTypes
+
+TickscriptPage.propTypes = {
+  source: shape({
+    name: string,
+  }),
+}
+
+export default TickscriptPage

ui/src/kapacitor/index.js

@@ -2,9 +2,11 @@ import KapacitorPage from './containers/KapacitorPage'
 import KapacitorRulePage from './containers/KapacitorRulePage'
 import KapacitorRulesPage from './containers/KapacitorRulesPage'
 import KapacitorTasksPage from './containers/KapacitorTasksPage'
+import TickscriptPage from './containers/TickscriptPage'
 export {
   KapacitorPage,
   KapacitorRulePage,
   KapacitorRulesPage,
   KapacitorTasksPage,
+  TickscriptPage,
 }