@oas-tools/oas-telemetry 0.1.9 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -1
- package/dist/index.cjs +8 -7
- package/dist/telemetry.cjs +1 -24
- package/dist/ui.cjs +756 -691
- package/package.json +14 -2
- package/src/index.js +8 -9
- package/src/telemetry.js +1 -23
- package/src/ui.js +754 -694
- package/src/ui/detail.html +0 -441
- package/src/ui/main.html +0 -266
package/src/ui/detail.html
DELETED
|
@@ -1,441 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>OAS - Telemetry</title>
|
|
8
|
-
<style>
|
|
9
|
-
body {
|
|
10
|
-
font-family: Arial, sans-serif;
|
|
11
|
-
margin: 20px;
|
|
12
|
-
}
|
|
13
|
-
table {
|
|
14
|
-
width: 100%;
|
|
15
|
-
border-collapse: collapse;
|
|
16
|
-
}
|
|
17
|
-
th, td {
|
|
18
|
-
border: 1px solid #dddddd;
|
|
19
|
-
padding: 8px;
|
|
20
|
-
text-align: left;
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
}
|
|
23
|
-
th {
|
|
24
|
-
background-color: #f2f2f2;
|
|
25
|
-
}
|
|
26
|
-
.box {
|
|
27
|
-
width: 100%;
|
|
28
|
-
margin: 0 auto;
|
|
29
|
-
background: rgba(255,255,255,0.2);
|
|
30
|
-
padding: 35px;
|
|
31
|
-
border: 2px solid #fff;
|
|
32
|
-
border-radius: 20px/50px;
|
|
33
|
-
background-clip: padding-box;
|
|
34
|
-
text-align: center;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.overlay {
|
|
38
|
-
position: fixed;
|
|
39
|
-
top: 0;
|
|
40
|
-
bottom: 0;
|
|
41
|
-
left: 0;
|
|
42
|
-
right: 0;
|
|
43
|
-
background: rgba(0, 0, 0, 0.7);
|
|
44
|
-
transition: opacity 500ms;
|
|
45
|
-
visibility: hidden;
|
|
46
|
-
opacity: 0;
|
|
47
|
-
overflow: scroll;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.overlay:target {
|
|
51
|
-
visibility: visible;
|
|
52
|
-
opacity: 1;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.popup {
|
|
56
|
-
margin: 70px auto;
|
|
57
|
-
padding: 20px;
|
|
58
|
-
background: #fff;
|
|
59
|
-
border-radius: 5px;
|
|
60
|
-
width: 70%;
|
|
61
|
-
position: relative;
|
|
62
|
-
transition: all 5s ease-in-out;
|
|
63
|
-
font-size: small;
|
|
64
|
-
overflow: scroll;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.popup .close {
|
|
68
|
-
position: absolute;
|
|
69
|
-
top: 20px;
|
|
70
|
-
right: 30px;
|
|
71
|
-
transition: all 200ms;
|
|
72
|
-
font-size: 30px;
|
|
73
|
-
font-weight: bold;
|
|
74
|
-
text-decoration: none;
|
|
75
|
-
color: #333;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
</style>
|
|
79
|
-
</head>
|
|
80
|
-
<body>
|
|
81
|
-
<h1><span id="heading">Telemetry for...</span></h1>
|
|
82
|
-
<a href="/telemetry/">Back</a><br><br>
|
|
83
|
-
<table id="apiTable">
|
|
84
|
-
<thead>
|
|
85
|
-
<tr>
|
|
86
|
-
<th onclick="sortTable(0)">TimeStamp</th>
|
|
87
|
-
<th onclick="sortTable(1)">End point</th>
|
|
88
|
-
<th onclick="sortTable(2)">Method</th>
|
|
89
|
-
<th onclick="sortTable(3)">Status</th>
|
|
90
|
-
<th onclick="sortTable(4)" style="text-align: center;">Response time<br> (sec)</th>
|
|
91
|
-
</tr>
|
|
92
|
-
</thead>
|
|
93
|
-
<tbody>
|
|
94
|
-
</tbody>
|
|
95
|
-
</table>
|
|
96
|
-
<script>
|
|
97
|
-
|
|
98
|
-
let traceCount=-1;
|
|
99
|
-
|
|
100
|
-
function parsePath() {
|
|
101
|
-
|
|
102
|
-
let detailPath = window.location.pathname.split("/");
|
|
103
|
-
|
|
104
|
-
if(detailPath.length < 6 || detailPath[5] == ""){
|
|
105
|
-
alert("Wrong invocation params");
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
let status = parseInt(detailPath[3]);
|
|
110
|
-
|
|
111
|
-
if(Number.isNaN(status))
|
|
112
|
-
status = -1;
|
|
113
|
-
|
|
114
|
-
const method = detailPath[4];
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
const path = decodeURI("/"+ detailPath
|
|
118
|
-
.splice(5,detailPath.length-5)
|
|
119
|
-
.filter(c=>(c != ""))
|
|
120
|
-
.join("/"));
|
|
121
|
-
|
|
122
|
-
headingObj = document.getElementById('heading');
|
|
123
|
-
headingObj.textContent = `Telemetry for ${path} - ${method} - ${status} `;
|
|
124
|
-
fetchTracesByParsing(path,method,status);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
function getSearchQuery(path,method,status){
|
|
128
|
-
let pathComponents = path.split("/");
|
|
129
|
-
let pathRegex = "^"
|
|
130
|
-
|
|
131
|
-
pathComponents.forEach(c =>{
|
|
132
|
-
if(c != "") {
|
|
133
|
-
pathRegex += "/";
|
|
134
|
-
if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
|
|
135
|
-
pathRegex += "(.*)";
|
|
136
|
-
}else{
|
|
137
|
-
pathRegex += c;
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
|
-
|
|
142
|
-
pathRegex += "$";
|
|
143
|
-
|
|
144
|
-
return {
|
|
145
|
-
"attributes.http_dot_target" : { $regex: new RegExp(pathRegex)},
|
|
146
|
-
"name" : method.toUpperCase(),
|
|
147
|
-
"attributes.http_dot_status_code" : status
|
|
148
|
-
};
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
async function fetchTracesByFinding(path,method,status) {
|
|
152
|
-
try {
|
|
153
|
-
const response = await fetch("/telemetry/find",{
|
|
154
|
-
method: 'POST',
|
|
155
|
-
headers: {
|
|
156
|
-
'Accept': 'application/json',
|
|
157
|
-
'Content-Type': 'application/json'
|
|
158
|
-
},
|
|
159
|
-
body: JSON.stringify({a: 1, b: 'Textual content'})
|
|
160
|
-
});
|
|
161
|
-
|
|
162
|
-
if (!response.ok) {
|
|
163
|
-
throw new Error("ERROR getting the Traces.");
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
const traces = await response.json();
|
|
167
|
-
loadTraces(traces);
|
|
168
|
-
|
|
169
|
-
} catch (error) {
|
|
170
|
-
console.error("ERROR getting the Traces :", error);
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
function getPathRegEx(path){
|
|
175
|
-
let pathComponents = path.split("/");
|
|
176
|
-
let pathRegExpStr = "^"
|
|
177
|
-
|
|
178
|
-
pathComponents.forEach(c =>{
|
|
179
|
-
if(c != "") {
|
|
180
|
-
pathRegExpStr += "/";
|
|
181
|
-
if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
|
|
182
|
-
pathRegExpStr += "(.*)";
|
|
183
|
-
}else{
|
|
184
|
-
pathRegExpStr += c;
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
});
|
|
188
|
-
|
|
189
|
-
pathRegExpStr += "$";
|
|
190
|
-
|
|
191
|
-
return new RegExp(pathRegExpStr);
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
async function fetchTracesByParsing(path,method,status) {
|
|
195
|
-
try {
|
|
196
|
-
console.log(`Fetchig traces for <${path}> - ${method} - ${status},.. `);
|
|
197
|
-
|
|
198
|
-
const response = await fetch("/telemetry/list");
|
|
199
|
-
|
|
200
|
-
if (!response.ok) {
|
|
201
|
-
throw new Error("ERROR getting the Traces.");
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
const responseJSON = await response.json();
|
|
205
|
-
const traces = responseJSON.spans;
|
|
206
|
-
|
|
207
|
-
console.log(`Feched ${traces.length} traces.`);
|
|
208
|
-
//console.log(`First trace: ${JSON.stringify(traces[0],null,2)}`);
|
|
209
|
-
let filteredTraces = traces.filter((t)=>{
|
|
210
|
-
return (
|
|
211
|
-
(getPathRegEx(path).test(t.attributes.http_dot_target)) &&
|
|
212
|
-
(t.attributes.http_dot_method.toUpperCase().includes(method.toUpperCase())) &&
|
|
213
|
-
(t.attributes.http_dot_status_code == status)
|
|
214
|
-
);
|
|
215
|
-
})
|
|
216
|
-
|
|
217
|
-
if(filteredTraces.length != traceCount){
|
|
218
|
-
loadTraces(filteredTraces);
|
|
219
|
-
traceCount = filteredTraces.length;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
setTimeout(fetchTracesByParsing,1000,path,method,status);
|
|
223
|
-
|
|
224
|
-
} catch (error) {
|
|
225
|
-
console.error("ERROR getting the Traces :", error);
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
function parseTraceInfo(t){
|
|
230
|
-
const ep = t.attributes.http_dot_target;
|
|
231
|
-
const method = t.attributes.http_dot_method.toLowerCase();
|
|
232
|
-
const status = t.attributes.http_dot_status_code;
|
|
233
|
-
|
|
234
|
-
const startSec = t.startTime[0];
|
|
235
|
-
const startNanoSec = t.startTime[1];
|
|
236
|
-
const endSec = t.endTime[0];
|
|
237
|
-
const endNanoSec = t.endTime[1];
|
|
238
|
-
|
|
239
|
-
const durationSec = endSec -startSec;
|
|
240
|
-
let durationNanoSec = endNanoSec -startNanoSec;
|
|
241
|
-
if (durationSec)
|
|
242
|
-
durationNanoSec = endNanoSec;
|
|
243
|
-
|
|
244
|
-
const durationMiliSec = Math.round(durationNanoSec / 10000);
|
|
245
|
-
|
|
246
|
-
const duration = durationSec + (durationMiliSec / 1000)
|
|
247
|
-
|
|
248
|
-
let startDateObj = new Date((startSec * 1000)+(startNanoSec / 10000));
|
|
249
|
-
let startTS = startDateObj.toISOString();
|
|
250
|
-
|
|
251
|
-
let endDateObj = new Date((endSec * 1000)+(endNanoSec / 10000));
|
|
252
|
-
let endTS = endDateObj.toISOString();
|
|
253
|
-
|
|
254
|
-
console.log(`${startTS} - ${endTS} - ${t._spanContext.traceId} - ${t.name} - ${ep} - ${status} - ${duration}`);
|
|
255
|
-
return {
|
|
256
|
-
ts : startTS,
|
|
257
|
-
ep: ep,
|
|
258
|
-
method: method,
|
|
259
|
-
status: status,
|
|
260
|
-
duration: duration
|
|
261
|
-
};
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
function loadTraces(traces) {
|
|
265
|
-
|
|
266
|
-
const tableBody = document.getElementById('apiTable').getElementsByTagName('tbody')[0];
|
|
267
|
-
while (tableBody.hasChildNodes()) {
|
|
268
|
-
tableBody.removeChild(tableBody.lastChild);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
traces.forEach(trace => {
|
|
272
|
-
const row = tableBody.insertRow();
|
|
273
|
-
const cellTS = row.insertCell(0);
|
|
274
|
-
const cellEP = row.insertCell(1);
|
|
275
|
-
const cellMethod = row.insertCell(2);
|
|
276
|
-
cellMethod.style.textAlign = "center";
|
|
277
|
-
const cellStatus = row.insertCell(3);
|
|
278
|
-
cellStatus.style.textAlign = "center";
|
|
279
|
-
const cellDuration = row.insertCell(4);
|
|
280
|
-
cellDuration.style.textAlign = "center";
|
|
281
|
-
|
|
282
|
-
let t = parseTraceInfo(trace);
|
|
283
|
-
|
|
284
|
-
cellTS.textContent = t.ts;
|
|
285
|
-
cellEP.textContent = t.ep;
|
|
286
|
-
cellMethod.textContent = t.method;
|
|
287
|
-
cellStatus.textContent = t.status;
|
|
288
|
-
cellDuration.textContent = t.duration;
|
|
289
|
-
|
|
290
|
-
row.trace = trace;
|
|
291
|
-
row.onclick = function() {
|
|
292
|
-
const popup = document.getElementById("tracePopup");
|
|
293
|
-
popup.firstChild.nodeValue = JSON.stringify(this.trace,null,2);
|
|
294
|
-
const popupOverlay = document.getElementById("popupOverlay");
|
|
295
|
-
popupOverlay.style.visibility = "visible";
|
|
296
|
-
popupOverlay.style.opacity = 1;
|
|
297
|
-
};
|
|
298
|
-
});
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
function sortTable(column) {
|
|
302
|
-
const table = document.getElementById('apiTable');
|
|
303
|
-
let rows, switching, i, x, y, shouldSwitch;
|
|
304
|
-
switching = true;
|
|
305
|
-
// Loop until no switching has been done:
|
|
306
|
-
while (switching) {
|
|
307
|
-
switching = false;
|
|
308
|
-
rows = table.rows;
|
|
309
|
-
// Loop through all table rows (except the first, which contains table headers):
|
|
310
|
-
for (i = 1; i < (rows.length - 1); i++) {
|
|
311
|
-
shouldSwitch = false;
|
|
312
|
-
// Get the two elements you want to compare, one from current row and one from the next:
|
|
313
|
-
x = rows[i].getElementsByTagName("TD")[column];
|
|
314
|
-
y = rows[i + 1].getElementsByTagName("TD")[column];
|
|
315
|
-
// Check if the two rows should switch place:
|
|
316
|
-
if (x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
|
|
317
|
-
shouldSwitch = true;
|
|
318
|
-
break;
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
if (shouldSwitch) {
|
|
322
|
-
// If a switch has been marked, make the switch and mark that a switch has been done:
|
|
323
|
-
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
|
324
|
-
switching = true;
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
function hidePopup(){
|
|
330
|
-
const popupOverlay = document.getElementById("popupOverlay");
|
|
331
|
-
popupOverlay.style.visibility = "hidden";
|
|
332
|
-
popupOverlay.style.opacity = 0;
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
window.onload = parsePath();
|
|
336
|
-
</script>
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
<div id="popupOverlay" class="overlay">
|
|
341
|
-
<div class="popup">
|
|
342
|
-
<pre id="tracePopup">
|
|
343
|
-
"attributes": {
|
|
344
|
-
"http_dot_url": "http://localhost:3000/api/v1/test/unknown",
|
|
345
|
-
"http_dot_host": "localhost:3000",
|
|
346
|
-
"net_dot_host_dot_name": "localhost",
|
|
347
|
-
"http_dot_method": "GET",
|
|
348
|
-
"http_dot_scheme": "http",
|
|
349
|
-
"http_dot_target": "/api/v1/test/unknown",
|
|
350
|
-
"http_dot_user_agent": "curl/7.68.0",
|
|
351
|
-
"http_dot_flavor": "1.1",
|
|
352
|
-
"net_dot_transport": "ip_tcp",
|
|
353
|
-
"net_dot_host_dot_ip": "::ffff:127.0.0.1",
|
|
354
|
-
"net_dot_host_dot_port": 3000,
|
|
355
|
-
"net_dot_peer_dot_ip": "::ffff:127.0.0.1",
|
|
356
|
-
"net_dot_peer_dot_port": 37718,
|
|
357
|
-
"http_dot_status_code": 404,
|
|
358
|
-
"http_dot_status_text": "NOT FOUND"
|
|
359
|
-
},
|
|
360
|
-
"links": [],
|
|
361
|
-
"events": [],
|
|
362
|
-
"_droppedAttributesCount": 0,
|
|
363
|
-
"_droppedEventsCount": 0,
|
|
364
|
-
"_droppedLinksCount": 0,
|
|
365
|
-
"status": {
|
|
366
|
-
"code": 0
|
|
367
|
-
},
|
|
368
|
-
"endTime": [
|
|
369
|
-
1714196017,
|
|
370
|
-
860657322
|
|
371
|
-
],
|
|
372
|
-
"_ended": true,
|
|
373
|
-
"_duration": [
|
|
374
|
-
0,
|
|
375
|
-
1657322
|
|
376
|
-
],
|
|
377
|
-
"name": "GET",
|
|
378
|
-
"_spanContext": {
|
|
379
|
-
"traceId": "7963907d7be515617050ece544ab5c9e",
|
|
380
|
-
"spanId": "f5cec976b23725c5",
|
|
381
|
-
"traceFlags": 1
|
|
382
|
-
},
|
|
383
|
-
"kind": 1,
|
|
384
|
-
"_performanceStartTime": 211662.4864029996,
|
|
385
|
-
"_performanceOffset": -0.596435546875,
|
|
386
|
-
"_startTimeProvided": false,
|
|
387
|
-
"startTime": [
|
|
388
|
-
1714196017,
|
|
389
|
-
859000000
|
|
390
|
-
],
|
|
391
|
-
"resource": {
|
|
392
|
-
"_attributes": {
|
|
393
|
-
"service_dot_name": "unknown_service:/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
|
|
394
|
-
"telemetry_dot_sdk_dot_language": "nodejs",
|
|
395
|
-
"telemetry_dot_sdk_dot_name": "opentelemetry",
|
|
396
|
-
"telemetry_dot_sdk_dot_version": "1.22.0",
|
|
397
|
-
"process_dot_pid": 12568,
|
|
398
|
-
"process_dot_executable_dot_name": "/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
|
|
399
|
-
"process_dot_executable_dot_path": "/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
|
|
400
|
-
"process_dot_command_args": [
|
|
401
|
-
"/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
|
|
402
|
-
"/home/pafmon/devel/github/ot-ui-poc/index.js"
|
|
403
|
-
],
|
|
404
|
-
"process_dot_runtime_dot_version": "18.0.0",
|
|
405
|
-
"process_dot_runtime_dot_name": "nodejs",
|
|
406
|
-
"process_dot_runtime_dot_description": "Node.js",
|
|
407
|
-
"process_dot_command": "/home/pafmon/devel/github/ot-ui-poc/index.js",
|
|
408
|
-
"process_dot_owner": "pafmon"
|
|
409
|
-
},
|
|
410
|
-
"asyncAttributesPending": false,
|
|
411
|
-
"_syncAttributes": {
|
|
412
|
-
"service_dot_name": "unknown_service:/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
|
|
413
|
-
"telemetry_dot_sdk_dot_language": "nodejs",
|
|
414
|
-
"telemetry_dot_sdk_dot_name": "opentelemetry",
|
|
415
|
-
"telemetry_dot_sdk_dot_version": "1.22.0"
|
|
416
|
-
},
|
|
417
|
-
"_asyncAttributesPromise": {}
|
|
418
|
-
},
|
|
419
|
-
"instrumentationLibrary": {
|
|
420
|
-
"name": "@opentelemetry/instrumentation-http",
|
|
421
|
-
"version": "0.51.0"
|
|
422
|
-
},
|
|
423
|
-
"_spanLimits": {
|
|
424
|
-
"attributeValueLengthLimit": null,
|
|
425
|
-
"attributeCountLimit": 128,
|
|
426
|
-
"linkCountLimit": 128,
|
|
427
|
-
"eventCountLimit": 128,
|
|
428
|
-
"attributePerEventCountLimit": 128,
|
|
429
|
-
"attributePerLinkCountLimit": 128
|
|
430
|
-
},
|
|
431
|
-
"_attributeValueLengthLimit": null,
|
|
432
|
-
"_spanProcessor": "oas-telemetry skips this field to avoid circular reference",
|
|
433
|
-
"_id": "3qYjJV2KdMa6zJw7"
|
|
434
|
-
</pre>
|
|
435
|
-
<a class="close" href="#" onclick="hidePopup()">×</a>
|
|
436
|
-
</div>
|
|
437
|
-
</div>
|
|
438
|
-
|
|
439
|
-
</body>
|
|
440
|
-
</html>
|
|
441
|
-
|
package/src/ui/main.html
DELETED
|
@@ -1,266 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>OAS - Telemetry</title>
|
|
8
|
-
<style>
|
|
9
|
-
body {
|
|
10
|
-
font-family: Arial, sans-serif;
|
|
11
|
-
margin: 20px;
|
|
12
|
-
}
|
|
13
|
-
table {
|
|
14
|
-
width: 100%;
|
|
15
|
-
border-collapse: collapse;
|
|
16
|
-
}
|
|
17
|
-
th, td {
|
|
18
|
-
border: 1px solid #dddddd;
|
|
19
|
-
padding: 8px;
|
|
20
|
-
text-align: left;
|
|
21
|
-
cursor: pointer;
|
|
22
|
-
}
|
|
23
|
-
th {
|
|
24
|
-
background-color: #f2f2f2;
|
|
25
|
-
}
|
|
26
|
-
#telemetryStatusSpan {
|
|
27
|
-
color:rgb(0, 123, 6);
|
|
28
|
-
font-size: x-small;
|
|
29
|
-
}
|
|
30
|
-
</style>
|
|
31
|
-
</head>
|
|
32
|
-
<body>
|
|
33
|
-
<h1>Telemetry <span id="telemetryStatusSpan"></span></h1>
|
|
34
|
-
<table id="apiTable">
|
|
35
|
-
<thead>
|
|
36
|
-
<tr>
|
|
37
|
-
<th onclick="sortTable(0)">Path</th>
|
|
38
|
-
<th onclick="sortTable(1)">Method</th>
|
|
39
|
-
<th onclick="sortTable(2)">Status</th>
|
|
40
|
-
<th onclick="sortTable(3)">Description</th>
|
|
41
|
-
<th onclick="sortTable(4)" style="text-align: center;">Request <br>Count</th>
|
|
42
|
-
<th onclick="sortTable(5)" style="text-align: center;">Average response time<br> (sec)</th>
|
|
43
|
-
|
|
44
|
-
</tr>
|
|
45
|
-
</thead>
|
|
46
|
-
<tbody>
|
|
47
|
-
</tbody>
|
|
48
|
-
</table>
|
|
49
|
-
<br/>
|
|
50
|
-
<button onclick="fetch('/telemetry/start');loadTelemetryStatus();">Start</button>
|
|
51
|
-
<button onclick="fetch('/telemetry/stop');loadTelemetryStatus();">Stop</button>
|
|
52
|
-
<button onclick="fetch('/telemetry/reset');loadTelemetryStatus();">Reset</button>
|
|
53
|
-
<script>
|
|
54
|
-
|
|
55
|
-
async function fetchSpec() {
|
|
56
|
-
try {
|
|
57
|
-
const response = await fetch("/telemetry/spec");
|
|
58
|
-
if (!response.ok) {
|
|
59
|
-
throw new Error("ERROR getting the Spec");
|
|
60
|
-
}
|
|
61
|
-
apiSpec = await response.json();
|
|
62
|
-
loadAPISpec(apiSpec);
|
|
63
|
-
loadTelemetryStatus();
|
|
64
|
-
} catch (error) {
|
|
65
|
-
console.error("ERROR getting the Spec :", error);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
async function loadTelemetryStatus(){
|
|
70
|
-
console.log("TEST");
|
|
71
|
-
const tss = document.getElementById("telemetryStatusSpan");
|
|
72
|
-
const response = await fetch("/telemetry/status");
|
|
73
|
-
if (!response.ok) {
|
|
74
|
-
throw new Error("ERROR getting the Status");
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
tStatus = await response.json();
|
|
78
|
-
|
|
79
|
-
console.log(tStatus);
|
|
80
|
-
if(tStatus.active){
|
|
81
|
-
tss.textContent = "active";
|
|
82
|
-
tss.style.color = "#009900";
|
|
83
|
-
}
|
|
84
|
-
else{
|
|
85
|
-
tss.textContent = "stoped";
|
|
86
|
-
tss.style.color = "#666666";
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
function getPathRegEx(path){
|
|
94
|
-
let pathComponents = path.split("/");
|
|
95
|
-
let pathRegExpStr = "^"
|
|
96
|
-
|
|
97
|
-
pathComponents.forEach(c =>{
|
|
98
|
-
if(c != "") {
|
|
99
|
-
pathRegExpStr += "/";
|
|
100
|
-
if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
|
|
101
|
-
pathRegExpStr += "(.*)";
|
|
102
|
-
}else{
|
|
103
|
-
pathRegExpStr += c;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
pathRegExpStr += "$";
|
|
109
|
-
|
|
110
|
-
return new RegExp(pathRegExpStr);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
async function fetchTracesByParsing(path,method,status) {
|
|
115
|
-
try {
|
|
116
|
-
console.log(\`Fetchig traces for <${path}> - ${method} - ${status},.. \`);
|
|
117
|
-
|
|
118
|
-
const response = await fetch("/telemetry/list");
|
|
119
|
-
|
|
120
|
-
if (!response.ok) {
|
|
121
|
-
throw new Error("ERROR getting the Traces.");
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
const responseJSON = await response.json();
|
|
125
|
-
const traces = responseJSON.spans;
|
|
126
|
-
|
|
127
|
-
console.log(\`Feched ${traces.length} traces.\`);
|
|
128
|
-
//console.log(\`First trace: ${JSON.stringify(traces[0],null,2)}\`);
|
|
129
|
-
|
|
130
|
-
return traces.filter((t)=>{
|
|
131
|
-
return (
|
|
132
|
-
(getPathRegEx(path).test(t.attributes.http_dot_target)) &&
|
|
133
|
-
(t.attributes.http_dot_method.toUpperCase().includes(method.toUpperCase())) &&
|
|
134
|
-
(t.attributes.http_dot_status_code == status)
|
|
135
|
-
);
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
} catch (error) {
|
|
139
|
-
console.error("ERROR getting the Traces :", error);
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
function parseTraceInfo(t){
|
|
144
|
-
const ep = t.attributes.http_dot_target;
|
|
145
|
-
const method = t.attributes.http_dot_method.toLowerCase();
|
|
146
|
-
const status = t.attributes.http_dot_status_code;
|
|
147
|
-
|
|
148
|
-
const startSec = t.startTime[0];
|
|
149
|
-
const startNanoSec = t.startTime[1];
|
|
150
|
-
const endSec = t.endTime[0];
|
|
151
|
-
const endNanoSec = t.endTime[1];
|
|
152
|
-
|
|
153
|
-
const durationSec = endSec -startSec;
|
|
154
|
-
let durationNanoSec = endNanoSec -startNanoSec;
|
|
155
|
-
if (durationSec)
|
|
156
|
-
durationNanoSec = endNanoSec;
|
|
157
|
-
|
|
158
|
-
const durationMiliSec = Math.round(durationNanoSec / 10000);
|
|
159
|
-
|
|
160
|
-
const duration = durationSec + (durationMiliSec / 1000)
|
|
161
|
-
|
|
162
|
-
let startDateObj = new Date((startSec * 1000)+(startNanoSec / 10000));
|
|
163
|
-
let startTS = startDateObj.toISOString();
|
|
164
|
-
|
|
165
|
-
let endDateObj = new Date((endSec * 1000)+(endNanoSec / 10000));
|
|
166
|
-
let endTS = endDateObj.toISOString();
|
|
167
|
-
|
|
168
|
-
console.log(\`${startTS} - ${endTS} - ${t._spanContext.traceId} - ${t.name} - ${ep} - ${status} - ${duration}\`);
|
|
169
|
-
return {
|
|
170
|
-
ts : startTS,
|
|
171
|
-
ep: ep,
|
|
172
|
-
method: method,
|
|
173
|
-
status: status,
|
|
174
|
-
duration: duration
|
|
175
|
-
};
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
async function loadStats(path,method,status,cellRequestCount,cellAverageResponseTime){
|
|
179
|
-
let traces = await fetchTracesByParsing(path,method,status);
|
|
180
|
-
let requestCount = traces.length;
|
|
181
|
-
let averageResponseTime = 0;
|
|
182
|
-
|
|
183
|
-
traces.forEach(trace=>{
|
|
184
|
-
t = parseTraceInfo(trace);
|
|
185
|
-
averageResponseTime += t.duration;
|
|
186
|
-
});
|
|
187
|
-
averageResponseTime = averageResponseTime / requestCount;
|
|
188
|
-
|
|
189
|
-
cellRequestCount.textContent = requestCount;
|
|
190
|
-
cellAverageResponseTime.textContent = requestCount? averageResponseTime.toFixed(3):"--";
|
|
191
|
-
|
|
192
|
-
setTimeout(loadStats,2000,path,method,status,cellRequestCount,cellAverageResponseTime);
|
|
193
|
-
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
function loadAPISpec(apiSpec) {
|
|
197
|
-
|
|
198
|
-
const tableBody = document.getElementById('apiTable').getElementsByTagName('tbody')[0];
|
|
199
|
-
Object.keys(apiSpec.paths).forEach(path => {
|
|
200
|
-
Object.keys(apiSpec.paths[path]).forEach(method => {
|
|
201
|
-
Object.keys(apiSpec.paths[path][method].responses).forEach(responseType => {
|
|
202
|
-
if(!Number.isNaN(parseInt(responseType))){
|
|
203
|
-
const row = tableBody.insertRow();
|
|
204
|
-
const cellPath = row.insertCell(0);
|
|
205
|
-
const cellMethod = row.insertCell(1);
|
|
206
|
-
const cellStatus = row.insertCell(2);
|
|
207
|
-
const cellDescription = row.insertCell(3);
|
|
208
|
-
const cellRequestCount = row.insertCell(4);
|
|
209
|
-
cellRequestCount.style="text-align: center;"
|
|
210
|
-
const cellAverageResponseTime = row.insertCell(5);
|
|
211
|
-
cellAverageResponseTime.style.textAlign = "center";
|
|
212
|
-
|
|
213
|
-
cellPath.textContent = path;
|
|
214
|
-
cellMethod.textContent = method.toUpperCase();
|
|
215
|
-
cellStatus.textContent = responseType;
|
|
216
|
-
cellDescription.textContent = apiSpec.paths[path][method].summary
|
|
217
|
-
+ " - "
|
|
218
|
-
+ apiSpec.paths[path][method].responses[responseType].description;
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
loadStats(path,method.toLowerCase(),responseType,cellRequestCount,cellAverageResponseTime);
|
|
222
|
-
setTimeout(loadStats,1000,path,method.toLowerCase(),responseType,cellRequestCount,cellAverageResponseTime);
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
row.detailPath = \`/telemetry/detail/${responseType}/${method.toLowerCase()}${path}\`;
|
|
226
|
-
row.onclick = function(){
|
|
227
|
-
window.location.href = this.detailPath;
|
|
228
|
-
};
|
|
229
|
-
}
|
|
230
|
-
});
|
|
231
|
-
});
|
|
232
|
-
});
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
function sortTable(column) {
|
|
236
|
-
const table = document.getElementById('apiTable');
|
|
237
|
-
let rows, switching, i, x, y, shouldSwitch;
|
|
238
|
-
switching = true;
|
|
239
|
-
// Loop until no switching has been done:
|
|
240
|
-
while (switching) {
|
|
241
|
-
switching = false;
|
|
242
|
-
rows = table.rows;
|
|
243
|
-
// Loop through all table rows (except the first, which contains table headers):
|
|
244
|
-
for (i = 1; i < (rows.length - 1); i++) {
|
|
245
|
-
shouldSwitch = false;
|
|
246
|
-
// Get the two elements you want to compare, one from current row and one from the next:
|
|
247
|
-
x = rows[i].getElementsByTagName("TD")[column];
|
|
248
|
-
y = rows[i + 1].getElementsByTagName("TD")[column];
|
|
249
|
-
// Check if the two rows should switch place:
|
|
250
|
-
if (x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
|
|
251
|
-
shouldSwitch = true;
|
|
252
|
-
break;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
if (shouldSwitch) {
|
|
256
|
-
// If a switch has been marked, make the switch and mark that a switch has been done:
|
|
257
|
-
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
|
258
|
-
switching = true;
|
|
259
|
-
}
|
|
260
|
-
}
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
window.onload = fetchSpec();
|
|
264
|
-
</script>
|
|
265
|
-
</body>
|
|
266
|
-
</html>
|