diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index b666065a34e..78416a56016 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -280,7 +280,8 @@ export class PanelEditorUnconnected extends PureComponent { } const mapStateToProps: MapStateToProps = (state, props) => { - const plugin = state.plugins.panels[props.sourcePanel.type]; + const panel = state.panelEditorNew.getPanel(); + const plugin = state.plugins.panels[panel.type]; return { location: state.location, diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx index 69e468d8410..886aaeb79da 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx @@ -8,6 +8,7 @@ import { DashboardModel } from '../../state'; import { QueriesTab } from '../../panel_editor/QueriesTab'; import { PanelModel } from '../../state/PanelModel'; import { AlertTab } from 'app/features/alerting/AlertTab'; +import { VisualizationTab } from './VisualizationTab'; interface PanelEditorTabsProps { panel: PanelModel; @@ -39,6 +40,7 @@ export const PanelEditorTabs: React.FC = ({ panel, dashboa {activeTab.id === PanelEditorTabId.Queries && } {activeTab.id === PanelEditorTabId.Alert && } + {activeTab.id === PanelEditorTabId.Visualization && } {activeTab.id === PanelEditorTabId.Transform && data.state !== LoadingState.NotStarted && ( = ({ panel, plugin, changePanelPlugin }) => { + const theme = useTheme(); + const styles = getStyles(theme); + + if (!plugin) { + return null; + } + + const onPluginTypeChange = (meta: PanelPluginMeta) => { + changePanelPlugin(panel, meta.id); + }; + + return ( +
+ {}} /> +
+ ); +}; + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + return { + wrapper: css` + padding: ${theme.spacing.md}; + `, + }; +}); + +const mapStateToProps: MapStateToProps = (state, props) => { + return { + plugin: state.plugins.panels[props.panel.type], + }; +}; + +const mapDispatchToProps: MapDispatchToProps = { changePanelPlugin }; + +export const VisualizationTab = connect(mapStateToProps, mapDispatchToProps)(VisualizationTabUnconnected);