course -- fix #3286 -- "course assignment UI indicator could be stuck in assigning"

- also use wrap on Space'd buttons so they don't get cut off ever.

Author: williamstein

src/packages/frontend/client/project.ts

@@ -95,7 +95,7 @@ export class ProjectClient {
     overwrite_newer?: boolean; // overwrite newer versions of file at destination (destructive)
     delete_missing?: boolean; // delete files in dest that are missing from source (destructive)
     backup?: boolean; // make ~ backup files instead of overwriting changed files
-    timeout?: number; // how long to wait for the copy to complete before reporting "error" (though it could still succeed)
+    timeout?: number; // **timeout in seconds** -- how long to wait for the copy to complete before reporting "error" (though it could still succeed)
     exclude?: string[]; // list of patterns to exclude; this uses exactly the (confusing) rsync patterns
   }): Promise<void> {
     const is_public = opts.public;

src/packages/frontend/course/assignments/actions.ts

@@ -29,7 +29,6 @@ import {
   defaults,
   endswith,
   len,
-  mswalltime,
   path_split,
   peer_grading,
   split,
@@ -72,6 +71,7 @@ import {
   PEER_GRADING_GUIDELINES_COMMENT_MARKER,
   DUE_DATE_FILENAME,
 } from "./consts";
+import { COPY_TIMEOUT_MS } from "../consts";
 
 const UPDATE_DUE_DATE_FILENAME_DEBOUNCE_MS = 3000;
 
@@ -464,6 +464,7 @@ export class AssignmentsActions {
         overwrite_newer: true,
         backup: true,
         delete_missing: false,
+        timeout: COPY_TIMEOUT_MS / 1000,
       });
       // write their name to a file
       const name = store.get_student_name_extra(student_id);
@@ -623,6 +624,7 @@ ${details}
         backup: true,
         delete_missing: false,
         exclude: peer_graded ? ["*GRADER*.txt"] : undefined,
+        timeout: COPY_TIMEOUT_MS / 1000,
       });
       finish("");
     } catch (err) {
@@ -712,7 +714,7 @@ ${details}
     const a = this.course_actions.get_one(obj);
     if (a == null) return;
     const x = a[type] ? a[type] : {};
-    x[student_id] = { time: mswalltime() };
+    x[student_id] = { time: webapp_client.server_time() };
     if (err) {
       x[student_id].error = err;
     }
@@ -741,7 +743,7 @@ ${details}
     if (y.start != null && webapp_client.server_time() - y.start <= 15000) {
       return true; // never retry a copy until at least 15 seconds later.
     }
-    y.start = mswalltime();
+    y.start = webapp_client.server_time();
     x[student_id] = y;
     obj[type] = x;
     this.course_actions.set(obj);
@@ -853,6 +855,7 @@ ${details}
         overwrite_newer: !!overwrite, // default is "false"
         delete_missing: !!overwrite, // default is "false"
         backup: !!!overwrite, // default is "true"
+        timeout: COPY_TIMEOUT_MS / 1000,
       });
 
       // successful finish
@@ -1362,6 +1365,7 @@ ${details}
         overwrite_newer: false,
         delete_missing: false,
         exclude: ["*STUDENT*.txt", "*" + DUE_DATE_FILENAME + "*"],
+        timeout: COPY_TIMEOUT_MS / 1000,
       });
     };
 
@@ -1444,6 +1448,7 @@ ${details}
         target_path,
         overwrite_newer: false,
         delete_missing: false,
+        timeout: COPY_TIMEOUT_MS / 1000,
       });
 
       // write local file identifying the grader
@@ -1998,6 +2003,7 @@ ${details}
               overwrite_newer: true,
               delete_missing: true,
               backup: false,
+              timeout: COPY_TIMEOUT_MS / 1000,
             });
           } else {
             ephemeralGradePath = false;
@@ -2193,7 +2199,7 @@ ${details}
       Map(),
     );
     const key = student_id ? `${assignment_id}-${student_id}` : assignment_id;
-    nbgrader_run_info = nbgrader_run_info.set(key, Date.now());
+    nbgrader_run_info = nbgrader_run_info.set(key, webapp_client.server_time());
     this.course_actions.setState({ nbgrader_run_info });
   };
 

src/packages/frontend/course/assignments/assignment.tsx

@@ -659,7 +659,7 @@ export function Assignment({
         </div>
         {render_has_student_subdir(step)}
         {render_skip(step)}
-        <Space>
+        <Space wrap>
           {render_copy_cancel(step)}
           <Button
             key="yes"
@@ -719,7 +719,7 @@ export function Assignment({
         <div style={{ marginBottom: "15px" }}>
           {copy_confirm_all_caution(step)}
         </div>
-        <Space>
+        <Space wrap>
           {render_copy_cancel(step)}
           <Button
             key={"all"}
@@ -756,7 +756,7 @@ export function Assignment({
         </div>
         {render_has_student_subdir(step)}
         {render_skip(step)}
-        <Space>
+        <Space wrap>
           {render_copy_cancel(step)}
           <Button
             key="all"

src/packages/frontend/course/common/student-assignment-info.tsx

@@ -3,7 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Button, Col, Row, Space } from "antd";
+import { Button, Col, Row, Space, Spin } from "antd";
 import { ReactNode, useRef, useState } from "react";
 import { useActions } from "@cocalc/frontend/app-framework";
 import {
@@ -27,6 +27,8 @@ import {
 } from "../store";
 import { AssignmentCopyType } from "../types";
 import { useButtonSize } from "../util";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { COPY_TIMEOUT_MS } from "@cocalc/frontend/course/consts";
 
 interface StudentAssignmentInfoProps {
   name: string;
@@ -252,7 +254,7 @@ export function StudentAssignmentInfo({
       const t = nbgrader_run_info.get(
         assignment.get("assignment_id") + "-" + student.get("student_id"),
       );
-      if (t && Date.now() - t <= 1000 * 60 * 10) {
+      if (t && webapp_client.server_time() - t <= 1000 * 60 * 10) {
         // Time starting is set and it's also within the last few minutes.
         // This "few minutes" is just in case -- we probably shouldn't need
         // that at all ever, but it could make cocalc state usable in case of
@@ -264,7 +266,7 @@ export function StudentAssignmentInfo({
     label = running ? (
       <span>
         {" "}
-        <Icon name="cocalc-ring" spin /> Running nbgrader
+        <Spin /> Running nbgrader
       </span>
     ) : (
       <span>{label}</span>
@@ -279,7 +281,7 @@ export function StudentAssignmentInfo({
           onClick={() => {
             if (
               clicked_nbgrader.current != null &&
-              Date.now() - clicked_nbgrader.current.valueOf() <= 3000
+              webapp_client.server_time() - clicked_nbgrader.current.valueOf() <= 3000
             ) {
               // User *just* clicked, and we want to avoid double click
               // running nbgrader twice.
@@ -375,7 +377,7 @@ export function StudentAssignmentInfo({
           </div>,
         );
       }
-      return <Space>{v}</Space>;
+      return <Space wrap>{v}</Space>;
     } else {
       return (
         <Button
@@ -419,9 +421,9 @@ export function StudentAssignmentInfo({
 
   function render_open_copying(name: Steps, open, stop) {
     return (
-      <Space key="open_copying">
+      <Space key="open_copying" wrap>
         <Button key="copy" disabled={true} size={size}>
-          <Icon name="cocalc-ring" spin /> {name}ing
+          <Spin /> {name}ing
         </Button>
         <Button key="stop" danger onClick={stop} size={size}>
           Cancel <Icon name="times" />
@@ -488,7 +490,7 @@ export function StudentAssignmentInfo({
     const do_stop = () => stop(type, info.assignment_id, info.student_id);
     const v: JSX.Element[] = [];
     if (enable_copy) {
-      if (data.start) {
+      if (webapp_client.server_time() - (data.start ?? 0) < COPY_TIMEOUT_MS) {
         v.push(render_open_copying(step, do_open, do_stop));
       } else if (data.time) {
         v.push(

src/packages/frontend/course/consts.ts

@@ -0,0 +1,6 @@
+// All copy operations (e.g., assigning, collecting, etc.) is set to timeout after this long.
+// Also in the UI displaying that a copy is ongoing also times out after this long, e.g, if
+// the user refreshes their browser and nothing is going to update things again.
+// TODO: make this a configurable parameter, e.g., maybe users have very large assignments
+// or things are very slow.
+export const COPY_TIMEOUT_MS = 2 * 60 * 1000; // 2 minutes, for now -- starting project can take time.

src/packages/frontend/course/handouts/actions.ts

@@ -11,11 +11,12 @@ import type { CourseActions } from "../actions";
 import type { CourseStore, HandoutRecord } from "../store";
 import { webapp_client } from "../../webapp-client";
 import { redux } from "../../app-framework";
-import { uuid, mswalltime } from "@cocalc/util/misc";
+import { uuid } from "@cocalc/util/misc";
 import { map } from "awaiting";
 import type { SyncDBRecordHandout } from "../types";
 import { exec } from "../../frame-editors/generic/client";
 import { export_student_file_use_times } from "../export/file-use-times";
+import { COPY_TIMEOUT_MS } from "../consts";
 
 export class HandoutsActions {
   private course_actions: CourseActions;
@@ -131,7 +132,7 @@ export class HandoutsActions {
     const status_map: {
       [student_id: string]: { time?: number; error?: string };
     } = h.status ? h.status : {};
-    status_map[student_id] = { time: mswalltime() };
+    status_map[student_id] = { time: webapp_client.server_time() };
     if (err) {
       status_map[student_id].error = err;
     }
@@ -163,7 +164,7 @@ export class HandoutsActions {
     ) {
       return true; // never retry a copy until at least 15 seconds later.
     }
-    student_status.start = mswalltime();
+    student_status.start = webapp_client.server_time();
     status_map[student_id] = student_status;
     obj.status = status_map;
     this.course_actions.set(obj);
@@ -259,6 +260,7 @@ export class HandoutsActions {
         overwrite_newer: !!overwrite, // default is "false"
         delete_missing: !!overwrite, // default is "false"
         backup: !!!overwrite, // default is "true"
+        timeout: COPY_TIMEOUT_MS / 1000,
       });
       finish();
     } catch (err) {

src/packages/frontend/course/handouts/handout.tsx

@@ -314,7 +314,7 @@ export function Handout({
         <div style={{ marginBottom: "15px" }}>
           {copy_confirm_all_caution(step)}
         </div>
-        <Space>
+        <Space wrap>
           {render_copy_cancel()}
           <Button key="all" onClick={() => copy_handout(step, false)}>
             Yes, do it
@@ -346,7 +346,7 @@ export function Handout({
               {capitalize(step_verb(step))} this handout {step_direction(step)}
               ...
             </div>
-            <Space>
+            <Space wrap>
               {render_copy_cancel()}
               <Button
                 key="all"

src/packages/frontend/course/handouts/handouts-info-panel.tsx

@@ -12,6 +12,8 @@ import { ErrorDisplay, Icon, Tip } from "../../components";
 import { CourseActions } from "../actions";
 import { BigTime } from "../common";
 import { LastCopyInfo } from "../store";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
+import { COPY_TIMEOUT_MS } from "@cocalc/frontend/course/consts";
 
 interface StudentHandoutInfoProps {
   actions: CourseActions;
@@ -66,7 +68,7 @@ export function StudentHandoutInfo({
           <Icon name="share-square" /> Yes, {name.toLowerCase()} again
         </Button>,
       );
-      return <Space>{v}</Space>;
+      return <Space wrap>{v}</Space>;
     } else {
       return (
         <Button type="dashed" key="copy" onClick={() => setRecopy(true)}>
@@ -144,7 +146,7 @@ export function StudentHandoutInfo({
     }
     const v: any[] = [];
     if (enable_copy) {
-      if (obj.start) {
+      if (webapp_client.server_time() - (obj.start ?? 0) < COPY_TIMEOUT_MS) {
         v.push(render_open_copying(do_open, do_stop));
       } else if (obj.time) {
         v.push(render_open_recopy(name, do_open, do_copy, copy_tip, open_tip));

src/packages/frontend/course/nbgrader/nbgrader-button.tsx

@@ -15,6 +15,7 @@ import { CourseStore, NBgraderRunInfo, PARALLEL_DEFAULT } from "../store";
 import { CourseActions } from "../actions";
 import { nbgrader_status } from "./util";
 import { plural } from "@cocalc/util/misc";
+import { webapp_client } from "@cocalc/frontend/webapp-client";
 
 interface Props {
   name: string;
@@ -40,7 +41,7 @@ export function NbgraderButton({ name, assignment_id }: Props) {
   const running = useMemo(() => {
     if (nbgrader_run_info == null) return false;
     const t = nbgrader_run_info.get(assignment_id);
-    if (t && Date.now() - t <= 1000 * 60 * 10) {
+    if (webapp_client.server_time() - (t ?? 0) <= 1000 * 60 * 10) {
       // Time starting is set and it's also within the last few minutes.
       // This "few minutes" is just in case -- we probably shouldn't need
       // that at all ever, but it could make cocalc state usable in case of

src/packages/frontend/course/student-projects/actions.ts

@@ -135,7 +135,7 @@ export class StudentProjectsActions {
       this.course_actions.set({
         table: "students",
         student_id,
-        last_email_invite: Date.now(),
+        last_email_invite: webapp_client.server_time(),
       });
     } else {
       await redux
@@ -182,7 +182,7 @@ export class StudentProjectsActions {
           this.course_actions.set({
             table: "students",
             student_id,
-            last_email_invite: Date.now(),
+            last_email_invite: webapp_client.server_time(),
           });
         }
       }