github/kubeinvaders
1
0
Fork 0
mirror of https://github.com/lucky-sideburn/kubeinvaders.git synced 2026-05-17 14:16:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui improvements

Browse Source
This commit is contained in:
eugenio
2026-05-02 22:49:56 +02:00
parent 29877eeb9c
commit 7cd7fa63b6
4 changed files with 232 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
html/index.html
View File

@@ -13,6 +13,9 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js "></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/theme/dracula.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.18/mode/yaml/yaml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -180,10 +183,14 @@
</div>
<div class="sidebar" id="sidebar">
<a id="gameModeButton" onclick="saveK8sConnection(); startGameMode()">Enable Game Mode</a>
<a id="programmingModeButton" onclick="saveK8sConnection(); startProgrammingMode()" style="font-weight: normal;">Programming Mode</a>
<a href="#" onclick="saveK8sConnection(); showSetCurrentChaosContainer()" style="font-weight: normal;">Chaos Container Editor</a>
<a href="#" onclick="saveK8sConnection(); showSpecialKeys()" style="font-weight: normal;">Controls and options</a>
<div class="sidebar-brand">
<img src="./images/kubeinvaders_spaceship.png" alt="KubeInvaders" style="width: 34px; height: auto; margin-right: 8px; image-rendering: pixelated;">
<span style="font-size: 13px; font-weight: bold; color: #fff; letter-spacing: 0.04em;">KubeInvaders</span>
</div>
<a id="gameModeButton" onclick="saveK8sConnection(); startGameMode()"><i class="fas fa-gamepad me-2"></i>Enable Game Mode</a>
<a id="programmingModeButton" onclick="saveK8sConnection(); startProgrammingMode()" style="font-weight: normal;"><i class="fas fa-code me-2"></i>Programming Mode</a>
<a href="#" onclick="saveK8sConnection(); showSetCurrentChaosContainer()" style="font-weight: normal;"><i class="fas fa-cube me-2"></i>Chaos Container Editor</a>
<a href="#" onclick="saveK8sConnection(); showSpecialKeys()" style="font-weight: normal;"><i class="fas fa-sliders me-2"></i>Controls and Options</a>
</div>
<!-- Main content -->
@@ -771,103 +778,67 @@ EOF</pre>
<!-- END GAME MODE BUTTONS -->
<!-- START METRICS ROW -->
<div class="row" align="center" id="metricsPresetsRow">
<div style="margin-top: 1%;" class="text-justify" id="metricsGroup">
<style>
.status-label {
color: #444242; /* Colore per le etichette */
font-weight: bold;
font-size: 14px;
}
.status-value {
color: #000000; /* Colore blu scuro per i valori */
font-weight: normal;
font-size: 14px;
}
.status-unit {
color: #6c757d; /* Colore per le unità */
font-size: 12px;
}
.status-container {
margin-bottom: 8px; /* Spazio tra le righe */
}
</style>
<div class="status-container">
<span class="status-label">Selected Namespace:&nbsp;</span>
<span id="currentGameNamespace" class="status-value">NULL</span>
<div class="row" id="metricsPresetsRow">
<div style="margin-top: 1%; width: 100%; display: flex; flex-direction: column; align-items: center;" id="metricsGroup">
<div class="metrics-table-wrapper">
<table class="metrics-table">
<tbody>
<tr>
<td class="metrics-table-label"><span class="metric-dot metric-dot--ns"></span><i class="fas fa-layer-group me-2"></i>Selected Namespace</td>
<td id="currentGameNamespace" class="metrics-table-value metrics-table-value--text">NULL</td>
</tr>
<tr>
<td class="metrics-table-label"><span class="metric-dot metric-dot--deleted"></span><i class="fas fa-trash-can me-2"></i>Deleted Pods Total</td>
<td id="deleted_pods_total" class="metrics-table-value">0</td>
</tr>
<tr>
<td class="metrics-table-label"><span class="metric-dot metric-dot--jobs"></span><i class="fas fa-terminal me-2"></i>Chaos Jobs Total</td>
<td id="chaos_jobs_total" class="metrics-table-value">0</td>
</tr>
<tr>
<td class="metrics-table-label"><span class="metric-dot metric-dot--chaosp"></span><i class="fas fa-circle-dot me-2"></i>Current Chaos Pods</td>
<td id="current_chaos_job_pod" class="metrics-table-value">0</td>
</tr>
<tr>
<td class="metrics-table-label"><span class="metric-dot metric-dot--notrn"></span><i class="fas fa-circle-xmark me-2"></i>Not Running Pods</td>
<td id="pods_not_running_on" class="metrics-table-value">0</td>
</tr>
<tr>
<td class="metrics-table-label"><span class="metric-dot metric-dot--delay"></span><i class="fas fa-clock me-2"></i>Current Replicas Delay</td>
<td class="metrics-table-value"><span id="fewer_replicas_seconds">0</span> <span class="metrics-table-unit">sec</span></td>
</tr>
<tr>
<td class="metrics-table-label"><span class="metric-dot metric-dot--ldelay"></span><i class="fas fa-clock-rotate-left me-2"></i>Latest Replicas Delay</td>
<td class="metrics-table-value"><span id="latest_fewer_replicas_seconds">0</span> <span class="metrics-table-unit">sec</span></td>
</tr>
</tbody>
</table>
</div>
<div class="status-container">
<span class="status-label">Deleted Pods Total:&nbsp;</span>
<span id="deleted_pods_total" class="status-value">0</span>
</div>
<div class="status-container">
<span class="status-label">Chaos Jobs Total:&nbsp;</span>
<span id="chaos_jobs_total" class="status-value">0</span>
</div>
<div class="status-container">
<span class="status-label">Current Chaos Pods:&nbsp;</span>
<span id="current_chaos_job_pod" class="status-value">0</span>
</div>
<div class="status-container">
<span class="status-label">Not Running Pods:&nbsp;</span>
<span id="pods_not_running_on" class="status-value">0</span>
</div>
<div class="status-container">
<span class="status-label">Current Replicas State Delay:&nbsp;</span>
<span id="fewer_replicas_seconds" class="status-value">0</span>
<span class="status-unit">sec</span>
</div>
<div class="status-container">
<span class="status-label">Latest Replicas State Delay:&nbsp;</span>
<span id="latest_fewer_replicas_seconds" class="status-value">0</span>
<span class="status-unit">sec</span>
</div>
<div id="mainChaosMetrics" style="width: 100%; height: 70%; margin-top: 16px;"></div>
<div id="mainChaosMetrics" style="width: 100%; align-self: stretch; height: 300px; margin-top: 16px;"></div>
</div>
</div>
<!-- END METRICS ROW -->
<!-- START CHAOS PROGRAMMING MODE SCREEN -->
<div id="chaos-program-screen" style="display: none;">
<div class="">
<!-- <div class="row" style="margin-top: 2%;"> -->
<!-- <font size="2" class="text-kinv" id="loadTestingPresetsText">Load Testing Presets & Chaos Programs</font>
</div> -->
<div class="row">
<div class="btn-group" id="loadButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2%; padding-top: 2%; scrollbar-color: dark;">
</div>
<div class="prog-mode-toolbar">
<div class="btn-group" id="loadButtonGroup" role="group" aria-label="Preset buttons" style="overflow-x: auto; width: 100%; padding-bottom: 6px; padding-top: 6px; scrollbar-color: dark;">
</div>
<div class="btn-group" id="loadChaosProgramButtonGroup" role="group" aria-label="Saved programs" hidden style="overflow-x: auto; width: 100%; padding-bottom: 4px; padding-top: 4px; scrollbar-color: dark;">
</div>
<div class="row" hidden="true">
<div class="btn-group" id="loadChaosProgramButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2.0%; padding-top: 0.5%; scrollbar-color: dark;">
</div>
</div>
</div>
<div class="row" style="margin-top: 0,5%;">
<div id="alert_placeholder_programming_mode" style="margin-top: 1%; margin-bottom: 1%;"></div>
<div class="col">
<div class="row" width="10px">
<!-- <div class="col text-center">
<button type="button" id="saveChaosProgramButton" class="btn btn-light" onclick="savePreset('save-chaos-program')">SAVE</button>
</div> -->
<div class="col text-center">
<button type="button" id="runChaosProgramButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button>
<div id="alert_placeholder_programming_mode" style="margin-top: 8px; margin-bottom: 8px;"></div>
<div class="row g-3">
<div class="col-lg-8">
<div class="prog-mode-editor-panel">
<div class="prog-mode-editor-toolbar">
<span class="prog-mode-editor-title"><i class="fas fa-file-code me-2"></i>Chaos Program</span>
<button type="button" id="runChaosProgramButton" class="btn btn-sm prog-run-btn" onclick="runChaosProgram()">
<i class="fas fa-play me-1"></i>RUN
</button>
</div>
</div>
<form>
<div class="form-group">
<label for="chaosProgramTextArea"></label>
<textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-weight: normal; font-size: small;">
<form>
<textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-weight: normal; font-size: small;">
chaos-codename: CODENAME_PLACEHOLDER
experiments:
- name: cpu_attack_exp
@@ -893,20 +864,23 @@ k8s_jobs:
command: "stress-ng"
args:
- --version
</textarea>
</textarea>
</form>
</div>
</form>
</div>
<div class="col" style="margin-top: 4%; overflow-y: scroll; height:900px;">
<div id="chaosProgramFlow">
<div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert1" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 1</div></div>
<img src="images/down-arrow.png" width="30" height="30" style="margin-bottom: 2%;">
<div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert2" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 2</div></div>
<div class="col-lg-4">
<div class="prog-mode-flow-panel">
<div class="prog-mode-flow-title"><i class="fas fa-sitemap me-2"></i>Experiment Flow</div>
<div id="chaosProgramFlow" style="padding: 12px; overflow-y: auto; max-height: 840px;">
<div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert1" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 1</div></div>
<img src="images/down-arrow.png" width="30" height="30" style="margin-bottom: 2%;">
<div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert2" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 2</div></div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAOS PROGRAMMING MODE SCREEN -->
<!-- END CHAOS PROGRAMMING MODE SCREEN -->
<!-- START GAME MODE SCREEN -->
<div id="game-screen" style="display: none;">