Restyle LAF (#12)

* Logos change

* Coding HTML

* Top bar

* Top bar is fine

* Restyling it

* progressing

* age line

* cosmetics

* Installed list is fine

* Save

* revision list display

* Split up files

* Rev list works

* Details

* Working on details

* Action buttons

* cosmetics

* Describe flyout

* Uninstall confirm flyout

* Working on flyouts

* Fixed the actions working

* Polishing it

* Cosmetics
This commit is contained in:
Andrey Pokhilko
2022-09-26 11:19:55 +01:00
committed by GitHub
parent ea6e4d55b0
commit 7fd5fcc5b2
18 changed files with 1243 additions and 727 deletions

View File

@@ -5,6 +5,9 @@
<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">
@@ -14,186 +17,262 @@
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg bg-light rounded mb-2 mt-2">
<div class="container-fluid">
<div style="line-height: 90%; font-size: 1.5rem" class="navbar-brand">
<img src="static/logo.png" style="height: 3rem; float: left" alt="Logo">
<a class="navbar-brand" href="#"><b>Helm Dashboard</b></a><br/>
<span style="font-size: 0.8rem;">by <a href="https://komodor.io">komodor.io</a></span>
<div class="container-fluid gx-0">
<!-- TOP BAR -->
<nav class="navbar navbar-expand bg-white mb-0 p-0" 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>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Installed Charts</a>
</li>
<!-- TODO
<li class="nav-item">
<a class="nav-link disabled">Provisional Charts</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" style="margin-top: 0.5rem">K8s Context:</label>
<select id="cluster" class="form-control"></select>
</form>
<i class="btn bi-power text-muted" title="Shut down the Helm Dashboard application"></i>
</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>
<div class="bg-light p-5 pt-0 rounded display-none" id="sectionDetails">
<span class="text-muted"
style="transform: rotate(270deg); z-index: 100; display: inline-block; position: relative; left:-4rem; top: 4rem; color: #BBB!important; text-transform: uppercase">Revisions</span>
<div class="row mb-3">
<!-- /TOP BAR -->
<div class="row mt-3 pt-3 mx-0 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>
<h1><span class="name"></span>, revision <span class="rev"></span>
<span class="float-end" id="actionButtons">
<button id="btnUpgrade" class="opacity-10 btn btn-sm bg-secondary text-light bg-opacity-50 rounded-0 me-0 rounded-start ">Checking...</button><button id="btnUpgradeCheck" class="btn btn-sm text-muted btn-light border-secondary rounded-0 rounded-end ms-0" 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>
<button id="btnRollback" class="btn btn-sm bg-primary border border-secondary text-light" title="Rollback to this revision"><i class="bi-rewind-fill"></i> <span>Rollback</span></button>
<button id="btnUninstall" class="btn btn-sm bg-danger border border-secondary text-light" title="Uninstall the chart"><i class="bi-trash-fill"></i> Uninstall</button>
</span>
</h1>
Chart <b id="chartName"></b>: <i id="revDescr"></i>
<!-- 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>
<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>
<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
</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">Notes
</button>
</div>
</nav>
<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">
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 class="body"></div>
</div>
<!-- /INSTALLED LIST -->
</div>
<div class="bg-light p-5 rounded display-none" id="sectionList">
<h1>Charts List</h1>
<div id="charts" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="row pt-0 mx-0 me-0" id="sectionDetails" style="display: none">
<div class="col-2 ms-3 ps-1 pt-4 rev-list">
<h3 class="fw-bold small">Revisions</h3>
<ul class="list-unstyled">
</ul>
</div>
</div>
<div class="col ms-2 rev-details bg-white b-shadow pt-4 px-5">
<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>
<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>
<div class="modal" id="describeModal"
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="describeModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<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 class="modal-body" id="describeModalBody">
<div>
Revision <span class="rev fw-bold me-4"></span>
Upgraded on <span class="rev-date"></span>
</div>
</div>
</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 class="rev-tags mt-3">
<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 class="modal-body" id="confirmModalBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Confirm</button>
<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>
<div class="modal" id="upgradeModal"
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="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" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="upgradeModalBody">
<!-- 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>
<div class="modal-footer">
<button type="button" class="btn btn-success">Confirm Upgrade</button>
</div>
</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>
<footer class="text-center small mt-3">
Brought to you by <img src="https://komodor.com/wp-content/uploads/2021/05/favicon.png" style="height: 1rem"> <a 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 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-3" 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"
@@ -207,6 +286,11 @@
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="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>