Skip to content

Commit a3dfa88

Browse files
author
wlanboy
committed
moved k8s button
1 parent 639c594 commit a3dfa88

File tree

2 files changed

+181
-123
lines changed

2 files changed

+181
-123
lines changed

‎src/main/resources/static/js/k8s-client.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Zuständig für Kubernetes Kontext-Informationen und Istio-Netzwerkdiagnose.
44
*/
55
const K8sClient = (() => {
6-
6+
77
// Private Hilfsfunktion für API-Anfragen an den DiagnosticController
88
async function apiFetch(endpoint) {
99
const response = await fetch(endpoint);
@@ -78,13 +78,13 @@ const K8sClient = (() => {
7878
<div class="spinner-border text-info" role="status"></div>
7979
<div class="mt-2">Analysiere Routing-Regeln im Cluster...</div>
8080
</div>`;
81-
81+
8282
try {
8383
// Namespace aus URL extrahieren (Erwartet Format: http://service.namespace.svc...)
8484
const urlObj = new URL(targetUrl);
8585
const host = urlObj.hostname;
8686
const parts = host.split('.');
87-
87+
8888
// Logik: service.namespace.svc -> namespace ist an Index 1
8989
// Bei "localhost" oder einfachen Namen nehmen wir "default"
9090
const namespace = (parts.length > 1 && parts[1] !== 'svc') ? parts[1] : 'default';
@@ -139,10 +139,17 @@ document.addEventListener('DOMContentLoaded', async () => {
139139
diagnoseBtn.addEventListener('click', () => {
140140
const urlInput = document.getElementById('url').value;
141141
if (!urlInput) {
142-
alert("Bitte geben Sie erst eine Ziel-URL ein.");
142+
alert("Bitte geben Sie erst eine Ziel-URL ein, die analysiert werden soll.");
143143
return;
144144
}
145+
146+
// WICHTIG: Die ResultArea und das Panel sichtbar machen
147+
const resultArea = document.getElementById('resultArea');
148+
const istioPanel = document.getElementById('istioPanel');
149+
150+
if (resultArea) resultArea.style.display = 'block';
145151
if (istioPanel) istioPanel.style.display = 'block';
152+
146153
K8sClient.runFullDiagnostics(urlInput);
147154
});
148155
}

‎src/main/resources/templates/index.html‎

Lines changed: 170 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,215 @@
11
<!DOCTYPE html>
22
<html lang="de" xmlns:th="http://www.thymeleaf.org">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>K8s HTTP Debugger & Istio Analyzer</title>
7-
8+
89
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
910
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
10-
11+
1112
<style>
12-
:root { --k8s-blue: #326ce5; --istio-blue: #466bb0; }
13-
body { background-color: #f4f7f9; font-size: 0.85rem; }
14-
.navbar { background-color: var(--k8s-blue); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
15-
.card { border: none; border-radius: 12px; transition: transform 0.2s; }
16-
.console {
17-
background-color: #1e1e1e;
18-
color: #d4d4d4;
19-
padding: 1.5rem;
20-
border-radius: 8px;
21-
font-family: 'Fira Code', 'Consolas', monospace;
22-
white-space: pre-wrap;
13+
:root {
14+
--k8s-blue: #326ce5;
15+
--istio-blue: #466bb0;
16+
}
17+
18+
body {
19+
background-color: #f4f7f9;
20+
font-size: 0.85rem;
21+
}
22+
23+
.navbar {
24+
background-color: var(--k8s-blue);
25+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
26+
}
27+
28+
.card {
29+
border: none;
30+
border-radius: 12px;
31+
transition: transform 0.2s;
32+
}
33+
34+
.console {
35+
background-color: #1e1e1e;
36+
color: #d4d4d4;
37+
padding: 1.5rem;
38+
border-radius: 8px;
39+
font-family: 'Fira Code', 'Consolas', monospace;
40+
white-space: pre-wrap;
2341
min-height: 200px;
24-
box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
42+
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
43+
}
44+
45+
.stacktrace {
46+
font-size: 0.75rem;
47+
color: #fca5a5;
48+
background: #2d2d2d;
49+
padding: 1rem;
50+
border-radius: 6px;
51+
display: none;
52+
margin-top: 1rem;
53+
}
54+
55+
.history-scroll {
56+
max-height: calc(100vh - 200px);
57+
overflow-y: auto;
58+
}
59+
60+
.badge-istio {
61+
background-color: var(--istio-blue);
62+
}
63+
64+
.header-row input {
65+
border-radius: 4px;
66+
}
67+
68+
.diagnostic-card {
69+
border-left: 5px solid var(--istio-blue);
2570
}
26-
.stacktrace { font-size: 0.75rem; color: #fca5a5; background: #2d2d2d; padding: 1rem; border-radius: 6px; display: none; margin-top: 1rem; }
27-
.history-scroll { max-height: calc(100vh - 200px); overflow-y: auto; }
28-
.badge-istio { background-color: var(--istio-blue); }
29-
.header-row input { border-radius: 4px; }
30-
.diagnostic-card { border-left: 5px solid var(--istio-blue); }
3171
</style>
3272
</head>
73+
3374
<body>
3475

35-
<nav class="navbar navbar-dark mb-4">
36-
<div class="container-fluid px-4">
37-
<span class="navbar-brand fw-bold">
38-
<i class="bi bi-box-seam me-2"></i>K8s HTTP Client
39-
</span>
40-
<div id="k8sContext" class="d-flex align-items-center text-white">
41-
<div class="spinner-border spinner-border-sm me-2" role="status"></div>
42-
<span class="small">Verbinde zum Cluster...</span>
76+
<nav class="navbar navbar-dark mb-4">
77+
<div class="container-fluid px-4">
78+
<span class="navbar-brand fw-bold">
79+
<i class="bi bi-box-seam me-2"></i>K8s HTTP Client
80+
</span>
81+
<div id="k8sContext" class="d-flex align-items-center text-white">
82+
<div class="spinner-border spinner-border-sm me-2" role="status"></div>
83+
<span class="small">Verbinde zum Cluster...</span>
84+
</div>
4385
</div>
44-
</div>
45-
</nav>
46-
47-
<div class="container-fluid px-4">
48-
<div class="row g-4">
49-
50-
<div class="col-lg-8">
51-
<div class="card shadow-sm mb-4">
52-
<div class="card-body p-4">
53-
<form id="httpForm">
54-
<div class="row g-3 mb-4">
55-
<div class="col-md-3">
56-
<label class="form-label fw-bold text-muted small uppercase">Methode</label>
57-
<select id="method" class="form-select form-select-lg border-2">
58-
<option>GET</option><option>POST</option><option>PUT</option>
59-
<option>DELETE</option><option>PATCH</option>
60-
</select>
61-
</div>
62-
<div class="col-md-9">
63-
<label class="form-label fw-bold text-muted small uppercase">Ziel-URL</label>
64-
<input type="text" id="url" class="form-control form-control-lg border-2"
65-
placeholder="http://service.namespace.svc.cluster.local:8080/api/v1" required>
66-
</div>
67-
</div>
86+
</nav>
87+
88+
<div class="container-fluid px-4">
89+
<div class="row g-4">
6890

69-
<div class="mb-4">
70-
<div class="d-flex justify-content-between align-items-center mb-2">
71-
<label class="form-label fw-bold text-muted small mb-0">Custom Headers</label>
72-
<button type="button" id="addHeaderBtn" class="btn btn-sm btn-outline-primary">
73-
<i class="bi bi-plus-lg"></i> Add Header
74-
</button>
91+
<div class="col-lg-8">
92+
<div class="card shadow-sm mb-4">
93+
<div class="card-body p-4">
94+
<form id="httpForm">
95+
<div class="row g-3 mb-4">
96+
<div class="col-md-3">
97+
<label class="form-label fw-bold text-muted small uppercase">Methode</label>
98+
<select id="method" class="form-select form-select-lg border-2">
99+
<option>GET</option>
100+
<option>POST</option>
101+
<option>PUT</option>
102+
<option>DELETE</option>
103+
<option>PATCH</option>
104+
</select>
105+
</div>
106+
<div class="col-md-9">
107+
<label class="form-label fw-bold text-muted small uppercase">Ziel-URL</label>
108+
<input type="text" id="url" class="form-control form-control-lg border-2"
109+
placeholder="http://service.namespace.svc.cluster.local:8080/api/v1" required>
110+
</div>
75111
</div>
76-
<div id="headerContainer"></div>
77-
</div>
78112

79-
<div class="mb-4">
80-
<label class="form-label fw-bold text-muted small">JSON Body (optional)</label>
81-
<textarea id="body" class="form-control" rows="4"
82-
placeholder='{ "key": "value" }' style="font-family: monospace;"></textarea>
83-
</div>
113+
<div class="mb-4">
114+
<div class="d-flex justify-content-between align-items-center mb-2">
115+
<label class="form-label fw-bold text-muted small mb-0">Custom Headers</label>
116+
<button type="button" id="addHeaderBtn" class="btn btn-sm btn-outline-primary">
117+
<i class="bi bi-plus-lg"></i> Add Header
118+
</button>
119+
</div>
120+
<div id="headerContainer"></div>
121+
</div>
84122

85-
<div class="d-flex justify-content-between align-items-center border-top pt-3">
86-
<div class="form-check form-switch">
87-
<input class="form-check-input" type="checkbox" id="copyHeaders" checked>
88-
<label class="form-check-label" for="copyHeaders">Mirror Browser Headers</label>
123+
<div class="mb-4">
124+
<label class="form-label fw-bold text-muted small">JSON Body (optional)</label>
125+
<textarea id="body" class="form-control" rows="4" placeholder='{ "key": "value" }'
126+
style="font-family: monospace;"></textarea>
89127
</div>
90-
<button type="submit" id="submitBtn" class="btn btn-primary btn-lg px-5 shadow">
91-
<i class="bi bi-send-fill me-2"></i>Send Request
92-
</button>
93-
</div>
94-
</form>
95-
</div>
96-
</div>
97128

98-
<div id="resultArea" style="display:none;">
99-
<div class="d-flex align-items-center justify-content-between mb-3">
100-
<div>
101-
<span id="statusBadge" class="badge fs-6 shadow-sm"></span>
102-
<span id="responseTime" class="ms-3 text-muted small fw-bold"></span>
129+
<div class="d-flex justify-content-between align-items-center border-top pt-3">
130+
<div class="form-check form-switch">
131+
<input class="form-check-input" type="checkbox" id="copyHeaders" checked>
132+
<label class="form-check-label" for="copyHeaders">Mirror Browser Headers</label>
133+
</div>
134+
<div class="btn-group shadow-sm">
135+
<button type="button" id="k8sDiagnoseBtn" class="btn btn-outline-info">
136+
<i class="bi bi-shield-check me-1"></i>K8s/Istio Diagnose
137+
</button>
138+
<button type="submit" id="submitBtn" class="btn btn-primary px-5">
139+
<i class="bi bi-send-fill me-2"></i>Send Request
140+
</button>
141+
</div>
142+
</div>
143+
</form>
103144
</div>
104-
<button type="button" id="k8sDiagnoseBtn" class="btn btn-sm btn-info text-white shadow-sm">
105-
<i class="bi bi-shield-check me-1"></i>K8s/Istio Diagnose
106-
</button>
107145
</div>
108146

109-
<div id="errorBox" class="alert alert-danger shadow-sm border-0" style="display:none;">
110-
<div class="d-flex">
111-
<i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
147+
<div id="resultArea" style="display:none;">
148+
<div class="d-flex align-items-center justify-content-between mb-3">
112149
<div>
113-
<h6 id="errorSummary" class="fw-bold mb-1"></h6>
114-
<p id="errorDetail" class="small mb-2"></p>
115-
<button type="button" id="toggleStackBtn" class="btn btn-xs btn-outline-danger py-0">Stacktrace</button>
150+
<span id="statusBadge" class="badge fs-6 shadow-sm"></span>
151+
<span id="responseTime" class="ms-3 text-muted small fw-bold"></span>
116152
</div>
117153
</div>
118-
<pre id="stacktraceArea" class="stacktrace"></pre>
119-
</div>
120154

121-
<div id="istioPanel" class="card shadow-sm diagnostic-card mb-4" style="display:none;">
122-
<div class="card-header bg-white border-0 d-flex justify-content-between align-items-center pt-3">
123-
<h6 class="mb-0 text-primary fw-bold"><i class="bi bi-diagram-3-fill me-2"></i>Istio Networking Context</h6>
124-
<button type="button" class="btn-close" onclick="this.closest('#istioPanel').style.display='none'"></button>
155+
<div id="errorBox" class="alert alert-danger shadow-sm border-0" style="display:none;">
156+
<div class="d-flex">
157+
<i class="bi bi-exclamation-triangle-fill fs-4 me-3"></i>
158+
<div>
159+
<h6 id="errorSummary" class="fw-bold mb-1"></h6>
160+
<p id="errorDetail" class="small mb-2"></p>
161+
<button type="button" id="toggleStackBtn"
162+
class="btn btn-xs btn-outline-danger py-0">Stacktrace</button>
163+
</div>
164+
</div>
165+
<pre id="stacktraceArea" class="stacktrace"></pre>
125166
</div>
126-
<div class="card-body" id="istioContent">
167+
168+
<div id="istioPanel" class="card shadow-sm diagnostic-card mb-4" style="display:none;">
169+
<div
170+
class="card-header bg-white border-0 d-flex justify-content-between align-items-center pt-3">
171+
<h6 class="mb-0 text-primary fw-bold"><i class="bi bi-diagram-3-fill me-2"></i>Istio
172+
Networking Context</h6>
173+
<button type="button" class="btn-close"
174+
onclick="this.closest('#istioPanel').style.display='none'"></button>
127175
</div>
128-
</div>
176+
<div class="card-body" id="istioContent">
177+
</div>
178+
</div>
129179

130-
<pre id="responseOutput" class="console shadow-sm"></pre>
180+
<pre id="responseOutput" class="console shadow-sm"></pre>
181+
</div>
131182
</div>
132-
</div>
133183

134-
<div class="col-lg-4">
135-
<div class="card shadow-sm h-100 border-0">
136-
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
137-
<h6 class="mb-0 fw-bold"><i class="bi bi-clock-history me-2"></i>Historie</h6>
138-
<div class="btn-group">
139-
<button class="btn btn-sm btn-outline-success" id="exportHistoryBtn" title="Export Log">
140-
<i class="bi bi-download"></i>
141-
</button>
142-
<button class="btn btn-sm btn-outline-danger" id="clearHistoryBtn" title="Clear All">
143-
<i class="bi bi-trash"></i>
144-
</button>
184+
<div class="col-lg-4">
185+
<div class="card shadow-sm h-100 border-0">
186+
<div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
187+
<h6 class="mb-0 fw-bold"><i class="bi bi-clock-history me-2"></i>Historie</h6>
188+
<div class="btn-group">
189+
<button class="btn btn-sm btn-outline-success" id="exportHistoryBtn" title="Export Log">
190+
<i class="bi bi-download"></i>
191+
</button>
192+
<button class="btn btn-sm btn-outline-danger" id="clearHistoryBtn" title="Clear All">
193+
<i class="bi bi-trash"></i>
194+
</button>
195+
</div>
145196
</div>
146-
</div>
147-
<div class="card-body p-0">
148-
<div id="historyList" class="list-group list-group-flush history-scroll">
149-
<div id="emptyHistoryMsg" class="p-5 text-center text-muted">
150-
<i class="bi bi-inbox fs-1 d-block mb-2"></i>
151-
Keine Anfragen aufgezeichnet
197+
<div class="card-body p-0">
198+
<div id="historyList" class="list-group list-group-flush history-scroll">
199+
<div id="emptyHistoryMsg" class="p-5 text-center text-muted">
200+
<i class="bi bi-inbox fs-1 d-block mb-2"></i>
201+
Keine Anfragen aufgezeichnet
202+
</div>
152203
</div>
153204
</div>
154205
</div>
155206
</div>
156207
</div>
157208
</div>
158-
</div>
159209

160-
<script src="/js/k8s-client.js"></script>
161-
<script src="/js/http-client.js"></script>
210+
<script src="/js/k8s-client.js"></script>
211+
<script src="/js/http-client.js"></script>
162212

163213
</body>
214+
164215
</html>

0 commit comments

Comments
 (0)