Display TICKscript on rules index

ui/src/kapacitor/components/KapacitorRules.js

@@ -5,6 +5,7 @@ import NoKapacitorError from 'shared/components/NoKapacitorError'
 import SourceIndicator from 'shared/components/SourceIndicator'
 import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
+import TICKscriptOverlay from 'src/kapacitor/components/TICKscriptOverlay'
 
 const KapacitorRules = ({
   source,
@@ -12,7 +13,10 @@ const KapacitorRules = ({
   hasKapacitor,
   loading,
   onDelete,
+  tickscript,
   onChangeRuleStatus,
+  onReadTickscript,
+  onCloseTickscript,
 }) => {
   if (!hasKapacitor) {
     return (
@@ -33,7 +37,12 @@ const KapacitorRules = ({
     ? '1 Alert Rule'
     : `${rules.length} Alert Rules`
   return (
-    <PageContents source={source}>
+    <PageContents
+      source={source}
+      tickscript={tickscript}
+      onReadTickscript={onReadTickscript}
+      onCloseTickscript={onCloseTickscript}
+    >
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">
         <h2 className="panel-title">{tableHeader}</h2>
         <Link
@@ -47,14 +56,15 @@ const KapacitorRules = ({
         source={source}
         rules={rules}
         onDelete={onDelete}
+        onReadTickscript={onReadTickscript}
         onChangeRuleStatus={onChangeRuleStatus}
       />
     </PageContents>
   )
 }
 
-const PageContents = ({children, source}) =>
-  <div className="page">
+const PageContents = ({children, source, tickscript, onCloseTickscript}) => (
+  <div>
     <div className="page-header">
       <div className="page-header__container">
         <div className="page-header__left">
@@ -76,9 +86,16 @@ const PageContents = ({children, source}) =>
         </div>
       </div>
     </FancyScrollbar>
+    {tickscript
+      ? <TICKscriptOverlay
+          tickscript={tickscript}
+          onClose={onCloseTickscript}
+        />
+      : null}
   </div>
+)
 
-const {arrayOf, bool, func, shape, node} = PropTypes
+const {arrayOf, bool, func, node, shape, string} = PropTypes
 
 KapacitorRules.propTypes = {
   source: shape(),
@@ -87,11 +104,16 @@ KapacitorRules.propTypes = {
   loading: bool,
   onChangeRuleStatus: func,
   onDelete: func,
+  tickscript: string,
+  onReadTickscript: func,
+  onCloseTickscript: func,
 }
 
 PageContents.propTypes = {
   children: node,
   source: shape(),
+  tickscript: string,
+  onCloseTickscript: func,
 }
 
 export default KapacitorRules

ui/src/kapacitor/components/KapacitorRulesTable.js

@@ -1,7 +1,13 @@
 import React, {PropTypes} from 'react'
 import {Link} from 'react-router'
 
-const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
+const KapacitorRulesTable = ({
+  rules,
+  source,
+  onDelete,
+  onReadTickscript,
+  onChangeRuleStatus,
+}) => (
   <div className="panel-body">
     <table className="table v-center">
       <thead>
@@ -23,14 +29,16 @@ const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
               source={source}
               onDelete={onDelete}
               onChangeRuleStatus={onChangeRuleStatus}
+              onRead={onReadTickscript}
             />
           )
         })}
       </tbody>
     </table>
   </div>
+)
 
-const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
+const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) => (
   <tr key={rule.id}>
     <td className="monotype">
       <RuleTitle rule={rule} source={source} />
@@ -50,12 +58,16 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
         <label htmlFor={`kapacitor-enabled ${rule.id}`} />
       </div>
     </td>
-    <td className="text-right">
+    <td className="text-right" style={{display: 'flex'}}>
+      <button className="btn btn-info btn-xs" onClick={() => onRead(rule)}>
+        View TICKscript
+      </button>
       <button className="btn btn-danger btn-xs" onClick={() => onDelete(rule)}>
         Delete
       </button>
     </td>
   </tr>
+)
 
 const RuleTitle = ({rule: {id, name, query}, source}) => {
   // no queryConfig means the rule was manually created outside of Chronograf
@@ -75,6 +87,7 @@ KapacitorRulesTable.propTypes = {
   source: shape({
     id: string.isRequired,
   }).isRequired,
+  onReadTickscript: func,
 }
 
 RuleRow.propTypes = {
@@ -82,6 +95,7 @@ RuleRow.propTypes = {
   source: shape(),
   onChangeRuleStatus: func,
   onDelete: func,
+  onRead: func,
 }
 
 RuleTitle.propTypes = {
@@ -90,7 +104,7 @@ RuleTitle.propTypes = {
     query: shape(),
     links: shape({
       self: string.isRequired,
-    }).isRequired,
+    }),
   }),
   source: shape({
     id: string.isRequired,

ui/src/kapacitor/components/TICKscriptOverlay.js

@@ -0,0 +1,52 @@
+import React, {PropTypes} from 'react'
+import OverlayTechnologies from 'shared/components/OverlayTechnologies'
+
+const style = {
+  padding: '8px',
+  borderRadius: '4px',
+  backgroundColor: '#202028',
+  margin: '0 15%',
+  top: '16px',
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  height: 'calc(100% - 76px)',
+}
+
+const TICKscriptOverlay = ({tickscript, onClose}) => (
+  <OverlayTechnologies>
+    <div style={style}>
+      <div style={{display: 'flex', justifyContent: 'space-around'}}>
+        <h2>Generated TICKscript</h2>
+        <span
+          style={{cursor: 'pointer'}}
+          className="icon remove"
+          onClick={onClose}
+        />
+      </div>
+      <pre
+        style={{
+          border: '1px solid white',
+          borderRadius: '4px',
+          overflow: 'auto',
+          whiteSpace: 'pre',
+          color: '#4ed8a0',
+          fontSize: '14px',
+          width: '95%',
+        }}
+      >
+        {tickscript}
+      </pre>
+    </div>
+  </OverlayTechnologies>
+)
+
+const {string, func} = PropTypes
+
+TICKscriptOverlay.propTypes = {
+  tickscript: string,
+  onClose: func.isRequired,
+}
+
+export default TICKscriptOverlay

ui/src/kapacitor/containers/KapacitorRulesPage.js

@@ -11,10 +11,13 @@ class KapacitorRulesPage extends Component {
     this.state = {
       hasKapacitor: false,
       loading: true,
+      tickscript: null,
     }
 
     this.handleDeleteRule = ::this.handleDeleteRule
     this.handleRuleStatus = ::this.handleRuleStatus
+    this.handleReadTickscript = ::this.handleReadTickscript
+    this.handleCloseTickscript = ::this.handleCloseTickscript
   }
 
   componentDidMount() {
@@ -39,19 +42,32 @@ class KapacitorRulesPage extends Component {
     actions.updateRuleStatusSuccess(rule.id, status)
   }
 
+  handleReadTickscript({tickscript}) {
+    this.setState({tickscript})
+  }
+
+  handleCloseTickscript() {
+    this.setState({tickscript: null})
+  }
+
   render() {
     const {source, rules} = this.props
-    const {hasKapacitor, loading} = this.state
+    const {hasKapacitor, loading, tickscript} = this.state
 
     return (
-      <KapacitorRules
-        source={source}
-        rules={rules}
-        hasKapacitor={hasKapacitor}
-        loading={loading}
-        onDelete={this.handleDeleteRule}
-        onChangeRuleStatus={this.handleRuleStatus}
-      />
+      <div>
+        <KapacitorRules
+          source={source}
+          rules={rules}
+          hasKapacitor={hasKapacitor}
+          loading={loading}
+          onDelete={this.handleDeleteRule}
+          onChangeRuleStatus={this.handleRuleStatus}
+          onReadTickscript={this.handleReadTickscript}
+          tickscript={tickscript}
+          onCloseTickscript={this.handleCloseTickscript}
+        />
+      </div>
     )
   }
 }