From 246857eaddd93c871885bd7ba9dadd15a3556eab Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Fri, 11 Aug 2017 14:38:55 -0700 Subject: [PATCH] Remove template variable logic from DataExplorer --- .../data_explorer/components/QueryEditor.js | 175 +----------------- 1 file changed, 8 insertions(+), 167 deletions(-) diff --git a/ui/src/data_explorer/components/QueryEditor.js b/ui/src/data_explorer/components/QueryEditor.js index 2301895b2..ec296cc24 100644 --- a/ui/src/data_explorer/components/QueryEditor.js +++ b/ui/src/data_explorer/components/QueryEditor.js @@ -1,39 +1,19 @@ import React, {PropTypes, Component} from 'react' -import _ from 'lodash' import Dropdown from 'shared/components/Dropdown' import {QUERY_TEMPLATES} from 'src/data_explorer/constants' import QueryStatus from 'shared/components/QueryStatus' -import { - MATCH_INCOMPLETE_TEMPLATES, - applyMasks, - insertTempVar, - unMask, -} from 'src/dashboards/constants' - class QueryEditor extends Component { constructor(props) { super(props) this.state = { value: this.props.query, - isTemplating: false, - selectedTemplate: { - tempVar: _.get(this.props.templates, ['0', 'tempVar'], ''), - }, - filteredTemplates: this.props.templates, } this.handleKeyDown = ::this.handleKeyDown this.handleChange = ::this.handleChange this.handleUpdate = ::this.handleUpdate - this.handleChooseTemplate = ::this.handleChooseTemplate - this.handleCloseDrawer = ::this.handleCloseDrawer - this.findTempVar = ::this.findTempVar - this.handleTemplateReplace = ::this.handleTemplateReplace - this.handleMouseOverTempVar = ::this.handleMouseOverTempVar - this.handleClickTempVar = ::this.handleClickTempVar - this.closeDrawer = ::this.closeDrawer } componentWillReceiveProps(nextProps) { @@ -42,170 +22,31 @@ class QueryEditor extends Component { } } - handleCloseDrawer() { - this.setState({isTemplating: false}) - } - - handleMouseOverTempVar(template) { - this.handleTemplateReplace(template) - } - - handleClickTempVar(template) { - // Clicking a tempVar does the same thing as hitting 'Enter' - this.handleTemplateReplace(template, true) - this.closeDrawer() - } - - closeDrawer() { - this.setState({ - isTemplating: false, - selectedTemplate: { - tempVar: _.get(this.props.templates, ['0', 'tempVar'], ''), - }, - }) - } - handleKeyDown(e) { - const {isTemplating, value} = this.state + const {value} = this.state - if (isTemplating) { - switch (e.key) { - case 'Tab': - case 'ArrowRight': - case 'ArrowDown': - e.preventDefault() - return this.handleTemplateReplace(this.findTempVar('next')) - case 'ArrowLeft': - case 'ArrowUp': - e.preventDefault() - return this.handleTemplateReplace(this.findTempVar('previous')) - case 'Enter': - e.preventDefault() - this.handleTemplateReplace(this.state.selectedTemplate, true) - return this.closeDrawer() - case 'Escape': - e.preventDefault() - return this.closeDrawer() - } - } else if (e.key === 'Escape') { + if (e.key === 'Escape') { e.preventDefault() - this.setState({value, isTemplating: false}) - } else if (e.key === 'Enter') { + this.setState({value}) + } + + if (e.key === 'Enter') { e.preventDefault() this.handleUpdate() } } - handleTemplateReplace(selectedTemplate, replaceWholeTemplate) { - const {selectionStart, value} = this.editor - const {tempVar} = selectedTemplate - const newTempVar = replaceWholeTemplate - ? tempVar - : tempVar.substring(0, tempVar.length - 1) - - // mask matches that will confuse our regex - const masked = applyMasks(value) - const matched = masked.match(MATCH_INCOMPLETE_TEMPLATES) - - let templatedValue - if (matched) { - templatedValue = insertTempVar(masked, newTempVar) - templatedValue = unMask(templatedValue) - } - - const enterModifier = replaceWholeTemplate ? 0 : -1 - const diffInLength = - tempVar.length - _.get(matched, '0', []).length + enterModifier - - this.setState({value: templatedValue, selectedTemplate}, () => - this.editor.setSelectionRange( - selectionStart + diffInLength, - selectionStart + diffInLength - ) - ) - } - - findTempVar(direction) { - const {filteredTemplates: templates} = this.state - const {selectedTemplate} = this.state - - const i = _.findIndex(templates, selectedTemplate) - const lastIndex = templates.length - 1 - - if (i >= 0) { - if (direction === 'next') { - return templates[(i + 1) % templates.length] - } - - if (direction === 'previous') { - if (i === 0) { - return templates[lastIndex] - } - - return templates[i - 1] - } - } - - return templates[0] - } - handleChange() { - const {templates} = this.props - const {selectedTemplate} = this.state - const value = this.editor.value - - // mask matches that will confuse our regex - const masked = applyMasks(value) - const matched = masked.match(MATCH_INCOMPLETE_TEMPLATES) - - if (matched && !_.isEmpty(templates)) { - // maintain cursor poition - const start = this.editor.selectionStart - - const end = this.editor.selectionEnd - const filterText = matched[0].substr(1).toLowerCase() - - const filteredTemplates = templates.filter(t => - t.tempVar.toLowerCase().includes(filterText) - ) - - const found = filteredTemplates.find( - t => t.tempVar === selectedTemplate && selectedTemplate.tempVar - ) - const newTemplate = found ? found : filteredTemplates[0] - - this.setState({ - isTemplating: true, - selectedTemplate: newTemplate, - filteredTemplates, - value, - }) - this.editor.setSelectionRange(start, end) - } else { - this.setState({isTemplating: false, value}) - } + this.setState({value: this.editor.value}) } handleUpdate() { this.props.onUpdate(this.state.value) } - handleChooseTemplate(template) { - this.setState({value: template.query}) - } - - handleSelectTempVar(tempVar) { - this.setState({selectedTemplate: tempVar}) - } - render() { const {config: {status}} = this.props - const { - value, - isTemplating, - selectedTemplate, - filteredTemplates, - } = this.state + const {value} = this.state return (