mirror of
https://github.com/lucky-sideburn/kubeinvaders.git
synced 2026-04-09 11:56:53 +00:00
414 lines
17 KiB
HTML
414 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>KubeInvaders</title>
|
|
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./bootstrap-5.0.0-dist/css/bootstrap.min.css">
|
|
<style>
|
|
@font-face {
|
|
font-family: pixel;
|
|
src: url('./pixel.otf');
|
|
}
|
|
div {
|
|
font-family: pixel;
|
|
}
|
|
canvas { background: #000; display: block; margin: 0 auto; border:1px solid #ffffff;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-li bg-light">
|
|
<div class="container-fluid">
|
|
<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" style="margin-top: 0.2%;">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<font style="color: #000000;">Menu</font>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarDarkDropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#" onclick="runKubeLinter()">Run KubeLinter On Current Namespace</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="showSpecialKeys()">Show Special Keys</a></li>
|
|
<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="currentChaosContainerYaml"></pre>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light" data-dismiss="modal" onclick="closeCurrentChaosJobModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal" id="kubeLinterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<pre id="currentKubeLinterResult"></pre>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light" data-dismiss="modal" onclick="closeKubeLinterModal()">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="
|
|
" 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="modal fade" id="showSpecialKeysModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" id="gameContainer" style="width: 50%; height: 50%;">
|
|
<div class="starter-template">
|
|
<div class="container" style="margin-bottom: 2%;">
|
|
<div class="row" style="margin-top: 2%;">
|
|
<div class="row" style="margin-bottom: 1%;">
|
|
<div class="col text-center">
|
|
<button type="button" id="gameModeButton" class="btn btn-light" onclick="startGameMode()">Game Mode</button>
|
|
</div>
|
|
<div class="col text-center">
|
|
<div id="programming-mode-buttons" style="display: none;">
|
|
<button type="button" id="runProgrammingModeButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button>
|
|
</div>
|
|
</div>
|
|
<div class="col text-center">
|
|
<button type="button" id="programmingModeButton" class="btn btn-light" onclick="startProgrammingMode()">Programming Mode</button>
|
|
</div>
|
|
</div>
|
|
<div id="programming-mode-buttons" style="display: none;">
|
|
<div class="row">
|
|
<div class="col text-center">
|
|
</div>
|
|
<div class="col text-center">
|
|
</div>
|
|
<div class="col text-center">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="game-buttons" style="display: none;">
|
|
<div class="row">
|
|
<div class="col text-center">
|
|
<button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="controlAutoPilot()">Start</button>
|
|
</div>
|
|
<div class="col text-center">
|
|
<input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
|
|
</div>
|
|
<div class="col text-center">
|
|
<label for="randomFactorInput">Random Factor: <span id="currentRandomFactor">50</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 1%;">
|
|
<div class="col text-center">
|
|
<button type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
|
|
</div>
|
|
<div class="col text-center">
|
|
<button type="button" id="namespacesJumpButton" class="btn btn-light btn-sm" onclick="namespacesJumpControl()">Enable Auto NS Switch</button>
|
|
</div>
|
|
<div class="col text-center">
|
|
<button type="button" id="buttonOnlyPodName" class="btn btn-light btn-sm" onclick="showPodNameControl()">Hide Pods Name</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div style="margin-top: 1%;">
|
|
<span style="color: #000000;">Deleted Pod Total: <span id="deleted_pods_total" style="color: #8f00bb">0</span> - </span>
|
|
<span style="color: #000000">Chaos Jobs Total: <span id="chaos_jobs_total" style="color: #8f00bb">0</span> - </span>
|
|
<span style="color: #000000">Current Chaos Pods: <span id="current_chaos_job_pod" style="color: #8f00bb">0</span> - </span>
|
|
<span style="color: #000000">Not Running Pods: <span id="pods_not_running_on" style="color: #8f00bb">0</span> - </span>
|
|
<span style="color: #000000">Current Replicas State Delay: </span><span id="fewer_replicas_seconds" style="color: #8f00bb">0</span><font color="#4f4f4f"> sec</font> - </span>
|
|
<span style="color: #000000">Latest Replicas State Delay: <span id="latest_fewer_replicas_seconds" style="color: #8f00bb">0</span><font color="#4f4f4f"> sec</font> </span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chaos-program-screen" style="display: none;">
|
|
<div class="row" style="margin-top: 1%;">
|
|
<form>
|
|
<div id="alert_placeholder" style="margin-top: 1%;"></div>
|
|
<div class="form-group">
|
|
<label for="chaosProgramTextArea"></label>
|
|
<textarea class="form-control" id="chaosProgramTextArea" rows="20" style="font-family: Courier, monospace;">
|
|
jobs:
|
|
cpu-attack:
|
|
image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
|
|
command: "stress-ng"
|
|
args:
|
|
- --help
|
|
|
|
mem-attack:
|
|
image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
|
|
command: "stress-ng"
|
|
args:
|
|
- --help
|
|
|
|
experiments:
|
|
- name: cpu-attack-exp
|
|
job: cpu-attack
|
|
loop: 5
|
|
|
|
- name: mem-attack-exp
|
|
job: mem-attack
|
|
loop: 5
|
|
</textarea>
|
|
</div>
|
|
</form>
|
|
<div id="chaosJobLogsDiv" style="margin-top: 2%; overflow-y: scroll; height:700px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="game-screen" style="display: none;">
|
|
<div class="row" style="margin-top: 2%;">
|
|
<canvas id="myCanvas" width="720" height="480"></canvas>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-center">
|
|
|
|
</div>
|
|
<div class="col text-center">
|
|
<input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
|
|
<input type="button" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
|
|
</div>
|
|
<div class="col text-center">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="alert_placeholder" style="margin-top: 3%;"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="alert_placeholder3" style="margin-top: 3%;"></div>
|
|
</div>
|
|
<div class="row" style="margin-top: 1%;">
|
|
<div class="col text-center">
|
|
<button type="button" id="logConsoleButton" class="btn btn-light" onclick="setLogConsole()">Start Logs Tail</button>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 2%;">
|
|
<input type="text" style="font-family: Courier New, Courier, monospace;" id="logTailRegex" value=".*"/>
|
|
</div>
|
|
<div class="row" style="margin-top: 1%;">
|
|
<div class="col text-center">
|
|
<button type="button" style="width: 10em;" id="logConsoleRegex" class="btn btn-sm btn-dark ext-center" onclick="setLogRegex()">Regex (Pod name)</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="logTailDiv" style="margin-top: 2%; overflow-y: scroll; height:700px; display: none;"></div>
|
|
</div>
|
|
</div>
|
|
<div id="footer" style="margin-top: 5%;">
|
|
<div class="container text-center">
|
|
<p class="text-muted credit" style="color:#fff">kubeinvaders_version: v1.9.5</p>
|
|
</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 changeRandomFactor() {
|
|
randomFactor = $("#randomFactorInput").val();
|
|
$("#currentRandomFactor").text(randomFactor);
|
|
}
|
|
|
|
function zoomIn() {
|
|
document.getElementById("gameContainer").style.width = "100%"
|
|
document.getElementById("gameContainer").style.height = "100%";
|
|
document.getElementById("zoomInGameScreenInput").disabled = true;
|
|
document.getElementById("zoomOutGameScreenInput").disabled = false;
|
|
}
|
|
|
|
function zoomOut() {
|
|
var gameContainerWidth = document.getElementById("gameContainer").style.width;
|
|
var gameContainerHeight = document.getElementById("gameContainer").style.height;
|
|
document.getElementById("gameContainer").style.width = "50%"
|
|
document.getElementById("gameContainer").style.height = "50%"
|
|
document.getElementById("zoomInGameScreenInput").disabled = false;
|
|
document.getElementById("zoomOutGameScreenInput").disabled = true;
|
|
}
|
|
|
|
function controlAutoPilot() {
|
|
if (autoPilot) {
|
|
autoPilot = false;
|
|
$("#controlAutoPilotButton").text("Start");
|
|
} else {
|
|
autoPilot = true;
|
|
$("#controlAutoPilotButton").text("Stop");
|
|
}
|
|
}
|
|
|
|
function setLogConsole() {
|
|
chaos_program_screen.style.display = "none";
|
|
programming_mode_buttons.style.display = "none";
|
|
game_screen.style.display = "none";
|
|
game_buttons.style.display = "none";
|
|
|
|
if (log_tail_switch) {
|
|
$("#logConsoleButton").text("Start Logs Tail");
|
|
$('#alert_placeholder3').replaceWith(alert_div_webtail + 'Stopping log tail</div>');
|
|
log_tail_switch = false;
|
|
log_tail_div.style.display = "none";
|
|
disableLogTail();
|
|
} else {
|
|
$('#alert_placeholder3').replaceWith(alert_div_webtail + 'Starting log tail</div>');
|
|
$("#logConsoleButton").text("Stop Logs Tail");
|
|
log_tail_switch = true;
|
|
log_tail_div.style.display = "block";
|
|
setLogRegex();
|
|
enableLogTail();
|
|
}
|
|
}
|
|
|
|
function startGameMode() {
|
|
|
|
if (game_mode_switch) {
|
|
game_mode_switch = false;
|
|
$("#gameModeButton").text("Enable Game Mode");
|
|
} else {
|
|
game_mode_switch = true;
|
|
$("#gameModeButton").text("Disable Game Mode");
|
|
}
|
|
|
|
if (game_buttons.style.display === "none") {
|
|
game_buttons.style.display = "block";
|
|
} else {
|
|
game_buttons.style.display = "none";
|
|
}
|
|
|
|
if (game_screen.style.display === "none") {
|
|
game_screen.style.display = "block";
|
|
} else {
|
|
game_screen.style.display = "none";
|
|
}
|
|
|
|
chaos_program_screen.style.display = "none";
|
|
programming_mode_buttons.style.display = "none";
|
|
|
|
}
|
|
|
|
function startProgrammingMode() {
|
|
|
|
if (programming_mode_switch) {
|
|
programming_mode_switch = false;
|
|
$("#programmingModeButton").text("Enable Prog. Mode");
|
|
} else {
|
|
programming_mode_switch = true;
|
|
$("#programmingModeButton").text("Disable Prog. Mode");
|
|
}
|
|
|
|
if (chaos_program_screen.style.display === "none") {
|
|
chaos_program_screen.style.display = "block";
|
|
} else {
|
|
chaos_program_screen.style.display = "none";
|
|
}
|
|
|
|
if (programming_mode_buttons.style.display === "none") {
|
|
programming_mode_buttons.style.display = "block";
|
|
} else {
|
|
programming_mode_buttons.style.display = "none";
|
|
}
|
|
|
|
game_buttons.style.display = "none";
|
|
game_screen.style.display = "none";
|
|
|
|
}
|
|
|
|
function showSpecialKeys() {
|
|
$('#showSpecialKeysModal').modal('show');
|
|
modal_opened = true;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
function closeKubeLinterModal() {
|
|
$('#kubeLinterModal').modal('hide');
|
|
modal_opened = false;
|
|
}
|
|
|
|
$('textarea').on('input', function() {
|
|
$('#alert_placeholder2').text('');
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|