mirror of
https://github.com/lordmathis/llamactl.git
synced 2025-11-06 17:14:28 +00:00
Redesign create/edit instance dialog
This commit is contained in:
@@ -1,98 +0,0 @@
|
||||
import React from 'react'
|
||||
import type { CreateInstanceOptions } from '@/types/instance'
|
||||
import { getAdvancedFields, basicFieldsConfig } from '@/lib/zodFormUtils'
|
||||
import { getFieldType } from '@/schemas/instanceOptions'
|
||||
import TextInput from '@/components/form/TextInput'
|
||||
import NumberInput from '@/components/form/NumberInput'
|
||||
import CheckboxInput from '@/components/form/CheckboxInput'
|
||||
import ArrayInput from '@/components/form/ArrayInput'
|
||||
|
||||
interface AdvancedInstanceFieldsProps {
|
||||
formData: CreateInstanceOptions
|
||||
onChange: (key: keyof CreateInstanceOptions, value: any) => void
|
||||
}
|
||||
|
||||
const AdvancedInstanceFields: React.FC<AdvancedInstanceFieldsProps> = ({
|
||||
formData,
|
||||
onChange
|
||||
}) => {
|
||||
const advancedFields = getAdvancedFields()
|
||||
|
||||
const renderField = (fieldKey: keyof CreateInstanceOptions) => {
|
||||
const config = basicFieldsConfig[fieldKey as string] || { label: fieldKey }
|
||||
const fieldType = getFieldType(fieldKey)
|
||||
|
||||
switch (fieldType) {
|
||||
case 'boolean':
|
||||
return (
|
||||
<CheckboxInput
|
||||
key={fieldKey}
|
||||
id={fieldKey}
|
||||
label={config.label}
|
||||
value={formData[fieldKey] as boolean | undefined}
|
||||
onChange={(value) => onChange(fieldKey, value)}
|
||||
description={config.description}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'number':
|
||||
return (
|
||||
<NumberInput
|
||||
key={fieldKey}
|
||||
id={fieldKey}
|
||||
label={config.label}
|
||||
value={formData[fieldKey] as number | undefined}
|
||||
onChange={(value) => onChange(fieldKey, value)}
|
||||
placeholder={config.placeholder}
|
||||
description={config.description}
|
||||
/>
|
||||
)
|
||||
|
||||
case 'array':
|
||||
return (
|
||||
<ArrayInput
|
||||
key={fieldKey}
|
||||
id={fieldKey}
|
||||
label={config.label}
|
||||
value={formData[fieldKey] as string[] | undefined}
|
||||
onChange={(value) => onChange(fieldKey, value)}
|
||||
placeholder={config.placeholder}
|
||||
description={config.description}
|
||||
/>
|
||||
)
|
||||
|
||||
default:
|
||||
return (
|
||||
<TextInput
|
||||
key={fieldKey}
|
||||
id={fieldKey}
|
||||
label={config.label}
|
||||
value={formData[fieldKey] as string | number | undefined}
|
||||
onChange={(value) => onChange(fieldKey, value)}
|
||||
placeholder={config.placeholder}
|
||||
description={config.description}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Filter out restart options and backend_options (handled separately)
|
||||
const fieldsToRender = advancedFields.filter(
|
||||
fieldKey => !['max_restarts', 'restart_delay', 'backend_options'].includes(fieldKey as string)
|
||||
)
|
||||
|
||||
if (fieldsToRender.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-md font-medium">Advanced Instance Configuration</h4>
|
||||
{fieldsToRender
|
||||
.sort()
|
||||
.map(renderField)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AdvancedInstanceFields
|
||||
117
webui/src/components/instance/BackendConfigurationCard.tsx
Normal file
117
webui/src/components/instance/BackendConfigurationCard.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import React, { useState } from 'react'
|
||||
import { BackendType, type CreateInstanceOptions } from '@/types/instance'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Terminal, ChevronDown, ChevronRight } from 'lucide-react'
|
||||
import { getBasicBackendFields, getAdvancedBackendFields } from '@/lib/zodFormUtils'
|
||||
import BackendFormField from '@/components/BackendFormField'
|
||||
import SelectInput from '@/components/form/SelectInput'
|
||||
|
||||
interface BackendConfigurationCardProps {
|
||||
formData: CreateInstanceOptions
|
||||
onBackendFieldChange: (key: string, value: unknown) => void
|
||||
onChange: (key: keyof CreateInstanceOptions, value: unknown) => void
|
||||
onParseCommand: () => void
|
||||
}
|
||||
|
||||
const BackendConfigurationCard: React.FC<BackendConfigurationCardProps> = ({
|
||||
formData,
|
||||
onBackendFieldChange,
|
||||
onChange,
|
||||
onParseCommand
|
||||
}) => {
|
||||
const [showAdvanced, setShowAdvanced] = useState(false)
|
||||
const basicBackendFields = getBasicBackendFields(formData.backend_type)
|
||||
const advancedBackendFields = getAdvancedBackendFields(formData.backend_type)
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Backend Configuration</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Backend Type Selection */}
|
||||
<SelectInput
|
||||
id="backend_type"
|
||||
label="Backend Type"
|
||||
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)' }
|
||||
]}
|
||||
description="Select the backend server type"
|
||||
/>
|
||||
|
||||
{/* Parse Command Section */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={onParseCommand}
|
||||
className="flex items-center gap-2 w-fit"
|
||||
>
|
||||
<Terminal className="h-4 w-4" />
|
||||
Parse Command
|
||||
</Button>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Import settings from your backend command
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Basic Backend Options */}
|
||||
{basicBackendFields.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-md font-medium">Basic Backend Options</h3>
|
||||
{basicBackendFields.map((fieldKey) => (
|
||||
<BackendFormField
|
||||
key={fieldKey}
|
||||
fieldKey={fieldKey}
|
||||
value={(formData.backend_options as Record<string, unknown>)?.[fieldKey] as string | number | boolean | string[] | undefined}
|
||||
onChange={onBackendFieldChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Advanced Backend Options */}
|
||||
{advancedBackendFields.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||||
className="flex items-center gap-2 p-0 h-auto font-medium"
|
||||
>
|
||||
{showAdvanced ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
Advanced Backend Options
|
||||
<span className="text-muted-foreground text-sm font-normal">
|
||||
({advancedBackendFields.length} options)
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
{showAdvanced && (
|
||||
<div className="space-y-4 pl-6 border-l-2 border-muted">
|
||||
{advancedBackendFields
|
||||
.sort()
|
||||
.map((fieldKey) => (
|
||||
<BackendFormField
|
||||
key={fieldKey}
|
||||
fieldKey={fieldKey}
|
||||
value={(formData.backend_options as Record<string, unknown>)?.[fieldKey] as string | number | boolean | string[] | undefined}
|
||||
onChange={onBackendFieldChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default BackendConfigurationCard
|
||||
84
webui/src/components/instance/InstanceSettingsCard.tsx
Normal file
84
webui/src/components/instance/InstanceSettingsCard.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import React from 'react'
|
||||
import type { CreateInstanceOptions } from '@/types/instance'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import AutoRestartConfiguration from '@/components/instance/AutoRestartConfiguration'
|
||||
import NumberInput from '@/components/form/NumberInput'
|
||||
import CheckboxInput from '@/components/form/CheckboxInput'
|
||||
|
||||
interface InstanceSettingsCardProps {
|
||||
instanceName: string
|
||||
nameError: string
|
||||
isEditing: boolean
|
||||
formData: CreateInstanceOptions
|
||||
onNameChange: (name: string) => void
|
||||
onChange: (key: keyof CreateInstanceOptions, value: unknown) => void
|
||||
}
|
||||
|
||||
const InstanceSettingsCard: React.FC<InstanceSettingsCardProps> = ({
|
||||
instanceName,
|
||||
nameError,
|
||||
isEditing,
|
||||
formData,
|
||||
onNameChange,
|
||||
onChange
|
||||
}) => {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Instance Settings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Instance Name */}
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">
|
||||
Instance Name <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={instanceName}
|
||||
onChange={(e) => onNameChange(e.target.value)}
|
||||
placeholder="my-instance"
|
||||
disabled={isEditing}
|
||||
className={nameError ? "border-red-500" : ""}
|
||||
/>
|
||||
{nameError && <p className="text-sm text-red-500">{nameError}</p>}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Unique identifier for the instance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Auto Restart Configuration */}
|
||||
<AutoRestartConfiguration
|
||||
formData={formData}
|
||||
onChange={onChange}
|
||||
/>
|
||||
|
||||
{/* Basic Instance Options */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium">Basic Instance Options</h3>
|
||||
|
||||
<NumberInput
|
||||
id="idle_timeout"
|
||||
label="Idle Timeout (minutes)"
|
||||
value={formData.idle_timeout}
|
||||
onChange={(value) => onChange('idle_timeout', value)}
|
||||
placeholder="30"
|
||||
description="Minutes before stopping an idle instance"
|
||||
/>
|
||||
|
||||
<CheckboxInput
|
||||
id="on_demand_start"
|
||||
label="On Demand Start"
|
||||
value={formData.on_demand_start}
|
||||
onChange={(value) => onChange('on_demand_start', value)}
|
||||
description="Start instance only when needed"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default InstanceSettingsCard
|
||||
Reference in New Issue
Block a user