frontend/onprem gpu: show upgrade

Author: haraldschilly

src/packages/frontend/project/settings/run-quota/hooks.tsx

@@ -3,16 +3,16 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Map, List } from "immutable";
+import { List, Map } from "immutable";
 import { fromPairs, isEqual } from "lodash";
 
+import { ProjectStatus } from "@cocalc/comm/project-status/types";
 import {
   useEffect,
   useMemo,
   useState,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
-import { ProjectStatus } from "@cocalc/comm/project-status/types";
 import {
   KUCALC_COCALC_COM,
   KUCALC_DISABLED,
@@ -21,19 +21,19 @@ import {
 import { round1, seconds2hms, server_time } from "@cocalc/util/misc";
 import { PROJECT_UPGRADES } from "@cocalc/util/schema";
 import {
+  Upgrades,
   quota2upgrade_key,
   upgrade2quota_key,
-  Upgrades,
 } from "@cocalc/util/upgrades/quota";
 import { IdleTimeoutPct, PercentBar, renderBoolean } from "./components";
 import {
-  booleanValueStr,
   CurrentUsage,
   DisplayQuota,
   MAX_UPGRADES,
   PARAMS,
-  renderValueUnit,
   Usage,
+  booleanValueStr,
+  renderValueUnit,
 } from "./misc";
 
 export function useRunQuota(
@@ -53,7 +53,9 @@ export function useRunQuota(
     } else {
       return rq
         .map((val, key) => {
-          if (typeof val !== "number") {
+          if (key === "gpu") {
+            return val?.get("num", 0);
+          } else if (typeof val !== "number") {
             return val;
           } else if (key == "idle_timeout") {
             return seconds2hms(val, false, false);
@@ -120,9 +122,9 @@ export function useCurrentUsage({
   const last_edited: Date | undefined = project_map
     ?.get(project_id)
     ?.get("last_edited");
-  const runQuota: Map<string, number | List<object>> | undefined = project_map
-    ?.get(project_id)
-    ?.get("run_quota");
+  const runQuota:
+    | Map<string, number | Map<string, number | string> | List<object>>
+    | undefined = project_map?.get(project_id)?.get("run_quota");
 
   const [currentUsage, setCurrentUsage] = useState<CurrentUsage>({});
 
@@ -233,6 +235,14 @@ export function useCurrentUsage({
               const p = runQuota?.get(key);
               const x = List.isList(p) ? p?.size : "N/A";
               return [key, { display: `${x}`, element: <>{x}</> }];
+            case "gpu":
+              const gpu = runQuota?.get(key);
+              if (!gpu) return [key, { display: "N/A", element: <>N/A</> }];
+              const num = Map.isMap(gpu) ? gpu.get("num", 1) : 1;
+              return [
+                key,
+                { display: `${num}`, element: <>{JSON.stringify(num)}</> },
+              ];
             default:
               return [key, { display: name, element: <>{name}</> }];
           }
@@ -258,9 +268,9 @@ export function useDisplayedFields(): string[] {
     // we have to make a copy, because we might modify it below
     const fields: string[] = [...PROJECT_UPGRADES.field_order];
 
-    // on kucalc on-prem, we add ext_rw and patch
+    // on kucalc on-prem, we add ext_rw, patch and gpu
     if (kucalc === KUCALC_ON_PREMISES) {
-      fields.push(...["ext_rw", "patch"]);
+      fields.push(...["ext_rw", "patch", "gpu"]);
     }
 
     return fields.filter((key: keyof Upgrades) => {

src/packages/frontend/project/settings/run-quota/run-quota.tsx

@@ -166,6 +166,10 @@ export const RunQuota: React.FC<Props> = React.memo(
       const { key, quota, quotaDedicated, usage } = record;
       if (QUOTAS_BOOLEAN.includes(key as any)) {
         return `This quota is ${booleanValueStr(quota)}.`;
+      } else if (key === "gpu") {
+        return usage != null
+          ? `There are ${usage.display} GPU(s) requested.`
+          : ``;
       } else if (key === "patch") {
         return usage != null
           ? `There are ${usage.display} patch(es) in total.`
@@ -221,6 +225,7 @@ export const RunQuota: React.FC<Props> = React.memo(
       // the usage of a boolean quota is always the same as its value
       if (QUOTAS_BOOLEAN.includes(record.key as any)) return;
       if (record.key === "patch") return;
+      if (record.key === "gpu") return;
       const usage: Usage = record.usage;
       if (usage == null) return;
       const { element } = usage;
@@ -241,17 +246,17 @@ export const RunQuota: React.FC<Props> = React.memo(
         );
       }
 
+      console.log(record.key, val);
+
       if (typeof val === "boolean") {
         return renderBoolean(val, projectIsRunning);
-      } else if (typeof val === "number") {
-        if (record.key === "idle_timeout") {
-          return val;
-        }
+      } else if (record.key === "idle_timeout") {
+        return val;
       } else if (Array.isArray(val)) {
         return val.length;
       } else {
         return (
-          <Text strong={true} style={style}>
+          <Text strong style={style}>
             <NoWrap>{val}</NoWrap>
           </Text>
         );

src/packages/frontend/project/settings/upgrade-usage.tsx

@@ -3,21 +3,19 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
-import { Button, Card, Typography } from "antd";
-import { List } from "immutable";
-import { join } from "path";
 import {
   CSS,
   React,
-  redux,
   Rendered,
+  redux,
   useActions,
   useTypedRedux,
 } from "@cocalc/frontend/app-framework";
 import {
   Icon,
   Loading,
   Paragraph,
+  Text,
   Title,
   UpgradeAdjustor,
 } from "@cocalc/frontend/components";
@@ -33,8 +31,13 @@ import {
   DedicatedDisk,
   DedicatedResources,
 } from "@cocalc/util/types/dedicated";
+import { process_gpu_quota } from "@cocalc/util/types/gpu";
+import { GPU } from "@cocalc/util/types/site-licenses";
 import { PRICES } from "@cocalc/util/upgrades/dedicated";
 import { dedicatedDiskDisplay } from "@cocalc/util/upgrades/utils";
+import { Button, Card, Typography } from "antd";
+import { List } from "immutable";
+import { join } from "path";
 import AdminQuotas from "./quota-editor/admin-quotas";
 import PayAsYouGoQuotaEditor from "./quota-editor/pay-as-you-go";
 import { RunQuota } from "./run-quota";
@@ -56,6 +59,7 @@ interface Props {
   all_projects_have_been_loaded?: boolean;
   site_license_ids: string[];
   dedicated_resources?: DedicatedResources;
+  gpu?: GPU;
   mode: "project" | "flyout";
 }
 
@@ -310,6 +314,47 @@ export const UpgradeUsage: React.FC<Props> = React.memo(
       );
     }
 
+    function render_gpu(): Rendered {
+      if (dedicated_resources == null) return;
+      const gpu = dedicated_resources.gpu;
+      if (gpu == null || gpu === false) return;
+      const info = process_gpu_quota({ gpu });
+      const nodes = info.nodeSelector
+        ? ` on nodes labaled: ${Object.entries(info.nodeSelector)
+            .map(([key, value]) => `${key}=${value}`)
+            .join(", ")}`
+        : "";
+      const taint = info.tolerations
+        ? ` with taint: ${info.tolerations
+            .map((t) => {
+              if ("value" in t) {
+                return `${t.key}=${t.value}`;
+              } else {
+                return `${t.key}`;
+              }
+            })
+            .join(", ")}`
+        : "";
+
+      return (
+        <Card
+          title={
+            <>
+              <Icon name="gpu" /> GPU
+            </>
+          }
+          type="inner"
+          style={{ marginTop: "15px" }}
+          styles={{ body: { padding: "10px" } }}
+        >
+          <Text>
+            Requesting {gpu.num} GPU(s){nodes}
+            {taint}.
+          </Text>
+        </Card>
+      );
+    }
+
     function render_support(): Rendered {
       if (!is_commercial) return; // don't render if not commercial
       return (
@@ -375,6 +420,7 @@ export const UpgradeUsage: React.FC<Props> = React.memo(
         {render_upgrades_button()}
         {renderQuotaEditor()}
         {render_dedicated_disks()}
+        {render_gpu()}
         {render_site_license()}
         {render_support()}
       </div>

src/packages/frontend/projects/store.ts

@@ -12,9 +12,9 @@ import { CUSTOM_IMG_PREFIX } from "@cocalc/frontend/custom-software/util";
 import { WebsocketState } from "@cocalc/frontend/project/websocket/websocket-state";
 import { webapp_client } from "@cocalc/frontend/webapp-client";
 import {
-  LLMServicesAvailable,
-  LLMServiceName,
   LANGUAGE_MODEL_SERVICES,
+  LLMServiceName,
+  LLMServicesAvailable,
 } from "@cocalc/util/db-schema/llm-utils";
 import {
   cmp,
@@ -29,7 +29,7 @@ import {
 } from "@cocalc/util/misc";
 import { DEFAULT_QUOTAS, PROJECT_UPGRADES } from "@cocalc/util/schema";
 import { DedicatedDisk, DedicatedVM } from "@cocalc/util/types/dedicated";
-import { SiteLicenseQuota } from "@cocalc/util/types/site-licenses";
+import { GPU, SiteLicenseQuota } from "@cocalc/util/types/site-licenses";
 import { site_license_quota } from "@cocalc/util/upgrades/quota";
 import { Upgrades } from "@cocalc/util/upgrades/types";
 
@@ -451,6 +451,7 @@ export class ProjectsStore extends Store<ProjectsState> {
   public get_total_site_license_dedicated(project_id: string): {
     vm: false | DedicatedVM;
     disks: DedicatedDisk[];
+    gpu: GPU | false;
   } {
     const site_license: any = this.getIn([
       "project_map",
@@ -459,6 +460,7 @@ export class ProjectsStore extends Store<ProjectsState> {
     ])?.toJS();
     const disks: DedicatedDisk[] = [];
     let vm: false | DedicatedVM = false;
+    let gpu: GPU | false = false;
     for (const license of Object.values(site_license ?? {})) {
       // could be null in the moment when a license is removed!
       if (license == null) continue;
@@ -470,8 +472,11 @@ export class ProjectsStore extends Store<ProjectsState> {
       if (!vm && typeof quota.dedicated_vm?.machine === "string") {
         vm = quota.dedicated_vm;
       }
+      if (!gpu && typeof quota.gpu === "object") {
+        gpu = quota.gpu;
+      }
     }
-    return { vm, disks };
+    return { vm, disks, gpu };
   }
 
   // Return string array of the site licenses that are applied to this project.

src/packages/frontend/site-licenses/purchase/quota-editor.tsx

@@ -522,7 +522,7 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
 
   function render_gpu_help(): JSX.Element {
     return (
-      <HelpIcon title="GPU Support" style={{ float: "right" }} maxWidth="500px">
+      <HelpIcon title="GPU Support" maxWidth="500px">
         <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,
@@ -579,11 +579,13 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
               disabled={disabled}
               style={{ fontWeight: "normal" }}
               onChange={(e) =>
-                e.target.checked
-                  ? onChange({
-                      gpu: { num: num > 0 ? num : 1, toleration, nodeLabel },
-                    })
-                  : onChange({ gpu: { num } })
+                onChange({
+                  gpu: {
+                    num: e.target.checked ? Math.max(1, num) : 0,
+                    toleration,
+                    nodeLabel,
+                  },
+                })
               }
             >
               <Text strong>Configure GPU</Text> {render_gpu_help()}
@@ -635,10 +637,14 @@ export const QuotaEditor: React.FC<Props> = (props: Props) => {
               (optional, [1])
             </Paragraph>
             <Paragraph type="secondary">
-              [1] format: <code>key=value</code>. Keep empty if you do not use
-              label selectors or taints. Specify mulitple ones via a "," comma.
+              [1] format: <code>key=value</code> or for taints, also{" "}
+              <code>key</code> to tolerate the key regardless of value. Keep the
+              field empty if you do not use label selectors or taints. Specify
+              mulitple ones via a "," comma. Below is a "debug" view.
             </Paragraph>
-            <pre>{JSON.stringify(debug, null, 2)}</pre>
+            <pre style={{ fontSize: "85%" }}>
+              {JSON.stringify(debug, null, 2)}
+            </pre>
           </Col>
         ) : undefined}
       </Row>

src/packages/util/types/dedicated.ts

@@ -3,6 +3,8 @@
  *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
  */
 
+import { GPU } from "./site-licenses";
+
 export interface VMsType {
   [id: string]:
     | {
@@ -36,7 +38,7 @@ export interface DiskType {
 
 export const DedicatedDiskSpeedNames = ["standard", "balanced", "ssd"] as const;
 
-export type DedicatedDiskSpeeds = typeof DedicatedDiskSpeedNames[number];
+export type DedicatedDiskSpeeds = (typeof DedicatedDiskSpeedNames)[number];
 
 export interface DedicatedDiskConfig {
   size_gb: number;
@@ -69,4 +71,5 @@ export function isDedicatedDisk(d): d is DedicatedDisk {
 export type DedicatedResources = {
   vm: false | DedicatedVM;
   disks: DedicatedDisk[];
+  gpu: GPU | false;
 };

src/packages/util/types/gpu.ts

@@ -9,10 +9,28 @@ export function extract_gpu(quota: SiteLicenseQuota = {}) {
   return { num: 0 };
 }
 
-export function process_gpu_quota(quota: SiteLicenseQuota = {}) {
+type GPUQuotaInfo = {
+  resources?: { limits: { "nvidia.com/gpu": number } };
+  nodeSelector?: { [key: string]: string };
+  tolerations?: (
+    | {
+        key: string;
+        operator: string;
+        value: string;
+        effect: string;
+      }
+    | {
+        key: string;
+        operator: string;
+        effect: string;
+      }
+  )[];
+};
+
+export function process_gpu_quota(quota: SiteLicenseQuota = {}): GPUQuotaInfo {
   const { num = 0, toleration = "", nodeLabel = "" } = extract_gpu(quota);
 
-  const debug: any = {};
+  const debug: GPUQuotaInfo = {};
   if (num > 0) {
     debug.resources = { limits: { "nvidia.com/gpu": num } };
     if (nodeLabel) {