Allow filtering on repository charts list (#61)

Fixes #46

Co-authored-by: Harshit Mehta <harshitm@nvidia.com>

pkg/dashboard/static/actions.js

@@ -338,3 +338,17 @@ $("#btnAddRepository").click(function () {
     setHashParam("section", "repository")
     window.location.reload()
 })
+
+$("#inputSearch").keyup(function() {
+    var val = $(this).val().toLowerCase();
+
+    $(".charts li").hide()
+    
+    $(".charts li").each(function(){
+        var chartNameElem = this.firstElementChild
+        var chartName = $(chartNameElem).text().toLowerCase()
+        if(chartName.indexOf(val) != -1) {
+            $(this).show()
+        }
+    })
+})

pkg/dashboard/static/index.html

@@ -96,12 +96,9 @@
             <div class="mb-5">
                 <span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">URL: <span class="url fw-bold">http://somerepo/somepath</span></span>
             </div>
-
+            <div class="row py-2 mb-3">
-            <!-- TODO
+                <input class="form-control" type="text" placeholder="Search..." id="inputSearch">
-            <div class="float-end">
-                   <input class="form-control form-control-sm" type="text" placeholder="Filter...">
             </div>
-            -->
             <div class="row bg-secondary rounded px-3 py-2 mb-3 fw-bold small"
                  style="text-transform: uppercase">
                 <div class="col-3">Chart Name</div>
@@ -109,7 +106,7 @@
                 <div class="col-1">Version</div>
                 <div class="col-1"></div>
             </div>
-            <ul class="list-unstyled mt-4"></ul>
+            <ul class="list-unstyled mt-4 charts"></ul>
         </div>
     </div>
 

pkg/dashboard/static/repo.js

@@ -20,6 +20,7 @@ function loadRepoView() {
         }
 
         items.find("input").click(function () {
+            $("#inputSearch").val('')
             const self = $(this)
             const elm = self.data("item");
             setHashParam("repo", elm.name)