Pagination for user table, ts list and random style fixes

Author: cikzh

nts-pool-management/assets/components.css

@@ -38,7 +38,7 @@ a.btn {
 }
 
 .btn-alt:hover {
-    color: color-mix(in lab, var(--primary), var(--black) 30%);
+    color: color-mix(in lab, var(--primary), var(--black) 30%) !important;
 }
 
 .btn-link,
@@ -53,7 +53,7 @@ a.btn {
 
 .btn-sm {
     max-width: fit-content;
-    padding: var(--space-xs) var(--space-sm);
+    padding: 0 var(--space-sm);
 }
 
 highlight-actions {
@@ -95,43 +95,16 @@ input[type="password"].error {
     background-color: var(--white);
 }
 
-nav.pagination {
-  margin: var(--space-md) 0;
-  a.btn, button {
-    color: var(--secondary);
-    background-color: inherit;
-    padding: 0 var(--space-sm);
-    border: inherit;
-  }
-
-  [aria-disabled] {
-    color: var(--grey);
-  }
-
-  [aria-disabled]:hover {
-    color: var(--grey);
-    cursor: inherit;
-  }
-
-  [aria-current="page"] {
-    text-decoration: underline;
-  }
-
-  a.btn:hover, button:hover {
-    border: inherit;
-    color: var(--primary);
-  }
-}
-
 #accept-terms + span {
     font-weight: normal;
 }
 
 h1 {
-  font-size: 2.25rem;
+    font-size: 2.25rem;
 }
 
 h2 {
+    margin-top: var(--space-md);
     margin-bottom: var(--space-sm);
 }
 
@@ -140,6 +113,7 @@ h3 {
 }
 
 section > p {
+    font-size: 18px;
     margin-bottom: var(--space-sm);
 }
 
@@ -163,7 +137,7 @@ code-block {
     display: block;
     width: 100%;
     margin: var(--space-sm) 0;
-    padding: var(--space-xs) var(--space-xs);
+    padding: var(--space-sm) var(--space-md);
 }
 
 .key {
@@ -243,12 +217,12 @@ details.confirmation-btn > div {
 
 @keyframes animateDown {
   0% {
-    opacity: 0;
-    transform: translatey(-15px);
+      opacity: 0;
+      transform: translatey(-15px);
   }
   100% {
-    opacity: 1;
-    transform: translatey(0);
+      opacity: 1;
+      transform: translatey(0);
   }
 }
 
@@ -291,6 +265,7 @@ dialog .dialog-actions {
 
 details.toast > summary,
 aside {
+    font-weight: bold;
     padding: var(--space-sm) var(--space-md);
     border-width: var(--border-width);
     border-style: solid;
@@ -316,19 +291,19 @@ table {
 
     th,
     td {
-        width: 100%;
         white-space: nowrap;
         padding: var(--space-sm);
     }
-
+  
     tbody {
-        tr:nth-child(odd) {
-            background-color: var(--white);
+        tr {
+            border-bottom: 1px solid var(--grey);
         }
     }
 
-    .actions {
-        text-align: right;
+
+    td.actions {
+        float: right;
         display: flex;
         gap: var(--space-xs);
         white-space: nowrap;
@@ -337,16 +312,20 @@ table {
 
 table.birowed {
     tbody {
-        tr:nth-child(4n + 1),
+        tr:nth-child(4n + 2),
         tr:nth-child(4n + 4) {
-            background-color: var(--white);
+            border: none;
         }
 
-        tr:nth-child(4n + 2),
+        tr:nth-child(4n + 1),
         tr:nth-child(4n + 3) {
-            background-color: transparent;
         }
     }
+
+    details {
+        cursor: pointer;
+        user-select: none;
+    }
 }
 
 table.autowidth {
@@ -358,6 +337,43 @@ table.autowidth {
     }
 }
 
+.table-controls {
+    display: flex;
+    gap: var(--space-md);
+    margin-top: var(--space-sm);
+    justify-content: space-between;
+    padding: 0 var(--space-sm);
+
+    .pagination {
+        a.btn, button {
+            color: var(--secondary);
+            background-color: inherit;
+            padding: 0 var(--space-sm);
+            border: inherit;
+        }
+    }
+    
+    [aria-disabled] {
+        color: var(--grey);
+    }
+
+    [aria-disabled]:hover {
+        color: var(--grey);
+        cursor: inherit;
+    }
+
+    [aria-current="page"] {
+        text-decoration: underline;
+    }
+}
+
+.table-filter {
+    margin: var(--space-sm) 0;
+    display: flex;
+    gap: var(--space-sm);
+    align-items: baseline;
+}
+
 .multivalue-box {
     display: flex;
     width: fit-content;

nts-pool-management/assets/variables.css

@@ -15,6 +15,7 @@
   --success: #74ce42;
   --info: #99b6d5;
   --link: #0a57f0;
+  --text-color-body: #333;
 
   --muted: var(--grey);
 

nts-pool-management/src/models/time_source.rs

@@ -306,6 +306,27 @@ pub async fn logs(
     .await
 }
 
+pub async fn log_count(
+    conn: impl DbConnLike<'_>,
+    time_source_id: TimeSourceId,
+    monitor_id: MonitorId,
+    protocol: IpVersion,
+) -> Result<i64, sqlx::Error> {
+    Ok(sqlx::query!(
+        r#"
+        SELECT COUNT(*) as "count!"
+        FROM monitor_samples
+        WHERE time_source_id = $1 AND protocol = $2 AND monitor_id = $3
+        "#,
+        time_source_id as _,
+        protocol as _,
+        monitor_id as _,
+    )
+    .fetch_one(conn)
+    .await?
+    .count)
+}
+
 pub async fn source_name(
     conn: impl DbConnLike<'_>,
     owner: UserId,

nts-pool-management/src/pagination/info.rs

@@ -12,6 +12,7 @@ pub struct PaginationInfo<S> {
     pub has_prev: bool,
     pub has_next: bool,
     pub total_pages: u32,
+    pub total_items: u64,
     /// Pre-computed markup-friendly page links (numbers and ellipses).
     pub links: Vec<PageLink>,
 
@@ -33,6 +34,10 @@ where
         ((self.page - 1) as i64) * self.per_page as i64
     }
 
+    pub fn total_items(&self) -> u64 {
+        self.total_items
+    }
+    
     /// Generate a URL query string for the given page and per-page values.
     pub fn url(&self, page: u32, per_page: u32) -> String {
         Pagination {
@@ -112,6 +117,7 @@ where
         has_prev,
         has_next,
         total_pages,
+        total_items,
         links: build_links(page, total_pages),
         sort: pagination.sort,
         order: pagination.order,

nts-pool-management/src/pagination/pagination.rs

@@ -58,7 +58,7 @@ fn is_default_page(page: &u32) -> bool {
 
 /// Default page size when unspecified.
 const fn default_per_page() -> u32 {
-    500
+    100
 }
 
 fn is_default_per_page(per_page: &u32) -> bool {

nts-pool-management/src/routes/management.rs

@@ -8,7 +8,7 @@ use axum::{
 };
 use chrono::{DateTime, Utc};
 use nts_pool_shared::IpVersion;
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
 use serde_json::Value;
 
 use crate::{
@@ -21,6 +21,7 @@ use crate::{
         monitor::MonitorId,
         time_source::{self, NewTimeSourceForm, TimeSource, TimeSourceId, UpdateTimeSourceForm},
     },
+    pagination::{Pagination, PaginationInfo},
     templates::{HtmlTemplate, filters},
 };
 
@@ -58,6 +59,13 @@ struct DisplayLogRow {
     raw_sample: Value,
 }
 
+#[derive(Default, Clone, Copy, Debug, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "snake_case")]
+pub enum DisplayLogRowSort {
+    #[default]
+    CreatedAt,
+}
+
 #[derive(Template)]
 #[template(path = "management/time_source_details.html.j2")]
 struct TimeSourceInfoTemplate {
@@ -68,6 +76,7 @@ struct TimeSourceInfoTemplate {
     monitors: Vec<String>,
     cur_monitor: Option<MonitorId>,
     cur_protocol: IpVersion,
+    pagination: PaginationInfo<DisplayLogRowSort>,
 }
 
 #[derive(Deserialize)]
@@ -123,6 +132,7 @@ pub async fn time_source_info(
     app: AppContext,
     State(state): State<AppState>,
     Query(log_choice): Query<LogSelection>,
+    pagination: Pagination<DisplayLogRowSort>,
 ) -> Result<impl IntoResponse, AppError> {
     let ts = time_source::details(&state.db, time_source_id).await?;
     let scores = time_source::scores(&state.db, time_source_id).await?;
@@ -136,10 +146,27 @@ pub async fn time_source_info(
         }
     }
     let monitors: Vec<String> = scoremap.iter().map(|v| v.0.clone()).collect();
-    let logs = if let Some(cur_monitor) = cur_monitor {
-        time_source::logs(&state.db, time_source_id, cur_monitor, cur_protocol, 0, 200).await?
+    
+    let (pagination, logs) = if let Some(cur_monitor) = cur_monitor {
+        let total_items =
+            time_source::log_count(&state.db, time_source_id, cur_monitor, cur_protocol).await?
+                as u64;
+        let pagination = pagination.set_total(total_items);
+        (
+            pagination.clone(),
+            time_source::logs(
+                &state.db,
+                time_source_id,
+                cur_monitor,
+                cur_protocol,
+                pagination.offset(),
+                pagination.limit(),
+            )
+            .await?,
+        )
     } else {
-        vec![]
+        let pagination = pagination.set_total(0);
+        (pagination, vec![])
     };
 
     Ok(HtmlTemplate(TimeSourceInfoTemplate {
@@ -185,6 +212,7 @@ pub async fn time_source_info(
         monitors,
         cur_monitor,
         cur_protocol,
+        pagination,
     }))
 }
 

nts-pool-management/templates/admin/monitor_key.html.j2

@@ -7,9 +7,8 @@
     Monitor key created succesfully. <strong>The key will only be showed once.</strong>
   </aside>
   <section>
+      <h2>{{ name }}</h2>
     <dl>
-      <dd>Monitor name:</dd>
-      <dt>{{ name }}</dt>
       <dd>Key:</dd>
      <dt><code class="key">{{ key }}</code></dt>
     </dl>