{preventCustomTimeRange ? null : (
)}
- {preventCustomTimeRange ? '' : 'Relative '}Time Ranges
+ {preventCustomTimeRange ? '' : 'Relative '}Time
{timeRanges.map(item => {
return (
diff --git a/ui/src/shared/constants/series.ts b/ui/src/shared/constants/series.ts
new file mode 100644
index 000000000..3177b6d3e
--- /dev/null
+++ b/ui/src/shared/constants/series.ts
@@ -0,0 +1,7 @@
+export const DEFAULT_TIME_SERIES = [
+ {
+ response: {
+ results: [],
+ },
+ },
+]
diff --git a/ui/src/shared/data/autoRefreshes.js b/ui/src/shared/data/autoRefreshes.js
index 5ce7bf63e..4778dafbb 100644
--- a/ui/src/shared/data/autoRefreshes.js
+++ b/ui/src/shared/data/autoRefreshes.js
@@ -2,28 +2,28 @@ const autoRefreshItems = [
{milliseconds: 0, inputValue: 'Paused', menuOption: 'Paused'},
{
milliseconds: 5000,
- inputValue: 'Every 5 seconds',
- menuOption: 'Every 5 seconds',
+ inputValue: 'Every 5s',
+ menuOption: 'Every 5s',
},
{
milliseconds: 10000,
- inputValue: 'Every 10 seconds',
- menuOption: 'Every 10 seconds',
+ inputValue: 'Every 10s',
+ menuOption: 'Every 10s',
},
{
milliseconds: 15000,
- inputValue: 'Every 15 seconds',
- menuOption: 'Every 15 seconds',
+ inputValue: 'Every 15s',
+ menuOption: 'Every 15s',
},
{
milliseconds: 30000,
- inputValue: 'Every 30 seconds',
- menuOption: 'Every 30 seconds',
+ inputValue: 'Every 30s',
+ menuOption: 'Every 30s',
},
{
milliseconds: 60000,
- inputValue: 'Every 60 seconds',
- menuOption: 'Every 60 seconds',
+ inputValue: 'Every 60s',
+ menuOption: 'Every 60s',
},
]
diff --git a/ui/src/shared/data/timeRanges.js b/ui/src/shared/data/timeRanges.js
index 914f0ddd7..1631bcd93 100644
--- a/ui/src/shared/data/timeRanges.js
+++ b/ui/src/shared/data/timeRanges.js
@@ -2,73 +2,73 @@ export const timeRanges = [
{
defaultGroupBy: '10s',
seconds: 300,
- inputValue: 'Past 5 minutes',
+ inputValue: 'Past 5m',
lower: 'now() - 5m',
upper: null,
- menuOption: 'Past 5 minutes',
+ menuOption: 'Past 5m',
},
{
defaultGroupBy: '1m',
seconds: 900,
- inputValue: 'Past 15 minutes',
+ inputValue: 'Past 15m',
lower: 'now() - 15m',
upper: null,
- menuOption: 'Past 15 minutes',
+ menuOption: 'Past 15m',
},
{
defaultGroupBy: '1m',
seconds: 3600,
- inputValue: 'Past hour',
+ inputValue: 'Past 1h',
lower: 'now() - 1h',
upper: null,
- menuOption: 'Past hour',
+ menuOption: 'Past 1h',
},
{
defaultGroupBy: '1m',
seconds: 21600,
- inputValue: 'Past 6 hours',
+ inputValue: 'Past 6h',
lower: 'now() - 6h',
upper: null,
- menuOption: 'Past 6 hours',
+ menuOption: 'Past 6h',
},
{
defaultGroupBy: '5m',
seconds: 43200,
- inputValue: 'Past 12 hours',
+ inputValue: 'Past 12h',
lower: 'now() - 12h',
upper: null,
- menuOption: 'Past 12 hours',
+ menuOption: 'Past 12h',
},
{
defaultGroupBy: '10m',
seconds: 86400,
- inputValue: 'Past 24 hours',
+ inputValue: 'Past 24h',
lower: 'now() - 24h',
upper: null,
- menuOption: 'Past 24 hours',
+ menuOption: 'Past 24h',
},
{
defaultGroupBy: '30m',
seconds: 172800,
- inputValue: 'Past 2 days',
+ inputValue: 'Past 2d',
lower: 'now() - 2d',
upper: null,
- menuOption: 'Past 2 days',
+ menuOption: 'Past 2d',
},
{
defaultGroupBy: '1h',
seconds: 604800,
- inputValue: 'Past 7 days',
+ inputValue: 'Past 7d',
lower: 'now() - 7d',
upper: null,
- menuOption: 'Past 7 days',
+ menuOption: 'Past 7d',
},
{
defaultGroupBy: '6h',
seconds: 2592000,
- inputValue: 'Past 30 days',
+ inputValue: 'Past 30d',
lower: 'now() - 30d',
upper: null,
- menuOption: 'Past 30 days',
+ menuOption: 'Past 30d',
},
]
diff --git a/ui/src/side_nav/containers/SideNav.tsx b/ui/src/side_nav/containers/SideNav.tsx
index 7c8e93e62..5f28254bf 100644
--- a/ui/src/side_nav/containers/SideNav.tsx
+++ b/ui/src/side_nav/containers/SideNav.tsx
@@ -122,14 +122,16 @@ class SideNav extends PureComponent
{
-
+
Chronograf
diff --git a/ui/src/style/components/func-node.scss b/ui/src/style/components/func-node.scss
index 84c3b1374..82dcfed97 100644
--- a/ui/src/style/components/func-node.scss
+++ b/ui/src/style/components/func-node.scss
@@ -14,7 +14,6 @@
width: auto;
display: flex;
color: $ix-text-default;
- text-transform: uppercase;
margin-bottom: $ix-marg-a;
font-family: $ix-text-font;
font-weight: 500;
diff --git a/ui/src/types/ifql.ts b/ui/src/types/ifql.ts
index 4cf3326e8..65bd406f9 100644
--- a/ui/src/types/ifql.ts
+++ b/ui/src/types/ifql.ts
@@ -1,7 +1,11 @@
// function definitions
-export type OnDeleteFuncNode = (funcID: string, expressionID: string) => void
+export type OnDeleteFuncNode = (ids: DeleteFuncNodeArgs) => void
export type OnChangeArg = (inputArg: InputArg) => void
-export type OnAddNode = (expressionID: string, funcName: string) => void
+export type OnAddNode = (
+ bodyID: string,
+ funcName: string,
+ declarationID: string
+) => void
export type OnGenerateScript = (script: string) => void
export type OnChangeScript = (script: string) => void
export type OnSubmitScript = () => void
@@ -15,9 +19,16 @@ export interface Handlers {
onGenerateScript: OnGenerateScript
}
+export interface DeleteFuncNodeArgs {
+ funcID: string
+ bodyID: string
+ declarationID?: string
+}
+
export interface InputArg {
funcID: string
- expressionID: string
+ bodyID: string
+ declarationID?: string
key: string
value: string | boolean
generate?: boolean
diff --git a/ui/src/types/series.ts b/ui/src/types/series.ts
new file mode 100644
index 000000000..3293f9a95
--- /dev/null
+++ b/ui/src/types/series.ts
@@ -0,0 +1,20 @@
+export type TimeSeriesValue = string | number | Date | null
+
+export interface Series {
+ name: string
+ columns: string[]
+ values: TimeSeriesValue[]
+}
+
+export interface Result {
+ series: Series[]
+ statement_id: number
+}
+
+export interface TimeSeriesResponse {
+ results: Result[]
+}
+
+export interface TimeSeriesServerResponse {
+ response: TimeSeriesResponse
+}
diff --git a/ui/src/utils/groupBy.js b/ui/src/utils/groupBy.js
index 74e9e7b09..ff6cd898e 100644
--- a/ui/src/utils/groupBy.js
+++ b/ui/src/utils/groupBy.js
@@ -2,8 +2,11 @@ import _ from 'lodash'
import {shiftDate} from 'shared/query/helpers'
import {map, reduce, forEach, concat, clone} from 'fast.js'
-const groupByMap = (responses, responseIndex, groupByColumns) => {
- const firstColumns = _.get(responses, [0, 'series', 0, 'columns'])
+const groupByMap = (results, responseIndex, groupByColumns) => {
+ if (_.isEmpty(results)) {
+ return []
+ }
+ const firstColumns = _.get(results, [0, 'series', 0, 'columns'])
const accum = [
{
responseIndex,
@@ -15,14 +18,14 @@ const groupByMap = (responses, responseIndex, groupByColumns) => {
...firstColumns.slice(1),
],
groupByColumns,
- name: _.get(responses, [0, 'series', 0, 'name']),
+ name: _.get(results, [0, 'series', 0, 'name'], ''),
values: [],
},
],
},
]
- const seriesArray = _.get(responses, [0, 'series'])
+ const seriesArray = _.get(results, [0, 'series'])
seriesArray.forEach(s => {
const prevValues = accum[0].series[0].values
const tagsToAdd = groupByColumns.map(gb => s.tags[gb])
@@ -35,13 +38,14 @@ const groupByMap = (responses, responseIndex, groupByColumns) => {
const constructResults = (raw, groupBys) => {
return _.flatten(
map(raw, (response, index) => {
- const responses = _.get(response, 'response.results', [])
+ const results = _.get(response, 'response.results', [])
+
+ const successfulResults = _.filter(results, r => _.isNil(r.error))
if (groupBys[index]) {
- return groupByMap(responses, index, groupBys[index])
+ return groupByMap(successfulResults, index, groupBys[index])
}
-
- return map(responses, r => ({...r, responseIndex: index}))
+ return map(successfulResults, r => ({...r, responseIndex: index}))
})
)
}
@@ -81,22 +85,24 @@ const constructCells = serieses => {
name: measurement,
columns,
groupByColumns,
- values,
+ values = [],
seriesIndex,
responseIndex,
tags = {},
},
ind
) => {
- const rows = map(values || [], vals => ({
- vals,
- }))
+ const rows = map(values, vals => ({vals}))
+
+ const tagSet = map(Object.keys(tags), tag => `[${tag}=${tags[tag]}]`)
+ .sort()
+ .join('')
const unsortedLabels = map(columns.slice(1), (field, i) => ({
label:
groupByColumns && i <= groupByColumns.length - 1
? `${field}`
- : `${measurement}.${field}`,
+ : `${measurement}.${field}${tagSet}`,
responseIndex,
seriesIndex,
}))
@@ -221,8 +227,8 @@ export const groupByTimeSeriesTransform = (raw, groupBys) => {
if (!groupBys) {
groupBys = Array(raw.length).fill(false)
}
- const results = constructResults(raw, groupBys)
+ const results = constructResults(raw, groupBys)
const serieses = constructSerieses(results)
const {cells, sortedLabels, seriesLabels} = constructCells(serieses)
diff --git a/ui/test/ifql/components/From.test.tsx b/ui/test/ifql/components/From.test.tsx
index 4a8adad3d..d859f9728 100644
--- a/ui/test/ifql/components/From.test.tsx
+++ b/ui/test/ifql/components/From.test.tsx
@@ -9,7 +9,8 @@ const setup = () => {
funcID: '1',
argKey: 'db',
value: 'db1',
- expressionID: '2',
+ bodyID: '2',
+ declarationID: '1',
onChangeArg: () => {},
}
diff --git a/ui/test/ifql/components/FuncArg.test.tsx b/ui/test/ifql/components/FuncArg.test.tsx
index 98949f4a8..7dabb0cc2 100644
--- a/ui/test/ifql/components/FuncArg.test.tsx
+++ b/ui/test/ifql/components/FuncArg.test.tsx
@@ -5,8 +5,9 @@ import FuncArg from 'src/ifql/components/FuncArg'
const setup = () => {
const props = {
funcID: '',
- expressionID: '',
+ bodyID: '',
funcName: '',
+ declarationID: '',
argKey: '',
value: '',
type: '',
diff --git a/ui/test/ifql/components/FuncSelector.test.tsx b/ui/test/ifql/components/FuncSelector.test.tsx
index 821887609..e4dfa27b1 100644
--- a/ui/test/ifql/components/FuncSelector.test.tsx
+++ b/ui/test/ifql/components/FuncSelector.test.tsx
@@ -8,7 +8,8 @@ import FuncList from 'src/ifql/components/FuncList'
const setup = (override = {}) => {
const props = {
funcs: ['count', 'range'],
- expressionID: '1',
+ bodyID: '1',
+ declarationID: '2',
onAddNode: () => {},
...override,
}
@@ -133,7 +134,7 @@ describe('IFQL.Components.FuncsButton', () => {
const onAddNode = jest.fn()
const {wrapper, props} = setup({onAddNode})
const [, func2] = props.funcs
- const {expressionID} = props
+ const {bodyID, declarationID} = props
const dropdownButton = wrapper.find('button')
dropdownButton.simulate('click')
@@ -148,7 +149,7 @@ describe('IFQL.Components.FuncsButton', () => {
input.simulate('keyDown', {key: 'ArrowDown'})
input.simulate('keyDown', {key: 'Enter'})
- expect(onAddNode).toHaveBeenCalledWith(func2, expressionID)
+ expect(onAddNode).toHaveBeenCalledWith(func2, bodyID, declarationID)
})
})
})
diff --git a/ui/test/shared/components/AutoRefresh.test.tsx b/ui/test/shared/components/AutoRefresh.test.tsx
new file mode 100644
index 000000000..bf750e668
--- /dev/null
+++ b/ui/test/shared/components/AutoRefresh.test.tsx
@@ -0,0 +1,74 @@
+import AutoRefresh, {
+ Props,
+ OriginalProps,
+} from 'src/shared/components/AutoRefresh'
+import React, {Component} from 'react'
+import {shallow} from 'enzyme'
+
+type ComponentProps = Props & OriginalProps
+
+class MyComponent extends Component {
+ public render(): JSX.Element {
+ return Here
+ }
+}
+
+const axes = {
+ bounds: {
+ y: [1],
+ y2: [2],
+ },
+}
+
+const defaultProps = {
+ type: 'table',
+ autoRefresh: 1,
+ inView: true,
+ templates: [],
+ queries: [],
+ axes,
+ editQueryStatus: () => {},
+ grabDataForDownload: () => {},
+ data: [],
+ setResolution: () => {},
+ isFetchingInitially: false,
+ isRefreshing: false,
+ queryASTs: [],
+}
+
+const setup = (overrides: Partial = {}) => {
+ const ARComponent = AutoRefresh(MyComponent)
+
+ const props = {...defaultProps, ...overrides}
+
+ return shallow()
+}
+
+describe('Shared.Components.AutoRefresh', () => {
+ describe('render', () => {
+ describe('when there are no results', () => {
+ it('renders the no results component', () => {
+ const wrapped = setup()
+ expect(wrapped.find('.graph-empty').exists()).toBe(true)
+ })
+ })
+
+ describe('when there are results', () => {
+ it('renderes the wrapped component', () => {
+ const wrapped = setup()
+ const timeSeries = [
+ {
+ response: {
+ results: [{series: [1]}],
+ },
+ },
+ ]
+ wrapped.update()
+ wrapped.setState({timeSeries})
+ process.nextTick(() => {
+ expect(wrapped.find(MyComponent).exists()).toBe(true)
+ })
+ })
+ })
+ })
+})