Add deployment GPU related UI updates

.dockerignore

@@ -12,4 +12,5 @@ helm-charts
 .editorconfig
 .idea
 coverage*
-# adopted from https://bun.sh/guides/ecosystem/docker
+# adopted from https://bun.sh/guides/ecosystem/docker
+.env.development

.env

@@ -8,4 +8,5 @@ VITE_DNS_URL="https://dns.cloud.cbh.kth.se"
 VITE_MAIA_URL="https://maia.app.cloud.cbh.kth.se/maia"
 # can be comma separated to add more
 VITE_SERVER_PLATFORM="linux/amd64"
+VITE_DEPLOYMENT_SSH_BASE="deploy.cloud.cbh.kth.se"
 GENERATE_SOURCEMAP=false 

.github/workflows/ts-format-validate.yml

@@ -7,17 +7,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-    - name: Setup Bun
-      uses: oven-sh/setup-bun@v1
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
 
-    - name: Install Prettier
-      run: bun install
+      - name: Install Prettier
+        run: bun install
 
-    - name: Check for formatting errors
-      run: bun run format-check
-    
-    - name: Check for TS errors
-      run: bun run tsc
+      - name: Check for formatting errors
+        run: bun run format-check
+
+      - name: Check for TS errors
+        run: bun run tsc --noEmit

.gitignore

@@ -25,9 +25,10 @@ yarn-error.log*
 
 #
 .env.dev
+.env.development
 
 # ide
 .vscode
 
 # npm package-lock.json (we use Bun)
-package-lock.json
+package-lock.json

Dockerfile

@@ -49,6 +49,7 @@ ENV DNS_URL="https://dns.cloud.cbh.kth.se"
 ENV MAIA_URL="https://maia.app.cloud.cbh.kth.se/maia"
 # can be comma separated to add more
 ENV SERVER_PLATFORM="linux/amd64"
+ENV DEPLOYMENT_SSH_BASE="deploy.cloud.cbh.kth.se"
 
 EXPOSE 3000
 ENTRYPOINT ["/entrypoint.sh"]

package.json

@@ -9,70 +9,74 @@
     "dev": "vite --port 3000",
     "build": "vite build",
     "format": "prettier --write .",
-    "format-check": "prettier --check ."
+    "format-check": "prettier --check .",
+    "check": "prettier --check . && tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@iconify/react": "^4.1.1",
-    "@kthcloud/go-deploy-types": "^1.0.24",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/lab": "^5.0.0-alpha.170",
-    "@mui/material": "^5.15.20",
+    "@kthcloud/go-deploy-types": "^1.0.25",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/lab": "^5.0.0-alpha.177",
+    "@mui/material": "^7.3.9",
     "@mui/material-next": "^6.0.0-alpha.126",
-    "@mui/x-tree-view": "^7.7.0",
-    "@react-keycloak/web": "^3.4.0",
-    "@react-three/fiber": "^8.16.8",
+    "@mui/x-tree-view": "^7.29.10",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
     "@sanity/eventsource": "^5.0.2",
     "@types/crypto-js": "^4.2.2",
+    "@types/lodash": "^4.17.24",
     "@types/numeral": "^2.0.5",
     "@types/punycode": "^2.1.4",
     "@types/three": "^0.164.1",
-    "apexcharts": "^3.49.1",
-    "bun": "^1.2.22",
+    "apexcharts": "^3.54.1",
+    "bun": "^1.3.10",
     "change-case": "^5.4.4",
     "crypto-js": "^4.2.0",
     "http-status-codes": "^2.3.0",
-    "i18next": "^23.11.5",
-    "i18next-browser-languagedetector": "^7.2.1",
-    "js-base64": "^3.7.7",
-    "keycloak-js": "^24.0.5",
-    "lodash": "^4.17.21",
+    "i18next": "^23.16.8",
+    "i18next-browser-languagedetector": "^7.2.2",
+    "js-base64": "^3.7.8",
+    "lodash": "^4.17.23",
     "million": "latest",
-    "notistack": "^3.0.1",
+    "notistack": "^3.0.2",
     "numeral": "^2.0.6",
+    "oidc-client-ts": "^3.4.1",
     "punycode": "^2.3.1",
-    "react": "^18.3.1",
-    "react-apexcharts": "^1.4.1",
-    "react-cookie": "^7.1.4",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.4",
+    "react-apexcharts": "^1.9.0",
+    "react-cookie": "^7.2.2",
+    "react-copy-to-clipboard": "^5.1.1",
+    "react-dom": "^19.2.4",
     "react-helmet-async": "^2.0.5",
-    "react-i18next": "^14.1.2",
-    "react-router-dom": "^6.23.1",
-    "simplebar": "^6.2.7",
-    "simplebar-react": "^3.2.6",
+    "react-i18next": "^14.1.3",
+    "react-oidc-context": "^3.3.0",
+    "react-router-dom": "^6.30.3",
+    "simplebar": "^6.3.3",
+    "simplebar-react": "^3.3.2",
     "three": "^0.164.1",
-    "three-stdlib": "^2.30.3",
-    "yaml": "^2.4.5"
+    "three-stdlib": "^2.36.1",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@types/bun": "^1.1.17",
-    "@types/react": "^18.3.3",
+    "@types/bun": "^1.3.10",
+    "@types/react": "^18.3.28",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "eslint": "^9.35.0",
-    "eslint-plugin-react": "^7.34.2",
+    "@types/react-dom": "^18.3.7",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "prettier": "^3.6.2",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "prettier": "^3.8.1",
     "prettier-plugin-nginx": "^1.0.3",
-    "typescript": "^5.4.5",
-    "vite": "^7.1.6"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
   }
 }

src/App.tsx

@@ -1,6 +1,7 @@
 // keycloak
-import { AuthContextWrapperProvider } from "./contexts/AuthContextWrapper";
-import { keycloak } from "./keycloak";
+import { oidcConfig } from "./keycloak";
+import { AuthProvider } from "react-oidc-context";
+
 // routes
 import Router from "./Router";
 // theme
@@ -15,10 +16,11 @@ import Iconify from "./components/Iconify";
 import { ThemeModeContextProvider } from "./contexts/ThemeModeContext";
 import { AlertContextProvider } from "./contexts/AlertContext";
 import { AdminResourceContextProvider } from "./contexts/AdminResourceContext";
+import TokenExpiryModal from "./components/TokenExpiryModal";
 
 export default function App() {
   return (
-    <AuthContextWrapperProvider authClient={keycloak}>
+    <AuthProvider {...oidcConfig}>
       <AlertContextProvider>
         <ResourceContextProvider>
           <AdminResourceContextProvider>
@@ -41,13 +43,14 @@ export default function App() {
                 <ThemeProvider>
                   <ScrollToTop />
                   <BaseOptionChartStyle />
+                  <TokenExpiryModal />
                   <Router />
                 </ThemeProvider>
               </SnackbarProvider>
             </ThemeModeContextProvider>
           </AdminResourceContextProvider>
         </ResourceContextProvider>
       </AlertContextProvider>
-    </AuthContextWrapperProvider>
+    </AuthProvider>
   );
 }

src/Router.tsx

@@ -18,6 +18,7 @@ import Onboarding from "./pages/onboarding";
 import Inbox from "./pages/inbox/Inbox";
 import Teams from "./pages/teams/Teams";
 import { GPU } from "./pages/gpu/GPU";
+import Callback from "./components/Callback";
 
 export default function Router() {
   return useRoutes([
@@ -28,6 +29,7 @@ export default function Router() {
         { path: "/", element: <Landing /> },
         { path: "/status", element: <Status /> },
         { path: "tiers", element: <Tiers /> },
+        { path: "oauth2/callback", element: <Callback /> },
         {
           path: "deploy",
           element: (

src/api/deploy/deployments.ts

@@ -1,4 +1,4 @@
-import { Job } from "../../types";
+import { DeploymentSpecsGPU, Job, Visibility } from "../../types";
 
 export const getDeployment = async (token: string, id: string) => {
   const url = `${import.meta.env.VITE_DEPLOY_API_URL}/deployments/${id}`;
@@ -90,7 +90,9 @@ export const createDeployment = async (
   imageArgs: any,
   envs: any,
   volumes: any,
-  token: string
+  token: string,
+  visibility: Visibility,
+  specs?: DeploymentSpecsGPU
 ) => {
   let body: any = {
     name,
@@ -99,8 +101,14 @@ export const createDeployment = async (
   if (zone) body = { ...body, zone };
   if (image) body = { ...body, image };
   if (imageArgs) body = { ...body, args: imageArgs };
+  if (visibility) body = { ...body, visibility };
   if (envs) body = { ...body, envs };
   if (volumes) body = { ...body, volumes };
+  if (specs?.cpuCores) body = { ...body, cpuCores: specs.cpuCores };
+  if (specs?.ram) body = { ...body, ram: specs.ram };
+  if (specs?.replicas != undefined)
+    body = { ...body, replicas: specs.replicas };
+  if (specs?.gpus) body = { ...body, gpus: specs.gpus };
 
   const res = await fetch(
     import.meta.env.VITE_DEPLOY_API_URL + "/deployments",

src/api/deploy/gpuClaims.ts

@@ -0,0 +1,73 @@
+import { GpuClaimCreate } from "../../temporaryTypesRemoveMe";
+import { Jwt } from "../../types";
+
+export const listGpuClaims = async (token: Jwt, detailed?: boolean) => {
+  const detailedQuery = detailed
+    ? `?detailed=${encodeURIComponent(detailed)}`
+    : "";
+  const url = `${import.meta.env.VITE_DEPLOY_API_URL}/gpuClaims${detailedQuery}`;
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  const result = await response.json();
+
+  if (!Array.isArray(result)) {
+    throw new Error("Error listing GPU claims, response was not an array");
+  }
+
+  result.sort((a: any, b: any) => {
+    return a.id < b.id ? -1 : 1;
+  });
+
+  return result;
+};
+
+export const getGpuClaim = async (token: Jwt, gpuClaimId: string) => {
+  const url = `${import.meta.env.VITE_DEPLOY_API_URL}/gpuClaims/${gpuClaimId}`;
+  const response = await fetch(url, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  const result = await response.json();
+  if (typeof result !== "object") {
+    throw new Error("Error getting GPU claim, response was not an object");
+  }
+  return result;
+};
+
+export const deleteGpuClaim = async (token: Jwt, gpuClaimId: string) => {
+  const url = `${import.meta.env.VITE_DEPLOY_API_URL}/gpuClaims/${gpuClaimId}`;
+  const response = await fetch(url, {
+    method: "DELETE",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+  const result = await response.json();
+  if (typeof result !== "object") {
+    throw new Error("Error deleting GPU claim, response was not an object");
+  }
+  return result;
+};
+
+export const createGpuClaim = async (token: Jwt, gpuClaim: GpuClaimCreate) => {
+  const url = `${import.meta.env.VITE_DEPLOY_API_URL}/gpuClaims`;
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify(gpuClaim),
+  });
+  const result = await response.json();
+  if (typeof result !== "object") {
+    throw new Error("Error creating GPU claim, response was not an object");
+  }
+  return result;
+};