public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into 14409/threshold-ux-changes

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-12-17 16:45:46 +01:00
parent c20e10a584 c0fc236fcb
commit 7d248cb415
9 changed files with 129 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/components/Select/TeamPicker.tsx
+5
View File
@@ -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<Props, State> {
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 {
public/app/core/components/Select/UserPicker.tsx
+5
View File
@@ -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<Props, State> {
const backendSrv = getBackendSrv();
this.setState({ isLoading: true });
if (_.isNil(query)) {
query = '';
}
return backendSrv
.get(`/api/org/users?query=${query}&limit=10`)
.then(result => {
public/app/core/components/Switch/Switch.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export class Switch extends PureComponent<Props, State> {
const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
return (
<label htmlFor={labelId} className="gf-form-switch-container">
<label htmlFor={labelId} className="gf-form gf-form-switch-container">
{label && <div className={labelClassName}>{label}</div>}
<div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
public/app/plugins/panel/graph2/GraphOptions.tsx
+45
View File
@@ -0,0 +1,45 @@
//// 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<PanelOptionsProps<Options>> {
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 (
<div>
<div className="section gf-form-group">
<h5 className="section-heading">Draw Modes</h5>
<Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
<Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
<Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
</div>
<div className="section gf-form-group">
<h5 className="section-heading">Test Options</h5>
<Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
<Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
<Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
</div>
</div>
);
}
}
public/app/plugins/panel/graph2/GraphPanel.tsx
+43
View File
@@ -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<Options> {}
export class GraphPanel extends PureComponent<Props> {
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 (
<Graph
timeSeries={vmSeries}
timeRange={timeRange}
showLines={showLines}
showPoints={showPoints}
showBars={showBars}
width={width}
height={height}
/>
);
}
}
public/app/plugins/panel/graph2/module.tsx
+3 -89
View File
@@ -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<Options> {}
export class Graph2 extends PureComponent<Props> {
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 (
<Graph
timeSeries={vmSeries}
timeRange={timeRange}
showLines={showLines}
showPoints={showPoints}
showBars={showBars}
width={width}
height={height}
/>
);
}
}
export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
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 (
<div>
<div className="form-option-box">
<div className="form-option-box__header">Display Options</div>
<div className="section gf-form-group">
<h5 className="section-heading">Draw Modes</h5>
<Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
<Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
<Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
</div>
<div className="section gf-form-group">
<h5 className="section-heading">Test Options</h5>
<Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
<Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
<Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
</div>
</div>
<div className="form-option-box">
<div className="form-option-box__header">Axes</div>
</div>
<div className="form-option-box">
<div className="form-option-box__header">Thresholds</div>
</div>
</div>
);
}
}
export { Graph2 as Panel, GraphOptions as PanelOptions };
export { GraphPanel as Panel, GraphOptions as PanelOptions };
public/app/plugins/panel/graph2/types.ts
+5
View File
@@ -0,0 +1,5 @@
export interface Options {
showBars: boolean;
showLines: boolean;
showPoints: boolean;
}
public/app/plugins/panel/table/renderer.ts
+7
View File
@@ -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();
}
public/app/plugins/panel/table/specs/renderer.test.ts
+15
View File
@@ -186,6 +186,21 @@ describe('when rendering table', () => {
expect(html).toBe('<td>2014-01-01T06:06:06Z</td>');
});
it('time column with epoch as string should be formatted', () => {
const html = renderer.renderCell(0, 0, '1388556366666');
expect(html).toBe('<td>2014-01-01T06:06:06Z</td>');
});
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('<td>2018-12-01T01:00:00Z</td>');
});
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('<td>2018-12-01T01:00:00Z</td>');
});
it('undefined time column should be rendered as -', () => {
const html = renderer.renderCell(0, 0, undefined);
expect(html).toBe('<td>-</td>');