From 520c6464340a3878e78095b0e8e2410f7f921da3 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Tue, 20 Feb 2018 12:55:41 -0800 Subject: [PATCH 01/41] create LazyLoader component --- ui/src/dashboards/components/LazyLoader.js | 64 ++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 ui/src/dashboards/components/LazyLoader.js diff --git a/ui/src/dashboards/components/LazyLoader.js b/ui/src/dashboards/components/LazyLoader.js new file mode 100644 index 000000000..4b0a1bffa --- /dev/null +++ b/ui/src/dashboards/components/LazyLoader.js @@ -0,0 +1,64 @@ +import React, {Component, PropTypes} from 'react' + +class LazyLoader extends React.Component { + state = { + availableHeight: 0, + scrollTop: 0, + } + + componentDidMount() { + this.setHeight() + window.addEventListener('resize', this.setHeight, true) + } + + componentWillUnmount() { + window.removeEventListener('resize', this.setHeight, true) + } + + handleScroll = event => { + this.setState({ + scrollTop: event.target.scrollTop, + }) + } + + setHeight = () => { + this.setState({ + availableHeight: this.node.clientHeight, + }) + } + + render() { + // const {numRows, rowHeight, renderRowAtIndex} = this.props + // const totalHeight = rowHeight * numRows + + const {availableHeight, scrollTop} = this.state + const scrollBottom = scrollTop + availableHeight + console.dir(availableHeight) + + // const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - 20) + // const endIndex = Math.min(numRows, Math.ceil(scrollBottom / rowHeight) + 20) + + // const items = [] + + // let index = startIndex + // while (index < endIndex) { + // items.push( + //
  • + // {renderRowAtIndex(index)} + //
    • + // ) + // index++ + // } + + return
    + } +} + +const {func, number} = PropTypes +LazyLoader.proptypes = { + // numRows: PropTypes.number.isRequired, + // rowHeight: PropTypes.number.isRequired, + // renderRowAtIndex: PropTypes.func.isRequired, +} + +export default LazyLoader From 36e74fc957429c5859b5c3100e6018d8899a1ace Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 20 Feb 2018 14:07:38 -0800 Subject: [PATCH 02/41] Rename page in header and sidenav --- ui/src/kapacitor/components/KapacitorRules.js | 4 +--- ui/src/side_nav/containers/SideNav.js | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index 11e9d924d..8f880c4d8 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -105,9 +105,7 @@ const PageContents = ({children}) =>
    -

    - Build Alert Rules or Write TICKscripts -

    +

    Manage Alerts

    diff --git a/ui/src/side_nav/containers/SideNav.js b/ui/src/side_nav/containers/SideNav.js index 362a84b6e..cbc3b085e 100644 --- a/ui/src/side_nav/containers/SideNav.js +++ b/ui/src/side_nav/containers/SideNav.js @@ -121,7 +121,7 @@ const SideNav = React.createClass({ History - Create + Manage Alerts From 412dcc229f38fb074dca524bb1ffde762505fc0e Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 20 Feb 2018 14:11:07 -0800 Subject: [PATCH 03/41] Show both alert rules and tick scripts in tasks table --- ui/src/kapacitor/components/KapacitorRules.js | 22 ++++++---- .../components/KapacitorRulesTable.js | 42 ++----------------- ui/src/kapacitor/components/TasksTable.js | 16 ++++--- 3 files changed, 24 insertions(+), 56 deletions(-) diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index 8f880c4d8..b68ceb7f4 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -41,17 +41,21 @@ const KapacitorRules = ({ ) } - const rulez = rules.filter(r => r.query) - const tasks = rules.filter(r => !r.query) + const builderRules = rules.filter(r => r.query) - const rHeader = `${rulez.length} Alert Rule${rulez.length === 1 ? '' : 's'}` - const tHeader = `${tasks.length} TICKscript${tasks.length === 1 ? '' : 's'}` + const builderHeader = `${builderRules.length} Alert Rule${builderRules.length === + 1 + ? '' + : 's'}` + const scriptsHeader = `${rules.length} TICKscript${rules.length === 1 + ? '' + : 's'}` return (

    - {rHeader} + {builderHeader}

    @@ -75,12 +79,12 @@ const KapacitorRules = ({

    - {tHeader} + {scriptsHeader}

    Write TICKscript @@ -89,7 +93,7 @@ const KapacitorRules = ({
    diff --git a/ui/src/kapacitor/components/KapacitorRulesTable.js b/ui/src/kapacitor/components/KapacitorRulesTable.js index 9f4dbd655..1749faa86 100644 --- a/ui/src/kapacitor/components/KapacitorRulesTable.js +++ b/ui/src/kapacitor/components/KapacitorRulesTable.js @@ -48,8 +48,10 @@ const handleDelete = (rule, onDelete) => onDelete(rule) const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) => - - + + + {rule.name} + {rule.trigger} @@ -78,12 +80,6 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
    - - Edit TICKscript -
    - - Edit TICKscript -