Make timeShift appear in dashboard layouts

ui/src/shared/components/Layout.js

@@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react'
 import WidgetCell from 'shared/components/WidgetCell'
 import LayoutCell from 'shared/components/LayoutCell'
 import RefreshingGraph from 'shared/components/RefreshingGraph'
-import {buildQueriesForLayouts} from 'utils/influxql'
+import {buildQueriesForLayouts} from 'utils/buildQueriesForLayouts'
 
 import _ from 'lodash'
 

ui/src/utils/buildQueriesForLayouts.js

@@ -0,0 +1,72 @@
+import {buildQuery} from 'utils/influxql'
+import {TYPE_SHIFTED, TYPE_QUERY_CONFIG} from 'src/dashboards/constants'
+import timeRanges from 'hson!shared/data/timeRanges.hson'
+
+const buildCannedDashboardQuery = (query, {lower, upper}, host) => {
+  const {defaultGroupBy} = timeRanges.find(range => range.lower === lower) || {
+    defaultGroupBy: '5m',
+  }
+  const {wheres, groupbys} = query
+
+  let text = query.text
+
+  if (upper) {
+    text += ` where time > '${lower}' AND time < '${upper}'`
+  } else {
+    text += ` where time > ${lower}`
+  }
+
+  if (host) {
+    text += ` and \"host\" = '${host}'`
+  }
+
+  if (wheres && wheres.length > 0) {
+    text += ` and ${wheres.join(' and ')}`
+  }
+
+  if (groupbys) {
+    if (groupbys.find(g => g.includes('time'))) {
+      text += ` group by ${groupbys.join(',')}`
+    } else if (groupbys.length > 0) {
+      text += ` group by time(${defaultGroupBy}),${groupbys.join(',')}`
+    } else {
+      text += ` group by time(${defaultGroupBy})`
+    }
+  } else {
+    text += ` group by time(${defaultGroupBy})`
+  }
+
+  return text
+}
+
+export const buildQueriesForLayouts = (cell, source, timeRange, host) => {
+  return cell.queries.map(query => {
+    let queryText
+    // Canned dashboards use an different a schema different from queryConfig.
+    if (query.queryConfig) {
+      const {
+        queryConfig: {database, measurement, fields, shifts, rawText, range},
+      } = query
+      const tR = range || {
+        upper: ':upperDashboardTime:',
+        lower: ':dashboardTime:',
+      }
+
+      queryText =
+        rawText || buildQuery(TYPE_QUERY_CONFIG, tR, query.queryConfig)
+      const isParsable = database && measurement && fields.length
+
+      if (shifts && shifts.length && isParsable) {
+        const shiftedQueries = shifts
+          .filter(s => s.unit)
+          .map(s => buildQuery(TYPE_SHIFTED, timeRange, query.queryConfig, s))
+
+        queryText = `${queryText};${shiftedQueries.join(';')}`
+      }
+    } else {
+      queryText = buildCannedDashboardQuery(query, timeRange, host)
+    }
+
+    return {...query, host: source.links.proxy, text: queryText}
+  })
+}

ui/src/utils/influxql.js

@@ -8,7 +8,6 @@ import {
   TYPE_IFQL,
 } from 'src/dashboards/constants'
 import {shiftTimeRange} from 'shared/query/helpers'
-import timeRanges from 'hson!shared/data/timeRanges.hson'
 
 /* eslint-disable quotes */
 export const quoteIfTimestamp = ({lower, upper}) => {
@@ -169,61 +168,5 @@ function _buildFill(fill) {
   return ` FILL(${fill})`
 }
 
-const buildCannedDashboardQuery = (query, {lower, upper}, host) => {
-  const {defaultGroupBy} = timeRanges.find(range => range.lower === lower) || {
-    defaultGroupBy: '5m',
-  }
-  const {wheres, groupbys} = query
-
-  let text = query.text
-
-  if (upper) {
-    text += ` where time > '${lower}' AND time < '${upper}'`
-  } else {
-    text += ` where time > ${lower}`
-  }
-
-  if (host) {
-    text += ` and \"host\" = '${host}'`
-  }
-
-  if (wheres && wheres.length > 0) {
-    text += ` and ${wheres.join(' and ')}`
-  }
-
-  if (groupbys) {
-    if (groupbys.find(g => g.includes('time'))) {
-      text += ` group by ${groupbys.join(',')}`
-    } else if (groupbys.length > 0) {
-      text += ` group by time(${defaultGroupBy}),${groupbys.join(',')}`
-    } else {
-      text += ` group by time(${defaultGroupBy})`
-    }
-  } else {
-    text += ` group by time(${defaultGroupBy})`
-  }
-
-  return text
-}
-
-export const buildQueriesForLayouts = (cell, source, timeRange, host) => {
-  return cell.queries.map(query => {
-    let queryText
-    // Canned dashboards use an different a schema different from queryConfig.
-    if (query.queryConfig) {
-      const {queryConfig: {rawText, range}} = query
-      const tR = range || {
-        upper: ':upperDashboardTime:',
-        lower: ':dashboardTime:',
-      }
-      queryText = rawText || buildInfluxQLQuery(tR, query.queryConfig)
-    } else {
-      queryText = buildCannedDashboardQuery(query, timeRange, host)
-    }
-
-    return {...query, host: source.links.proxy, text: queryText}
-  })
-}
-
 export const buildRawText = (q, timeRange) =>
   q.rawText || buildInfluxQLQuery(timeRange, q) || ''