From ff9166fe3eb62e410a2792126d9f6c39adbb46d1 Mon Sep 17 00:00:00 2001 From: Iris Scholten Date: Mon, 21 May 2018 18:58:27 -0700 Subject: [PATCH] Replace temp vars in cellName --- ui/src/shared/apis/query.ts | 19 +------- ui/src/shared/components/AutoRefresh.tsx | 27 +++--------- ui/src/shared/components/Layout.js | 13 +++++- ui/src/shared/components/LayoutCell.tsx | 48 +++++++++++++++++++-- ui/src/shared/components/RefreshingGraph.js | 6 +++ ui/src/shared/constants/index.tsx | 3 +- ui/src/types/dashboard.ts | 2 +- 7 files changed, 74 insertions(+), 44 deletions(-) diff --git a/ui/src/shared/apis/query.ts b/ui/src/shared/apis/query.ts index 4f6c430dfa..47a6330889 100644 --- a/ui/src/shared/apis/query.ts +++ b/ui/src/shared/apis/query.ts @@ -4,24 +4,7 @@ import {removeUnselectedTemplateValues} from 'src/dashboards/constants' import {intervalValuesPoints} from 'src/shared/constants' -interface TemplateQuery { - db: string - rp: string - influxql: string -} - -interface TemplateValue { - type: string - value: string - selected: boolean -} - -interface Template { - type: string - tempVar: string - query: TemplateQuery - values: TemplateValue[] -} +import {Template} from 'src/types' interface Query { host: string | string[] diff --git a/ui/src/shared/components/AutoRefresh.tsx b/ui/src/shared/components/AutoRefresh.tsx index 98b8234b7a..beccf8c2a3 100644 --- a/ui/src/shared/components/AutoRefresh.tsx +++ b/ui/src/shared/components/AutoRefresh.tsx @@ -4,6 +4,7 @@ import _ from 'lodash' import {fetchTimeSeries} from 'src/shared/apis/query' import {DEFAULT_TIME_SERIES} from 'src/shared/constants/series' import {TimeSeriesServerResponse, TimeSeriesResponse} from 'src/types/series' +import {Template} from 'src/types' interface Axes { bounds: { @@ -21,25 +22,6 @@ interface Query { id: string } -interface TemplateQuery { - db: string - rp: string - influxql: string -} - -interface TemplateValue { - type: string - value: string - selected: boolean -} - -interface Template { - type: string - tempVar: string - query: TemplateQuery - values: TemplateValue[] -} - export interface Props { type: string autoRefresh: number @@ -49,6 +31,7 @@ export interface Props { axes: Axes editQueryStatus: () => void grabDataForDownload: (timeSeries: TimeSeriesServerResponse[]) => void + onSetResolution?: (resolution: number) => void } interface State { @@ -180,9 +163,13 @@ const AutoRefresh = ( ) } - private setResolution = resolution => { + private setResolution = (resolution: number) => { + const {onSetResolution} = this.props if (resolution !== this.state.resolution) { this.setState({resolution}) + if (onSetResolution) { + onSetResolution(resolution) + } } } diff --git a/ui/src/shared/components/Layout.js b/ui/src/shared/components/Layout.js index 81c52846c6..024376dfc1 100644 --- a/ui/src/shared/components/Layout.js +++ b/ui/src/shared/components/Layout.js @@ -4,7 +4,7 @@ import WidgetCell from 'shared/components/WidgetCell' import LayoutCell from 'shared/components/LayoutCell' import RefreshingGraph from 'shared/components/RefreshingGraph' import {buildQueriesForLayouts} from 'utils/buildQueriesForLayouts' -import {IS_STATIC_LEGEND} from 'src/shared/constants' +import {IS_STATIC_LEGEND, defaultIntervalValue} from 'src/shared/constants' import _ from 'lodash' @@ -24,6 +24,7 @@ const getSource = (cell, source, sources, defaultSource) => { class LayoutState extends Component { state = { cellData: [], + resolution: defaultIntervalValue, } grabDataForDownload = cellData => { @@ -36,9 +37,14 @@ class LayoutState extends Component { {...this.props} {...this.state} grabDataForDownload={this.grabDataForDownload} + onSetResolution={this.handleSetResolution} /> ) } + + handleSetResolution = resolution => { + this.setState({resolution}) + } } const Layout = ( @@ -60,6 +66,7 @@ const Layout = ( sources, onZoom, cellData, + resolution, templates, timeRange, isEditable, @@ -69,6 +76,7 @@ const Layout = ( autoRefresh, manualRefresh, onDeleteCell, + onSetResolution, onCancelEditCell, onStopAddAnnotation, onSummonOverlayTechnologies, @@ -79,7 +87,9 @@ const Layout = ( )} diff --git a/ui/src/shared/components/LayoutCell.tsx b/ui/src/shared/components/LayoutCell.tsx index b33ede1c58..4ef76af620 100644 --- a/ui/src/shared/components/LayoutCell.tsx +++ b/ui/src/shared/components/LayoutCell.tsx @@ -2,7 +2,6 @@ import React, {Component, ReactElement} from 'react' import _ from 'lodash' import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized' - import LayoutCellMenu from 'src/shared/components/LayoutCellMenu' import LayoutCellHeader from 'src/shared/components/LayoutCellHeader' import {notify} from 'src/shared/actions/notifications' @@ -11,7 +10,9 @@ import download from 'src/external/download.js' import {ErrorHandling} from 'src/shared/decorators/errors' import {dataToCSV} from 'src/shared/parsing/dataToCSV' import {timeSeriesToTableGraph} from 'src/utils/timeSeriesTransformers' -import {Cell, CellQuery} from 'src/types/dashboard' +import {PREDEFINED_TEMP_VARS} from 'src/shared/constants' + +import {Cell, CellQuery, Template} from 'src/types/' import {TimeSeriesServerResponse} from 'src/types/series' interface Props { @@ -23,6 +24,8 @@ interface Props { isEditable: boolean onCancelEditCell: () => void cellData: TimeSeriesServerResponse[] + templates: Template[] + resolution: number } @ErrorHandling @@ -44,12 +47,51 @@ export default class LayoutCell extends Component { onCSVDownload={this.handleCSVDownload} /> - +
{this.renderGraph}
) } + private get cellName(): string { + const { + cell: {name}, + } = this.props + return this.replaceTemplateVariables(name) + } + + private get userDefinedTemplateVariables(): Template[] { + const {templates} = this.props + return templates.filter(temp => { + const isPredefinedTempVar: boolean = !!PREDEFINED_TEMP_VARS.find( + t => t === temp.tempVar + ) + return !isPredefinedTempVar + }) + } + + private replaceTemplateVariables = (str: string): string => { + const isTemplated: boolean = _.get(str.match(/:/g), 'length', 0) >= 2 // tempVars are wrapped in : + + if (isTemplated) { + const renderedString = _.reduce( + this.userDefinedTemplateVariables, + (acc, template) => { + const {tempVar} = template + const templateValue = template.values.find(v => v.selected) + const value = templateValue.value + const regex = new RegExp(tempVar, 'g') + return acc.replace(regex, value) + }, + str + ) + + return renderedString + } + + return str + } + private get queries(): CellQuery[] { const {cell} = this.props return _.get(cell, ['queries'], []) diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js index 54b1ad9d61..e98aefd32e 100644 --- a/ui/src/shared/components/RefreshingGraph.js +++ b/ui/src/shared/components/RefreshingGraph.js @@ -40,6 +40,7 @@ const RefreshingGraph = ({ fieldOptions, timeFormat, decimalPlaces, + onSetResolution, resizerTopHeight, staticLegend, manualRefresh, // when changed, re-mounts the component @@ -72,6 +73,7 @@ const RefreshingGraph = ({ prefix={prefix} suffix={suffix} inView={inView} + onSetResolution={onSetResolution} /> ) } @@ -92,6 +94,7 @@ const RefreshingGraph = ({ prefix={prefix} suffix={suffix} inView={inView} + onSetResolution={onSetResolution} /> ) } @@ -118,6 +121,7 @@ const RefreshingGraph = ({ grabDataForDownload={grabDataForDownload} handleSetHoverTime={handleSetHoverTime} isInCEO={isInCEO} + onSetResolution={onSetResolution} /> ) } @@ -147,6 +151,7 @@ const RefreshingGraph = ({ grabDataForDownload={grabDataForDownload} handleSetHoverTime={handleSetHoverTime} showSingleStat={type === 'line-plus-single-stat'} + onSetResolution={onSetResolution} /> ) } @@ -197,6 +202,7 @@ RefreshingGraph.propTypes = { hoverTime: string.isRequired, handleSetHoverTime: func.isRequired, isInCEO: bool, + onSetResolution: func, } RefreshingGraph.defaultProps = { diff --git a/ui/src/shared/constants/index.tsx b/ui/src/shared/constants/index.tsx index c341b336fc..299ea1e3e7 100644 --- a/ui/src/shared/constants/index.tsx +++ b/ui/src/shared/constants/index.tsx @@ -438,8 +438,9 @@ export const DEFAULT_SOURCE = { metaUrl: '', } +export const defaultIntervalValue = '333' export const intervalValuesPoints = [ - {value: '333', type: 'points', selected: true}, + {value: defaultIntervalValue, type: 'points', selected: true}, ] export const interval = { diff --git a/ui/src/types/dashboard.ts b/ui/src/types/dashboard.ts index b9c8f9a13b..ab7d15e0a2 100644 --- a/ui/src/types/dashboard.ts +++ b/ui/src/types/dashboard.ts @@ -96,7 +96,7 @@ export enum CellType { Guide = 'guide', } -interface TemplateValue { +export interface TemplateValue { value: string type: string selected: boolean