Merge pull request #364 from kthcloud/gpu-deployment-updates

General updates related to gpu deployment usage and the updated oauth2 package

Author: Phillezi

bun.lockb

@@ -67,7 +67,7 @@
     "@types/react-dom": "^18.3.7",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.7.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",

package.json

@@ -16,6 +16,7 @@ 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 (
@@ -42,6 +43,7 @@ export default function App() {
                 <ThemeProvider>
                   <ScrollToTop />
                   <BaseOptionChartStyle />
+                  <TokenExpiryModal />
                   <Router />
                 </ThemeProvider>
               </SnackbarProvider>

src/App.tsx

@@ -2,14 +2,9 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "react-oidc-context";
 
-import {
-  Box,
-  Button,
-  CircularProgress,
-  Paper,
-  Typography,
-} from "@mui/material";
+import { Box, Button, Paper, Typography } from "@mui/material";
 import Page from "./Page";
+import LoadingPage from "./LoadingPage";
 
 export default function Callback() {
   const navigate = useNavigate();
@@ -31,16 +26,7 @@ export default function Callback() {
   }, [auth.isLoading, auth.isAuthenticated, navigate]);
 
   if (auth.isLoading) {
-    return (
-      <Page>
-        <Box component="div" sx={{ minHeight: "100vh" }}>
-          <CircularProgress />
-          <Typography mt={2} variant="h6">
-            Authenticating...
-          </Typography>
-        </Box>
-      </Page>
-    );
+    return <LoadingPage />;
   }
 
   if (auth.error) {

src/components/Callback.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { useAuth } from "react-oidc-context";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Typography,
+} from "@mui/material";
+
+export default function TokenExpiryModal() {
+  const auth = useAuth();
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    return auth.events.addAccessTokenExpiring(() => {
+      setOpen(true);
+    });
+  }, [auth.events]);
+
+  const handleContinue = async () => {
+    try {
+      await auth.signinSilent();
+      setOpen(false);
+    } catch (err) {
+      // notistack insted
+      console.error("Silent renew failed", err);
+    }
+  };
+
+  const handleLogout = () => {
+    auth.removeUser();
+  };
+
+  return (
+    <Dialog open={open}>
+      <DialogTitle>Session Expiring</DialogTitle>
+
+      <DialogContent>
+        <Typography>
+          Your session is about to expire due to inactivity. Would you like to
+          stay signed in?
+        </Typography>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={handleLogout} color="error">
+          Log out
+        </Button>
+
+        <Button onClick={handleContinue} variant="contained">
+          Continue session
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/components/TokenExpiryModal.tsx

@@ -0,0 +1,91 @@
+import { Stack, TextField, IconButton, Chip, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import { useState } from "react";
+
+// Simple CEL validation function (stub, replace with real parser)
+const validateCel = (expr: string): boolean => {
+  try {
+    if (!expr) return true; // empty allowed
+    // TODO: Replace with actual CEL parser/validation
+    // For now: basic check for balanced parentheses
+    let count = 0;
+    for (const c of expr) {
+      if (c === "(") count++;
+      if (c === ")") count--;
+      if (count < 0) return false;
+    }
+    return count === 0;
+  } catch {
+    return false;
+  }
+};
+
+interface CelExprBuilderProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  label?: string;
+  placeholder?: string;
+}
+
+export default function CelExprBuilder({
+  value,
+  onChange,
+  label = "CEL Expressions",
+  placeholder = "Enter CEL expression",
+}: CelExprBuilderProps) {
+  const [input, setInput] = useState("");
+
+  const addExpr = () => {
+    const expr = input.trim();
+    if (!expr) return;
+
+    const newValue = [...value, expr];
+    onChange(newValue);
+    setInput("");
+  };
+
+  const removeExpr = (index: number) => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+
+  return (
+    <Stack spacing={1}>
+      <Typography variant="subtitle2">{label}</Typography>
+
+      {/* Existing expressions as Chips */}
+      <Stack direction="row" spacing={1} flexWrap="wrap">
+        {value.map((expr, idx) => {
+          const valid = validateCel(expr);
+          return (
+            <Chip
+              key={idx}
+              label={expr}
+              color={valid ? "primary" : "error"}
+              onDelete={() => removeExpr(idx)}
+            />
+          );
+        })}
+      </Stack>
+
+      {/* Input field for new expression */}
+      <Stack direction="row" spacing={1}>
+        <TextField
+          fullWidth
+          size="small"
+          placeholder={placeholder}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          error={(input && !validateCel(input)) || false}
+          helperText={input && !validateCel(input) ? "Invalid CEL syntax" : ""}
+        />
+        <IconButton
+          color="primary"
+          onClick={addExpr}
+          disabled={!input || !validateCel(input)}
+        >
+          <AddIcon />
+        </IconButton>
+      </Stack>
+    </Stack>
+  );
+}

src/components/admin/CELExprBuilder.tsx

@@ -33,7 +33,14 @@ export default function ClusterOverviewTab() {
           const hasDRA = zone.capabilities?.includes("dra");
 
           return (
-            <Card key={zone.name} variant="outlined">
+            <Card
+              key={zone.name}
+              variant="outlined"
+              sx={{
+                opacity: zone.enabled === false ? 0.5 : 1, // gray out if disabled
+                pointerEvents: zone.enabled === false ? "none" : "auto", // disable interactions
+              }}
+            >
               <CardContent>
                 <Stack spacing={2}>
                   {/* Header */}
@@ -42,10 +49,26 @@ export default function ClusterOverviewTab() {
                     justifyContent="space-between"
                     alignItems="center"
                   >
-                    <Typography variant="subtitle1" fontWeight={600}>
+                    <Typography
+                      variant="subtitle1"
+                      fontWeight={600}
+                      color={
+                        zone.enabled === false
+                          ? "text.disabled"
+                          : "text.primary"
+                      }
+                    >
                       {zone.name}
                     </Typography>
-                    <Typography variant="subtitle1" fontWeight={600}>
+                    <Typography
+                      variant="subtitle1"
+                      fontWeight={600}
+                      color={
+                        zone.enabled === false
+                          ? "text.disabled"
+                          : "text.primary"
+                      }
+                    >
                       {zone.description}
                     </Typography>
                   </Stack>
@@ -58,12 +81,14 @@ export default function ClusterOverviewTab() {
                         label={cap.toUpperCase()}
                         size="small"
                         color={cap === "dra" ? "primary" : "default"}
+                        sx={{
+                          opacity: zone.enabled === false ? 0.5 : 1,
+                        }}
                       />
                     ))}
                   </Stack>
 
-                  {/* Optional DRA section */}
-                  {hasDRA && (
+                  {hasDRA && zone.enabled !== false && (
                     <>
                       <Divider />
                       <DRAConfigPanel zone={zone} roles={roles} />

src/components/admin/ClusterOverviewTab.tsx

@@ -10,7 +10,6 @@ import useAdmin from "../../hooks/useAdmin";
 interface DRAConfigPanelProps {
   zone: {
     name: string;
-    // extend later with draResources, policies, etc
   };
   roles: string[];
 }

src/components/admin/DRAConfigPanel.tsx

@@ -103,19 +103,24 @@ export default function GpuClaimEditor({ value, onChange }: Props) {
                 required
               />
 
-              {/* TODO: CEL expr for selectors*/}
-              {/* <Autocomplete
-                multiple
-                freeSolo
-                options={["e"]}
-                label="Selectors"
-                value={gpu.selectors}
-                onChange={(_, sel) => {
-                  updateRequested(idx, {
-                    selectors: sel,
-                  });
-                }}
-              /> */}
+              {/*gpu.selectors?.find(((s as any)) => "cel" in s) && (
+                <CelExprBuilder
+                  value={[
+                    (gpu.selectors!.find(((s as any)) => "cel" in s) as any).cel
+                      .expression,
+                  ]} // wrap as array
+                  onChange={(newExpressions) => {
+                    const newSelectors = gpu.selectors!.map((s) =>
+                      "cel" in s
+                        ? { cel: { expression: newExpressions[0] } } // update CEL
+                        : s
+                    );
+                    updateRequested(idx, { selectors: newSelectors });
+                  }}
+                  label="Selectors (CEL expression)"
+                  placeholder="gpu.memory > 4 && gpu.computeCapability >= 7.0"
+                />
+              )*/}
 
               <Stack spacing={2}>
                 <Typography>{"Driver configuration"}</Typography>

src/components/admin/GPUClaimEditor.tsx

@@ -244,6 +244,18 @@ export const renderStatusCode = (row: Resource) => {
   );
 };
 
+export const renderDeploymentGPU = (gpus: Deployment["specs"]["gpus"]) => {
+  if (!gpus || gpus.length <= 0) return null;
+  return (
+    <Label
+      variant="ghost"
+      startIcon={<Iconify icon="mdi:gpu" sx={{ opacity: 0.65 }} />}
+    >
+      {gpus.length > 1 ? gpus.length : gpus[0].claimName + "/" + gpus[0].name}
+    </Label>
+  );
+};
+
 export const renderZone = (row: Resource, zones: ZoneRead[]) => {
   if (!row.zone || !zones) {
     return <></>;