frontend/process info table: compute height correctly

Author: haraldschilly

src/packages/frontend/project/info/full.tsx

@@ -5,8 +5,10 @@
 
 declare let DEBUG;
 
-import { InfoCircleOutlined, ScheduleOutlined } from "@ant-design/icons";
 import { Alert, Button, Form, Modal, Popconfirm, Switch, Table } from "antd";
+import { useEffect, useRef, useState } from "react";
+
+import { InfoCircleOutlined, ScheduleOutlined } from "@ant-design/icons";
 import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
 import { CSS, ProjectActions, redux } from "@cocalc/frontend/app-framework";
 import { A, Loading, Tip } from "@cocalc/frontend/components";
@@ -89,6 +91,58 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
     onCellProps,
   } = props;
 
+  const problemsRef = useRef<HTMLDivElement>(null);
+  const cgroupRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+  const explanationRef = useRef<HTMLDivElement>(null);
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const [tableHeight, setTableHeight] = useState<number>(400);
+
+  useEffect(() => {
+    const calculateTableHeight = () => {
+      // Find the parent container with class "smc-vfill"
+      let parentContainer = headerRef.current?.closest(
+        ".smc-vfill",
+      ) as HTMLElement;
+      if (!parentContainer) return;
+
+      const parentHeight = parentContainer.getBoundingClientRect().height;
+      let usedHeight = 0;
+
+      // Add height of ProjectProblems component
+      if (problemsRef.current) {
+        usedHeight += problemsRef.current.offsetHeight;
+      }
+
+      // Add height of CGroup component
+      if (cgroupRef.current) {
+        usedHeight += cgroupRef.current.offsetHeight;
+      }
+
+      // Add height of header row
+      if (headerRef.current) {
+        usedHeight += headerRef.current.offsetHeight;
+      }
+
+      // Add height of explanation row if visible
+      if (explanationRef.current) {
+        usedHeight += explanationRef.current.offsetHeight;
+      }
+
+      // Add more buffer for table header, margins, and other spacing
+      usedHeight += 120;
+
+      const availableHeight = Math.max(300, parentHeight - usedHeight);
+      setTableHeight(availableHeight);
+    };
+
+    calculateTableHeight();
+
+    // Recalculate on window resize
+    window.addEventListener("resize", calculateTableHeight);
+    return () => window.removeEventListener("resize", calculateTableHeight);
+  }, [show_explanation, ptree]);
+
   function render_help() {
     return (
       <Form.Item label="Help:">
@@ -295,11 +349,16 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
       </Tip>
     );
 
-    const table_style: CSS = { marginBottom: "2rem" };
+    const table_style: CSS = {
+      marginBottom: "2rem",
+    };
 
     return (
       <>
-        <Row style={{ marginBottom: "10px", marginTop: "20px" }}>
+        <Row
+          ref={headerRef}
+          style={{ marginBottom: "10px", marginTop: "20px" }}
+        >
           <Col md={9}>
             <Form layout="inline">
               <Form.Item label="Table of Processes" />
@@ -314,13 +373,13 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
             </Form>
           </Col>
         </Row>
-        <Row>{render_explanation()}</Row>
+        <Row ref={explanationRef}>{render_explanation()}</Row>
         <Row>
           <Table<ProcessRow>
             dataSource={ptree}
             size={"small"}
             pagination={false}
-            scroll={{ y: "65vh" }}
+            scroll={{ y: tableHeight }}
             style={table_style}
             expandable={expandable}
             rowSelection={rowSelection}
@@ -472,15 +531,19 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
   function render_body() {
     return (
       <>
-        <ProjectProblems project_status={project_status} />
-        <CGroup
-          have_cgroup={info?.cgroup != null}
-          cg_info={cg_info}
-          disk_usage={disk_usage}
-          pt_stats={pt_stats}
-          start_ts={start_ts}
-          project_status={project_status}
-        />
+        <div ref={problemsRef}>
+          <ProjectProblems project_status={project_status} />
+        </div>
+        <div ref={cgroupRef}>
+          <CGroup
+            have_cgroup={info?.cgroup != null}
+            cg_info={cg_info}
+            disk_usage={disk_usage}
+            pt_stats={pt_stats}
+            start_ts={start_ts}
+            project_status={project_status}
+          />
+        </div>
         {render_top()}
         {render_modals()}
         {DEBUG && render_general_status()}

src/packages/frontend/project/info/project-info.tsx

@@ -4,6 +4,8 @@
  */
 
 import { Alert } from "antd";
+
+import { cgroup_stats } from "@cocalc/comm/project-status/utils";
 import {
   React,
   Rendered,
@@ -13,20 +15,19 @@ import {
   useState,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
+import ShowError from "@cocalc/frontend/components/error";
 import { useProjectContext } from "@cocalc/frontend/project/context";
+import { unreachable } from "@cocalc/util/misc";
 import {
   Process,
   ProjectInfo as ProjectInfoType,
 } from "@cocalc/util/types/project-info/types";
-import { cgroup_stats } from "@cocalc/comm/project-status/utils";
-import { unreachable } from "@cocalc/util/misc";
 import { CoCalcFile, render_cocalc_btn } from "./components";
 import { Flyout } from "./flyout";
 import { Full } from "./full";
 import { CGroupInfo, DUState, PTStats, ProcessRow } from "./types";
-import { grid_warning, linearList, process_tree, sum_children } from "./utils";
 import useProjectInfo from "./use-project-info";
-import ShowError from "@cocalc/frontend/components/error";
+import { grid_warning, linearList, process_tree, sum_children } from "./utils";
 
 interface Props {
   project_id: string;
@@ -82,7 +83,7 @@ export const ProjectInfo: React.FC<Props> = React.memo(
     const [ptree, set_ptree] = useState<ProcessRow[] | undefined>(undefined);
     const [pt_stats, set_pt_stats] = useState<PTStats>(pt_stats_init);
     const [selected, set_selected] = useState<number[]>([]);
-    const [expanded, set_expanded] = useState<(string|number)[]>([]);
+    const [expanded, set_expanded] = useState<(string | number)[]>([]);
     const [have_children, set_have_children] = useState<string[]>([]);
     const [cg_info, set_cg_info] = useState<CGroupInfo>(gc_info_init);
     const [disk_usage, set_disk_usage] = useState<DUState>(du_init);
@@ -116,7 +117,7 @@ export const ProjectInfo: React.FC<Props> = React.memo(
 
     function update_top(info: ProjectInfoType) {
       // this shouldn't be the case, but somehow I saw this happening once
-      // the ProjectInfoType type is updated to refrect this edge case and here we bail out
+      // the ProjectInfoType type is updated to reflect this edge case and here we bail out
       // and wait for the next update of "info" to get all processes…
       if (info.processes == null) return;
       switch (mode) {
@@ -216,7 +217,7 @@ export const ProjectInfo: React.FC<Props> = React.memo(
       to_str?: (val) => Rendered,
     ) {
       const cell_val = (val, proc): number => {
-        // we have to check for length==0, because initally rows are all expanded but
+        // we have to check for length==0, because initially rows are all expanded but
         // onExpandedRowsChange isn't triggered
         if (
           expanded.length == 0 ||
@@ -296,7 +297,11 @@ export const ProjectInfo: React.FC<Props> = React.memo(
     }
 
     const showError = (
-      <ShowError style={{ margin: "15px 0" }} error={error} setError={setError} />
+      <ShowError
+        style={{ margin: "15px 0" }}
+        error={error}
+        setError={setError}
+      />
     );
 
     switch (mode) {