IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

NewPanelEdit: Added visualization tab / selection view (#22117)

Browse Source 
* NewPanelEdit: Added visualization tab

* Minor fix
This commit is contained in:
Torkel Ödegaard 2020-02-12 12:54:58 +01:00 committed by GitHub
parent 60ed1e9527
commit fa1602daea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
View File

@ -280,7 +280,8 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
}
const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (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,

2
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
View File

@ -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<PanelEditorTabsProps> = ({ panel, dashboa
<TabContent className={styles.tabContent}>
{activeTab.id === PanelEditorTabId.Queries && <QueriesTab panel={panel} dashboard={dashboard} />}
{activeTab.id === PanelEditorTabId.Alert && <AlertTab panel={panel} dashboard={dashboard} />}
{activeTab.id === PanelEditorTabId.Visualization && <VisualizationTab panel={panel} />}
{activeTab.id === PanelEditorTabId.Transform && data.state !== LoadingState.NotStarted && (
<TransformationsEditor
transformations={panel.transformations || []}

60
public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx Normal file
View File

@ -0,0 +1,60 @@
import React, { FC } from 'react';
import { css } from 'emotion';
import { GrafanaTheme, PanelPlugin, PanelPluginMeta } from '@grafana/data';
import { useTheme, stylesFactory } from '@grafana/ui';
import { changePanelPlugin } from '../../state/actions';
import { StoreState } from 'app/types';
import { PanelModel } from '../../state/PanelModel';
import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux';
import { VizTypePicker } from '../../panel_editor/VizTypePicker';
interface OwnProps {
panel: PanelModel;
}
interface ConnectedProps {
plugin?: PanelPlugin;
}
interface DispatchProps {
changePanelPlugin: typeof changePanelPlugin;
}
type Props = OwnProps & ConnectedProps & DispatchProps;
export const VisualizationTabUnconnected: FC<Props> = ({ panel, plugin, changePanelPlugin }) => {
const theme = useTheme();
const styles = getStyles(theme);
if (!plugin) {
return null;
}
const onPluginTypeChange = (meta: PanelPluginMeta) => {
changePanelPlugin(panel, meta.id);
};
return (
<div className={styles.wrapper}>
<VizTypePicker current={plugin.meta} onTypeChange={onPluginTypeChange} searchQuery={''} onClose={() => {}} />
</div>
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
return {
wrapper: css`
padding: ${theme.spacing.md};
`,
};
});
const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state, props) => {
return {
plugin: state.plugins.panels[props.panel.type],
};
};
const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { changePanelPlugin };
export const VisualizationTab = connect(mapStateToProps, mapDispatchToProps)(VisualizationTabUnconnected);