Few UI Enhancements (#79)

- Add Install/Upgrade keywork dynamically on popup
- Sort Repo list alphabetically
- Sort CLuster list alphabetically

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

pkg/dashboard/static/actions.js

@@ -62,10 +62,12 @@ function popUpUpgrade(elm, ns, name, verCur, lastRev) {
     $("#upgradeModal .rel-cluster").text(getHashParam("context"))
 
     if (verCur) {
+        $("#upgradeModalLabel .type").text("Upgrade")
         $("#upgradeModal .ver-old").show().find("span").text(verCur)
         $("#upgradeModal .rel-name").prop("disabled", true).val(name)
         $("#upgradeModal .rel-ns").prop("disabled", true).val(ns)
     } else {
+        $("#upgradeModalLabel .type").text("Install")
         $("#upgradeModal .ver-old").hide()
         $("#upgradeModal .rel-name").prop("disabled", false).val(elm.name.split("/").pop())
         $("#upgradeModal .rel-ns").prop("disabled", false).val("")

pkg/dashboard/static/index.html

@@ -343,7 +343,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title" id="upgradeModalLabel">
-                    Install <b class='text-success name'></b>
+                    <span class="type"></span> <b class='text-success name'></b>
                 </h4>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>

pkg/dashboard/static/repo.js

@@ -6,7 +6,8 @@ function loadRepoView() {
         reportError("Failed to get list of repositories", xhr)
     }).done(function (data) {
         const items = $("#sectionRepo .repo-list ul").empty()
-
+        data.sort((a, b) => (a.name > b.name) - (a.name < b.name))
+        
         data.forEach(function (elm) {
             let opt = $('<li class="mb-2"><label><input type="radio" name="cluster" class="me-2"/><span></span></label></li>');
             opt.attr('title', elm.url)

pkg/dashboard/static/scripts.js

@@ -9,6 +9,7 @@ $(function () {
         reportError("Failed to get list of clusters", xhr)
     }).done(function (data) {
         const context = getHashParam("context")
+        data.sort((a, b) => (getCleanClusterName(a.Name) > getCleanClusterName(b.Name)) - (getCleanClusterName(a.Name) < getCleanClusterName(b.Name)))
         fillClusterList(data, context);
 
         initView(); // can only do it after loading cluster list