Add links to Komodor

pkg/dashboard/handlers/helmHandlers.go

@@ -250,7 +250,6 @@ func (h *HelmHandler) RepoCharts(c *gin.Context) {
 		return
 	}
 
-	// TODO: enrich with installed
 	enrichRepoChartsWithInstalled(charts, installed)
 
 	sort.Slice(charts, func(i, j int) bool {
@@ -580,18 +579,30 @@ func (h *HelmHandler) repoFromArtifactHub(name string) (string, error) {
 	}
 
 	sort.SliceStable(results, func(i, j int) bool {
+		ri, rj := results[i], results[j]
+
 		// we prefer official repos
-		if results[i].Repository.Official && !results[j].Repository.Official {
+		if ri.Repository.Official && !rj.Repository.Official {
 			return true
 		}
 
 		// or from verified publishers
-		if results[i].Repository.VerifiedPublisher && !results[j].Repository.VerifiedPublisher {
+		if ri.Repository.VerifiedPublisher && !rj.Repository.VerifiedPublisher {
 			return true
 		}
 
 		// or just more popular
-		return results[i].Stars > results[j].Stars
+		if ri.Stars > rj.Stars {
+			return true
+		}
+
+		// or with more recent app version
+
+		if semver.Compare("v"+ri.AppVersion, "v"+rj.AppVersion) > 0 {
+			return true
+		}
+
+		return false
 	})
 
 	r := results[0]

pkg/dashboard/static/details-view.js

@@ -196,7 +196,7 @@ function showResources(namespace, chart, revision) {
                 const statusBlock = resBlock.find(".res-status");
                 statusBlock.empty().append(badge).attr("title", data.status.phase)
                 const statusMessage = getStatusMessage(data.status)
-                resBlock.find(".res-statusmsg").html("<span class='text-muted small'>" + (statusMessage ? statusMessage : '') + "</span>")
+                resBlock.find(".res-statusmsg").html("<span class='text-muted small me-2'>" + (statusMessage ? statusMessage : '') + "</span>")
 
                 if (badge.text() !== "NotFound" && revision == $("#specRev").data("last-rev")) {
                     resBlock.find(".res-actions")
@@ -215,6 +215,10 @@ function showResources(namespace, chart, revision) {
                         })
                     }
                 }
+
+                if (badge.hasClass("bg-danger")) {
+                    resBlock.find(".res-statusmsg").append("<a href='" + KomodorCTALink + "' class='btn btn-primary btn-sm fw-normal fs-80' target='_blank'>Troubleshoot in Komodor <i class='bi-box-arrow-up-right'></i></a>")
+                }
             })
         }
     })

pkg/dashboard/static/index.html

@@ -69,9 +69,15 @@
                     </a></li>
             </ul>
             <div>
-                <a class="btn" href="https://komodor.com/?utm_campaign=Helm-Dash&utm_source=helm-dash"><img
-                        src="static/komodor-logo.svg" alt="komodor.io"
-                        style="height: 1.2rem; vertical-align: text-bottom; filter: grayscale(00%);"></a>
+                <div class="border-muted text-muted border rounded p-1 pe-2 me-3 d-flex">
+                    <img alt="Komodor" src="./static/komodor-icon.png" class="me-2" style="width: 42px; height: 42px"/>
+                    <span class="text-nowrap">
+                        <a href="https://www.komodor.com/helm-dash/?utm_campaign=Helm%20Dashboard%20%7C%20CTA&utm_source=helm-dash&utm_medium=cta&utm_content=helm-dash"
+                           class="link text-primary fw-bold text-decoration-none">Upgrade your HELM experience - Free
+                            <i class="bi-box-arrow-up-right ms-1"></i></a><br/>
+                        Auth & RBAC, k8s events, troubleshooting and more
+                    </span>
+                </div>
             </div>
             <div class="separator-vertical"><span></span></div>
             <i class="btn bi-power text-muted p-2 m-1 mx-2" title="Shut down the Helm Dashboard application"></i>
@@ -89,7 +95,9 @@
                 <button class="btn btn-sm border-secondary text-muted">
                     <i class="bi-plus-lg"></i> Add Repository
                 </button>
-                <div class="mt-2 p-2 small">Charts developers: you can also add local directories as chart source. Use <span class="font-monospace text-success">--local-chart</span> CLI switch to specify it.</div>
+                <div class="mt-2 p-2 small">Charts developers: you can also add local directories as chart source. Use
+                    <span class="font-monospace text-success">--local-chart</span> CLI switch to specify it.
+                </div>
             </div>
         </div>
         <div class="col-9 repo-details bg-white b-shadow pt-4 px-5 overflow-auto rounded">
@@ -305,6 +313,8 @@
     <hr>
     <p style="white-space: pre-wrap"></p>
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    <hr/>
+    <span class="small text-muted fs-80">Hint: Komodor has the same HELM capabilities, with enterprise features and support. <a href="https://www.komodor.com/helm-dash/?utm_campaign=Helm%20Dashboard%20%7C%20CTA&utm_source=helm-dash&utm_medium=cta&utm_content=helm-dash" target="_blank">Sign up for free.</a></span>
 </div>
 
 <div class="offcanvas offcanvas-end rounded-start" tabindex="-1" id="describeModal"
@@ -314,8 +324,12 @@
             <h5 id="describeModalLabel"></h5>
             <p class="m-0 mt-4">ResourceType</p>
         </div>
-        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-
+        <div>
+            <a href='https://www.komodor.com/helm-dash/?utm_campaign=Helm%20Dashboard%20%7C%20CTA&utm_source=helm-dash&utm_medium=cta&utm_content=helm-dash'
+               class='btn btn-primary btn-sm me-2' target='_blank'>See more details in Komodor <i
+                    class='bi-box-arrow-up-right'></i></a>
+            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
     </div>
     <div class="offcanvas-body p-2 ps-4" id="describeModalBody">
     </div>

pkg/dashboard/static/list-view.js

@@ -89,13 +89,17 @@ function buildChartCard(elm) {
         }
 
         if (isNewerVersion(elm.chartVersion, data[0].version)) {
-            const icon = $("<span class='ms-2 text-success' title='Upgrade available: " + data[0].version + " from " + data[0].repository + "'></span>")
+            const icon = $("<span class='ms-2 text-success' data-bs-toggle='tooltip' data-bs-placement='bottom' data-bs-title='Upgrade available: " + data[0].version + " from " + data[0].repository + "'></span>")
             if (data[0].isSuggestedRepo) {
                 icon.addClass("bi-arrow-up-circle")
             } else {
                 icon.addClass("bi-arrow-up-circle-fill")
             }
             card.find(".rel-name span").append(icon)
+
+            const tooltipTriggerList = card.find('[data-bs-toggle="tooltip"]')
+            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+            sendStats('upgradeIconShown', {'isProbable': data[0].isSuggestedRepo})
         }
     })
 

pkg/dashboard/static/scripts.js

@@ -357,3 +357,5 @@ function setFilteredNamespaces(filteredNamespaces) {
         setHashParam("filteredNamespace", filteredNamespaces.join('+'))
     }
 }
+
+const KomodorCTALink="https://www.komodor.com/helm-dash/?utm_campaign=Helm%20Dashboard%20%7C%20CTA&utm_source=helm-dash&utm_medium=cta&utm_content=helm-dash"