From 1a61ae2d71b5cd514ff951c0b91d005a94ea2203 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Wed, 22 Apr 2026 15:02:14 +0700
Subject: [PATCH] feat: add optional name field to BGP peer creation and update
 UI

Introduced an optional 'name' field in the BgpPeerCreate type to enhance peer identification. Updated the peer creation and editing forms to include this new field, improving user experience. Adjusted the UI to display the peer name in the peer listing table, ensuring better visibility of peer information.
---
 web/src/lib/api/types.ts            |  1 +
 web/src/routes/network/+page.svelte | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/api/types.ts b/web/src/lib/api/types.ts
index b9d0f4a..0860e8e 100644
--- a/web/src/lib/api/types.ts
+++ b/web/src/lib/api/types.ts
@@ -154,6 +154,7 @@ export type PeerRow = {
 };
 export type PeersResponse = Page<PeerRow>;
 export type BgpPeerCreate = {
+	name?: string;
 	neighbor: string;
 	remote_asn: number;
 	bgp_speaker_id?: string | null;
diff --git a/web/src/routes/network/+page.svelte b/web/src/routes/network/+page.svelte
index 6e8f52a..5ae2d31 100644
--- a/web/src/routes/network/+page.svelte
+++ b/web/src/routes/network/+page.svelte
@@ -62,6 +62,7 @@
 	let peerDialog = $state(false);
 	let peerEdit = $state<PeerRow | null>(null);
 	let peerForm = $state<BgpPeerCreate & { bgp_speaker_id?: string | null }>({
+		name: '',
 		neighbor: '',
 		remote_asn: 0,
 		bgp_speaker_id: null,
@@ -109,12 +110,13 @@
 	// --- Peer actions ---
 	function openPeerCreate() {
 		peerEdit = null;
-		peerForm = { neighbor: '', remote_asn: 0, bgp_speaker_id: null, enabled: true };
+		peerForm = { name: '', neighbor: '', remote_asn: 0, bgp_speaker_id: null, enabled: true };
 		peerDialog = true;
 	}
 	function openPeerEdit(p: PeerRow) {
 		peerEdit = p;
 		peerForm = {
+			name: p.name ?? '',
 			neighbor: p.neighbor,
 			remote_asn: p.remote_asn ?? 0,
 			bgp_speaker_id: p.bgp_speaker_id,
@@ -263,6 +265,7 @@
 					<Table>
 						<TableHeader>
 							<TableRow>
+								<TableHead>Имя</TableHead>
 								<TableHead>Адрес</TableHead>
 								<TableHead>Remote ASN</TableHead>
 								<TableHead class="w-[4.5rem] text-center">Вкл.</TableHead>
@@ -274,6 +277,7 @@
 						<TableBody>
 							{#each peers as p (p.id)}
 								<TableRow>
+									<TableCell>{p.name?.trim() || '—'}</TableCell>
 									<TableCell class="font-mono">{p.neighbor}</TableCell>
 									<TableCell class="font-mono">{p.remote_asn ?? '—'}</TableCell>
 									<TableCell class="text-center">
@@ -297,7 +301,7 @@
 								</TableRow>
 							{:else}
 								<TableRow>
-									<TableCell colspan={6} class="text-muted-foreground text-center py-8">
+									<TableCell colspan={7} class="text-muted-foreground text-center py-8">
 										{peersLoading ? 'Загрузка…' : 'Нет пиров.'}
 									</TableCell>
 								</TableRow>
@@ -378,6 +382,10 @@
 			<DialogDescription>BGP-сосед для установки сессии</DialogDescription>
 		</DialogHeader>
 		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="p-name">Имя пира (опционально)</Label>
+				<Input id="p-name" placeholder="Core-RTR-1" bind:value={peerForm.name} />
+			</div>
 			<div class="space-y-1.5">
 				<Label for="p-neighbor">Адрес соседа</Label>
 				<Input id="p-neighbor" placeholder="192.0.2.1" bind:value={peerForm.neighbor} />