github/kubeinvaders
1
0
Fork 0
mirror of https://github.com/lucky-sideburn/kubeinvaders.git synced 2026-08-23 21:46:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed

Browse Source
This commit is contained in:
luckysideburn
2024-03-02 02:00:42 +00:00
parent 5950665330
commit afcbbc85cd
5 changed files with 195 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html5/chaos_report.js
+146 -19
View File
@@ -79,13 +79,15 @@ function checkIfSomeItemIsEmpty(dict, except) {
return false;
}
function chaosReportKeepAlive(chaosReportprojectName) {
var oReq = new XMLHttpRequest();
oReq.open("GET", k8s_url + "/chaos/report/keepalive?project=" + chaosReportprojectName, true);
oReq.setRequestHeader("Content-Type", "application/json");
oReq.send();
}
function sendSavedChaosReport() {
startGameMode()
chaos_report_switch = true;
document.getElementById("httpStatsCanvasDiv").style.display = "block";
document.getElementById("chartDiv").style.display = "block";
drawCanvasHTTPStatusCodeStats()
var presetBodyDict = {
"chaosReportAuthor": $("#chaosReportAuthor").val(),
"chaosReportProject": $("#chaosReportProject").val(),
@@ -95,10 +97,21 @@ function sendSavedChaosReport() {
"chaosReportCheckSiteURLPayload": chaos_report_post_data
}
if (!isValidURL(presetBodyDict["chaosReportCheckSiteURL"])) {
alert("Invalid URL");
return;
}
if (chaos_report_start_date == "") {
chaos_report_start_date = new Date();
}
startGameMode()
chaos_report_switch = true;
document.getElementById("httpStatsCanvasDiv").style.display = "block";
document.getElementById("chartDiv").style.display = "block";
drawCanvasHTTPStatusCodeStats();
chaosReportprojectName = presetBodyDict["chaosReportProject"];
$("#chaosReportAuthorDiv").html(presetBodyDict["chaosReportAuthor"]);
$("#chaosReportProjectDiv").html(presetBodyDict["chaosReportProject"]);
@@ -106,10 +119,6 @@ function sendSavedChaosReport() {
$("#chaosReportSessionTimeDiv").html(diffBetweenTwoDates(chaos_report_start_date, new Date()) + " seconds");
$("#chaosReportCheckSiteURLDiv").html(presetBodyDict["chaosReportCheckSiteURL"]);
if (!isValidURL(presetBodyDict["chaosReportCheckSiteURL"])) {
alert("Invalid URL");
return;
}
if (headerAreLikePythonRequestHeaders(presetBodyDict["chaosReportCheckSiteURLHeaders"]) == false) {
alert("Invalid headers. Insert them like this: \"Content-Type\": \"application/json; charset=utf-8\";\"Authorization\"");
@@ -149,7 +158,8 @@ function sendSavedChaosReport() {
if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
myHTTPElapsedChart.resize();
}
document.getElementById("myCanvas").scrollIntoView(true);
document.getElementById("flagChaosReport").checked = true;
}
function readContentOfUploadedFile() {
@@ -176,7 +186,6 @@ function saveChaosReport() {
}
function updateElapsedTimeArray(projectName) {
$("#chaosReportSessionTimeDiv").html(diffBetweenTwoDates(chaos_report_start_date, new Date()) + " seconds");
console.log("[SAVE-CHAOS-REPORT-CONF] Diff Between Dates: " + toString(diffBetweenTwoDates(chaos_report_start_date, new Date())));
console.log("[SAVE-CHAOS-REPORT-CONF] Updating elapsed time array for project: " + projectName);
@@ -195,6 +204,94 @@ function updateElapsedTimeArray(projectName) {
}
};;
oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
oReq.setRequestHeader("Content-Type", "application/json");
oReq.send();
updateStatusCodePieChart(projectName);
}
function updateStatusCodePieChart(projectName) {
console.log("[SAVE-CHAOS-REPORT-CONF] Updating Status Code Pie Chart for project: " + projectName);
var oReq = new XMLHttpRequest();
var redis_key = projectName + "_check_url_status_code";
console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
oReq.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
var status_code = this.responseText.trim();
console.log("[SAVE-CHAOS-REPORT-CONF] Status Code Pie Chart received from Redis: |" + status_code + "|");
chart_status_code_dict[status_code] = chart_status_code_dict[status_code] + 1
myHTTPStatusCodeChart.setOption({
series: [
{
type: 'pie',
data: [
{
value: chart_status_code_dict["200"],
name: '200',
itemStyle: {color: 'green'},
},
{
value: chart_status_code_dict["500"],
name: '500',
itemStyle: {color: 'red'},
},
{
value: chart_status_code_dict["502"],
name: '502',
itemStyle: {color: 'red'},
},
{
value: chart_status_code_dict["503"],
name: '503',
itemStyle: {color: 'red'},
},
{
value: chart_status_code_dict["504"],
name: '504',
itemStyle: {color: 'red'},
},
{
value: chart_status_code_dict["400"],
name: '400',
itemStyle: {color: 'yellow'},
},
{
value: chart_status_code_dict["401"],
name: '401',
itemStyle: {color: 'yellow'},
},
{
value: chart_status_code_dict["403"],
name: '403',
itemStyle: {color: 'yellow'},
},
{
value: chart_status_code_dict["404"],
name: '404',
itemStyle: {color: 'yellow'},
},
{
value: chart_status_code_dict["Connection Error"],
name: 'Connection Error',
itemStyle: {color: 'black'},
},
{
value: chart_status_code_dict["Other"],
name: 'Other',
itemStyle: {color: 'grey'},
},
],
roseType: 'area'
}
]
});
}
};;
oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
oReq.setRequestHeader("Content-Type", "application/json");
oReq.send();
@@ -416,29 +513,59 @@ option = {
type: 'pie',
data: [
{
value: 23,
value: chart_status_code_dict["200"],
name: '200',
itemStyle: {color: 'green'},
},
{
value: 34,
value: chart_status_code_dict["500"],
name: '500',
itemStyle: {color: 'red'},
},
{
value: 34,
value: chart_status_code_dict["502"],
name: '502',
itemStyle: {color: 'grey'},
itemStyle: {color: 'red'},
},
{
value: 34,
value: chart_status_code_dict["503"],
name: '503',
itemStyle: {color: 'red'},
},
{
value: chart_status_code_dict["504"],
name: '504',
itemStyle: {color: 'red'},
},
{
value: chart_status_code_dict["400"],
name: '400',
itemStyle: {color: 'yellow'},
},
{
value: chart_status_code_dict["401"],
name: '401',
itemStyle: {color: 'yellow'},
},
{
value: chart_status_code_dict["403"],
name: '403',
itemStyle: {color: 'yellow'},
},
{
value: chart_status_code_dict["404"],
name: '404',
itemStyle: {color: 'yellow'},
},
{
value: chart_status_code_dict["Connection Error"],
name: 'Connection Error',
itemStyle: {color: 'black'},
},
{
value: 34,
name: 'other',
itemStyle: {color: 'yellow'},
value: chart_status_code_dict["Other"],
name: 'Other',
itemStyle: {color: 'grey'},
},
],
roseType: 'area'
html5/images/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 34 KiB

html5/index.html
+15 -15
View File
@@ -152,11 +152,11 @@
<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">
<!-- <div class="row">
<div class="col col-xl-10">
<button type="button" id="chaosReportHttpEndpointButton" class="btn btn-light-saved" style="margin-top: 1%; margin-bottom: 1%;" onclick="chaosReportHttpEndpointAdd()">Configure Site</button>
</div>
</div>
</div> -->
<div class="row">
<div class="col col-xl-10">
<div id="addSiteAreaChaosReport"></div>
@@ -170,7 +170,7 @@
</div>
<div class="modal-footer">
<button type="button" id="savePresetButton" class="btn btn-light" onclick="saveChaosReport()">Save</button>
<button type="button" id="closeButton4" class="btn btn-dark" data-dismiss="modal" onclick="closePrepareChaosReportModal()">Close</button>
<button type="button" id="closeButton4" class="btn btn-dark" data-dismiss="modal" onclick="closePrepareChaosReportModalAndUncheck()">Close</button>
</div>
</form>
</div>
@@ -212,7 +212,7 @@
<button type="button" id="gameModeButton" class="btn btn-light btn-green" onclick="startGameMode()">Game Mode</button>
</div>
<div class="col text-center" style="margin-bottom: 0%;">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="showPrepareChaosReportModal(this)">
<input class="form-check-input" type="checkbox" value="" id="flagChaosReport" onclick="showPrepareChaosReportModal(this)">
<label class="form-check-label text-kinv" for="flexCheckDefault">
Add HTTP check & Chaos Report
</label>
@@ -268,15 +268,15 @@
<div class="row text-justify" align="center" id="metricsPresetsRow">
<div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup">
<span style="color: #000000;" class="text-kinv text-wrap" id="currentGameNamespaceLabel">Selected Namespace:&nbsp;&nbsp;<span id="currentGameNamespace" style="color: #3ac961;" class="text-break">NULL</span></span><br>
<span style="color: #000000;" class="text-kinv" id="deletedPodsTotalText">Deleted Pods Total:&nbsp;&nbsp;<span id="deleted_pods_total" style="color: #3ac961">0</span></span><br>
<span style="color: #000000" class="text-kinv" id="chaosJobTotalText">Chaos Jobs Total:&nbsp;&nbsp;<span id="chaos_jobs_total" style="color: #3ac961">0</span></span><br>
<span style="color: #b2afaf;" class="text-kinv text-wrap" id="currentGameNamespaceLabel">Selected Namespace:&nbsp;&nbsp;<span id="currentGameNamespace" style="color: #3ac961;" class="text-break">NULL</span></span><br>
<span style="color: #b2afaf;" class="text-kinv" id="deletedPodsTotalText">Deleted Pods Total:&nbsp;&nbsp;<span id="deleted_pods_total" style="color: #3ac961">0</span></span><br>
<span style="color: #b2afaf" class="text-kinv" id="chaosJobTotalText">Chaos Jobs Total:&nbsp;&nbsp;<span id="chaos_jobs_total" style="color: #3ac961">0</span></span><br>
<span style="color: #000000" class="text-kinv" id="currentChaosPodsText">Current Chaos Pods:&nbsp;&nbsp;<span id="current_chaos_job_pod" style="color: #3ac961">0</span></span><br>
<span style="color: #000000" class="text-kinv" id="podNotRunningText">Not Running Pods:&nbsp;&nbsp;<span id="pods_not_running_on" style="color: #3ac961">0</span></span><br>
<span style="color: #b2afaf" class="text-kinv" id="currentChaosPodsText">Current Chaos Pods:&nbsp;&nbsp;<span id="current_chaos_job_pod" style="color: #3ac961">0</span></span><br>
<span style="color: #b2afaf" class="text-kinv" id="podNotRunningText">Not Running Pods:&nbsp;&nbsp;<span id="pods_not_running_on" style="color: #3ac961">0</span></span><br>
<span style="color: #000000" class="text-kinv" id="currentReplicasStateDelayText">Current Replicas State Delay:&nbsp;&nbsp;</span><span id="fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font></span><br>
<span style="color: #000000" class="text-kinv" id="latestReplicasStateDelayText">Latest Replicas State Delay:&nbsp;&nbsp;<span id="latest_fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font>&nbsp;</span><br>
<span style="color: #b2afaf" class="text-kinv" id="currentReplicasStateDelayText">Current Replicas State Delay:&nbsp;&nbsp;</span><span id="fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font></span><br>
<span style="color: #b2afaf" class="text-kinv" id="latestReplicasStateDelayText">Latest Replicas State Delay:&nbsp;&nbsp;<span id="latest_fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;sec</font>&nbsp;</span><br>
<div id="mainChaosMetrics" style="width: 50%;height: 50%; margin-top: 1%;"></div>
<!-- <span style="color: #000000" class="text-kinv" id="podsMatchRegexText">PODs match regex:&nbsp;&nbsp;</span><span id="pods_match_regex" style="color: #3ac961">0</span><font color="#4f4f4f">&nbsp;</font></span> -->
@@ -384,7 +384,7 @@ experiments:
<div id="game-screen" style="display: none;">
<div class="row" style="margin-top: 2%; display: none;" id="httpStatsCanvasDiv">
<div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup">
<table class="table">
<table class="table" style="color:#b2afaf;">
<thead>
<tr>
<th scope="col"></th>
@@ -415,10 +415,10 @@ experiments:
</table>
</div>
<div id="chartDiv" style="display: none;">
<label for="httpElapsedChart" style="margin-left: 2%; margin-top: 2%">HTTP Elapsed (seconds)</label>
<div id="httpElapsedChart" style="width: 100%; height: 400px;" ></div>
<label for="httpElapsedChart" style="margin-left: 2%; margin-top: 3%">HTTP Elapsed (seconds)</label>
<div id="httpElapsedChart" style="width: 100%; height: 400px; margin-top: 0%;" ></div>
<label for="httpStatusCodeChart" style="margin-left: 2%;">HTTP Status Code</label>
<div id="httpStatusCodeChart" style="width: 50%; height: 200;"></div>
<div id="httpStatusCodeChart" style="width: 100%; height: 200px;"></div>
</div>
</div>
<div class="row" style="margin-top: 2%;">
html5/kubeinvaders.js
+26 -1
View File
@@ -108,6 +108,19 @@ var chart_current_chaos_job_pod = 0;
var chart_pods_not_running_on = 0;
var chart_fewer_replicas_seconds = 0;
var chart_latest_fewer_replicas_seconds = 0;
var chart_status_code_dict = {
"200": 0,
"500": 0,
"502": 0,
"503": 0,
"504": 0,
"400": 0,
"401": 0,
"403": 0,
"404": 0,
"Connection Error": 0,
"Other": 0
};
function getCodeName() {
var oReq = new XMLHttpRequest();
@@ -846,8 +859,20 @@ window.setInterval(function backgroundTasks() {
if (chaos_report_switch) {
updateElapsedTimeArray(chaosReportprojectName);
updateChaosReportStartTime(chaosReportprojectName)
updateChaosReportStartTime(chaosReportprojectName);
drawCanvasHTTPStatusCodeStats();
chaosReportKeepAlive(chaosReportprojectName);
// if(myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined){
// myHTTPStatusCodeChart.resize();
// }
// if(myMainChaosMetrics != null && myMainChaosMetrics != undefined){
// myMainChaosMetrics.resize();
// }
// if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
// myHTTPElapsedChart.resize();
// }
}
}, 2000)
html5/modals.js
+8
View File
@@ -48,6 +48,7 @@ function showPrepareChaosReportModal(checkbox) {
setCodeNameToTextInput("chaosReportAuthor");
setCodeNameToTextInput("chaosReportProject");
setModalState(true);
chaosReportHttpEndpointAdd();
//$("#httpStatsCanvasDiv").style.display = "block";
} else {
closePrepareChaosReportModal();
@@ -56,5 +57,12 @@ function showPrepareChaosReportModal(checkbox) {
function closePrepareChaosReportModal() {
$('#prepareChaosReportModal').modal('hide');
document.getElementById("flagChaosReport").checked = false;
setModalState(false);
}
function closePrepareChaosReportModalAndUncheck() {
$('#prepareChaosReportModal').modal('hide');
document.getElementById("flagChaosReport").checked = false;
setModalState(false);
}