mirror of
https://github.com/lucky-sideburn/kubeinvaders.git
synced 2026-05-12 19:56:57 +00:00
163 lines
7.3 KiB
HTML
163 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>KubeInvaders</title>
|
|
<!-- Bootstrap -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./bootstrap-5.0.0-dist/css/bootstrap.min.css">
|
|
<style>
|
|
canvas { background: #000; display: block; margin: 0 auto; border:1px solid #ffffff;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">KubeInvaders</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Chaos Containers
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#" onclick="showCurrentChaosContainer()">Show Current Chaos Container for nodes</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Set Custom Chaos Container for nodes</a></li>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="currentChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<pre id="currentChaosContainrYaml"></pre>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeCurrentChaosJobModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="setChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="exampleFormControlTextarea1" style="margin-bottom: 3%;" onte>Chaos Container Definition</label>
|
|
<textarea class="form-control" id="currentChaosContainerJsonTextArea" rows="20"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<p id="alert_placeholder2" style="color: black; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-primary" onclick="setChaosContainer()">Save</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="closeSetChaosContainerModal()">Close</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" style="width: 50%;">
|
|
<div class="starter-template">
|
|
<div class="container" style="margin-bottom: 2%;">
|
|
<div class="row" style="margin-top: 2%;">
|
|
<div class="col-sm d-flex align-items-start flex-column">
|
|
<div class="card d-flex justify-content-center" style="max-width: 70%;">
|
|
<div class="card-header">
|
|
Stats
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">Deleted Pod Total: <span id="deleted_pods_total" style="color: #4f4f4f">0</span></p>
|
|
<p class="card-text">Chaos Jobs Total: <span id="chaos_jobs_total" style="color: #4f4f4f">0</span></p>
|
|
<p class="card-text">Not Running Pods: <span id="pods_not_running_on" style="color: #4f4f4f">0</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<img src="./logo.png" class="rounded mx-auto d-bloc" style="max-width: 90%; max-height: 80%; margin-bottom: 0%;" alt="Responsive image">
|
|
</div>
|
|
<div class="col-sm d-flex align-items-end flex-column">
|
|
<div class="card" style="max-width: 70%;">
|
|
<div class="card-header">
|
|
Replicas State Delay (second)
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-subtitle mb-2 text-muted"><font size=2>Seconds waiting for desired replicas state</font></h5>
|
|
<p class="card-text">Current: </span><span id="fewer_replicas_seconds" style="color: #4f4f4f">0</span><font color="#4f4f4f"> sec</font></p>
|
|
<p class="card-text">Latest: <span id="latest_fewer_replicas_seconds" style="color: #4f4f4f">0</span><font color="#4f4f4f"> sec</font></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<canvas id="myCanvas" width="720" height="480"></canvas>
|
|
</div>
|
|
</div>
|
|
<div id="alert_placeholder" style="margin-top: 3%;"></div>
|
|
</div>
|
|
<div class="container" style="width: 50%; margin-top: 2%; margin-bottom: 2%;">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Special Keys
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">
|
|
h => Activate or deactivate help<br>
|
|
s => Activate or deactivate shuffle for aliens<br>
|
|
n => Change namespace<br>
|
|
p => Activate or deactivate chaos engineering against pods<br>
|
|
c => Activate or deactivate chaos engineering against nodes
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="kubeinvaders.js"></script>
|
|
<script src="./bootstrap-5.0.0-dist/js/bootstrap.min.js"></script>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
|
|
|
<script>
|
|
|
|
function showCurrentChaosContainer() {
|
|
getCurrentChaosContainer();
|
|
$('#currentChaosContainerModal').modal('show');
|
|
modal_opened = true;
|
|
}
|
|
|
|
function closeCurrentChaosJobModal() {
|
|
$('#currentChaosContainerModal').modal('hide');
|
|
modal_opened = false;
|
|
}
|
|
|
|
function showSetCurrentChaosContainer() {
|
|
$('#alert_placeholder2').text('');
|
|
getCurrentChaosContainer();
|
|
$('#setChaosContainerModal').modal('show');
|
|
modal_opened = true;
|
|
}
|
|
|
|
function closeSetChaosContainerModal() {
|
|
$('#setChaosContainerModal').modal('hide');
|
|
modal_opened = false;
|
|
}
|
|
|
|
$('textarea').on('input', function() {
|
|
$('#alert_placeholder2').text('');
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|