IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prometheus: Fixing state timing issues (#45458)

Browse Source
This commit is contained in:
Torkel Ödegaard 2022-02-17 11:41:05 +01:00 committed by GitHub
parent 123f095536
commit 7bc12629fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx
View File

@ -1,5 +1,6 @@
import { PanelData } from '@grafana/data';
import React, { useEffect, useState } from 'react';
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import React, { useEffect, useReducer } from 'react';
import { PrometheusDatasource } from '../../datasource';
import { PromQuery } from '../../types';
@ -27,20 +28,17 @@ export interface State {
*/
export function PromQueryBuilderContainer(props: Props) {
const { query, onChange, onRunQuery, datasource, data } = props;
const [state, setState] = useState<State>({ expr: query.expr });
const [state, dispatch] = useReducer(stateSlice.reducer, { expr: query.expr });
// Only rebuild visual query if expr changes from outside
useEffect(() => {
if (!state.visQuery || state.expr !== query.expr) {
const result = buildVisualQueryFromString(query.expr || '');
setState({ visQuery: result.query, expr: query.expr });
}
}, [query.expr, state.visQuery, state.expr]);
dispatch(exprChanged(query.expr));
}, [query.expr]);
const onVisQueryChange = (newVisQuery: PromVisualQuery) => {
const rendered = promQueryModeller.renderQuery(newVisQuery);
onChange({ ...query, expr: rendered });
setState({ visQuery: newVisQuery, expr: rendered });
const onVisQueryChange = (visQuery: PromVisualQuery) => {
const expr = promQueryModeller.renderQuery(visQuery);
dispatch(visualQueryChange({ visQuery, expr }));
onChange({ ...props.query, expr: expr });
};
if (!state.visQuery) {
@ -60,3 +58,23 @@ export function PromQueryBuilderContainer(props: Props) {
</>
);
}
const stateSlice = createSlice({
name: 'prom-builder-container',
initialState: { expr: '' } as State,
reducers: {
visualQueryChange: (state, action: PayloadAction<{ visQuery: PromVisualQuery; expr: string }>) => {
state.expr = action.payload.expr;
state.visQuery = action.payload.visQuery;
},
exprChanged: (state, action: PayloadAction<string>) => {
if (!state.visQuery || state.expr !== action.payload) {
state.expr = action.payload;
const parseResult = buildVisualQueryFromString(action.payload);
state.visQuery = parseResult.query;
}
},
},
});
const { visualQueryChange, exprChanged } = stateSlice.actions;