Merge pull request #8514 from sagemathinc/frontend-processes-vertical-size

Frontend: processes vertical size

Author: williamstein

src/packages/frontend/cspell.json

@@ -70,7 +70,11 @@
     "flyouts",
     "buttonbar",
     "noconf",
-    "flyoutdragbar"
+    "flyoutdragbar",
+    "ptree",
+    "pchildren",
+    "nprocs",
+    "pids"
   ],
   "flagWords": [],
   "ignorePaths": ["node_modules/**", "dist/**", "dist-ts/**", "build/**"],

src/packages/frontend/project/context.tsx

@@ -32,6 +32,7 @@ export interface ProjectContextState {
   actions?: ProjectActions;
   active_project_tab?: string;
   compute_image: string | undefined;
+  contentSize: { width: number; height: number };
   enabledLLMs: LLMServicesAvailable;
   flipTabs: [number, React.Dispatch<React.SetStateAction<number>>];
   group?: UserGroup;
@@ -47,22 +48,15 @@ export interface ProjectContextState {
   onCoCalcDocker: boolean;
   project_id: string;
   project?: Project;
+  setContentSize: (size: { width: number; height: number }) => void;
   status: ProjectStatus;
 }
 
 export const emptyProjectContext = {
   actions: undefined,
   active_project_tab: undefined,
-  group: undefined,
-  project: undefined,
-  is_active: false,
-  project_id: "",
-  isRunning: undefined,
-  status: INIT_PROJECT_STATE,
-  hasInternet: undefined,
-  flipTabs: [0, () => {}],
-  onCoCalcCom: true,
-  onCoCalcDocker: false,
+  compute_image: undefined,
+  contentSize: { width: 0, height: 0 },
   enabledLLMs: {
     openai: false,
     google: false,
@@ -72,12 +66,22 @@ export const emptyProjectContext = {
     custom_openai: false,
     user: false,
   },
+  flipTabs: [0, () => {}],
+  group: undefined,
+  hasInternet: undefined,
+  is_active: false,
+  isRunning: undefined,
   mainWidthPx: 0,
   manageStarredFiles: {
     starred: [],
     setStarredPath: () => {},
   },
-  compute_image: undefined,
+  onCoCalcCom: true,
+  onCoCalcDocker: false,
+  project: undefined,
+  project_id: "",
+  setContentSize: () => {},
+  status: INIT_PROJECT_STATE,
 } as ProjectContextState;
 
 export const ProjectContext: Context<ProjectContextState> =
@@ -141,10 +145,13 @@ export function useProjectContextProvider({
     userDefinedLLM,
   ]);
 
+  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });
+
   return {
     actions,
     active_project_tab,
     compute_image,
+    contentSize,
     enabledLLMs,
     flipTabs,
     group,
@@ -157,6 +164,7 @@ export function useProjectContextProvider({
     onCoCalcDocker,
     project_id,
     project,
+    setContentSize,
     status,
   };
 }

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

@@ -3,20 +3,26 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// cspell:ignore Questionmark
+
 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";
 import { SiteName } from "@cocalc/frontend/customize";
+import { field_cmp, seconds2hms } from "@cocalc/util/misc";
+import { COLORS } from "@cocalc/util/theme";
 import {
   Process,
   ProjectInfo as ProjectInfoType,
 } from "@cocalc/util/types/project-info/types";
-import { field_cmp, seconds2hms } from "@cocalc/util/misc";
-import { COLORS } from "@cocalc/util/theme";
+import { useProjectContext } from "../context";
+import { ROOT_STYLE } from "../servers/consts";
 import { RestartProject } from "../settings/restart-project";
 import {
   AboutContent,
@@ -28,7 +34,6 @@ import {
 } from "./components";
 import { CGroupInfo, DUState, PTStats, ProcessRow } from "./types";
 import { DETAILS_BTN_TEXT, SSH_KEYS_DOC } from "./utils";
-import { ROOT_STYLE } from "../servers/consts";
 
 interface Props {
   any_alerts: () => boolean;
@@ -89,6 +94,53 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
     onCellProps,
   } = props;
 
+  const { contentSize } = useProjectContext();
+
+  const problemsRef = useRef<HTMLDivElement>(null);
+  const cgroupRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+  const explanationRef = useRef<HTMLDivElement>(null);
+  const generalStatusRef = useRef<HTMLDivElement>(null);
+  const [tableHeight, setTableHeight] = useState<number>(400);
+
+  useEffect(() => {
+    const calculateTableHeight = () => {
+      const parentHeight = contentSize.height;
+      if (parentHeight === 0) return; // Wait until contentSize is measured
+
+      let usedHeight = 0;
+
+      // Add height of ProjectProblems component
+      usedHeight += problemsRef.current?.offsetHeight ?? 0;
+
+      // Add height of CGroup component
+      usedHeight += cgroupRef.current?.offsetHeight ?? 0;
+
+      // Add height of header row
+      usedHeight += headerRef.current?.offsetHeight ?? 0;
+
+      // Add height of explanation row if visible
+      usedHeight += explanationRef.current?.offsetHeight ?? 0;
+
+      // Add height of general status row if DEBUG is enabled
+      if (DEBUG) {
+        usedHeight += generalStatusRef.current?.offsetHeight ?? 0;
+      }
+
+      // Add more buffer for table header, margins, and other spacing
+      usedHeight += 100;
+
+      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, contentSize.height, contentSize.width]);
+
   function render_help() {
     return (
       <Form.Item label="Help:">
@@ -295,11 +347,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 +371,14 @@ 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>
+            key={`table-${contentSize.width}-${contentSize.height}`}
             dataSource={ptree}
             size={"small"}
             pagination={false}
-            scroll={{ y: "65vh" }}
+            scroll={{ y: tableHeight }}
             style={table_style}
             expandable={expandable}
             rowSelection={rowSelection}
@@ -439,7 +497,7 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
       </div>
     );
     return (
-      <Col lg={8} lgOffset={2} md={12} mdOffset={0}>
+      <Col md={12} mdOffset={0}>
         <Alert
           message={msg}
           style={{ margin: "10px 0" }}
@@ -457,30 +515,36 @@ export function Full(props: Readonly<Props>): React.JSX.Element {
 
   function render_general_status() {
     return (
-      <Col md={12} style={{ color: COLORS.GRAY }}>
-        Timestamp:{" "}
-        {info?.timestamp != null ? (
-          <code>{new Date(info.timestamp).toISOString()}</code>
-        ) : (
-          "no timestamp"
-        )}{" "}
-        | Status: <code>{status}</code>
+      <Col md={12}>
+        <div ref={generalStatusRef} style={{ color: COLORS.GRAY }}>
+          Timestamp:{" "}
+          {info?.timestamp != null ? (
+            <code>{new Date(info.timestamp).toISOString()}</code>
+          ) : (
+            "no timestamp"
+          )}{" "}
+          | Status: <code>{status}</code>
+        </div>
       </Col>
     );
   }
 
   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

@@ -3,7 +3,11 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
+// cSpell:ignore chldsum
+
 import { Alert } from "antd";
+
+import { cgroup_stats } from "@cocalc/comm/project-status/utils";
 import {
   React,
   Rendered,
@@ -13,20 +17,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 +85,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 +119,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) {
@@ -131,7 +134,7 @@ export const ProjectInfo: React.FC<Props> = React.memo(
           set_have_children(pchildren);
           break;
         case "flyout":
-          // flyout does not nest children, not enogh space
+          // flyout does not nest children, not enough space
           set_ptree(linearList(info.processes));
           break;
         default:
@@ -216,7 +219,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 +299,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) {