mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

React UI: broken graph page browser history (#6659)

Browse source 
* add panel state for the expression input

Signed-off-by: blalov <boiskila@gmail.com>

* remove redundant test

Signed-off-by: blalov <boiskila@gmail.com>
This commit is contained in:
Boyko 2020-01-19 01:40:25 +03:00 committed by Julius Volz
parent 669592a2c4
commit 0f84d5b2cf
3 changed files with 9 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/ui/react-app/src/pages/graph/Panel.tsx
View file

@ -28,6 +28,7 @@ interface PanelState {
loading: boolean; loading: boolean;
error: string | null; error: string | null;
stats: QueryStats | null; stats: QueryStats | null;
exprInputValue: string;
} }
export interface PanelOptions { export interface PanelOptions {
@ -65,6 +66,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
loading: false, loading: false,
error: null, error: null,
stats: null, stats: null,
exprInputValue: props.options.expr,
}; };
} }
@ -85,9 +87,12 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
} }
executeQuery = (): void => { executeQuery = (): void => {
const { expr } = this.props.options; const { exprInputValue: expr } = this.state;
const queryStart = Date.now(); const queryStart = Date.now();
this.props.onExecuteQuery(expr); this.props.onExecuteQuery(expr);
if (this.props.options.expr !== expr) {
this.setOptions({ expr });
}
if (expr === '') { if (expr === '') {
return; return;
} }
@ -177,7 +182,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
} }
handleExpressionChange = (expr: string): void => { handleExpressionChange = (expr: string): void => {
this.setOptions({ expr: expr }); this.setState({ exprInputValue: expr });
}; };
handleChangeRange = (range: number): void => { handleChangeRange = (range: number): void => {
@ -215,7 +220,7 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
<Row> <Row>
<Col> <Col>
<ExpressionInput <ExpressionInput
value={options.expr} value={this.state.exprInputValue}
onExpressionChange={this.handleExpressionChange} onExpressionChange={this.handleExpressionChange}
executeQuery={this.executeQuery} executeQuery={this.executeQuery}
loading={this.state.loading} loading={this.state.loading}

8
web/ui/react-app/src/pages/graph/PanelList.test.tsx
View file

@ -37,12 +37,4 @@ describe('PanelList', () => {
expect(btn.prop('color')).toEqual('primary'); expect(btn.prop('color')).toEqual('primary');
expect(btn.children().text()).toEqual('Add Panel'); expect(btn.children().text()).toEqual('Add Panel');
}); });
it('updates URL when a query is executed', () => {
const panelList = mount(<PanelList />);
const instance: any = panelList.instance();
const updateURLSpy = jest.spyOn(instance, 'updateURL');
instance.handleExecuteQuery('new');
expect(updateURLSpy).toHaveBeenCalledTimes(1);
});
}); });

3
web/ui/react-app/src/pages/graph/PanelList.tsx
View file

@ -109,7 +109,6 @@ class PanelList extends Component<RouteComponentProps & PathPrefixProps, PanelLi
); );
localStorage.setItem('history', JSON.stringify(extendedItems.slice(0, 50))); localStorage.setItem('history', JSON.stringify(extendedItems.slice(0, 50)));
this.updatePastQueries(); this.updatePastQueries();
this.updateURL();
}; };
updateURL() { updateURL() {
@ -119,7 +118,7 @@ class PanelList extends Component<RouteComponentProps & PathPrefixProps, PanelLi
handleOptionsChanged = (id: string, options: PanelOptions) => { handleOptionsChanged = (id: string, options: PanelOptions) => {
const updatedPanels = this.state.panels.map(p => (id === p.id ? { ...p, options } : p)); const updatedPanels = this.state.panels.map(p => (id === p.id ? { ...p, options } : p));
this.setState({ panels: updatedPanels }); this.setState({ panels: updatedPanels }, this.updateURL);
}; };
addPanel = () => { addPanel = () => {