mathieu/rust-ipam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(hosts): add hosts list page with filters, pagination and delete

Browse Source 
Implements task #7. The Hosts page provides:
- Name/network/port/application filters (sentinel values instead of
  Option<T> to avoid server function serialization issues)
- Configurable page size (15 default, 25/50/100/All)
- Prev/next navigation with total host count
- Add host form with network selector
- Delete action per row

Sub-components (AddHostForm, FilterBar, PaginationBar, HostTable) each
call .into_any() to erase their concrete view types. This breaks the
deeply-nested generic type that caused "queries overflow the depth
limit!" without requiring an unbounded recursion_limit increase.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mathieu
2026-05-15 23:23:24 +02:00
parent 5b1f30fe24
commit 042793f385
6 changed files with 699 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/api/hosts.rs
View File

@@ -1,9 +1,35 @@
// api/hosts.rs — Server functions for hosts
use leptos::prelude::*;
use serde::{Deserialize, Serialize};
use crate::models::Host;
// ─── Presentation types ───────────────────────────────────────────────────────
// A host row enriched with its network CIDR and pre-computed counts.
// Used by the paginated hosts list (get_hosts_page).
#[derive(Clone, Debug, Serialize, Deserialize)]
pub struct HostRow {
pub id: i64,
pub name: String,
pub ip: String,
pub network_id: i64,
pub network_cidr: String,
pub port_count: i64,
pub application_count: i64,
}
// Result of a paginated, filtered host query.
#[derive(Clone, Debug, Serialize, Deserialize, Default)]
pub struct HostsPage {
pub rows: Vec<HostRow>,
pub total: i64, // total rows matching the filters (ignoring pagination)
pub page: i64, // current page (1-indexed)
pub per_page: i64, // items per page; 0 = all
pub total_pages: i64, // ceil(total / per_page); always ≥ 1
}
// ─── Queries ──────────────────────────────────────────────────────────────────
/// Returns all hosts belonging to a given network.
@@ -20,6 +46,128 @@ pub async fn get_hosts_by_network(network_id: i64) -> Result<Vec<Host>, ServerFn
.map_err(|e| ServerFnError::new(e.to_string()))
}
/// Returns a filtered and paginated list of hosts across all networks.
///
/// Filter parameters use sentinel values (0 / empty string) to mean "no filter":
/// - `name_filter` : substring match on host name (case-insensitive); "" = all
/// - `network_id_filter` : exact network id; 0 = all
/// - `port_filter` : hosts with this port open; 0 = all
/// - `application_id_filter` : hosts linked to this application; 0 = all
/// - `per_page` : items per page; 0 = return everything
/// - `page` : 1-indexed page number
///
/// The SQL uses each bind parameter twice in the WHERE clause
/// (once for the IS NULL guard, once for the actual comparison).
/// Each $N placeholder refers to the N-th bound argument by index.
#[server]
pub async fn get_hosts_page(
name_filter: String,
network_id_filter: i64,
port_filter: i64,
application_id_filter: i64,
page: i64,
per_page: i64,
) -> Result<HostsPage, ServerFnError> {
use sqlx::{AnyPool, Row};
let pool = use_context::<AnyPool>()
.ok_or_else(|| ServerFnError::new("Database pool not found in context"))?;
// Convert sentinel values to Option for SQL NULL binding.
// None → binds as SQL NULL → "$N IS NULL" evaluates to TRUE → filter skipped.
let name_like: Option<String> = if name_filter.is_empty() {
None
} else {
Some(format!("%{}%", name_filter))
};
let network_id: Option<i64> = if network_id_filter == 0 { None } else { Some(network_id_filter) };
let port: Option<i64> = if port_filter == 0 { None } else { Some(port_filter) };
let app_id: Option<i64> = if application_id_filter == 0 { None } else { Some(application_id_filter) };
// Each filter param is bound twice so the same $N can appear in both
// the IS NULL guard and the comparison without re-declaring parameters.
const WHERE: &str = "
JOIN networks n ON n.id = h.network_id
LEFT JOIN host_ports hp ON hp.host_id = h.id
LEFT JOIN application_ports ap ON ap.port_number = hp.port_number
WHERE ($1 IS NULL OR LOWER(h.name) LIKE LOWER($1))
AND ($2 IS NULL OR h.network_id = $2)
AND ($3 IS NULL OR EXISTS (
SELECT 1 FROM host_ports
WHERE host_id = h.id AND port_number = $3
))
AND ($4 IS NULL OR EXISTS (
SELECT 1 FROM host_ports hp2
JOIN application_ports ap2 ON ap2.port_number = hp2.port_number
WHERE hp2.host_id = h.id AND ap2.application_id = $4
))";
// Count matching hosts (ignoring pagination).
let count_sql = format!("SELECT COUNT(DISTINCT h.id) FROM hosts h {WHERE}");
let total: i64 = sqlx::query_scalar(&count_sql)
.bind(name_like.as_deref())
.bind(network_id)
.bind(port)
.bind(app_id)
.fetch_one(&pool)
.await
.map_err(|e| ServerFnError::new(e.to_string()))?;
// Compute pagination bounds.
let safe_page = page.max(1);
let (limit, offset, total_pages) = if per_page <= 0 {
(1_000_000_000i64, 0i64, 1i64)
} else {
let tp = ((total + per_page - 1) / per_page).max(1);
(per_page, (safe_page - 1) * per_page, tp)
};
// Fetch the page of hosts with enriched columns.
let data_sql = format!(
"SELECT h.id, h.name, h.ip, h.network_id,
n.cidr AS network_cidr,
COUNT(DISTINCT hp.port_number) AS port_count,
COUNT(DISTINCT ap.application_id) AS application_count
FROM hosts h
{WHERE}
GROUP BY h.id, h.name, h.ip, h.network_id, n.cidr
ORDER BY h.name, h.id
LIMIT $5 OFFSET $6"
);
let rows = sqlx::query(&data_sql)
.bind(name_like.as_deref())
.bind(network_id)
.bind(port)
.bind(app_id)
.bind(limit)
.bind(offset)
.fetch_all(&pool)
.await
.map_err(|e| ServerFnError::new(e.to_string()))?;
let host_rows = rows
.into_iter()
.map(|row| HostRow {
id: row.get("id"),
name: row.get("name"),
ip: row.get("ip"),
network_id: row.get("network_id"),
network_cidr: row.get("network_cidr"),
port_count: row.get("port_count"),
application_count: row.get("application_count"),
})
.collect();
Ok(HostsPage {
rows: host_rows,
total,
page: safe_page,
per_page,
total_pages,
})
}
// ─── Mutations ────────────────────────────────────────────────────────────────
/// Creates a new host inside the specified network.
@@ -41,7 +189,6 @@ pub async fn create_host(
let pool = use_context::<AnyPool>()
.ok_or_else(|| ServerFnError::new("Database pool not found in context"))?;
// Look up the parent network to get its CIDR for IP validation.
let network = networks::find_network(&pool, network_id)
.await
.map_err(|e| ServerFnError::new(e.to_string()))?
@@ -49,8 +196,6 @@ pub async fn create_host(
ServerFnError::new(format!("Network {network_id} not found"))
})?;
// Enforce the business rule: a host's IP must belong to its network's CIDR.
// This check runs on the server before any INSERT, so the database stays consistent.
validate_ip_in_network(&ip, &network.cidr)
.map_err(|e| ServerFnError::new(e.to_string()))?;

4
src/app.rs
View File

@@ -11,7 +11,7 @@ use leptos_router::{
path,
};
use crate::client::{home::HomePage, networks::NetworksPage, theme::ThemeToggle};
use crate::client::{home::HomePage, hosts::HostsPage, networks::NetworksPage, theme::ThemeToggle};
// Shell — full HTML document rendered by the Axum server.
//
@@ -86,6 +86,7 @@ pub fn App() -> impl IntoView {
<nav>
<a href="/">"Rust IPAM"</a>
<a href="/networks">"Networks"</a>
<a href="/hosts">"Hosts"</a>
<span class="nav-spacer"/>
<ThemeToggle/>
</nav>
@@ -101,6 +102,7 @@ pub fn App() -> impl IntoView {
}>
<Route path=path!("/") view=HomePage/>
<Route path=path!("/networks") view=NetworksPage/>
<Route path=path!("/hosts") view=HostsPage/>
</Routes>
</main>
</Router>

352
src/client/hosts.rs Normal file
View File

@@ -0,0 +1,352 @@
// client/hosts.rs — Hosts list page
//
// Displays all hosts across every network with:
// - Add form : create a host inside a chosen network
// - Filter bar : name (substring), network, open port, application
// - Table : name, IP, network, port count, application count, delete
// - Pagination : configurable page size (15 / 25 / 50 / 100 / All)
//
// Each sub-component calls `.into_any()` on its view to return `AnyView`
// (a type-erased wrapper). This prevents Rust from composing all the nested
// generic types into a single enormous type in the parent's monomorphization,
// which would otherwise overflow the compiler's query depth limit.
use leptos::prelude::*;
use leptos::form::ActionForm;
use crate::api::{
applications::get_applications,
hosts::{CreateHost, DeleteHost, get_hosts_page, HostsPage as HostsPageData},
networks::get_networks,
};
const PER_PAGE_OPTIONS: &[(i64, &str)] = &[
(15, "15"),
(25, "25"),
(50, "50"),
(100, "100"),
(0, "All"),
];
// ─── Add host form ────────────────────────────────────────────────────────────
#[component]
fn AddHostForm(
create_action: ServerAction<CreateHost>,
networks_res: Resource<Result<Vec<crate::models::Network>, ServerFnError>>,
) -> impl IntoView {
view! {
<section class="add-form">
<h2>"Add a host"</h2>
<ActionForm action=create_action>
<div class="add-form__fields">
<label>
"Name"
<input type="text" name="name" placeholder="e.g. web-server-01" required/>
</label>
<label>
"IP address"
<input type="text" name="ip" placeholder="e.g. 192.168.1.10" required/>
</label>
<label>
"Network"
<select name="network_id" required>
<option value="">"— choose —"</option>
{move || networks_res.get()
.and_then(|r| r.ok())
.map(|nets| nets.into_iter().map(|n| {
view! { <option value=n.id.to_string()>{n.cidr}</option> }
}).collect_view())
}
</select>
</label>
<button type="submit">"Add"</button>
</div>
</ActionForm>
{move || create_action.value().get()
.and_then(|r| r.err())
.map(|e| view! { <p class="error">{e.to_string()}</p> })
}
</section>
}.into_any()
}
// ─── Filter bar ───────────────────────────────────────────────────────────────
#[component]
fn FilterBar(
networks_res: Resource<Result<Vec<crate::models::Network>, ServerFnError>>,
applications_res: Resource<Result<Vec<crate::models::Application>, ServerFnError>>,
name_filter: RwSignal<String>,
network_id_filter: RwSignal<i64>,
port_filter: RwSignal<i64>,
app_id_filter: RwSignal<i64>,
page: RwSignal<i64>,
) -> impl IntoView {
view! {
<section class="filter-bar">
<div class="filter-bar__fields">
<label class="filter-field">
"Name"
<input
type="text"
placeholder="Search…"
on:change=move |e| {
name_filter.set(event_target_value(&e));
page.set(1);
}
/>
</label>
<label class="filter-field">
"Network"
<select on:change=move |e| {
network_id_filter.set(event_target_value(&e).parse().unwrap_or(0));
page.set(1);
}>
<option value="0">"All networks"</option>
{move || networks_res.get()
.and_then(|r| r.ok())
.map(|nets| nets.into_iter().map(|n| {
view! { <option value=n.id.to_string()>{n.cidr}</option> }
}).collect_view())
}
</select>
</label>
<label class="filter-field">
"Open port"
<input
type="number"
min="1"
max="65535"
placeholder="e.g. 443"
on:change=move |e| {
port_filter.set(event_target_value(&e).parse().unwrap_or(0));
page.set(1);
}
/>
</label>
<label class="filter-field">
"Application"
<select on:change=move |e| {
app_id_filter.set(event_target_value(&e).parse().unwrap_or(0));
page.set(1);
}>
<option value="0">"All applications"</option>
{move || applications_res.get()
.and_then(|r| r.ok())
.map(|apps| apps.into_iter().map(|a| {
view! { <option value=a.id.to_string()>{a.name}</option> }
}).collect_view())
}
</select>
</label>
</div>
</section>
}.into_any()
}
// ─── Pagination bar ───────────────────────────────────────────────────────────
#[component]
fn PaginationBar(
total: Signal<i64>,
page: RwSignal<i64>,
per_page: RwSignal<i64>,
total_pages: Signal<i64>,
) -> impl IntoView {
view! {
<div class="pagination-bar">
<div class="pagination-bar__info">
{move || {
let t = total.get();
if t == 0 { "No hosts found".to_string() }
else { format!("{} host{}", t, if t == 1 { "" } else { "s" }) }
}}
</div>
<div class="pagination-bar__controls">
<label class="pagination-per-page">
"Per page "
<select on:change=move |e| {
per_page.set(event_target_value(&e).parse().unwrap_or(15));
page.set(1);
}>
{PER_PAGE_OPTIONS.iter().map(|(value, label)| {
view! {
<option value=value.to_string() selected=*value == 15>
{*label}
</option>
}
}).collect_view()}
</select>
</label>
// Page navigation — hidden when showing all results (per_page == 0)
{move || (per_page.get() > 0).then(|| view! {
<div class="pagination-nav">
<button
disabled=move || page.get() <= 1
on:click=move |_| page.update(|p| *p = (*p - 1).max(1))
>"‹"</button>
<span class="pagination-nav__label">
{move || format!("Page {} of {}", page.get(), total_pages.get().max(1))}
</span>
<button
disabled=move || page.get() >= total_pages.get()
on:click=move |_| {
let max = total_pages.get_untracked();
page.update(|p| *p = (*p + 1).min(max));
}
>"›"</button>
</div>
})}
</div>
</div>
}.into_any()
}
// ─── Host table ───────────────────────────────────────────────────────────────
// Separate component for the table body to further reduce type depth in HostsPage.
#[component]
fn HostTable(
hosts: Resource<Result<HostsPageData, ServerFnError>>,
delete_action: ServerAction<DeleteHost>,
) -> impl IntoView {
view! {
<Suspense fallback=|| view! { <p class="empty">"Loading hosts…"</p> }>
{move || hosts.get().map(|result| match result {
Err(e) => view! {
<p class="error">"Could not load hosts: " {e.to_string()}</p>
}.into_any(),
Ok(HostsPageData { rows, .. }) if rows.is_empty() => view! {
<p class="empty">"No hosts match the current filters."</p>
}.into_any(),
Ok(HostsPageData { rows, .. }) => view! {
<div class="table-container">
<table>
<thead>
<tr>
<th>"Name"</th>
<th>"IP"</th>
<th>"Network"</th>
<th class="col-count">"Ports"</th>
<th class="col-count">"Applications"</th>
<th class="col-actions">"Actions"</th>
</tr>
</thead>
<tbody>
{rows.into_iter().map(|host| {
let id = host.id;
view! {
<tr>
<td>
<a class="table-link" href=format!("/hosts/{id}")>
{host.name}
</a>
</td>
<td class="cell-mono">{host.ip}</td>
<td>
<a class="table-link" href=format!("/networks/{}", host.network_id)>
{host.network_cidr}
</a>
</td>
<td class="col-count">{host.port_count}</td>
<td class="col-count">{host.application_count}</td>
<td class="col-actions">
<button on:click=move |_| {
delete_action.dispatch(DeleteHost { id });
}>
"Delete"
</button>
</td>
</tr>
}
}).collect_view()}
</tbody>
</table>
</div>
}.into_any(),
})}
</Suspense>
}.into_any()
}
// ─── Main page component ──────────────────────────────────────────────────────
#[component]
pub fn HostsPage() -> impl IntoView {
// Actions
let create_action = ServerAction::<CreateHost>::new();
let delete_action = ServerAction::<DeleteHost>::new();
// Filter signals (0 / "" = no filter)
let name_filter = RwSignal::new(String::new());
let network_id_filter = RwSignal::new(0i64);
let port_filter = RwSignal::new(0i64);
let app_id_filter = RwSignal::new(0i64);
// Pagination signals
let page = RwSignal::new(1i64);
let per_page = RwSignal::new(15i64);
// Hosts resource — refetches whenever any filter/pagination/action changes
let hosts = Resource::new(
move || (
name_filter.get(),
network_id_filter.get(),
port_filter.get(),
app_id_filter.get(),
page.get(),
per_page.get(),
create_action.version().get(),
delete_action.version().get(),
),
|(name, net, port, app, p, pp, _, _)| get_hosts_page(name, net, port, app, p, pp),
);
// Dropdown resources (fetched once on mount)
let networks_res = Resource::new(|| (), |_| get_networks());
let applications_res = Resource::new(|| (), |_| get_applications());
// Derived pagination signals
let total_pages = Signal::derive(move || {
hosts.get().and_then(|r| r.ok()).map(|p| p.total_pages).unwrap_or(1)
});
let total = Signal::derive(move || {
hosts.get().and_then(|r| r.ok()).map(|p| p.total).unwrap_or(0)
});
view! {
<div class="hosts-page">
<h1>"Hosts"</h1>
<AddHostForm create_action=create_action networks_res=networks_res/>
<FilterBar
networks_res=networks_res
applications_res=applications_res
name_filter=name_filter
network_id_filter=network_id_filter
port_filter=port_filter
app_id_filter=app_id_filter
page=page
/>
<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> })
}
<PaginationBar total=total page=page per_page=per_page total_pages=total_pages/>
<HostTable hosts=hosts delete_action=delete_action/>
</section>
</div>
}.into_any()
}

1
src/client/mod.rs
View File

@@ -10,5 +10,6 @@
// without guarding it with `#[cfg(target_arch = "wasm32")]`.
pub mod home; // Home page
pub mod hosts; // Hosts list with filters and pagination
pub mod networks; // Networks list and creation
pub mod theme; // Theme toggle component (light / dark / system)

4
src/lib.rs
View File

@@ -1,3 +1,7 @@
// Leptos view! macros generate deeply-nested generic types; the default
// limit of 128 is not enough for pages with many components.
#![recursion_limit = "512"]
// lib.rs — Shared library root
//
// This file is compiled in BOTH modes: