mirror of
https://github.com/komodorio/helm-dashboard.git
synced 2026-03-21 18:58:03 +00:00
456 lines
23 KiB
HTML
456 lines
23 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="icon" href="static/logo.png"/>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Helm Dashboard</title>
|
|
<script src="static/analytics.js"></script>
|
|
<link rel="stylesheet"
|
|
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"/>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.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-base.css" rel="stylesheet">
|
|
<link href="static/styles.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container-fluid px-0">
|
|
<!-- TOP BAR -->
|
|
<nav class="navbar navbar-expand bg-white mb-0 p-0 b-shadow" id="topNav">
|
|
<div class="container-fluid m-0 p-0">
|
|
<div class="navbar-brand me-0">
|
|
<a href="/"><img src="static/logo-header.svg" alt="Helm Dashboard"></a>
|
|
</div>
|
|
|
|
<div class="separator-vertical mx-3"><span></span></div>
|
|
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item mx-2">
|
|
<a class="nav-link px-3 section-installed">Installed</a>
|
|
</li>
|
|
<li class="nav-item mx-2">
|
|
<a class="nav-link px-3 section-repo">Repository</a>
|
|
</li>
|
|
<li class="nav-item mx-2 dropdown">
|
|
<a class="nav-link dropdown-toggle section-help" role="button" data-bs-toggle="dropdown"
|
|
aria-expanded="false">
|
|
Help
|
|
</a>
|
|
<ul class="dropdown-menu fs-80">
|
|
<li><a class="dropdown-item"
|
|
href="https://komodorkommunity.slack.com"
|
|
target="_blank"><i class="bi-slack"></i> Support Chat</a></li>
|
|
<li><a class="dropdown-item" href="https://github.com/komodorio/helm-dashboard" target="_blank"><i
|
|
class="bi-github"></i> Project Page</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li>
|
|
<!-- TODO: this should go under the "user menu" -->
|
|
<button class="dropdown-item" id="cacheClear"><i
|
|
class="bi-arrow-repeat"></i> Reset Cache
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item disabled" href="#">Version <span id="toolVersion"></span></a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item mx-2 display-none upgrade-possible">
|
|
<a class="nav-link position-relative text-danger"
|
|
href="https://github.com/komodorio/helm-dashboard#installing" target="_blank">
|
|
Upgrade to <span id="toolVersionUpgrade"></span>
|
|
</a></li>
|
|
|
|
</ul>
|
|
<div>
|
|
<a class="btn" href="https://komodor.com/?utm_campaign=Helm-Dash&utm_source=helm-dash"><img
|
|
src="static/komodor-logo.svg" alt="komodor.io"
|
|
style="height: 1.2rem; vertical-align: text-bottom; filter: grayscale(00%);"></a>
|
|
</div>
|
|
<div class="separator-vertical"><span></span></div>
|
|
<i class="btn bi-power text-muted p-2 m-1 mx-2" title="Shut down the Helm Dashboard application"></i>
|
|
</div>
|
|
</nav>
|
|
<!-- /TOP BAR -->
|
|
|
|
<!--REPO SECTION-->
|
|
<div class="row mt-3 pt-3 me-5 section" id="sectionRepo" style="display: none">
|
|
<div class="col-3 ps-4 repo-list">
|
|
<div class="p-2 bg-white rounded-1 b-shadow">
|
|
<h4 class="fs-6">Repositories</h4>
|
|
<ul class="list-unstyled p-2">
|
|
</ul>
|
|
<button class="btn btn-sm border-secondary text-muted">
|
|
<i class="bi-plus-lg"></i> Add Repository
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-9 repo-details bg-white b-shadow pt-4 px-5 overflow-auto rounded">
|
|
<div class="float-end">
|
|
<button class="me-2 btn btn-sm btn-light bg-white border border-secondary btn-update">
|
|
<i class="bi-arrow-repeat"></i> Update
|
|
</button>
|
|
<button class="btn btn-sm btn-light bg-white border border-secondary btn-remove">
|
|
<i class="bi-trash3"></i> Remove
|
|
</button>
|
|
<p class="my-3"><input class="form-control form-control-sm" type="text" placeholder="Filter..."
|
|
id="inputSearch"></p>
|
|
</div>
|
|
<div><span class="text-muted small fw-bold me-3">REPOSITORY</span></div>
|
|
<h2 class="mb-3">name-of-repo</h2>
|
|
<div class="mb-5">
|
|
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">URL: <span class="url fw-bold">http://somerepo/somepath</span></span>
|
|
</div>
|
|
<div class="py-2 mb-3 float-end">
|
|
|
|
</div>
|
|
<div class="row bg-secondary rounded px-3 py-2 mb-3 fw-bold small"
|
|
style="text-transform: uppercase">
|
|
<div class="col-3">Chart Name</div>
|
|
<div class="col">Description</div>
|
|
<div class="col-1">Version</div>
|
|
<div class="col-1"></div>
|
|
</div>
|
|
<ul class="list-unstyled mt-4 charts"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3 pt-3 me-5 section" id="sectionList" style="display: none">
|
|
<div class="col-2 ms-3">
|
|
<!-- FILTER BLOCK -->
|
|
<div class="p-2 ps-2 bg-white rounded-1 b-shadow" id="filters">
|
|
<form>
|
|
<div id="clusterFilterBlock">
|
|
<h4>Clusters</h4>
|
|
<ul class="list-unstyled" id="cluster">
|
|
</ul>
|
|
</div>
|
|
|
|
<h4 class="mt-4">Namespaces</h4>
|
|
<p id="limitNamespace" class="display-none ps-3"><span class="fw-bold"></span> (forced)</p>
|
|
<ul class="list-unstyled" id="namespace">
|
|
</ul>
|
|
</form>
|
|
</div>
|
|
<!-- /FILTER BLOCK -->
|
|
|
|
</div>
|
|
|
|
<!-- INSTALLED LIST -->
|
|
<div class="col ms-2" id="installedList">
|
|
<div class="col rounded rounded-1 b-shadow header">
|
|
<div class="bg-white rounded-top m-0 spaced-out">
|
|
<h2 class="m-0 p-1"><img class="m-2 mx-3 me-2" src="static/helm-gray.svg" alt="Installed Charts">Installed
|
|
Charts (<span></span>)</h2>
|
|
<div class="form-outline w-25">
|
|
<input type="text" id="installedSearch" class="form-control form-control-sm"
|
|
placeholder="Filter..."/>
|
|
</div>
|
|
</div>
|
|
<div class="bg-secondary rounded-bottom m-0 row p-2">
|
|
<div class="col-4 hdr-name">Name</div>
|
|
<div class="col-3">Chart Status</div>
|
|
<div class="col-2">Chart</div>
|
|
<div class="col-1">Revision</div>
|
|
<div class="col-1">Namespace</div>
|
|
<div class="col-1">Updated</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="body"></div>
|
|
<div class="bg-white rounded shadow p-3 display-none no-charts">Looks like you don't have any charts
|
|
installed. "Repository" section may be a good place to start.
|
|
</div>
|
|
<div class="bg-white rounded shadow p-3 display-none all-filtered">There are no releases matching your
|
|
filter criteria. Reset your filters or install more charts.
|
|
</div>
|
|
</div>
|
|
<!-- /INSTALLED LIST -->
|
|
</div>
|
|
|
|
<div class="row flex-nowrap pt-0 mx-0 section" id="sectionDetails" style="display: none">
|
|
<div class="col-2 px-4 py-4 pe-3 rev-list">
|
|
<h3 class="fw-bold small">Revisions</h3>
|
|
<ul class="list-unstyled">
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-10 rev-details bg-white b-shadow pt-4 px-5 overflow-auto">
|
|
<div><span class="rev-status fw-bold me-3"></span></div>
|
|
<div>
|
|
<h1 class="name float-start">Name</h1>
|
|
<div id="actionButtons" class="float-end">
|
|
<span><button id="btnUpgrade"
|
|
class="opacity-10 btn btn-sm btn-light bg-white me-2 border-secondary">
|
|
<i class="icon bi-hourglass-split"></i> <span></span>
|
|
</button></span>
|
|
|
|
<button id="btnRollback" class="btn btn-sm btn-light bg-white border border-secondary me-2"
|
|
title="Rollback to this revision"><i class="bi-arrow-repeat"></i> <span>Rollback</span>
|
|
</button>
|
|
<button id="btnUninstall" class="btn btn-sm btn-light bg-white border border-secondary"
|
|
title="Uninstall the chart"><i class="bi-trash3"></i> Uninstall
|
|
</button>
|
|
<br/>
|
|
<a class="link small" id="btnUpgradeCheck">
|
|
<span class="spinner-border spinner-border-sm" style="display: none" role="status"
|
|
aria-hidden="true"></span>
|
|
</a>
|
|
<a class="link small" id="btnAddRepository">
|
|
<span class="spinner-border spinner-border-sm" style="display: none" role="status"
|
|
aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
<div class="fs-2"> </div>
|
|
</div>
|
|
|
|
<div>
|
|
Revision <span class="rev fw-bold me-4"></span>
|
|
<span class="rev-date"></span>
|
|
</div>
|
|
|
|
<div class="rev-tags mt-3">
|
|
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">chart version: <span
|
|
class="rev-chart fw-bold"></span></span>
|
|
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">app version: <span
|
|
class="rev-app fw-bold"></span></span>
|
|
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">namespace: <span
|
|
class="rev-ns fw-bold"></span></span>
|
|
<span class="rounded rounded-1 me-2 p-1 px-2 bg-tag text-dark">cluster: <span
|
|
class="rev-cluster fw-bold"></span></span>
|
|
</div>
|
|
|
|
<div id="revDescr" class="mt-3 mb-4"></div>
|
|
|
|
<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" tabindex="-1">
|
|
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" aria-selected="false"
|
|
tabindex="-1">Manifests
|
|
</button>
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="values"
|
|
type="button" role="tab" aria-controls="nav-manifest" aria-selected="false" tabindex="-1">
|
|
Values
|
|
</button>
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav-manifest" data-tab="notes"
|
|
type="button" role="tab" aria-controls="nav-manifest" aria-selected="false" tabindex="-1">
|
|
Notes
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content">
|
|
<div class="tab-pane p-3 container-fluid" id="nav-resources" role="tabpanel">
|
|
<div class="row bg-secondary rounded px-3 py-2 mb-3 fw-bold small"
|
|
style="text-transform: uppercase">
|
|
<div class="col-2">Resource Type</div>
|
|
<div class="col-3">Name</div>
|
|
<div class="col-2">Status</div>
|
|
<div class="col-5">Status Message</div>
|
|
<div class="col-1"></div>
|
|
</div>
|
|
<div class="body"></div>
|
|
</div>
|
|
<div class="tab-pane" id="nav-manifest" role="tabpanel">
|
|
<nav class="navbar bg-white rounded border border-secondary">
|
|
<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">
|
|
View
|
|
</label>
|
|
<label class="form-check-label" for="diffModePrev">
|
|
<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">
|
|
Diff with specific revision: <input class="form-input" size="3" id="specRev">
|
|
</label>
|
|
<label class="form-check-label" for="userDefinedVals">
|
|
<input class="form-check-input" type="checkbox" id="userDefinedVals"> User-defined only
|
|
</label>
|
|
</form>
|
|
</nav>
|
|
|
|
<div id="manifestText" class="mt-2 bg-white"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modals -->
|
|
<div id="errorAlert" style="z-index: 2000; max-width: 95%; overflow: auto"
|
|
class="display-none alert alert-sm alert-danger alert-dismissible position-absolute position-absolute top-0 start-50 translate-middle-x mt-3 border-danger"
|
|
role="alert">
|
|
<h4 class="alert-heading"><i class="bi-exclamation-triangle-fill"></i> <span></span></h4>
|
|
<hr>
|
|
<p style="white-space: pre-wrap"></p>
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="offcanvas offcanvas-end rounded-start" tabindex="-1" id="describeModal"
|
|
aria-labelledby="describeModalLabel" style="overflow-x: auto">
|
|
<div class="offcanvas-header border-bottom p-4">
|
|
<div>
|
|
<h5 id="describeModalLabel"></h5>
|
|
<p class="m-0 mt-4">ResourceType</p>
|
|
</div>
|
|
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
|
|
</div>
|
|
<div class="offcanvas-body p-2 ps-4" id="describeModalBody">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="confirmModal" tabindex="-1" aria-labelledby="describeModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="confirmModalLabel"></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="confirmModalBody">
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary btn-confirm">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="repoAddModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add Chart Repository</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form enctype="application/x-www-form-urlencoded">
|
|
<label class="form-label">Name: <input class="form-control" name="name"></label>
|
|
<label class="form-label">URL: <input class="form-control" name="url"></label>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-primary btn-confirm">Add Repository</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="upgradeModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog modal-dialog-scrollable modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="upgradeModalLabel">
|
|
<span class="type"></span> <b class='text-success name'></b>
|
|
</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form class="modal-body border-bottom fs-5" enctype="multipart/form-data">
|
|
<div class="input-group mb-3 text-muted">
|
|
<label class="form-label me-4 text-dark">Version to install: <select
|
|
class='fw-bold text-success ver-new'></select></label> <span class="ver-old">(current version is <span
|
|
class='text-success ms-1'>0.0.0</span>)</span>
|
|
</div>
|
|
<div class="input-group mb-3 text-muted">
|
|
<label class="form-label me-4 text-dark">
|
|
Release Name: <input class="form-control rel-name">
|
|
</label>
|
|
<label class="form-label me-4 text-dark">
|
|
Namespace (optional):
|
|
<input type="text" class="form-control rel-ns" list="ns-datalist"/>
|
|
<datalist id="ns-datalist"></datalist>
|
|
</label>
|
|
<label class="form-label me-4 text-dark">
|
|
Cluster: <span class="form-label rel-cluster"></span>
|
|
</label>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 pe-3">
|
|
<label class="form-label">User-Defined Values:</label>
|
|
</div>
|
|
<div class="col-6 ps-3">
|
|
<label class="form-label">Chart Values Reference:</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-6 pe-3">
|
|
<textarea name="values" class="form-control w-100 h-100" rows="5"
|
|
style="font-family: monospace"></textarea>
|
|
</div>
|
|
<div class="col-6 ps-3">
|
|
<pre class="ref-vals fs-6 w-100 bg-secondary p-2 rounded" style="max-height: 20rem"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-6 pe-3">
|
|
<span class="invalid-feedback small mb-3"> (wrong YAML)</span>
|
|
</div>
|
|
</div>
|
|
<label class="form-label mt-4">Manifest changes:</label>
|
|
<div id="upgradeModalBody" class="small"></div>
|
|
</form>
|
|
<div class="modal-footer d-flex">
|
|
<button type="button" class="btn btn-scan bg-white border-secondary display-none">Scan for Problems
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-confirm">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="PowerOffModal" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="ModalLabel">Session Ended</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
The Helm Dashboard application has been shut down. You can now close the browser tab.
|
|
</div>
|
|
</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 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://cdn.jsdelivr.net/npm/luxon@3.0.3/build/global/luxon.min.js"
|
|
integrity="sha256-RH4TKnKcKyde0s2jc5BW3pXZl/5annY3fcZI9VrV5WQ=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"
|
|
integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
<script src="static/repo.js"></script>
|
|
<script src="static/list-view.js"></script>
|
|
<script src="static/revisions-view.js"></script>
|
|
<script src="static/details-view.js"></script>
|
|
<script src="static/actions.js"></script>
|
|
<script src="static/scripts.js"></script>
|
|
|
|
</body>
|
|
</html> |