Merge pull request #236 from moov-io/file-filter-pattern

webui: basic exact pattern filtering when listing files

go.mod

@@ -46,7 +46,6 @@ require (
 	github.com/go-logr/stdr v1.2.2 // indirect
 	github.com/gobuffalo/here v0.6.7 // indirect
 	github.com/golang/groupcache v0.0.0-20210331224755-41bb18bfe9da // indirect
-	github.com/golang/protobuf v1.5.4 // indirect
 	github.com/google/s2a-go v0.1.8 // indirect
 	github.com/google/uuid v1.6.0 // indirect
 	github.com/google/wire v0.6.0 // indirect

package.go

@@ -12,5 +12,6 @@ var _ = pkger.Include("/configs/config.default.yml")
 
 // Load our HTML templates
 var _ = pkger.Include("/webui/style.css")
+var _ = pkger.Include("/webui/index.js")
 var _ = pkger.Include("/webui/index.html.tpl")
 var _ = pkger.Include("/webui/file.html.tpl")

pkg/filelist/list.go

@@ -2,6 +2,8 @@ package filelist
 
 import (
 	"fmt"
+	"slices"
+	"strings"
 	"time"
 
 	"github.com/moov-io/ach"
@@ -40,11 +42,26 @@ func (ls Listers) GetFiles(opts ListOpts) (map[string]Files, error) {
 		if err != nil {
 			return out, err
 		}
-		out[ls[i].SourceID()] = files
+		out[ls[i].SourceID()] = filterFilesByPattern(opts, files)
 	}
 	return out, nil
 }
 
+func filterFilesByPattern(opts ListOpts, files Files) Files {
+	if opts.Pattern == "" {
+		return files
+	}
+
+	pattern := strings.ToLower(opts.Pattern)
+
+	files.Files = slices.DeleteFunc(files.Files, func(f File) bool {
+		// Keep what the files contain the pattern
+		return !strings.Contains(strings.ToLower(f.Name), pattern)
+	})
+
+	return files
+}
+
 func NewListers(ss service.Sources) (Listers, error) {
 	var out Listers
 	for i := range ss {

pkg/filelist/options.go

@@ -8,6 +8,7 @@ import (
 
 type ListOpts struct {
 	StartDate, EndDate time.Time
+	Pattern            string
 }
 
 func (opts ListOpts) Inside(when time.Time) bool {
@@ -47,5 +48,7 @@ func ReadListOptions(r *http.Request) (ListOpts, error) {
 		}
 	}
 
+	opts.Pattern = qry.Get("pattern")
+
 	return opts, nil
 }

pkg/web/web.go

@@ -28,7 +28,11 @@ func AppendRoutes(env *service.Environment, listers filelist.Listers, basePath s
 
 	dir, _ := pkger.Open("/webui/")
 	if dir != nil {
-		env.PublicRouter.Methods("GET").Path("/style.css").Handler(http.StripPrefix(basePath, http.FileServer(dir)))
+		assets := []string{"/index.js", "/style.css"}
+
+		for _, asset := range assets {
+			env.PublicRouter.Methods("GET").Path(asset).Handler(http.StripPrefix(basePath, http.FileServer(dir)))
+		}
 	}
 }
 

webui/index.html.tpl

@@ -15,6 +15,11 @@
       <h1>ACH file viewer</h1>
     </header>
     <main class="list">
+      <form id="filter">
+        <label for="filename">Filename: </label>
+        <input id="filename" type="text" placeholder="Filter filenames..." autofocus="true" />
+      </form>
+
       {{ range $source := .Sources }}
         <div class="source"><strong>{{ $source.ID }}</strong> ({{ $source.Type }})</div>
         {{ range $group := $source.Groups }}
@@ -39,5 +44,7 @@
         <a href="{{ endDateParam .Options.TimeRangeMax }}">Next -></a>
       </nav>
     </main>
+
+    <script src="{{ .BaseURL }}index.js"></script>
   </body>
 </html>

webui/index.js

@@ -0,0 +1,32 @@
+window.onload = function() {
+  // Register a handler on the filter form
+  var form = document.querySelector("#filter");
+  form.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+
+      var filenameElm = document.querySelector("#filename");
+      filterFileListing(filenameElm.value);
+    }
+  });
+
+  // Populate the filter with any current pattern from the URL
+  populateCurrentPatternForm();
+};
+
+function filterFileListing(pattern) {
+  const url = new URL(window.location.href);
+  url.searchParams.set("pattern", pattern);
+
+  window.location.href = url.toString(); // redirect
+}
+
+function populateCurrentPatternForm() {
+  const url = new URL(window.location.href);
+
+  const currentPattern = url.searchParams.get("pattern");
+  if (currentPattern) {
+    var filenameElm = document.querySelector("#filename");
+    filenameElm.value = currentPattern;
+  }
+}

webui/style.css

@@ -150,3 +150,20 @@ main {
 .metadata-key {
     font-weight: bold;
 }
+
+form#filter {
+    margin-bottom: 20px;
+}
+
+label[for="filename"] {
+    color: var(--title-color);
+    font-size: 1.2rem;
+    font-weight: bold;
+    padding-right: 20px;
+}
+
+input#filename {
+    background-color: var(--title-color);
+    min-height: 2rem;
+    width: 60%;
+}