From c288e500c687e1272554a919a2ea6e19bdc5966d Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Fri, 27 Apr 2018 15:22:01 -0700 Subject: [PATCH] Disable parts of SchemaExplorer in CEO if user-defined temp vars in query Use constants for :dashboardTime:, :upperDashboardTime:, & :interval:. Clarify some fn names. Co-authored-by: Iris Scholten --- .../components/CellEditorOverlay.tsx | 63 +++++++++++++++---- ui/src/dashboards/components/QueryMaker.js | 9 ++- ui/src/dashboards/containers/DashboardPage.js | 11 +++- ui/src/data_explorer/actions/view/index.js | 4 +- .../data_explorer/components/FieldListItem.js | 6 ++ .../components/GroupByTimeDropdown.js | 5 +- ui/src/data_explorer/data/groupByTimes.js | 4 +- ui/src/shared/apis/index.js | 2 +- ui/src/shared/components/AutoRefresh.tsx | 8 ++- .../shared/components/CustomTimeIndicator.js | 4 +- ui/src/shared/components/FieldList.js | 8 +++ ui/src/shared/components/FillQuery.js | 6 +- ui/src/shared/components/MeasurementList.tsx | 10 ++- .../shared/components/MeasurementListItem.tsx | 8 +++ ui/src/shared/components/QueryOptions.js | 8 ++- ui/src/shared/components/SchemaExplorer.js | 10 ++- ui/src/shared/components/TagList.tsx | 9 ++- ui/src/shared/components/TagListItem.tsx | 11 ++++ ui/src/shared/components/TimeShiftDropdown.js | 6 +- ui/src/shared/constants/index.tsx | 9 ++- ui/src/status/containers/StatusPage.js | 8 ++- ui/src/status/fixtures.js | 4 +- ui/src/utils/buildQueriesForLayouts.js | 8 ++- .../components/MeasurementList.test.tsx | 1 + .../components/MeasurementListItem.test.tsx | 1 + ui/test/shared/components/TagList.test.tsx | 1 + 26 files changed, 186 insertions(+), 38 deletions(-) diff --git a/ui/src/dashboards/components/CellEditorOverlay.tsx b/ui/src/dashboards/components/CellEditorOverlay.tsx index 1617474219..130aea3e8b 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.tsx +++ b/ui/src/dashboards/components/CellEditorOverlay.tsx @@ -14,7 +14,7 @@ import * as queryModifiers from 'src/utils/queryTransitions' import defaultQueryConfig from 'src/utils/defaultQueryConfig' import {buildQuery} from 'src/utils/influxql' -import {getQueryConfig} from 'src/shared/apis' +import {getQueryConfigAndStatus} from 'src/shared/apis' import {IS_STATIC_LEGEND} from 'src/shared/constants' import {ColorString, ColorNumber} from 'src/types/colors' import {nextSource} from 'src/dashboards/utils/sources' @@ -25,7 +25,11 @@ import { } from 'src/dashboards/constants' import {OVERLAY_TECHNOLOGY} from 'src/shared/constants/classNames' import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants' -import {AUTO_GROUP_BY} from 'src/shared/constants' +import { + AUTO_GROUP_BY, + PREDEFINED_TEMP_VARS, + TEMP_VAR_DASHBOARD_TIME, +} from 'src/shared/constants' import {getCellTypeColors} from 'src/dashboards/constants/cellEditor' import {TimeRange, Source, Query} from 'src/types' import {Status} from 'src/types/query' @@ -270,7 +274,7 @@ class CellEditorOverlay extends Component { const {cell, thresholdsListColors, gaugeColors, lineColors} = this.props const queries = queriesWorkingDraft.map(q => { - const timeRange = q.range || {upper: null, lower: ':dashboardTime:'} + const timeRange = q.range || {upper: null, lower: TEMP_VAR_DASHBOARD_TIME} return { queryConfig: q, @@ -321,16 +325,53 @@ class CellEditorOverlay extends Component { return _.get(queriesWorkingDraft, activeQueryIndex, queriesWorkingDraft[0]) } + // The schema explorer is not built to handle user defined template variables + // in the query in a clear manner. If they are being used, we indicate that in + // the query config in order to disable the fields column down stream because + // at this point the query string is disconnected from the schema explorer. private handleEditRawText = async (url, id, text) => { - const templates = removeUnselectedTemplateValues(this.props.templates) - - // use this as the handler passed into fetchTimeSeries to update a query status - try { - const {data} = await getQueryConfig(url, [{query: text, id}], templates) - const config = data.queries.find(q => q.id === id) - const nextQueries = this.state.queriesWorkingDraft.map( - q => (q.id === id ? {...config.queryConfig, source: q.source} : q) + const userDefinedTempVarsInQuery = this.props.templates.filter(temp => { + const isPredefinedTempVar = !!PREDEFINED_TEMP_VARS.find( + t => t === temp.tempVar ) + if (!isPredefinedTempVar) { + return text.includes(temp.tempVar) + } + return false + }) + + const isUsingUserDefinedTempVars = !!userDefinedTempVarsInQuery.length + + try { + const selectedTempVars = isUsingUserDefinedTempVars + ? removeUnselectedTemplateValues(userDefinedTempVarsInQuery) + : [] + + const {data} = await getQueryConfigAndStatus( + url, + [{query: text, id}], + selectedTempVars + ) + + const config = data.queries.find(q => q.id === id) + const nextQueries = this.state.queriesWorkingDraft.map(q => { + if (q.id === id) { + const isQuerySupportedByExplorer = !isUsingUserDefinedTempVars + + if (isUsingUserDefinedTempVars) { + return {...q, rawText: text, isQuerySupportedByExplorer} + } + + return { + ...config.queryConfig, + source: q.source, + isQuerySupportedByExplorer, + } + } + + return q + }) + this.setState({queriesWorkingDraft: nextQueries}) } catch (error) { console.error(error) diff --git a/ui/src/dashboards/components/QueryMaker.js b/ui/src/dashboards/components/QueryMaker.js index 0658a4df40..325432d89d 100644 --- a/ui/src/dashboards/components/QueryMaker.js +++ b/ui/src/dashboards/components/QueryMaker.js @@ -1,5 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' +import _ from 'lodash' import EmptyQuery from 'src/shared/components/EmptyQuery' import QueryTabList from 'src/shared/components/QueryTabList' @@ -7,8 +8,9 @@ import QueryTextArea from 'src/dashboards/components/QueryTextArea' import SchemaExplorer from 'src/shared/components/SchemaExplorer' import {buildQuery} from 'utils/influxql' import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants' +import {TEMP_VAR_DASHBOARD_TIME} from 'src/shared/constants' -const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'} +const TEMPLATE_RANGE = {upper: null, lower: TEMP_VAR_DASHBOARD_TIME} const rawTextBinder = (links, id, action) => text => action(links.queries, id, text) const buildText = q => @@ -54,6 +56,11 @@ const QueryMaker = ({ query={activeQuery} onAddQuery={onAddQuery} initialGroupByTime={initialGroupByTime} + isQuerySupportedByExplorer={_.get( + activeQuery, + 'isQuerySupportedByExplorer', + true + )} /> ) : ( diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index e8153319bd..aee57c1187 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/ui/src/dashboards/containers/DashboardPage.js @@ -36,7 +36,12 @@ import { templateControlBarVisibilityToggled as templateControlBarVisibilityToggledAction, } from 'shared/actions/app' import {presentationButtonDispatcher} from 'shared/dispatchers' -import {interval, DASHBOARD_LAYOUT_ROW_HEIGHT} from 'shared/constants' +import { + interval, + DASHBOARD_LAYOUT_ROW_HEIGHT, + TEMP_VAR_DASHBOARD_TIME, + TEMP_VAR_UPPER_DASHBOARD_TIME, +} from 'shared/constants' import {notifyDashboardNotFound} from 'shared/copy/notifications' import {colorsStringSchema, colorsNumberSchema} from 'shared/schemas' import {ErrorHandling} from 'src/shared/decorators/errors' @@ -321,7 +326,7 @@ class DashboardPage extends Component { const dashboardTime = { id: 'dashtime', - tempVar: ':dashboardTime:', + tempVar: TEMP_VAR_DASHBOARD_TIME, type: lowerType, values: [ { @@ -334,7 +339,7 @@ class DashboardPage extends Component { const upperDashboardTime = { id: 'upperdashtime', - tempVar: ':upperDashboardTime:', + tempVar: TEMP_VAR_UPPER_DASHBOARD_TIME, type: upperType, values: [ { diff --git a/ui/src/data_explorer/actions/view/index.js b/ui/src/data_explorer/actions/view/index.js index 8e6f1a46a5..a0071e9fe9 100644 --- a/ui/src/data_explorer/actions/view/index.js +++ b/ui/src/data_explorer/actions/view/index.js @@ -1,6 +1,6 @@ import uuid from 'uuid' -import {getQueryConfig} from 'shared/apis' +import {getQueryConfigAndStatus} from 'shared/apis' import {errorThrown} from 'shared/actions/errors' @@ -158,7 +158,7 @@ export const timeShift = (queryID, shift) => ({ // Async actions export const editRawTextAsync = (url, id, text) => async dispatch => { try { - const {data} = await getQueryConfig(url, [{query: text, id}]) + const {data} = await getQueryConfigAndStatus(url, [{query: text, id}]) const config = data.queries.find(q => q.id === id) dispatch(updateQueryConfig(config.queryConfig)) } catch (error) { diff --git a/ui/src/data_explorer/components/FieldListItem.js b/ui/src/data_explorer/components/FieldListItem.js index bfe67dd701..bdf550e5de 100644 --- a/ui/src/data_explorer/components/FieldListItem.js +++ b/ui/src/data_explorer/components/FieldListItem.js @@ -20,6 +20,11 @@ class FieldListItem extends Component { if (e) { e.stopPropagation() } + const {isDisabled} = this.props + if (isDisabled) { + return + } + this.setState({isOpen: !this.state.isOpen}) } @@ -139,5 +144,6 @@ FieldListItem.propTypes = { onApplyFuncsToField: func.isRequired, isKapacitorRule: bool.isRequired, funcs: arrayOf(string.isRequired).isRequired, + isDisabled: bool, } export default FieldListItem diff --git a/ui/src/data_explorer/components/GroupByTimeDropdown.js b/ui/src/data_explorer/components/GroupByTimeDropdown.js index 3bc0614dee..60e0bf7f75 100644 --- a/ui/src/data_explorer/components/GroupByTimeDropdown.js +++ b/ui/src/data_explorer/components/GroupByTimeDropdown.js @@ -19,6 +19,7 @@ const GroupByTimeDropdown = ({ selected, onChooseGroupByTime, location: {pathname}, + isDisabled, }) => (
@@ -32,11 +33,12 @@ const GroupByTimeDropdown = ({ }))} onChoose={onChooseGroupByTime} selected={selected || 'Time'} + disabled={isDisabled} />
) -const {func, string, shape} = PropTypes +const {bool, func, string, shape} = PropTypes GroupByTimeDropdown.propTypes = { location: shape({ @@ -44,6 +46,7 @@ GroupByTimeDropdown.propTypes = { }).isRequired, selected: string, onChooseGroupByTime: func.isRequired, + isDisabled: bool, } export default withRouter(GroupByTimeDropdown) diff --git a/ui/src/data_explorer/data/groupByTimes.js b/ui/src/data_explorer/data/groupByTimes.js index 7f6d891aaf..694d0b6e1e 100644 --- a/ui/src/data_explorer/data/groupByTimes.js +++ b/ui/src/data_explorer/data/groupByTimes.js @@ -1,5 +1,7 @@ +import {TEMP_VAR_INTERVAL} from 'src/shared/constants' + const groupByTimes = [ - {defaultTimeBound: ':interval:', seconds: 604800, menuOption: 'auto'}, + {defaultTimeBound: TEMP_VAR_INTERVAL, seconds: 604800, menuOption: 'auto'}, {defaultTimeBound: 'now() - 5m', seconds: 10, menuOption: '10s'}, {defaultTimeBound: 'now() - 15m', seconds: 60, menuOption: '1m'}, {defaultTimeBound: 'now() - 1h', seconds: 300, menuOption: '5m'}, diff --git a/ui/src/shared/apis/index.js b/ui/src/shared/apis/index.js index 3620097f82..d0b3697a39 100644 --- a/ui/src/shared/apis/index.js +++ b/ui/src/shared/apis/index.js @@ -231,7 +231,7 @@ export function kapacitorProxy(kapacitor, method, path, body) { }) } -export const getQueryConfig = (url, queries, tempVars) => +export const getQueryConfigAndStatus = (url, queries, tempVars) => AJAX({ url, method: 'POST', diff --git a/ui/src/shared/components/AutoRefresh.tsx b/ui/src/shared/components/AutoRefresh.tsx index b1df696c09..c02f80d153 100644 --- a/ui/src/shared/components/AutoRefresh.tsx +++ b/ui/src/shared/components/AutoRefresh.tsx @@ -1,7 +1,7 @@ import React, {Component, ComponentClass} from 'react' import _ from 'lodash' -import {getQueryConfig} from 'src/shared/apis' +import {getQueryConfigAndStatus} from 'src/shared/apis' import {fetchTimeSeries} from 'src/shared/apis/query' import {DEFAULT_TIME_SERIES} from 'src/shared/constants/series' import {TimeSeriesServerResponse, TimeSeriesResponse} from 'src/types/series' @@ -265,7 +265,11 @@ const AutoRefresh = ( const host = _.isArray(q.host) ? q.host[0] : q.host const url = host.replace('proxy', 'queries') const text = q.text - const {data} = await getQueryConfig(url, [{query: text}], templates) + const {data} = await getQueryConfigAndStatus( + url, + [{query: text}], + templates + ) return data.queries[0].queryAST }) ) diff --git a/ui/src/shared/components/CustomTimeIndicator.js b/ui/src/shared/components/CustomTimeIndicator.js index fbbee76ee4..92609fe712 100644 --- a/ui/src/shared/components/CustomTimeIndicator.js +++ b/ui/src/shared/components/CustomTimeIndicator.js @@ -2,8 +2,10 @@ import React from 'react' import PropTypes from 'prop-types' import _ from 'lodash' +import {TEMP_VAR_DASHBOARD_TIME} from 'src/shared/constants' + const CustomTimeIndicator = ({queries}) => { - const q = queries.find(({query}) => !query.includes(':dashboardTime:')) + const q = queries.find(({query}) => !query.includes(TEMP_VAR_DASHBOARD_TIME)) const customLower = _.get(q, ['queryConfig', 'range', 'lower'], null) const customUpper = _.get(q, ['queryConfig', 'range', 'upper'], null) diff --git a/ui/src/shared/components/FieldList.js b/ui/src/shared/components/FieldList.js index b7fc0e1073..6ae6195f58 100644 --- a/ui/src/shared/components/FieldList.js +++ b/ui/src/shared/components/FieldList.js @@ -73,8 +73,12 @@ class FieldList extends Component { addInitialField, initialGroupByTime: time, isKapacitorRule, + isQuerySupportedByExplorer, } = this.props const {fields, groupBy} = query + if (!isQuerySupportedByExplorer) { + return + } const initialGroupBy = {...groupBy, time} if (!_.size(fields)) { @@ -141,6 +145,7 @@ class FieldList extends Component { render() { const { query: {database, measurement, fields = [], groupBy, fill, shifts}, + isQuerySupportedByExplorer, isKapacitorRule, } = this.props @@ -160,6 +165,7 @@ class FieldList extends Component { isKapacitorRule={isKapacitorRule} onTimeShift={this.handleTimeShift} onGroupByTime={this.handleGroupByTime} + isDisabled={!isQuerySupportedByExplorer} /> ) : null} @@ -192,6 +198,7 @@ class FieldList extends Component { fieldFuncs={fieldFuncs} funcs={functionNames(funcs)} isKapacitorRule={isKapacitorRule} + isDisabled={!isQuerySupportedByExplorer} /> ) })} @@ -245,6 +252,7 @@ FieldList.propTypes = { removeFuncs: func.isRequired, addInitialField: func, initialGroupByTime: string, + isQuerySupportedByExplorer: bool, } export default FieldList diff --git a/ui/src/shared/components/FillQuery.js b/ui/src/shared/components/FillQuery.js index 7a1385636f..46c9ad528f 100644 --- a/ui/src/shared/components/FillQuery.js +++ b/ui/src/shared/components/FillQuery.js @@ -86,7 +86,7 @@ class FillQuery extends Component { } render() { - const {size, theme} = this.props + const {size, theme, isDisabled} = this.props const {selected, currentNumberValue} = this.state return ( @@ -114,6 +114,7 @@ class FillQuery extends Component { buttonColor="btn-info" menuClass={`dropdown-${this.getColor(theme)}`} onChoose={this.handleDropdown} + disabled={isDisabled} /> @@ -121,7 +122,7 @@ class FillQuery extends Component { } } -const {func, string} = PropTypes +const {bool, func, string} = PropTypes FillQuery.defaultProps = { size: 'sm', @@ -134,6 +135,7 @@ FillQuery.propTypes = { value: string, size: string, theme: string, + isDisabled: bool, } export default FillQuery diff --git a/ui/src/shared/components/MeasurementList.tsx b/ui/src/shared/components/MeasurementList.tsx index e2d63cbf7a..a5682e0fa7 100644 --- a/ui/src/shared/components/MeasurementList.tsx +++ b/ui/src/shared/components/MeasurementList.tsx @@ -19,6 +19,7 @@ interface Props { onChooseTag: () => void onGroupByTag: () => void onToggleTagAcceptance: () => void + isQuerySupportedByExplorer: boolean onChooseMeasurement: (measurement: string) => void } @@ -117,7 +118,13 @@ class MeasurementList extends PureComponent { } public render() { - const {query, querySource, onChooseTag, onGroupByTag} = this.props + const { + query, + querySource, + onChooseTag, + onGroupByTag, + isQuerySupportedByExplorer, + } = this.props const {database, areTagsAccepted} = query const {filtered} = this.state @@ -147,6 +154,7 @@ class MeasurementList extends PureComponent { areTagsAccepted={areTagsAccepted} onAcceptReject={this.handleAcceptReject} isActive={measurement === query.measurement} + isQuerySupportedByExplorer={isQuerySupportedByExplorer} numTagsActive={Object.keys(query.tags).length} onChooseMeasurement={this.handleChoosemeasurement} /> diff --git a/ui/src/shared/components/MeasurementListItem.tsx b/ui/src/shared/components/MeasurementListItem.tsx index 3c410e0c12..3ed68d626f 100644 --- a/ui/src/shared/components/MeasurementListItem.tsx +++ b/ui/src/shared/components/MeasurementListItem.tsx @@ -38,6 +38,7 @@ interface Props { onChooseTag: () => void onGroupByTag: () => void onAcceptReject: () => void + isQuerySupportedByExplorer: boolean onChooseMeasurement: (measurement: string) => () => void } @@ -62,6 +63,7 @@ class MeasurementListItem extends PureComponent { onGroupByTag, numTagsActive, areTagsAccepted, + isQuerySupportedByExplorer, } = this.props return ( @@ -96,6 +98,7 @@ class MeasurementListItem extends PureComponent { querySource={querySource} onChooseTag={onChooseTag} onGroupByTag={onGroupByTag} + isQuerySupportedByExplorer={isQuerySupportedByExplorer} /> )} @@ -105,6 +108,11 @@ class MeasurementListItem extends PureComponent { private handleAcceptReject = (e: MouseEvent) => { e.stopPropagation() + const {isQuerySupportedByExplorer} = this.props + if (!isQuerySupportedByExplorer) { + return + } + const {onAcceptReject} = this.props onAcceptReject() } diff --git a/ui/src/shared/components/QueryOptions.js b/ui/src/shared/components/QueryOptions.js index 3dd4e8a058..9695fc71c6 100644 --- a/ui/src/shared/components/QueryOptions.js +++ b/ui/src/shared/components/QueryOptions.js @@ -12,19 +12,24 @@ const QueryOptions = ({ onTimeShift, onGroupByTime, isKapacitorRule, + isDisabled, }) => (
{isKapacitorRule ? null : ( )} - {isKapacitorRule ? null : } + {isKapacitorRule ? null : ( + + )}
) @@ -42,6 +47,7 @@ QueryOptions.propTypes = { onGroupByTime: func.isRequired, isKapacitorRule: bool.isRequired, onTimeShift: func.isRequired, + isDisabled: bool, } export default QueryOptions diff --git a/ui/src/shared/components/SchemaExplorer.js b/ui/src/shared/components/SchemaExplorer.js index 4919716eec..2deccb1b35 100644 --- a/ui/src/shared/components/SchemaExplorer.js +++ b/ui/src/shared/components/SchemaExplorer.js @@ -12,6 +12,7 @@ const SchemaExplorer = ({ query: {id}, source, initialGroupByTime, + isQuerySupportedByExplorer, actions: { fill, timeShift, @@ -41,6 +42,7 @@ const SchemaExplorer = ({ onGroupByTag={actionBinder(id, groupByTag)} onChooseMeasurement={actionBinder(id, chooseMeasurement)} onToggleTagAcceptance={actionBinder(id, toggleTagAcceptance)} + isQuerySupportedByExplorer={isQuerySupportedByExplorer} /> ) -const {func, shape, string} = PropTypes +const {bool, func, shape, string} = PropTypes + +SchemaExplorer.defaultProps = { + isQuerySupportedByExplorer: true, +} SchemaExplorer.propTypes = { query: shape({ @@ -80,6 +87,7 @@ SchemaExplorer.propTypes = { }).isRequired, source: shape({}), initialGroupByTime: string.isRequired, + isQuerySupportedByExplorer: bool, } export default SchemaExplorer diff --git a/ui/src/shared/components/TagList.tsx b/ui/src/shared/components/TagList.tsx index a4e9905045..f5c4bd3147 100644 --- a/ui/src/shared/components/TagList.tsx +++ b/ui/src/shared/components/TagList.tsx @@ -40,6 +40,7 @@ interface Props { querySource: Source onChooseTag: () => void onGroupByTag: () => void + isQuerySupportedByExplorer: boolean } interface State { @@ -129,7 +130,12 @@ class TagList extends PureComponent { } public render() { - const {query, onChooseTag, onGroupByTag} = this.props + const { + query, + onChooseTag, + onGroupByTag, + isQuerySupportedByExplorer, + } = this.props return (
@@ -142,6 +148,7 @@ class TagList extends PureComponent { onGroupByTag={onGroupByTag} selectedTagValues={query.tags[tagKey] || []} isUsingGroupBy={query.groupBy.tags.indexOf(tagKey) > -1} + isQuerySupportedByExplorer={isQuerySupportedByExplorer} /> ))}
diff --git a/ui/src/shared/components/TagListItem.tsx b/ui/src/shared/components/TagListItem.tsx index 0ba7c1fb6b..c219e9bf8f 100644 --- a/ui/src/shared/components/TagListItem.tsx +++ b/ui/src/shared/components/TagListItem.tsx @@ -14,6 +14,7 @@ interface Props { selectedTagValues: string[] isUsingGroupBy?: boolean onChooseTag: (tag: Tag) => void + isQuerySupportedByExplorer: boolean onGroupByTag: (tagKey: string) => void } @@ -36,10 +37,16 @@ class TagListItem extends PureComponent { this.handleGroupBy = this.handleGroupBy.bind(this) this.handleClickKey = this.handleClickKey.bind(this) this.handleFilterText = this.handleFilterText.bind(this) + this.handleInputClick = this.handleInputClick.bind(this) } public handleChoose(tagValue: string, e: MouseEvent) { e.stopPropagation() + + const {isQuerySupportedByExplorer} = this.props + if (!isQuerySupportedByExplorer) { + return + } this.props.onChooseTag({key: this.props.tagKey, value: tagValue}) } @@ -67,7 +74,11 @@ class TagListItem extends PureComponent { } public handleGroupBy(e) { + const {isQuerySupportedByExplorer} = this.props e.stopPropagation() + if (!isQuerySupportedByExplorer) { + return + } this.props.onGroupByTag(this.props.tagKey) } diff --git a/ui/src/shared/components/TimeShiftDropdown.js b/ui/src/shared/components/TimeShiftDropdown.js index d4161186bd..e7ebb9a84d 100644 --- a/ui/src/shared/components/TimeShiftDropdown.js +++ b/ui/src/shared/components/TimeShiftDropdown.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types' import Dropdown from 'shared/components/Dropdown' import {TIME_SHIFTS} from 'shared/constants/timeShift' -const TimeShiftDropdown = ({selected, onChooseTimeShift}) => ( +const TimeShiftDropdown = ({selected, onChooseTimeShift, isDisabled}) => (
( items={TIME_SHIFTS} onChoose={onChooseTimeShift} selected={selected || 'none'} + disabled={isDisabled} />
) -const {func, string} = PropTypes +const {bool, func, string} = PropTypes TimeShiftDropdown.propTypes = { selected: string, onChooseTimeShift: func.isRequired, + isDisabled: bool, } export default TimeShiftDropdown diff --git a/ui/src/shared/constants/index.tsx b/ui/src/shared/constants/index.tsx index ff303623f9..26acce1c77 100644 --- a/ui/src/shared/constants/index.tsx +++ b/ui/src/shared/constants/index.tsx @@ -410,6 +410,13 @@ export const VIS_VIEWS = [GRAPH, TABLE] // InfluxQL Macros export const TEMP_VAR_INTERVAL = ':interval:' +export const TEMP_VAR_DASHBOARD_TIME = ':dashboardTime:' +export const TEMP_VAR_UPPER_DASHBOARD_TIME = ':upperDashboardTime:' +export const PREDEFINED_TEMP_VARS = [ + TEMP_VAR_INTERVAL, + TEMP_VAR_DASHBOARD_TIME, + TEMP_VAR_UPPER_DASHBOARD_TIME, +] export const INITIAL_GROUP_BY_TIME = '10s' export const AUTO_GROUP_BY = 'auto' @@ -443,7 +450,7 @@ export const intervalValuesPoints = [ export const interval = { id: 'interval', type: 'autoGroupBy', - tempVar: ':interval:', + tempVar: TEMP_VAR_INTERVAL, label: 'automatically determine the best group by time', values: intervalValuesPoints, } diff --git a/ui/src/status/containers/StatusPage.js b/ui/src/status/containers/StatusPage.js index 19bd421c85..157e7a6581 100644 --- a/ui/src/status/containers/StatusPage.js +++ b/ui/src/status/containers/StatusPage.js @@ -8,6 +8,10 @@ import LayoutRenderer from 'shared/components/LayoutRenderer' import {fixtureStatusPageCells} from 'src/status/fixtures' import {ErrorHandling} from 'src/shared/decorators/errors' +import { + TEMP_VAR_DASHBOARD_TIME, + TEMP_VAR_UPPER_DASHBOARD_TIME, +} from 'src/shared/constants' @ErrorHandling class StatusPage extends Component { @@ -25,7 +29,7 @@ class StatusPage extends Component { const dashboardTime = { id: 'dashtime', - tempVar: ':dashboardTime:', + tempVar: TEMP_VAR_DASHBOARD_TIME, type: 'constant', values: [ { @@ -38,7 +42,7 @@ class StatusPage extends Component { const upperDashboardTime = { id: 'upperdashtime', - tempVar: ':upperDashboardTime:', + tempVar: TEMP_VAR_UPPER_DASHBOARD_TIME, type: 'constant', values: [ { diff --git a/ui/src/status/fixtures.js b/ui/src/status/fixtures.js index 3e96f036f0..67bdcbf92d 100644 --- a/ui/src/status/fixtures.js +++ b/ui/src/status/fixtures.js @@ -1,4 +1,5 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes' +import {TEMP_VAR_DASHBOARD_TIME} from 'src/shared/constants' export const fixtureStatusPageCells = [ { @@ -13,8 +14,7 @@ export const fixtureStatusPageCells = [ colors: DEFAULT_LINE_COLORS, queries: [ { - query: - 'SELECT count("value") AS "count_value" FROM "chronograf"."autogen"."alerts" WHERE time > :dashboardTime: GROUP BY time(1d)', + query: `SELECT count("value") AS "count_value" FROM "chronograf"."autogen"."alerts" WHERE time > ${TEMP_VAR_DASHBOARD_TIME} GROUP BY time(1d)`, label: 'Events', queryConfig: { database: 'chronograf', diff --git a/ui/src/utils/buildQueriesForLayouts.js b/ui/src/utils/buildQueriesForLayouts.js index 43db6af723..91f0af19fe 100644 --- a/ui/src/utils/buildQueriesForLayouts.js +++ b/ui/src/utils/buildQueriesForLayouts.js @@ -1,5 +1,9 @@ import {buildQuery} from 'utils/influxql' import {TYPE_SHIFTED, TYPE_QUERY_CONFIG} from 'src/dashboards/constants' +import { + TEMP_VAR_DASHBOARD_TIME, + TEMP_VAR_UPPER_DASHBOARD_TIME, +} from 'src/shared/constants' import {timeRanges} from 'shared/data/timeRanges' const buildCannedDashboardQuery = (query, {lower, upper}, host) => { @@ -48,8 +52,8 @@ export const buildQueriesForLayouts = (cell, source, timeRange, host) => { queryConfig: {database, measurement, fields, shifts, rawText, range}, } = query const tR = range || { - upper: ':upperDashboardTime:', - lower: ':dashboardTime:', + upper: TEMP_VAR_UPPER_DASHBOARD_TIME, + lower: TEMP_VAR_DASHBOARD_TIME, } queryText = diff --git a/ui/test/shared/components/MeasurementList.test.tsx b/ui/test/shared/components/MeasurementList.test.tsx index 9f604dd624..e1c1bc7523 100644 --- a/ui/test/shared/components/MeasurementList.test.tsx +++ b/ui/test/shared/components/MeasurementList.test.tsx @@ -13,6 +13,7 @@ const setup = (override = {}) => { onToggleTagAcceptance: () => {}, query, querySource: source, + isQuerySupportedByExplorer: true, ...override, } diff --git a/ui/test/shared/components/MeasurementListItem.test.tsx b/ui/test/shared/components/MeasurementListItem.test.tsx index 356bb5e2ff..245482f9f1 100644 --- a/ui/test/shared/components/MeasurementListItem.test.tsx +++ b/ui/test/shared/components/MeasurementListItem.test.tsx @@ -23,6 +23,7 @@ const setup = (overrides = {}) => { measurement: 'test', numTagsActive: 3, areTagsAccepted: true, + isQuerySupportedByExplorer: true, onChooseTag: () => {}, onGroupByTag: () => {}, onAcceptReject: () => {}, diff --git a/ui/test/shared/components/TagList.test.tsx b/ui/test/shared/components/TagList.test.tsx index fa237c2f00..2d5315bbe0 100644 --- a/ui/test/shared/components/TagList.test.tsx +++ b/ui/test/shared/components/TagList.test.tsx @@ -13,6 +13,7 @@ const setup = (override = {}) => { onGroupByTag: () => {}, query, querySource: source, + isQuerySupportedByExplorer: true, ...override, }