Clean up admin html (#17)

levkk · Nov 4, 2024 · 28102ae · 28102ae
1 parent e68dfec
commit 28102ae
Show file tree

Hide file tree

Showing 19 changed files with 226 additions and 120 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/rwf-admin/Cargo.toml b/rwf-admin/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "rwf-admin"
-version = "0.1.0"
+version = "0.1.5"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
@@ -12,4 +12,4 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 time = { version = "0.3", features = ["formatting", "serde", "parsing", "macros"] }
 once_cell = "1"
-uuid = { version = "*", features = ["v4"]}
+uuid = { version = "1", features = ["v4"]}
diff --git a/rwf-admin/src/controllers/requests.rs b/rwf-admin/src/controllers/requests.rs
@@ -1,4 +1,4 @@
-use crate::models::RequestByCode;
+use crate::models::{RequestByCode, RequestsDuration};
 use rwf::prelude::*;
 
 #[derive(Default)]
@@ -11,11 +11,19 @@ impl Controller for Requests {
             let mut conn = Pool::connection().await?;
             RequestByCode::count(60).fetch_all(&mut conn).await?
         };
+
+        let duration = {
+            let mut conn = Pool::connection().await?;
+            RequestsDuration::count(60).fetch_all(&mut conn).await?
+        };
+
         let requests = serde_json::to_string(&requests)?;
+        let duration = serde_json::to_string(&duration)?;
 
         render!("templates/rwf_admin/requests.html",
             "title" => "Requests | Rust Web Framework",
-            "requests" => requests
+            "requests" => requests,
+            "duration" => duration,
         )
     }
 }
diff --git a/rwf-admin/src/models/mod.rs b/rwf-admin/src/models/mod.rs
@@ -176,3 +176,30 @@ impl RequestByCode {
         )
     }
 }
+
+#[derive(Clone, macros::Model, Serialize)]
+pub struct RequestsDuration {
+    pub duration: f64,
+    #[serde(with = "time::serde::rfc2822")]
+    pub created_at: OffsetDateTime,
+}
+
+impl RequestsDuration {
+    pub fn count(minutes: i64) -> Scope<Self> {
+        Self::find_by_sql(
+            "WITH timestamps AS (
+                SELECT date_trunc('minute', now() - (n || ' minute')::interval) AS created_at FROM generate_series(0, $1::bigint) n
+            )
+            SELECT
+                COALESCE(e2.avg, 0.0) AS duration,
+                timestamps.created_at AS created_at
+            FROM timestamps
+            LEFT JOIN LATERAL (
+                SELECT avg(duration) AS avg
+                FROM rwf_requests
+                WHERE created_at BETWEEN timestamps.created_at AND timestamps.created_at + INTERVAL '1 minute'
+            ) e2 ON true
+            ORDER BY 2", &[minutes.to_value()],
+        )
+    }
+}
diff --git a/rwf-admin/static/js/requests_controller.js b/rwf-admin/static/js/requests_controller.js
@@ -2,24 +2,26 @@ import { Controller } from "hotwired/stimulus";
 import "https://cdn.jsdelivr.net/npm/chart.js";
 
 export default class extends Controller {
-  static targets = ["requestsOk", "chart"];
+  static targets = ["requests", "chart", "duration"];
 
   connect() {
-    const data = JSON.parse(this.requestsOkTarget.innerHTML);
+    const requestsData = JSON.parse(this.requestsTarget.innerHTML);
+    const latencyData = JSON.parse(this.durationTarget.innerHTML);
     const labels = Array.from(
       new Set(
-        data.map((item) => new Date(item.created_at).toLocaleTimeString()),
+        requestsData.map((item) => new Date(item.created_at).toLocaleTimeString()),
       ),
     );
-    const ok = data
+    const ok = requestsData
       .filter((item) => item.code === "ok")
       .map((item) => item.count);
-    const warn = data
+    const warn = requestsData
       .filter((item) => item.code === "warn")
       .map((item) => item.count);
-    const error = data
+    const error = requestsData
       .filter((item) => item.code === "error")
       .map((item) => item.count);
+    const latencyX = latencyData.map((item) => item.duration);
 
     const options = {
       scales: {
@@ -31,7 +33,16 @@ export default class extends Controller {
         },
         y: {
           stacked: true,
+          position: 'left',
         },
+
+        y1: {
+          position: 'right',
+          display: true,
+          grid: {
+            drawOnChartArea: false, // only want the grid lines for one axis to show up
+          },
+        }
       },
     };
 
@@ -41,16 +52,25 @@ export default class extends Controller {
         {
           label: "100-299",
           data: ok,
+          yAxisID: 'y',
         },
         {
           label: "500-599",
           data: error,
-          // backgroundColor: "red",
+          yAxisID: 'y',
         },
         {
           label: "300-499",
           data: warn,
+          yAxisID: 'y',
         },
+        {
+          label: "Latency (ms)",
+          data: latencyX,
+          yAxisID: "y1",
+          type: "line",
+          hidden: true,
+        }
       ],
     };
 

diff --git a/rwf-admin/templates/rwf_admin/index.html b/rwf-admin/templates/rwf_admin/index.html
diff --git a/rwf-admin/templates/rwf_admin/jobs.html b/rwf-admin/templates/rwf_admin/jobs.html
@@ -1,7 +1,10 @@
-<%% "templates/rwf_admin/head.html" %> <%% "templates/rwf_admin/nav.html" %>
+<%% "templates/rwf_admin/head.html" %>
+<%% "templates/rwf_admin/nav.html" %>
+
 <div class="container mb-5">
-    <% for name in ["jobs"] %> <%% "templates/rwf_admin/reload.html" %> <% end
-    %>
+    <% for name in ["jobs"] %>
+        <%% "templates/rwf_admin/reload.html" %>
+    <% end %>
     <div class="row">
         <div class="col-sm-2">
             <div class="card">
@@ -81,4 +84,5 @@ <h3 class="text-center"><%= latency %>s</h3>
         <% end %>
     </div>
 </div>
+
 <%% "templates/rwf_admin/footer.html" %>
diff --git a/rwf-admin/templates/rwf_admin/model.html b/rwf-admin/templates/rwf_admin/model.html
@@ -1,9 +1,15 @@
-<%% "templates/rwf_admin/head.html" %> <%% "templates/rwf_admin/nav.html" %>
+<%% "templates/rwf_admin/head.html" %>
+<%% "templates/rwf_admin/nav.html" %>
+
 <div class="container" data-controller="model">
-    <% for name in [table_name.camelize] %> <%% "templates/rwf_admin/reload.html" %> <% end
-    %>
+
+    <% for name in [table_name.camelize] %>
+        <%% "templates/rwf_admin/reload.html" %>
+    <% end %>
+
     <div class="mb-5">
         <%% "templates/rwf_admin/model_pages.html" %>
+
         <div class="table-responsive">
             <table class="table">
                 <thead>
@@ -17,20 +23,21 @@
                     <% for row in rows %>
                     <tr>
                         <% for column in selected_columns %>
-                        <% if row[column] %>
-                            <td><%= row[column] %></td>
-                        <% else %>
-                            <td><code>null</code></td>
-                        <% end %>
+                            <% if row[column] %>
+                                <td><%= row[column] %></td>
+                            <% else %>
+                                <td><code>null</code></td>
+                            <% end %>
                         <% end %>
                     </tr>
                     <% end %>
                 </tbody>
             </table>
         </div>
         <% if rows.len > 15 %>
-        <%% "templates/rwf_admin/model_pages.html" %>
+            <%% "templates/rwf_admin/model_pages.html" %>
         <% end %>
     </div>
 </div>
+
 <%% "templates/rwf_admin/footer.html" %>
diff --git a/rwf-admin/templates/rwf_admin/model_new.html b/rwf-admin/templates/rwf_admin/model_new.html
@@ -1,16 +1,18 @@
 <%% "templates/rwf_admin/head.html" %>
 <%% "templates/rwf_admin/nav.html" %>
+
 <div class="container">
     <div
-        class="d-flex justify-content-between align-items-center mt-5 mb-3"
+        class="mt-5 mb-3 d-flex flex-column"
         data-controller="reload"
     >
-        <h1 class="d-flex align-items-center gap-2">
+        <h1 class="d-flex align-items-center gap-2 mb-0">
             <span class="material-symbols-outlined fs-1">
                 database
             </span>
             New record
         </h1>
+        <p class="fs-6 h-100 d-flex align-items-end text-secondary"><%= table_name %></p>
     </div>
 
     <div class="my-5">
@@ -26,12 +28,12 @@ <h1 class="d-flex align-items-center gap-2">
                     <label
                         class="form-label fw-semibold"
                         for="<%- column.table_name %>-<%- column.column_name %>"
-                        >
-                            <%= column.column_name %><% if column.is_required %>
-                            <strong class="text-danger"><sup>*</sup></strong>
-                            <% end %>
-                        </label
                     >
+                        <%= column.column_name %>
+                            <% if column.is_required %>
+                                <strong class="text-danger"><sup>*</sup></strong>
+                            <% end %>
+                        </label>
                     <input
                         id="<%- column.table_name %>-<%- column.column_name %>"
                         type="text"
@@ -43,12 +45,17 @@ <h1 class="d-flex align-items-center gap-2">
                         required
                         <% end %>
                     />
-                    <div class="form-text text-end"><%= column.data_type %></div>
+
+                    <!-- data type hint -->
+                    <div class="form-text text-end">
+                        <%= column.data_type %>
+                    </div>
                 </div>
                 <% end %>
             </div>
-            <div class="d-flex justify-content-end mt-3">
+            <div class="d-flex justify-content-end mt-3 gap-2">
                 <button type="submit" class="btn btn-primary">Create</button>
+                <a class="btn btn-secondary" href="/admin/models/model?name=<%= table_name.underscore.urlencode %>">Back</a>
             </div>
         </form>
     </div>

diff --git a/rwf-admin/templates/rwf_admin/model_pages.html b/rwf-admin/templates/rwf_admin/model_pages.html
@@ -1,8 +1,8 @@
 <div class="d-flex justify-content-between my-3">
-    <a href="/admin/models/model?name=<%= table_name.underscore %>&page=<%= (page - 1).clamp_one %>">
+    <a href="/admin/models/model?name=<%= table_name.underscore.urlencode %>&page=<%= (page - 1).clamp_one %>">
         Previous
     </a>
-    <a href="/admin/models/model?name=<%= table_name.underscore %>&page=<%= page + 1 %>">
+    <a href="/admin/models/model?name=<%= table_name.underscore.urlencode %>&page=<%= page + 1 %>">
         Next
     </a>
 </div>