Skip to content

Commit

Permalink
Restyle fixes (#14)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@undera
undera authored Oct 2, 2022
1 parent 1b6dc41 commit 1e3a706
Show file tree
Hide file tree
Showing 10 changed files with 238 additions and 138 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.


Expand Down
24 changes: 22 additions & 2 deletions pkg/dashboard/data.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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()
Expand Down
4 changes: 0 additions & 4 deletions pkg/dashboard/static/action.svg
View file

This file was deleted.

18 changes: 12 additions & 6 deletions pkg/dashboard/static/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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
}

Expand All @@ -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 () {
Expand All @@ -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('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>')
$.ajax({
url: url + "&version=" + $('#upgradeModalLabel select').val(),
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
39 changes: 23 additions & 16 deletions pkg/dashboard/static/details-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"))
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -150,10 +153,11 @@ function showResources(namespace, chart, revision) {
for (let i = 0; i < data.length; i++) {
const res = data[i]
const resBlock = $(`
<div class="row px-3 py-2 mb-2">
<div class="col-2 res-kind"></div>
<div class="col-4 res-name"></div>
<div class="col-5 res-status"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="text-muted small">Getting status...</span></div>
<div class="row px-3 py-2 mb-3 bg-white rounded">
<div class="col-2 res-kind text-break"></div>
<div class="col-3 res-name text-break fw-bold"></div>
<div class="col-1 res-status"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></div>
<div class="col-5 res-statusmsg"><span class="text-muted small">Getting status...</span></div>
<div class="col-1 res-actions"></div>
</div>
`)
Expand All @@ -166,34 +170,37 @@ 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 = $("<span class='badge me-2'></span>").text(data.status.phase);
const badge = $("<span class='badge me-2 fw-normal'></span>").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 {
badge.addClass("bg-danger")
}

const statusBlock = resBlock.find(".res-status");
statusBlock.empty().append(badge).append("<span class='text-muted small'>" + (data.status.message ? data.status.message : '') + "</span>")
statusBlock.empty().append(badge)
resBlock.find(".res-statusmsg").html("<span class='text-muted small'>" + (data.status.message ? data.status.message : '') + "</span>")

if (badge.text() !== "NotFound") {
resBlock.find(".res-actions")
resBlock.find(".res-actions").append("<i class=\"btn bi-zoom-in float-end text-muted\"></i>")
statusBlock.find(".bi-zoom-in").click(function () {
showDescribe(ns, res.kind, res.metadata.name)
const btn = $("<button class=\"btn btn-sm btn-white border-secondary\">Describe</button>");
resBlock.find(".res-actions").append(btn)
btn.click(function () {
showDescribe(ns, res.kind, res.metadata.name, badge.clone())
})
}
})
}
})
}

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('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>')

const myModal = new bootstrap.Offcanvas(document.getElementById('describeModal'));
Expand Down
Loading

0 comments on commit 1e3a706

Please sign in to comment.