From a78ba9f778b714f1f8ee60ea927a24feef54df1e Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 25 Sep 2017 14:01:25 -0700 Subject: [PATCH 1/9] Add dummy dropdown to rule builder message --- ui/src/kapacitor/components/RuleMessage.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index 5d54669f4..4ad8b3ec1 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -5,6 +5,7 @@ import classnames from 'classnames' import RuleMessageOptions from 'src/kapacitor/components/RuleMessageOptions' import RuleMessageText from 'src/kapacitor/components/RuleMessageText' import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates' +import Dropdown from 'shared/components/Dropdown' import {DEFAULT_ALERTS, RULE_ALERT_OPTIONS} from 'src/kapacitor/constants' @@ -44,6 +45,16 @@ class RuleMessage extends Component { const selectedAlertNodeName = rule.alerts[0] || alerts[0].text + const dropdownDummyClick = selectedItem => { + console.log(selectedItem.text) + } + const dropdownDummyItems = [ + {text: 'swoggle'}, + {text: 'yoggle'}, + {text: 'zoggle'}, + {text: 'doggle'}, + ] + return (

Alert Message

@@ -66,6 +77,13 @@ class RuleMessage extends Component { )} +
Date: Mon, 25 Sep 2017 14:24:34 -0700 Subject: [PATCH 2/9] Add markup for alert endpoint tab deletion --- ui/src/kapacitor/components/RuleMessage.js | 1 + ui/src/style/unsorted.scss | 37 +++++++++++++++++++++- 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index 4ad8b3ec1..9916a2c5a 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -74,6 +74,7 @@ class RuleMessage extends Component { onClick={this.handleChooseAlert(alert)} > {alert.text} +
)} diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index 13cb3776c..593f7b4d1 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -316,5 +316,40 @@ $tick-script-overlay-margin: 30px; .dropdown .dropdown-menu li.dropdown-item { display: block; - > a {display: block;} + > a { + display: block; + } +} + +/* Deletable tabs in .nav-tablist + ----------------------------------------------------------------------------- + TODO: Add this into the theme styles +*/ +.nav-tab--delete { + width: 16px; + height: 16px; + display: inline-block; + margin-left: 4px; + border-radius: 3px; + position: relative; + background-color: $g5-pepper; + + // Psuedo elements used to form the X + &:before, + &:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + background-color: $g11-sidewalk; + width: 10px; + height: 2px; + border-radius: 1px; + } + &:before { + transform: translate(-50%, -50%) rotate(45deg); + } + &:after { + transform: translate(-50%, -50%) rotate(-45deg); + } } From 38b059a24bc1175d829145bbaa1a9d9f92fd992d Mon Sep 17 00:00:00 2001 From: deniz kusefoglu Date: Mon, 25 Sep 2017 15:44:59 -0700 Subject: [PATCH 3/9] Add functionality to Dropdown for new alert addition --- ui/src/kapacitor/components/RuleMessage.js | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index 9916a2c5a..c62c8e955 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -15,6 +15,7 @@ class RuleMessage extends Component { this.state = { selectedAlertNodeName: null, + endpointsOnThisAlert: [], } } @@ -30,6 +31,15 @@ class RuleMessage extends Component { this.setState({selectedAlertNodeName: item.text}) } + handleAddNewAlertEndpoint = selectedItem => { + this.setState({ + endpointsOnThisAlert: _.concat( + this.state.endpointsOnThisAlert, + selectedItem + ), + }) + } + render() { const {rule, actions, enabledAlerts} = this.props const defaultAlertEndpoints = DEFAULT_ALERTS.map(text => { @@ -45,16 +55,6 @@ class RuleMessage extends Component { const selectedAlertNodeName = rule.alerts[0] || alerts[0].text - const dropdownDummyClick = selectedItem => { - console.log(selectedItem.text) - } - const dropdownDummyItems = [ - {text: 'swoggle'}, - {text: 'yoggle'}, - {text: 'zoggle'}, - {text: 'doggle'}, - ] - return (

Alert Message

@@ -62,7 +62,7 @@ class RuleMessage extends Component {

Send this Alert to:

    - {alerts + {this.state.endpointsOnThisAlert // only display alert endpoints that have rule alert options configured .filter(alert => _.get(RULE_ALERT_OPTIONS, alert.text, false)) .map(alert => @@ -79,10 +79,10 @@ class RuleMessage extends Component { )}
From 478ab0f688fc6226a5e4a448f0aae0b68e777592 Mon Sep 17 00:00:00 2001 From: deniz kusefoglu Date: Mon, 25 Sep 2017 15:47:45 -0700 Subject: [PATCH 4/9] Add unique key to endpoints added to alert --- ui/src/kapacitor/components/RuleMessage.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index c62c8e955..2c1896d14 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -1,6 +1,7 @@ import React, {Component, PropTypes} from 'react' import _ from 'lodash' import classnames from 'classnames' +import uuid from 'node-uuid' import RuleMessageOptions from 'src/kapacitor/components/RuleMessageOptions' import RuleMessageText from 'src/kapacitor/components/RuleMessageText' @@ -67,7 +68,7 @@ class RuleMessage extends Component { .filter(alert => _.get(RULE_ALERT_OPTIONS, alert.text, false)) .map(alert =>
  • Date: Mon, 25 Sep 2017 16:28:02 -0700 Subject: [PATCH 5/9] Improve styles for deletable tabs in rule message section --- ui/src/kapacitor/components/RuleMessage.js | 2 +- ui/src/style/pages/kapacitor.scss | 55 ++++++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index 2c1896d14..fdb447287 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -84,7 +84,7 @@ class RuleMessage extends Component { menuClass="dropdown-malachite" selected="Add an Endpoint" onChoose={this.handleAddNewAlertEndpoint} - className="dropdown-140" + className="dropdown-140 rule-message--add-endpoint" />
    • Date: Mon, 25 Sep 2017 16:45:34 -0700 Subject: [PATCH 6/9] Add new alert endpoints by kind and number --- ui/src/kapacitor/components/RuleMessage.js | 30 +++++++++++++++------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index fdb447287..b5ba6a186 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -17,6 +17,7 @@ class RuleMessage extends Component { this.state = { selectedAlertNodeName: null, endpointsOnThisAlert: [], + endpointsOfKind: {}, } } @@ -27,30 +28,42 @@ class RuleMessage extends Component { handleChooseAlert = item => () => { const {actions} = this.props - actions.updateAlerts(item.ruleID, [item.text]) + actions.updateAlerts(item.ruleID, [item.text]) // TODO: this seems to be doing a lot more than it needs to. actions.updateAlertNodes(item.ruleID, item.text, '') this.setState({selectedAlertNodeName: item.text}) } handleAddNewAlertEndpoint = selectedItem => { + const {endpointsOnThisAlert, endpointsOfKind} = this.state + const newItemNumbering = _.get(endpointsOfKind, selectedItem.text, 0) + 1 + const newItemName = selectedItem.text + newItemNumbering this.setState({ - endpointsOnThisAlert: _.concat( - this.state.endpointsOnThisAlert, - selectedItem - ), + endpointsOnThisAlert: _.concat(endpointsOnThisAlert, { + text: newItemName, + kind: selectedItem.text, + ruleID: selectedItem.ruleID, + }), + endpointsOfKind: { + ...endpointsOfKind, + [selectedItem.text]: newItemNumbering, + }, }) + console.log(this.state.endpointsOnThisAlert) + } + handleRemoveAlertEndpoint = removedItem => { + console.log(removedItem) } render() { const {rule, actions, enabledAlerts} = this.props const defaultAlertEndpoints = DEFAULT_ALERTS.map(text => { - return {text, ruleID: rule.id} + return {text, kind: text, ruleID: rule.id} }) const alerts = [ ...defaultAlertEndpoints, ...enabledAlerts.map(text => { - return {text, ruleID: rule.id} + return {text, kind: text, ruleID: rule.id} }), ] @@ -64,8 +77,7 @@ class RuleMessage extends Component {

    Send this Alert to:

      {this.state.endpointsOnThisAlert - // only display alert endpoints that have rule alert options configured - .filter(alert => _.get(RULE_ALERT_OPTIONS, alert.text, false)) + .filter(alert => _.get(RULE_ALERT_OPTIONS, alert.kind, false)) // / TODO this looks like a problem .map(alert =>
    • Date: Mon, 25 Sep 2017 16:47:00 -0700 Subject: [PATCH 7/9] Add borders between tablist items --- ui/src/style/unsorted.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index 593f7b4d1..1481d4e66 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -353,3 +353,20 @@ $tick-script-overlay-margin: 30px; transform: translate(-50%, -50%) rotate(-45deg); } } + +/* Add borders between items in .nav-tablist + ----------------------------------------------------------------------------- + TODO: Add these styles into the theme + */ + +.nav.nav-tablist { + background-color: $g5-pepper; + + > li { + margin-right: 2px; + + &:last-child { + margin-right: 0; + } + } +} From d3198390043990f7f45cef648acb33ac09a8cb21 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 25 Sep 2017 17:03:18 -0700 Subject: [PATCH 8/9] Add dummy markup & styles for "configured" state of AlertTabs Hardcoded all endpoints to configured={true} for now --- ui/src/kapacitor/components/AlertTabs.js | 3 ++- ui/src/shared/components/Tabs.js | 6 +++++- ui/src/style/pages/config-endpoints.scss | 19 ++++++++++++++++++- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js index 49096fc04..4e002fc64 100644 --- a/ui/src/kapacitor/components/AlertTabs.js +++ b/ui/src/kapacitor/components/AlertTabs.js @@ -207,7 +207,8 @@ class AlertTabs extends Component { (acc, _cur, k) => supportedConfigs[k] ? acc.concat( - + /* All endpoints appear "configured" by default (as a test) */ + {supportedConfigs[k].type} ) diff --git a/ui/src/shared/components/Tabs.js b/ui/src/shared/components/Tabs.js index 80994ac47..afb84ff2d 100644 --- a/ui/src/shared/components/Tabs.js +++ b/ui/src/shared/components/Tabs.js @@ -9,6 +9,7 @@ export const Tab = React.createClass({ isDisabled: bool, isActive: bool, isKapacitorTab: bool, + isConfigured: bool, }, render() { @@ -24,7 +25,10 @@ export const Tab = React.createClass({ } return (
      {this.props.children} diff --git a/ui/src/style/pages/config-endpoints.scss b/ui/src/style/pages/config-endpoints.scss index 44562000d..5180d7b1d 100644 --- a/ui/src/style/pages/config-endpoints.scss +++ b/ui/src/style/pages/config-endpoints.scss @@ -37,12 +37,13 @@ $config-endpoint-tab-bg-active: $g3-castle; border-radius: 0; height: $config-endpoint-tab-height; border: 0; - padding: 0 40px 0 15px; + padding: 0 50px 0 15px; display: flex; align-items: center; justify-content: space-between; font-weight: 500; font-size: 16px; + position: relative; &:first-child {border-top-left-radius: $radius;} @@ -54,6 +55,22 @@ $config-endpoint-tab-bg-active: $g3-castle; color: $config-endpoint-tab-text-active; background-color: $config-endpoint-tab-bg-active; } + + // Checkmark for configured state, hidden by default + &:after { + content: "\e918"; + font-family: 'icomoon'; + color: $c-rainforest; + position: absolute; + top: 50%; + right: 14px; + transform: translateY(-50%); + opacity: 0; + transition: opacity 0.25s ease; + } + &.configured:after { + opacity: 1; + } } } } From 50217034c2ffbe8aaba8545d88920f0b46375e2b Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 25 Sep 2017 17:07:00 -0700 Subject: [PATCH 9/9] Prevent rendering of empty UL tag --- ui/src/kapacitor/components/RuleMessage.js | 37 ++++++++++++---------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js index b5ba6a186..cd1ddddc9 100644 --- a/ui/src/kapacitor/components/RuleMessage.js +++ b/ui/src/kapacitor/components/RuleMessage.js @@ -56,6 +56,7 @@ class RuleMessage extends Component { render() { const {rule, actions, enabledAlerts} = this.props + const {endpointsOnThisAlert} = this.state const defaultAlertEndpoints = DEFAULT_ALERTS.map(text => { return {text, kind: text, ruleID: rule.id} }) @@ -75,22 +76,26 @@ class RuleMessage extends Component {

      Send this Alert to:

      -
        - {this.state.endpointsOnThisAlert - .filter(alert => _.get(RULE_ALERT_OPTIONS, alert.kind, false)) // / TODO this looks like a problem - .map(alert => -
      • - {alert.text} -
        -
        • - )} -
      + {endpointsOnThisAlert.length + ?
        + {endpointsOnThisAlert + .filter(alert => + _.get(RULE_ALERT_OPTIONS, alert.kind, false) + ) // / TODO this looks like a problem + .map(alert => +
      • + {alert.text} +
        +
        • + )} +
      + : null}