From 6e19c4697d8f37e739fd8278b3ec6909751019a7 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Fri, 15 May 2020 14:03:15 +0200
Subject: [PATCH] React UI: Don't null out data when clicking on current tab
 (#7243)

Fixes https://github.com/prometheus/prometheus/issues/7241

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../react-app/src/pages/graph/Panel.test.tsx  | 27 ++++++++++++++++---
 web/ui/react-app/src/pages/graph/Panel.tsx    |  4 +++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/web/ui/react-app/src/pages/graph/Panel.test.tsx b/web/ui/react-app/src/pages/graph/Panel.test.tsx
index 2b07f7edcc..3fc2072728 100644
--- a/web/ui/react-app/src/pages/graph/Panel.test.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.test.tsx
@@ -65,9 +65,13 @@ describe('Panel', () => {
       const className = tc.active ? 'active' : '';
       expect(link.prop('className')).toEqual(className);
       link.simulate('click');
-      expect(results).toHaveLength(1);
-      expect(results[0].type).toEqual(tc.panelType.toLowerCase());
-      results.pop();
+      if (tc.active) {
+        expect(results).toHaveLength(0);
+      } else {
+        expect(results).toHaveLength(1);
+        expect(results[0].type).toEqual(tc.panelType.toLowerCase());
+        results.pop();
+      }
     });
   });
 
@@ -120,6 +124,23 @@ describe('Panel', () => {
     });
   });
 
+  describe('when clicking on current mode', () => {
+    [PanelType.Table, PanelType.Graph].forEach((mode: PanelType) => {
+      it(`${mode} keeps data`, () => {
+        const props = {
+          ...defaultProps,
+          options: { ...defaultProps.options, type: mode },
+        };
+        const panel = shallow(<Panel {...props} />);
+        const instance: any = panel.instance();
+        panel.setState({ data: 'somedata' });
+        expect(panel.state('data')).toEqual('somedata');
+        instance.handleChangeType(mode);
+        expect(panel.state('data')).toEqual('somedata');
+      });
+    });
+  });
+
   describe('when changing query then time', () => {
     it('executes the new query', () => {
       const initialExpr = 'time()';
diff --git a/web/ui/react-app/src/pages/graph/Panel.tsx b/web/ui/react-app/src/pages/graph/Panel.tsx
index 5bd38cf34e..ae153fdcb8 100644
--- a/web/ui/react-app/src/pages/graph/Panel.tsx
+++ b/web/ui/react-app/src/pages/graph/Panel.tsx
@@ -210,6 +210,10 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
   };
 
   handleChangeType = (type: PanelType) => {
+    if (this.props.options.type === type) {
+      return;
+    }
+
     this.setState({ data: null });
     this.setOptions({ type: type });
   };