From 1e3a7066986a25bec7fe6755fdb87fd1331bf5d3 Mon Sep 17 00:00:00 2001 From: Andrey Pokhilko Date: Sun, 2 Oct 2022 11:50:28 +0100 Subject: [PATCH] Restyle fixes (#14) * Applying style fixes * Implement more notes * Improvements * Applying v2 design * flyout restyle * fix spec rev * Status icons * Restyle top line and footer * Shorter err msg --- README.md | 4 +- pkg/dashboard/data.go | 24 +++- pkg/dashboard/static/action.svg | 4 - pkg/dashboard/static/actions.js | 18 ++- pkg/dashboard/static/details-view.js | 39 ++++--- pkg/dashboard/static/index.html | 151 +++++++++++++------------ pkg/dashboard/static/komodor-logo.svg | 22 ++-- pkg/dashboard/static/list-view.js | 1 + pkg/dashboard/static/revisions-view.js | 10 +- pkg/dashboard/static/styles.css | 127 +++++++++++++++------ 10 files changed, 250 insertions(+), 150 deletions(-) delete mode 100644 pkg/dashboard/static/action.svg diff --git a/README.md b/README.md index b1c26fe..e511990 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ A simplified way of working with Helm. The _Helm Dashboard_ plugin offers a UI-driven way to view the installed Helm charts, see their revision history and corresponding k8s resources. Also, you can perform simple actions like roll back to a revision or upgrade to newer version. -This project is part of [Komodor's](https://komodor.io) vision of helping Kubernetes users to navigate and troubleshoot their clusters. +This project is part of [Komodor's](https://komodor.com/?utm_campaign=Helm-Dash&utm_source=helm-dash-gh) vision of helping Kubernetes users to navigate and troubleshoot their clusters. ## Installing @@ -50,7 +50,7 @@ If you want to increase the logging verbosity and see all the debug info, set `D ## Support Channels -We have two main channels for supporting the Helm Dashboard users: [Slack community](https://komodorkommunity.slack.com/x-p3820586794880-3937175868755-4092688791734/archives/C042U85BD45/p1663573506220839) for general conversations +We have two main channels for supporting the Helm Dashboard users: [Slack community](https://komodorkommunity.slack.com/archives/C044U1B0265) for general conversations and [GitHub issues](https://github.com/komodorio/helm-dashboard/issues) for real bugs. diff --git a/pkg/dashboard/data.go b/pkg/dashboard/data.go index 3a92971..7b8b0ab 100644 --- a/pkg/dashboard/data.go +++ b/pkg/dashboard/data.go @@ -21,6 +21,17 @@ import ( "time" ) +type CmdError struct { + Command []string + OrigError error + StdErr []byte +} + +func (e CmdError) Error() string { + //return fmt.Sprintf("failed to run command %s:\nError: %s\nSTDERR:%s", e.Command, e.OrigError, e.StdErr) + return string(e.StdErr) +} + type DataLayer struct { KubeContext string Helm string @@ -46,9 +57,18 @@ func (d *DataLayer) runCommand(cmd ...string) (string, error) { log.Warnf("STDERR:\n%s", serr) } if eerr, ok := err.(*exec.ExitError); ok { - return "", fmt.Errorf("failed to run command %s:\nError: %s\nSTDERR:%s", cmd, eerr, serr) + return "", CmdError{ + Command: cmd, + StdErr: serr, + OrigError: eerr, + } + } + + return "", CmdError{ + Command: cmd, + StdErr: serr, + OrigError: err, } - return "", err } sout := stdout.Bytes() diff --git a/pkg/dashboard/static/action.svg b/pkg/dashboard/static/action.svg deleted file mode 100644 index 7146f30..0000000 --- a/pkg/dashboard/static/action.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/pkg/dashboard/static/actions.js b/pkg/dashboard/static/actions.js index 488a642..ffb2d0d 100644 --- a/pkg/dashboard/static/actions.js +++ b/pkg/dashboard/static/actions.js @@ -4,6 +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") $.post("/api/helm/repo/update?name=" + repoName).fail(function (xhr) { reportError("Failed to update chart repo", xhr) }).done(function () { @@ -20,7 +21,11 @@ function checkUpgradeable(name) { $.getJSON("/api/helm/repo/search?name=" + name).fail(function (xhr) { reportError("Failed to find chart in repo", xhr) }).done(function (data) { - if (!data) { + if (!data || !data.length) { + $("#btnUpgrade span").text("No upgrades") + $("#btnUpgrade .icon").removeClass("bi-hourglass-split").addClass("bi-x-octagon") + $("#btnUpgrade").prop("disabled", true) + $("#btnUpgradeCheck").prop("disabled", true) return } @@ -38,8 +43,10 @@ function checkUpgradeable(name) { $("#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("No upgrades") + $("#btnUpgrade span").text("Up-to-date") + $("#btnUpgrade .icon").removeClass("bi-hourglass-split").addClass("bi-check-circle") } $("#btnUpgrade").off("click").click(function () { @@ -58,12 +65,11 @@ function popUpUpgrade(self, verCur, elm) { $('#upgradeModalLabel select').val(elm.version).trigger("change") - const myModal = new bootstrap.Offcanvas(document.getElementById('upgradeModal'), {}); + const myModal = new bootstrap.Modal(document.getElementById('upgradeModal'), {}); myModal.show() const btnConfirm = $("#upgradeModal .btn-confirm"); btnConfirm.prop("disabled", true).off('click').click(function () { - console.log("working") btnConfirm.prop("disabled", true).prepend('') $.ajax({ url: url + "&version=" + $('#upgradeModalLabel select').val(), @@ -122,7 +128,7 @@ $("#btnUninstall").click(function () { }) }) - const myModal = new bootstrap.Offcanvas(document.getElementById('confirmModal')); + const myModal = new bootstrap.Modal(document.getElementById('confirmModal')); myModal.show() let qstr = "name=" + chart + "&namespace=" + namespace + "&revision=" + revision @@ -160,7 +166,7 @@ $("#btnRollback").click(function () { }) }) - const myModal = new bootstrap.Offcanvas(document.getElementById('confirmModal'), {}); + const myModal = new bootstrap.Modal(document.getElementById('confirmModal'), {}); myModal.show() let qstr = "name=" + chart + "&namespace=" + namespace + "&revision=" + revisionNew + "&revisionDiff=" + revisionCur diff --git a/pkg/dashboard/static/details-view.js b/pkg/dashboard/static/details-view.js index dc81b38..4c24a02 100644 --- a/pkg/dashboard/static/details-view.js +++ b/pkg/dashboard/static/details-view.js @@ -5,10 +5,11 @@ function revisionClicked(namespace, name, self) { self.removeClass(inactive).addClass(active) const elm = self.data("elm") setHashParam("revision", elm.revision) - $("#sectionDetails span.rev").text("#"+elm.revision) + $("#sectionDetails span.rev").text("#" + elm.revision) statusStyle(elm.status, $("#none"), $("#sectionDetails .rev-details .rev-status")) - $("#sectionDetails .rev-date").text(elm.updated.replace("T", " ").replace("+", " +")) + const rdate = luxon.DateTime.fromISO(elm.updated); + $("#sectionDetails .rev-date").text(rdate.toJSDate().toLocaleString()) $("#sectionDetails .rev-tags .rev-chart").text(elm.chart) $("#sectionDetails .rev-tags .rev-app").text(elm.app_version) $("#sectionDetails .rev-tags .rev-ns").text(getHashParam("namespace")) @@ -94,9 +95,11 @@ $('#specRev').keyup(function (event) { if (keycode == '13') { $("#diffModeRev").click() } - event.preventDefault() }); +$("form").submit(function(e){ + e.preventDefault(); +}); $("#userDefinedVals").change(function () { const self = $(this) @@ -150,10 +153,11 @@ function showResources(namespace, chart, revision) { for (let i = 0; i < data.length; i++) { const res = data[i] const resBlock = $(` -
-
-
-
Getting status...
+
+
+
+
+
Getting status...
`) @@ -166,11 +170,11 @@ function showResources(namespace, chart, revision) { $.getJSON("/api/kube/resources/" + res.kind.toLowerCase() + "?name=" + res.metadata.name + "&namespace=" + ns).fail(function () { //reportError("Failed to get list of resources") }).done(function (data) { - const badge = $("").text(data.status.phase); + const badge = $("").text(data.status.phase); if (["Available", "Active", "Established"].includes(data.status.phase)) { - badge.addClass("bg-success") + badge.addClass("bg-success text-dark") } else if (["Exists"].includes(data.status.phase)) { - badge.addClass("bg-success bg-opacity-50") + badge.addClass("bg-success text-dark bg-opacity-50") } else if (["Progressing"].includes(data.status.phase)) { badge.addClass("bg-warning") } else { @@ -178,13 +182,15 @@ function showResources(namespace, chart, revision) { } const statusBlock = resBlock.find(".res-status"); - statusBlock.empty().append(badge).append("" + (data.status.message ? data.status.message : '') + "") + statusBlock.empty().append(badge) + resBlock.find(".res-statusmsg").html("" + (data.status.message ? data.status.message : '') + "") if (badge.text() !== "NotFound") { resBlock.find(".res-actions") - resBlock.find(".res-actions").append("") - statusBlock.find(".bi-zoom-in").click(function () { - showDescribe(ns, res.kind, res.metadata.name) + const btn = $(""); + resBlock.find(".res-actions").append(btn) + btn.click(function () { + showDescribe(ns, res.kind, res.metadata.name, badge.clone()) }) } }) @@ -192,8 +198,9 @@ function showResources(namespace, chart, revision) { }) } -function showDescribe(ns, kind, name) { - $("#describeModalLabel").text("Describe " + kind + ": " + ns + " / " + name) +function showDescribe(ns, kind, name, badge) { + $("#describeModal .offcanvas-header p").text(kind) + $("#describeModalLabel").text(name).append(badge.addClass("ms-3 small fw-normal")) $("#describeModalBody").empty().append('') const myModal = new bootstrap.Offcanvas(document.getElementById('describeModal')); diff --git a/pkg/dashboard/static/index.html b/pkg/dashboard/static/index.html index b71faf7..4d0fb14 100644 --- a/pkg/dashboard/static/index.html +++ b/pkg/dashboard/static/index.html @@ -6,7 +6,7 @@ Helm Dashboard + href="https://fonts.googleapis.com/css2?family=Roboto&family=Inter&family=Poppins:wght@600&family=Poppins:wght@500&family=Inter:wght@500&family=Roboto+Slab:wght@400&family=Roboto+Slab:wght@700&family=Roboto:wght@700&family=Roboto:wght@500"/> @@ -25,8 +25,6 @@ Logo

Helm Dashboard

-

bykomodor.io

@@ -47,6 +45,12 @@ --> +
+ komodor.io + + +
@@ -108,21 +112,21 @@

Name

+ class="opacity-10 btn btn-sm btn-light bg-white me-2 border-secondary"> + + +
+ Check for new version + +
 
@@ -133,14 +137,14 @@
- cluster: - namespace: chart version: app version: + namespace: + cluster:
@@ -157,7 +161,7 @@ - -
-
- - - -
-
-
- -
-
-
-
- -
-
- - -
-
-
- Upgrade from version to - -
- -
-
-
-
- -
-
- - + - + +
+
+ + + + + + +