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(); + 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 { }; handleChangeType = (type: PanelType) => { + if (this.props.options.type === type) { + return; + } + this.setState({ data: null }); this.setOptions({ type: type }); };