From 06dc4e2222ed75afb7cb5cf1bba134c111eb5e2d Mon Sep 17 00:00:00 2001 From: Delmer Date: Thu, 26 Jul 2018 16:28:52 -0400 Subject: [PATCH] Update interval replacement (#4011) Update interval replacement to use replace api --- .../components/CellEditorOverlay.tsx | 34 +++++++------------ ui/src/dashboards/components/QueryMaker.tsx | 18 +++------- ui/src/dashboards/utils/queryMaker.ts | 14 ++++++++ ui/src/data_explorer/apis/index.ts | 13 +++---- ui/src/shared/apis/query.ts | 18 ++++++++-- 5 files changed, 49 insertions(+), 48 deletions(-) create mode 100644 ui/src/dashboards/utils/queryMaker.ts diff --git a/ui/src/dashboards/components/CellEditorOverlay.tsx b/ui/src/dashboards/components/CellEditorOverlay.tsx index 95a420484..ab23f95d3 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.tsx +++ b/ui/src/dashboards/components/CellEditorOverlay.tsx @@ -14,6 +14,7 @@ import CEOBottom from 'src/dashboards/components/CEOBottom' // APIs import {getQueryConfigAndStatus} from 'src/shared/apis' +import {replace as replaceTempVars} from 'src/shared/apis/query' // Utils import {getDeep} from 'src/utils/wrappers' @@ -21,7 +22,6 @@ import * as queryTransitions from 'src/utils/queryTransitions' import defaultQueryConfig from 'src/utils/defaultQueryConfig' import {buildQuery} from 'src/utils/influxql' import {nextSource} from 'src/dashboards/utils/sources' -import replaceTemplate, {replaceInterval} from 'src/tempVars/utils/replace' import {editCellQueryStatus} from 'src/dashboards/actions' // Constants @@ -33,7 +33,6 @@ import { AUTO_GROUP_BY, PREDEFINED_TEMP_VARS, TEMP_VAR_DASHBOARD_TIME, - DEFAULT_DURATION_MS, DEFAULT_PIXELS, } from 'src/shared/constants' import {getCellTypeColors} from 'src/dashboards/constants/cellEditor' @@ -47,7 +46,7 @@ import {Template} from 'src/types/tempVars' type QueryTransitions = typeof queryTransitions type EditRawTextAsyncFunc = ( - url: string, + source: SourcesModels.Source, id: string, text: string ) => Promise @@ -409,23 +408,13 @@ class CellEditorOverlay extends Component { } private getConfig = async ( - url, + source: SourcesModels.Source, id: string, query: string, templates: Template[] ): Promise => { - // replace all templates but :interval: - query = replaceTemplate(query, templates) - let queries = [] - let durationMs = DEFAULT_DURATION_MS - try { - // get durationMs to calculate interval - queries = await getQueryConfigAndStatus(url, [{query, id}]) - durationMs = _.get(queries, '0.durationMs', DEFAULT_DURATION_MS) - - // calc and replace :interval: - query = replaceInterval(query, DEFAULT_PIXELS, durationMs) + query = await replaceTempVars(query, source, templates, DEFAULT_PIXELS) } catch (error) { console.error(error) throw error @@ -433,15 +422,16 @@ class CellEditorOverlay extends Component { try { // fetch queryConfig for with all template variables replaced - queries = await getQueryConfigAndStatus(url, [{query, id}]) + const queries = await getQueryConfigAndStatus(source.links.queries, [ + {query, id}, + ]) + const {queryConfig} = queries.find(q => q.id === id) + + return queryConfig } catch (error) { console.error(error) throw error } - - const {queryConfig} = queries.find(q => q.id === id) - - return queryConfig } // The schema explorer is not built to handle user defined template variables @@ -449,7 +439,7 @@ class CellEditorOverlay extends Component { // 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: string, + source: SourcesModels.Source, id: string, text: string ): Promise => { @@ -462,7 +452,7 @@ class CellEditorOverlay extends Component { const isUsingUserDefinedTempVars: boolean = !!userDefinedTempVarsInQuery.length try { - const queryConfig = await this.getConfig(url, id, text, templates) + const queryConfig = await this.getConfig(source, id, text, templates) const nextQueries = this.state.queriesWorkingDraft.map(q => { if (q.id === id) { const isQuerySupportedByExplorer = !isUsingUserDefinedTempVars diff --git a/ui/src/dashboards/components/QueryMaker.tsx b/ui/src/dashboards/components/QueryMaker.tsx index daea2620c..c9ef92edf 100644 --- a/ui/src/dashboards/components/QueryMaker.tsx +++ b/ui/src/dashboards/components/QueryMaker.tsx @@ -5,22 +5,12 @@ import EmptyQuery from 'src/shared/components/EmptyQuery' import QueryTabList from 'src/shared/components/QueryTabList' import InfluxQLEditor from 'src/dashboards/components/InfluxQLEditor' import SchemaExplorer from 'src/shared/components/SchemaExplorer' -import {buildQuery} from 'src/utils/influxql' -import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants' -import {TEMPLATE_RANGE} from 'src/tempVars/constants' -import {QueryConfig, Source, SourceLinks, TimeRange, Template} from 'src/types' +import {buildText, rawTextBinder} from 'src/dashboards/utils/queryMaker' + +import {QueryConfig, Source, TimeRange, Template} from 'src/types' import {CellEditorOverlayActions} from 'src/dashboards/components/CellEditorOverlay' -const rawTextBinder = ( - links: SourceLinks, - id: string, - action: (linksQueries: string, id: string, text: string) => void -) => (text: string) => action(links.queries, id, text) - -const buildText = (q: QueryConfig): string => - q.rawText || buildQuery(TYPE_QUERY_CONFIG, q.range || TEMPLATE_RANGE, q) || '' - interface Props { source: Source queries: QueryConfig[] @@ -63,7 +53,7 @@ const QueryMaker: SFC = ({ query={buildText(activeQuery)} config={activeQuery} onUpdate={rawTextBinder( - source.links, + source, activeQuery.id, actions.editRawTextAsync )} diff --git a/ui/src/dashboards/utils/queryMaker.ts b/ui/src/dashboards/utils/queryMaker.ts new file mode 100644 index 000000000..8ee6a8669 --- /dev/null +++ b/ui/src/dashboards/utils/queryMaker.ts @@ -0,0 +1,14 @@ +import {buildQuery} from 'src/utils/influxql' +import {TYPE_QUERY_CONFIG} from 'src/dashboards/constants' +import {TEMPLATE_RANGE} from 'src/tempVars/constants' + +import {QueryConfig, Source} from 'src/types' + +export const rawTextBinder = ( + source: Source, + id: string, + action: (source: Source, id: string, text: string) => void +) => (text: string) => action(source, id, text) + +export const buildText = (q: QueryConfig): string => + q.rawText || buildQuery(TYPE_QUERY_CONFIG, q.range || TEMPLATE_RANGE, q) || '' diff --git a/ui/src/data_explorer/apis/index.ts b/ui/src/data_explorer/apis/index.ts index 4b627549b..5d55a79a8 100644 --- a/ui/src/data_explorer/apis/index.ts +++ b/ui/src/data_explorer/apis/index.ts @@ -6,9 +6,10 @@ import download from 'src/external/download' import {proxy} from 'src/utils/queryUrlGenerator' import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers' import {dataToCSV} from 'src/shared/parsing/dataToCSV' + +import {replace as replaceTempVars} from 'src/shared/apis/query' + import {Source, QueryConfig} from 'src/types' -import {duration} from 'src/shared/apis/query' -import {replaceInterval} from 'src/tempVars/utils/replace' export const writeLineProtocol = async ( source: Source, @@ -34,13 +35,7 @@ export const getDataForCSV = ( errorThrown ) => async () => { try { - let queryString = query.text - - if (queryString.includes(':interval:')) { - const queryDuration = await duration(query.text, source) - - queryString = replaceInterval(query.text, null, queryDuration) - } + const queryString = await replaceTempVars(query.text, source, [], null) const response = await fetchTimeSeriesForCSV({ source: source.links.proxy, diff --git a/ui/src/shared/apis/query.ts b/ui/src/shared/apis/query.ts index 5aeb2a51c..e221ce51d 100644 --- a/ui/src/shared/apis/query.ts +++ b/ui/src/shared/apis/query.ts @@ -6,7 +6,7 @@ import { handleLoading, } from 'src/shared/actions/timeSeries' import {analyzeQueries} from 'src/shared/apis' -import {DEFAULT_DURATION_MS} from 'src/shared/constants' +import {DEFAULT_DURATION_MS, TEMP_VAR_INTERVAL} from 'src/shared/constants' import replaceTemplates, {replaceInterval} from 'src/tempVars/utils/replace' import {proxy} from 'src/utils/queryUrlGenerator' @@ -82,14 +82,26 @@ export const replace = async ( ): Promise => { try { query = replaceTemplates(query, templates) - const durationMs = await duration(query, source) - return replaceInterval(query, Math.floor(resolution / 3), durationMs) + return replaceIntervalAsync(query, source, resolution) } catch (error) { console.error(error) throw error } } +const replaceIntervalAsync = async ( + query: string, + source: Source, + resolution: number +): Promise => { + if (query.includes(TEMP_VAR_INTERVAL)) { + const durationMs = await duration(query, source) + return replaceInterval(query, Math.floor(resolution / 3), durationMs) + } else { + return query + } +} + export const duration = async ( query: string, source: Source