Replace temp vars in cellName

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[]

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)
+        }
       }
     }
 

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 = (
   <LayoutCell
     cell={cell}
     cellData={cellData}
+    templates={templates}
     isEditable={isEditable}
+    resolution={resolution}
     onEditCell={onEditCell}
     onCloneCell={onCloneCell}
     onDeleteCell={onDeleteCell}
@@ -115,6 +125,7 @@ const Layout = (
           timeRange,
           host
         )}
+        onSetResolution={onSetResolution}
       />
     )}
   </LayoutCell>

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<Props> {
             onCSVDownload={this.handleCSVDownload}
           />
         </Authorized>
-        <LayoutCellHeader cellName={cell.name} isEditable={isEditable} />
+        <LayoutCellHeader cellName={this.cellName} isEditable={isEditable} />
         <div className="dash-graph--container">{this.renderGraph}</div>
       </div>
     )
   }
 
+  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<Template, string>(
+        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'], [])

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 = {

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 = {

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