1
import { Alert, Button, Divider, Modal, Space } from "antd";
2
import { useEffect, useState } from "react";
3
import SelectServer from "@cocalc/frontend/compute/select-server";
4
import { useFrameContext } from "@cocalc/frontend/frame-editors/frame-tree/frame-context";
5
import type { CourseActions } from "../actions";
6
import Students from "./students";
7
import type { Unit } from "../store";
8
import { getUnitId } from "./util";
9

10
interface Props {
11
  onClose: () => void;
12
  actions: CourseActions;
13
  unit: Unit;
14
}
15

16
export default function ComputeServerModal({ onClose, actions, unit }: Props) {
17
  const { project_id } = useFrameContext();
18
  const config = unit?.get("compute_server");
19
  const [server_id, setServerId] = useState<number | undefined>(
20
    config?.get("server_id"),
21
  );
22
  const [showHelp, setShowHelp] = useState<boolean>(false);
23
  useEffect(() => {
24
    setServerId(config?.get("server_id"));
25
  }, [config]);
26

27
  return (
28
    <Modal
29
      width={"90%"}
30
      open
31
      title={
32
        <>
33
          Compute Server Configuration{" "}
34
          <Button
35
            type="link"
36
            onClick={() => {
37
              setShowHelp(!showHelp);
38
            }}
39
          >
40
            {showHelp ? "Hide " : ""} Help
41
          </Button>
42
        </>
43
      }
44
      onOk={onClose}
45
      onCancel={onClose}
46
    >
47
      {showHelp && (
48
        <Alert
49
          style={{ margin: "15px 0 25px 0" }}
50
          type="info"
51
          message="Student Compute Servers"
52
          showIcon
53
          closable
54
          onClose={() => {
55
            setShowHelp(false);
56
          }}
57
          description={
58
            <>
59
              Select a compute server from this instructor project. You can then
60
              easily create and control identically configured compute servers
61
              in each student project.
62
              <ul>
63
                <li>
64
                  The compute server in the student project does not have a copy
65
                  of the underlying data and installed files of your compute
66
                  server; it just has the same configuration (e.g., cpu, RAM,
67
                  disk size).
68
                </li>
69
                <li>
70
                  If you select the same compute server for multiple
71
                  assignments, it is only created in the student's project once.
72
                </li>
73
                <li>
74
                  The person (probably you) who creates the compute server owns
75
                  it and pays all costs.
76
                </li>
77
              </ul>
78
            </>
79
          }
80
        />
81
      )}
82
      <Space direction="vertical" style={{ width: "100%" }}>
83
        <div style={{ textAlign: "center" }}>
84
          <Space style={{ alignItems: "center" }}>
85
            <div style={{ marginRight: "30px" }}>
86
              {server_id ? "" : "Select "}Compute Server
87
              {server_id ? "" : " (not Home Base)"}:
88
            </div>
89
            <SelectServer
90
              title="A compute server with identical configuration to the selected one will be created in each student project."
91
              fullLabel
92
              style={{ borderRadius: "5px" }}
93
              project_id={project_id}
94
              value={server_id}
95
              setValue={(server_id) => {
96
                setServerId(server_id);
97
                actions.compute.setComputeServerConfig({
98
                  unit_id: getUnitId(unit),
99
                  compute_server: {
100
                    server_id,
101
                  },
102
                });
103
              }}
104
            />
105
          </Space>
106
        </div>
107
        {!!server_id && (
108
          <>
109
            <Divider orientation="left">Student Compute Servers</Divider>
110
            <Students actions={actions} unit={unit} onClose={onClose} />
111
          </>
112
        )}
113
      </Space>
114
    </Modal>
115
  );
116
}
117

118