Inspect: table take full height in drawer (#21580)

This commit is contained in:
Peter Holmberg 2020-01-18 08:24:17 +01:00 committed by Torkel Ödegaard
parent 7cbf3d8dab
commit e762190616
3 changed files with 10 additions and 6 deletions

View File

@ -54,6 +54,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`, `,
content: css` content: css`
padding: ${theme.spacing.md}; padding: ${theme.spacing.md};
height: 100%;
`, `,
}; };
}); });

View File

@ -10,7 +10,9 @@ interface Props {
const getTabContentStyle = stylesFactory((theme: GrafanaTheme) => { const getTabContentStyle = stylesFactory((theme: GrafanaTheme) => {
return { return {
tabContent: css` tabContent: css`
padding: ${theme.spacing.xs} 0; padding: ${theme.spacing.xs};
height: 90%;
overflow: hidden;
`, `,
}; };
}); });

View File

@ -136,7 +136,7 @@ export class PanelInspector extends PureComponent<Props, State> {
return <metaDS.components.MetadataInspector datasource={metaDS} data={data} />; return <metaDS.components.MetadataInspector datasource={metaDS} data={data} />;
} }
renderDataTab(width: number) { renderDataTab(width: number, height: number) {
const { data, selected } = this.state; const { data, selected } = this.state;
const styles = getStyles(); const styles = getStyles();
if (!data || !data.length) { if (!data || !data.length) {
@ -177,7 +177,7 @@ export class PanelInspector extends PureComponent<Props, State> {
</Forms.Button> </Forms.Button>
</div> </div>
</div> </div>
<Table width={width} height={400} data={processed[selected]} /> <Table width={width} height={height} data={processed[selected]} />
</div> </div>
); );
} }
@ -211,14 +211,15 @@ export class PanelInspector extends PureComponent<Props, State> {
})} })}
</TabsBar> </TabsBar>
<TabContent> <TabContent>
<AutoSizer disableHeight> <AutoSizer>
{({ width }) => { {({ width, height }) => {
if (width === 0) { if (width === 0) {
return null; return null;
} }
return ( return (
<div style={{ width }}> <div style={{ width }}>
{tab === InspectTab.Data && this.renderDataTab(width)} {tab === InspectTab.Data && this.renderDataTab(width, height)}
{tab === InspectTab.Meta && this.renderMetadataInspector()} {tab === InspectTab.Meta && this.renderMetadataInspector()}