From eec8e54a2b23c426417c28e25ab85ce0a2a6b2eb Mon Sep 17 00:00:00 2001 From: Jared Scheib Date: Tue, 25 Apr 2017 13:33:52 -0700 Subject: [PATCH] WIP --- ui/src/dashboards/actions/index.js | 38 ------- ui/src/dashboards/apis/index.js | 14 ++- .../components/TemplateVariableManager.js | 105 +++++++++++++++++- .../components/TemplateVariableRow.js | 74 ++++++++++-- .../components/TemplateVariableTable.js | 19 +++- ui/src/dashboards/containers/DashboardPage.js | 10 +- ui/src/shared/parsing/showFieldKeys.js | 4 +- 7 files changed, 197 insertions(+), 67 deletions(-) diff --git a/ui/src/dashboards/actions/index.js b/ui/src/dashboards/actions/index.js index c2b308a67..de738f6ce 100644 --- a/ui/src/dashboards/actions/index.js +++ b/ui/src/dashboards/actions/index.js @@ -6,15 +6,12 @@ import { addDashboardCell as addDashboardCellAJAX, deleteDashboardCell as deleteDashboardCellAJAX, editTemplateVariable as editTemplateVariableAJAX, - runTemplateVariableQuery as runTemplateVariableQueryAJAX, } from 'src/dashboards/apis' import {publishNotification} from 'shared/actions/notifications' import {publishAutoDismissingNotification} from 'shared/dispatchers' // import {errorThrown} from 'shared/actions/errors' -import parsers from 'shared/parsing' - import {NEW_DEFAULT_DASHBOARD_CELL} from 'src/dashboards/constants' import {TEMPLATE_VARIABLE_SELECTED} from 'shared/constants/actionTypes' @@ -135,14 +132,6 @@ export const editTemplateVariableSuccess = (dashboardID, data) => ({ }, }) -export const runTemplateVariableQuerySuccess = (templateVariable, values) => ({ - type: 'RUN_TEMPLATE_VARIABLE_QUERY_SUCCESS', - payload: { - templateVariable, - values, - }, -}) - // Async Action Creators export const getDashboardsAsync = () => async dispatch => { @@ -229,30 +218,3 @@ export const editTemplateVariableAsync = ( // dispatch(editTemplateVariableFailed()) } } - -export const runTemplateVariableQueryAsync = ( - templateVariable, - {source, query, database, rp, tempVars, type, measurement, tagKey} -) => async dispatch => { - // dispatch(runTemplateVariableQueryRequested()) - try { - const {data} = await runTemplateVariableQueryAJAX({ - source, - query, - db: database, - rp, - tempVars, - }) - const parsedData = parsers[type](data, tagKey || measurement) // tagKey covers tagKey and fieldKey - if (parsedData.errors.length) { - throw parsedData.errors - } - dispatch( - runTemplateVariableQuerySuccess(templateVariable, parsedData[type]) - ) - } catch (error) { - console.error(error) - // dispatch(errorThrown(error)) - // dispatch(runTemplateVariableQueryFailed()) - } -} diff --git a/ui/src/dashboards/apis/index.js b/ui/src/dashboards/apis/index.js index cf3452e02..80f23d934 100644 --- a/ui/src/dashboards/apis/index.js +++ b/ui/src/dashboards/apis/index.js @@ -90,13 +90,15 @@ export const editTemplateVariable = async ( } } -export const runTemplateVariableQuery = async ({ +export const runTemplateVariableQuery = async ( source, - query, - db, - // rp, TODO - tempVars, -}) => { + { + query, + db, + // rp, TODO + tempVars, + } +) => { try { // TODO: add rp as argument to proxy return await proxy({source: source.links.proxy, query, db, tempVars}) diff --git a/ui/src/dashboards/components/TemplateVariableManager.js b/ui/src/dashboards/components/TemplateVariableManager.js index 900451efd..7950dd083 100644 --- a/ui/src/dashboards/components/TemplateVariableManager.js +++ b/ui/src/dashboards/components/TemplateVariableManager.js @@ -1,4 +1,4 @@ -import React, {PropTypes} from 'react' +import React, {Component, PropTypes} from 'react' import OnClickOutside from 'react-onclickoutside' import TemplateVariableTable from 'src/dashboards/components/TemplateVariableTable' @@ -6,8 +6,10 @@ import TemplateVariableTable const TemplateVariableManager = ({ onClose, onEditTemplateVariables, - onRunTemplateVariableQuery, + source, templates, + onRunQuerySuccess, + onRunQueryFailure, }) => (
@@ -19,7 +21,8 @@ const TemplateVariableManager = ({
) +class TemplateVariableManagerWrapper extends Component { + constructor(props) { + super(props) + + this.state = { + rows: this.props.templates, + } + + this.onRunQuerySuccess = ::this.onRunQuerySuccess + } + + onRunQuerySuccess(template, queryConfig, parsedData, {tempVar, label}) { + const {rows} = this.state + const {id} = template + const { + type, + query: influxql, + database: db, + measurement, + tagKey, + } = queryConfig + + // Determine which is the selectedValue, if any + const currentRow = rows.find(row => row.tempVar === tempVar) + + let selectedValue + if (currentRow && currentRow.values && currentRow.values.length) { + selectedValue = currentRow.values.find(val => val.selected).value + } + + if ( + !selectedValue && + currentRow && + currentRow.values && + currentRow.values.length + ) { + selectedValue = currentRow.values[0].value + } + + const values = parsedData.map(value => ({ + value, + type, + selected: selectedValue === value, + })) + + const templateVariable = { + tempVar, + values, + id, + type, + label, + query: { + influxql, + db, + // rp, TODO + measurement, + tagKey, + }, + } + + const newRows = rows.map(r => (r.id === template.id ? templateVariable : r)) + + console.log(newRows) + + this.setState({rows: newRows}) + } + + render() { + return ( + + ) + } +} + const {arrayOf, bool, func, shape, string} = PropTypes TemplateVariableManager.propTypes = { + ...TemplateVariableManagerWrapper.propTypes, + onRunQuerySuccess: func.isRequired, +} + +TemplateVariableManagerWrapper.propTypes = { onClose: func.isRequired, onEditTemplateVariables: func.isRequired, - onRunTemplateVariableQuery: func.isRequired, + source: shape({ + links: shape({ + proxy: string, + }), + }).isRequired, templates: arrayOf( shape({ type: string.isRequired, @@ -61,6 +153,7 @@ TemplateVariableManager.propTypes = { ).isRequired, }) ), + onRunQueryFailure: func.isRequired, } -export default OnClickOutside(TemplateVariableManager) +export default OnClickOutside(TemplateVariableManagerWrapper) diff --git a/ui/src/dashboards/components/TemplateVariableRow.js b/ui/src/dashboards/components/TemplateVariableRow.js index f69c8a406..ec36e091b 100644 --- a/ui/src/dashboards/components/TemplateVariableRow.js +++ b/ui/src/dashboards/components/TemplateVariableRow.js @@ -4,6 +4,12 @@ import Dropdown from 'shared/components/Dropdown' import TemplateQueryBuilder from 'src/dashboards/components/TemplateQueryBuilder' +import { + runTemplateVariableQuery as runTemplateVariableQueryAJAX, +} from 'src/dashboards/apis' + +import parsers from 'shared/parsing' + import {TEMPLATE_TYPES} from 'src/dashboards/constants' import q from 'src/dashboards/utils/onlyTheBigliestBigLeagueTemplateVariableQueryGenerator' @@ -69,7 +75,9 @@ const TemplateVariableRow = ({ />
- {values.map(({value}) => value).join(', ')} + {values.length + ? values.map(({value}) => value).join(', ') + : '(Query returned no values)'}
{isEditing @@ -127,28 +135,35 @@ class RowWrapper extends Component { autoFocusTarget: null, } - this.handleRunQuery = ::this.handleRunQuery + this.handleRunQueryRequested = ::this.handleRunQueryRequested this.handleSelectType = ::this.handleSelectType this.handleSelectDatabase = ::this.handleSelectDatabase this.handleSelectMeasurement = ::this.handleSelectMeasurement this.handleSelectTagKey = ::this.handleSelectTagKey this.handleStartEdit = ::this.handleStartEdit this.handleCancelEdit = ::this.handleCancelEdit + this.runTemplateVariableQuery = ::this.runTemplateVariableQuery } - handleRunQuery({ + handleRunQueryRequested({ selectedDatabase: database, selectedMeasurement: measurement, selectedTagKey: tagKey, selectedType: type, }) { - return e => { + return async e => { e.preventDefault() const label = e.target.label.value const tempVar = e.target.tempVar.value - const {template, onRunTemplateVariableQuery} = this.props + const { + source, + template, + onRunQuerySuccess, + onRunQueryFailure, + } = this.props + const {query, tempVars} = q({ type, label, @@ -161,7 +176,7 @@ class RowWrapper extends Component { }, }) - onRunTemplateVariableQuery(template, { + const queryConfig = { query, database, // rp: TODO @@ -169,9 +184,17 @@ class RowWrapper extends Component { type, measurement, tagKey, - }) - - // TODO: save values to state in TVM, using template + } + console.log('bob', this.runTemplateVariableQuery) + try { + const parsedData = await this.runTemplateVariableQuery( + source, + queryConfig + ) + onRunQuerySuccess(template, queryConfig, parsedData, {tempVar, label}) + } catch (error) { + onRunQueryFailure(error) + } } } @@ -215,6 +238,29 @@ class RowWrapper extends Component { this.setState({selectedTagKey: item.text}) } + async runTemplateVariableQuery( + source, + {query, database, rp, tempVars, type, measurement, tagKey} + ) { + try { + const {data} = await runTemplateVariableQueryAJAX(source, { + query, + db: database, + rp, + tempVars, + }) + const parsedData = parsers[type](data, tagKey || measurement) // tagKey covers tagKey and fieldKey + if (parsedData.errors.length) { + throw parsedData.errors + } + + return parsedData[type] + } catch (error) { + console.error(error) + throw error + } + } + render() { const { isEditing, @@ -240,7 +286,7 @@ class RowWrapper extends Component { onStartEdit={this.handleStartEdit} onCancelEdit={this.handleCancelEdit} autoFocusTarget={autoFocusTarget} - onSubmit={this.handleRunQuery} + onSubmit={this.handleRunQueryRequested} /> ) } @@ -249,6 +295,11 @@ class RowWrapper extends Component { const {arrayOf, bool, func, shape, string} = PropTypes RowWrapper.propTypes = { + source: shape({ + links: shape({ + proxy: string, + }), + }).isRequired, template: shape({ type: string.isRequired, label: string.isRequired, @@ -270,7 +321,8 @@ RowWrapper.propTypes = { self: string.isRequired, }).isRequired, }), - onRunTemplateVariableQuery: func.isRequired, + onRunQuerySuccess: func.isRequired, + onRunQueryFailure: func.isRequired, } TemplateVariableRow.propTypes = { diff --git a/ui/src/dashboards/components/TemplateVariableTable.js b/ui/src/dashboards/components/TemplateVariableTable.js index 711f6384b..e1ccf0c0d 100644 --- a/ui/src/dashboards/components/TemplateVariableTable.js +++ b/ui/src/dashboards/components/TemplateVariableTable.js @@ -2,7 +2,12 @@ import React, {PropTypes} from 'react' import TemplateVariableRow from 'src/dashboards/components/TemplateVariableRow' -const TemplateVariableTable = ({templates, onRunTemplateVariableQuery}) => ( +const TemplateVariableTable = ({ + source, + templates, + onRunQuerySuccess, + onRunQueryFailure, +}) => (
@@ -18,8 +23,10 @@ const TemplateVariableTable = ({templates, onRunTemplateVariableQuery}) => ( {templates.map(t => ( ))}
@@ -29,6 +36,11 @@ const TemplateVariableTable = ({templates, onRunTemplateVariableQuery}) => ( const {arrayOf, bool, func, shape, string} = PropTypes TemplateVariableTable.propTypes = { + source: shape({ + links: shape({ + proxy: string, + }), + }).isRequired, templates: arrayOf( shape({ type: string.isRequired, @@ -47,7 +59,8 @@ TemplateVariableTable.propTypes = { ).isRequired, }) ), - onRunTemplateVariableQuery: func.isRequired, + onRunQuerySuccess: func.isRequired, + onRunQueryFailure: func.isRequired, } export default TemplateVariableTable diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index fc8b949c5..7c17f2901 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/ui/src/dashboards/containers/DashboardPage.js @@ -45,6 +45,7 @@ class DashboardPage extends Component { this.handleRunTemplateVariableQuery = ::this.handleRunTemplateVariableQuery this.handleSelectTemplate = ::this.handleSelectTemplate this.handleEditTemplateVariables = ::this.handleEditTemplateVariables + this.handleRunQueryFailure = ::this.handleRunQueryFailure } componentDidMount() { @@ -185,6 +186,11 @@ class DashboardPage extends Component { // console.log('hello') } + handleRunQueryFailure(error) { + console.error(error) + // this.props.errorThrown(error) + } + getActiveDashboard() { const {params: {dashboardID}, dashboards} = this.props return dashboards.find(d => d.id === +dashboardID) @@ -214,10 +220,11 @@ class DashboardPage extends Component { ? : null} @@ -368,6 +375,7 @@ const mapDispatchToProps = dispatch => ({ handleChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch), handleClickPresentationButton: presentationButtonDispatcher(dispatch), dashboardActions: bindActionCreators(dashboardActionCreators, dispatch), + // errorThrown: bindActionCreators(errorThrownAction, dispatch), }) export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage) diff --git a/ui/src/shared/parsing/showFieldKeys.js b/ui/src/shared/parsing/showFieldKeys.js index 25f5c6abb..2c6915365 100644 --- a/ui/src/shared/parsing/showFieldKeys.js +++ b/ui/src/shared/parsing/showFieldKeys.js @@ -2,7 +2,7 @@ export default function parseShowFieldKeys(response) { const errors = [] const fieldSets = {} - response.results.forEach((result) => { + response.results.forEach(result => { if (result.error) { errors.push(result.error) return @@ -14,7 +14,7 @@ export default function parseShowFieldKeys(response) { const series = result.series[0] const fieldKeyIndex = series.columns.indexOf('fieldKey') - const fields = series.values.map((value) => { + const fields = series.values.map(value => { return value[fieldKeyIndex] }) const measurement = series.name