Merge pull request #1717 from influxdata/feature/read-only-tickscript

View server generated TICKscripts
2017-07-13 13:15:36 -07:00 · 2017-07-13 13:15:36 -07:00 · 5e7644c4fa
parent 2a3ad3ac9a 47d5272489
commit 5e7644c4fa
12 changed files with 299 additions and 138 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,8 +4,10 @@
 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
 1. [#1681](https://github.com/influxdata/chronograf/pull/1681): Add the ability to select Custom Time Ranges in the Hostpages, Data Explorer, and Dashboards.

+
 ### UI Improvements
 1. [#1707](https://github.com/influxdata/chronograf/pull/1707): Polish alerts table in status page to wrap text less

--- 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,
--- 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))
  }
 }

--- 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,8 +13,29 @@ const KapacitorRules = ({
  hasKapacitor,
  loading,
  onDelete,
+  tickscript,
  onChangeRuleStatus,
+  onReadTickscript,
+  onCloseTickscript,
 }) => {
+  if (loading) {
+    return (
+      <PageContents>
+        <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+          <h2 className="panel-title">Alert Rules</h2>
+          <button className="btn btn-primary btn-sm disabled" disabled={true}>
+            Create Rule
+          </button>
+        </div>
+        <div className="panel-body">
+          <div className="generic-empty-state">
+            <p>Loading Rules...</p>
+          </div>
+        </div>
+      </PageContents>
+    )
+  }
+
  if (!hasKapacitor) {
    return (
      <PageContents>
@ -22,18 +44,16 @@ const KapacitorRules = ({
    )
  }

-  if (loading) {
-    return (
-      <PageContents>
-        <h2>Loading...</h2>
-      </PageContents>
-    )
-  }
  const tableHeader = rules.length === 1
    ? '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,13 +67,14 @@ const KapacitorRules = ({
        source={source}
        rules={rules}
        onDelete={onDelete}
+        onReadTickscript={onReadTickscript}
        onChangeRuleStatus={onChangeRuleStatus}
      />
    </PageContents>
  )
 }

-const PageContents = ({children, source}) =>
+const PageContents = ({children, source, tickscript, onCloseTickscript}) => (
  <div className="page">
    <div className="page-header">
      <div className="page-header__container">
@ -76,9 +97,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 +115,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
--- a/ui/src/kapacitor/components/KapacitorRulesTable.js
+++ b/ui/src/kapacitor/components/KapacitorRulesTable.js
@ -1,21 +1,38 @@
 import React, {PropTypes} from 'react'
 import {Link} from 'react-router'
+import _ from 'lodash'

-const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
+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,
+}) =>
  <div className="panel-body">
    <table className="table v-center">
      <thead>
        <tr>
-          <th>Name</th>
-          <th>Rule Type</th>
-          <th>Message</th>
-          <th>Alerts</th>
-          <th className="text-center">Enabled</th>
-          <th />
+          <th style={{width: colName}}>Name</th>
+          <th style={{width: colType}}>Rule Type</th>
+          <th style={{width: colMessage}}>Message</th>
+          <th style={{width: colAlerts}}>Alerts</th>
+          <th style={{width: colEnabled}} className="text-center">Enabled</th>
+          <th style={{width: colActions}} />
        </tr>
      </thead>
      <tbody>
-        {rules.map(rule => {
+        {_.sortBy(rules, r => r.name.toLowerCase()).map(rule => {
          return (
            <RuleRow
              key={rule.id}
@ -23,6 +40,7 @@ const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
              source={source}
              onDelete={onDelete}
              onChangeRuleStatus={onChangeRuleStatus}
+              onRead={onReadTickscript}
            />
          )
        })}
@ -30,15 +48,24 @@ const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
    </table>
  </div>

-const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
+const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) =>
  <tr key={rule.id}>
-    <td className="monotype">
+    <td style={{width: colName}} className="monotype">
      <RuleTitle rule={rule} source={source} />
    </td>
-    <td className="monotype">{rule.trigger}</td>
-    <td className="monotype">{rule.message}</td>
-    <td className="monotype">{rule.alerts.join(', ')}</td>
-    <td className="monotype text-center">
+    <td style={{width: colType}} className="monotype">{rule.trigger}</td>
+    <td className="monotype">
+      <span
+        className="table-cell-nowrap"
+        style={{display: 'inline-block', maxWidth: colMessage}}
+      >
+        {rule.message}
+      </span>
+    </td>
+    <td style={{width: colAlerts}} className="monotype">
+      {rule.alerts.join(', ')}
+    </td>
+    <td style={{width: colEnabled}} className="monotype text-center">
      <div className="dark-checkbox">
        <input
          id={`kapacitor-enabled ${rule.id}`}
@ -50,7 +77,10 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
        <label htmlFor={`kapacitor-enabled ${rule.id}`} />
      </div>
    </td>
-    <td className="text-right">
+    <td style={{width: colActions}} className="text-right table-cell-nowrap">
+      <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>
@ -75,6 +105,7 @@ KapacitorRulesTable.propTypes = {
  source: shape({
    id: string.isRequired,
  }).isRequired,
+  onReadTickscript: func,
 }

 RuleRow.propTypes = {
@ -82,6 +113,7 @@ RuleRow.propTypes = {
  source: shape(),
  onChangeRuleStatus: func,
  onDelete: func,
+  onRead: func,
 }

 RuleTitle.propTypes = {
@ -90,7 +122,7 @@ RuleTitle.propTypes = {
    query: shape(),
    links: shape({
      self: string.isRequired,
-    }).isRequired,
+    }),
  }),
  source: shape({
    id: string.isRequired,
--- a/ui/src/kapacitor/components/TICKscriptOverlay.js
+++ b/ui/src/kapacitor/components/TICKscriptOverlay.js
@ -0,0 +1,30 @@
+import React, {PropTypes} from 'react'
+import OverlayTechnologies from 'shared/components/OverlayTechnologies'
+
+const TICKscriptOverlay = ({tickscript, onClose}) =>
+  <OverlayTechnologies>
+    <div className="tick-script-overlay">
+      <div className="write-data-form--header">
+        <div className="page-header__left">
+          <h1 className="page-header__title">Generated TICKscript</h1>
+        </div>
+        <div className="page-header__right">
+          <span className="page-header__dismiss" onClick={onClose} />
+        </div>
+      </div>
+      <div className="write-data-form--body">
+        <pre className="tick-script-overlay--sample">
+          {tickscript}
+        </pre>
+      </div>
+    </div>
+  </OverlayTechnologies>
+
+const {string, func} = PropTypes
+
+TICKscriptOverlay.propTypes = {
+  tickscript: string,
+  onClose: func.isRequired,
+}
+
+export default TICKscriptOverlay
--- a/ui/src/kapacitor/constants/tableSizing.js
+++ 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',
+}
--- 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,45 +10,19 @@ 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: {},
    }
-  },

-  componentDidMount() {
+    this.isEditing = ::this.isEditing
+  }
+
+  async componentDidMount() {
    const {params, source, kapacitorActions, addFlashMessage} = this.props
    if (this.isEditing()) {
      kapacitorActions.fetchRule(source, params.ruleID)
@ -56,35 +30,36 @@ 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})
-        })
-        .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
-          })
-        })
-    })
-  },
+    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
+      })
+    }
+
+    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)
+        )
+      })
+
+      this.setState({kapacitor, enabledAlerts})
+    } catch (error) {
+      addFlashMessage({
+        type: 'error',
+        text: 'There was a problem communicating with Kapacitor',
+      })
+      console.error(error)
+      throw error
+    }
+  }

  render() {
    const {
@ -123,26 +98,54 @@ export const KapacitorRulePage = React.createClass({
        kapacitor={kapacitor}
      />
    )
-  },
+  }

  isEditing() {
    const {params} = this.props
    return params.ruleID && params.ruleID !== 'new'
-  },
+  }
+}
+
+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,
+}
+
+const mapStateToProps = ({rules, queryConfigs}) => ({
+  rules,
+  queryConfigs,
 })

-function mapStateToProps(state) {
-  return {
-    rules: state.rules,
-    queryConfigs: state.queryConfigs,
-  }
-}
-
-function 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)
--- a/ui/src/kapacitor/containers/KapacitorRulesPage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js
@ -11,19 +11,23 @@ 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() {
-    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) {
@ -39,9 +43,17 @@ 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
@ -51,6 +63,9 @@ class KapacitorRulesPage extends Component {
        loading={loading}
        onDelete={this.handleDeleteRule}
        onChangeRuleStatus={this.handleRuleStatus}
+        onReadTickscript={this.handleReadTickscript}
+        tickscript={tickscript}
+        onCloseTickscript={this.handleCloseTickscript}
      />
    )
  }
--- 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 => {
@ -138,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}`, '')
 }

@ -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,
--- 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;
+}
--- 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;
+}