Merge pull request #337 from kthcloud/main

Update release from latest main

Author: Phillezi

README.md

@@ -22,8 +22,6 @@ kthcloud maintained:
 
 -   [go-deploy](https://github.com/kthcloud/go-deploy): Backend for creation, and management of resources
 -   [alert](https://alert.app.cloud.cbh.kth.se/): Provides alerts
--   [llama](https://llama.app.cloud.cbh.kth.se/): Enables genAI features
--   [llama-prefetch](https://github.com/kthcloud/llama-prefetch/): Reduces genAI features latency by prefetching queries
 -   [kthcloud iam](https://iam.cloud.cbh.kth.se): Provides user auth
 
 External:

src/App.tsx

@@ -1,5 +1,5 @@
 // keycloak
-import { ReactKeycloakProvider } from "@react-keycloak/web";
+import { AuthContextWrapperProvider } from "./contexts/AuthContextWrapper";
 import { keycloak } from "./keycloak";
 // routes
 import Router from "./Router";
@@ -17,7 +17,7 @@ import { AlertContextProvider } from "./contexts/AlertContext";
 
 export default function App() {
   return (
-    <ReactKeycloakProvider authClient={keycloak}>
+    <AuthContextWrapperProvider authClient={keycloak}>
       <AlertContextProvider>
         <ResourceContextProvider>
           <ThemeModeContextProvider>
@@ -45,6 +45,6 @@ export default function App() {
           </ThemeModeContextProvider>
         </ResourceContextProvider>
       </AlertContextProvider>
-    </ReactKeycloakProvider>
+    </AuthContextWrapperProvider>
   );
 }

src/api/deploy/gpuLeases.ts

@@ -1,9 +1,13 @@
 import { GpuLeaseCreate } from "@kthcloud/go-deploy-types/types/v2/body";
 import { Jwt, Uuid } from "../../types";
 
-export const listGpuLeases = async (token: Jwt, vmId?: Uuid) => {
+export const listGpuLeases = async (token: Jwt, vmId?: Uuid, all?: boolean) => {
   const vmIdQuery = vmId ? `?vmId=${encodeURIComponent(vmId)}` : "";
-  const url = `${import.meta.env.VITE_DEPLOY_API_URL}/gpuLeases${vmIdQuery}`;
+  const allQuery =
+    all !== undefined
+      ? (vmIdQuery ? "&" : "?") + "all=" + (all !== false ? "true" : "false")
+      : "";
+  const url = `${import.meta.env.VITE_DEPLOY_API_URL}/gpuLeases${vmIdQuery + allQuery}`;
   const response = await fetch(url, {
     method: "GET",
     headers: {

src/components/ProtectedRoute.tsx

@@ -1,12 +1,15 @@
 import { Navigate } from "react-router-dom";
 import { useKeycloak } from "@react-keycloak/web";
 import LoadingPage from "./LoadingPage";
+import { useContext } from "react";
+import { AuthContextWrapper } from "../contexts/AuthContextWrapper";
 
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { error } = useContext(AuthContextWrapper);
   const { keycloak, initialized } = useKeycloak();
 
   const renderPage = (children: React.ReactNode) => {
-    if (!initialized) {
+    if (!initialized && !error) {
       return <LoadingPage />;
     } else if (initialized && keycloak.authenticated) {
       return children;

src/contexts/AuthContextWrapper.tsx

@@ -0,0 +1,48 @@
+// keycloak
+import { ReactKeycloakProvider } from "@react-keycloak/web";
+import Keycloak from "keycloak-js";
+
+import {
+  AuthClientEvent,
+  AuthClientError,
+} from "@react-keycloak/core/lib/types";
+import { createContext, useState } from "react";
+
+type AuthContextWrapperType = {
+  events: AuthClientEvent[];
+  error?: AuthClientError;
+};
+
+const initialState: AuthContextWrapperType = {
+  events: [],
+};
+
+export const AuthContextWrapper = createContext(initialState);
+
+export const AuthContextWrapperProvider = ({
+  authClient,
+  children,
+}: {
+  authClient: Keycloak;
+  children: React.ReactNode;
+}) => {
+  const [events, setEvents] = useState<AuthClientEvent[]>([]);
+  const [error, setError] = useState<AuthClientError | undefined>(undefined);
+
+  const handleEvent = (
+    event: AuthClientEvent,
+    error: AuthClientError | undefined
+  ) => {
+    setEvents([...events, event]);
+    if (error) {
+      setError(error);
+    }
+  };
+  return (
+    <AuthContextWrapper.Provider value={{ events, error }}>
+      <ReactKeycloakProvider authClient={authClient} onEvent={handleEvent}>
+        {children}
+      </ReactKeycloakProvider>
+    </AuthContextWrapper.Provider>
+  );
+};

src/layouts/dashboard/Menu.tsx

@@ -153,7 +153,7 @@ export default function Menu() {
             {t("menu-status")}
           </MenuItem>
           <MenuItem
-            href={"https://maia.cloud.cbh.kth.se/"}
+            href={"https://maia.app.cloud.cbh.kth.se/maia"}
             component={Link}
             onClick={handleClose}
             target="_blank"

src/locales/en.json

@@ -207,7 +207,7 @@
         "line-wrap": "Line wrap",
         "visibility-saving": "Saving visibility...",
         "could-not-save-visibility": "Could not save visibility: ",
-        "visibility-subheader": "Choose whether to make this deployment hidden from the internet",
+        "visibility-subheader": "Choose the visibility level of this deployment",
         "lease-gpu": "Lease GPU",
         "lease-gpu-forever": "Lease GPU forever",
         "renew-gpu-lease": "Renew GPU lease",
@@ -474,8 +474,7 @@
         "kth-digitalization-platform": "KTH Digitalisation Platform",
         "computational-support": "We receive invaluable computational support from ",
         "funding": "Funding",
-        "disclaimer": "Disclaimer",
-        "genai-long": "AI generated content may be inaccurate or misleading, always verify the information. All AI generated content on this page is marked with the following symbol",
+
         "name-cannot-be-empty": "Name cannot be empty",
         "saving-name": "Saving name...",
         "rfc-1035-1": " must adhere to ",
@@ -534,6 +533,11 @@
         "too-many-run-args": "Too many run args, max 100",
         "pending-migrations": "Pending migrations",
         "migration": "Migration",
-        "of": "of"
+        "of": "of",
+        "error-connecting-to-iam": "Error connecting to IAM",
+        "admin-visibility-auth": "Private (auth proxy)",
+        "visibility-public-tooltip": "Your deployment is publicly accessible on the internet.",
+        "visibility-private-tooltip": "Your deployment is private and not reachable on the internet. Only internal traffic is allowed in (traffic between deployments).",
+        "visibility-auth-tooltip": "Your deployment is private and reachable on the internet through an authentication proxy, this limits the allowed traffic."
     }
 }

src/locales/se.json

@@ -151,7 +151,7 @@
         "menu-manage-resources": "Hantera resurser",
         "error-could-not-fetch-gpus": "Kunde inte hämta grafikkort",
         "could-not-fetch-profile": "Profilen kunde inte hämtas: ",
-        "visibility-subheader": "Välj om din app ska synas på webben",
+        "visibility-subheader": "Välj synlighetsnivån av din deployment",
         "secrets": "hemligheter",
         "onboarding-resources": "Resurser på kthcloud",
         "deleting": "Raderar...",
@@ -471,8 +471,7 @@
         "computational-support": "Vi får även stöd i form av hårdvara från ",
         "funding": "Finansiellt stöd",
         "menu-maia": "MAIA",
-        "disclaimer": "Ansvarsfriskrivning",
-        "genai-long": "Innehåll genererat av AI kan vara felaktigt eller missvisande, verifiera alltid informationen. Allt innehåll genererat av AI på denna sida är märkt med följande symbol",
+
         "name-cannot-be-empty": "Namnfältet är obligatoriskt",
         "saving-name": "Sparar namn...",
         "rfc-1035-1": " måste följa ",
@@ -533,6 +532,11 @@
         "too-many-run-args": "För många argument, max 100",
         "pending-migrations": "Pågående överföringar",
         "migration": "Överföring",
-        "of": "av"
+        "of": "av",
+        "error-connecting-to-iam": "Fel vid anslutning till IAM",
+        "admin-visibility-auth": "Privat (auth proxy)",
+        "visibility-public-tooltip": "Din deployment är publikt åtkomlig på internet.",
+        "visibility-private-tooltip": "Din deployment är privat och inte åtkomlig på internet. Enbart intern trafik mellan appar är tillåten.",
+        "visibility-auth-tooltip": "Din deployment är privat och åtkomlig på internet via en autentiserings-proxy, detta begränsar tillåten trafik."
     }
 }

src/pages/admin/Admin.tsx

@@ -118,7 +118,11 @@ export const Admin = () => {
       },
       async () => {
         try {
-          const response = await listGpuLeases(keycloak.token!);
+          const response = await listGpuLeases(
+            keycloak.token!,
+            undefined,
+            true
+          );
           setDbGPUs(response);
         } catch (error: any) {
           errorHandler(error).forEach((e) =>

src/pages/edit/Specs.tsx

@@ -55,7 +55,7 @@ export const Specs = ({ resource }: { resource: Resource }) => {
   const [maxRam, setMaxRam] = useState<number>(
     resource.type === "vm" ? MAX_RAM_VM : MAX_RAM_DEPLOYMENT
   );
-  const [maxReplicas, setMaxReplicas] = useState<number>(MAX_REPLICAS);
+  const [maxReplicas, _] = useState<number>(MAX_REPLICAS);
 
   const getInitialCpu = () => {
     return resource.specs.cpuCores || 0;
@@ -72,6 +72,89 @@ export const Specs = ({ resource }: { resource: Resource }) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [editing, setEditing] = useState<boolean>(false);
 
+  const toClosestStep = (value: number, step: number) => {
+    return Math.round(Math.floor(value / step) * step * 100) / 100;
+  };
+
+  const calculateResourcesLeft = (
+    quota: { cpuCores: number; ram: number },
+    usage: { cpuCores: number; ram: number },
+    currentUsage: {
+      cpuCores: number;
+      ram: number;
+      replicas?: number;
+    }
+  ): {
+    totalCoresLeft: number;
+    totalRamLeft: number;
+  } => {
+    const usageWithoutDepl = {
+      cpuCores: Math.max(
+        usage.cpuCores - currentUsage.cpuCores * (currentUsage.replicas ?? 1),
+        0
+      ),
+      ram: Math.max(
+        usage.ram - currentUsage.ram * (currentUsage.replicas ?? 1),
+        0
+      ),
+    };
+
+    const totalCoresLeft = quota.cpuCores - usageWithoutDepl.cpuCores;
+    const totalRamLeft = quota.ram - usageWithoutDepl.ram;
+
+    return { totalCoresLeft, totalRamLeft };
+  };
+
+  useEffect(() => {
+    if (user) {
+      const currentUsage = {
+        cpuCores: resource.specs.cpuCores ?? 0,
+        ram: resource.specs.ram ?? 0,
+        replicas: (resource as Deployment).specs.replicas,
+      };
+
+      const { totalCoresLeft, totalRamLeft } = calculateResourcesLeft(
+        user.quota,
+        user.usage,
+        currentUsage
+      );
+
+      const newmax = {
+        cpuCores: toClosestStep(
+          Math.ceil(
+            (replicas !== 0 ? totalCoresLeft / replicas : totalCoresLeft) * 10
+          ) / 10,
+          resource.type === "vm" ? STEP_VM : STEP_DEPLOYMENT
+        ),
+        ram: toClosestStep(
+          Math.ceil(
+            (replicas !== 0 ? totalRamLeft / replicas : totalRamLeft) * 10
+          ) / 10,
+          resource.type === "vm" ? STEP_VM : STEP_DEPLOYMENT
+        ),
+      };
+
+      setMaxCpu(
+        // Set the maxCpu to the highest of the new max or the current value.
+        // This since the current value has been allowed previously, but the user is actually exceeding their quota.
+        Math.max(
+          newmax.cpuCores,
+          replicas !== 0
+            ? currentUsage.cpuCores / replicas
+            : currentUsage.cpuCores
+        )
+      );
+      setMaxRam(
+        // Set the maxRam to the highest of the new max or the current value.
+        // This since the current value has been allowed previously, but the user is actually exceeding their quota.
+        Math.max(
+          newmax.ram,
+          replicas !== 0 ? currentUsage.ram / replicas : currentUsage.ram
+        )
+      );
+    }
+  }, [user, resource, cpu, ram, replicas]);
+
   const updateSpecs = () => {
     if (resource.type === "deployment") {
       const d = resource as Deployment;
@@ -123,15 +206,6 @@ export const Specs = ({ resource }: { resource: Resource }) => {
     [cpu, ram, replicas, maxCpu, maxRam, maxReplicas]
   );
 
-  // Set max values
-  useEffect(() => {
-    setMaxCpu(20);
-    setMaxRam(20);
-    setMaxReplicas(20);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resource]);
-
   const isSame = () => {
     if (resource.type === "deployment") {
       const d = resource as Deployment;
@@ -342,7 +416,7 @@ export const Specs = ({ resource }: { resource: Resource }) => {
               <Grid xs={12}>
                 <Slider
                   value={cpu}
-                  onChange={(_, v) => setCpu(v as number)}
+                  onChange={(_: any, v: any) => setCpu(v as number)}
                   min={resource.type === "vm" ? MIN_CPU_VM : MIN_CPU_DEPLOYMENT}
                   max={maxCpu}
                   step={resource.type === "vm" ? STEP_VM : STEP_DEPLOYMENT}
@@ -389,7 +463,7 @@ export const Specs = ({ resource }: { resource: Resource }) => {
               <Grid xs={12}>
                 <Slider
                   value={ram}
-                  onChange={(_, v) => setRam(v as number)}
+                  onChange={(_: any, v: any) => setRam(v as number)}
                   min={resource.type === "vm" ? MIN_RAM_VM : MIN_RAM_DEPLOYMENT}
                   max={maxRam}
                   step={resource.type === "vm" ? STEP_VM : STEP_DEPLOYMENT}
@@ -464,7 +538,7 @@ export const Specs = ({ resource }: { resource: Resource }) => {
                 <Grid xs={12}>
                   <Slider
                     value={replicas}
-                    onChange={(_, v) => setReplicas(v as number)}
+                    onChange={(_: any, v: any) => setReplicas(v as number)}
                     min={MIN_REPLICAS}
                     max={maxReplicas}
                     step={1}