Resource status display (#6)

* Start experiments * Going to get resources * Start to show resources * Working on statuses * Displaying statuses * Fix complexity?
2026-03-24 11:48:04 +00:00 · 2022-09-07 22:37:50 +01:00
parent 967d499742
commit a3fb04fbae
8 changed files with 1215 additions and 68 deletions
--- a/pkg/dashboard/static/index.html
+++ b/pkg/dashboard/static/index.html
@@ -9,7 +9,7 @@
          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <!-- CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/lightfair.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/lightfair.min.css"/>
    <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">
 </head>
@@ -63,14 +63,12 @@

        <nav class="mt-2">
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
+                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-resources" data-tab="resources"
+                        type="button" role="tab" aria-controls="nav-resources" aria-selected="false">Resources
+                </button>
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="manifests"
                        type="button" role="tab" aria-controls="nav-manifest-diff" aria-selected="false">Manifests
                </button>
-                <!-- TODO
-                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-disabled" data-tab="resources"
-                        type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Resources
-                </button>
-                -->
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="values"
                        type="button" role="tab" aria-controls="nav-disabled" aria-selected="false">
                    Parameterized Values
@@ -80,21 +78,26 @@
                </button>
            </div>
        </nav>
-        <div class="tab-content" id="nav-tabContent">
-            <div class="tab-pane" id="nav-manifest" role="tabpanel"
-                 tabindex="0">
+        <div class="tab-content">
+            <div class="tab-pane p-3" id="nav-resources" role="tabpanel">
+
+            </div>
+            <div class="tab-pane" id="nav-manifest" role="tabpanel">
                <nav class="navbar bg-light">
                    <form class="container-fluid" id="modePanel">
                        <label class="form-check-label" for="diffModeNone">
-                            <input class="form-check-input" type="radio" name="diffMode" id="diffModeNone" data-mode="view">
+                            <input class="form-check-input" type="radio" name="diffMode" id="diffModeNone"
+                                   data-mode="view">
                            View Current
                        </label>
                        <label class="form-check-label" for="diffModePrev">
-                            <input class="form-check-input" type="radio" name="diffMode" id="diffModePrev" data-mode="diff-prev">
+                            <input class="form-check-input" type="radio" name="diffMode" id="diffModePrev"
+                                   data-mode="diff-prev">
                            Diff with previous
                        </label>
                        <label class="form-check-label" for="diffModeRev">
-                            <input class="form-check-input" type="radio" name="diffMode" id="diffModeRev" data-mode="diff-rev">
+                            <input class="form-check-input" type="radio" name="diffMode" id="diffModeRev"
+                                   data-mode="diff-rev">
                            Diff with specific revision: <input class="form-input" size="3" id="specRev">
                        </label>
                        <label class="form-check-label" for="userDefinedVals">
@@ -126,10 +129,13 @@
        crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js" integrity="sha512-gU7kztaQEl7SHJyraPfZLQCNnrKdaQi5ndOyt4L4UPL/FHDd/uB9Je6KDARIqwnNNE27hnqoWLBq+Kpe4iHfeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"
+        integrity="sha512-gU7kztaQEl7SHJyraPfZLQCNnrKdaQi5ndOyt4L4UPL/FHDd/uB9Je6KDARIqwnNNE27hnqoWLBq+Kpe4iHfeQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"
        integrity="sha256-0H3Nuz3aug3afVbUlsu12Puxva3CP4EhJtPExqs54Vg=" crossorigin="anonymous"></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://cdn.jsdelivr.net/npm/luxon@3.0.3/build/global/luxon.min.js"
+        integrity="sha256-RH4TKnKcKyde0s2jc5BW3pXZl/5annY3fcZI9VrV5WQ=" crossorigin="anonymous"></script>
 <script src="static/scripts.js"></script>
 </body>
 </html>
--- a/pkg/dashboard/static/scripts.js
+++ b/pkg/dashboard/static/scripts.js
@@ -22,7 +22,7 @@ function revisionClicked(namespace, name, self) {

    const tab = getHashParam("tab")
    if (!tab) {
-        $("#nav-tab [data-tab=manifests]").click()
+        $("#nav-tab [data-tab=resources]").click()
    } else {
        $("#nav-tab [data-tab=" + tab + "]").click()
    }
@@ -41,11 +41,15 @@ $("#nav-tab [data-tab]").click(function () {
    const flag = getHashParam("udv") === "true";
    $("#userDefinedVals").prop("checked", flag)

-    const mode = getHashParam("mode")
-    if (!mode) {
-        $("#modePanel [data-mode=diff-prev]").trigger('click')
+    if (self.data("tab") === "resources") {
+        showResources(getHashParam("namespace"), getHashParam("chart"), getHashParam("revision"))
    } else {
-        $("#modePanel [data-mode=" + mode + "]").trigger('click')
+        const mode = getHashParam("mode")
+        if (!mode) {
+            $("#modePanel [data-mode=diff-prev]").trigger('click')
+        } else {
+            $("#modePanel [data-mode=" + mode + "]").trigger('click')
+        }
    }
 })

@@ -128,7 +132,7 @@ function loadChartHistory(namespace, name) {
    $("#sectionDetails h1 span.name").text(name)
    revRow.empty().append("<div><i class='fa fa-spinner fa-spin fa-2x'></i></div>")
    $.getJSON("/api/helm/charts/history?chart=" + name + "&namespace=" + namespace).fail(function () {
-        reportError("Failed to get list of clusters")
+        reportError("Failed to get chart details")
    }).done(function (data) {
        revRow.empty()
        for (let x = 0; x < data.length; x++) {
@@ -203,7 +207,7 @@ function loadChartsList() {
    $("#sectionList").show()
    chartsCards.empty().append("<div><i class='fa fa-spinner fa-spin fa-2x'></i> Loading...</div>")
    $.getJSON("/api/helm/charts").fail(function () {
-        reportError("Failed to get list of clusters")
+        reportError("Failed to get list of charts")
    }).done(function (data) {
        chartsCards.empty()
        data.forEach(function (elm) {
@@ -218,7 +222,7 @@ function loadChartsList() {
                header.find(".badge").addClass("bg-light text-dark")
            }

-            header.append($('<h5 class="card-title"></h5>').text(elm.name))
+            header.append($('<h5 class="card-title"><a href="#namespace=' + elm.namespace + '&chart=' + elm.name + '" class="link-dark" style="text-decoration: none">' + elm.name + '</a></h5>'))
            header.append($('<p class="card-text small text-muted"></p>').append("Chart: " + elm.chart))

            const body = $("<div class='card-body'></div>")
@@ -304,4 +308,42 @@ function getAge(obj1, obj2) {
        }
    }
    return "n/a"
+}
+
+function showResources(namespace, chart, revision) {
+    $("#nav-resources").empty().append("<i class='fa fa-spin fa-spinner fa-2x'></i>");
+    let qstr = "chart=" + chart + "&namespace=" + namespace + "&revision=" + revision
+    let url = "/api/helm/charts/resources"
+    url += "?" + qstr
+    $.getJSON(url).fail(function () {
+        reportError("Failed to get list of resources")
+    }).done(function (data) {
+        $("#nav-resources").empty();
+        for (let i = 0; i < data.length; i++) {
+            const res = data[i]
+            const resBlock = $(` 
+                <div class="input-group row">
+                    <span class="input-group-text col-sm-2"><em class="text-muted small">` + res.kind + `</em></span>
+                    <span class="input-group-text col-sm-6">` + res.metadata.name + `</span>
+                    <span class="form-control col-sm-4"><i class="fa fa-spinner fa-spin"></i> <span class="text-muted small">Getting status...</span></span>
+                </div>`)
+            $("#nav-resources").append(resBlock)
+            let ns = res.metadata.namespace ? res.metadata.namespace : namespace
+            $.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);
+                if (["Available", "Active", "Established"].includes(data.status.phase)) {
+                    badge.addClass("bg-success")
+                } else if (["Exists"].includes(data.status.phase)) {
+                    badge.addClass("bg-success bg-opacity-50")
+                } else {
+                    badge.addClass("bg-danger")
+                }
+
+                resBlock.find(".form-control").empty().append(badge).append("<span class='text-muted small'>" + (data.status.message ? data.status.message : '') + "</span>")
+            })
+
+        }
+    })
 }