mathieu
cf0a095ada
The add-application modal now accepts a comma-separated list of port numbers (same UX as the add-host form). Ports are associated with the new application atomically in create_application on the server side. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
290 lines
13 KiB
Rust
290 lines
13 KiB
Rust
// client/applications.rs — Applications list page
|
||
//
|
||
// Displays all applications with:
|
||
// - Add button : opens a modal to create an application by name
|
||
// - Filter bar : name substring filter (client-side)
|
||
// - Table : application name + number of associated hosts
|
||
// - Delete : confirmation modal before deletion
|
||
|
||
use leptos::prelude::*;
|
||
use leptos::form::ActionForm;
|
||
use leptos::html::Input;
|
||
|
||
use crate::api::applications::{
|
||
ApplicationWithCounts, CreateApplication, DeleteApplication,
|
||
get_applications_with_counts,
|
||
};
|
||
|
||
// ─── Add application modal ────────────────────────────────────────────────────
|
||
|
||
#[component]
|
||
fn AddApplicationModal(
|
||
create_action: ServerAction<CreateApplication>,
|
||
show_modal: RwSignal<bool>,
|
||
) -> impl IntoView {
|
||
use leptos::task::spawn_local;
|
||
|
||
let name_ref = NodeRef::<Input>::new();
|
||
|
||
// Defer focus to the next microtask so the element is in the DOM.
|
||
// Using get_untracked() avoids subscribing to NodeRef's reactive signal,
|
||
// which would otherwise re-trigger during modal unmount and cause
|
||
// "closure invoked after being dropped" in wasm-bindgen.
|
||
spawn_local(async move {
|
||
if let Some(el) = name_ref.get_untracked() {
|
||
let _ = el.focus();
|
||
}
|
||
});
|
||
|
||
// close() defers show_modal.set(false) to the next microtask.
|
||
// Without this, setting the signal synchronously inside a click handler
|
||
// unmounts the modal (and frees its closures) while the handler is still
|
||
// on the call stack, causing wasm-bindgen to panic.
|
||
let close = move || spawn_local(async move { show_modal.set(false) });
|
||
|
||
view! {
|
||
<div class="modal-backdrop" on:click=move |_| close()>
|
||
<div class="modal" on:click=move |e| e.stop_propagation()>
|
||
<div class="modal__header">
|
||
<h2>"Add an application"</h2>
|
||
<button class="modal__close" type="button" aria-label="Close"
|
||
on:click=move |_| close()>
|
||
"×"
|
||
</button>
|
||
</div>
|
||
|
||
<ActionForm action=create_action>
|
||
<div class="add-form__fields">
|
||
<label>
|
||
"Name"
|
||
<input
|
||
node_ref=name_ref
|
||
type="text"
|
||
name="name"
|
||
placeholder="e.g. Nginx, PostgreSQL, Prometheus"
|
||
required
|
||
/>
|
||
</label>
|
||
<label>
|
||
"Associated ports"
|
||
<input
|
||
type="text"
|
||
name="ports"
|
||
placeholder="e.g. 22, 80, 443"
|
||
/>
|
||
<span class="field-hint">"Comma-separated port numbers"</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="modal__actions">
|
||
<button class="btn-secondary" type="button"
|
||
on:click=move |_| close()>
|
||
"Cancel"
|
||
</button>
|
||
<button type="submit">"Add application"</button>
|
||
</div>
|
||
</ActionForm>
|
||
|
||
{move || create_action.value().get()
|
||
.and_then(|r| r.err())
|
||
.map(|e| view! { <p class="error">{e.to_string()}</p> })
|
||
}
|
||
</div>
|
||
</div>
|
||
}.into_any()
|
||
}
|
||
|
||
// ─── Delete confirmation modal ────────────────────────────────────────────────
|
||
|
||
#[component]
|
||
fn DeleteAppModal(
|
||
app: ApplicationWithCounts,
|
||
delete_action: ServerAction<DeleteApplication>,
|
||
pending_delete: RwSignal<Option<ApplicationWithCounts>>,
|
||
) -> impl IntoView {
|
||
let id = app.id;
|
||
let label = app.name.clone();
|
||
let host_count = app.host_count;
|
||
|
||
view! {
|
||
<div class="modal-backdrop" on:click=move |_| pending_delete.set(None)>
|
||
<div class="modal" on:click=move |e| e.stop_propagation()>
|
||
<div class="modal__header">
|
||
<h2>"Delete application"</h2>
|
||
<button class="modal__close" type="button" aria-label="Close"
|
||
on:click=move |_| pending_delete.set(None)>
|
||
"×"
|
||
</button>
|
||
</div>
|
||
<div class="modal__body">
|
||
<p>"Delete application " <strong>{label}</strong> "?"</p>
|
||
{(host_count > 0).then(|| view! {
|
||
<p class="warning">
|
||
"This application is linked to "
|
||
{host_count}
|
||
{if host_count == 1 { " host" } else { " hosts" }}
|
||
" via shared ports. The port associations will be removed."
|
||
</p>
|
||
})}
|
||
</div>
|
||
<div class="modal__actions">
|
||
<button class="btn-secondary" type="button"
|
||
on:click=move |_| pending_delete.set(None)>
|
||
"Cancel"
|
||
</button>
|
||
<button class="btn-danger" type="button"
|
||
on:click=move |_| { delete_action.dispatch(DeleteApplication { id }); }>
|
||
"Delete"
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}.into_any()
|
||
}
|
||
|
||
// ─── Page ─────────────────────────────────────────────────────────────────────
|
||
|
||
#[component]
|
||
pub fn ApplicationsPage() -> impl IntoView {
|
||
let create_action = ServerAction::<CreateApplication>::new();
|
||
let delete_action = ServerAction::<DeleteApplication>::new();
|
||
|
||
let show_modal = RwSignal::new(false);
|
||
|
||
// Some(app) = delete modal open for that app; None = closed.
|
||
let pending_delete: RwSignal<Option<ApplicationWithCounts>> = RwSignal::new(None);
|
||
|
||
// Name filter (client-side — list is typically small)
|
||
let name_filter = RwSignal::new(String::new());
|
||
|
||
// Close the add modal when the action transitions pending→done with Ok.
|
||
// Lives in the parent so it is never recreated across modal open/close cycles,
|
||
// which avoids the stale-value re-trigger bug.
|
||
Effect::new(move |was_pending: Option<bool>| {
|
||
let is_pending = create_action.pending().get();
|
||
if was_pending == Some(true) && !is_pending {
|
||
if let Some(Ok(_)) = create_action.value().get() {
|
||
show_modal.set(false);
|
||
}
|
||
}
|
||
is_pending
|
||
});
|
||
|
||
// Close the delete modal automatically after a successful deletion.
|
||
Effect::new(move |_| {
|
||
if let Some(Ok(_)) = delete_action.value().get() {
|
||
pending_delete.set(None);
|
||
}
|
||
});
|
||
|
||
let applications = Resource::new(
|
||
move || (create_action.version().get(), delete_action.version().get()),
|
||
|_| get_applications_with_counts(),
|
||
);
|
||
|
||
view! {
|
||
<div class="applications-page">
|
||
|
||
// ── Page header ───────────────────────────────────────────────────
|
||
<div class="page-header">
|
||
<h1>"Applications"</h1>
|
||
<button class="btn-primary" on:click=move |_| show_modal.set(true)>
|
||
"+ Add application"
|
||
</button>
|
||
</div>
|
||
|
||
// ── Add modal ─────────────────────────────────────────────────────
|
||
{move || show_modal.get().then(|| view! {
|
||
<AddApplicationModal
|
||
create_action=create_action
|
||
show_modal=show_modal
|
||
/>
|
||
})}
|
||
|
||
// ── Delete modal ──────────────────────────────────────────────────
|
||
{move || pending_delete.get().map(|app| view! {
|
||
<DeleteAppModal
|
||
app=app
|
||
delete_action=delete_action
|
||
pending_delete=pending_delete
|
||
/>
|
||
})}
|
||
|
||
// ── Filter bar ────────────────────────────────────────────────────
|
||
<section class="filter-bar">
|
||
<div class="filter-bar__fields">
|
||
<label class="filter-field">
|
||
"Name"
|
||
<input
|
||
type="text"
|
||
placeholder="Search…"
|
||
on:input=move |e| name_filter.set(event_target_value(&e))
|
||
/>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
// ── Application list ──────────────────────────────────────────────
|
||
<section class="list">
|
||
{move || delete_action.value().get()
|
||
.and_then(|r| r.err())
|
||
.map(|e| view! { <p class="error">"Delete failed: " {e.to_string()}</p> })
|
||
}
|
||
|
||
<Suspense fallback=|| view! { <p>"Loading applications…"</p> }>
|
||
{move || applications.get().map(|result| match result {
|
||
Err(e) => view! {
|
||
<p class="error">"Could not load applications: " {e.to_string()}</p>
|
||
}.into_any(),
|
||
|
||
Ok(list) => {
|
||
let filter = name_filter.get().to_lowercase();
|
||
let filtered: Vec<_> = list.into_iter()
|
||
.filter(|app| filter.is_empty() || app.name.to_lowercase().contains(&filter))
|
||
.collect();
|
||
|
||
if filtered.is_empty() {
|
||
view! {
|
||
<p class="empty">"No applications match the current filter."</p>
|
||
}.into_any()
|
||
} else {
|
||
view! {
|
||
<div class="table-container">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>"Name"</th>
|
||
<th class="col-count">"Hosts"</th>
|
||
<th class="col-actions">"Actions"</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{filtered.into_iter().map(|app| {
|
||
let app_clone = app.clone();
|
||
view! {
|
||
<tr>
|
||
<td>{app.name}</td>
|
||
<td class="col-count">{app.host_count}</td>
|
||
<td class="col-actions">
|
||
<button on:click=move |_| {
|
||
pending_delete.set(Some(app_clone.clone()));
|
||
}>
|
||
"Delete"
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
}
|
||
}).collect_view()}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
}.into_any()
|
||
}
|
||
}
|
||
})}
|
||
</Suspense>
|
||
</section>
|
||
</div>
|
||
}
|
||
}
|