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>

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()';

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 });
   };