mirror/helm-dashboard
1
0
Fork 0
mirror of https://github.com/komodorio/helm-dashboard.git synced 2026-03-24 11:48:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Restyle fixes (#14)

Browse Source 
* 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
This commit is contained in:
Andrey Pokhilko
2022-10-02 11:50:28 +01:00
committed by GitHub
parent 1b6dc4159a
commit 1e3a706698
10 changed files with 250 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
pkg/dashboard/static/details-view.js
View File

@@ -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 = $(`
<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>
`)
@@ -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 = $("<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 {
@@ -178,13 +182,15 @@ function showResources(namespace, chart, revision) {
}
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())
})
}
})
@@ -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('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>')
const myModal = new bootstrap.Offcanvas(document.getElementById('describeModal'));