Add ingest rate graph for admin panel (#4)

* Add ingest rate graph for admin panel.

* Update for bundler changes.

* Move ingest rate behind feature flag.

Cargo.toml

@@ -23,6 +23,7 @@ actix-session = { version = "0.9", features = ["cookie-session"] }
 actix-web = { version = "4.2.1", default-features = false, features = ["macros", "cookies", "compress-brotli", "compress-gzip", "compress-zstd"] }
 actix-web-actors = "4"
 actix-web-httpauth = "0.8"
+actix-web-lab = "0.20.2"
 anyhow = "1"
 argonautica = "0.2"
 askama = { version = "0.12.1" , features = ["serde-json", "humansize", "markdown"] }

frontend/package.json

@@ -9,6 +9,7 @@
     "bulma": "^0.9.4",
     "bulma-toast": "^2.4.3",
     "dotenv": "^16.4.1",
+    "echarts": "^5.4.3",
     "esbuild": "^0.20.0",
     "esbuild-plugin-copy": "^2.1.1",
     "esbuild-sass-plugin": "^3.0.0",

frontend/src/entrypoints/admin.ts

@@ -1,5 +1,88 @@
+import * as echarts from "echarts";
+
 document.getElementById("inject-job")?.addEventListener("click", (ev) => {
   if (!confirm("Are you sure you want to inject this job?")) {
     ev.preventDefault();
   }
 });
+
+interface IngestStatUpdate {
+  timestamp: number;
+  counts: Record<string, number>;
+}
+
+const ingestStatElement = document.getElementById("ingest-stats");
+
+function ingestStatsGraph(elem: HTMLElement) {
+  let pointDates: Array<Date> = [];
+  let series: Record<string, any> = {};
+  let previousValues: Record<string, number> = {};
+  let addedPoints = -1;
+
+  const chart = echarts.init(elem);
+
+  const opts = {
+    title: {
+      left: "center",
+      text: "Ingested Media",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    toolbox: {
+      feature: {
+        dataZoom: {
+          yAxisIndex: "none",
+        },
+        restore: {},
+        saveAsImage: {},
+      },
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: pointDates,
+    },
+    yAxis: {
+      name: "Additions",
+      type: "value",
+      boundaryGap: [0, "100%"],
+    },
+    series: [],
+  };
+
+  chart.setOption(opts);
+
+  const evtSource = new EventSource("/api/ingest/stats");
+
+  evtSource.onmessage = (e) => {
+    const data: IngestStatUpdate = JSON.parse(e.data);
+
+    for (let [key, value] of Object.entries(data["counts"])) {
+      if (series[key] === undefined) {
+        series[key] = {
+          name: key,
+          type: "line",
+          data: Array(addedPoints + 1).fill(0),
+        };
+      }
+
+      series[key]["data"].push(value - (previousValues[key] || 0));
+      previousValues[key] = value;
+    }
+
+    pointDates.push(new Date(data["timestamp"] * 1000));
+    addedPoints += 1;
+
+    chart.setOption({
+      xAxis: {
+        data: pointDates,
+      },
+      series: Object.values(series),
+    });
+  };
+}
+
+if (ingestStatElement) {
+  ingestStatsGraph(ingestStatElement);
+}

src/admin.rs

@@ -28,10 +28,13 @@ pub fn service() -> Scope {
 struct Admin {
     subreddits: Vec<models::RedditSubreddit>,
     recent_flist_runs: Vec<models::FListImportRun>,
+
+    ingest_rate_graph: bool,
 }
 
 #[get("/tools", name = "admin_tools")]
 async fn admin(
+    unleash: web::Data<crate::Unleash>,
     request: actix_web::HttpRequest,
     conn: web::Data<sqlx::PgPool>,
     user: models::User,
@@ -48,6 +51,12 @@ async fn admin(
     let body = Admin {
         subreddits,
         recent_flist_runs,
+
+        ingest_rate_graph: unleash.is_enabled(
+            crate::Features::AdminIngestRate,
+            Some(&user.context()),
+            false,
+        ),
     }
     .wrap(&request, Some(&user))
     .await