frontend/admin/on-prem: gpu support

haraldschilly · haraldschilly · commit 112dd09bc86c · 2024-06-10T16:58:46.000+02:00
diff --git a/src/packages/frontend/site-licenses/purchase/quota-editor.tsx b/src/packages/frontend/site-licenses/purchase/quota-editor.tsx
@@ -22,6 +22,7 @@ import {
   Typography,
 } from "antd";
 
+import { JsonEditor } from "@cocalc/frontend/admin/json-editor";
 import {
   CSS,
   React,
@@ -33,6 +34,7 @@ import {
   A,
   Gap,
   HelpIcon,
+  NumberInput,
   Paragraph,
   TextInput,
 } from "@cocalc/frontend/components";
@@ -54,7 +56,6 @@ import { plural, round1, test_valid_jsonpatch } from "@cocalc/util/misc";
 import { SiteLicenseQuota } from "@cocalc/util/types/site-licenses";
 import { DEDICATED_VM_ONPREM_MACHINE } from "@cocalc/util/upgrades/consts";
 import { Upgrades } from "@cocalc/util/upgrades/quota";
-import { JsonEditor } from "../../admin/json-editor";
 
 const { Text } = Typography;
 
@@ -101,10 +102,10 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
   const max_upgrades = useTypedRedux("customize", "max_upgrades");
 
   const [show_advanced, set_show_advanced] = useState<boolean>(
-    show_advanced_default ?? false
+    show_advanced_default ?? false,
   );
   const [jsonPatchError, setJSONPatchError] = useState<string | undefined>(
-    undefined
+    undefined,
   );
 
   const hosting_multiplier = useMemo(() => {
@@ -191,12 +192,12 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
               {`${money(
                 COSTS.user_discount[user()] *
                   COSTS.custom_cost.cpu *
-                  hosting_multiplier
+                  hosting_multiplier,
               )}/CPU cores per month per project`}
               )
             </b>
             {render_explanation(
-              "Google Cloud vCPUs shared with other projects (member hosting significantly reduces sharing)"
+              "Google Cloud vCPUs shared with other projects (member hosting significantly reduces sharing)",
             )}
           </Col>
         )}
@@ -236,7 +237,7 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
               {`${money(
                 COSTS.user_discount[user()] *
                   COSTS.custom_cost.ram *
-                  hosting_multiplier
+                  hosting_multiplier,
               )}/GB RAM per month per project`}
               )
             </b>
@@ -287,12 +288,12 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
               {`${money(
                 COSTS.user_discount[user()] *
                   COSTS.custom_cost.dedicated_cpu *
-                  hosting_multiplier
+                  hosting_multiplier,
               )}/CPU cores per month per project`}
               )
             </b>
             {render_explanation(
-              "Google Cloud vCPUs NOT shared with other projects.  You can enter a fractional value, e.g., 0.5 for a half dedicated core."
+              "Google Cloud vCPUs NOT shared with other projects.  You can enter a fractional value, e.g., 0.5 for a half dedicated core.",
             )}
           </Col>
         )}
@@ -338,7 +339,7 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
               {`${money(
                 COSTS.user_discount[user()] *
                   COSTS.custom_cost.dedicated_ram *
-                  hosting_multiplier
+                  hosting_multiplier,
               )}/GB RAM per month per project`}
               )
             </b>
@@ -380,12 +381,12 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
             <b>
               G Disk Space (
               {`${money(
-                COSTS.user_discount[user()] * COSTS.custom_cost.disk
+                COSTS.user_discount[user()] * COSTS.custom_cost.disk,
               )}/G disk per month per project`}
               )
             </b>
             {render_explanation(
-              "store a larger number of files. Snapshots and file edit history is included at no additional charge."
+              "store a larger number of files. Snapshots and file edit history is included at no additional charge.",
             )}
           </Col>
         )}
@@ -415,7 +416,7 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
             member hosting{" "}
             <b>(multiplies RAM/CPU price by {COSTS.custom_cost.member})</b>
             {render_explanation(
-              "project runs on computers with far fewer other projects.  If not selected your project runs on very, very heavily loaded trial servers, which might be OK depending on your application."
+              "project runs on computers with far fewer other projects.  If not selected your project runs on very, very heavily loaded trial servers, which might be OK depending on your application.",
             )}
           </Col>
         )}
@@ -519,6 +520,90 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
     );
   }
 
+  function render_gpu_help(): JSX.Element {
+    return (
+      <HelpIcon title="GPU Support">
+        <Paragraph>
+          This configures a license, which will cause the project to run on a
+          GPU. You need to configure your VMs in your cluster in such a way,
+          that requesting a GPU is possible.
+        </Paragraph>
+        <Paragraph>
+          In particular, the pod will get the following resource limit:{" "}
+          <code>nvidia.com/gpu: 1</code>.
+        </Paragraph>
+        <Paragraph>
+          On top of that, you can optionally specify a taint, which will be
+          tolerated by that pod. This helps with keeping all other project pods
+          away from your GPU enabled nodes:{" "}
+          <code>
+            tolerations:{" "}
+            {JSON.stringify([
+              {
+                key: "gpu",
+                operator: "Equal",
+                value: "cocalc",
+                effect: "NoSchedule",
+              },
+            ])}
+          </code>
+          .
+        </Paragraph>
+      </HelpIcon>
+    );
+  }
+
+  function render_gpu(): JSX.Element {
+    const { gpu } = quota;
+    const { num = 0, toleration = "" } =
+      typeof gpu === "object"
+        ? gpu
+        : typeof gpu === "number"
+        ? { num: gpu }
+        : {};
+    return (
+      <Row style={ROW_STYLE}>
+        <Col md={col.control}>
+          <Paragraph>
+            <Text strong>Request a GPU</Text>
+          </Paragraph>{" "}
+          <Paragraph>
+            <NumberInput
+              number={num}
+              min={0}
+              max={8}
+              on_change={(num: number) =>
+                onChange({ gpu: { num, toleration } })
+              }
+            />{" "}
+            GPUs (<code>nvidia.com/gpu: {num}</code>)
+          </Paragraph>
+          <Paragraph>
+            <Text>(optional) Tolerate a taint:</Text>{" "}
+            <TextInput
+              disabled={disabled}
+              type={"text"}
+              on_change={(tol) =>
+                onChange({ gpu: { num, toleration: tol.trim() } })
+              }
+              style={{
+                fontWeight: "normal",
+                display: "inline-block",
+                margin: "0 10px",
+              }}
+              text={toleration}
+            />{" "}
+            (Enter <code>key=value</code> of a node taint. e.g.{" "}
+            <code>gpu=cocalc</code> means to ignore nodes tatined with key{" "}
+            <code>gpu</code> and value <code>cocalc</code>. Keep empty if you do
+            not use taints!)
+          </Paragraph>
+          {render_gpu_help()}
+        </Col>
+      </Row>
+    );
+  }
+
   function on_json_patch_change(patch: string): void {
     try {
       const patchObj = JSON.parse(patch);
@@ -527,7 +612,7 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
         onChange({ patch }); // we save the string, not the object!
       } else {
         setJSONPatchError(
-          'Must be a list of {`[{"op": "replace", "path": "…", "value": "…"}, …]`} objects.'
+          'Must be a list of {`[{"op": "replace", "path": "…", "value": "…"}, …]`} objects.',
         );
       }
     } catch (err) {
@@ -564,13 +649,13 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
       ret.push(
         <Select.Option key={key} value={key}>
           {it.label}
-        </Select.Option>
+        </Select.Option>,
       );
     }
     ret.push(
       <Select.Option key={"always_running"} value={"always_running"}>
         Always running
-      </Select.Option>
+      </Select.Option>,
     );
     return ret;
   }
@@ -639,7 +724,7 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
           <Col md={col.desc}>
             priority support
             {render_explanation(
-              "we prioritize your support requests much higher (included with all licensed projects)"
+              "we prioritize your support requests much higher (included with all licensed projects)",
             )}
           </Col>
         )}
@@ -661,7 +746,7 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
           <Col md={col.desc}>
             network access
             {render_explanation(
-              "project can connect to the Internet to clone git repositories, download files, send emails, etc.  (included with all licensed projects)"
+              "project can connect to the Internet to clone git repositories, download files, send emails, etc.  (included with all licensed projects)",
             )}
           </Col>
         )}
@@ -708,6 +793,32 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
     );
   }
 
+  function render_advanced_onprem(): JSX.Element | undefined {
+    if (!show_advanced || !isOnPrem) return;
+    return (
+      <>
+        {render_ext_rw()}
+        {render_dedicated_vm()}
+        {render_gpu()}
+        {render_patch_project_pod()}
+      </>
+    );
+  }
+
+  function render_advanced(): JSX.Element | undefined {
+    if (!show_advanced) return;
+    return (
+      <>
+        {render_member()}
+        {render_idle_timeout()}
+        {render_dedicated_cpu()}
+        {render_dedicated_ram()}
+        {!hideExtra && render_dedicated()}
+        {render_advanced_onprem()}
+      </>
+    );
+  }
+
   return (
     <>
       {render_cpu()}
@@ -716,14 +827,7 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
       {!hideExtra && render_support()}
       {!hideExtra && render_network()}
       {render_show_advanced_link()}
-      {show_advanced && render_member()}
-      {show_advanced && render_idle_timeout()}
-      {show_advanced && render_dedicated_cpu()}
-      {show_advanced && render_dedicated_ram()}
-      {show_advanced && !hideExtra && render_dedicated()}
-      {show_advanced && isOnPrem && render_ext_rw()}
-      {show_advanced && isOnPrem && render_dedicated_vm()}
-      {show_advanced && isOnPrem && render_patch_project_pod()}
+      {render_advanced()}
     </>
   );
 };
diff --git a/src/packages/util/types/site-licenses.ts b/src/packages/util/types/site-licenses.ts
@@ -27,6 +27,12 @@ export interface SiteLicenseQuota {
   // JSON array of Array of JSON Patch Operations, e.g. "[{op: \"add\", path: \"/foo\", value: \"bar\"}]"
   // It's not an array of objects, because somewhere the array is converted to weird map of "0, 1, 2,..." indexed objects.
   patch?: string;
+  gpu?:
+    | number
+    | {
+        num?: number; // usualy 1, to set nvidia.com/gpu=1
+        toleration?: string; // e.g. gpu=cocalc for key=value
+      };
 }
 
 // For typescript use of these from user side, we make this available:
