ui: enable partial response strategy by default

thanos-io · Dec 26, 2023 · 0cc822b · 0cc822b
1 parent a59a3ef
commit 0cc822b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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<PanelProps & PathPrefixProps, PanelState> {
 
   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<PanelProps & PathPrefixProps, PanelState> {
   };
 
   handleChangePartialResponse = (event: React.ChangeEvent<HTMLInputElement>): 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
@@ -31,6 +31,7 @@ interface PanelListProps extends PathPrefixProps, RouteComponentProps {
   enableLinter: boolean;
   defaultStep: string;
   defaultEngine: string;
+  usePartialResponse: boolean;
 }
 
 export const PanelListContent: FC<PanelListProps> = ({
@@ -44,6 +45,7 @@ export const PanelListContent: FC<PanelListProps> = ({
   enableLinter,
   defaultStep,
   defaultEngine,
+  usePartialResponse,
   ...rest
 }) => {
   const [panels, setPanels] = useState(rest.panels);
@@ -95,6 +97,9 @@ export const PanelListContent: FC<PanelListProps> = ({
       },
     ]);
   };
+  const handleUsePartialResponseChange = (value: boolean): void => {
+    localStorage.setItem('usePartialResponse', JSON.stringify(value));
+  };
 
   return (
     <>
@@ -128,6 +133,8 @@ export const PanelListContent: FC<PanelListProps> = ({
           defaultEngine={defaultEngine}
           enableLinter={enableLinter}
           defaultStep={defaultStep}
+          usePartialResponse={usePartialResponse}
+          onUsePartialResponseChange={handleUsePartialResponseChange}
         />
       ))}
       <Button className="d-block mb-3" color="primary" onClick={addPanel}>
@@ -161,6 +168,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
   } = useFetch<FlagMap>(`${pathPrefix}/api/v1/status/flags`);
   const defaultStep = flagsRes?.data?.['query.default-step'] || '1s';
   const defaultEngine = flagsRes?.data?.['query.promql-engine'];
+  const usePartialResponse = flagsRes?.data?.['query.partial-response'] || true;
 
   const browserTime = new Date().getTime() / 1000;
   const { response: timeRes, error: timeErr } = useFetch<{ result: number[] }>(`${pathPrefix}/api/v1/query?query=time()`);
@@ -272,6 +280,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
         defaultStep={defaultStep}
         defaultEngine={defaultEngine}
         queryHistoryEnabled={enableQueryHistory}
+        usePartialResponse={!!usePartialResponse}
         isLoading={storesLoading || flagsLoading}
       />
     </>