WIP try to add progress polling

Author: adrw

service/src/main/kotlin/app/cash/backfila/ui/ProgressUpdater.kt

@@ -0,0 +1,7 @@
+// package app.cash.backfila.ui
+//
+// class ProgressUpdater {
+//  fun backfillProgress(backfillName: String, numerator: Number, denominator: Number): String {
+//    println("Backfill $backfillName is ${numerator.toDouble() / denominator.toDouble() * 100}% complete")
+// }
+//  }

service/src/main/kotlin/app/cash/backfila/ui/components/DashboardLayout.kt

@@ -84,6 +84,10 @@ class DashboardPageLayout @Inject constructor(
             type = "module"
             src = "/static/js/autocomplete_controller.js"
           }
+          script {
+            type = "module"
+            src = "/static/js/auto_reload_controller.js"
+          }
           script {
             type = "module"
             src = "/static/js/search_bar_controller.js"

service/src/main/kotlin/app/cash/backfila/ui/components/DashboardPageLayout.kt

@@ -0,0 +1,20 @@
+package app.cash.backfila.ui.components
+
+import kotlin.math.round
+import kotlinx.html.TagConsumer
+import kotlinx.html.div
+import kotlinx.html.style
+
+fun TagConsumer<*>.ProgressBarReloader(numerator: Number, denominator: Number) {
+  div("w-full bg-gray-200 rounded-full dark:bg-gray-700") {
+    val percentComplete = if (numerator.toInt() == 0) 0 else round((numerator.toDouble() / denominator.toDouble()) * 100)
+    // Don't show blue sliver for 0%, just show the gray empty bar
+    val showPartialBarStyle = if (percentComplete.toInt() != 0) "bg-blue-600" else ""
+    div(
+      "$showPartialBarStyle text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full",
+    ) {
+      style = "width: ${if (percentComplete.toInt() == 0) 100 else percentComplete}%"
+      +"""$percentComplete%"""
+    }
+  }
+}

service/src/main/kotlin/app/cash/backfila/ui/components/ProgressBarReloader.kt

@@ -7,10 +7,13 @@ import app.cash.backfila.ui.components.PageTitle
 import java.net.HttpURLConnection
 import javax.inject.Inject
 import javax.inject.Singleton
-import kotlinx.html.role
-import kotlinx.html.ul
+import kotlinx.html.div
+import misk.scope.ActionScoped
 import misk.security.authz.Authenticated
+import misk.tokens.TokenGenerator
+import misk.turbo.turbo_frame
 import misk.web.Get
+import misk.web.HttpCall
 import misk.web.PathParam
 import misk.web.QueryParam
 import misk.web.Response
@@ -23,9 +26,15 @@ import okhttp3.Headers
 
 @Singleton
 class ServiceShowAction @Inject constructor(
-  private val getBackfillRunsAction: GetBackfillRunsAction,
+  private val clientHttpCall: ActionScoped<HttpCall>,
   private val dashboardPageLayout: DashboardPageLayout,
+  private val getBackfillRunsAction: GetBackfillRunsAction,
+  private val tokenGenerator: TokenGenerator,
 ) : WebAction {
+  private val path by lazy {
+    clientHttpCall.get().url.encodedPath
+  }
+
   @Get(PATH)
   @ResponseContentType(MediaTypes.TEXT_HTML)
   @Authenticated(capabilities = ["users"])
@@ -50,15 +59,18 @@ class ServiceShowAction @Inject constructor(
     val htmlResponseBody = dashboardPageLayout.newBuilder()
       .title("$label | Backfila")
       .buildHtmlResponseBody {
-        PageTitle("Service", label)
+        div {
+          attributes["data-controller"] = "auto-reload"
+          attributes["data-auto-reload-target"] = "frame"
 
-        // TODO Add completed table
-        // TODO Add deleted support?
-        BackfillsTable(true, backfillRuns.running_backfills)
-        BackfillsTable(false, backfillRuns.paused_backfills)
+          PageTitle("Service", label)
 
-        ul("space-y-3") {
-          role = "list"
+          // TODO Add completed table
+          // TODO Add deleted support?
+//          turbo_frame(id = "backfill-tables", src = path.replace("services", "services/progress/${tokenGenerator.generate()}")) {
+            BackfillsTable(true, backfillRuns.running_backfills)
+            BackfillsTable(false, backfillRuns.paused_backfills)
+//          }
         }
       }
 

service/src/main/kotlin/app/cash/backfila/ui/pages/ServiceShowAction.kt

@@ -0,0 +1,23 @@
+import { Application, Controller } from "../cache/stimulus/3.1.0/stimulus.min.js";
+window.Stimulus = Application.start();
+
+Stimulus.register("auto-reload", class extends Controller {
+  static targets = ["frame"];
+
+  connect() {
+    console.log("Auto-reload connected...");
+    this.reloadInterval = setInterval(() => {
+      console.log("Reloading Turbo Frame...");
+      this.reloadFrame();
+    }, 5000); // 5000 milliseconds = 5 seconds
+  }
+
+  disconnect() {
+    console.log("Clearing auto-reload interval...");
+    clearInterval(this.reloadInterval);
+  }
+
+  reloadFrame() {
+    this.frameTarget.src = this.frameTarget.src;
+  }
+});