From a8ac8bb9c62953371fc01b0700b2458858b9ebc2 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Tue, 11 Jul 2017 14:38:24 -0700 Subject: [PATCH 01/15] Display TICKscript on rules index --- ui/src/kapacitor/components/KapacitorRules.js | 30 +++++++++-- .../components/KapacitorRulesTable.js | 22 ++++++-- .../kapacitor/components/TICKscriptOverlay.js | 52 +++++++++++++++++++ .../containers/KapacitorRulesPage.js | 34 ++++++++---- 4 files changed, 121 insertions(+), 17 deletions(-) create mode 100644 ui/src/kapacitor/components/TICKscriptOverlay.js diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index 5e22ee3f9e..475cea4c3f 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/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 ( - +

{tableHeader}

) } -const PageContents = ({children, source}) => -
+const PageContents = ({children, source, tickscript, onCloseTickscript}) => ( +
@@ -76,9 +86,16 @@ const PageContents = ({children, source}) =>
+ {tickscript + ? + : null}
+) -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 diff --git a/ui/src/kapacitor/components/KapacitorRulesTable.js b/ui/src/kapacitor/components/KapacitorRulesTable.js index b405a32ce1..24adbe4d28 100644 --- a/ui/src/kapacitor/components/KapacitorRulesTable.js +++ b/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, +}) => (
@@ -23,14 +29,16 @@ const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) => source={source} onDelete={onDelete} onChangeRuleStatus={onChangeRuleStatus} + onRead={onReadTickscript} /> ) })}
+) -const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) => +const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) => ( @@ -50,12 +58,16 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
- + + +) 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, diff --git a/ui/src/kapacitor/components/TICKscriptOverlay.js b/ui/src/kapacitor/components/TICKscriptOverlay.js new file mode 100644 index 0000000000..0abb7111aa --- /dev/null +++ b/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}) => ( + +
+
+

Generated TICKscript

+ +
+ 
+        {tickscript}
+
+
+ +) + +const {string, func} = PropTypes + +TICKscriptOverlay.propTypes = { + tickscript: string, + onClose: func.isRequired, +} + +export default TICKscriptOverlay diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js index 90b11e25ba..57d31448fe 100644 --- a/ui/src/kapacitor/containers/KapacitorRulesPage.js +++ b/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 ( - +
+ +
) } } From 94f24c1fcbac4953e1f4636db7f3d272a12ef206 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Tue, 11 Jul 2017 14:48:29 -0700 Subject: [PATCH 02/15] Tweak styles a bit --- ui/src/kapacitor/components/TICKscriptOverlay.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/kapacitor/components/TICKscriptOverlay.js b/ui/src/kapacitor/components/TICKscriptOverlay.js index 0abb7111aa..ca2609729f 100644 --- a/ui/src/kapacitor/components/TICKscriptOverlay.js +++ b/ui/src/kapacitor/components/TICKscriptOverlay.js @@ -17,21 +17,21 @@ const style = { const TICKscriptOverlay = ({tickscript, onClose}) => (
-
-

Generated TICKscript

+
+

Generated TICKscript

Date: Wed, 12 Jul 2017 11:20:31 -0700
Subject: [PATCH 03/15] Polish alert rules table

---
 ui/src/kapacitor/components/KapacitorRules.js |  5 +-
 .../components/KapacitorRulesTable.js         | 49 +++++++++++++------
 ui/src/kapacitor/constants/tableSizing.js     |  8 +++
 .../containers/KapacitorRulesPage.js          | 24 +++++----
 ui/src/style/components/tables.scss           | 11 +++++
 5 files changed, 65 insertions(+), 32 deletions(-)
 create mode 100644 ui/src/kapacitor/constants/tableSizing.js

diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index 475cea4c3f..2fe57bb71b 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.js
@@ -63,8 +63,8 @@ const KapacitorRules = ({
   )
 }
 
-const PageContents = ({children, source, tickscript, onCloseTickscript}) => (
-  

+const PageContents = ({children, source, tickscript, onCloseTickscript}) =>
+  

     

       

         

@@ -93,7 +93,6 @@ const PageContents = ({children, source, tickscript, onCloseTickscript}) => (
         />
       : null}
   

-)
 
 const {arrayOf, bool, func, node, shape, string} = PropTypes
 
diff --git a/ui/src/kapacitor/components/KapacitorRulesTable.js b/ui/src/kapacitor/components/KapacitorRulesTable.js
index 24adbe4d28..4c12caaa56 100644
--- a/ui/src/kapacitor/components/KapacitorRulesTable.js
+++ b/ui/src/kapacitor/components/KapacitorRulesTable.js
@@ -1,23 +1,33 @@
 import React, {PropTypes} from 'react'
 import {Link} from 'react-router'
 
+import {KAPACITOR_RULES_TABLE} from 'src/kapacitor/constants/tableSizing'
+const {
+  colName,
+  colType,
+  colMessage,
+  colAlerts,
+  colEnabled,
+  colActions,
+} = KAPACITOR_RULES_TABLE
+
 const KapacitorRulesTable = ({
   rules,
   source,
   onDelete,
   onReadTickscript,
   onChangeRuleStatus,
-}) => (
+}) =>
   

     
-          
-          
-          
-          
-          
-          
+          
+          
+          
+          
+          
@@ -36,17 +46,25 @@ const KapacitorRulesTable = ({
       

       
         
NameRule TypeMessageAlertsEnabled
+          NameRule TypeMessageAlertsEnabled
         

       
       
     

   

-)
 
-const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) => (
+const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) =>
   
-    
+    
       
     
-    {rule.trigger}
-    {rule.message}
-    {rule.alerts.join(', ')}
-    
+    {rule.trigger}
+    
+      
+        {rule.message}
+      
+    
+    
+      {rule.alerts.join(', ')}
+    
+    
       

          (
         

     
-    
+    
       
@@ -67,7 +85,6 @@ const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) => (
       
     
   
-)
 
 const RuleTitle = ({rule: {id, name, query}, source}) => {
   // no queryConfig means the rule was manually created outside of Chronograf
diff --git a/ui/src/kapacitor/constants/tableSizing.js b/ui/src/kapacitor/constants/tableSizing.js
new file mode 100644
index 0000000000..5d96be7625
--- /dev/null
+++ b/ui/src/kapacitor/constants/tableSizing.js
@@ -0,0 +1,8 @@
+export const KAPACITOR_RULES_TABLE = {
+  colName: '200px',
+  colType: '90px',
+  colMessage: '460px',
+  colAlerts: '120px',
+  colEnabled: '64px',
+  colActions: '176px',
+}
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js
index 57d31448fe..95ccdf5530 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js
@@ -55,19 +55,17 @@ class KapacitorRulesPage extends Component {
     const {hasKapacitor, loading, tickscript} = this.state
 
     return (
-      

-        
-      

+      
     )
   }
 }
diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss
index 7f385f4a91..632f17e193 100644
--- a/ui/src/style/components/tables.scss
+++ b/ui/src/style/components/tables.scss
@@ -261,3 +261,14 @@ $table-tab-scrollbar-height: 6px;
     text-overflow: ellipsis;
   }
 }
+
+/*
+    No Wrap Cells
+    ----------------------------------------------
+*/
+
+table .table-cell-nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

From 4a37565e59a31672cc3d3196fb1cf218981241c9 Mon Sep 17 00:00:00 2001
From: Alex P 
Date: Wed, 12 Jul 2017 11:41:33 -0700
Subject: [PATCH 04/15] Style view tick script overlay

---
 .../kapacitor/components/TICKscriptOverlay.js | 50 ++++++-------------
 ui/src/style/unsorted.scss                    | 27 ++++++++++
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/ui/src/kapacitor/components/TICKscriptOverlay.js b/ui/src/kapacitor/components/TICKscriptOverlay.js
index ca2609729f..87762ae8d1 100644
--- a/ui/src/kapacitor/components/TICKscriptOverlay.js
+++ b/ui/src/kapacitor/components/TICKscriptOverlay.js
@@ -1,46 +1,24 @@
 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}) => (
+const TICKscriptOverlay = ({tickscript, onClose}) =>
   
-    

-      

-        
+    

+      

+        

+          
Generated TICKscript

+        

+        

+          
+        

+      

+      

+        
+          {tickscript}
+        

       

-      
Generated TICKscript

-      
-        {tickscript}
-      

     

   
-)
 
 const {string, func} = PropTypes
 
diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss
index bba610cb2f..6e6c9c9d21 100644
--- a/ui/src/style/unsorted.scss
+++ b/ui/src/style/unsorted.scss
@@ -217,3 +217,30 @@ br {
   color: $g11-sidewalk;
   font-size: 13px;
 }
+
+
+
+/*
+  View TICKscript Overlay
+  -----------------------------------------------------------------------------
+*/
+$tick-script-overlay-margin: 30px;
+.tick-script-overlay {
+  max-width: 960px;
+  margin: 0 auto $tick-script-overlay-margin auto;
+  height: calc(100% - #{$tick-script-overlay-margin});
+  position: relative;
+
+  .write-data-form--body {
+    height: calc(100% - 60px);
+    display: flex;
+    flex-direction: column;
+  }
+}
+.tick-script-overlay--sample {
+  margin: 0;
+  white-space: pre-wrap;
+  font-size: 14px;
+  padding: 20px;
+  border: 2px solid $g4-onyx;
+}

From 5a27dfebb4457a1a6ead559739eb453a6cad11bb Mon Sep 17 00:00:00 2001
From: Alex P 
Date: Wed, 12 Jul 2017 11:49:09 -0700
Subject: [PATCH 05/15] Sort alert rules table by rules name a-z

---
 ui/src/kapacitor/components/KapacitorRulesTable.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/kapacitor/components/KapacitorRulesTable.js b/ui/src/kapacitor/components/KapacitorRulesTable.js
index 4c12caaa56..87587b914a 100644
--- a/ui/src/kapacitor/components/KapacitorRulesTable.js
+++ b/ui/src/kapacitor/components/KapacitorRulesTable.js
@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react'
 import {Link} from 'react-router'
+import _ from 'lodash'
 
 import {KAPACITOR_RULES_TABLE} from 'src/kapacitor/constants/tableSizing'
 const {
@@ -31,7 +32,7 @@ const KapacitorRulesTable = ({
         
       
       
-        {rules.map(rule => {
+        {_.sortBy(rules, r => r.name.toLowerCase()).map(rule => {
           return (
             
Date: Wed, 12 Jul 2017 12:37:25 -0700
Subject: [PATCH 06/15] Update silly linter rule

---
 ui/.eslintrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/.eslintrc b/ui/.eslintrc
index 7d3571e8c3..b2aa916c4a 100644
--- a/ui/.eslintrc
+++ b/ui/.eslintrc
@@ -220,7 +220,7 @@
     'react/jsx-uses-react': 2,
     'react/jsx-uses-vars': 2,
     'react/no-danger': 2,
-    'react/no-did-mount-set-state': 'error',
+    'react/no-did-mount-set-state': 0,
     'react/no-did-update-set-state': 2,
     'react/no-direct-mutation-state': 2,
     'react/no-is-mounted': 2,

From c5cc63093e260202d798608b3511c346bfaa7285 Mon Sep 17 00:00:00 2001
From: Andrew Watkins 
Date: Wed, 12 Jul 2017 12:37:58 -0700
Subject: [PATCH 07/15] Make loading on the rules page actually work

---
 ui/src/kapacitor/actions/view/index.js        | 17 +++---
 ui/src/kapacitor/components/KapacitorRules.js | 15 +++---
 .../kapacitor/containers/KapacitorRulePage.js | 53 +++++++++----------
 .../containers/KapacitorRulesPage.js          | 15 +++---
 ui/src/shared/apis/index.js                   | 25 +++++----
 5 files changed, 63 insertions(+), 62 deletions(-)

diff --git a/ui/src/kapacitor/actions/view/index.js b/ui/src/kapacitor/actions/view/index.js
index 8867dd432a..1452c32945 100644
--- a/ui/src/kapacitor/actions/view/index.js
+++ b/ui/src/kapacitor/actions/view/index.js
@@ -7,6 +7,7 @@ import {
   deleteRule as deleteRuleAPI,
   updateRuleStatus as updateRuleStatusAPI,
 } from 'src/kapacitor/apis'
+import {errorThrown} from 'shared/actions/errors'
 
 export function fetchRule(source, ruleID) {
   return dispatch => {
@@ -48,16 +49,12 @@ export function loadDefaultRule() {
   }
 }
 
-export function fetchRules(kapacitor) {
-  return dispatch => {
-    getRules(kapacitor).then(({data: {rules}}) => {
-      dispatch({
-        type: 'LOAD_RULES',
-        payload: {
-          rules,
-        },
-      })
-    })
+export const fetchRules = kapacitor => async dispatch => {
+  try {
+    const {data: {rules}} = await getRules(kapacitor)
+    dispatch({type: 'LOAD_RULES', payload: {rules}})
+  } catch (error) {
+    dispatch(errorThrown(error))
   }
 }
 
diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index 2fe57bb71b..e3d140d64c 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.js
@@ -18,6 +18,14 @@ const KapacitorRules = ({
   onReadTickscript,
   onCloseTickscript,
 }) => {
+  if (loading) {
+    return (
+      
+        
Loading...

+      
+    )
+  }
+
   if (!hasKapacitor) {
     return (
       
@@ -26,13 +34,6 @@ const KapacitorRules = ({
     )
   }
 
-  if (loading) {
-    return (
-      
-        
Loading...

-      
-    )
-  }
   const tableHeader = rules.length === 1
     ? '1 Alert Rule'
     : `${rules.length} Alert Rules`
diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index c1d959d854..b4223afa64 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -48,7 +48,7 @@ export const KapacitorRulePage = React.createClass({
     }
   },
 
-  componentDidMount() {
+  async componentDidMount() {
     const {params, source, kapacitorActions, addFlashMessage} = this.props
     if (this.isEditing()) {
       kapacitorActions.fetchRule(source, params.ruleID)
@@ -56,34 +56,33 @@ export const KapacitorRulePage = React.createClass({
       kapacitorActions.loadDefaultRule()
     }
 
-    getActiveKapacitor(source).then(kapacitor => {
-      this.setState({kapacitor})
-      getKapacitorConfig(kapacitor)
-        .then(({data: {sections}}) => {
-          const enabledAlerts = Object.keys(sections).filter(section => {
-            return (
-              _.get(
-                sections,
-                [section, 'elements', '0', 'options', 'enabled'],
-                false
-              ) && ALERTS.includes(section)
-            )
-          })
-          this.setState({enabledAlerts})
+    const kapacitor = await getActiveKapacitor(this.props.source)
+    if (!kapacitor) {
+      return addFlashMessage({
+        type: 'error',
+        text: "We couldn't find a configured Kapacitor for this source", // eslint-disable-line quotes
+      })
+    }
+
+    getKapacitorConfig(kapacitor)
+      .then(({data: {sections}}) => {
+        const enabledAlerts = Object.keys(sections).filter(section => {
+          return (
+            _.get(
+              sections,
+              [section, 'elements', '0', 'options', 'enabled'],
+              false
+            ) && ALERTS.includes(section)
+          )
         })
-        .catch(() => {
-          addFlashMessage({
-            type: 'error',
-            text: 'There was a problem communicating with Kapacitor',
-          })
+        this.setState({kapacitor, enabledAlerts})
+      })
+      .catch(() => {
+        addFlashMessage({
+          type: 'error',
+          text: 'There was a problem communicating with Kapacitor',
         })
-        .catch(() => {
-          addFlashMessage({
-            type: 'error',
-            text: "We couldn't find a configured Kapacitor for this source", // eslint-disable-line quotes
-          })
-        })
-    })
+      })
   },
 
   render() {
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js
index 95ccdf5530..653f1160e2 100644
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js
@@ -20,13 +20,14 @@ class KapacitorRulesPage extends Component {
     this.handleCloseTickscript = ::this.handleCloseTickscript
   }
 
-  componentDidMount() {
-    getActiveKapacitor(this.props.source).then(kapacitor => {
-      if (kapacitor) {
-        this.props.actions.fetchRules(kapacitor)
-      }
-      this.setState({loading: false, hasKapacitor: !!kapacitor})
-    })
+  async componentDidMount() {
+    const kapacitor = await getActiveKapacitor(this.props.source)
+    if (!kapacitor) {
+      return
+    }
+
+    await this.props.actions.fetchRules(kapacitor)
+    this.setState({loading: false, hasKapacitor: !!kapacitor})
   }
 
   handleDeleteRule(rule) {
diff --git a/ui/src/shared/apis/index.js b/ui/src/shared/apis/index.js
index 2664cb725f..5c6e60b1a5 100644
--- a/ui/src/shared/apis/index.js
+++ b/ui/src/shared/apis/index.js
@@ -67,14 +67,19 @@ export function getKapacitor(source, kapacitorID) {
   })
 }
 
-export function getActiveKapacitor(source) {
-  return AJAX({
-    url: source.links.kapacitors,
-    method: 'GET',
-  }).then(({data}) => {
+export const getActiveKapacitor = async source => {
+  try {
+    const {data} = await AJAX({
+      url: source.links.kapacitors,
+      method: 'GET',
+    })
+
     const activeKapacitor = data.kapacitors.find(k => k.active)
     return activeKapacitor || data.kapacitors[0]
-  })
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
 }
 
 export const getKapacitors = async source => {
@@ -163,11 +168,9 @@ export function updateKapacitorConfigSection(kapacitor, section, properties) {
 }
 
 export function testAlertOutput(kapacitor, outputName, properties) {
-  return kapacitorProxy(
-    kapacitor,
-    'GET',
-    '/kapacitor/v1/service-tests'
-  ).then(({data: {services}}) => {
+  return kapacitorProxy(kapacitor, 'GET', '/kapacitor/v1/service-tests').then(({
+    data: {services},
+  }) => {
     const service = services.find(s => s.name === outputName)
     return kapacitorProxy(
       kapacitor,

From cece93ca01fcf1283c081f727f5f332d4aeb2a8f Mon Sep 17 00:00:00 2001
From: Andrew Watkins 
Date: Wed, 12 Jul 2017 12:50:38 -0700
Subject: [PATCH 08/15] Improve Loading styles

---
 ui/src/kapacitor/components/KapacitorRules.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index e3d140d64c..9edaa9ac17 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.js
@@ -21,7 +21,17 @@ const KapacitorRules = ({
   if (loading) {
     return (
       
-        
Loading...

+        

+          
Alert Rules

+          
+        

+        

+          

+            
Loading Rules...

+          

+        

       
     )
   }

From ad0e410e8264f9b4731aacb17208601621745493 Mon Sep 17 00:00:00 2001
From: Andrew Watkins 
Date: Wed, 12 Jul 2017 12:50:51 -0700
Subject: [PATCH 09/15] Prettier

---
 ui/src/kapacitor/components/KapacitorRules.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index 9edaa9ac17..e13b4f6d00 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.js
@@ -74,7 +74,7 @@ const KapacitorRules = ({
   )
 }
 
-const PageContents = ({children, source, tickscript, onCloseTickscript}) =>
+const PageContents = ({children, source, tickscript, onCloseTickscript}) => (
   

     

       

@@ -104,6 +104,7 @@ const PageContents = ({children, source, tickscript, onCloseTickscript}) =>
         />
       : null}
   

+)
 
 const {arrayOf, bool, func, node, shape, string} = PropTypes
 

From 71167d9b6aaeb4eb6bb16cdec0b5a4f01e53816d Mon Sep 17 00:00:00 2001
From: Andrew Watkins 
Date: Wed, 12 Jul 2017 15:02:13 -0700
Subject: [PATCH 10/15] Convert Rule Page to class syntax

---
 .../kapacitor/containers/KapacitorRulePage.js | 80 ++++++++++---------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index b4223afa64..cf8fb7ee36 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 
@@ -10,43 +10,17 @@ import {getActiveKapacitor, getKapacitorConfig} from 'shared/apis/index'
 import {ALERTS, DEFAULT_RULE_ID} from 'src/kapacitor/constants'
 import KapacitorRule from 'src/kapacitor/components/KapacitorRule'
 
-export const KapacitorRulePage = React.createClass({
-  propTypes: {
-    source: PropTypes.shape({
-      links: PropTypes.shape({
-        proxy: PropTypes.string.isRequired,
-        self: PropTypes.string.isRequired,
-      }),
-    }),
-    addFlashMessage: PropTypes.func,
-    rules: PropTypes.shape({}).isRequired,
-    queryConfigs: PropTypes.shape({}).isRequired,
-    kapacitorActions: PropTypes.shape({
-      loadDefaultRule: PropTypes.func.isRequired,
-      fetchRule: PropTypes.func.isRequired,
-      chooseTrigger: PropTypes.func.isRequired,
-      addEvery: PropTypes.func.isRequired,
-      removeEvery: PropTypes.func.isRequired,
-      updateRuleValues: PropTypes.func.isRequired,
-      updateMessage: PropTypes.func.isRequired,
-      updateAlerts: PropTypes.func.isRequired,
-      updateRuleName: PropTypes.func.isRequired,
-    }).isRequired,
-    queryActions: PropTypes.shape({}).isRequired,
-    params: PropTypes.shape({
-      ruleID: PropTypes.string,
-    }).isRequired,
-    router: PropTypes.shape({
-      push: PropTypes.func.isRequired,
-    }).isRequired,
-  },
+class KapacitorRulePage extends Component {
+  constructor(props) {
+    super(props)
 
-  getInitialState() {
-    return {
+    this.state = {
       enabledAlerts: [],
       kapacitor: {},
     }
-  },
+
+    this.isEditing = ::this.isEditing
+  }
 
   async componentDidMount() {
     const {params, source, kapacitorActions, addFlashMessage} = this.props
@@ -83,7 +57,7 @@ export const KapacitorRulePage = React.createClass({
           text: 'There was a problem communicating with Kapacitor',
         })
       })
-  },
+  }
 
   render() {
     const {
@@ -122,13 +96,13 @@ export const KapacitorRulePage = React.createClass({
         kapacitor={kapacitor}
       />
     )
-  },
+  }
 
   isEditing() {
     const {params} = this.props
     return params.ruleID && params.ruleID !== 'new'
-  },
-})
+  }
+}
 
 function mapStateToProps(state) {
   return {
@@ -144,4 +118,34 @@ function mapDispatchToProps(dispatch) {
   }
 }
 
+KapacitorRulePage.propTypes = {
+  source: PropTypes.shape({
+    links: PropTypes.shape({
+      proxy: PropTypes.string.isRequired,
+      self: PropTypes.string.isRequired,
+    }),
+  }),
+  addFlashMessage: PropTypes.func,
+  rules: PropTypes.shape({}).isRequired,
+  queryConfigs: PropTypes.shape({}).isRequired,
+  kapacitorActions: PropTypes.shape({
+    loadDefaultRule: PropTypes.func.isRequired,
+    fetchRule: PropTypes.func.isRequired,
+    chooseTrigger: PropTypes.func.isRequired,
+    addEvery: PropTypes.func.isRequired,
+    removeEvery: PropTypes.func.isRequired,
+    updateRuleValues: PropTypes.func.isRequired,
+    updateMessage: PropTypes.func.isRequired,
+    updateAlerts: PropTypes.func.isRequired,
+    updateRuleName: PropTypes.func.isRequired,
+  }).isRequired,
+  queryActions: PropTypes.shape({}).isRequired,
+  params: PropTypes.shape({
+    ruleID: PropTypes.string,
+  }).isRequired,
+  router: PropTypes.shape({
+    push: PropTypes.func.isRequired,
+  }).isRequired,
+}
+
 export default connect(mapStateToProps, mapDispatchToProps)(KapacitorRulePage)

From bd0fd0b6a724eb35839586b3505f7c4e3b4bf820 Mon Sep 17 00:00:00 2001
From: Andrew Watkins 
Date: Wed, 12 Jul 2017 15:04:19 -0700
Subject: [PATCH 11/15] Deconstruct PropTypes

---
 .../kapacitor/containers/KapacitorRulePage.js | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index cf8fb7ee36..aa0a701322 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -104,6 +104,38 @@ class KapacitorRulePage extends Component {
   }
 }
 
+const {func, shape, string} = PropTypes
+
+KapacitorRulePage.propTypes = {
+  source: shape({
+    links: shape({
+      proxy: string.isRequired,
+      self: string.isRequired,
+    }),
+  }),
+  addFlashMessage: func,
+  rules: shape({}).isRequired,
+  queryConfigs: shape({}).isRequired,
+  kapacitorActions: shape({
+    loadDefaultRule: func.isRequired,
+    fetchRule: func.isRequired,
+    chooseTrigger: func.isRequired,
+    addEvery: func.isRequired,
+    removeEvery: func.isRequired,
+    updateRuleValues: func.isRequired,
+    updateMessage: func.isRequired,
+    updateAlerts: func.isRequired,
+    updateRuleName: func.isRequired,
+  }).isRequired,
+  queryActions: shape({}).isRequired,
+  params: shape({
+    ruleID: string,
+  }).isRequired,
+  router: shape({
+    push: func.isRequired,
+  }).isRequired,
+}
+
 function mapStateToProps(state) {
   return {
     rules: state.rules,
@@ -118,34 +150,4 @@ function mapDispatchToProps(dispatch) {
   }
 }
 
-KapacitorRulePage.propTypes = {
-  source: PropTypes.shape({
-    links: PropTypes.shape({
-      proxy: PropTypes.string.isRequired,
-      self: PropTypes.string.isRequired,
-    }),
-  }),
-  addFlashMessage: PropTypes.func,
-  rules: PropTypes.shape({}).isRequired,
-  queryConfigs: PropTypes.shape({}).isRequired,
-  kapacitorActions: PropTypes.shape({
-    loadDefaultRule: PropTypes.func.isRequired,
-    fetchRule: PropTypes.func.isRequired,
-    chooseTrigger: PropTypes.func.isRequired,
-    addEvery: PropTypes.func.isRequired,
-    removeEvery: PropTypes.func.isRequired,
-    updateRuleValues: PropTypes.func.isRequired,
-    updateMessage: PropTypes.func.isRequired,
-    updateAlerts: PropTypes.func.isRequired,
-    updateRuleName: PropTypes.func.isRequired,
-  }).isRequired,
-  queryActions: PropTypes.shape({}).isRequired,
-  params: PropTypes.shape({
-    ruleID: PropTypes.string,
-  }).isRequired,
-  router: PropTypes.shape({
-    push: PropTypes.func.isRequired,
-  }).isRequired,
-}
-
 export default connect(mapStateToProps, mapDispatchToProps)(KapacitorRulePage)

From 39b455aba578d9912cfb1d2e24c62e36f8da679a Mon Sep 17 00:00:00 2001
From: Andrew Watkins 
Date: Wed, 12 Jul 2017 15:05:32 -0700
Subject: [PATCH 12/15] Use arrow functions

---
 ui/src/kapacitor/containers/KapacitorRulePage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index aa0a701322..7567ff7b3b 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -136,14 +136,14 @@ KapacitorRulePage.propTypes = {
   }).isRequired,
 }
 
-function mapStateToProps(state) {
+const mapStateToProps = state => {
   return {
     rules: state.rules,
     queryConfigs: state.queryConfigs,
   }
 }
 
-function mapDispatchToProps(dispatch) {
+const mapDispatchToProps = dispatch => {
   return {
     kapacitorActions: bindActionCreators(kapacitorActionCreators, dispatch),
     queryActions: bindActionCreators(queryActionCreators, dispatch),

From d38bf4de70b736040cf857974d9bbda9e0134157 Mon Sep 17 00:00:00 2001
From: Andrew Watkins 
Date: Wed, 12 Jul 2017 16:14:06 -0700
Subject: [PATCH 13/15] Be the async await change

---
 .../kapacitor/containers/KapacitorRulePage.js | 36 ++++++++++---------
 ui/src/shared/apis/index.js                   |  6 ++--
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index 7567ff7b3b..7bdc4448ca 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -38,25 +38,27 @@ class KapacitorRulePage extends Component {
       })
     }
 
-    getKapacitorConfig(kapacitor)
-      .then(({data: {sections}}) => {
-        const enabledAlerts = Object.keys(sections).filter(section => {
-          return (
-            _.get(
-              sections,
-              [section, 'elements', '0', 'options', 'enabled'],
-              false
-            ) && ALERTS.includes(section)
-          )
-        })
-        this.setState({kapacitor, enabledAlerts})
+    try {
+      const {data: {sections}} = await getKapacitorConfig(kapacitor)
+      const enabledAlerts = Object.keys(sections).filter(section => {
+        return (
+          _.get(
+            sections,
+            [section, 'elements', '0', 'options', 'enabled'],
+            false
+          ) && ALERTS.includes(section)
+        )
       })
-      .catch(() => {
-        addFlashMessage({
-          type: 'error',
-          text: 'There was a problem communicating with Kapacitor',
-        })
+
+      this.setState({kapacitor, enabledAlerts})
+    } catch (error) {
+      addFlashMessage({
+        type: 'error',
+        text: 'There was a problem communicating with Kapacitor',
       })
+      console.error(error)
+      throw error
+    }
   }
 
   render() {
diff --git a/ui/src/shared/apis/index.js b/ui/src/shared/apis/index.js
index 5c6e60b1a5..6ec40d6e25 100644
--- a/ui/src/shared/apis/index.js
+++ b/ui/src/shared/apis/index.js
@@ -143,11 +143,11 @@ export function updateKapacitor({
   })
 }
 
-export function getKapacitorConfig(kapacitor) {
-  return kapacitorProxy(kapacitor, 'GET', '/kapacitor/v1/config', '')
+export const getKapacitorConfig = async kapacitor => {
+  return await kapacitorProxy(kapacitor, 'GET', '/kapacitor/v1/config', '')
 }
 
-export function getKapacitorConfigSection(kapacitor, section) {
+export const getKapacitorConfigSection = (kapacitor, section) => {
   return kapacitorProxy(kapacitor, 'GET', `/kapacitor/v1/config/${section}`, '')
 }
 

From f729a77e781a25af18bf22c10e7ac97f234c6970 Mon Sep 17 00:00:00 2001
From: Hunter Trujillo 
Date: Wed, 12 Jul 2017 19:02:34 -0600
Subject: [PATCH 14/15] rockin es6

---
 .../kapacitor/containers/KapacitorRulePage.js | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index 7bdc4448ca..7056df5c24 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -138,18 +138,14 @@ KapacitorRulePage.propTypes = {
   }).isRequired,
 }
 
-const mapStateToProps = state => {
-  return {
-    rules: state.rules,
-    queryConfigs: state.queryConfigs,
-  }
-}
+const mapStateToProps = ({rules, queryConfigs}) => ({
+  rules,
+  queryConfigs,
+})
 
-const mapDispatchToProps = dispatch => {
-  return {
-    kapacitorActions: bindActionCreators(kapacitorActionCreators, dispatch),
-    queryActions: bindActionCreators(queryActionCreators, dispatch),
-  }
-}
+const mapDispatchToProps = dispatch => ({
+  kapacitorActions: bindActionCreators(kapacitorActionCreators, dispatch),
+  queryActions: bindActionCreators(queryActionCreators, dispatch),
+})
 
 export default connect(mapStateToProps, mapDispatchToProps)(KapacitorRulePage)

From 6134b91ec772f376feae788bf6b507ecc83523bc Mon Sep 17 00:00:00 2001
From: Andrew Watkins 
Date: Thu, 13 Jul 2017 12:47:08 -0700
Subject: [PATCH 15/15] Update CHANGELOG

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aecb6a8b99..00e1a5e653 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 1. [#1708](https://github.com/influxdata/chronograf/pull/1708): Fix z-index issue in dashboard cell context menu
 
 ### Features
+1. [#1717](https://github.com/influxdata/chronograf/pull/1717): View server generated TICKscripts
+
 ### UI Improvements
 1. [#1707](https://github.com/influxdata/chronograf/pull/1707): Polish alerts table in status page to wrap text less