From bda13a1b5d68fdfd489f5c70965b2561b273cf37 Mon Sep 17 00:00:00 2001
From: Andre Pereira <adrapereira@gmail.com>
Date: Tue, 10 Jan 2023 11:58:49 +0000
Subject: [PATCH] Explore: Expand table height to show sub-tables (#60359)

* Expand table height to show sub-tables when there isn't enough space

* Fix after merge
---
 packages/grafana-ui/src/components/Table/Table.tsx | 14 ++++++++++++++
 packages/grafana-ui/src/components/Table/types.ts  |  1 +
 public/app/features/explore/TableContainer.tsx     |  1 +
 3 files changed, 16 insertions(+)

diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index ee0e8da53df..03d2586920f 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -41,6 +41,7 @@ export const Table = memo((props: Props) => {
     data,
     subData,
     height,
+    maxHeight,
     onCellFilterAdded,
     width,
     columnMinWidth = COLUMN_MIN_WIDTH,
@@ -189,6 +190,18 @@ export const Table = memo((props: Props) => {
 
   const pageSize = Math.round(listHeight / tableStyles.rowHeight) - 1;
 
+  // Make sure we have room to show the sub-table
+  const expandedIndices = Object.keys(extendedState.expanded);
+  if (expandedIndices.length) {
+    const subTablesHeight = expandedIndices.reduce((sum, index) => {
+      const subLength = subData?.find((frame) => frame.meta?.custom?.parentRowIndex === parseInt(index, 10))?.length;
+      return subLength ? sum + tableStyles.rowHeight * (subLength + 1) : sum;
+    }, 0);
+    if (listHeight < subTablesHeight) {
+      listHeight = Math.min(listHeight + subTablesHeight, maxHeight || Number.MAX_SAFE_INTEGER);
+    }
+  }
+
   useEffect(() => {
     // Don't update the page size if it is less than 1
     if (pageSize <= 0) {
@@ -213,6 +226,7 @@ export const Table = memo((props: Props) => {
             position: 'absolute',
             bottom: 0,
           };
+
           return (
             <div style={subTableStyle}>
               <Table
diff --git a/packages/grafana-ui/src/components/Table/types.ts b/packages/grafana-ui/src/components/Table/types.ts
index d737a019d77..cec6034cd5c 100644
--- a/packages/grafana-ui/src/components/Table/types.ts
+++ b/packages/grafana-ui/src/components/Table/types.ts
@@ -65,6 +65,7 @@ export interface Props {
   data: DataFrame;
   width: number;
   height: number;
+  maxHeight?: number;
   /** Minimal column width specified in pixels */
   columnMinWidth?: number;
   noHeader?: boolean;
diff --git a/public/app/features/explore/TableContainer.tsx b/public/app/features/explore/TableContainer.tsx
index a999d82afd7..bdf6f6af4d7 100644
--- a/public/app/features/explore/TableContainer.tsx
+++ b/public/app/features/explore/TableContainer.tsx
@@ -99,6 +99,7 @@ export class TableContainer extends PureComponent<Props> {
             subData={subFrames}
             width={tableWidth}
             height={height}
+            maxHeight={600}
             onCellFilterAdded={onCellFilterAdded}
           />
         ) : (