fix the create queues, and pods

Signed-off-by: Deep <[email protected]>

Author: de6p

apps/web/src/components/(dashboard)/bar-chart.tsx

@@ -6,7 +6,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
 
-// Sample data structure matching the original
 const sampleData = [
   {
     metadata: { name: "gpu-queue" },
@@ -118,21 +117,18 @@ const QueueResourcesBarChart = ({ data = sampleData }: QueueResourcesBarChartPro
 
     const resourceTypes = new Set<string>()
 
-    // Traverse the queue data and get all resource types
     data.forEach((queue) => {
       const allocated = queue.status?.allocated || {}
       Object.keys(allocated).forEach((resource) => resourceTypes.add(resource))
     })
 
-    // Convert resource type from Set to Array
     return Array.from(resourceTypes).map((resource) => ({
       value: resource,
       label: `${resource.charAt(0).toUpperCase() + resource.slice(1)} Resources`.replace("Nvidia.com/gpu", "GPU"),
     }))
   }, [data])
 
   useEffect(() => {
-    // If there is a resource option, select the first resource by default
     if (resourceOptions.length > 0 && !selectedResource) {
       setSelectedResource(resourceOptions[0].value)
     }
@@ -156,19 +152,16 @@ const QueueResourcesBarChart = ({ data = sampleData }: QueueResourcesBarChartPro
     return cpuStr.toString().includes("m") ? value / 1000 : value // m is converted to the number of cores
   }
 
-  // Process queue data and convert memory and CPU units
   const processData = (data: typeof sampleData) => {
     return data.reduce(
       (acc, queue) => {
         const name = queue.metadata.name
         const allocated = queue.status?.allocated || {}
         const capability = queue.spec?.capability || {}
 
-        // Handle memory unit conversion
         const allocatedMemory = convertMemoryToGi(allocated.memory || "0")
         const capabilityMemory = convertMemoryToGi(capability.memory || "0")
 
-        // Handle CPU unit conversion
         const allocatedCPU = convertCPUToCores(allocated.cpu || "0")
         const capabilityCPU = convertCPUToCores(capability.cpu || "0")
 
@@ -190,10 +183,8 @@ const QueueResourcesBarChart = ({ data = sampleData }: QueueResourcesBarChartPro
     )
   }
 
-  // Process queue data
   const processedData = useMemo(() => processData(data), [data])
 
-  // Build chart data for Recharts
   const chartData = useMemo(() => {
     return Object.keys(processedData).map((queueName) => ({
       name: queueName,
@@ -202,7 +193,6 @@ const QueueResourcesBarChart = ({ data = sampleData }: QueueResourcesBarChartPro
     }))
   }, [processedData, selectedResource])
 
-  // Get Y-axis label
   const getYAxisLabel = () => {
     switch (selectedResource) {
       case "memory":

apps/web/src/components/(dashboard)/pods/columns.tsx

@@ -14,7 +14,6 @@ import { ColumnDef } from "@tanstack/react-table"
 import { ArrowUpDown, Filter } from 'lucide-react'
 import { PodStatus } from "./pod-management"
 
-// Function to create columns with dynamic namespace and status filtering
 export const createColumns = (availableNamespaces: string[], availableStatuses: string[]): ColumnDef<PodStatus>[] => [
     {
         accessorKey: "name",
@@ -166,5 +165,4 @@ export const createColumns = (availableNamespaces: string[], availableStatuses:
 
 ]
 
-// Default columns for backward compatibility
 export const columns = createColumns([], []) 

apps/web/src/components/(dashboard)/pods/pod-create-dialog.tsx

@@ -1,21 +1,21 @@
 "use client"
 
+import { AlertCircle, CheckCircle, Loader2 } from "lucide-react"
 import * as React from "react"
-import { Plus, Loader2, CheckCircle, AlertCircle } from "lucide-react"
 
+import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+  DialogTitle
 } from "@/components/ui/dialog"
-import { Textarea } from "@/components/ui/textarea"
 import { Label } from "@/components/ui/label"
-import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Textarea } from "@/components/ui/textarea"
+import { trpc } from "@volcano/trpc/react"
 
 const defaultPodYaml = `apiVersion: v1
 kind: Pod
@@ -31,88 +31,130 @@ spec:
     - containerPort: 80
   restartPolicy: Always`
 
-export function CreatePodDialog({open, setOpen}:{open: boolean, setOpen: (open: boolean) => void}) {
+export function CreatePodDialog({ open, setOpen, handleRefresh }: { open: boolean, setOpen: (open: boolean) => void, handleRefresh: () => void }) {
   const [yaml, setYaml] = React.useState(defaultPodYaml)
-  const [isCreating, setIsCreating] = React.useState(false)
   const [status, setStatus] = React.useState<{
     type: "success" | "error" | null
     message: string
   }>({ type: null, message: "" })
 
-  const validateYaml = (yamlString: string) => {
-    try {
-      // Basic validation - check if it's valid YAML structure
-      const lines = yamlString.trim().split("\n")
-
-      // Check for required Kubernetes fields
-      const hasApiVersion = lines.some((line) => line.trim().startsWith("apiVersion:"))
-      const hasKind = lines.some((line) => line.trim().startsWith("kind:"))
-      const hasMetadata = lines.some((line) => line.trim().startsWith("metadata:"))
-      const hasSpec = lines.some((line) => line.trim().startsWith("spec:"))
-
-      if (!hasApiVersion) throw new Error("Missing required field: apiVersion")
-      if (!hasKind) throw new Error("Missing required field: kind")
-      if (!hasMetadata) throw new Error("Missing required field: metadata")
-      if (!hasSpec) throw new Error("Missing required field: spec")
-
-      // Check if kind is Pod
-      const kindLine = lines.find((line) => line.trim().startsWith("kind:"))
-      if (kindLine && !kindLine.includes("Pod")) {
-        throw new Error('Kind must be "Pod"')
-      }
-
-      return { valid: true, error: null }
-    } catch (error) {
-      return {
-        valid: false,
-        error: error instanceof Error ? error.message : "Invalid YAML format",
-      }
+  React.useEffect(() => {
+    if (open) {
+      setStatus({ type: null, message: "" })
     }
-  }
+  }, [open])
 
-  const handleCreatePod = async () => {
-    const validation = validateYaml(yaml)
+  const { mutateAsync: createPod, isPending: isCreating } = trpc.podRouter.createPod.useMutation({
+    onSuccess: () => {
+      setStatus({
+        type: "success",
+        message: "Pod created successfully!",
+      })
 
-    if (!validation.valid) {
+      setOpen(false)
+      handleRefresh()
+    },
+    onError: (error) => {
       setStatus({
         type: "error",
-        message: validation.error || "Invalid YAML format",
+        message: error.message,
       })
-      return
+    },
+  })
+
+
+
+  const parseYamlToManifest = (yamlString: string) => {
+    const lines = yamlString.trim().split('\n')
+    const manifest: any = {
+      apiVersion: '',
+      kind: '',
+      metadata: { name: '' },
+      spec: { containers: [] }
     }
 
-    setIsCreating(true)
-    setStatus({ type: null, message: "" })
+    const requiredFields = ['apiVersion', 'kind', 'metadata', 'spec']
+    const foundFields = new Set<string>()
+    let currentSection = ''
+    let currentSubSection = ''
+    let currentContainer: any = null
+    let inContainers = false
+
+    for (const line of lines) {
+      const trimmed = line.trim()
+      if (!trimmed || trimmed.startsWith('#')) continue
+
+      for (const field of requiredFields) {
+        if (trimmed.startsWith(`${field}:`)) {
+          foundFields.add(field)
+          if (field === 'apiVersion' || field === 'kind') {
+            manifest[field] = trimmed.split(':')[1].trim()
+          }
+          currentSection = field
+          currentSubSection = ''
+        }
+      }
 
-    try {
-      // Simulate API call to create pod
-      await new Promise((resolve) => setTimeout(resolve, 2000))
+      if (trimmed.startsWith('name:') && currentSection === 'metadata') {
+        manifest.metadata.name = trimmed.split(':')[1].trim()
+      }
 
-      // In a real implementation, you would call your Kubernetes API here
-      // const response = await fetch('/api/pods', {
-      //   method: 'POST',
-      //   headers: { 'Content-Type': 'application/yaml' },
-      //   body: yaml
-      // })
+      if (currentSection === 'spec') {
+        if (trimmed.startsWith('containers:')) {
+          inContainers = true
+          currentSubSection = 'containers'
+        } else if (trimmed.startsWith('- name:') && inContainers) {
+          if (currentContainer) {
+            manifest.spec.containers.push(currentContainer)
+          }
+          currentContainer = { name: trimmed.split(':')[1].trim() }
+        } else if (trimmed.startsWith('image:') && currentContainer) {
+          currentContainer.image = trimmed.split(':')[1].trim()
+        } else if (trimmed.startsWith('ports:') && currentContainer) {
+          currentContainer.ports = []
+          currentSubSection = 'ports'
+        } else if (trimmed.startsWith('- containerPort:') && currentSubSection === 'ports' && currentContainer) {
+          const port = parseInt(trimmed.split(':')[1].trim())
+          currentContainer.ports.push({ containerPort: port })
+        } else if (trimmed.startsWith('restartPolicy:') && currentSection === 'spec') {
+          manifest.spec.restartPolicy = trimmed.split(':')[1].trim()
+        }
+      }
+    }
 
-      setStatus({
-        type: "success",
-        message: "Pod created successfully!",
-      })
+    if (currentContainer) {
+      manifest.spec.containers.push(currentContainer)
+    }
 
-      // Reset form after successful creation
-      setTimeout(() => {
-        setOpen(false)
-        setYaml(defaultPodYaml)
-        setStatus({ type: null, message: "" })
-      }, 2000)
+    const missingFields = requiredFields.filter(field => !foundFields.has(field))
+    if (missingFields.length > 0) {
+      throw new Error(`Missing required fields: ${missingFields.join(', ')}`)
+    }
+
+    if (manifest.kind !== 'Pod') {
+      throw new Error('Kind must be "Pod"')
+    }
+
+    if (!manifest.metadata.name) {
+      throw new Error('Missing required field: metadata.name')
+    }
+
+    if (!manifest.spec.containers || manifest.spec.containers.length === 0) {
+      throw new Error('Pod spec must include at least one container')
+    }
+
+    return manifest
+  }
+
+  const handleCreatePod = async () => {
+    try {
+      const podManifest = parseYamlToManifest(yaml)
+      await createPod({ podManifest })
     } catch (error) {
       setStatus({
         type: "error",
-        message: error instanceof Error ? error.message : "Failed to create pod",
+        message: error instanceof Error ? error.message : "Failed to create pod"
       })
-    } finally {
-      setIsCreating(false)
     }
   }
 
@@ -123,7 +165,7 @@ export function CreatePodDialog({open, setOpen}:{open: boolean, setOpen: (open:
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      
+
       <DialogContent className="max-w-4xl max-h-[80vh] flex flex-col">
         <DialogHeader>
           <DialogTitle>Create Kubernetes Pod</DialogTitle>