Skip to content

N
nexpie-grafana-theme
Commit de1e70a4 by Dominik Prokop Committed by GitHub
Options

NewPanelEditor: don't break when plugin is skipDataQuery (#23836)

parent 80e1191c
Showing with 48 additions and 34 deletions
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
...@@ -151,10 +151,39 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -151,10 +151,39 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
updatePanelEditorUIState({ isPanelOptionsVisible: !uiState.isPanelOptionsVisible }); updatePanelEditorUIState({ isPanelOptionsVisible: !uiState.isPanelOptionsVisible });
}; };
renderPanel = (styles: EditorStyles) => {
const { dashboard, panel, tabs, uiState } = this.props;
return (
<div className={cx(styles.mainPaneWrapper, tabs.length === 0 && styles.mainPaneWrapperNoTabs)}>
{this.renderPanelToolbar(styles)}
<div className={styles.panelWrapper}>
<AutoSizer>
{({ width, height }) => {
if (width < 3 || height < 3) {
return null;
}
return (
<div className={styles.centeringContainer} style={{ width, height }}>
<div style={calculatePanelSize(uiState.mode, width, height, panel)}>
<DashboardPanel
dashboard={dashboard}
panel={panel}
isEditing={true}
isViewing={false}
isInView={true}
/>
</div>
</div>
);
}}
</AutoSizer>
</div>
</div>
);
};
renderHorizontalSplit(styles: EditorStyles) { renderHorizontalSplit(styles: EditorStyles) {
const { dashboard, panel, tabs, data, uiState } = this.props; const { dashboard, panel, tabs, data, uiState } = this.props;
return tabs.length > 0 ? (
return (
<SplitPane <SplitPane
split="horizontal" split="horizontal"
minSize={50} minSize={50}
...@@ -166,35 +195,13 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -166,35 +195,13 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
onDragStarted={this.onDragStarted} onDragStarted={this.onDragStarted}
onDragFinished={size => this.onDragFinished(Pane.Top, size)} onDragFinished={size => this.onDragFinished(Pane.Top, size)}
> >
<div className={styles.mainPaneWrapper}> {this.renderPanel(styles)}
{this.renderPanelToolbar(styles)}
<div className={styles.panelWrapper}>
<AutoSizer>
{({ width, height }) => {
if (width < 3 || height < 3) {
return null;
}
return (
<div className={styles.centeringContainer} style={{ width, height }}>
<div style={calculatePanelSize(uiState.mode, width, height, panel)}>
<DashboardPanel
dashboard={dashboard}
panel={panel}
isEditing={true}
isViewing={false}
isInView={true}
/>
</div>
</div>
);
}}
</AutoSizer>
</div>
</div>
<div className={styles.tabsWrapper}> <div className={styles.tabsWrapper}>
<PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} /> <PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} />
</div> </div>
</SplitPane> </SplitPane>
) : (
this.renderPanel(styles)
); );
} }
...@@ -371,7 +378,7 @@ enum Pane { ...@@ -371,7 +378,7 @@ enum Pane {
export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => { export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
const { uiState } = props; const { uiState } = props;
const handleColor = theme.palette.blue95; const handleColor = theme.palette.blue95;
const paneSpaceing = theme.spacing.md; const paneSpacing = theme.spacing.md;
const resizer = css` const resizer = css`
font-style: italic; font-style: italic;
...@@ -415,7 +422,10 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => { ...@@ -415,7 +422,10 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpaceing}; padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpacing};
`,
mainPaneWrapperNoTabs: css`
padding-bottom: ${paneSpacing};
`, `,
variablesWrapper: css` variablesWrapper: css`
display: flex; display: flex;
...@@ -424,13 +434,13 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => { ...@@ -424,13 +434,13 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
flex: 1 1 0; flex: 1 1 0;
min-height: 0; min-height: 0;
width: 100%; width: 100%;
padding-left: ${paneSpaceing}; padding-left: ${paneSpacing};
`, `,
resizerV: cx( resizerV: cx(
resizer, resizer,
css` css`
cursor: col-resize; cursor: col-resize;
width: ${paneSpaceing}; width: ${paneSpacing};
border-right-width: 1px; border-right-width: 1px;
margin-top: 18px; margin-top: 18px;
` `
...@@ -438,13 +448,13 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => { ...@@ -438,13 +448,13 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
resizerH: cx( resizerH: cx(
resizer, resizer,
css` css`
height: ${paneSpaceing}; height: ${paneSpacing};
cursor: row-resize; cursor: row-resize;
position: relative; position: relative;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
border-top-width: 1px; border-top-width: 1px;
margin-left: ${paneSpaceing}; margin-left: ${paneSpacing};
` `
), ),
tabsWrapper: css` tabsWrapper: css`
...@@ -460,7 +470,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => { ...@@ -460,7 +470,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
`, `,
panelToolbar: css` panelToolbar: css`
display: flex; display: flex;
padding: ${paneSpaceing} 0 ${paneSpaceing} ${paneSpaceing}; padding: ${paneSpacing} 0 ${paneSpacing} ${paneSpacing};
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
`, `,
......
public/app/features/dashboard/components/PanelEditor/state/selectors.ts
...@@ -12,6 +12,10 @@ export const getPanelEditorTabs = memoizeOne((location: LocationState, plugin?: ...@@ -12,6 +12,10 @@ export const getPanelEditorTabs = memoizeOne((location: LocationState, plugin?:
let defaultTab = PanelEditorTabId.Visualize; let defaultTab = PanelEditorTabId.Visualize;
if (plugin.meta.skipDataQuery) {
return [];
}
if (!plugin.meta.skipDataQuery) { if (!plugin.meta.skipDataQuery) {
defaultTab = PanelEditorTabId.Query; defaultTab = PanelEditorTabId.Query;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment