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

change style

Browse Source
This commit is contained in:
luckysideburn
2024-04-04 20:40:57 +00:00
parent cb9b1306b6
commit e48744ee1b
3 changed files with 50 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
html5/chaos_report.js
View File

@@ -173,6 +173,7 @@ function sendSavedChaosReport() {
chaos_report_switch = true;
document.getElementById("httpStatsCanvasDiv").style.display = "block";
document.getElementById("chartDiv").style.display = "block";
drawCanvasHTTPStatusCodeStats();
chaosReportprojectName = presetBodyDict["chaosReportProject"];
@@ -340,7 +341,7 @@ function updateStatusCodePieChart(projectName) {
itemStyle: { color: 'grey' },
},
],
roseType: 'area'
radius: ['40%', '70%']
}
]
});
@@ -426,6 +427,7 @@ function drawCanvasHTTPStatusCodeStats() {
var myHTTPElapsedChart = echarts.init(document.getElementById('httpElapsedChart'));
option = {
backgroundColor: 'black',
legend: {
// Try 'horizontal'
orient: 'vertical',
@@ -442,14 +444,13 @@ option = {
type: 'line',
smooth: true,
itemStyle: {
color: 'red'
color: 'green'
}
}
]
};
myHTTPElapsedChart.setOption(option);
var myMainChaosMetrics = echarts.init(document.getElementById('mainChaosMetrics'));
option = {
@@ -482,11 +483,18 @@ option = {
myMainChaosMetrics.setOption(option);
var myHTTPStatusCodeChart = echarts.init(document.getElementById('httpStatusCodeChart'));
console.log(myHTTPStatusCodeChart);
option = {
series: [
{
type: 'pie',
labelLine: {
normal: {
show: true,
color: 'yellow'
}
},
data: [
{
value: chart_status_code_dict["200"],

38
html5/index.html
View File

@@ -19,8 +19,24 @@
}
#mainChaosMetrics > div {
width: 100% !important;
}
#httpStatusCodeChart > div > canvas {
width: 100% !important;
height: 100% !important;
}
#httpStatusCodeChart > div {
width: 100% !important;
height: 100% !important;
}
#httpElapsedChart > div > canvas {
width: 100% !important;
height: 100% !important;
}
#httpElapsedChart > div {
width: 100% !important;
height: 100% !important;
}
.sidebar {
height: 100%;
width: 250px;
@@ -534,17 +550,19 @@
</table>
</div>
</div>
<div id="chartDiv" style="display: none; width: 100%; text-align: center; margin: auto;">
<label for="httpElapsedChart">HTTP Elapsed (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%; text-align: center; margin: auto;">
</div>
<div id="chartDiv" class="row" style="display: none; height: 480px; margin-bottom: 15%;">
<label for="httpStatusCodeChart">HTTP Status Code</label>
<div id="httpStatusCodeChart" style="width: 50%; height: 50%; margin-top: 1%; margin-bottom: 0.5%;"></div>
<label for="httpElapsedChart">HTTP Elapsed (seconds)</label>
<div id="httpElapsedChart" style="width: 100%; height: 50%; margin-top: 0.5%;"></div>
</div>
<div class="row" style="margin-top: 2%; text-align: center; margin: auto; margin-top: 1%;">
<canvas id="myCanvas" width="720" height="480" class="game-canvas"></canvas>
</div>
<div class="row">
<div class="col text-center">
</div>

22
html5/kubeinvaders.js
View File

@@ -110,17 +110,17 @@ 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
"200": 1,
"500": 1,
"502": 1,
"503": 1,
"504": 1,
"400": 1,
"401": 1,
"403": 1,
"404": 1,
"Connection Error": 1,
"Other": 1
};
function getCodeName() {