feat(hosts): add host detail page with identity edit, port management and delete
- Repository: add update_host (name, IP, network reassignment with CIDR validation) - API: get_host_detail (host + resolved network + ports), update_host, add_host_port, remove_host_port server functions - Client: HostDetailPage at /hosts/:id — identity form, ports list with per-port Remove button, Add port input, delete confirmation modal with navigation back to /hosts on success - CSS: detail-section cards, port-row list, btn-danger-solid, back-link Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
321
src/client/host_detail.rs
Normal file
321
src/client/host_detail.rs
Normal file
@@ -0,0 +1,321 @@
|
||||
// client/host_detail.rs — Host detail page
|
||||
//
|
||||
// Shows all information for a single host:
|
||||
// - Identity form : name, IP, network dropdown — editable, saved with "Save changes"
|
||||
// - Ports section : full list with Remove per port + Add port input
|
||||
// - Delete button : opens a confirmation modal, then navigates back to /hosts
|
||||
|
||||
use leptos::prelude::*;
|
||||
use leptos_router::hooks::{use_navigate, use_params_map};
|
||||
|
||||
use crate::api::{
|
||||
hosts::{AddHostPort, DeleteHost, RemoveHostPort, UpdateHost, get_host_detail},
|
||||
networks::get_networks,
|
||||
};
|
||||
|
||||
// ─── Delete confirmation modal ────────────────────────────────────────────────
|
||||
|
||||
#[component]
|
||||
fn DeleteModal(
|
||||
host_name: String,
|
||||
delete_action: ServerAction<DeleteHost>,
|
||||
host_id: i64,
|
||||
show_modal: RwSignal<bool>,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="modal-backdrop" on:click=move |_| show_modal.set(false)>
|
||||
<div class="modal" on:click=move |e| e.stop_propagation()>
|
||||
<div class="modal__header">
|
||||
<h2>"Delete host"</h2>
|
||||
<button class="modal__close" type="button" aria-label="Close"
|
||||
on:click=move |_| show_modal.set(false)>
|
||||
"×"
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
<p class="warning">
|
||||
"Are you sure you want to delete "
|
||||
<strong>{host_name}</strong>
|
||||
"? All port associations will also be removed."
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal__actions">
|
||||
<button class="btn-secondary" type="button"
|
||||
on:click=move |_| show_modal.set(false)>
|
||||
"Cancel"
|
||||
</button>
|
||||
<button class="btn-danger" type="button"
|
||||
on:click=move |_| { delete_action.dispatch(DeleteHost { id: host_id }); }>
|
||||
"Delete"
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}.into_any()
|
||||
}
|
||||
|
||||
// ─── Main page component ──────────────────────────────────────────────────────
|
||||
|
||||
#[component]
|
||||
pub fn HostDetailPage() -> impl IntoView {
|
||||
// Read the `:id` segment from the URL.
|
||||
// `use_params_map()` returns a reactive map of all URL path parameters.
|
||||
let params = use_params_map();
|
||||
let host_id = move || {
|
||||
params.read().get("id")
|
||||
.and_then(|s| s.parse::<i64>().ok())
|
||||
.unwrap_or(0)
|
||||
};
|
||||
|
||||
let update_action = ServerAction::<UpdateHost>::new();
|
||||
let add_port_action = ServerAction::<AddHostPort>::new();
|
||||
let remove_port_action = ServerAction::<RemoveHostPort>::new();
|
||||
let delete_action = ServerAction::<DeleteHost>::new();
|
||||
|
||||
let show_delete_modal = RwSignal::new(false);
|
||||
|
||||
// Reload detail after any mutation that touches this host.
|
||||
// The resource key includes action versions so it invalidates automatically.
|
||||
let host = Resource::new(
|
||||
move || (
|
||||
host_id(),
|
||||
update_action.version().get(),
|
||||
add_port_action.version().get(),
|
||||
remove_port_action.version().get(),
|
||||
),
|
||||
|(id, _, _, _)| get_host_detail(id),
|
||||
);
|
||||
|
||||
// Networks dropdown — LocalResource avoids SSR/hydration mismatch.
|
||||
let networks_res = LocalResource::new(|| get_networks());
|
||||
|
||||
// Edit-field signals, populated once by the Effect below.
|
||||
// Using signals (rather than local variables) keeps them stable across
|
||||
// re-renders and lets the user edit without triggering a resource reload.
|
||||
let name_sig = RwSignal::new(String::new());
|
||||
let ip_sig = RwSignal::new(String::new());
|
||||
let net_id_sig = RwSignal::new(0i64);
|
||||
|
||||
// Input value for the "add port" row.
|
||||
let new_port = RwSignal::new(String::new());
|
||||
|
||||
// Sync edit signals whenever the host resource delivers fresh data.
|
||||
// This runs on initial load and after every successful mutation.
|
||||
Effect::new(move |_| {
|
||||
if let Some(Ok(ref detail)) = host.get() {
|
||||
name_sig.set(detail.name.clone());
|
||||
ip_sig.set(detail.ip.clone());
|
||||
net_id_sig.set(detail.network_id);
|
||||
}
|
||||
});
|
||||
|
||||
// Navigate back to the list after a successful delete.
|
||||
// `use_navigate()` must be called during component setup (not inside a closure).
|
||||
let navigate = use_navigate();
|
||||
Effect::new(move |_| {
|
||||
if let Some(Ok(true)) = delete_action.value().get() {
|
||||
navigate("/hosts", Default::default());
|
||||
}
|
||||
});
|
||||
|
||||
view! {
|
||||
<div class="host-detail-page">
|
||||
<Suspense fallback=|| view! { <p class="empty">"Loading host…"</p> }>
|
||||
{move || host.get().map(|result| match result {
|
||||
Err(e) => view! {
|
||||
<p class="error">"Could not load host: " {e.to_string()}</p>
|
||||
}.into_any(),
|
||||
|
||||
Ok(detail) => {
|
||||
let id = detail.id;
|
||||
let modal_name = detail.name.clone();
|
||||
let port_count = detail.ports.len();
|
||||
let ports = detail.ports;
|
||||
|
||||
// Pre-built ports view — consumes `ports` once, not reactively.
|
||||
let ports_list = if ports.is_empty() {
|
||||
view! {
|
||||
<p class="empty">"No ports open on this host."</p>
|
||||
}.into_any()
|
||||
} else {
|
||||
view! {
|
||||
<div class="port-list">
|
||||
{ports.into_iter().map(|port| {
|
||||
let num = port.number;
|
||||
view! {
|
||||
<div class="port-row">
|
||||
<span class="port-row__number">{num}</span>
|
||||
<span class="port-row__desc">
|
||||
{port.description.unwrap_or_default()}
|
||||
</span>
|
||||
<button
|
||||
class="btn-danger"
|
||||
type="button"
|
||||
on:click=move |_| {
|
||||
remove_port_action.dispatch(
|
||||
RemoveHostPort { host_id: id, port_number: num as i64 }
|
||||
);
|
||||
}
|
||||
>
|
||||
"Remove"
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
}).collect_view()}
|
||||
</div>
|
||||
}.into_any()
|
||||
};
|
||||
|
||||
view! {
|
||||
// ── Page header ──────────────────────────────────
|
||||
<div class="page-header">
|
||||
<div class="page-header__left">
|
||||
<a class="back-link" href="/hosts">"← Hosts"</a>
|
||||
<h1>{move || name_sig.get()}</h1>
|
||||
</div>
|
||||
<button
|
||||
class="btn-danger-solid"
|
||||
type="button"
|
||||
on:click=move |_| show_delete_modal.set(true)
|
||||
>
|
||||
"Delete host"
|
||||
</button>
|
||||
</div>
|
||||
|
||||
// ── Identity form ─────────────────────────────────
|
||||
<section class="detail-section">
|
||||
<h2 class="detail-section__title">"Identity"</h2>
|
||||
<div class="detail-form">
|
||||
<label class="detail-field">
|
||||
"Name"
|
||||
<input
|
||||
type="text"
|
||||
prop:value=move || name_sig.get()
|
||||
on:input=move |e| name_sig.set(event_target_value(&e))
|
||||
/>
|
||||
</label>
|
||||
<label class="detail-field">
|
||||
"IP address"
|
||||
<input
|
||||
type="text"
|
||||
prop:value=move || ip_sig.get()
|
||||
on:input=move |e| ip_sig.set(event_target_value(&e))
|
||||
/>
|
||||
</label>
|
||||
<label class="detail-field">
|
||||
"Network"
|
||||
<select on:change=move |e| {
|
||||
net_id_sig.set(
|
||||
event_target_value(&e).parse().unwrap_or(0)
|
||||
);
|
||||
}>
|
||||
{move || networks_res.get()
|
||||
.and_then(|r| (*r).clone().ok())
|
||||
.map(|nets| {
|
||||
let current = net_id_sig.get();
|
||||
nets.into_iter().map(|n| {
|
||||
let label = format!("{} - {}", n.name, n.cidr);
|
||||
view! {
|
||||
<option
|
||||
value=n.id.to_string()
|
||||
selected=(n.id == current)
|
||||
>
|
||||
{label}
|
||||
</option>
|
||||
}
|
||||
}).collect_view()
|
||||
})
|
||||
}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{move || update_action.value().get()
|
||||
.and_then(|r| r.err())
|
||||
.map(|e| view! { <p class="error">{e.to_string()}</p> })
|
||||
}
|
||||
|
||||
<div class="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
on:click=move |_| {
|
||||
update_action.dispatch(UpdateHost {
|
||||
id,
|
||||
name: name_sig.get_untracked(),
|
||||
ip: ip_sig.get_untracked(),
|
||||
network_id: net_id_sig.get_untracked(),
|
||||
});
|
||||
}
|
||||
>
|
||||
"Save changes"
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// ── Ports section ─────────────────────────────────
|
||||
<section class="detail-section">
|
||||
<h2 class="detail-section__title">
|
||||
{format!("Open ports ({})", port_count)}
|
||||
</h2>
|
||||
|
||||
{ports_list}
|
||||
|
||||
{move || remove_port_action.value().get()
|
||||
.and_then(|r| r.err())
|
||||
.map(|e| view! {
|
||||
<p class="error">"Remove failed: " {e.to_string()}</p>
|
||||
})
|
||||
}
|
||||
|
||||
// Add port row
|
||||
<div class="port-add-row">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="65535"
|
||||
placeholder="Port number (1–65535)"
|
||||
prop:value=move || new_port.get()
|
||||
on:input=move |e| new_port.set(event_target_value(&e))
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
on:click=move |_| {
|
||||
let raw = new_port.get_untracked();
|
||||
if let Ok(n) = raw.trim().parse::<i64>() {
|
||||
if (1..=65535).contains(&n) {
|
||||
add_port_action.dispatch(AddHostPort {
|
||||
host_id: id,
|
||||
port_number: n,
|
||||
});
|
||||
new_port.set(String::new());
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
"Add port"
|
||||
</button>
|
||||
{move || add_port_action.value().get()
|
||||
.and_then(|r| r.err())
|
||||
.map(|e| view! {
|
||||
<p class="error">"Add failed: " {e.to_string()}</p>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
// ── Delete modal (conditional) ────────────────────
|
||||
{move || show_delete_modal.get().then(|| view! {
|
||||
<DeleteModal
|
||||
host_name=modal_name.clone()
|
||||
delete_action=delete_action
|
||||
host_id=id
|
||||
show_modal=show_delete_modal
|
||||
/>
|
||||
})}
|
||||
}.into_any()
|
||||
}
|
||||
})}
|
||||
</Suspense>
|
||||
</div>
|
||||
}.into_any()
|
||||
}
|
||||
Reference in New Issue
Block a user