improve "Run Terminal Command in all Student Projects"

- raise default timeout to 1 minute (from 30s)
- show how long it took
- allow timeout to be configured
- explain what will happen

Author: williamstein

src/packages/frontend/course/configuration/terminal-command.tsx

@@ -3,7 +3,15 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { List as AntdList, Button, Card, Form, Input, Space } from "antd";
+import {
+  List as AntdList,
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  Space,
+} from "antd";
 import { List, Map, fromJS } from "immutable";
 
 import {
@@ -14,12 +22,13 @@ import {
   useActions,
   useRedux,
 } from "@cocalc/frontend/app-framework";
+import { useState } from "react";
 import { Gap, Icon } from "@cocalc/frontend/components";
 import { COLORS } from "@cocalc/util/theme";
 import { CourseActions } from "../actions";
+import { MAX_PARALLEL_TASKS } from "../student-projects/actions";
 import { CourseStore, TerminalCommand, TerminalCommandOutput } from "../store";
 import { Result } from "../student-projects/run-in-all-projects";
-
 interface Props {
   name: string;
 }
@@ -30,8 +39,9 @@ export const TerminalCommandPanel: React.FC<Props> = React.memo(
     const actions = useActions<CourseActions>({ name });
     const terminal_command: TerminalCommand | undefined = useRedux(
       name,
-      "terminal_command"
+      "terminal_command",
     );
+    const [timeout, setTimeout] = useState<number | null>(1);
 
     function render_button(running: boolean): Rendered {
       return (
@@ -59,16 +69,30 @@ export const TerminalCommandPanel: React.FC<Props> = React.memo(
             run_terminal_command();
           }}
         >
-          <Space.Compact style={{ display: "flex", whiteSpace: "nowrap" }}>
+          <Space.Compact
+            style={{
+              display: "flex",
+              whiteSpace: "nowrap",
+              marginBottom: "5px",
+            }}
+          >
             <Input
               style={{ fontFamily: "monospace" }}
               placeholder="Terminal command..."
               onChange={(e) => {
                 set_field("input", e.target.value);
               }}
+              onPressEnter={() => run_terminal_command()}
             />
             {render_button(running)}
           </Space.Compact>
+          <InputNumber
+            value={timeout}
+            onChange={(t) => setTimeout(t ?? null)}
+            min={0}
+            max={30}
+            addonAfter={"minute timeout"}
+          />
         </Form>
       );
     }
@@ -117,12 +141,12 @@ export const TerminalCommandPanel: React.FC<Props> = React.memo(
 
     function set_field(
       field: "input" | "running" | "output",
-      value: any
+      value: any,
     ): void {
       const store: CourseStore = get_store();
       let terminal_command: TerminalCommand = store.get(
         "terminal_command",
-        Map() as TerminalCommand
+        Map() as TerminalCommand,
       );
       if (value == null) {
         terminal_command = terminal_command.delete(field);
@@ -158,12 +182,11 @@ export const TerminalCommandPanel: React.FC<Props> = React.memo(
       if (!input) return;
       try {
         set_field("running", true);
-        await actions.student_projects.run_in_all_student_projects(
-          input,
-          undefined,
-          undefined,
-          run_log
-        );
+        await actions.student_projects.run_in_all_student_projects({
+          command: input,
+          timeout: (timeout ? timeout : 1) * 60,
+          log: run_log,
+        });
       } finally {
         set_field("running", false);
       }
@@ -192,11 +215,13 @@ export const TerminalCommandPanel: React.FC<Props> = React.memo(
         {render_terminal()}
         <hr />
         <span style={{ color: "#666" }}>
-          Run a terminal command in the home directory of all student projects.
+          Run a bash terminal command in the home directory of all student
+          projects. Up to {MAX_PARALLEL_TASKS} commands run in parallel, with a
+          timeout of {timeout} minutes.
         </span>
       </Card>
     );
-  }
+  },
 );
 
 const PROJECT_LINK_STYLE: CSS = {
@@ -236,6 +261,8 @@ const Output: React.FC<{ result: TerminalCommandOutput }> = React.memo(
     const stdout = result.get("stdout");
     const stderr = result.get("stderr");
     const noresult = !stdout && !stderr;
+    const timeout = result.get("timeout");
+    const total_time = result.get("total_time");
 
     return (
       <div style={{ padding: 0, width: "100%" }}>
@@ -244,8 +271,16 @@ const Output: React.FC<{ result: TerminalCommandOutput }> = React.memo(
         </a>
         {stdout && <pre style={CODE_STYLE}>{stdout}</pre>}
         {stderr && <pre style={ERR_STYLE}>{stderr}</pre>}
-        {noresult && <div>No result/possibly timeout</div>}
+        {noresult && (
+          <div>
+            No output{" "}
+            {total_time != null && timeout != null && total_time >= timeout - 5
+              ? "(possible timeout)"
+              : ""}
+          </div>
+        )}
+        {total_time != null && <>(Time: {total_time} seconds)</>}
       </div>
     );
-  }
+  },
 );

src/packages/frontend/course/store.ts

@@ -44,6 +44,7 @@ export type TerminalCommandOutput = TypedMap<{
   project_id: string;
   stdout?: string;
   stderr?: string;
+  time_ms?: number;
 }>;
 
 export type TerminalCommand = TypedMap<{
@@ -226,7 +227,7 @@ export class CourseStore extends Store<CourseState> {
   // that graded the given student, or undefined if no relevant assignment.
   public get_peers_that_graded_student(
     assignment_id: string,
-    student_id: string
+    student_id: string,
   ): string[] {
     const peers: string[] = [];
     const assignment = this.get_assignment(assignment_id);
@@ -374,7 +375,7 @@ export class CourseStore extends Store<CourseState> {
         const name = users.get_name(student.get("account_id"));
         if (name != null) {
           extra = ` (You call them "${student.has("first_name")} ${student.has(
-            "last_name"
+            "last_name",
           )}", but they call themselves "${name}".)`;
         }
       }
@@ -392,7 +393,7 @@ export class CourseStore extends Store<CourseState> {
     }
     if (student.has("first_name") || student.has("last_name")) {
       return [student.get("last_name", ""), student.get("first_name", "")].join(
-        " "
+        " ",
       );
     }
     const account_id = student.get("account_id");
@@ -430,7 +431,7 @@ export class CourseStore extends Store<CourseState> {
     opts: {
       include_deleted?: boolean;
       deleted_only?: boolean;
-    } = {}
+    } = {},
   ): string[] {
     // include_deleted = if true, also include deleted projects
     // deleted_only = if true, only include deleted projects
@@ -474,8 +475,8 @@ export class CourseStore extends Store<CourseState> {
     v.sort((a, b) =>
       cmp(
         this.get_student_sort_name(a.get("student_id")),
-        this.get_student_sort_name(b.get("student_id"))
-      )
+        this.get_student_sort_name(b.get("student_id")),
+      ),
     );
     return v;
   }
@@ -489,14 +490,14 @@ export class CourseStore extends Store<CourseState> {
 
   public get_nbgrader_scores(
     assignment_id: string,
-    student_id: string
+    student_id: string,
   ): { [ipynb: string]: NotebookScores | string } | undefined {
     const { assignment } = this.resolve({ assignment_id });
     return assignment?.getIn(["nbgrader_scores", student_id])?.toJS();
   }
 
   public get_nbgrader_score_ids(
-    assignment_id: string
+    assignment_id: string,
   ): { [ipynb: string]: string[] } | undefined {
     const { assignment } = this.resolve({ assignment_id });
     const ids = assignment?.get("nbgrader_score_ids")?.toJS();
@@ -606,7 +607,7 @@ export class CourseStore extends Store<CourseState> {
   // get info about relation between a student and a given assignment
   public student_assignment_info(
     student_id: string,
-    assignment_id: string
+    assignment_id: string,
   ): {
     last_assignment?: LastCopyInfo;
     last_collect?: LastCopyInfo;
@@ -665,7 +666,7 @@ export class CourseStore extends Store<CourseState> {
     step: AssignmentCopyStep,
     assignment_id: string,
     student_id: string,
-    no_error?: boolean
+    no_error?: boolean,
   ): boolean {
     const x = this.getIn([
       "assignments",
@@ -688,7 +689,7 @@ export class CourseStore extends Store<CourseState> {
   }
 
   public get_assignment_status(
-    assignment_id: string
+    assignment_id: string,
   ): AssignmentStatus | undefined {
     //
     // Compute and return an object that has fields (deleted students are ignored)
@@ -791,7 +792,7 @@ export class CourseStore extends Store<CourseState> {
 
   public student_handout_info(
     student_id: string,
-    handout_id: string
+    handout_id: string,
   ): { status?: LastCopyInfo; handout_id: string; student_id: string } {
     // status -- important to be undefined if no info -- assumed in code
     const status = this.getIn(["handouts", handout_id, "status", student_id]);
@@ -819,7 +820,7 @@ export class CourseStore extends Store<CourseState> {
   }
 
   public get_handout_status(
-    handout_id: string
+    handout_id: string,
   ): undefined | { handout: number; not_handout: number } {
     //
     // Compute and return an object that has fields (deleted students are ignored)
@@ -881,13 +882,13 @@ export class CourseStore extends Store<CourseState> {
       student_project_ids: set(
         this.get_student_project_ids({
           include_deleted: true,
-        })
+        }),
       ),
       deleted_project_ids: set(
         this.get_student_project_ids({
           include_deleted: true,
           deleted_only: true,
-        })
+        }),
       ),
       upgrade_goal,
     });