Files
helm-dashboard/pkg/dashboard/static/index.html
Andrei Pohilko 1b6dc4159a Release 0.0.6
2022-09-29 09:01:05 +01:00

296 lines
15 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>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto&family=Inter&family=Poppins:wght@600&family=Inter:wght@500&family=Roboto+Slab:wght@400&family=Roboto+Slab:wght@700&family=Roboto:wght@700"/>
<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.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">
<a href="/"><img src="static/logo.png" alt="Logo"></a>
<div>
<h1><a href="/">Helm Dashboard</a></h1>
<p><span class="mr-1">by</span><a href="https://komodor.io"><img src="static/komodor-logo.svg"
alt="komodor.io"></a></p>
</div>
</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 active" aria-current="page" href="/">Installed</a>
</li>
<!-- TODO
<li class="nav-item mx-2">
<a href="#" class="nav-link px-3">Repository</a>
</li>
-->
<!-- TODO
<li class="nav-item">
<a class="nav-link disabled">Provisional Charts</a>
</li>
-->
</ul>
<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 -->
<div class="row mt-3 pt-3 me-5" 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>
<h4>Clusters</h4>
<ul class="list-unstyled" id="cluster">
</ul>
<!-- TODO
<h4 class="mt-4">Namespaces</h4>
<ul class="list-unstyled" id="namespaces">
</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">
<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>
<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>
<!-- /INSTALLED LIST -->
</div>
<div class="row flex-nowrap pt-0 mx-0" 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 rounded-0 me-0 rounded-start border-secondary">
<img src="static/action.svg"> <span>Checking...</span>
</button></span><span><button
id="btnUpgradeCheck"
class="btn btn-sm text-muted btn-light bg-white border-secondary rounded-0 rounded-end ms-0 me-2"
title="Check for newer chart version from repo"><i class="bi-repeat"></i><span
class="spinner-border spinner-border-sm" style="display: none" role="status"
aria-hidden="true"></span></button></span>
<button id="btnRollback" class="btn btn-sm btn-light bg-white border border-secondary me-2"
title="Rollback to this revision"><img src="static/action.svg"> <span>Rollback</span>
</button>
<button id="btnUninstall" class="btn btn-sm btn-light bg-white border border-secondary"
title="Uninstall the chart"><img src="static/action.svg"> Uninstall
</button>
</div>
<div class="fs-2">&nbsp;</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">cluster: <span
class="rev-cluster 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">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>
</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-diff" 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-disabled" aria-selected="false" tabindex="-1">
Parameterized 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-disabled" 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-2 fw-bold small"
style="text-transform: uppercase">
<div class="col-2">Kind</div>
<div class="col-4">Name</div>
<div class="col-5">Status</div>
<div class="col-1">Describe</div>
</div>
<div class="body"></div>
</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">
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">
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 class="tab-pane" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab"
tabindex="0">...
</div>
</div>
</div>
</div>
</div>
<!-- Modals -->
<div id="errorAlert"
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">
<div class="offcanvas-header">
<h5 id="describeModalLabel"></h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" id="describeModalBody">
</div>
</div>
<div class="offcanvas offcanvas-end rounded-start" tabindex="-1" id="confirmModal" aria-labelledby="confirmModalLabel">
<div class="offcanvas-header">
<h5 id="confirmModalLabel"></h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" id="confirmModalBody">
</div>
<div class="offcanvas-footer p-3">
<button type="button" class="btn btn-primary float-end btn-confirm">Confirm</button>
</div>
</div>
<div class="offcanvas offcanvas-end rounded-start" tabindex="-1" id="upgradeModal" aria-labelledby="upgradeModalLabel">
<div class="offcanvas-header">
<h5 id="upgradeModalLabel">
Upgrade <b class='text-success name'></b> from version <b class='text-success ver-old'></b> to
<select class='fw-bold text-success ver-new'></select>
</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" id="upgradeModalBody">
</div>
<div class="offcanvas-footer p-3">
<button type="button" class="btn btn-primary float-end btn-confirm">Confirm Upgrade</button>
</div>
</div>
<footer class="container-fluid small mt-5 mb-5" style="z-index: -50">
<div class="row align-items-end justify-content-end">
<div class="col-3"></div>
<div class="col-4 text-center bg-white bg-opacity-50 p-2 px-3 rounded b-shadow">
Brought to you by <img src="https://komodor.com/wp-content/uploads/2021/05/favicon.png"
style="height: 1rem"> <a class="me-4"
href="https://komodor.io">Komodor.io</a>
<i class="bi-github"></i>
<a href="https://github.com/komodorio/helm-dashboard">Project page on GitHub</a>
</div>
<div class="col-3"></div>
</div>
</footer>
<img src="static/topographic.svg" class="position-absolute bottom-0 left-0" style="z-index: -100; height: 100%;"/>
<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="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>