feat(networks): add network detail page with paginated host list and contextual back button
- API: add get_network(id) server function - NetworkDetailPage at /networks/:id — network name + CIDR header, paginated host table (Name, IP, Ports, Apps) linking to /hosts/:id?back=/networks/:id - Networks list: make network name a link to its detail page - HostDetailPage: read ?back= query param to show "← Network" or "← Hosts" and navigate to the correct destination Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
// - Delete button : opens a confirmation modal, then navigates back to /hosts
|
||||
|
||||
use leptos::prelude::*;
|
||||
use leptos_router::hooks::{use_navigate, use_params_map};
|
||||
use leptos_router::hooks::{use_navigate, use_params_map, use_query_map};
|
||||
|
||||
use crate::api::{
|
||||
hosts::{AddHostPort, DeleteHost, RemoveHostPort, UpdateHost, get_host_detail},
|
||||
@@ -67,6 +67,18 @@ pub fn HostDetailPage() -> impl IntoView {
|
||||
.unwrap_or(0)
|
||||
};
|
||||
|
||||
// Optional `?back=<url>` query parameter — used when arriving from a network
|
||||
// detail page so the back button returns there instead of the hosts list.
|
||||
let query = use_query_map();
|
||||
let back_url = move || {
|
||||
query.read().get("back")
|
||||
.map(|s| s.to_string())
|
||||
.unwrap_or_else(|| "/hosts".to_string())
|
||||
};
|
||||
let back_label = move || {
|
||||
if back_url().starts_with("/networks/") { "← Network" } else { "← Hosts" }
|
||||
};
|
||||
|
||||
let update_action = ServerAction::<UpdateHost>::new();
|
||||
let add_port_action = ServerAction::<AddHostPort>::new();
|
||||
let remove_port_action = ServerAction::<RemoveHostPort>::new();
|
||||
@@ -169,7 +181,9 @@ pub fn HostDetailPage() -> impl IntoView {
|
||||
view! {
|
||||
// ── Page header ──────────────────────────────────
|
||||
<div class="page-header detail-page-header">
|
||||
<a class="back-btn" href="/hosts">"← Hosts"</a>
|
||||
<a class="back-btn" href=move || back_url()>
|
||||
{move || back_label()}
|
||||
</a>
|
||||
<h1 class="detail-page-title">{move || name_sig.get()}</h1>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user