add Backfill Search Dropdown Implementation (#512)

This change was added to the legacy UI as an additional functionality.
We want the new UI to have this functionality as well.


https://github.com/user-attachments/assets/ba9ede4c-bbf8-4afc-807a-22efe0c62583



https://github.com/user-attachments/assets/a420c368-c8a1-45a2-8127-d9637bffee7c

Author: jeffhwang-sq

service/src/main/kotlin/app/cash/backfila/client/EnvoyCallbackConnectorProvider.kt

@@ -6,14 +6,14 @@ import com.squareup.moshi.Moshi
 import java.net.URL
 import javax.inject.Inject
 import javax.inject.Singleton
+import misk.client.EnvoyClientEndpointProvider
+import misk.client.HttpClientEnvoyConfig
 import misk.client.HttpClientFactory
 import misk.client.HttpClientsConfig
 import misk.moshi.adapter
 import retrofit2.Retrofit
 import retrofit2.adapter.guava.GuavaCallAdapterFactory
 import retrofit2.converter.wire.WireConverterFactory
-import misk.client.EnvoyClientEndpointProvider
-import misk.client.HttpClientEnvoyConfig
 
 @Singleton
 class EnvoyCallbackConnectorProvider @Inject constructor(

service/src/main/kotlin/app/cash/backfila/dashboard/GetBackfillNamesAction.kt

@@ -0,0 +1,49 @@
+package app.cash.backfila.dashboard
+
+import app.cash.backfila.service.persistence.BackfilaDb
+import app.cash.backfila.service.persistence.RegisteredBackfillQuery
+import app.cash.backfila.service.persistence.ServiceQuery
+import javax.inject.Inject
+import misk.exceptions.BadRequestException
+import misk.hibernate.Query
+import misk.hibernate.Transacter
+import misk.hibernate.newQuery
+import misk.security.authz.Authenticated
+import misk.web.Get
+import misk.web.PathParam
+import misk.web.ResponseContentType
+import misk.web.actions.WebAction
+import misk.web.mediatype.MediaTypes
+
+data class GetBackfillNamesResponse(
+  val backfill_names: List<String>,
+)
+
+class GetBackfillNamesAction @Inject constructor(
+  @BackfilaDb private val transacter: Transacter,
+  private val queryFactory: Query.Factory,
+) : WebAction {
+  @Get("/services/{service}/variants/{variant}/backfill-names")
+  @ResponseContentType(MediaTypes.APPLICATION_JSON)
+  @Authenticated(allowAnyUser = true)
+  fun getBackfillNames(
+    @PathParam service: String,
+    @PathParam variant: String,
+  ): GetBackfillNamesResponse {
+    return transacter.transaction { session ->
+      val dbService = queryFactory.newQuery<ServiceQuery>()
+        .registryName(service)
+        .variant(variant)
+        .uniqueResult(session) ?: throw BadRequestException("`$service`-`$variant` doesn't exist")
+
+      val backfillNames = queryFactory.newQuery<RegisteredBackfillQuery>()
+        .serviceId(dbService.id)
+        .list(session)
+        .map { it.name }
+        .distinct()
+        .sorted()
+
+      GetBackfillNamesResponse(backfill_names = backfillNames)
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 package app.cash.backfila.ui
 
+import app.cash.backfila.dashboard.GetBackfillNamesAction
 import app.cash.backfila.ui.actions.BackfillCreateHandlerAction
 import app.cash.backfila.ui.actions.BackfillShowButtonHandlerAction
 import app.cash.backfila.ui.pages.BackfillCreateAction
@@ -28,6 +29,7 @@ class UiModule : KAbstractModule() {
     // Other
     install(WebActionModule.create<BackfillCreateHandlerAction>())
     install(WebActionModule.create<BackfillShowButtonHandlerAction>())
+    install(WebActionModule.create<GetBackfillNamesAction>())
   }
 }
 

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

@@ -0,0 +1,125 @@
+package app.cash.backfila.ui.components
+
+import kotlinx.html.ButtonType
+import kotlinx.html.InputType
+import kotlinx.html.TagConsumer
+import kotlinx.html.button
+import kotlinx.html.div
+import kotlinx.html.form
+import kotlinx.html.input
+import kotlinx.html.label
+import kotlinx.html.script
+import kotlinx.html.unsafe
+
+fun TagConsumer<*>.BackfillSearchForm(
+  backfillName: String? = null,
+  createdByUser: String? = null,
+  serviceName: String,
+  variantName: String,
+) {
+  div("px-4 sm:px-6 lg:px-8 py-4 bg-gray-50 border-b border-gray-200") {
+    form(classes = "flex flex-wrap gap-4 items-end") {
+      method = kotlinx.html.FormMethod.get
+      attributes["data-turbo-frame"] = "_top"
+
+      // Backfill Name Search with datalist (native autocomplete)
+      div("flex-1 min-w-0") {
+        label("block text-sm font-medium text-gray-700 mb-1") {
+          htmlFor = "backfill_name"
+          +"Backfill Name"
+        }
+        input(classes = "block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm") {
+          type = InputType.text
+          attributes["id"] = "backfill_name"
+          name = "backfill_name"
+          placeholder = "Type to search backfills..."
+          value = backfillName ?: ""
+          attributes["list"] = "backfill-names"
+          attributes["autocomplete"] = "off"
+        }
+        // Native HTML5 datalist for autocomplete (using unsafe HTML since datalist isn't in kotlinx.html)
+        unsafe {
+          +"""<datalist id="backfill-names"></datalist>"""
+        }
+      }
+
+      // Created By User Search
+      div("flex-1 min-w-0") {
+        label("block text-sm font-medium text-gray-700 mb-1") {
+          htmlFor = "created_by_user"
+          +"Created by"
+        }
+        input(classes = "block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm") {
+          type = InputType.text
+          attributes["id"] = "created_by_user"
+          name = "created_by_user"
+          placeholder = "test.user"
+          value = createdByUser ?: ""
+        }
+      }
+
+      // Search and Clear buttons
+      div("flex gap-2") {
+        button(classes = "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500") {
+          type = ButtonType.submit
+          +"FILTER"
+        }
+
+        button(classes = "inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500") {
+          type = ButtonType.button
+          attributes["id"] = "clear_filters_btn"
+          +"CLEAR FILTERS"
+        }
+      }
+    }
+
+    // JavaScript to populate datalist and handle clear filters
+    script {
+      unsafe {
+        +"""
+        function initBackfillForm() {
+          const datalist = document.getElementById('backfill-names');
+          const clearFiltersBtn = document.getElementById('clear_filters_btn');
+          
+          if (!datalist) return;
+          
+          // Fetch and populate backfill names
+          const url = '/services/$serviceName/variants/$variantName/backfill-names';
+          fetch(url)
+            .then(response => response.json())
+            .then(data => {
+              datalist.innerHTML = '';
+              if (data.backfill_names) {
+                data.backfill_names.forEach(name => {
+                  const option = document.createElement('option');
+                  option.value = name;
+                  datalist.appendChild(option);
+                });
+              }
+            })
+            .catch(err => console.error('Error loading backfill names:', err));
+          
+          // Clear filters button handler
+          if (clearFiltersBtn && !clearFiltersBtn.hasAttribute('data-initialized')) {
+            clearFiltersBtn.setAttribute('data-initialized', 'true');
+            clearFiltersBtn.addEventListener('click', function() {
+              let baseUrl = '/services/$serviceName';
+              if ('$variantName' !== 'default') {
+                baseUrl += '/$variantName';
+              }
+              window.location.href = baseUrl;
+            });
+          }
+        }
+        
+        // Run on page load
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initBackfillForm);
+        } else {
+          initBackfillForm();
+        }
+        """.trimIndent()
+      }
+    }
+  }
+}

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

@@ -211,11 +211,12 @@ class BackfillShowAction @Inject constructor(
                             if (it.isNaN()) 0.0 else it
                           }
                         +"""${String.format("%.1f", percentage)}%"""
-                      } else
-                        if (backfill.state == BackfillState.COMPLETE) {
-                        +"""Complete"""
                       } else {
-                        +"""Computing..."""
+                        if (backfill.state == BackfillState.COMPLETE) {
+                          +"""Complete"""
+                        } else {
+                          +"""Computing..."""
+                        }
                       }
                     }
                   }

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

@@ -2,6 +2,7 @@ package app.cash.backfila.ui.pages
 
 import app.cash.backfila.dashboard.GetBackfillRunsAction
 import app.cash.backfila.ui.components.AutoReload
+import app.cash.backfila.ui.components.BackfillSearchForm
 import app.cash.backfila.ui.components.BackfillsTable
 import app.cash.backfila.ui.components.DashboardPageLayout
 import app.cash.backfila.ui.components.PageTitle
@@ -47,6 +48,8 @@ class ServiceShowAction @Inject constructor(
     @QueryParam lastOffset: String? = null,
     @QueryParam history: String? = null,
     @QueryParam showDeleted: Boolean = false,
+    @QueryParam backfill_name: String? = null,
+    @QueryParam created_by_user: String? = null,
   ): Response<ResponseBody> {
     if (service.isNullOrBlank()) {
       return Response(
@@ -62,6 +65,8 @@ class ServiceShowAction @Inject constructor(
       variant = variant,
       pagination_token = offset,
       show_deleted = showDeleted,
+      backfill_name = backfill_name,
+      created_by_user = created_by_user,
     )
 
     // TODO show default if other variants and probably link to a switcher
@@ -73,18 +78,20 @@ class ServiceShowAction @Inject constructor(
         Link(label, path),
       )
       .buildHtmlResponseBody {
-        AutoReload(frameId = "backfill-$service-status") {
-          PageTitle("Service", label) {
-            a {
-              href = BackfillCreateServiceIndexAction.path(service, variantOrBlank)
+        PageTitle("Service", label) {
+          a {
+            href = BackfillCreateServiceIndexAction.path(service, variantOrBlank)
 
-              button(classes = "rounded-full bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600") {
-                type = ButtonType.button
-                +"""Create"""
-              }
+            button(classes = "rounded-full bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600") {
+              type = ButtonType.button
+              +"""Create"""
             }
           }
+        }
 
+        BackfillSearchForm(backfill_name, created_by_user, service, variant)
+
+        AutoReload(frameId = "backfill-$service-status") {
           BackfillsTable(true, backfillRuns.running_backfills)
           BackfillsTable(false, backfillRuns.paused_backfills, showDeleted)
           PaginationWithHistory(backfillRuns.next_pagination_token, offset, history, path(service, variantOrBlank))