diff --git a/ui/src/shared/components/LayoutRenderer.js b/ui/src/shared/components/LayoutRenderer.js index d84105884c..9c2ff94cb2 100644 --- a/ui/src/shared/components/LayoutRenderer.js +++ b/ui/src/shared/components/LayoutRenderer.js @@ -8,8 +8,7 @@ import AlertsApp from 'src/alerts/containers/AlertsApp' import NewsFeed from 'src/status/components/NewsFeed' import GettingStarted from 'src/status/components/GettingStarted' -import timeRanges from 'hson!shared/data/timeRanges.hson' -import buildInfluxQLQuery from 'utils/influxql' +import buildInfluxQLQuery, {buildCannedDashboardQuery} from 'utils/influxql' import { // TODO: get these const values dynamically @@ -19,6 +18,7 @@ import { LAYOUT_MARGIN, DASHBOARD_LAYOUT_ROW_HEIGHT, } from 'shared/constants' + import {RECENT_ALERTS_LIMIT} from 'src/status/constants' const GridLayout = WidthProvider(ReactGridLayout) @@ -32,60 +32,20 @@ class LayoutRenderer extends Component { } } - buildQueryForOldQuerySchema = q => { - const {timeRange: {lower, upper}, host} = this.props - const {defaultGroupBy} = timeRanges.find( - range => range.lower === lower - ) || {defaultGroupBy: '5m'} - const {wheres, groupbys} = q - - let text = q.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 - } - - standardizeQueries = (cell, source) => { + buildQueries = (cell, source) => { + const {timeRange, host} = this.props return cell.queries.map(query => { - // TODO: Canned dashboards (and possibly Kubernetes dashboard) use an old query schema, - // which does not have enough information for the new `buildInfluxQLQuery` function - // to operate on. We will use `buildQueryForOldQuerySchema` until we conform - // on a stable query representation. let queryText + // Canned dashboards use an different a schema different from queryConfig. if (query.queryConfig) { const {queryConfig: {rawText, range}} = query - const timeRange = range || { + const tR = range || { upper: ':upperDashboardTime:', lower: ':dashboardTime:', } - queryText = rawText || buildInfluxQLQuery(timeRange, query.queryConfig) + queryText = rawText || buildInfluxQLQuery(tR, query.queryConfig) } else { - queryText = this.buildQueryForOldQuerySchema(query) + queryText = buildCannedDashboardQuery(query, timeRange, host) } return Object.assign({}, query, { @@ -162,7 +122,7 @@ class LayoutRenderer extends Component { templates={templates} synchronizer={synchronizer} type={type} - queries={this.standardizeQueries(cell, source)} + queries={this.buildQueries(cell, source)} cellHeight={h} axes={axes} onZoom={onZoom} diff --git a/ui/src/utils/influxql.js b/ui/src/utils/influxql.js index e919ab65f3..e76922a3a0 100644 --- a/ui/src/utils/influxql.js +++ b/ui/src/utils/influxql.js @@ -5,6 +5,7 @@ import { DEFAULT_DASHBOARD_GROUP_BY_INTERVAL, } from 'shared/constants' import {NULL_STRING} from 'shared/constants/queryFillOptions' +import timeRanges from 'hson!shared/data/timeRanges.hson' /* eslint-disable quotes */ export const quoteIfTimestamp = ({lower, upper}) => { @@ -142,3 +143,40 @@ function _buildGroupByTags(groupBy) { function _buildFill(fill) { return ` FILL(${fill})` } + +export 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 +}