Values editing (#17)

* Refactorings * save * REdesigning install dialog * Display values editor * Reconfigure flow * Status handler and version * error reporting
2026-03-24 11:48:04 +00:00 · 2022-10-07 17:01:19 +01:00
parent 3c4d73665e
commit d8afa3861d
13 changed files with 239 additions and 103 deletions
--- a/pkg/dashboard/static/actions.js
+++ b/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 () {
--- a/pkg/dashboard/static/datadog.js
+++ b/pkg/dashboard/static/datadog.js
@@ -4,15 +4,22 @@
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
 })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v4.js','DD_RUM')
    DD_RUM.onReady(function() {
-    DD_RUM.init({
-        clientToken: 'pub16d64cd1c00cf073ce85af914333bf72',
-        applicationId: 'e75439e5-e1b3-46ba-a9e9-a2e58579a2e2',
-        site: 'datadoghq.com',
-        service: 'helm-dashboard',
-        version: 'v0.0.0',
-        trackInteractions: true,
-        trackResources: true,
-        trackLongTasks: true,
-        defaultPrivacyLevel: 'mask'
-    })
+        const xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState === XMLHttpRequest.DONE) {
+                DD_RUM.init({
+                    clientToken: 'pub16d64cd1c00cf073ce85af914333bf72',
+                    applicationId: 'e75439e5-e1b3-46ba-a9e9-a2e58579a2e2',
+                    site: 'datadoghq.com',
+                    service: 'helm-dashboard',
+                    version: xhr.responseText,
+                    trackInteractions: true,
+                    trackResources: true,
+                    trackLongTasks: true,
+                    defaultPrivacyLevel: 'mask'
+                })
+            }
+        }
+        xhr.open('GET', '/status', true);
+        xhr.send(null);
 })
--- a/pkg/dashboard/static/index.html
+++ b/pkg/dashboard/static/index.html
@@ -16,7 +16,18 @@
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>
    <link href="static/styles.css" rel="stylesheet">
    <script type="text/javascript">
-        window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
+        window.heap = window.heap || [], heap.load = function (e, t) {
+            window.heap.appid = e, window.heap.config = t = t || {};
+            var r = document.createElement("script");
+            r.type = "text/javascript", r.async = !0, r.src = "https://cdn.heapanalytics.com/js/heap-" + e + ".js";
+            var a = document.getElementsByTagName("script")[0];
+            a.parentNode.insertBefore(r, a);
+            for (var n = function (e) {
+                return function () {
+                    heap.push([e].concat(Array.prototype.slice.call(arguments, 0)))
+                }
+            }, p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "resetIdentity", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"], o = 0; o < p.length; o++) heap[p[o]] = n(p[o])
+        };
        heap.load("3615793373");
    </script>
 </head>
@@ -52,9 +63,11 @@
            </ul>
            <div>
                <a class="btn" href="https://komodor.com/?utm_campaign=Helm-Dash&utm_source=helm-dash"><img
-                        src="https://komodor.com/wp-content/uploads/2021/05/favicon.png" alt="komodor.io" style="height: 1.2rem; vertical-align: text-bottom; filter: grayscale(00%);"></a>
+                        src="https://komodor.com/wp-content/uploads/2021/05/favicon.png" alt="komodor.io"
+                        style="height: 1.2rem; vertical-align: text-bottom; filter: grayscale(00%);"></a>

-                <a class="btn me-2 text-muted" href="https://github.com/komodorio/helm-dashboard" title="Project page on GitHub"><i class="bi-github"></i></a>
+                <a class="btn me-2 text-muted" href="https://github.com/komodorio/helm-dashboard"
+                   title="Project page on GitHub"><i class="bi-github"></i></a>
            </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>
@@ -222,7 +235,7 @@


 <!-- Modals -->
-<div id="errorAlert"
+<div id="errorAlert" style="z-index: 2000"
     class="display-none alert alert-sm alert-danger alert-dismissible position-absolute position-absolute top-0 start-50 translate-middle-x mt-3 border-danger"
     role="alert">
    <h4 class="alert-heading"><i class="bi-exclamation-triangle-fill"></i> <span></span></h4>
@@ -268,15 +281,42 @@
    <div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header">
-                <h5 class="modal-title" id="upgradeModalLabel">
-                    Upgrade <b class='text-success name'></b> from version <b class='text-success ver-old'></b> to
-                    <select class='fw-bold text-success ver-new'></select>
-                </h5>
+                <h4 class="modal-title" id="upgradeModalLabel">
+                    Upgrade <b class='text-success name'></b>
+                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
-            <div class="modal-body" id="upgradeModalBody">
+            <form class="modal-body border-bottom fs-5" enctype="multipart/form-data">
+                <div class="input-group mb-3 text-muted">
+                    <label class="form-label me-4 text-dark">Version to install: <select
+                            class='fw-bold text-success ver-new'></select></label> (current version is <span
+                        class='text-success ver-old ms-1'>0.0.0</span>)
+                </div>
+                <div class="row">
+                    <div class="col-6 pe-3">
+                        <label class="form-label">User-Defined Values:</label>
+                    </div>
+                    <div class="col-6 ps-3">
+                        <label class="form-label">Chart Values Reference:</label>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-6 pe-3">
+                        <textarea name="values" class="form-control w-100 h-100" rows="5"></textarea>
+                    </div>
+                    <div class="col-6 ps-3">
+                        <pre class="ref-vals fs-6 w-100 bg-secondary p-2 rounded" style="max-height: 20rem"></pre>
+                    </div>
+                </div>

-            </div>
+                <div class="row">
+                    <div class="col-6 pe-3">
+                        <span class="invalid-feedback small mb-3"> (wrong YAML)</span>
+                    </div>
+                </div>
+                <label class="form-label mt-5">Manifest changes:</label>
+                <div id="upgradeModalBody" class="small"></div>
+            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-confirm">Confirm Upgrade</button>
            </div>
@@ -293,6 +333,9 @@
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdn.jsdelivr.net/npm/luxon@3.0.3/build/global/luxon.min.js"
        integrity="sha256-RH4TKnKcKyde0s2jc5BW3pXZl/5annY3fcZI9VrV5WQ=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"
+        integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="static/list-view.js"></script>
 <script src="static/revisions-view.js"></script>
 <script src="static/details-view.js"></script>
--- a/pkg/dashboard/static/scripts.js
+++ b/pkg/dashboard/static/scripts.js
@@ -22,6 +22,12 @@ $(function () {
 })


+const myAlert = document.getElementById('errorAlert')
+myAlert.addEventListener('close.bs.alert', event => {
+    event.preventDefault()
+    $("#errorAlert").hide()
+})
+
 function reportError(err, xhr) {
    $("#errorAlert h4 span").text(err)
    if (xhr) {