From a8b52abb55fecdd514eed3d9a834a5596e73be9b Mon Sep 17 00:00:00 2001
From: Vanshika <vanshikav928@gmail.com>
Date: Wed, 13 Dec 2023 16:55:05 +0530
Subject: [PATCH 1/5] Use Partial Response enabled by default

Signed-off-by: Vanshika <vanshikav928@gmail.com>
---
 pkg/ui/react-app/src/pages/graph/Panel.test.tsx | 1 +
 pkg/ui/react-app/src/pages/graph/Panel.tsx      | 3 ++-
 pkg/ui/react-app/src/pages/graph/PanelList.tsx  | 5 +++++
 3 files changed, 8 insertions(+), 1 deletion(-)

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 993c60b1a49..a3eaf24aa1d 100644
--- a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx
+++ b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx
@@ -47,6 +47,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 fb2bd59b75d..68147bb6bbe 100644
--- a/pkg/ui/react-app/src/pages/graph/Panel.tsx
+++ b/pkg/ui/react-app/src/pages/graph/Panel.tsx
@@ -43,6 +43,7 @@ export interface PanelProps {
   stores: Store[];
   enableAutocomplete: boolean;
   enableHighlighting: boolean;
+  usePartialResponse: boolean;
   enableLinter: boolean;
   defaultStep: string;
   defaultEngine: string;
@@ -93,7 +94,7 @@ export const PanelDefaultOptions: PanelOptions = {
   maxSourceResolution: '0s',
   useDeduplication: true,
   forceTracing: false,
-  usePartialResponse: false,
+  usePartialResponse: true,
   storeMatches: [],
   engine: '',
   analyze: false,
diff --git a/pkg/ui/react-app/src/pages/graph/PanelList.tsx b/pkg/ui/react-app/src/pages/graph/PanelList.tsx
index 1cc66ddbdd0..b44fbe413df 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);
@@ -128,6 +130,7 @@ export const PanelListContent: FC<PanelListProps> = ({
           defaultEngine={defaultEngine}
           enableLinter={enableLinter}
           defaultStep={defaultStep}
+          usePartialResponse={usePartialResponse}
         />
       ))}
       <Button className="d-block mb-3" color="primary" onClick={addPanel}>
@@ -161,6 +164,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 +276,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
         defaultStep={defaultStep}
         defaultEngine={defaultEngine}
         queryHistoryEnabled={enableQueryHistory}
+        usePartialResponse={usePartialResponse === 'true'}
         isLoading={storesLoading || flagsLoading}
       />
     </>

From 84a70a4fd30216e3f93b647b4233352ee74ed586 Mon Sep 17 00:00:00 2001
From: Vanshika <vanshikav928@gmail.com>
Date: Sun, 17 Dec 2023 23:23:02 +0530
Subject: [PATCH 2/5] persist changes

Signed-off-by: Vanshika <vanshikav928@gmail.com>
---
 .../react-app/src/pages/graph/Panel.test.tsx  |  2 ++
 pkg/ui/react-app/src/pages/graph/Panel.tsx    | 20 ++++++++++++++++++-
 .../react-app/src/pages/graph/PanelList.tsx   |  4 ++++
 3 files changed, 25 insertions(+), 1 deletion(-)

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 a3eaf24aa1d..04cd058d7a5 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,7 @@ const defaultProps: PanelProps = {
     analyze: false,
     disableAnalyzeCheckbox: false,
   },
+  onUsePartialResponseChange: () => {},
   onOptionsChanged: (): void => {
     // Do nothing.
   },
@@ -103,6 +104,7 @@ describe('Panel', () => {
       analyze: false,
       disableAnalyzeCheckbox: false,
     };
+  
     const graphPanel = mount(<Panel {...defaultProps} options={options} />);
     const controls = graphPanel.find(GraphControls);
     graphPanel.setState({ data: { resultType: 'matrix', result: [] } });
diff --git a/pkg/ui/react-app/src/pages/graph/Panel.tsx b/pkg/ui/react-app/src/pages/graph/Panel.tsx
index f16371403aa..6f4e31c0fe8 100644
--- a/pkg/ui/react-app/src/pages/graph/Panel.tsx
+++ b/pkg/ui/react-app/src/pages/graph/Panel.tsx
@@ -47,6 +47,7 @@ export interface PanelProps {
   enableLinter: boolean;
   defaultStep: string;
   defaultEngine: string;
+  onUsePartialResponseChange: (value: boolean) => void;
 }
 
 interface PanelState {
@@ -167,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 => {
@@ -337,7 +345,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 b44fbe413df..cc9176a221d 100644
--- a/pkg/ui/react-app/src/pages/graph/PanelList.tsx
+++ b/pkg/ui/react-app/src/pages/graph/PanelList.tsx
@@ -97,6 +97,9 @@ export const PanelListContent: FC<PanelListProps> = ({
       },
     ]);
   };
+  const handleUsePartialResponseChange = (value: boolean): void => {
+    localStorage.setItem('usePartialResponse', JSON.stringify(value));
+  };
 
   return (
     <>
@@ -131,6 +134,7 @@ export const PanelListContent: FC<PanelListProps> = ({
           enableLinter={enableLinter}
           defaultStep={defaultStep}
           usePartialResponse={usePartialResponse}
+          onUsePartialResponseChange={handleUsePartialResponseChange}
         />
       ))}
       <Button className="d-block mb-3" color="primary" onClick={addPanel}>

From 195adf9590329f45291e0353564e8db8e6e8fce1 Mon Sep 17 00:00:00 2001
From: Vanshika <vanshikav928@gmail.com>
Date: Sun, 17 Dec 2023 23:30:21 +0530
Subject: [PATCH 3/5] Panel.test.tsx changes

Signed-off-by: Vanshika <vanshikav928@gmail.com>
---
 pkg/ui/react-app/src/pages/graph/Panel.test.tsx | 5 +++--
 1 file changed, 3 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 04cd058d7a5..0837513997e 100644
--- a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx
+++ b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx
@@ -26,7 +26,9 @@ const defaultProps: PanelProps = {
     analyze: false,
     disableAnalyzeCheckbox: false,
   },
-  onUsePartialResponseChange: () => {},
+  onUsePartialResponseChange: (): void => {
+    // Do nothing.
+  },
   onOptionsChanged: (): void => {
     // Do nothing.
   },
@@ -104,7 +106,6 @@ describe('Panel', () => {
       analyze: false,
       disableAnalyzeCheckbox: false,
     };
-  
     const graphPanel = mount(<Panel {...defaultProps} options={options} />);
     const controls = graphPanel.find(GraphControls);
     graphPanel.setState({ data: { resultType: 'matrix', result: [] } });

From d9f3c3f7deafa6a523776424c432d6a4f39bed48 Mon Sep 17 00:00:00 2001
From: Vanshika <vanshikav928@gmail.com>
Date: Fri, 22 Dec 2023 18:17:23 +0530
Subject: [PATCH 4/5] change to boolean

Signed-off-by: Vanshika <vanshikav928@gmail.com>
---
 pkg/ui/react-app/src/pages/graph/PanelList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pkg/ui/react-app/src/pages/graph/PanelList.tsx b/pkg/ui/react-app/src/pages/graph/PanelList.tsx
index cc9176a221d..19fb9e13197 100644
--- a/pkg/ui/react-app/src/pages/graph/PanelList.tsx
+++ b/pkg/ui/react-app/src/pages/graph/PanelList.tsx
@@ -280,7 +280,7 @@ const PanelList: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix = ''
         defaultStep={defaultStep}
         defaultEngine={defaultEngine}
         queryHistoryEnabled={enableQueryHistory}
-        usePartialResponse={usePartialResponse === 'true'}
+        usePartialResponse={!!usePartialResponse}
         isLoading={storesLoading || flagsLoading}
       />
     </>

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

Signed-off-by: Vanshika <vanshikav928@gmail.com>

persist changes

Signed-off-by: Vanshika <vanshikav928@gmail.com>

Panel.test.tsx changes

Signed-off-by: Vanshika <vanshikav928@gmail.com>

change to boolean

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 993c60b1a49..0837513997e 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 354831d548a..6f4e31c0fe8 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 => {
@@ -336,7 +345,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 1cc66ddbdd0..19fb9e13197 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}
       />
     </>