Values editing (#17)

* Refactorings

* save

* REdesigning install dialog

* Display values editor

* Reconfigure flow

* Status handler and version

* error reporting

pkg/dashboard/static/actions.js

@@ -4,7 +4,7 @@ $("#btnUpgradeCheck").click(function () {
     self.find(".spinner-border").show()
     const repoName = self.data("repo")
     $("#btnUpgrade span").text("Checking...")
-    $("#btnUpgrade .icon").removeClass("bi-arrow-up bi-check-circle").addClass("bi-hourglass-split")
+    $("#btnUpgrade .icon").removeClass("bi-arrow-up bi-pencil").addClass("bi-hourglass")
     $.post("/api/helm/repo/update?name=" + repoName).fail(function (xhr) {
         reportError("Failed to update chart repo", xhr)
     }).done(function () {
@@ -29,24 +29,30 @@ function checkUpgradeable(name) {
             return
         }
 
-        $('#upgradeModalLabel select').empty()
+        const verCur = $("#specRev").data("last-chart-ver");
+        $('#upgradeModal select').empty()
         for (let i = 0; i < data.length; i++) {
-            $('#upgradeModalLabel select').append("<option value='" + data[i].version + "'>" + data[i].version + "</option>")
+            const opt = $("<option value='" + data[i].version + "'></option>");
+            if (data[i].version === verCur) {
+                opt.html(data[i].version + " &middot;")
+            } else {
+                opt.html(data[i].version)
+            }
+            $('#upgradeModal select').append(opt)
         }
 
         const elm = data[0]
         $("#btnUpgradeCheck").data("repo", elm.name.split('/').shift())
         $("#btnUpgradeCheck").data("chart", elm.name.split('/').pop())
 
-        const verCur = $("#specRev").data("last-chart-ver");
         const canUpgrade = isNewerVersion(verCur, elm.version);
         $("#btnUpgradeCheck").prop("disabled", false)
         if (canUpgrade) {
             $("#btnUpgrade span").text("Upgrade to " + elm.version)
             $("#btnUpgrade .icon").removeClass("bi-hourglass-split").addClass("bi-arrow-up")
         } else {
-            $("#btnUpgrade span").text("Up-to-date")
-            $("#btnUpgrade .icon").removeClass("bi-hourglass-split").addClass("bi-check-circle")
+            $("#btnUpgrade span").text("Reconfigure")
+            $("#btnUpgrade .icon").removeClass("bi-hourglass-split").addClass("bi-pencil")
         }
 
         $("#btnUpgrade").off("click").click(function () {
@@ -58,12 +64,12 @@ function checkUpgradeable(name) {
 function popUpUpgrade(self, verCur, elm) {
     const name = getHashParam("chart");
     let url = "/api/helm/charts/install?namespace=" + getHashParam("namespace") + "&name=" + name + "&chart=" + elm.name;
-    $('#upgradeModalLabel select').data("url", url)
+    $('#upgradeModal select').data("url", url).data("chart", elm.name)
 
     $("#upgradeModalLabel .name").text(name)
-    $("#upgradeModalLabel .ver-old").text(verCur)
+    $("#upgradeModal .ver-old").text(verCur)
 
-    $('#upgradeModalLabel select').val(elm.version).trigger("change")
+    $('#upgradeModal select').val(elm.version).trigger("change")
 
     const myModal = new bootstrap.Modal(document.getElementById('upgradeModal'), {});
     myModal.show()
@@ -72,26 +78,86 @@ function popUpUpgrade(self, verCur, elm) {
     btnConfirm.prop("disabled", true).off('click').click(function () {
         btnConfirm.prop("disabled", true).prepend('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>')
         $.ajax({
-            url: url + "&version=" + $('#upgradeModalLabel select').val(),
             type: 'POST',
+            url: url + "&version=" + $('#upgradeModal select').val() + "&flag=true",
+            data: $("#upgradeModal textarea").data("dirty") ? $("#upgradeModal form").serialize() : null,
         }).fail(function (xhr) {
             reportError("Failed to upgrade the chart", xhr)
         }).done(function (data) {
-            setHashParam("revision", data.version)
-            window.location.reload()
+            console.log(data)
+            if (data.version) {
+                setHashParam("revision", data.version)
+                window.location.reload()
+            } else {
+                reportError("Failed to get new revision number")
+            }
         })
     })
+
+    // fill current values
+    const lastRev = $("#specRev").data("last-rev")
+    $.get("/api/helm/charts/values?namespace=" + getHashParam("namespace") + "&revision=" + lastRev + "&name=" + getHashParam("chart") + "&flag=true").fail(function (xhr) {
+        reportError("Failed to get charts values info", xhr)
+    }).done(function (data) {
+        $("#upgradeModal textarea").val(data).data("dirty", false)
+    })
 }
 
-$('#upgradeModalLabel select').change(function () {
+let reconfigTimeout = null;
+$("#upgradeModal textarea").keyup(function () {
+    const self = $(this);
+    self.data("dirty", true)
+    if (reconfigTimeout) {
+        window.clearTimeout(reconfigTimeout)
+    }
+    reconfigTimeout = window.setTimeout(function () {
+        requestChangeDiff()
+    }, 500)
+})
+
+$('#upgradeModal select').change(function () {
     const self = $(this)
 
-    $("#upgradeModalBody").empty().append('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>')
-    $("#upgradeModal .btn-confirm").prop("disabled", true)
-    $.get(self.data("url") + "&version=" + self.val()).fail(function (xhr) {
+    requestChangeDiff()
+
+    // fill reference values
+    $("#upgradeModal .ref-vals").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>')
+    $.get("/api/helm/repo/values?chart=" + self.data("chart") + "&version=" + self.val()).fail(function (xhr) {
         reportError("Failed to get upgrade info", xhr)
     }).done(function (data) {
-        $("#upgradeModalBody").empty();
+        data = hljs.highlight(data, {language: 'yaml'}).value
+        $("#upgradeModal .ref-vals").html(data)
+    })
+})
+
+function requestChangeDiff() {
+    const self = $('#upgradeModal select');
+    const diffBody = $("#upgradeModalBody");
+    diffBody.empty().append('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Calculating diff...')
+    $("#upgradeModal .btn-confirm").prop("disabled", true)
+
+    let values = null;
+    if ($("#upgradeModal textarea").data("dirty")) {
+        $("#upgradeModal .invalid-feedback").hide()
+        values = $("#upgradeModal form").serialize()
+        
+        try {
+            jsyaml.load($("#upgradeModal textarea").val())
+        } catch (e) {
+            $("#upgradeModal .invalid-feedback").text("YAML parse error: "+e.message).show()
+            $("#upgradeModalBody").html("Invalid values YAML")
+            return
+        }
+    }
+
+    $.ajax({
+        type: "POST",
+        url: self.data("url") + "&version=" + self.val(),
+        data: values,
+    }).fail(function (xhr) {
+        $("#upgradeModalBody").html("<p class='text-danger'>Failed to get upgrade info:     "+ xhr.responseText+"</p>")
+    }).done(function (data) {
+        diffBody.empty();
         $("#upgradeModal .btn-confirm").prop("disabled", false)
 
         const targetElement = document.getElementById('upgradeModalBody');
@@ -101,12 +167,11 @@ $('#upgradeModalLabel select').change(function () {
         };
         const diff2htmlUi = new Diff2HtmlUI(targetElement, data, configuration);
         diff2htmlUi.draw()
-        $("#upgradeModalBody").prepend("<p>Following changes will happen to cluster:</p>")
         if (!data) {
-            $("#upgradeModalBody").html("No changes will happen to cluster")
+            diffBody.html("No changes will happen to the cluster")
         }
     })
-})
+}
 
 const btnConfirm = $("#confirmModal .btn-confirm");
 $("#btnUninstall").click(function () {