Skip to content

Commit

Permalink
some improvements...
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucky-sideburn
lucky-sideburn committed Aug 29, 2024
1 parent 61fc298 commit 61e04d1
Show file tree
Hide file tree
Showing 14 changed files with 224 additions and 147 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
develop.tar
utils
dev-tools/*.tgz
.vagrant
Expand Down
6 changes: 6 additions & 0 deletions html5/all.min.css
View file

Large diffs are not rendered by default.

59 changes: 34 additions & 25 deletions html5/chaos_report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,39 +74,43 @@ function addPostUploadFile(selectedValue) {

function chaosReportHttpEndpointAdd() {
$("#addSiteAreaChaosReport").html(`
<div class="row">
<div class="col col-xl-10" sytle="margin-top: 2%;">
<label for="chaosReportCheckSiteURL">Ingress Host List</label>
<select id="ingressHostList" class="form-select" aria-label="Ingress Host List" onchange="setChaosReportURL(this)">
</select>
<div class="row">
<div class="col col-xl-10" style="margin-top: 2%;">
<label for="ingressHostList">Ingress Host List</label>
<select id="ingressHostList" class="form-select" aria-label="Ingress Host List" onchange="setChaosReportURL(this)">
</select>
</div>
</div>
<div class="row" style="margin-top: 2%;">
</div>
<div class="row" style="margin-top: 2%;">
<div class="col col-xl-10">
<label for="chaosReportCheckSiteURL">URL</label>
<input type='text' class='input-lg' id='chaosReportCheckSiteURL' value='' style='margin-top: 1%; width: 80%'>
<label for="chaosReportCheckSiteURL">URL</label>
<input type="text" class="form-control input-lg" id="chaosReportCheckSiteURL" value="" style="margin-top: 1%; width: 80%;">
</div>
</div>
<div class="row">
</div>
<div class="row" style="margin-top: 2%;">
<div class="col col-xl-10">
<label for="chaosReportCheckSiteURLMethod" style='margin-top: 1%;'>method</label>
<select id="chaosReportCheckSiteURLMethod" class="input-sm" aria-label="method" onChange="addPostUploadFile(this.options[this.selectedIndex].value)">
<option value="GET">GET</option>
<option value="POST">POST</option>
</select>
<label for="chaosReportCheckSiteURLMethod" style="margin-top: 1%;">Method</label>
<select id="chaosReportCheckSiteURLMethod" class="form-select input-sm" aria-label="Method" onchange="addPostUploadFile(this.value)">
<option value="GET">GET</option>
<option value="POST">POST</option>
</select>
</div>
</div>
<div class="row">
</div>
<div class="row" style="margin-top: 2%;">
<div class="col col-xl-10">
<div id="chaosReportUploadFileDiv"></div>
<div id="chaosReportUploadFileDiv"></div>
</div>
</div>
<div class="row">
</div>
<div class="row" style="margin-top: 2%;">
<div class="col col-xl-10">
<label for="chaosReportCheckSiteURLHeaders">HEADERS</label>
<input type='text' class='input-sm' id='chaosReportCheckSiteURLHeaders' value='{"Content-Type": "application/json; charset=utf-8"}' style='margin-top: 1%; margin-bottom: 1%; width: 80%;'><br>
<label for="chaosReportCheckSiteURLHeaders">Headers</label>
<input type="text" class="form-control input-sm" id="chaosReportCheckSiteURLHeaders" value='{"Content-Type": "application/json; charset=utf-8"}' style="margin-top: 1%; margin-bottom: 1%; width: 80%;">
</div>
</div>
</div>
`);

if (is_demo_mode()) {
Expand Down Expand Up @@ -330,6 +334,11 @@ function updateStatusCodePieChart(projectName) {
name: '404',
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["405"],
name: '405',
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["Connection Error"],
name: 'Connection Error',
Expand Down Expand Up @@ -444,7 +453,7 @@ option = {
type: 'line',
smooth: true,
itemStyle: {
color: 'green'
color: 'white'
}
}
]
Expand Down
41 changes: 41 additions & 0 deletions html5/dracula.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
Name: dracula
Author: Michael Kaminsky (http://github.com/mkaminsky11)
Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
*/


.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
background-color: #282a36 !important;
color: #f8f8f2 !important;
border: none;
}
.cm-s-dracula .CodeMirror-gutters { color: #282a36; }
.cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
.cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; }
.cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
.cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
.cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
.cm-s-dracula span.cm-comment { color: #6272a4; }
.cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; }
.cm-s-dracula span.cm-number { color: #bd93f9; }
.cm-s-dracula span.cm-variable { color: #50fa7b; }
.cm-s-dracula span.cm-variable-2 { color: white; }
.cm-s-dracula span.cm-def { color: #50fa7b; }
.cm-s-dracula span.cm-operator { color: #ff79c6; }
.cm-s-dracula span.cm-keyword { color: #ff79c6; }
.cm-s-dracula span.cm-atom { color: #bd93f9; }
.cm-s-dracula span.cm-meta { color: #f8f8f2; }
.cm-s-dracula span.cm-tag { color: #ff79c6; }
.cm-s-dracula span.cm-attribute { color: #50fa7b; }
.cm-s-dracula span.cm-qualifier { color: #50fa7b; }
.cm-s-dracula span.cm-property { color: #66d9ef; }
.cm-s-dracula span.cm-builtin { color: #50fa7b; }
.cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: #ffb86c; }

.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
.cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

94 changes: 45 additions & 49 deletions html5/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./bootstrap-5.0.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="./codemirror.css">
<link rel="stylesheet" href="./dracula.css">
<script src="./codemirror.js"></script>

<style>
Expand Down Expand Up @@ -105,22 +107,21 @@
<div class="sidebar" id="sidebar">
<a id="gameModeButton" onclick="startGameMode()">Game Mode</a>
<a id="programmingModeButton" onclick="startProgrammingMode()">Programming Mode</a>
<a href="#" onclick="showSetCurrentChaosContainer()">Chaos Container Editor</a>
<a href="#" onclick="showSpecialKeys()">Show Special Keys</a>
<a href="#" onclick="showCurrentChaosContainer()">Show Current Chaos Container for nodes</a>
<a href="#" onclick="showSetCurrentChaosContainer()">Set Custom Chaos Container for nodes</a>
</div>

<!-- Main content -->
<div class="main-content">
<!-- Navbar -->
<span style="color:white" class="toggler-icon" onclick="toggleSidebar()">
<i class="fas fa-bars"></i>
</span>
<span style="color:white" class="toggler-icon" onclick="toggleSidebar()">
<i class="fas fa-bars"></i>
</span>


<div id="main-game-div" style="display: block;">
<!-- Modal -->
<div class="modal fade" id="currentChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">
Expand All @@ -147,22 +148,18 @@

<!-- Modal -->
<div class="modal fade" id="setChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">Set Chaos Container Definition (Click on the code editor if you don't see anything.) - This job defines the chaos experiment that are executed when you target Kubernetes nodes in game mode</h6>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleFormControlTextarea1" style="margin-bottom: 3%;">Chaos Container Definition</label>
<textarea class="form-control" id="currentChaosContainerJsonTextArea" rows="20"></textarea>
</div>
<div class="form-group">
<p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
</div>
<div class="modal-footer">
<button type="button" id="saveButton" class="btn btn-light" onclick="setChaosContainer()">Save</button>
<button type="button" id="closeButton3" class="btn btn-dark" data-dismiss="modal" onclick="closeSetChaosContainerModal()">Close</button>
</div>
</form>
<textarea id="currentChaosContainerJsonTextArea"></textarea>
<p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
<div class="modal-footer">
<button type="button" id="saveButton" class="btn btn-light" onclick="setChaosContainer()">Save</button>
<button type="button" id="closeButton3" class="btn btn-dark" data-dismiss="modal" onclick="closeSetChaosContainerModal()">Close</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -232,7 +229,7 @@
</div> -->
<div class="row">
<div class="col col-xl-10">
<label for="chaosReportHttpEndpointButton" style="margin-top: 1%;">add an http endpoint to be analyzed during the chaos engineering session</label>
<label for="chaosReportHttpEndpointButton" style="margin-top: 1%;">Add an HTTP endpoint to be analyzed during the chaos engineering session</label>
</div>
</div>
<!-- <div class="row">
Expand Down Expand Up @@ -299,31 +296,30 @@ <h2 class="accordion-header" id="guide-headingThree">
</h2>
<div id="guide-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Dear user, thank you for installing kubeinvaders!<br>
<br>
This is a chaos engineering tool written by luckysideburn and friends from https://platformengineering.it for the community of kubernetes users, software developers, and admins.<br>
It was born in 2019 as a gamified chaos engineering tool, and we are evolving it into a more serious instrument :d <br>
here's how it works<br>

For reports, bugs, ideas you can open issue on the project github repo https://github.com/lucky-sideburn/kubeinvaders or write to luckysideburn [at] gmail [dot] com <br>

<br>
<font color="blue">[[game mode button]]</font><br>
Enabling the game console allows you to kill pods and launch workloads to stress cluster nodes (check "show keys and options" to understand how to do it). You can also jump between namespace and many other things.<br>
<br>
<font color="blue">[[add http check & chaos report checkbox]]</font><br>
Use it to activate the monitoring of an ingress and generate real-time reporting. it's very useful to know what happens to your applications during chaos sessions. for now, we monitor the elapsed time of http calls and status codes. also, you have some very useful default metrics:<br>
<br>
<font color="gren">Selected namespace</font> => indicates the current namespace focused on by the tool. you can jump between selected namespaces during installation.<br>
<br>
<font color="gren">Deleted pods total</font> => total number of killed pods.<br>
<br>
<font color="gren">Current chaos pods</font> => when the node stress test mode is activated, this metric indicates the number of jobs stressing your cluster.<br>
<br>
<font color="gren">Current replicas state delay</font> => a very important metric, indicates how long your cluster takes to return to the desired state that was before the chaos engineering session.<br>
<br>
<font color="blue">[[enable prog. mode button (under development)]]</font><br>
Through yaml programming, you can define your own chaos engineering experiments and execute them. we have preloaded some presets for various open-source tools to stress test (this feature is still in development, so contributions are welcome).<br>
Thank you for installing Kubeinvaders!

This is a chaos engineering tool developed by Luckysideburn and contributors from <a href="https://platformengineering.it">platformengineering.it</a> for the Kubernetes community, including software developers and admins.<br><br>

Kubeinvaders started in 2019 as a gamified chaos engineering tool, and we are continually evolving it into a more sophisticated instrument :D<br><br>

Here’s how it works:<br><br>

For reports, bugs, or ideas, feel free to open an issue on the project's <a href="https://github.com/lucky-sideburn/kubeinvaders">GitHub repository</a> or contact Luckysideburn at <a href="mailto:[email protected]">[email protected]</a>.<br><br>

<font color="blue">Game Mode</font><br>
Enabling the game console allows you to kill pods and launch workloads to stress cluster nodes (check “Show keys and options” to learn how). You can also switch between namespaces and perform many other tasks.<br><br>

<font color="blue">Check HTTP</font><br>
Use this to monitor an ingress and generate real-time reports. It’s very useful for understanding what happens to your applications during chaos sessions. Currently, we monitor HTTP call durations and status codes. Additionally, you’ll find some very useful default metrics:<br><br>

<font color="green">Selected Namespace</font> => Indicates the current namespace focused on by the tool. You can switch between selected namespaces during installation.<br><br>
<font color="green">Deleted Pods Total</font> => The total number of killed pods.<br><br>
<font color="green">Current Chaos Pods</font> => When the node stress test mode is activated, this metric shows the number of jobs stressing your cluster.<br><br>
<font color="green">Current Replicas State Delay</font> => An important metric that shows how long your cluster takes to return to the desired state after a chaos engineering session.<br><br>

<font color="blue">Programming Mode (Under Development)</font><br>
Using YAML programming, you can define your own chaos engineering experiments and execute them. We have preloaded some presets for various open-source tools to stress test. This feature is still in development, so contributions are welcome.

</div>
</div>
</div>
Expand Down Expand Up @@ -361,7 +357,7 @@ <h2 class="accordion-header" id="guide-headingThree">
<div class="col text-center" style="margin-bottom: 0%;">
<input class="form-check-input" type="checkbox" value="" id="flagChaosReport" onclick="wrapShowPrepareChaosReportModal(this)">
<label class="form-check-label text-kinv" for="flexCheckDefault">
Add HTTP check & Chaos Report
Check HTTP
</label>
</div>
</div>
Expand Down Expand Up @@ -451,7 +447,7 @@ <h2 class="accordion-header" id="specialkeys-headingThree">
<!-- <button type="button" id="loadVault" class="btn btn-light btn-md" onclick="loadPreset('vault', 'python')">Vault</button> -->
</div>
</div>
<div class="row">
<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>
Expand Down Expand Up @@ -539,7 +535,7 @@ <h2 class="accordion-header" id="specialkeys-headingThree">
<td><p id="chaosReportSessionTimeDiv" class="text-kinv"></p></td>
</tr>
<tr>
<td class="td-grey">Checked URL</td>
<td class="td-grey">Check HTTP URL</td>
<td><p id="chaosReportCheckSiteURLDiv" class="text-kinv"></p></td>
</tr>
</tr>
Expand Down
Loading

0 comments on commit 61e04d1

Please sign in to comment.