feat(19-03): add credential profiles page and API types
- Create CredentialProfilesPage component with full CRUD for RouterOS and SNMP profiles - Add credentialProfilesApi types and client to api.ts (blocking dependency from 19-01) - Profile list grouped by type with device count, edit, and delete actions - Create/edit dialog with conditional fields per credential type - SNMPv3 form shows auth/privacy fields based on security_level selection - Delete confirmation with 409 error handling for linked devices Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
530
frontend/src/components/settings/CredentialProfilesPage.tsx
Normal file
530
frontend/src/components/settings/CredentialProfilesPage.tsx
Normal file
@@ -0,0 +1,530 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { Plus, Pencil, Trash2, KeyRound, Shield } from 'lucide-react'
|
||||||
|
import {
|
||||||
|
credentialProfilesApi,
|
||||||
|
type CredentialProfileResponse,
|
||||||
|
type CredentialProfileCreate,
|
||||||
|
} from '@/lib/api'
|
||||||
|
import { useAuth, canWrite } from '@/lib/auth'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogFooter,
|
||||||
|
} from '@/components/ui/dialog'
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select'
|
||||||
|
|
||||||
|
// ─── Types ──────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface CredentialProfilesPageProps {
|
||||||
|
tenantId: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type CredentialType = 'routeros' | 'snmp_v2c' | 'snmp_v3'
|
||||||
|
type SecurityLevel = 'noAuthNoPriv' | 'authNoPriv' | 'authPriv'
|
||||||
|
|
||||||
|
const CREDENTIAL_TYPE_LABELS: Record<CredentialType, string> = {
|
||||||
|
routeros: 'RouterOS',
|
||||||
|
snmp_v2c: 'SNMP v2c',
|
||||||
|
snmp_v3: 'SNMP v3',
|
||||||
|
}
|
||||||
|
|
||||||
|
const SECURITY_LEVELS: { value: SecurityLevel; label: string }[] = [
|
||||||
|
{ value: 'noAuthNoPriv', label: 'No Auth, No Privacy' },
|
||||||
|
{ value: 'authNoPriv', label: 'Auth, No Privacy' },
|
||||||
|
{ value: 'authPriv', label: 'Auth + Privacy' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const AUTH_PROTOCOLS = ['MD5', 'SHA', 'SHA256'] as const
|
||||||
|
const PRIVACY_PROTOCOLS = ['DES', 'AES', 'AES256'] as const
|
||||||
|
|
||||||
|
// ─── Profile Card ───────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function ProfileCard({
|
||||||
|
profile,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
canModify,
|
||||||
|
}: {
|
||||||
|
profile: CredentialProfileResponse
|
||||||
|
onEdit: (profile: CredentialProfileResponse) => void
|
||||||
|
onDelete: (profileId: string) => void
|
||||||
|
canModify: boolean
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-between py-2 px-3 rounded-sm border border-border bg-panel">
|
||||||
|
<div className="flex items-center gap-3 min-w-0">
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium text-text-primary">{profile.name}</div>
|
||||||
|
{profile.description && (
|
||||||
|
<div className="text-xs text-text-muted truncate max-w-[300px]">
|
||||||
|
{profile.description}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 flex-shrink-0">
|
||||||
|
<span className="text-xs text-text-muted">
|
||||||
|
{profile.device_count} device{profile.device_count !== 1 ? 's' : ''}
|
||||||
|
</span>
|
||||||
|
{canModify && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-7 w-7"
|
||||||
|
onClick={() => onEdit(profile)}
|
||||||
|
>
|
||||||
|
<Pencil className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-7 w-7 text-error"
|
||||||
|
onClick={() => onDelete(profile.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Main Component ─────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function CredentialProfilesPage({ tenantId }: CredentialProfilesPageProps) {
|
||||||
|
const { user } = useAuth()
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const userCanWrite = canWrite(user)
|
||||||
|
|
||||||
|
// ─── Data query ─────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const { data, isLoading } = useQuery({
|
||||||
|
queryKey: ['credential-profiles', tenantId],
|
||||||
|
queryFn: () => credentialProfilesApi.list(tenantId),
|
||||||
|
enabled: !!tenantId,
|
||||||
|
})
|
||||||
|
|
||||||
|
const profiles = data?.profiles ?? []
|
||||||
|
const routerosProfiles = profiles.filter((p) => p.credential_type === 'routeros')
|
||||||
|
const snmpProfiles = profiles.filter((p) => p.credential_type.startsWith('snmp_'))
|
||||||
|
|
||||||
|
// ─── Dialog state ───────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false)
|
||||||
|
const [editingProfile, setEditingProfile] = useState<CredentialProfileResponse | null>(
|
||||||
|
null,
|
||||||
|
)
|
||||||
|
const [form, setForm] = useState<CredentialProfileCreate>({
|
||||||
|
name: '',
|
||||||
|
credential_type: 'routeros',
|
||||||
|
})
|
||||||
|
|
||||||
|
function closeDialog() {
|
||||||
|
setDialogOpen(false)
|
||||||
|
setEditingProfile(null)
|
||||||
|
setForm({ name: '', credential_type: 'routeros' })
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCreateDialog() {
|
||||||
|
setEditingProfile(null)
|
||||||
|
setForm({ name: '', credential_type: 'routeros' })
|
||||||
|
setDialogOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(profile: CredentialProfileResponse) {
|
||||||
|
setEditingProfile(profile)
|
||||||
|
setForm({
|
||||||
|
name: profile.name,
|
||||||
|
description: profile.description ?? '',
|
||||||
|
credential_type: profile.credential_type,
|
||||||
|
})
|
||||||
|
setDialogOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateForm(updates: Partial<CredentialProfileCreate>) {
|
||||||
|
setForm((prev) => ({ ...prev, ...updates }))
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Mutations ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: (data: CredentialProfileCreate) =>
|
||||||
|
editingProfile
|
||||||
|
? credentialProfilesApi.update(tenantId, editingProfile.id, data)
|
||||||
|
: credentialProfilesApi.create(tenantId, data),
|
||||||
|
onSuccess: () => {
|
||||||
|
void queryClient.invalidateQueries({ queryKey: ['credential-profiles'] })
|
||||||
|
toast.success(editingProfile ? 'Profile updated' : 'Profile created')
|
||||||
|
closeDialog()
|
||||||
|
},
|
||||||
|
onError: (err: unknown) => {
|
||||||
|
const detail =
|
||||||
|
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
|
||||||
|
'Failed to save profile'
|
||||||
|
toast.error(detail)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const deleteMutation = useMutation({
|
||||||
|
mutationFn: (profileId: string) =>
|
||||||
|
credentialProfilesApi.delete(tenantId, profileId),
|
||||||
|
onSuccess: () => {
|
||||||
|
void queryClient.invalidateQueries({ queryKey: ['credential-profiles'] })
|
||||||
|
toast.success('Profile deleted')
|
||||||
|
},
|
||||||
|
onError: (err: unknown) => {
|
||||||
|
const detail =
|
||||||
|
(err as { response?: { data?: { detail?: string } } })?.response?.data?.detail ??
|
||||||
|
'Cannot delete profile'
|
||||||
|
toast.error(detail)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleDelete(profileId: string) {
|
||||||
|
if (
|
||||||
|
confirm(
|
||||||
|
"Delete this credential profile? Devices using it will keep their current credentials but won't receive future updates.",
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
deleteMutation.mutate(profileId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSave() {
|
||||||
|
// Strip empty string fields so we don't send blanks to the API
|
||||||
|
const payload: CredentialProfileCreate = { ...form }
|
||||||
|
for (const key of Object.keys(payload) as (keyof CredentialProfileCreate)[]) {
|
||||||
|
if (payload[key] === '') {
|
||||||
|
delete payload[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Always send name and credential_type
|
||||||
|
payload.name = form.name
|
||||||
|
payload.credential_type = form.credential_type
|
||||||
|
saveMutation.mutate(payload)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Loading state ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 max-w-2xl">
|
||||||
|
<div className="h-8 w-48 bg-elevated/50 rounded animate-pulse" />
|
||||||
|
<div className="h-24 bg-elevated/50 rounded animate-pulse" />
|
||||||
|
<div className="h-24 bg-elevated/50 rounded animate-pulse" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Render ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const credType = form.credential_type as CredentialType
|
||||||
|
const secLevel = (form.security_level ?? 'noAuthNoPriv') as SecurityLevel
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 max-w-2xl">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-semibold">Credential Profiles</h1>
|
||||||
|
<p className="text-sm text-text-muted mt-0.5">
|
||||||
|
Manage shared credentials for device authentication
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{userCanWrite && (
|
||||||
|
<Button size="sm" onClick={openCreateDialog}>
|
||||||
|
<Plus className="h-3.5 w-3.5" /> New Profile
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RouterOS section */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<KeyRound className="h-4 w-4 text-text-muted" />
|
||||||
|
<h2 className="text-sm font-medium text-text-secondary">RouterOS</h2>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
{routerosProfiles.length === 0 ? (
|
||||||
|
<p className="text-xs text-text-muted py-2">
|
||||||
|
No RouterOS credential profiles yet
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
routerosProfiles.map((p) => (
|
||||||
|
<ProfileCard
|
||||||
|
key={p.id}
|
||||||
|
profile={p}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
canModify={userCanWrite}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SNMP section */}
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<Shield className="h-4 w-4 text-text-muted" />
|
||||||
|
<h2 className="text-sm font-medium text-text-secondary">SNMP</h2>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
{snmpProfiles.length === 0 ? (
|
||||||
|
<p className="text-xs text-text-muted py-2">
|
||||||
|
No SNMP credential profiles yet
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
snmpProfiles.map((p) => (
|
||||||
|
<ProfileCard
|
||||||
|
key={p.id}
|
||||||
|
profile={p}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
canModify={userCanWrite}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Create / Edit Dialog */}
|
||||||
|
<Dialog open={dialogOpen} onOpenChange={(open) => !open && closeDialog()}>
|
||||||
|
<DialogContent className="sm:max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{editingProfile ? 'Edit Credential Profile' : 'New Credential Profile'}
|
||||||
|
</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4 py-2">
|
||||||
|
{/* Credential type */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Credential Type</Label>
|
||||||
|
<Select
|
||||||
|
value={form.credential_type}
|
||||||
|
onValueChange={(v) => updateForm({ credential_type: v })}
|
||||||
|
disabled={!!editingProfile}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="routeros">RouterOS</SelectItem>
|
||||||
|
<SelectItem value="snmp_v2c">SNMP v2c</SelectItem>
|
||||||
|
<SelectItem value="snmp_v3">SNMP v3</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Name */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Profile Name</Label>
|
||||||
|
<Input
|
||||||
|
value={form.name}
|
||||||
|
onChange={(e) => updateForm({ name: e.target.value })}
|
||||||
|
placeholder="e.g. monitoring-readonly"
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">
|
||||||
|
Description{' '}
|
||||||
|
<span className="text-text-muted font-normal">(optional)</span>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
value={form.description ?? ''}
|
||||||
|
onChange={(e) => updateForm({ description: e.target.value })}
|
||||||
|
placeholder="Brief description of this profile"
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* RouterOS fields */}
|
||||||
|
{credType === 'routeros' && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Username</Label>
|
||||||
|
<Input
|
||||||
|
value={form.username ?? ''}
|
||||||
|
onChange={(e) => updateForm({ username: e.target.value })}
|
||||||
|
placeholder={editingProfile ? 'Leave blank to keep current' : 'admin'}
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Password</Label>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
value={form.password ?? ''}
|
||||||
|
onChange={(e) => updateForm({ password: e.target.value })}
|
||||||
|
placeholder={editingProfile ? 'Leave blank to keep current' : ''}
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* SNMP v2c fields */}
|
||||||
|
{credType === 'snmp_v2c' && (
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Community String</Label>
|
||||||
|
<Input
|
||||||
|
value={form.community ?? ''}
|
||||||
|
onChange={(e) => updateForm({ community: e.target.value })}
|
||||||
|
placeholder={editingProfile ? 'Leave blank to keep current' : 'public'}
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* SNMP v3 fields */}
|
||||||
|
{credType === 'snmp_v3' && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Security Name</Label>
|
||||||
|
<Input
|
||||||
|
value={form.security_name ?? ''}
|
||||||
|
onChange={(e) => updateForm({ security_name: e.target.value })}
|
||||||
|
placeholder={
|
||||||
|
editingProfile ? 'Leave blank to keep current' : 'snmpuser'
|
||||||
|
}
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Security Level</Label>
|
||||||
|
<Select
|
||||||
|
value={form.security_level ?? 'noAuthNoPriv'}
|
||||||
|
onValueChange={(v) => updateForm({ security_level: v })}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{SECURITY_LEVELS.map((sl) => (
|
||||||
|
<SelectItem key={sl.value} value={sl.value}>
|
||||||
|
{sl.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Auth fields (authNoPriv or authPriv) */}
|
||||||
|
{(secLevel === 'authNoPriv' || secLevel === 'authPriv') && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Auth Protocol</Label>
|
||||||
|
<Select
|
||||||
|
value={form.auth_protocol ?? 'SHA'}
|
||||||
|
onValueChange={(v) => updateForm({ auth_protocol: v })}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{AUTH_PROTOCOLS.map((p) => (
|
||||||
|
<SelectItem key={p} value={p}>
|
||||||
|
{p}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Auth Passphrase</Label>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
value={form.auth_passphrase ?? ''}
|
||||||
|
onChange={(e) =>
|
||||||
|
updateForm({ auth_passphrase: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder={
|
||||||
|
editingProfile ? 'Leave blank to keep current' : ''
|
||||||
|
}
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Privacy fields (authPriv only) */}
|
||||||
|
{secLevel === 'authPriv' && (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Privacy Protocol</Label>
|
||||||
|
<Select
|
||||||
|
value={form.privacy_protocol ?? 'AES'}
|
||||||
|
onValueChange={(v) => updateForm({ privacy_protocol: v })}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="mt-1">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{PRIVACY_PROTOCOLS.map((p) => (
|
||||||
|
<SelectItem key={p} value={p}>
|
||||||
|
{p}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-xs">Privacy Passphrase</Label>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
value={form.privacy_passphrase ?? ''}
|
||||||
|
onChange={(e) =>
|
||||||
|
updateForm({ privacy_passphrase: e.target.value })
|
||||||
|
}
|
||||||
|
placeholder={
|
||||||
|
editingProfile ? 'Leave blank to keep current' : ''
|
||||||
|
}
|
||||||
|
className="mt-1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={closeDialog}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={!form.name.trim() || saveMutation.isPending}
|
||||||
|
>
|
||||||
|
{saveMutation.isPending
|
||||||
|
? 'Saving...'
|
||||||
|
: editingProfile
|
||||||
|
? 'Update Profile'
|
||||||
|
: 'Create Profile'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1789,3 +1789,72 @@ export const alertEventsApi = {
|
|||||||
return data.count
|
return data.count
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ─── Credential Profiles ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface CredentialProfileResponse {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
description: string | null
|
||||||
|
credential_type: string // "routeros" | "snmp_v2c" | "snmp_v3"
|
||||||
|
device_count: number
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CredentialProfileListResponse {
|
||||||
|
profiles: CredentialProfileResponse[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CredentialProfileCreate {
|
||||||
|
name: string
|
||||||
|
description?: string
|
||||||
|
credential_type: string
|
||||||
|
username?: string
|
||||||
|
password?: string
|
||||||
|
community?: string
|
||||||
|
security_level?: string
|
||||||
|
auth_protocol?: string
|
||||||
|
auth_passphrase?: string
|
||||||
|
privacy_protocol?: string
|
||||||
|
privacy_passphrase?: string
|
||||||
|
security_name?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const credentialProfilesApi = {
|
||||||
|
list: (tenantId: string, credentialType?: string) =>
|
||||||
|
api
|
||||||
|
.get<CredentialProfileListResponse>(
|
||||||
|
`/api/tenants/${tenantId}/credential-profiles`,
|
||||||
|
{ params: credentialType ? { credential_type: credentialType } : undefined },
|
||||||
|
)
|
||||||
|
.then((r) => r.data),
|
||||||
|
|
||||||
|
get: (tenantId: string, profileId: string) =>
|
||||||
|
api
|
||||||
|
.get<CredentialProfileResponse>(
|
||||||
|
`/api/tenants/${tenantId}/credential-profiles/${profileId}`,
|
||||||
|
)
|
||||||
|
.then((r) => r.data),
|
||||||
|
|
||||||
|
create: (tenantId: string, data: CredentialProfileCreate) =>
|
||||||
|
api
|
||||||
|
.post<CredentialProfileResponse>(
|
||||||
|
`/api/tenants/${tenantId}/credential-profiles`,
|
||||||
|
data,
|
||||||
|
)
|
||||||
|
.then((r) => r.data),
|
||||||
|
|
||||||
|
update: (tenantId: string, profileId: string, data: Partial<CredentialProfileCreate>) =>
|
||||||
|
api
|
||||||
|
.put<CredentialProfileResponse>(
|
||||||
|
`/api/tenants/${tenantId}/credential-profiles/${profileId}`,
|
||||||
|
data,
|
||||||
|
)
|
||||||
|
.then((r) => r.data),
|
||||||
|
|
||||||
|
delete: (tenantId: string, profileId: string) =>
|
||||||
|
api
|
||||||
|
.delete(`/api/tenants/${tenantId}/credential-profiles/${profileId}`)
|
||||||
|
.then((r) => r.data),
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user