Logs Panel: Table UI - Query with few rows renders short table (#77653)

* remove height calculation based on row count

public/app/features/explore/Logs/LogsTableWrap.tsx

@@ -50,8 +50,7 @@ export function LogsTableWrap(props: Props) {
   // Filtered copy of columnsWithMeta that only includes matching results
   const [filteredColumnsWithMeta, setFilteredColumnsWithMeta] = useState<fieldNameMetaStore | undefined>(undefined);
 
-  const [height, setHeight] = useState<number>(600);
+  const height = getTableHeight();
-
   const dataFrame = logsFrames[0];
 
   const getColumnsFromProps = useCallback(
@@ -200,11 +199,6 @@ export function LogsTableWrap(props: Props) {
     // The panel state is updated when the user interacts with the multi-select sidebar
   }, [dataFrame, getColumnsFromProps]);
 
-  // As the number of rows change, so too must the height of the table
-  useEffect(() => {
-    setHeight(getTableHeight(dataFrame.length, false));
-  }, [dataFrame.length]);
-
   if (!columnsWithMeta) {
     return null;
   }
@@ -359,17 +353,10 @@ function getStyles(theme: GrafanaTheme2, height: number, width: number) {
   };
 }
 
-/**
+const getTableHeight = () => {
- * from public/app/features/explore/Table/TableContainer.tsx
+  // Instead of making the height of the table based on the content (like in the table panel itself), let's try to use the vertical space that is available.
- */
+  // Since this table is in explore, we can expect the user to be running multiple queries that return disparate numbers of rows and labels in the same session
-const getTableHeight = (rowCount: number, hasSubFrames: boolean) => {
+  // Also changing the height of the table between queries can be and cause content to jump, so we'll set a minimum height of 500px, and a max based on the innerHeight
-  if (rowCount === 0) {
+  // Ideally the table container should always be able to fit in the users viewport without needing to scroll
-    return 200;
+  return Math.max(window.innerHeight - 500, 500);
-  }
-  // 600px is pretty small for taller monitors, using the innerHeight minus an arbitrary 500px so the table can be viewed in its entirety without needing to scroll outside the panel to see the top and the bottom
-  const max = Math.max(window.innerHeight - 500, 600);
-  const min = Math.max(rowCount * 36, hasSubFrames ? 300 : 0) + 40 + 46;
-  // tries to estimate table height, with a min of 300 and a max of 600
-  // if there are multiple tables, there is no min
-  return Math.min(max, min);
 };