524 lines
26 KiB
Rust
524 lines
26 KiB
Rust
// 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
|
||
// - Applications : directly linked apps with Remove + modal multi-select to add
|
||
// - Delete button : opens a confirmation modal, then navigates back to /hosts
|
||
|
||
use leptos::prelude::*;
|
||
use leptos_router::hooks::{use_navigate, use_params_map, use_query_map};
|
||
|
||
use crate::api::{
|
||
hosts::{
|
||
AddHostApplications, AddHostPort, DeleteHost, RemoveHostApplication,
|
||
RemoveHostPort, UpdateHost, get_applications_not_on_host, get_host_detail,
|
||
},
|
||
networks::get_networks,
|
||
};
|
||
use crate::models::Application;
|
||
|
||
// ─── Add applications modal ───────────────────────────────────────────────────
|
||
|
||
// Multi-select modal: shows every application not yet linked to the host.
|
||
// The auto-close Effect lives in the PARENT so that reopening the modal
|
||
// after a previous success does not immediately dismiss it again.
|
||
#[component]
|
||
fn AddAppModal(
|
||
host_id: i64,
|
||
available_apps_res: LocalResource<Result<Vec<Application>, ServerFnError>>,
|
||
add_action: ServerAction<AddHostApplications>,
|
||
show_modal: RwSignal<bool>,
|
||
) -> impl IntoView {
|
||
// Tracks which application IDs the user has checked.
|
||
let selected: RwSignal<Vec<i64>> = RwSignal::new(vec![]);
|
||
|
||
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>"Add applications"</h2>
|
||
<button class="modal__close" type="button" aria-label="Close"
|
||
on:click=move |_| show_modal.set(false)>
|
||
"×"
|
||
</button>
|
||
</div>
|
||
|
||
<div class="modal__body">
|
||
{move || available_apps_res.get().map(|res| match (*res).clone() {
|
||
Err(e) => view! {
|
||
<p class="error">"Could not load applications: " {e.to_string()}</p>
|
||
}.into_any(),
|
||
|
||
Ok(apps) if apps.is_empty() => view! {
|
||
<p class="empty">"All applications are already linked to this host."</p>
|
||
}.into_any(),
|
||
|
||
Ok(apps) => view! {
|
||
<div class="app-select-list">
|
||
{apps.into_iter().map(|app| {
|
||
let app_id = app.id;
|
||
view! {
|
||
<label class="app-select-item">
|
||
<input
|
||
type="checkbox"
|
||
on:change=move |e| {
|
||
let checked = event_target_checked(&e);
|
||
selected.update(|v| {
|
||
if checked {
|
||
if !v.contains(&app_id) { v.push(app_id); }
|
||
} else {
|
||
v.retain(|&x| x != app_id);
|
||
}
|
||
});
|
||
}
|
||
/>
|
||
{app.name}
|
||
</label>
|
||
}
|
||
}).collect_view()}
|
||
</div>
|
||
}.into_any(),
|
||
})}
|
||
</div>
|
||
|
||
{move || add_action.value().get()
|
||
.and_then(|r| r.err())
|
||
.map(|e| view! { <p class="error">{e.to_string()}</p> })
|
||
}
|
||
|
||
<div class="modal__actions">
|
||
<button class="btn-secondary" type="button"
|
||
on:click=move |_| show_modal.set(false)>
|
||
"Cancel"
|
||
</button>
|
||
<button
|
||
class="btn-primary"
|
||
type="button"
|
||
disabled={move || selected.get().is_empty()}
|
||
on:click=move |_| {
|
||
let ids_str = selected.get_untracked()
|
||
.iter()
|
||
.map(|id| id.to_string())
|
||
.collect::<Vec<_>>()
|
||
.join(",");
|
||
if !ids_str.is_empty() {
|
||
add_action.dispatch(AddHostApplications {
|
||
host_id,
|
||
application_ids: ids_str,
|
||
});
|
||
}
|
||
}
|
||
>
|
||
"Add selected"
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}.into_any()
|
||
}
|
||
|
||
// ─── 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 and application 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 {
|
||
let params = use_params_map();
|
||
let host_id = move || {
|
||
params.read().get("id")
|
||
.and_then(|s| s.parse::<i64>().ok())
|
||
.unwrap_or(0)
|
||
};
|
||
|
||
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();
|
||
let add_app_action = ServerAction::<AddHostApplications>::new();
|
||
let remove_app_action = ServerAction::<RemoveHostApplication>::new();
|
||
let delete_action = ServerAction::<DeleteHost>::new();
|
||
|
||
let show_delete_modal = RwSignal::new(false);
|
||
let show_add_app_modal = RwSignal::new(false);
|
||
|
||
// Auto-close the add-app modal after a successful addition.
|
||
// Keeping this Effect in the parent avoids the re-trigger bug that would
|
||
// occur if the Effect were inside AddAppModal (it would fire on mount
|
||
// if the action already held a previous Ok value).
|
||
Effect::new(move |_| {
|
||
if let Some(Ok(_)) = add_app_action.value().get() {
|
||
show_add_app_modal.set(false);
|
||
}
|
||
});
|
||
|
||
// Reload host detail after any mutation.
|
||
let host = Resource::new(
|
||
move || (
|
||
host_id(),
|
||
update_action.version().get(),
|
||
add_port_action.version().get(),
|
||
remove_port_action.version().get(),
|
||
add_app_action.version().get(),
|
||
remove_app_action.version().get(),
|
||
),
|
||
|(id, _, _, _, _, _)| get_host_detail(id),
|
||
);
|
||
|
||
// Networks dropdown — LocalResource avoids SSR/hydration mismatch.
|
||
let networks_res = LocalResource::new(|| get_networks());
|
||
|
||
// Available apps for the modal: re-fetched whenever add/remove completes.
|
||
let add_app_ver = add_app_action.version();
|
||
let remove_app_ver = remove_app_action.version();
|
||
let available_apps_res = LocalResource::new(move || {
|
||
let _ = add_app_ver.get();
|
||
let _ = remove_app_ver.get();
|
||
get_applications_not_on_host(host_id())
|
||
});
|
||
|
||
let name_sig = RwSignal::new(String::new());
|
||
let ip_sig = RwSignal::new(String::new());
|
||
let net_id_sig = RwSignal::new(0i64);
|
||
let new_port = RwSignal::new(String::new());
|
||
|
||
// Sync edit signals whenever fresh host data arrives.
|
||
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);
|
||
}
|
||
});
|
||
|
||
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 app_count = detail.applications.len();
|
||
let ports = detail.ports;
|
||
let applications = detail.applications;
|
||
|
||
// 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()
|
||
};
|
||
|
||
// Pre-built applications view.
|
||
let apps_list = if applications.is_empty() {
|
||
view! {
|
||
<p class="empty">"No applications linked to this host."</p>
|
||
}.into_any()
|
||
} else {
|
||
view! {
|
||
<div class="app-list">
|
||
{applications.into_iter().map(|app| {
|
||
let app_id = app.id;
|
||
view! {
|
||
<div class="app-row">
|
||
<span class="app-row__name">{app.name}</span>
|
||
<button
|
||
class="btn-danger"
|
||
type="button"
|
||
on:click=move |_| {
|
||
remove_app_action.dispatch(
|
||
RemoveHostApplication { host_id: id, application_id: app_id }
|
||
);
|
||
}
|
||
>
|
||
"Remove"
|
||
</button>
|
||
</div>
|
||
}
|
||
}).collect_view()}
|
||
</div>
|
||
}.into_any()
|
||
};
|
||
|
||
view! {
|
||
// ── Page header ──────────────────────────────────
|
||
<div class="page-header detail-page-header">
|
||
<a class="back-btn" href=move || back_url()>
|
||
{move || back_label()}
|
||
</a>
|
||
<h1 class="detail-page-title">{move || name_sig.get()}</h1>
|
||
</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
|
||
class="btn-primary"
|
||
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>
|
||
})
|
||
}
|
||
|
||
<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
|
||
class="btn-primary"
|
||
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>
|
||
|
||
// ── Applications section ──────────────────────────
|
||
<section class="detail-section">
|
||
<h2 class="detail-section__title">
|
||
{format!("Applications ({})", app_count)}
|
||
</h2>
|
||
|
||
{apps_list}
|
||
|
||
{move || remove_app_action.value().get()
|
||
.and_then(|r| r.err())
|
||
.map(|e| view! {
|
||
<p class="error">"Remove failed: " {e.to_string()}</p>
|
||
})
|
||
}
|
||
|
||
<div class="port-add-row">
|
||
<button
|
||
class="btn-primary"
|
||
type="button"
|
||
on:click=move |_| show_add_app_modal.set(true)
|
||
>
|
||
"+ Add applications"
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
// ── Add applications modal ────────────────────────
|
||
{move || show_add_app_modal.get().then(|| view! {
|
||
<AddAppModal
|
||
host_id=id
|
||
available_apps_res=available_apps_res
|
||
add_action=add_app_action
|
||
show_modal=show_add_app_modal
|
||
/>
|
||
})}
|
||
|
||
// ── Danger zone ───────────────────────────────────
|
||
<div class="danger-zone">
|
||
<button
|
||
class="btn-danger-solid"
|
||
type="button"
|
||
on:click=move |_| show_delete_modal.set(true)
|
||
>
|
||
"Delete host"
|
||
</button>
|
||
</div>
|
||
|
||
// ── 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()
|
||
}
|