From 34d289f1bc44a9773b1f026e56f05a32ed9b9121 Mon Sep 17 00:00:00 2001 From: Alex Paxton Date: Wed, 31 Jan 2018 16:02:39 -0800 Subject: [PATCH 01/12] Add ConfirmButton Signed-off-by: Deniz Kusefoglu --- ui/src/shared/components/ConfirmButton.js | 87 +++++++++++++++++++++ ui/src/style/chronograf.scss | 1 + ui/src/style/components/confirm-button.scss | 55 +++++++++++++ 3 files changed, 143 insertions(+) create mode 100644 ui/src/shared/components/ConfirmButton.js create mode 100644 ui/src/style/components/confirm-button.scss diff --git a/ui/src/shared/components/ConfirmButton.js b/ui/src/shared/components/ConfirmButton.js new file mode 100644 index 000000000..6a8360432 --- /dev/null +++ b/ui/src/shared/components/ConfirmButton.js @@ -0,0 +1,87 @@ +import React, {Component, PropTypes} from 'react' + +import OnClickOutside from 'shared/components/OnClickOutside' + +class ConfirmButton extends Component { + constructor(props) { + super(props) + + this.state = { + expanded: false, + } + } + + handleButtonClick = () => { + if (this.props.disabled) { + return + } + this.setState({expanded: !this.state.expanded}) + } + + handleConfirmClick = () => { + this.setState({expanded: false}) + this.props.confirmAction() + } + + handleClickOutside = () => { + this.setState({expanded: false}) + } + + render() { + const { + text, + confirmText, + type, + size, + square, + icon, + disabled, + customClass, + } = this.props + const {expanded} = this.state + + const customClassString = customClass ? ` ${customClass}` : '' + const squareString = square ? ' btn-square' : '' + const expandedString = expanded ? ' expanded' : '' + const disabledString = disabled ? ' disabled' : '' + + const classname = `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}` + + return ( +
+ {icon && } + {text && text} +
+
+ {confirmText} +
+
+
+ ) + } +} + +const {bool, func, string} = PropTypes + +ConfirmButton.defaultProps = { + confirmText: 'Confirm', + type: 'btn-default', + size: 'btn-sm', + square: false, +} +ConfirmButton.propTypes = { + text: string, + confirmText: string, + confirmAction: func.isRequired, + type: string, + size: string, + square: bool, + icon: string, + disabled: bool, + customClass: string, +} + +export default OnClickOutside(ConfirmButton) diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 5a377d739..bcdce9130 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -28,6 +28,7 @@ // Components @import 'components/ceo-display-options'; +@import 'components/confirm-button'; @import 'components/confirm-buttons'; @import 'components/code-mirror-theme'; @import 'components/color-dropdown'; diff --git a/ui/src/style/components/confirm-button.scss b/ui/src/style/components/confirm-button.scss new file mode 100644 index 000000000..9c7598109 --- /dev/null +++ b/ui/src/style/components/confirm-button.scss @@ -0,0 +1,55 @@ +/* + Confirm Button + ---------------------------------------------------------------------------- + This button requires a second click to confirm the action +*/ + +.confirm-button { + .confirm-button--tooltip { + visibility: hidden; + transition: all; + position: absolute; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + } +} +.confirm-button--confirmation { + border-radius: 3px; + background-color: $c-curacao; + opacity: 0; + padding: 0 7px; + color: $g20-white; + font-size: 13px; + font-weight: 600; + text-align: center; + transition: opacity 0.25s ease, background-color 0.25s ease; + + &:after { + content: ''; + border: 8px solid transparent; + border-bottom-color: $c-curacao; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + transition: border-color 0.25s ease; + z-index: 100; + } + + &:hover { + background-color: $c-dreamsicle; + cursor: pointer; + } + &:hover:after { + border-bottom-color: $c-dreamsicle; + } +} +.confirm-button.expanded { + .confirm-button--tooltip { + visibility: visible; + } + .confirm-button--confirmation { + opacity: 1; + } +} From 567efea82e098089d52fddf59906b62faf50c18a Mon Sep 17 00:00:00 2001 From: Alex Paxton Date: Wed, 31 Jan 2018 16:04:27 -0800 Subject: [PATCH 02/12] Fix Visbility typo Signed-off-by: Deniz Kusefoglu --- ui/src/kapacitor/components/LogsToggle.js | 8 ++++---- ui/src/kapacitor/components/Tickscript.js | 6 +++--- ui/src/kapacitor/components/TickscriptHeader.js | 6 +++--- ui/src/kapacitor/containers/TickscriptPage.js | 4 ++-- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/ui/src/kapacitor/components/LogsToggle.js b/ui/src/kapacitor/components/LogsToggle.js index eedddafbf..9820b621b 100644 --- a/ui/src/kapacitor/components/LogsToggle.js +++ b/ui/src/kapacitor/components/LogsToggle.js @@ -1,16 +1,16 @@ import React, {PropTypes} from 'react' -const LogsToggle = ({areLogsVisible, onToggleLogsVisbility}) => +const LogsToggle = ({areLogsVisible, onToggleLogsVisibility}) =>
  • Editor
  • Editor + Logs
    • @@ -20,7 +20,7 @@ const {bool, func} = PropTypes LogsToggle.propTypes = { areLogsVisible: bool, - onToggleLogsVisbility: func.isRequired, + onToggleLogsVisibility: func.isRequired, } export default LogsToggle diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js index 2a54dd093..2de988703 100644 --- a/ui/src/kapacitor/components/Tickscript.js +++ b/ui/src/kapacitor/components/Tickscript.js @@ -18,7 +18,7 @@ const Tickscript = ({ isNewTickscript, areLogsVisible, areLogsEnabled, - onToggleLogsVisbility, + onToggleLogsVisibility, }) =>
    @@ -58,7 +58,7 @@ Tickscript.propTypes = { }), areLogsVisible: bool, areLogsEnabled: bool, - onToggleLogsVisbility: func.isRequired, + onToggleLogsVisibility: func.isRequired, task: shape({ id: string, script: string, diff --git a/ui/src/kapacitor/components/TickscriptHeader.js b/ui/src/kapacitor/components/TickscriptHeader.js index c830887ae..0db6c757d 100644 --- a/ui/src/kapacitor/components/TickscriptHeader.js +++ b/ui/src/kapacitor/components/TickscriptHeader.js @@ -9,7 +9,7 @@ const TickscriptHeader = ({ areLogsVisible, areLogsEnabled, isNewTickscript, - onToggleLogsVisbility, + onToggleLogsVisibility, }) =>
    @@ -20,7 +20,7 @@ const TickscriptHeader = ({ }
    @@ -43,7 +43,7 @@ TickscriptHeader.propTypes = { onSave: func, areLogsVisible: bool, areLogsEnabled: bool, - onToggleLogsVisbility: func.isRequired, + onToggleLogsVisibility: func.isRequired, task: shape({ dbrps: arrayOf( shape({ diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index b73a11edf..081efbf54 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -198,7 +198,7 @@ class TickscriptPage extends Component { this.setState({task: {...this.state.task, id: e.target.value}}) } - handleToggleLogsVisbility = () => { + handleToggleLogsVisibility = () => { this.setState({areLogsVisible: !this.state.areLogsVisible}) } @@ -220,7 +220,7 @@ class TickscriptPage extends Component { onChangeID={this.handleChangeID} areLogsVisible={areLogsVisible} areLogsEnabled={areLogsEnabled} - onToggleLogsVisbility={this.handleToggleLogsVisbility} + onToggleLogsVisibility={this.handleToggleLogsVisibility} /> ) } From 49670a77c234c80a8c536133e9643ee979b747db Mon Sep 17 00:00:00 2001 From: Alex Paxton Date: Wed, 31 Jan 2018 16:05:28 -0800 Subject: [PATCH 03/12] Add unsavedChanges state to TickscriptPage Signed-off-by: Deniz Kusefoglu --- ui/src/kapacitor/actions/view/index.js | 43 ++++++++++++++- ui/src/kapacitor/components/Tickscript.js | 4 ++ .../kapacitor/components/TickscriptHeader.js | 41 ++++++++++++--- ui/src/kapacitor/containers/TickscriptPage.js | 52 ++++++++++++++++++- 4 files changed, 129 insertions(+), 11 deletions(-) diff --git a/ui/src/kapacitor/actions/view/index.js b/ui/src/kapacitor/actions/view/index.js index bba7b407f..02c7e1e06 100644 --- a/ui/src/kapacitor/actions/view/index.js +++ b/ui/src/kapacitor/actions/view/index.js @@ -203,7 +203,6 @@ export const createTask = ( ) => async dispatch => { try { const {data} = await createTaskAJAX(kapacitor, task) - router.push(`/sources/${sourceID}/alert-rules`) dispatch(publishNotification('success', 'You made a TICKscript!')) return data } catch (error) { @@ -222,6 +221,48 @@ export const updateTask = ( ruleID, router, sourceID +) => async dispatch => { + try { + const {data} = await updateTaskAJAX(kapacitor, task, ruleID, sourceID) + dispatch(publishNotification('success', 'TICKscript updated successully')) + return data + } catch (error) { + if (!error) { + dispatch(errorThrown('Could not communicate with server')) + return + } + + return error.data + } +} + +export const createTaskExit = ( + kapacitor, + task, + router, + sourceID +) => async dispatch => { + try { + const {data} = await createTaskAJAX(kapacitor, task) + router.push(`/sources/${sourceID}/alert-rules`) + dispatch(publishNotification('success', 'TICKscript successfully created.')) + return data + } catch (error) { + if (!error) { + dispatch(errorThrown('Could not communicate with server')) + return + } + + return error.data + } +} + +export const updateTaskExit = ( + kapacitor, + task, + ruleID, + router, + sourceID ) => async dispatch => { try { const {data} = await updateTaskAJAX(kapacitor, task, ruleID, sourceID) diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js index 2de988703..032ef70b4 100644 --- a/ui/src/kapacitor/components/Tickscript.js +++ b/ui/src/kapacitor/components/Tickscript.js @@ -8,6 +8,7 @@ import LogsTable from 'src/kapacitor/components/LogsTable' const Tickscript = ({ onSave, + onSaveAndExit, task, logs, validation, @@ -15,6 +16,7 @@ const Tickscript = ({ onChangeScript, onChangeType, onChangeID, + unsavedChanges, isNewTickscript, areLogsVisible, areLogsEnabled, @@ -24,6 +26,8 @@ const Tickscript = ({ }
    - + {isNewTickscript + ? + : } + {unsavedChanges + ? + : }
    diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index 081efbf54..14a879a40 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -29,6 +29,7 @@ class TickscriptPage extends Component { logs: [], areLogsEnabled: false, failStr: '', + unsavedChanges: false, } } @@ -172,7 +173,40 @@ class TickscriptPage extends Component { } else { response = await createTask(kapacitor, task, router, sourceID) } + if (response && response.code === 500) { + // check responses on failing??! + return this.setState({validation: response.message}) + } + this.setState({unsavedChanges: false}) + } catch (error) { + console.error(error) + throw error + } + } + handleSaveAndExit = async () => { + const {kapacitor, task} = this.state + const { + source: {id: sourceID}, + router, + kapacitorActions: {createTaskExit, updateTaskExit}, + params: {ruleID}, + } = this.props + + let response + + try { + if (this._isEditing()) { + response = await updateTaskExit( + kapacitor, + task, + ruleID, + router, + sourceID + ) + } else { + response = await createTaskExit(kapacitor, task, router, sourceID) + } if (response && response.code === 500) { return this.setState({validation: response.message}) } @@ -183,7 +217,10 @@ class TickscriptPage extends Component { } handleChangeScript = tickscript => { - this.setState({task: {...this.state.task, tickscript}}) + this.setState({ + task: {...this.state.task, tickscript}, + unsavedChanges: true, + }) } handleSelectDbrps = dbrps => { @@ -204,7 +241,14 @@ class TickscriptPage extends Component { render() { const {source} = this.props - const {task, validation, logs, areLogsVisible, areLogsEnabled} = this.state + const { + task, + validation, + logs, + areLogsVisible, + areLogsEnabled, + unsavedChanges, + } = this.state return ( Date: Wed, 31 Jan 2018 16:54:53 -0800 Subject: [PATCH 04/12] Make confirm button tooltip positioning smarter Could be improved further, but this solves the immediate problem of the tooltip extending beyond the right edge of the screen --- ui/src/shared/components/ConfirmButton.js | 29 +++++++++++-- ui/src/style/components/confirm-button.scss | 46 ++++++++++++++++----- 2 files changed, 61 insertions(+), 14 deletions(-) diff --git a/ui/src/shared/components/ConfirmButton.js b/ui/src/shared/components/ConfirmButton.js index 6a8360432..9d29f840f 100644 --- a/ui/src/shared/components/ConfirmButton.js +++ b/ui/src/shared/components/ConfirmButton.js @@ -27,6 +27,24 @@ class ConfirmButton extends Component { this.setState({expanded: false}) } + calculatePosition = () => { + if (!this.buttonDiv || !this.tooltipDiv) { + return '' + } + + const windowWidth = window.innerWidth + const buttonRect = this.buttonDiv.getBoundingClientRect() + const tooltipRect = this.tooltipDiv.getBoundingClientRect() + + const rightGap = windowWidth - buttonRect.right + + if (tooltipRect.width / 2 > rightGap) { + return 'left' + } + + return 'bottom' + } + render() { const { text, @@ -42,19 +60,24 @@ class ConfirmButton extends Component { const customClassString = customClass ? ` ${customClass}` : '' const squareString = square ? ' btn-square' : '' - const expandedString = expanded ? ' expanded' : '' + const expandedString = expanded ? ' active' : '' const disabledString = disabled ? ' disabled' : '' const classname = `confirm-button btn ${type} ${size}${customClassString}${squareString}${expandedString}${disabledString}` return ( -
    +
    (this.buttonDiv = r)} + > {icon && } {text && text} -
    +
    (this.tooltipDiv = r)} > {confirmText}
    diff --git a/ui/src/style/components/confirm-button.scss b/ui/src/style/components/confirm-button.scss index 9c7598109..cf375a474 100644 --- a/ui/src/style/components/confirm-button.scss +++ b/ui/src/style/components/confirm-button.scss @@ -9,9 +9,18 @@ visibility: hidden; transition: all; position: absolute; - top: calc(100% + 8px); - left: 50%; - transform: translateX(-50%); + + &.bottom { + top: calc(100% + 4px); + left: 50%; + transform: translateX(-50%); + } + + &.left { + top: 50%; + right: calc(100% + 4px); + transform: translateY(-50%); + } } } .confirm-button--confirmation { @@ -28,11 +37,7 @@ &:after { content: ''; border: 8px solid transparent; - border-bottom-color: $c-curacao; position: absolute; - bottom: 100%; - left: 50%; - transform: translateX(-50%); transition: border-color 0.25s ease; z-index: 100; } @@ -41,11 +46,30 @@ background-color: $c-dreamsicle; cursor: pointer; } - &:hover:after { - border-bottom-color: $c-dreamsicle; - } } -.confirm-button.expanded { + +.confirm-button--tooltip.bottom .confirm-button--confirmation:after { + bottom: 100%; + left: 50%; + border-bottom-color: $c-curacao; + transform: translateX(-50%); +} +.confirm-button--tooltip.bottom .confirm-button--confirmation:hover:after { + border-bottom-color: $c-dreamsicle; +} +.confirm-button--tooltip.left .confirm-button--confirmation:after { + left: 100%; + top: 50%; + border-left-color: $c-curacao; + transform: translateY(-50%); +} +.confirm-button--tooltip.left .confirm-button--confirmation:hover:after { + border-left-color: $c-dreamsicle; +} + +.confirm-button.active { + z-index: 999; + .confirm-button--tooltip { visibility: visible; } From 3899fa1033428fbeea40b6ce7f8b35e98dcb84ad Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 31 Jan 2018 16:55:13 -0800 Subject: [PATCH 05/12] Change exit confirmation to be a question --- ui/src/kapacitor/components/TickscriptHeader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/kapacitor/components/TickscriptHeader.js b/ui/src/kapacitor/components/TickscriptHeader.js index 9ffb7b5b0..f7776921a 100644 --- a/ui/src/kapacitor/components/TickscriptHeader.js +++ b/ui/src/kapacitor/components/TickscriptHeader.js @@ -47,7 +47,7 @@ const TickscriptHeader = ({ {unsavedChanges ? : } @@ -66,6 +66,7 @@ const {arrayOf, bool, func, shape, string} = PropTypes TickscriptHeader.propTypes = { isNewTickscript: bool, onSave: func, + onExit: func.isRequired, areLogsVisible: bool, areLogsEnabled: bool, onToggleLogsVisibility: func.isRequired, @@ -77,6 +78,7 @@ TickscriptHeader.propTypes = { }) ), }), + unsavedChanges: bool, } export default TickscriptHeader diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index 14a879a40..947db6b6c 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -184,36 +184,10 @@ class TickscriptPage extends Component { } } - handleSaveAndExit = async () => { - const {kapacitor, task} = this.state - const { - source: {id: sourceID}, - router, - kapacitorActions: {createTaskExit, updateTaskExit}, - params: {ruleID}, - } = this.props + handleExit = () => { + const {source: {id: sourceID}, router} = this.props - let response - - try { - if (this._isEditing()) { - response = await updateTaskExit( - kapacitor, - task, - ruleID, - router, - sourceID - ) - } else { - response = await createTaskExit(kapacitor, task, router, sourceID) - } - if (response && response.code === 500) { - return this.setState({validation: response.message}) - } - } catch (error) { - console.error(error) - throw error - } + return router.push(`/sources/${sourceID}/alert-rules`) } handleChangeScript = tickscript => { @@ -258,7 +232,7 @@ class TickscriptPage extends Component { validation={validation} onSave={this.handleSave} unsavedChanges={unsavedChanges} - onSaveAndExit={this.handleSaveAndExit} + onExit={this.handleExit} isNewTickscript={!this._isEditing()} onSelectDbrps={this.handleSelectDbrps} onChangeScript={this.handleChangeScript} @@ -289,8 +263,6 @@ TickscriptPage.propTypes = { kapacitorActions: shape({ updateTask: func.isRequired, createTask: func.isRequired, - updateTaskExit: func.isRequired, - createTaskExit: func.isRequired, getRule: func.isRequired, }), router: shape({ From e0a2aecaa258ae008ec7cac63ac06330666dc3ae Mon Sep 17 00:00:00 2001 From: deniz kusefoglu Date: Thu, 1 Feb 2018 11:02:45 -0800 Subject: [PATCH 07/12] Detect unsaved changes outside the tickscript editor --- ui/src/kapacitor/containers/TickscriptPage.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index 947db6b6c..78a07dcc5 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -198,15 +198,18 @@ class TickscriptPage extends Component { } handleSelectDbrps = dbrps => { - this.setState({task: {...this.state.task, dbrps}}) + this.setState({task: {...this.state.task, dbrps}, unsavedChanges: true}) } handleChangeType = type => () => { - this.setState({task: {...this.state.task, type}}) + this.setState({task: {...this.state.task, type}, unsavedChanges: true}) } handleChangeID = e => { - this.setState({task: {...this.state.task, id: e.target.value}}) + this.setState({ + task: {...this.state.task, id: e.target.value}, + unsavedChanges: true, + }) } handleToggleLogsVisibility = () => { From 9d2c44e44f3fe5d4101ff7ee905004ec3c07afe6 Mon Sep 17 00:00:00 2001 From: deniz kusefoglu Date: Thu, 1 Feb 2018 11:14:17 -0800 Subject: [PATCH 08/12] Update CHANGELOG --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f85734d3d..d9f6e768b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,11 @@ ## v1.4.1.0 [unreleased] ### Features 1. [#2409](https://github.com/influxdata/chronograf/pull/2409): Allow adding multiple event handlers to a rule -1. [#2709](https://github.com/influxdata/chronograf/pull/2709): Add "send test alert" button to test kapacitor alert configurations" +1. [#2709](https://github.com/influxdata/chronograf/pull/2709): Add "send test alert" button to test kapacitor alert configurations 1. [#2708](https://github.com/influxdata/chronograf/pull/2708): Link to specified kapacitor config panel from rule builder alert handlers ### UI Improvements 1. [#2698](https://github.com/influxdata/chronograf/pull/2698): Improve clarity of terminology surrounding InfluxDB & Kapacitor connections +1. [#2746](https://github.com/influxdata/chronograf/pull/2746): Separate saving TICKscript from exiting editor page ### Bug Fixes 1. [#2684](https://github.com/influxdata/chronograf/pull/2684): Fix TICKscript Sensu alerts when no group by tags selected 1. [#2735](https://github.com/influxdata/chronograf/pull/2735): Remove cli options from systemd service file From 167e6a948fdf51e669b50dcc549c4ce2324dda24 Mon Sep 17 00:00:00 2001 From: deniz kusefoglu Date: Thu, 1 Feb 2018 13:09:09 -0800 Subject: [PATCH 09/12] Improve copy on Tickscript editing notifications --- ui/src/kapacitor/actions/view/index.js | 5 ++--- ui/src/kapacitor/components/TickscriptHeader.js | 4 ++-- ui/src/kapacitor/containers/TickscriptPage.js | 7 ++----- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/ui/src/kapacitor/actions/view/index.js b/ui/src/kapacitor/actions/view/index.js index 5ee91d336..bbeef0d8c 100644 --- a/ui/src/kapacitor/actions/view/index.js +++ b/ui/src/kapacitor/actions/view/index.js @@ -198,7 +198,7 @@ export const updateRuleStatus = (rule, status) => dispatch => { export const createTask = (kapacitor, task) => async dispatch => { try { const {data} = await createTaskAJAX(kapacitor, task) - dispatch(publishNotification('success', 'You made a TICKscript!')) + dispatch(publishNotification('success', 'TICKscript successfully created')) return data } catch (error) { if (!error) { @@ -218,14 +218,13 @@ export const updateTask = ( ) => async dispatch => { try { const {data} = await updateTaskAJAX(kapacitor, task, ruleID, sourceID) - dispatch(publishNotification('success', 'TICKscript updated successully')) + dispatch(publishNotification('success', 'TICKscript saved')) return data } catch (error) { if (!error) { dispatch(errorThrown('Could not communicate with server')) return } - return error.data } } diff --git a/ui/src/kapacitor/components/TickscriptHeader.js b/ui/src/kapacitor/components/TickscriptHeader.js index 66645bfef..babe033d8 100644 --- a/ui/src/kapacitor/components/TickscriptHeader.js +++ b/ui/src/kapacitor/components/TickscriptHeader.js @@ -30,7 +30,7 @@ const TickscriptHeader = ({ {isNewTickscript ?
    {areLogsVisible ? : null}
    @@ -71,7 +74,7 @@ Tickscript.propTypes = { }).isRequired, onChangeScript: func.isRequired, onSelectDbrps: func.isRequired, - validation: string, + consoleMessage: string, onChangeType: func.isRequired, onChangeID: func.isRequired, isNewTickscript: bool.isRequired, diff --git a/ui/src/kapacitor/components/TickscriptEditorConsole.js b/ui/src/kapacitor/components/TickscriptEditorConsole.js index 5b9ccf5fd..0ad9fb34f 100644 --- a/ui/src/kapacitor/components/TickscriptEditorConsole.js +++ b/ui/src/kapacitor/components/TickscriptEditorConsole.js @@ -1,22 +1,11 @@ import React, {PropTypes} from 'react' -const TickscriptEditorConsole = ({validation}) => -
    -
    - {validation - ?

    - {validation} -

    - :

    - Save your TICKscript to validate it -

    } +const TickscriptEditorConsole = ({consoleMessage, unsavedChanges}) => { + let consoleOutput
    -
    -const {string} = PropTypes TickscriptEditorConsole.propTypes = { - validation: string, } export default TickscriptEditorConsole diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index dfcab33ed..acd88253e 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -24,7 +24,7 @@ class TickscriptPage extends Component { dbrps: [], type: 'stream', }, - validation: '', + consoleMessage: '', isEditingID: true, logs: [], areLogsEnabled: false, @@ -173,8 +173,11 @@ class TickscriptPage extends Component { } else { response = await createTask(kapacitor, task, router, sourceID) } - if (response) { - this.setState({unsavedChanges: false}) + if (response && !response.code) { + this.setState({unsavedChanges: false, consoleMessage: ''}) + } + if (response.code) { + this.setState({unsavedChanges: true, consoleMessage: response.message}) } } catch (error) { console.error(error) @@ -218,18 +221,18 @@ class TickscriptPage extends Component { const {source} = this.props const { task, - validation, logs, areLogsVisible, areLogsEnabled, unsavedChanges, + consoleMessage, } = this.state return ( Date: Thu, 1 Feb 2018 15:34:59 -0800 Subject: [PATCH 11/12] Redesign tick script editor console Moved to bottom, color coded, is larger --- .../components/TickscriptEditorConsole.js | 24 +++++++- ui/src/style/pages/tickscript-editor.scss | 61 +++++++++++-------- 2 files changed, 59 insertions(+), 26 deletions(-) diff --git a/ui/src/kapacitor/components/TickscriptEditorConsole.js b/ui/src/kapacitor/components/TickscriptEditorConsole.js index 0ad9fb34f..0a4859ae4 100644 --- a/ui/src/kapacitor/components/TickscriptEditorConsole.js +++ b/ui/src/kapacitor/components/TickscriptEditorConsole.js @@ -2,10 +2,32 @@ import React, {PropTypes} from 'react' const TickscriptEditorConsole = ({consoleMessage, unsavedChanges}) => { let consoleOutput -
    + let consoleClass = 'tickscript-console--default' + if (!unsavedChanges) { + consoleOutput = 'TICKscript is valid' + consoleClass = 'tickscript-console--valid' + } else if (unsavedChanges && !consoleMessage) { + consoleOutput = 'You have unsaved changes, save to validate TICKscript' + consoleClass = 'tickscript-console--default' + } else if (unsavedChanges && consoleMessage) { + consoleOutput = consoleMessage + consoleClass = 'tickscript-console--error' + } + return ( +
    +

    + {consoleOutput} +

    +
    + ) +} + +const {bool, string} = PropTypes TickscriptEditorConsole.propTypes = { + consoleMessage: string, + unsavedChanges: bool, } export default TickscriptEditorConsole diff --git a/ui/src/style/pages/tickscript-editor.scss b/ui/src/style/pages/tickscript-editor.scss index 3f70bb942..6fb01847f 100644 --- a/ui/src/style/pages/tickscript-editor.scss +++ b/ui/src/style/pages/tickscript-editor.scss @@ -3,28 +3,26 @@ ---------------------------------------------------------------------------- */ -$tickscript-console-height: 60px; +$tickscript-controls-height: 60px; .tickscript { flex: 1 0 0; + position: relative; } .tickscript-controls, .tickscript-console, .tickscript-editor { - padding: 0; - margin: 0; width: 100%; - position: relative; } -.tickscript-controls, -.tickscript-console { - height: $tickscript-console-height; +.tickscript-console, +.tickscript-controls { + padding: 0 60px; + display: flex; } .tickscript-controls { - display: flex; align-items: center; + height: $tickscript-controls-height; justify-content: space-between; - padding: 0 60px; background-color: $g3-castle; } .tickscript-controls--name { @@ -42,29 +40,42 @@ $tickscript-console-height: 60px; > * {margin-left: 8px;} } -.tickscript-console--output { - padding: 0 60px; - font-family: $code-font; - font-weight: 600; - display: flex; - align-items: center; - background-color: $g2-kevlar; - border-bottom: 2px solid $g3-castle; - position: relative; - height: 100%; - width: 100%; - border-radius: $radius $radius 0 0; +.tickscript-console { + align-items: flex-start; + height: $tickscript-controls-height * 2.25; + border-top: 2px solid $g3-castle; + background-color: $g0-obsidian; + overflow-y: scroll; + @include custom-scrollbar($g0-obsidian,$g4-onyx); > p { - margin: 0; + position: relative; + padding-left: 16px; + font-family: $code-font; + margin: 11px 0; + font-weight: 700; + word-wrap: break-word; + word-break: break-word; + + &:before { + content: '>'; + position: absolute; + top: 0; + left: 0; + } } } .tickscript-console--default { - color: $g10-wolf; - font-style: italic; + color: $g13-mist; +} +.tickscript-console--valid { + color: $c-rainforest; +} +.tickscript-console--error { + color: $c-dreamsicle; } .tickscript-editor { - height: calc(100% - #{$tickscript-console-height * 2}); + height: calc(100% - #{$tickscript-controls-height * 3.25}); } /* From 10a52199b7b7ad6a78d5ef2c2b828b61e87603e1 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 2 Feb 2018 11:25:59 -0800 Subject: [PATCH 12/12] Cleanup Based on feedback from @lukevmorris --- .../components/TickscriptEditorConsole.js | 16 +++++++--------- ui/src/kapacitor/containers/TickscriptPage.js | 5 ++--- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/ui/src/kapacitor/components/TickscriptEditorConsole.js b/ui/src/kapacitor/components/TickscriptEditorConsole.js index 0a4859ae4..9940bf92c 100644 --- a/ui/src/kapacitor/components/TickscriptEditorConsole.js +++ b/ui/src/kapacitor/components/TickscriptEditorConsole.js @@ -1,19 +1,17 @@ import React, {PropTypes} from 'react' const TickscriptEditorConsole = ({consoleMessage, unsavedChanges}) => { - let consoleOutput - let consoleClass = 'tickscript-console--default' + let consoleOutput = 'TICKscript is valid' + let consoleClass = 'tickscript-console--valid' - if (!unsavedChanges) { - consoleOutput = 'TICKscript is valid' - consoleClass = 'tickscript-console--valid' - } else if (unsavedChanges && !consoleMessage) { - consoleOutput = 'You have unsaved changes, save to validate TICKscript' - consoleClass = 'tickscript-console--default' - } else if (unsavedChanges && consoleMessage) { + if (consoleMessage) { consoleOutput = consoleMessage consoleClass = 'tickscript-console--error' + } else if (unsavedChanges) { + consoleOutput = 'You have unsaved changes, save to validate TICKscript' + consoleClass = 'tickscript-console--default' } + return (

    diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index acd88253e..0f456cdfc 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -173,11 +173,10 @@ class TickscriptPage extends Component { } else { response = await createTask(kapacitor, task, router, sourceID) } - if (response && !response.code) { - this.setState({unsavedChanges: false, consoleMessage: ''}) - } if (response.code) { this.setState({unsavedChanges: true, consoleMessage: response.message}) + } else { + this.setState({unsavedChanges: false, consoleMessage: ''}) } } catch (error) { console.error(error)