diff --git a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx index 993c60b1a4..0837513997 100644 --- a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx +++ b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx @@ -26,6 +26,9 @@ const defaultProps: PanelProps = { analyze: false, disableAnalyzeCheckbox: false, }, + onUsePartialResponseChange: (): void => { + // Do nothing. + }, onOptionsChanged: (): void => { // Do nothing. }, @@ -47,6 +50,7 @@ const defaultProps: PanelProps = { enableHighlighting: true, enableLinter: true, defaultEngine: 'prometheus', + usePartialResponse: true, }; describe('Panel', () => { diff --git a/pkg/ui/react-app/src/pages/graph/Panel.tsx b/pkg/ui/react-app/src/pages/graph/Panel.tsx index 2ba02d1131..915d5d1813 100644 --- a/pkg/ui/react-app/src/pages/graph/Panel.tsx +++ b/pkg/ui/react-app/src/pages/graph/Panel.tsx @@ -43,9 +43,11 @@ export interface PanelProps { stores: Store[]; enableAutocomplete: boolean; enableHighlighting: boolean; + usePartialResponse: boolean; enableLinter: boolean; defaultStep: string; defaultEngine: string; + onUsePartialResponseChange: (value: boolean) => void; } interface PanelState { @@ -93,7 +95,7 @@ export const PanelDefaultOptions: PanelOptions = { maxSourceResolution: '0s', useDeduplication: true, forceTracing: false, - usePartialResponse: false, + usePartialResponse: true, storeMatches: [], engine: '', analyze: false, @@ -166,6 +168,13 @@ class Panel extends Component { componentDidMount(): void { this.executeQuery(); + const storedValue = localStorage.getItem('usePartialResponse'); + if (storedValue !== null) { + // Set the default value in state and local storage + this.setOptions({ usePartialResponse: true }); + this.props.onUsePartialResponseChange(true); + localStorage.setItem('usePartialResponse', JSON.stringify(true)); + } } executeQuery = (): void => { @@ -346,7 +355,17 @@ class Panel extends Component { }; handleChangePartialResponse = (event: React.ChangeEvent): void => { - this.setOptions({ usePartialResponse: event.target.checked }); + let newValue = event.target.checked; + + const storedValue = localStorage.getItem('usePartialResponse'); + + if (storedValue === 'true') { + newValue = true; + } + this.setOptions({ usePartialResponse: newValue }); + this.props.onUsePartialResponseChange(newValue); + + localStorage.setItem('usePartialResponse', JSON.stringify(event.target.checked)); }; handleStoreMatchChange = (selectedStores: any): void => { diff --git a/pkg/ui/react-app/src/pages/graph/PanelList.tsx b/pkg/ui/react-app/src/pages/graph/PanelList.tsx index 1cc66ddbdd..19fb9e1319 100644 --- a/pkg/ui/react-app/src/pages/graph/PanelList.tsx +++ b/pkg/ui/react-app/src/pages/graph/PanelList.tsx @@ -31,6 +31,7 @@ interface PanelListProps extends PathPrefixProps, RouteComponentProps { enableLinter: boolean; defaultStep: string; defaultEngine: string; + usePartialResponse: boolean; } export const PanelListContent: FC = ({ @@ -44,6 +45,7 @@ export const PanelListContent: FC = ({ enableLinter, defaultStep, defaultEngine, + usePartialResponse, ...rest }) => { const [panels, setPanels] = useState(rest.panels); @@ -95,6 +97,9 @@ export const PanelListContent: FC = ({ }, ]); }; + const handleUsePartialResponseChange = (value: boolean): void => { + localStorage.setItem('usePartialResponse', JSON.stringify(value)); + }; return ( <> @@ -128,6 +133,8 @@ export const PanelListContent: FC = ({ defaultEngine={defaultEngine} enableLinter={enableLinter} defaultStep={defaultStep} + usePartialResponse={usePartialResponse} + onUsePartialResponseChange={handleUsePartialResponseChange} /> ))}