diff --git a/ui/src/shared/actions/timeSeries.js b/ui/src/shared/actions/timeSeries.js
index 79248e09dc..d6d78d24ab 100644
--- a/ui/src/shared/actions/timeSeries.js
+++ b/ui/src/shared/actions/timeSeries.js
@@ -14,7 +14,9 @@ export const handleSuccess = (data, query, editQueryStatus) => {
const series = _.get(results, ['0', 'series'], false)
// 200 from server and no results = warn
if (!series && !error) {
- editQueryStatus(query.id, {warn: 'Your query is syntactically correct but returned no results'})
+ editQueryStatus(query.id, {
+ warn: 'Your query is syntactically correct but returned no results',
+ })
return data
}
@@ -37,10 +39,19 @@ export const handleError = (error, query, editQueryStatus) => {
console.error(error)
}
-export const fetchTimeSeriesAsync = async ({source, db, rp, query}, editQueryStatus = noop) => {
+export const fetchTimeSeriesAsync = async (
+ {source, db, rp, query, tempVars},
+ editQueryStatus = noop
+) => {
handleLoading(query, editQueryStatus)
try {
- const {data} = await proxy({source, db, rp, query: query.text})
+ const {data} = await proxy({
+ source,
+ db,
+ rp,
+ query: query.text,
+ tempVars,
+ })
return handleSuccess(data, query, editQueryStatus)
} catch (error) {
errorThrown(error)
diff --git a/ui/src/shared/apis/metaQuery.js b/ui/src/shared/apis/metaQuery.js
index d6236ecbbd..5e6733ff9a 100644
--- a/ui/src/shared/apis/metaQuery.js
+++ b/ui/src/shared/apis/metaQuery.js
@@ -2,7 +2,7 @@ import AJAX from 'utils/ajax'
import _ from 'lodash'
import {buildInfluxUrl, proxy} from 'utils/queryUrlGenerator'
-export const showDatabases = async (source) => {
+export const showDatabases = async source => {
const query = 'SHOW DATABASES'
return await proxy({source, query})
}
@@ -10,7 +10,7 @@ export const showDatabases = async (source) => {
export const showRetentionPolicies = async (source, databases) => {
let query
if (Array.isArray(databases)) {
- query = databases.map((db) => `SHOW RETENTION POLICIES ON "${db}"`).join(';')
+ query = databases.map(db => `SHOW RETENTION POLICIES ON "${db}"`).join(';')
} else {
query = `SHOW RETENTION POLICIES ON "${databases}"`
}
@@ -30,24 +30,35 @@ export function killQuery(source, queryId) {
return proxy({source, query})
}
-export function showMeasurements(source, db) {
+export const showMeasurements = async (source, db) => {
const query = 'SHOW MEASUREMENTS'
- return proxy({source, db, query})
+ return await proxy({source, db, query})
}
-export function showTagKeys({source, database, retentionPolicy, measurement}) {
+export const showTagKeys = async ({
+ source,
+ database,
+ retentionPolicy,
+ measurement,
+}) => {
const rp = _.toString(retentionPolicy)
const query = `SHOW TAG KEYS FROM "${rp}"."${measurement}"`
- return proxy({source, db: database, rp: retentionPolicy, query})
+ return await proxy({source, db: database, rp: retentionPolicy, query})
}
-export function showTagValues({source, database, retentionPolicy, measurement, tagKeys}) {
- const keys = tagKeys.sort().map((k) => `"${k}"`).join(', ')
+export const showTagValues = async ({
+ source,
+ database,
+ retentionPolicy,
+ measurement,
+ tagKeys,
+}) => {
+ const keys = tagKeys.sort().map(k => `"${k}"`).join(', ')
const rp = _.toString(retentionPolicy)
const query = `SHOW TAG VALUES FROM "${rp}"."${measurement}" WITH KEY IN (${keys})`
- return proxy({source, db: database, rp: retentionPolicy, query})
+ return await proxy({source, db: database, rp: retentionPolicy, query})
}
export function showShards() {
@@ -56,7 +67,14 @@ export function showShards() {
})
}
-export function createRetentionPolicy({host, database, rpName, duration, replicationFactor, clusterID}) {
+export function createRetentionPolicy({
+ host,
+ database,
+ rpName,
+ duration,
+ replicationFactor,
+ clusterID,
+}) {
const statement = `CREATE RETENTION POLICY "${rpName}" ON "${database}" DURATION ${duration} REPLICATION ${replicationFactor}`
const url = buildInfluxUrl({host, statement})
@@ -70,8 +88,8 @@ export function dropShard(host, shard, clusterID) {
return proxy(url, clusterID)
}
-export function showFieldKeys(source, db, measurement, rp) {
+export const showFieldKeys = async (source, db, measurement, rp) => {
const query = `SHOW FIELD KEYS FROM "${rp}"."${measurement}"`
- return proxy({source, query, db})
+ return await proxy({source, query, db})
}
diff --git a/ui/src/shared/apis/timeSeries.js b/ui/src/shared/apis/timeSeries.js
deleted file mode 100644
index 1b81607a51..0000000000
--- a/ui/src/shared/apis/timeSeries.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {proxy} from 'utils/queryUrlGenerator'
-
-const fetchTimeSeries = async (source, database, query) => {
- try {
- return await proxy({source, query, database})
- } catch (error) {
- console.error('error from proxy: ', error)
- throw error
- }
-}
-
-export default fetchTimeSeries
diff --git a/ui/src/shared/components/AutoRefresh.js b/ui/src/shared/components/AutoRefresh.js
index d91722c519..9664233b70 100644
--- a/ui/src/shared/components/AutoRefresh.js
+++ b/ui/src/shared/components/AutoRefresh.js
@@ -4,6 +4,7 @@ import {fetchTimeSeriesAsync} from 'shared/actions/timeSeries'
const {
arrayOf,
+ bool,
element,
func,
number,
@@ -12,82 +13,141 @@ const {
string,
} = PropTypes
-const AutoRefresh = (ComposedComponent) => {
+const AutoRefresh = ComposedComponent => {
const wrapper = React.createClass({
propTypes: {
children: element,
autoRefresh: number.isRequired,
- queries: arrayOf(shape({
- host: oneOfType([string, arrayOf(string)]),
- text: string,
- }).isRequired).isRequired,
+ templates: arrayOf(
+ shape({
+ type: string.isRequired,
+ label: string.isRequired,
+ tempVar: string.isRequired,
+ query: shape({
+ db: string,
+ rp: string,
+ influxql: string,
+ }),
+ values: arrayOf(
+ shape({
+ type: string.isRequired,
+ value: string.isRequired,
+ selected: bool,
+ })
+ ).isRequired,
+ })
+ ),
+ queries: arrayOf(
+ shape({
+ host: oneOfType([string, arrayOf(string)]),
+ text: string,
+ }).isRequired
+ ).isRequired,
editQueryStatus: func,
},
+
getInitialState() {
return {
lastQuerySuccessful: false,
timeSeries: [],
}
},
+
componentDidMount() {
const {queries, autoRefresh} = this.props
this.executeQueries(queries)
if (autoRefresh) {
- this.intervalID = setInterval(() => this.executeQueries(queries), autoRefresh)
+ this.intervalID = setInterval(
+ () => this.executeQueries(queries),
+ autoRefresh
+ )
}
},
+
componentWillReceiveProps(nextProps) {
- const shouldRefetch = this.queryDifference(this.props.queries, nextProps.queries).length
+ const queriesDidUpdate = this.queryDifference(
+ this.props.queries,
+ nextProps.queries
+ ).length
+
+ const tempVarsDidUpdate = !_.isEqual(
+ this.props.templates,
+ nextProps.templates
+ )
+
+ const shouldRefetch = queriesDidUpdate || tempVarsDidUpdate
if (shouldRefetch) {
this.executeQueries(nextProps.queries)
}
- if ((this.props.autoRefresh !== nextProps.autoRefresh) || shouldRefetch) {
+ if (this.props.autoRefresh !== nextProps.autoRefresh || shouldRefetch) {
clearInterval(this.intervalID)
if (nextProps.autoRefresh) {
- this.intervalID = setInterval(() => this.executeQueries(nextProps.queries), nextProps.autoRefresh)
+ this.intervalID = setInterval(
+ () => this.executeQueries(nextProps.queries),
+ nextProps.autoRefresh
+ )
}
}
},
+
queryDifference(left, right) {
- const leftStrs = left.map((q) => `${q.host}${q.text}`)
- const rightStrs = right.map((q) => `${q.host}${q.text}`)
- return _.difference(_.union(leftStrs, rightStrs), _.intersection(leftStrs, rightStrs))
+ const leftStrs = left.map(q => `${q.host}${q.text}`)
+ const rightStrs = right.map(q => `${q.host}${q.text}`)
+ return _.difference(
+ _.union(leftStrs, rightStrs),
+ _.intersection(leftStrs, rightStrs)
+ )
},
- async executeQueries(queries) {
+
+ executeQueries(queries) {
+ const {templates = [], editQueryStatus} = this.props
+
if (!queries.length) {
- this.setState({
- timeSeries: [],
- })
+ this.setState({timeSeries: []})
return
}
this.setState({isFetching: true})
- let count = 0
- const newSeries = []
- for (const query of queries) {
+
+ const selectedTempVarTemplates = templates.map(template => {
+ const selectedValues = template.values.filter(value => value.selected)
+ return {...template, values: selectedValues}
+ })
+
+ const timeSeriesPromises = queries.map(query => {
const {host, database, rp} = query
- // TODO: enact this via an action creator so redux will know about it; currently errors are used as responses here
- // TODO: may need to make this a try/catch
- const response = await fetchTimeSeriesAsync({source: host, db: database, rp, query}, this.props.editQueryStatus)
- newSeries.push({response})
- count += 1
- if (count === queries.length) {
- const querySuccessful = !this._noResultsForQuery(newSeries)
- this.setState({
- lastQuerySuccessful: querySuccessful,
- isFetching: false,
- timeSeries: newSeries,
- })
- }
- }
+ return fetchTimeSeriesAsync(
+ {
+ source: host,
+ db: database,
+ rp,
+ query,
+ tempVars: selectedTempVarTemplates,
+ },
+ editQueryStatus
+ )
+ })
+
+ Promise.all(timeSeriesPromises).then(timeSeries => {
+ const newSeries = timeSeries.map(response => ({response}))
+ const lastQuerySuccessful = !this._noResultsForQuery(newSeries)
+
+ this.setState({
+ timeSeries: newSeries,
+ lastQuerySuccessful,
+ isFetching: false,
+ })
+ })
},
+
componentWillUnmount() {
clearInterval(this.intervalID)
this.intervalID = false
},
+
render() {
const {timeSeries} = this.state
@@ -95,16 +155,14 @@ const AutoRefresh = (ComposedComponent) => {
return this.renderFetching(timeSeries)
}
- if (this._noResultsForQuery(timeSeries) || !this.state.lastQuerySuccessful) {
+ if (
+ this._noResultsForQuery(timeSeries) ||
+ !this.state.lastQuerySuccessful
+ ) {
return this.renderNoResults()
}
- return (
-
- )
+ return
},
/**
@@ -140,8 +198,8 @@ const AutoRefresh = (ComposedComponent) => {
return true
}
- return data.every((datum) => {
- return datum.response.results.every((result) => {
+ return data.every(datum => {
+ return datum.response.results.every(result => {
return Object.keys(result).length === 0
})
})
diff --git a/ui/src/shared/components/DeleteConfirmButtons.js b/ui/src/shared/components/DeleteConfirmButtons.js
index 1ecb3d880a..94782d5313 100644
--- a/ui/src/shared/components/DeleteConfirmButtons.js
+++ b/ui/src/shared/components/DeleteConfirmButtons.js
@@ -4,7 +4,10 @@ import OnClickOutside from 'shared/components/OnClickOutside'
import ConfirmButtons from 'shared/components/ConfirmButtons'
const DeleteButton = ({onClickDelete}) => (
-