79 lines
3.1 KiB
TypeScript
79 lines
3.1 KiB
TypeScript
/**
|
|
* Assignments tab — maps each component to a primary provider+model with
|
|
* an optional fallback. Settings column packs temp/max/timeout into one
|
|
* caption row to keep the table scannable.
|
|
*/
|
|
import React from 'react';
|
|
import {
|
|
Box, TableContainer, Table, TableHead, TableBody, TableRow, TableCell,
|
|
Button, Chip, IconButton, Switch, Typography,
|
|
} from '@mui/material';
|
|
import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
|
|
import type { ComponentAssignment } from '../ProvidersManagement.types';
|
|
|
|
interface Props {
|
|
assignments: ComponentAssignment[];
|
|
hasProvidersAndModels: boolean;
|
|
onAdd: () => void;
|
|
onEdit: (a: ComponentAssignment) => void;
|
|
onDelete: (a: ComponentAssignment) => void;
|
|
onToggleEnabled: (a: ComponentAssignment) => void;
|
|
}
|
|
|
|
export const AssignmentsTab: React.FC<Props> = ({ assignments, hasProvidersAndModels, onAdd, onEdit, onDelete, onToggleEnabled }) => (
|
|
<>
|
|
<Box display="flex" justifyContent="flex-end" mb={2}>
|
|
<Button variant="contained" startIcon={<AddIcon />} onClick={onAdd} disabled={!hasProvidersAndModels}>
|
|
Add Assignment
|
|
</Button>
|
|
</Box>
|
|
<TableContainer>
|
|
<Table size="small">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Component</TableCell>
|
|
<TableCell>Provider / Model</TableCell>
|
|
<TableCell>Fallback</TableCell>
|
|
<TableCell>Settings</TableCell>
|
|
<TableCell>Enabled</TableCell>
|
|
<TableCell>Actions</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{assignments.map((a) => (
|
|
<TableRow key={a.assignment_id} hover>
|
|
<TableCell>
|
|
<strong>{a.component_name}</strong>
|
|
<Typography variant="caption" display="block" color="text.secondary">{a.component_code}</Typography>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Chip label={a.provider_code} size="small" sx={{ mr: 0.5 }} />
|
|
<Chip label={a.model_code} size="small" variant="outlined" />
|
|
</TableCell>
|
|
<TableCell>
|
|
{a.fallback_provider_code ? (
|
|
<>
|
|
<Chip label={a.fallback_provider_code} size="small" sx={{ mr: 0.5 }} />
|
|
<Chip label={a.fallback_model_code} size="small" variant="outlined" />
|
|
</>
|
|
) : '-'}
|
|
</TableCell>
|
|
<TableCell>
|
|
<Typography variant="caption">
|
|
temp: {a.temperature} | max: {a.max_tokens} | timeout: {a.timeout_ms}ms
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Switch checked={a.is_enabled} onChange={() => onToggleEnabled(a)} size="small" />
|
|
</TableCell>
|
|
<TableCell>
|
|
<IconButton size="small" onClick={() => onEdit(a)}><EditIcon /></IconButton>
|
|
<IconButton size="small" onClick={() => onDelete(a)} color="error"><DeleteIcon /></IconButton>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</>
|
|
);
|