From e77caa8e583f6e6f4cae1fb7ae6876ed5265db1f Mon Sep 17 00:00:00 2001
From: Vanshika <vanshikav928@gmail.com>
Date: Wed, 13 Dec 2023 16:55:05 +0530
Subject: [PATCH] ui: enable partial response strategy by default

Rebuild

Signed-off-by: Vanshika <vanshikav928@gmail.com>
---
 .../react-app/src/pages/graph/Panel.test.tsx  |  4 ++++
 pkg/ui/react-app/src/pages/graph/Panel.tsx    | 23 +++++++++++++++++--
 .../react-app/src/pages/graph/PanelList.tsx   |  9 ++++++++
 3 files changed, 34 insertions(+), 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
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<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
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<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}
       />
     </>