Pagination and sorting

Cargo.toml

@@ -51,6 +51,7 @@ scc = "3.3.2"
 scraper = "0.25.0"
 serde_json = "1.0.140"
 serde_qs = "0.15.0"
+serde_urlencoded = "0.7.1"
 serde = { version = "1.0.194" }
 sha3 = "0.10.8"
 sqlx = { version = "0.8.6", default-features = false }

nts-pool-management/Cargo.toml

@@ -43,6 +43,7 @@ rustls = { workspace = true }
 serde = { workspace = true, features = ["derive"] }
 serde_json = { workspace = true }
 serde_qs = { workspace = true }
+serde_urlencoded = { workspace = true }
 sha3.workspace = true
 sqlx = { workspace = true, default-features = false, features = [
     "runtime-tokio",

nts-pool-management/assets/components.css

@@ -2,6 +2,7 @@ button,
 [type="button"],
 [type="submit"],
 [type="reset"],
+.pagination button,
 a.btn {
     display: inline-block;
     background-color: var(--primary);
@@ -37,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,
@@ -52,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 {
@@ -99,10 +100,11 @@ input[type="password"].error {
 }
 
 h1 {
-  font-size: 2.25rem;
+    font-size: 2.25rem;
 }
 
 h2 {
+    margin-top: var(--space-md);
     margin-bottom: var(--space-sm);
 }
 
@@ -111,6 +113,7 @@ h3 {
 }
 
 section > p {
+    font-size: 18px;
     margin-bottom: var(--space-sm);
 }
 
@@ -134,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 {
@@ -214,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);
   }
 }
 
@@ -262,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;
@@ -278,23 +282,28 @@ table {
     width: 100%;
     th {
         text-align: left;
+
+        a,
+        a:visited {
+            color: inherit;
+        }
     }
 
     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;
@@ -303,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 {
@@ -324,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/main.css

@@ -30,7 +30,7 @@ main section {
   margin-bottom: var(--space-lg);
 }
 
-nav {
+nav:not(.pagination) {
   background-color: var(--secondary);
   color: var(--white);
   display: flex;

nts-pool-management/assets/variables.css

@@ -15,7 +15,10 @@
   --success: #74ce42;
   --info: #99b6d5;
   --link: #0a57f0;
+  --text-color-body: #333;
 
+  --muted: var(--grey);
+
   /* spacing */
   --space-xxs: 0.25rem;
   --space-xs: 0.5rem;

nts-pool-management/src/main.rs

@@ -23,6 +23,7 @@ pub use common::*;
 
 mod common;
 pub mod models;
+mod pagination;
 pub mod routes;
 mod scoring;
 pub mod templates;

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

@@ -308,6 +308,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,