From 0ebd5e0c8029abe4d4b8135a75c767983f339a4f Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Sat, 15 Dec 2018 23:40:17 +0100 Subject: [PATCH 1/4] table: fixes #14484. Renders epoch string if date column style --- public/app/plugins/panel/table/renderer.ts | 7 +++++++ .../plugins/panel/table/specs/renderer.test.ts | 15 +++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/public/app/plugins/panel/table/renderer.ts b/public/app/plugins/panel/table/renderer.ts index 524aa06343b..e4cc54e9c40 100644 --- a/public/app/plugins/panel/table/renderer.ts +++ b/public/app/plugins/panel/table/renderer.ts @@ -91,7 +91,14 @@ export class TableRenderer { if (_.isArray(v)) { v = v[0]; } + + // if is an epoch (numeric string and len > 12) + if (_.isString(v) && !isNaN(v) && v.length > 12) { + v = parseInt(v, 10); + } + let date = moment(v); + if (this.isUtc) { date = date.utc(); } diff --git a/public/app/plugins/panel/table/specs/renderer.test.ts b/public/app/plugins/panel/table/specs/renderer.test.ts index f29c69e4acd..f9ccc574c91 100644 --- a/public/app/plugins/panel/table/specs/renderer.test.ts +++ b/public/app/plugins/panel/table/specs/renderer.test.ts @@ -186,6 +186,21 @@ describe('when rendering table', () => { expect(html).toBe('2014-01-01T06:06:06Z'); }); + it('time column with epoch as string should be formatted', () => { + const html = renderer.renderCell(0, 0, '1388556366666'); + expect(html).toBe('2014-01-01T06:06:06Z'); + }); + + it('time column with RFC2822 date as string should be formatted', () => { + const html = renderer.renderCell(0, 0, 'Sat, 01 Dec 2018 01:00:00 GMT'); + expect(html).toBe('2018-12-01T01:00:00Z'); + }); + + it('time column with ISO date as string should be formatted', () => { + const html = renderer.renderCell(0, 0, '2018-12-01T01:00:00Z'); + expect(html).toBe('2018-12-01T01:00:00Z'); + }); + it('undefined time column should be rendered as -', () => { const html = renderer.renderCell(0, 0, undefined); expect(html).toBe('-'); From 0fd92ef6fbd092c2f1f8ce7e38231af2eb24e070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 17 Dec 2018 13:55:25 +0100 Subject: [PATCH 2/4] Refactoring react graph --- .../app/plugins/panel/graph2/GraphOptions.tsx | 54 +++++++++++ .../app/plugins/panel/graph2/GraphPanel.tsx | 43 +++++++++ public/app/plugins/panel/graph2/module.tsx | 92 +------------------ public/app/plugins/panel/graph2/types.ts | 5 + 4 files changed, 105 insertions(+), 89 deletions(-) create mode 100644 public/app/plugins/panel/graph2/GraphOptions.tsx create mode 100644 public/app/plugins/panel/graph2/GraphPanel.tsx create mode 100644 public/app/plugins/panel/graph2/types.ts diff --git a/public/app/plugins/panel/graph2/GraphOptions.tsx b/public/app/plugins/panel/graph2/GraphOptions.tsx new file mode 100644 index 00000000000..2272cdc7aef --- /dev/null +++ b/public/app/plugins/panel/graph2/GraphOptions.tsx @@ -0,0 +1,54 @@ +//// Libraries +import _ from 'lodash'; +import React, { PureComponent } from 'react'; + +// Components +import { Switch } from 'app/core/components/Switch/Switch'; + +// Types +import { PanelOptionsProps } from 'app/types'; +import { Options } from './types'; + +export class GraphOptions extends PureComponent> { + onToggleLines = () => { + this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines }); + }; + + onToggleBars = () => { + this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars }); + }; + + onTogglePoints = () => { + this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints }); + }; + + render() { + const { showBars, showPoints, showLines } = this.props.options; + + return ( +
+
+
Display Options
+
+
Draw Modes
+ + + +
+
+
Test Options
+ + + +
+
+
+
Axes
+
+
+
Thresholds
+
+
+ ); + } +} diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx new file mode 100644 index 00000000000..a7ef45e5428 --- /dev/null +++ b/public/app/plugins/panel/graph2/GraphPanel.tsx @@ -0,0 +1,43 @@ +// Libraries +import _ from 'lodash'; +import React, { PureComponent } from 'react'; + +// Components +import Graph from 'app/viz/Graph'; + +// Services & Utils +import { getTimeSeriesVMs } from 'app/viz/state/timeSeries'; + +// Types +import { PanelProps, NullValueMode } from 'app/types'; +import { Options } from './types'; + +interface Props extends PanelProps {} + +export class GraphPanel extends PureComponent { + constructor(props) { + super(props); + } + + render() { + const { timeSeries, timeRange, width, height } = this.props; + const { showLines, showBars, showPoints } = this.props.options; + + const vmSeries = getTimeSeriesVMs({ + timeSeries: timeSeries, + nullValueMode: NullValueMode.Ignore, + }); + + return ( + + ); + } +} diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx index f2c1344d782..ba761ca92cb 100644 --- a/public/app/plugins/panel/graph2/module.tsx +++ b/public/app/plugins/panel/graph2/module.tsx @@ -1,90 +1,4 @@ -import _ from 'lodash'; -import React, { PureComponent } from 'react'; +import { GraphPanel } from './GraphPanel'; +import { GraphOptions } from './GraphOptions'; -import Graph from 'app/viz/Graph'; -import { Switch } from 'app/core/components/Switch/Switch'; - -import { getTimeSeriesVMs } from 'app/viz/state/timeSeries'; -import { PanelProps, PanelOptionsProps, NullValueMode } from 'app/types'; - -interface Options { - showBars: boolean; - showLines: boolean; - showPoints: boolean; -} - -interface Props extends PanelProps {} - -export class Graph2 extends PureComponent { - constructor(props) { - super(props); - } - - render() { - const { timeSeries, timeRange, width, height } = this.props; - const { showLines, showBars, showPoints } = this.props.options; - - const vmSeries = getTimeSeriesVMs({ - timeSeries: timeSeries, - nullValueMode: NullValueMode.Ignore, - }); - - return ( - - ); - } -} - -export class GraphOptions extends PureComponent> { - onToggleLines = () => { - this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines }); - }; - - onToggleBars = () => { - this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars }); - }; - - onTogglePoints = () => { - this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints }); - }; - - render() { - const { showBars, showPoints, showLines } = this.props.options; - - return ( -
-
-
Display Options
-
-
Draw Modes
- - - -
-
-
Test Options
- - - -
-
-
-
Axes
-
-
-
Thresholds
-
-
- ); - } -} - -export { Graph2 as Panel, GraphOptions as PanelOptions }; +export { GraphPanel as Panel, GraphOptions as PanelOptions }; diff --git a/public/app/plugins/panel/graph2/types.ts b/public/app/plugins/panel/graph2/types.ts new file mode 100644 index 00000000000..b9baaa09cd7 --- /dev/null +++ b/public/app/plugins/panel/graph2/types.ts @@ -0,0 +1,5 @@ +export interface Options { + showBars: boolean; + showLines: boolean; + showPoints: boolean; +} From e38a04ba9a5497c750cf629cc237c8a273d33304 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 17 Dec 2018 14:31:43 +0100 Subject: [PATCH 3/4] Fixes issues with user and team picker --- public/app/core/components/Select/TeamPicker.tsx | 5 +++++ public/app/core/components/Select/UserPicker.tsx | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/public/app/core/components/Select/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx index 6449114cfff..bc608318806 100644 --- a/public/app/core/components/Select/TeamPicker.tsx +++ b/public/app/core/components/Select/TeamPicker.tsx @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import _ from 'lodash'; import { AsyncSelect } from './Select'; import { debounce } from 'lodash'; import { getBackendSrv } from 'app/core/services/backend_srv'; @@ -37,6 +38,10 @@ export class TeamPicker extends Component { const backendSrv = getBackendSrv(); this.setState({ isLoading: true }); + if (_.isNil(query)) { + query = ''; + } + return backendSrv.get(`/api/teams/search?perpage=10&page=1&query=${query}`).then(result => { const teams = result.teams.map(team => { return { diff --git a/public/app/core/components/Select/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx index 976b32e47a9..8496d707105 100644 --- a/public/app/core/components/Select/UserPicker.tsx +++ b/public/app/core/components/Select/UserPicker.tsx @@ -1,5 +1,6 @@ // Libraries import React, { Component } from 'react'; +import _ from 'lodash'; // Components import { AsyncSelect } from './Select'; @@ -38,6 +39,10 @@ export class UserPicker extends Component { const backendSrv = getBackendSrv(); this.setState({ isLoading: true }); + if (_.isNil(query)) { + query = ''; + } + return backendSrv .get(`/api/org/users?query=${query}&limit=10`) .then(result => { From 0fe452ec26bdbf6fab1b280e01252b902076743b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 17 Dec 2018 15:38:51 +0100 Subject: [PATCH 4/4] Minor react graph panel refactorings and fixes --- public/app/core/components/Switch/Switch.tsx | 2 +- .../app/plugins/panel/graph2/GraphOptions.tsx | 29 +++++++------------ 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/public/app/core/components/Switch/Switch.tsx b/public/app/core/components/Switch/Switch.tsx index 5cb7617c89c..d53a3d68878 100644 --- a/public/app/core/components/Switch/Switch.tsx +++ b/public/app/core/components/Switch/Switch.tsx @@ -32,7 +32,7 @@ export class Switch extends PureComponent { const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`; return ( -