Update SystemInfo dialog

2025-11-05 16:44:22 +00:00 · 2025-09-23 22:05:31 +02:00
parent edf0575925
commit e3bf8ac05a
4 changed files with 84 additions and 84 deletions
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -3,7 +3,7 @@ import Header from "@/components/Header";
 import InstanceList from "@/components/InstanceList";
 import InstanceDialog from "@/components/InstanceDialog";
 import LoginDialog from "@/components/LoginDialog";
-import BackendInfoDialog from "./components/BackendInfoDialog";
+import SystemInfoDialog from "./components/SystemInfoDialog";
 import { type CreateInstanceOptions, type Instance } from "@/types/instance";
 import { useInstances } from "@/contexts/InstancesContext";
 import { useAuth } from "@/contexts/AuthContext";
@@ -13,7 +13,7 @@ import { Toaster } from "sonner";
 function App() {
  const { isAuthenticated, isLoading: authLoading } = useAuth();
  const [isInstanceModalOpen, setIsInstanceModalOpen] = useState(false);
-  const [isBackendInfoModalOpen, setIsBackendInfoModalOpen] = useState(false);
+  const [isSystemInfoModalOpen, setIsSystemInfoModalOpen] = useState(false);
  const [editingInstance, setEditingInstance] = useState<Instance | undefined>(
    undefined
  );
@@ -37,8 +37,8 @@ function App() {
    }
  };

-  const handleShowBackendInfo = () => {
-    setIsBackendInfoModalOpen(true);
+  const handleShowSystemInfo = () => {
+    setIsSystemInfoModalOpen(true);
  };

  // Show loading spinner while checking auth
@@ -70,7 +70,7 @@ function App() {
  return (
    <ThemeProvider>
      <div className="min-h-screen bg-background">
-        <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowBackendInfo} />
+        <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowSystemInfo} />
        <main className="container mx-auto max-w-4xl px-4 py-8">
          <InstanceList editInstance={handleEditInstance} />
        </main>
@@ -82,9 +82,9 @@ function App() {
          instance={editingInstance}
        />

-        <BackendInfoDialog
-          open={isBackendInfoModalOpen}
-          onOpenChange={setIsBackendInfoModalOpen}
+        <SystemInfoDialog
+          open={isSystemInfoModalOpen}
+          onOpenChange={setIsSystemInfoModalOpen}
        />
        
        <Toaster />
--- a/webui/src/components/ParseCommandDialog.tsx
+++ b/webui/src/components/ParseCommandDialog.tsx
@@ -105,9 +105,9 @@ const ParseCommandDialog: React.FC<ParseCommandDialogProps> = ({
          <div>
            <Label className="text-sm font-medium">Backend Type:
              <span className="font-normal text-muted-foreground">
-                {backendType === BackendType.LLAMA_CPP && 'Llama Server (llama_cpp)'}
-                {backendType === BackendType.MLX_LM && 'MLX LM (mlx_lm)'}
-                {backendType === BackendType.VLLM && 'vLLM (vllm)'}
+                {backendType === BackendType.LLAMA_CPP && 'Llama Server'}
+                {backendType === BackendType.MLX_LM && 'MLX LM'}
+                {backendType === BackendType.VLLM && 'vLLM'}
              </span>
            </Label>
          </div>
--- a/webui/src/components/BackendInfoDialog.tsx
+++ b/webui/src/components/BackendInfoDialog.tsx
@@ -20,6 +20,7 @@ import {
  Info
 } from 'lucide-react'
 import { serverApi } from '@/lib/api'
+import { BackendType, type BackendTypeValue } from '@/types/instance'

 // Helper to get version from environment
 const getAppVersion = (): string => {
@@ -30,7 +31,7 @@ const getAppVersion = (): string => {
  }
 }

-interface BackendInfoDialogProps {
+interface SystemInfoDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
 }
@@ -41,27 +42,25 @@ interface BackendInfo {
  help: string
 }

-type BackendType = 'llama-cpp' | 'mlx' | 'vllm'
-
 const BACKEND_OPTIONS = [
-  { value: 'llama-cpp', label: 'Llama.cpp' },
-  { value: 'mlx', label: 'MLX' },
-  { value: 'vllm', label: 'vLLM' },
-] as const
+  { value: BackendType.LLAMA_CPP, label: 'Llama Server' },
+  { value: BackendType.MLX_LM, label: 'MLX LM' },
+  { value: BackendType.VLLM, label: 'vLLM' },
+]

-const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
+const SystemInfoDialog: React.FC<SystemInfoDialogProps> = ({
  open,
  onOpenChange
 }) => {
-  const [selectedBackend, setSelectedBackend] = useState<BackendType>('llama-cpp')
+  const [selectedBackend, setSelectedBackend] = useState<BackendTypeValue>(BackendType.LLAMA_CPP)
  const [backendInfo, setBackendInfo] = useState<BackendInfo | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [showHelp, setShowHelp] = useState(false)

  // Fetch backend info
-  const fetchBackendInfo = async (backend: BackendType) => {
-    if (backend !== 'llama-cpp') {
+  const fetchBackendInfo = async (backend: BackendTypeValue) => {
+    if (backend !== BackendType.LLAMA_CPP) {
      setBackendInfo(null)
      setError(null)
      return
@@ -88,21 +87,21 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
  // Load data when dialog opens or backend changes
  useEffect(() => {
    if (open) {
-      fetchBackendInfo(selectedBackend)
+      void fetchBackendInfo(selectedBackend)
    }
  }, [open, selectedBackend])

  const handleBackendChange = (value: string) => {
-    setSelectedBackend(value as BackendType)
+    setSelectedBackend(value as BackendTypeValue)
    setShowHelp(false) // Reset help section when switching backends
  }

-  const renderBackendContent = () => {
-    if (selectedBackend !== 'llama-cpp') {
+  const renderBackendSpecificContent = () => {
+    if (selectedBackend !== BackendType.LLAMA_CPP) {
      return (
-        <div className="flex items-center justify-center py-12">
+        <div className="flex items-center justify-center py-8">
          <div className="text-center space-y-3">
-            <Info className="h-12 w-12 text-gray-400 mx-auto" />
+            <Info className="h-8 w-8 text-gray-400 mx-auto" />
            <div>
              <h3 className="font-semibold text-gray-700">Backend Info Not Available</h3>
              <p className="text-sm text-gray-500 mt-1">
@@ -116,7 +115,7 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({

    if (loading && !backendInfo) {
      return (
-        <div className="flex items-center justify-center py-12">
+        <div className="flex items-center justify-center py-8">
          <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
          <span className="ml-2 text-gray-400">Loading backend information...</span>
        </div>
@@ -138,17 +137,6 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({

    return (
      <div className="space-y-6">
-        {/* Llamactl Version Section */}
-        <div className="space-y-3">
-          <h3 className="font-semibold">Llamactl Version</h3>
-
-          <div className="bg-gray-900 rounded-lg p-4">
-            <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
-              {getAppVersion()}
-            </pre>
-          </div>
-        </div>
-
        {/* Backend Version Section */}
        <div className="space-y-3">
          <h3 className="font-semibold">
@@ -216,34 +204,46 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-4xl max-w-[calc(100%-2rem)] max-h-[80vh] flex flex-col">
        <DialogHeader>
-          <div className="flex items-center justify-between">
-            <div>
          <DialogTitle className="flex items-center gap-2">
            <Monitor className="h-5 w-5" />
-                Backend Information
+            System Information
          </DialogTitle>
          <DialogDescription>
-                View backend-specific environment and capabilities
+            View system and backend-specific environment and capabilities
          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto">
+          <div className="space-y-6">
+            {/* Llamactl Version Section - Always shown */}
+            <div className="space-y-3">
+              <h3 className="font-semibold">Llamactl Version</h3>
+              <div className="bg-gray-900 rounded-lg p-4">
+                <pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
+                  {getAppVersion()}
+                </pre>
+              </div>
            </div>

-            <div className="flex items-center gap-2">
-              <div className="w-32">
+            {/* Backend Selection Section */}
+            <div className="space-y-3">
+              <h3 className="font-semibold">Backend Information</h3>
+              <div className="flex items-center gap-3">
+                <div className="flex-1">
                  <SelectInput
                    id="backend-select"
                    label=""
                    value={selectedBackend}
-                  onChange={(value) => handleBackendChange(value || 'llama-cpp')}
+                    onChange={(value) => handleBackendChange(value || BackendType.LLAMA_CPP)}
                    options={BACKEND_OPTIONS}
                    className="text-sm"
                  />
                </div>
-
-              {selectedBackend === 'llama-cpp' && (
+                {selectedBackend === BackendType.LLAMA_CPP && (
                  <Button
                    variant="outline"
                    size="sm"
-                  onClick={() => fetchBackendInfo(selectedBackend)}
+                    onClick={() => void fetchBackendInfo(selectedBackend)}
                    disabled={loading}
                  >
                    {loading ? (
@@ -255,10 +255,10 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
                )}
              </div>
            </div>
-        </DialogHeader>

-        <div className="flex-1 overflow-y-auto">
-          {renderBackendContent()}
+            {/* Backend-specific content */}
+            {renderBackendSpecificContent()}
+          </div>
        </div>

        <DialogFooter>
@@ -271,4 +271,4 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
  )
 }

-export default BackendInfoDialog
+export default SystemInfoDialog
--- a/webui/src/components/instance/BackendConfigurationCard.tsx
+++ b/webui/src/components/instance/BackendConfigurationCard.tsx
@@ -37,9 +37,9 @@ const BackendConfigurationCard: React.FC<BackendConfigurationCardProps> = ({
          value={formData.backend_type || BackendType.LLAMA_CPP}
          onChange={(value) => onChange('backend_type', value)}
          options={[
-            { value: BackendType.LLAMA_CPP, label: 'Llama Server (llama_cpp)' },
-            { value: BackendType.MLX_LM, label: 'MLX LM (mlx_lm)' },
-            { value: BackendType.VLLM, label: 'vLLM (vllm)' }
+            { value: BackendType.LLAMA_CPP, label: 'Llama Server' },
+            { value: BackendType.MLX_LM, label: 'MLX LM' },
+            { value: BackendType.VLLM, label: 'vLLM' }
          ]}
          description="Select the backend server type"
        />