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

fix: font weight&position

Browse Source
This commit is contained in:
devengaging
2024-04-04 16:32:42 +01:00
parent d17346e404
commit e1bf35daeb
5 changed files with 87 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
html5/chaos_report.js
View File

@@ -1,5 +1,5 @@
function setChaosReportURL(select) {
var selectedValue = select.options[select.selectedIndex].value;
var selectedValue = select.options[select.selectedIndex].value;
document.getElementById("chaosReportCheckSiteURL").value = selectedValue;
}
@@ -26,24 +26,24 @@ function parseIngressListJSON(ingressList) {
}
function resizeCharts() {
if(myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined){
if (myHTTPStatusCodeChart != null && myHTTPStatusCodeChart != undefined) {
myHTTPStatusCodeChart.resize();
}
if(myMainChaosMetrics != null && myMainChaosMetrics != undefined){
if (myMainChaosMetrics != null && myMainChaosMetrics != undefined) {
myMainChaosMetrics.resize();
}
if(myHTTPElapsedChart != null && myHTTPElapsedChart != undefined){
if (myHTTPElapsedChart != null && myHTTPElapsedChart != undefined) {
myHTTPElapsedChart.resize();
}
}
function getIngressLists() {
var oReq = new XMLHttpRequest();
var oReq = new XMLHttpRequest();
oReq.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
console.log("[SAVE-CHAOS-REPORT-INGRESS-LISTS]" + JSON.parse(this.responseText));
parseIngressListJSON(JSON.parse(this.responseText));
}
}
};;
oReq.open("GET", k8s_url + "/kube/ingress/get?namespace=" + namespace, true);
oReq.setRequestHeader("Content-Type", "application/json");
@@ -108,8 +108,8 @@ function chaosReportHttpEndpointAdd() {
</div>
</div>
`);
if(is_demo_mode()) {
if (is_demo_mode()) {
document.getElementById("chaosReportCheckSiteURL").readOnly = true;
}
}
@@ -121,7 +121,7 @@ function isValidURL(string) {
return false;
}
return true;
}
}
function headerAreLikePythonRequestHeaders(headers) {
var headersDict = {};
@@ -210,7 +210,7 @@ function sendSavedChaosReport() {
oReq.setRequestHeader("Content-Type", "application/json");
// console.log("[SAVE-CHAOS-REPORT-CONF] Sending configuration to Nginx: " + JSON.stringify(presetBodyDict));
oReq.send(JSON.stringify(presetBodyDict));
closePrepareChaosReportModal();
closePrepareChaosReportModal();
resizeCharts();
document.getElementById("myCanvas").scrollIntoView(true);
document.getElementById("flagChaosReport").checked = true;
@@ -244,11 +244,11 @@ 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);
var oReq = new XMLHttpRequest();
var redis_key = projectName + "_check_url_elapsed_time";
// console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
oReq.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// console.log("[SAVE-CHAOS-REPORT-CONF] Elapsed time array received from Redis: " + parseFloat(this.responseText));
@@ -256,7 +256,7 @@ function updateElapsedTimeArray(projectName) {
while (chaos_report_http_elapsed_time_array.length > 40) {
chaos_report_http_elapsed_time_array.shift();
}
}
}
};;
oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -267,17 +267,17 @@ function updateElapsedTimeArray(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
chart_status_code_dict[status_code] = chart_status_code_dict[status_code] + 1
myHTTPStatusCodeChart.setOption({
series: [
@@ -287,64 +287,64 @@ function updateStatusCodePieChart(projectName) {
{
value: chart_status_code_dict["200"],
name: '200',
itemStyle: {color: 'green'},
itemStyle: { color: 'green' },
},
{
value: chart_status_code_dict["500"],
name: '500',
itemStyle: {color: 'red'},
itemStyle: { color: 'red' },
},
{
value: chart_status_code_dict["502"],
name: '502',
itemStyle: {color: 'red'},
itemStyle: { color: 'red' },
},
{
value: chart_status_code_dict["503"],
name: '503',
itemStyle: {color: 'red'},
itemStyle: { color: 'red' },
},
{
value: chart_status_code_dict["504"],
name: '504',
itemStyle: {color: 'red'},
itemStyle: { color: 'red' },
},
{
value: chart_status_code_dict["400"],
name: '400',
itemStyle: {color: 'yellow'},
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["401"],
name: '401',
itemStyle: {color: 'yellow'},
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["403"],
name: '403',
itemStyle: {color: 'yellow'},
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["404"],
name: '404',
itemStyle: {color: 'yellow'},
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["Connection Error"],
name: 'Connection Error',
itemStyle: {color: 'black'},
itemStyle: { color: 'black' },
},
{
value: chart_status_code_dict["Other"],
name: 'Other',
itemStyle: {color: 'grey'},
itemStyle: { color: 'grey' },
},
],
roseType: 'area'
}
]
});
}
}
};;
oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -354,15 +354,15 @@ function updateStatusCodePieChart(projectName) {
function updateChaosReportStartTime(projectName) {
// console.log("[SAVE-CHAOS-REPORT-CONF] Updating Start Time for project: " + projectName);
var oReq = new XMLHttpRequest();
var redis_key = projectName + "_check_url_start_time";
// console.log("[SAVE-CHAOS-REPORT-CONF] Redis key: " + redis_key);
oReq.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
$("#chaosReportDateDiv").html(this.responseText);
}
}
};;
oReq.open("GET", k8s_url + "/chaos/redis/get?key=" + redis_key, true);
@@ -391,11 +391,11 @@ function updateMainMetricsChart() {
name: 'Not Running Pods'
},
{
value: Number(chart_fewer_replicas_seconds),
value: Number(chart_fewer_replicas_seconds),
name: 'Current Replicas State Delay'
},
{
value: Number(chart_latest_fewer_replicas_seconds),
value: Number(chart_latest_fewer_replicas_seconds),
name: 'Latest Replicas State Delay'
}
],
@@ -407,7 +407,7 @@ function updateMainMetricsChart() {
function drawCanvasHTTPStatusCodeStats() {
// // console.log("[SAVE-CHAOS-REPORT-CONF] Updating chart");
myHTTPElapsedChart.setOption({
xAxis: {},
yAxis: {
@@ -491,57 +491,57 @@ option = {
{
value: chart_status_code_dict["200"],
name: '200',
itemStyle: {color: 'green'},
itemStyle: { color: 'green' },
},
{
value: chart_status_code_dict["500"],
name: '500',
itemStyle: {color: 'red'},
itemStyle: { color: 'red' },
},
{
value: chart_status_code_dict["502"],
name: '502',
itemStyle: {color: 'red'},
itemStyle: { color: 'red' },
},
{
value: chart_status_code_dict["503"],
name: '503',
itemStyle: {color: 'red'},
itemStyle: { color: 'red' },
},
{
value: chart_status_code_dict["504"],
name: '504',
itemStyle: {color: 'red'},
itemStyle: { color: 'red' },
},
{
value: chart_status_code_dict["400"],
name: '400',
itemStyle: {color: 'yellow'},
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["401"],
name: '401',
itemStyle: {color: 'yellow'},
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["403"],
name: '403',
itemStyle: {color: 'yellow'},
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["404"],
name: '404',
itemStyle: {color: 'yellow'},
itemStyle: { color: 'yellow' },
},
{
value: chart_status_code_dict["Connection Error"],
name: 'Connection Error',
itemStyle: {color: 'black'},
itemStyle: { color: 'black' },
},
{
value: chart_status_code_dict["Other"],
name: 'Other',
itemStyle: {color: 'grey'},
itemStyle: { color: 'grey' },
},
],
roseType: 'area'
@@ -551,6 +551,6 @@ option = {
myHTTPStatusCodeChart.setOption(option);
$(window).on('resize', function(){
$(window).on('resize', function () {
resizeCharts();
});

34
html5/game_console.js
View File

@@ -3,7 +3,7 @@ function zoomIn() {
document.getElementById("gameContainer").style.width = "100%"
document.getElementById("gameContainer").style.height = "100%";
document.getElementById("zoomInGameScreenInput").disabled = true;
document.getElementById("zoomOutGameScreenInput").disabled = false;
document.getElementById("zoomOutGameScreenInput").disabled = false;
document.getElementById("zoomInGameScreenInput2").disabled = true;
document.getElementById("zoomOutGameScreenInput2").disabled = false;
document.getElementById("loadButtonGroup").style.width = "1200px";
@@ -14,10 +14,10 @@ function zoomOut() {
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("zoomInGameScreenInput").disabled = false;
document.getElementById("zoomOutGameScreenInput").disabled = true;
document.getElementById("zoomInGameScreenInput2").disabled = false;
document.getElementById("zoomOutGameScreenInput2").disabled = true;
document.getElementById("zoomInGameScreenInput2").disabled = false;
document.getElementById("zoomOutGameScreenInput2").disabled = true;
document.getElementById("loadButtonGroup").style.width = "900px";
}
@@ -52,17 +52,17 @@ function switchColorMode() {
bodyElement.style.backgroundColor = "#0a0a0a";
current_color_mode = "dark";
for (var i = 0; i < buttonsLightElement.length; i++) {
for (var i = 0; i < buttonsLightElement.length; i++) {
console.log("[COLOR-MODE-BUTTONS] Change color of " + buttonsLightElement[i].id);
document.getElementById(buttonsLightElement[i].id).style.backgroundColor = "#1ed931";
}
for (var i = 0; i < textkinv.length; i++) {
for (var i = 0; i < textkinv.length; i++) {
console.log("[COLOR-MODE-TEXT-KINV] Change color of " + textkinv[i].id);
document.getElementById(textkinv[i].id).style.color = "#1ed931";
}
for (var i = 0; i < alertkinv.length; i++) {
for (var i = 0; i < alertkinv.length; i++) {
console.log("[COLOR-MODE-ALERT-KINV] Change color of " + alertkinv[i].id);
document.getElementById(alertkinv[i].id).style.color = "#1ed931";
document.getElementById(alertkinv[i].id).style.backgroundColor = "#0a0a0a";
@@ -83,17 +83,17 @@ function switchColorMode() {
bodyElement.style.backgroundColor = "#ffffff";
current_color_mode = "light";
for (var i = 0; i < buttonsLightElement.length; i++) {
for (var i = 0; i < buttonsLightElement.length; i++) {
console.log("[COLOR-MODE-BUTTONS] Change color of " + buttonsLightElement[i].id);
document.getElementById(buttonsLightElement[i].id).style.backgroundColor = "";
}
for (var i = 0; i < textkinv.length; i++) {
for (var i = 0; i < textkinv.length; i++) {
console.log("[COLOR-MODE-TEXT-KINV] Change color of " + textkinv[i].id);
document.getElementById(textkinv[i].id).style.color = "";
}
for (var i = 0; i < alertkinv.length; i++) {
for (var i = 0; i < alertkinv.length; i++) {
console.log("[COLOR-MODE-ALERT-KINV] Change color of " + alertkinv[i].id);
document.getElementById(alertkinv[i].id).style.color = "";
document.getElementById(alertkinv[i].id).style.backgroundColor = "";
@@ -112,11 +112,11 @@ function switchColorMode() {
}
function switchNamespace() {
if (namespaces_index < namespaces.length-1) {
namespaces_index +=1 ;
if (namespaces_index < namespaces.length - 1) {
namespaces_index += 1;
}
else {
namespaces_index = 0;
namespaces_index = 0;
}
namespace = namespaces[namespaces_index];
$('#currentGameNamespace').text(namespace);
@@ -134,18 +134,18 @@ function createChaosProgramButton(name, lang) {
btn.name = "load" + capitalizedName;
btn.id = "load" + capitalizedName;
if (document.getElementById("load" + capitalizedName)) {
return;
return;
}
btn.style = "padding: 0% 2%;"
btn.classList = "btn btn-light btn-sm";
btn.addEventListener("click", function(){ loadPreset(name, lang); });
document.getElementById("loadButtonGroup").appendChild(btn);
btn.addEventListener("click", function () { loadPreset(name, lang); });
document.getElementById("loadButtonGroup").appendChild(btn);
document.getElementById("loadButtonGroup").scrollLeft = document.getElementById("loadButtonGroup").scrollWidth;
}
function deleteChaosProgramButton(name) {
let capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
document.getElementById("loadButtonGroup").removeChild(document.getElementById("load" + capitalizedName));
document.getElementById("loadButtonGroup").removeChild(document.getElementById("load" + capitalizedName));
}
function setLogConsole() {

32
html5/index.html
View File

@@ -12,8 +12,15 @@
/* Adjust styling for sidebar */
*, button, div, canvas,a,p,h1,h2,h3,h4,h5 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
}
#mainChaosMetrics > div > canvas {
width: 100% !important;
}
#mainChaosMetrics > div {
width: 100% !important;
}
.sidebar {
height: 100%;
width: 250px;
@@ -196,7 +203,7 @@
<div class="row">
<div class="col col-xl-10">
<label for="chaosReportAuthor">Author</label>
<input type="text" id="chaosReportAuthor" value="" style="margin-bottom: 1%; width: 50%;">
<input type="text" id="chaosReportAuthor" value="" style="margin-bottom: 1%; width: 100%;">
</div>
</div>
<!-- <div class="row">
@@ -261,7 +268,7 @@
</div>
</div>
</div>
<div class="container" id="gameContainer" style="width: 50% !important;">
<div class="container" id="gameContainer">
<!-- START FIRST ROW -->
<div class="row custom-btn-group" style="margin-top: 2%;">
<!-- START SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
@@ -333,7 +340,7 @@
<!-- START GAME MODE BUTTONS -->
<div id="game-buttons" style="display: none;">
<div class="row container" style="width: 50%;">
<div class="row container" style="width: 100%;">
<div class="col text-center">
<button type="button" id="controlAutoPilotButton" class="btn btn-dark" onclick="controlAutoPilot()">Start</button>
</div>
@@ -344,7 +351,7 @@
<label for="randomFactorInput" class="text-kinv" id="randomFactorText">Random Factor:&nbsp;<span id="currentRandomFactor">50</span></label>
</div>
</div>
<div class="row container" style="margin-top: 1%; width: 50%;">
<div class="row container" style="margin-top: 1%; width: 100%;">
<div class="col text-center">
<button style="margin-bottom: 2%" type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
</div>
@@ -392,7 +399,7 @@
<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: 70%;height: 70%; margin-top: 1%;"></div>
<div id="mainChaosMetrics" style="width: 100%;height: 70%; 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> -->
</div>
@@ -531,14 +538,15 @@
</table>
</div>
</div>
<div id="chartDiv" style="display: none;">
<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: 100%; height: 200px;"></div>
<div id="chartDiv" style="display: none; width: 100%; text-align: center; margin: auto;">
<label for="httpElapsedChart">HTTP Elapse d (seconds)</label>
<div id="httpElapsedChart" ></div>
<label for="httpStatusCodeChart">HTTP Status Code</label>
<div id="httpStatusCodeChart"></div>
</div>
</div>
<div class="row" style="margin-top: 2%;">
<div class="row" style="margin-top: 2%; text-align: center; margin: auto;">
<canvas id="myCanvas" width="720" height="480" class="game-canvas"></canvas>
</div>
<div class="row">

8
html5/mode_controls.js
View File

@@ -6,8 +6,8 @@ function startGameMode() {
$("#gameModeButton").text("Enable Game Mode");
} else {
game_mode_switch = true;
document.getElementById("gameContainer").style.width = "50%";
document.getElementById("gameContainer").style.height = "50%";
document.getElementById("gameContainer").style.width = "100%";
document.getElementById("gameContainer").style.height = "100%";
//document.getElementById("loadButtonGroup").style.width = "650px";
$("#gameModeButton").text("Disable Game Mode");
$("#programmingModeButton").text("Enable Prog. Mode");
@@ -39,8 +39,8 @@ function startProgrammingMode() {
programming_mode_switch = false;
$("#programmingModeButton").text("Enable Prog. Mode");
} else {
document.getElementById("gameContainer").style.width = "50%";
document.getElementById("gameContainer").style.height = "50%";
document.getElementById("gameContainer").style.width = "100%";
document.getElementById("gameContainer").style.height = "100%";
document.getElementById("loadButtonGroup").style.width = "1250px";
programming_mode_switch = true;

1
html5/style.css
View File

@@ -74,7 +74,6 @@ hr {
.custom-btn-group {
margin-top: 2%;
border: 8px solid #b2afaf;
border-radius: 5px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;