Improve resource scanning flow (#68)

* List supported resources for scanners

* Don't warn on scanner discovery commands

* Use scanner-to-resource map

* Save changes

* Scan result tabs

* Own table render for Checkov

* Scannable manifest flag for scanners

pkg/dashboard/static/actions.js

@@ -350,17 +350,3 @@ $("#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/details-view.js

@@ -150,6 +150,12 @@ function showResources(namespace, chart, revision) {
     $.getJSON(url).fail(function (xhr) {
         reportError("Failed to get list of resources", xhr)
     }).done(function (data) {
+        const scanners = $("body").data("scanners");
+        const scannableResKinds = new Set();
+        for (let k in scanners) {
+            scanners[k].SupportedResourceKinds.forEach(scannableResKinds.add, scannableResKinds)
+        }
+
         resBody.empty();
         for (let i = 0; i < data.length; i++) {
             const res = data[i]
@@ -159,7 +165,7 @@ function showResources(namespace, chart, revision) {
                         <div class="col-3 res-name text-break fw-bold"></div>
                         <div class="col-1 res-status overflow-hidden"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
                         <div class="col-4 res-statusmsg"><span class="text-muted small">Getting status...</span></div>
-                        <div class="col-2 res-actions"></div>
+                        <div class="col-2 res-actions"><button class='btn btn-sm ms-2 visually-hidden'>Vertical-sizer</button></div>
                     </div>
             `)
 
@@ -195,11 +201,13 @@ function showResources(namespace, chart, revision) {
                         showDescribe(ns, res.kind, res.metadata.name, badge.clone())
                     })
 
-                    const btn2 = $("<button class='btn btn-sm btn-white border-secondary ms-2'>Scan</button>");
-                    resBlock.find(".res-actions").append(btn2)
-                    btn2.click(function () {
-                        scanResource(ns, res.kind, res.metadata.name, badge.clone())
-                    })
+                    if (scannableResKinds.has(res.kind)) {
+                        const btn2 = $("<button class='btn btn-sm btn-white border-secondary ms-2'>Scan</button>");
+                        resBlock.find(".res-actions").append(btn2)
+                        btn2.click(function () {
+                            scanResource(ns, res.kind, res.metadata.name, badge.clone())
+                        })
+                    }
                 }
             })
         }
@@ -237,25 +245,36 @@ function scanResource(ns, kind, name, badge) {
             body.append("No information from scanners. Make sure you have installed some and scanned object is supported.")
         }
 
+        const tabs = $('<ul class="nav nav-tabs mt-3" role="tablist"></ul>')
+        const content = $('<div class="tab-content"></div>')
+
         for (let name in data) {
             const res = data[name]
 
-            if (!res.OrigReport) continue
-            const hdr = $("<h3>" + name + " Scan Results</h3>");
+            if (!res.OrigReport && !res.PassedCount) continue
+
+            const hdr = $(`<li class="nav-item" role="presentation">
+                <button class="nav-link" id="` + name + `-tab" data-bs-toggle="tab" data-bs-target="#` + name + `-tab-pane" type="button" role="tab">` + name + `</button>
+              </li>`)
 
             if (res.FailedCount) {
-                hdr.append("<span class='badge bg-danger ms-3'>" + res.FailedCount + " failed</span>")
+                hdr.find('button').append("<span class='badge bg-danger ms-2'>" + res.FailedCount + " failed</span>")
             }
 
             if (res.PassedCount) {
-                hdr.append("<span class='badge bg-info ms-3'>" + res.PassedCount + " passed</span>")
+                hdr.find('button').append("<span class='badge bg-info ms-2'>" + res.PassedCount + " passed</span>")
             }
 
-            body.append(hdr)
-
             const hl = hljs.highlight(res.OrigReport, {language: 'yaml'}).value
             const pre = $("<pre class='bg-white rounded p-3' style='font-size: inherit; overflow: unset'></pre>").html(hl)
-            body.append(pre)
+            const div = $('<div class="tab-pane fade" id="' + name + '-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"></div>').append(pre)
+
+            tabs.append(hdr)
+            content.append(div)
         }
+
+        body.append(tabs)
+        body.append(content)
+        tabs.find('li').first().find('button').click()
     })
 }

pkg/dashboard/static/index.html

@@ -90,14 +90,15 @@
                 <button class="btn btn-sm btn-light bg-white border border-secondary btn-remove">
                     <i class="bi-trash3"></i> Remove
                 </button>
+                <p class="my-3"><input class="form-control form-control-sm" type="text" placeholder="Filter..." id="inputSearch"></p>
             </div>
             <div><span class="text-muted small fw-bold me-3">REPOSITORY</span></div>
             <h2 class="mb-3">name-of-repo</h2>
             <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">
-                <input class="form-control" type="text" placeholder="Search..." id="inputSearch">
+            <div class="py-2 mb-3 float-end">
+
             </div>
             <div class="row bg-secondary rounded px-3 py-2 mb-3 fw-bold small"
                  style="text-transform: uppercase">
@@ -390,7 +391,7 @@
                 <div id="upgradeModalBody" class="small"></div>
             </form>
             <div class="modal-footer d-flex">
-                <button type="button" class="btn btn-scan bg-white border-secondary">Scan for Problems</button>
+                <button type="button" class="btn btn-scan bg-white border-secondary display-none">Scan for Problems</button>
                 <button type="button" class="btn btn-primary btn-confirm">Confirm</button>
             </div>
         </div>

pkg/dashboard/static/repo.js

@@ -62,6 +62,19 @@ function loadRepoView() {
     })
 }
 
+$("#inputSearch").keyup(function () {
+    let val = $(this).val().toLowerCase();
+
+    $(".charts li").each(function () {
+        let chartName = $(this.firstElementChild).text().toLowerCase()
+        if (chartName.indexOf(val) >= 0) {
+            $(this).show()
+        } else {
+            $(this).hide()
+        }
+    })
+})
+
 $("#sectionRepo .repo-list .btn").click(function () {
     const myModal = new bootstrap.Modal(document.getElementById('repoAddModal'), {});
     myModal.show()

pkg/dashboard/static/scripts.js

@@ -17,8 +17,11 @@ $(function () {
     $.getJSON("/api/scanners").fail(function (xhr) {
         reportError("Failed to get list of scanners", xhr)
     }).done(function (data) {
-        if (!data || !data.length) {
-            $("#upgradeModal .btn-scan").hide()
+        $("body").data("scanners", data)
+        for (let k in data) {
+            if (data[k].ManifestScannable) {
+                $("#upgradeModal .btn-scan").show() // TODO: move this to install flow
+            }
         }
     })
 

pkg/dashboard/static/styles.css

@@ -26,10 +26,6 @@ body > .container-fluid {
     min-height: 100% !important;
 }
 
-#topNav.navbar {
-}
-
-
 .navbar-brand > a > img {
     vertical-align: middle;
     height: 3rem;
@@ -211,17 +207,17 @@ span.link {
     position: static;
 }
 
-.nav-tabs {
+nav .nav-tabs {
     border: none;
     margin-bottom: 1rem;
 }
 
-.nav-tabs .nav-link {
+nav .nav-tabs .nav-link {
     padding-bottom: 0.25rem;
     color: #3B3D45;
 }
 
-.nav-tabs .nav-link.active {
+nav .nav-tabs .nav-link.active {
     border: none;
     border-bottom: 3px solid #3B3D45;
     background-color: transparent;