Initial features pt 2 (#3)

* Less logging when not in DEBUG * Check helm is fine * Display kube context switch * Cosmetics * Displays list of chartss * Linter stuff * Fix option name
2026-03-24 11:48:04 +00:00 · 2022-08-24 14:42:20 +03:00
parent 925cfa77dd
commit d9a88feb7b
8 changed files with 249 additions and 19 deletions
--- a/pkg/dashboard/static/index.html
+++ b/pkg/dashboard/static/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <link rel="icon" href="https://komodor.com/wp-content/uploads/2021/05/favicon-50x50.png"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Helm Dashboard</title>
@@ -10,10 +11,48 @@
 </head>
 <body>

+<div class="container">
+    <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Eleventh navbar example">
+        <div class="container-fluid">
+            <div style="line-height: 90%">
+                <a class="navbar-brand" href="#"><b>Helm Dashboard</b></a><br/>
+                <span style="font-size: smaller">by <a href="https://komodor.io">komodor.io</a></span>
+            </div>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09"
+                    aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarsExample09">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="/">Charts List</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link disabled">Repositories</a>
+                    </li>
+                </ul>
+                <form class="d-flex flex-nowrap text-nowrap">
+                    <label for="cluster" class="">K8s Context:</label>
+                    <select id="cluster" class="form-control"></select>
+                </form>
+            </div>
+        </div>
+    </nav>
+
+
+    <div class="bg-light p-5 rounded">
+        <h1>Charts List</h1>
+        <div id="charts" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+
+        </div>
+    </div>
+</div>

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="static/scripts.js"></script>
 </body>
 </html>
--- a/pkg/dashboard/static/scripts.js
+++ b/pkg/dashboard/static/scripts.js
@@ -0,0 +1,58 @@
+const clusterSelect = $("#cluster");
+const chartsCards = $("#charts");
+
+function reportError(err) {
+    alert(err) // TODO: nice modal/baloon/etc
+}
+
+$(function () {
+    // cluster list
+    $.getJSON("/api/kube/contexts").fail(function () {
+        reportError("Failed to get list of clusters")
+    }).done(function (data) {
+        data.forEach(function (elm) {
+            // aws CLI uses complicated context names, the suffix does not work well
+            // maybe we should have an `if` statement here
+            let label = elm.Name //+ " (" + elm.Cluster + "/" + elm.AuthInfo + "/" + elm.Namespace + ")"
+            let opt = $("<option></option>").val(elm.Name).text(label)
+            if (elm.IsCurrent) {
+                opt.attr("selected", "selected")
+            }
+            clusterSelect.append(opt)
+        })
+    })
+    clusterSelect.change(function () {
+        // TODO: remember it, respect it in the function above and in all other places
+    })
+
+    // charts list
+    $.getJSON("/api/helm/charts").fail(function () {
+        reportError("Failed to get list of clusters")
+    }).done(function (data) {
+        chartsCards.empty()
+        data.forEach(function (elm) {
+            const header = $("<div class='card-header'></div>")
+            header.append($('<div class="float-end"><h5 class="float-end text-muted text-end">#' + elm.revision + '</h5><br/><div class="badge bg-info">' + elm.status + "</div>"))
+            header.append($('<h5 class="card-title"></h5>').text(elm.name))
+            header.append($('<p class="card-text small text-muted"></p>').append("Version: " + elm.app_version))
+
+            const body = $("<div class='card-body'></div>")
+            body.append($('<p class="card-text"></p>').append("Namespace: " + elm.namespace))
+            body.append($('<p class="card-text"></p>').append("Chart: " + elm.chart))
+            body.append($('<p class="card-text"></p>').append("Updated: " + elm.updated))
+
+            /*
+        "namespace": "default",
+            "revision": "4",
+            "updated": "2022-08-16 17:11:26.73393511 +0300 IDT",
+            "status": "deployed",
+            "chart": "k8s-watcher-0.17.1",
+            "app_version": "0.1.108"
+
+             */
+
+            let card = $("<div class='card'></div>").append(header).append(body);
+            chartsCards.append($("<div class='col'></div>").append(card))
+        })
+    })
+})
--- a/pkg/dashboard/static/styles.css
+++ b/pkg/dashboard/static/styles.css
@@ -0,0 +1,3 @@
+#charts .card {
+    cursor: pointer;
+}