From e762190616c09bed88df040d150c3272a2f5e317 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Sat, 18 Jan 2020 08:24:17 +0100
Subject: [PATCH] Inspect: table take full height in drawer (#21580)

---
 packages/grafana-ui/src/components/Drawer/Drawer.tsx  |  1 +
 .../grafana-ui/src/components/Tabs/TabContent.tsx     |  4 +++-
 .../dashboard/components/Inspector/PanelInspector.tsx | 11 ++++++-----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index d05ab950590..aeed8c30a95 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -54,6 +54,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     content: css`
       padding: ${theme.spacing.md};
+      height: 100%;
     `,
   };
 });
diff --git a/packages/grafana-ui/src/components/Tabs/TabContent.tsx b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
index 3681329cfc9..35aeb351f7f 100644
--- a/packages/grafana-ui/src/components/Tabs/TabContent.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
@@ -10,7 +10,9 @@ interface Props {
 const getTabContentStyle = stylesFactory((theme: GrafanaTheme) => {
   return {
     tabContent: css`
-      padding: ${theme.spacing.xs} 0;
+      padding: ${theme.spacing.xs};
+      height: 90%;
+      overflow: hidden;
     `,
   };
 });
diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
index 619e15ef267..3eba34db81f 100644
--- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
+++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
@@ -136,7 +136,7 @@ export class PanelInspector extends PureComponent<Props, State> {
     return <metaDS.components.MetadataInspector datasource={metaDS} data={data} />;
   }
 
-  renderDataTab(width: number) {
+  renderDataTab(width: number, height: number) {
     const { data, selected } = this.state;
     const styles = getStyles();
     if (!data || !data.length) {
@@ -177,7 +177,7 @@ export class PanelInspector extends PureComponent<Props, State> {
             </Forms.Button>
           </div>
         </div>
-        <Table width={width} height={400} data={processed[selected]} />
+        <Table width={width} height={height} data={processed[selected]} />
       </div>
     );
   }
@@ -211,14 +211,15 @@ export class PanelInspector extends PureComponent<Props, State> {
           })}
         </TabsBar>
         <TabContent>
-          <AutoSizer disableHeight>
-            {({ width }) => {
+          <AutoSizer>
+            {({ width, height }) => {
               if (width === 0) {
                 return null;
               }
+
               return (
                 <div style={{ width }}>
-                  {tab === InspectTab.Data && this.renderDataTab(width)}
+                  {tab === InspectTab.Data && this.renderDataTab(width, height)}
 
                   {tab === InspectTab.Meta && this.renderMetadataInspector()}