@oas-tools/oas-telemetry 0.1.10 → 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.
Files changed (10) hide show
  1. package/README.md +39 -1
  2. package/dist/index.cjs +8 -7
  3. package/dist/telemetry.cjs +1 -24
  4. package/dist/ui.cjs +756 -692
  5. package/package.json +14 -2
  6. package/src/index.js +8 -9
  7. package/src/telemetry.js +1 -23
  8. package/src/ui.js +754 -694
  9. package/src/ui/detail.html +0 -441
  10. package/src/ui/main.html +0 -266
package/src/ui.js CHANGED
@@ -1,717 +1,777 @@
1
- export default function otUI(){
2
- let ui = {};
1
+ export default function ui(){
2
+ /*
3
+ Sources:
4
+ ui/detail.html
5
+ ui/main.html
3
6
 
4
- ui.main =
5
- `
6
- <!DOCTYPE html>
7
- <html lang="en">
8
- <head>
9
- <meta charset="UTF-8">
10
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
- <title>OAS - Telemetry</title>
12
- <style>
13
- body {
14
- font-family: Arial, sans-serif;
15
- margin: 20px;
16
- }
17
- table {
18
- width: 100%;
19
- border-collapse: collapse;
20
- }
21
- th, td {
22
- border: 1px solid #dddddd;
23
- padding: 8px;
24
- text-align: left;
25
- cursor: pointer;
26
- }
27
- th {
28
- background-color: #f2f2f2;
29
- }
30
- #telemetryStatusSpan {
31
- color:rgb(0, 123, 6);
32
- font-size: x-small;
33
- }
34
- </style>
35
- </head>
36
- <body>
37
- <h1>Telemetry <span id="telemetryStatusSpan"></span></h1>
38
- <table id="apiTable">
39
- <thead>
40
- <tr>
41
- <th onclick="sortTable(0)">Path</th>
42
- <th onclick="sortTable(1)">Method</th>
43
- <th onclick="sortTable(2)">Status</th>
44
- <th onclick="sortTable(3)">Description</th>
45
- <th onclick="sortTable(4)" style="text-align: center;">Request <br>Count</th>
46
- <th onclick="sortTable(5)" style="text-align: center;">Average response time<br> (sec)</th>
47
-
48
- </tr>
49
- </thead>
50
- <tbody>
51
- </tbody>
52
- </table>
53
- <br/>
54
- <button onclick="fetch('/telemetry/start');loadTelemetryStatus();">Start</button>
55
- <button onclick="fetch('/telemetry/stop');loadTelemetryStatus();">Stop</button>
56
- <button onclick="fetch('/telemetry/reset');loadTelemetryStatus();">Reset</button>
57
- <script>
58
-
59
- async function fetchSpec() {
60
- try {
61
- const response = await fetch("/telemetry/spec");
62
- if (!response.ok) {
63
- throw new Error("ERROR getting the Spec");
64
- }
65
- apiSpec = await response.json();
66
- loadAPISpec(apiSpec);
67
- loadTelemetryStatus();
68
- } catch (error) {
69
- console.error("ERROR getting the Spec :", error);
70
- }
71
- }
72
-
73
- async function loadTelemetryStatus(){
74
- console.log("TEST");
75
- const tss = document.getElementById("telemetryStatusSpan");
76
- const response = await fetch("/telemetry/status");
77
- if (!response.ok) {
78
- throw new Error("ERROR getting the Status");
79
- return;
80
- }
81
- tStatus = await response.json();
82
-
83
- console.log(tStatus);
84
- if(tStatus.active){
85
- tss.textContent = "active";
86
- tss.style.color = "#009900";
87
- }
88
- else{
89
- tss.textContent = "stoped";
90
- tss.style.color = "#666666";
91
- }
92
-
93
- }
94
-
95
-
96
-
97
- function getPathRegEx(path){
98
- let pathComponents = path.split("/");
99
- let pathRegExpStr = "^"
7
+ Parsing:
8
+ ` --> \`
9
+ $ --> \$
10
+ */
100
11
 
101
- pathComponents.forEach(c =>{
102
- if(c != "") {
103
- pathRegExpStr += "/";
104
- if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
105
- pathRegExpStr += "(.*)";
106
- }else{
107
- pathRegExpStr += c;
12
+ return {
13
+ main :`
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8">
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
+ <title>OAS - Telemetry</title>
20
+ <style>
21
+ body {
22
+ font-family: Arial, sans-serif;
23
+ margin: 20px;
24
+ }
25
+ table {
26
+ width: 100%;
27
+ border-collapse: collapse;
28
+ }
29
+ th, td {
30
+ border: 1px solid #dddddd;
31
+ padding: 8px;
32
+ text-align: left;
33
+ cursor: pointer;
34
+ }
35
+ th {
36
+ background-color: #f2f2f2;
37
+ }
38
+ #telemetryStatusSpan {
39
+ color:rgb(0, 123, 6);
40
+ font-size: x-small;
108
41
  }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <h1>Telemetry <span id="telemetryStatusSpan"></span></h1>
46
+ <table id="apiTable">
47
+ <thead>
48
+ <tr>
49
+ <th onclick="sortTable(0)">Path</th>
50
+ <th onclick="sortTable(1)">Method</th>
51
+ <th onclick="sortTable(2)">Status</th>
52
+ <th onclick="sortTable(3)">Description</th>
53
+ <th onclick="sortTable(4)" style="text-align: center;">Request <br>Count</th>
54
+ <th onclick="sortTable(5)" style="text-align: center;">Average response time<br> (sec)</th>
55
+
56
+ </tr>
57
+ </thead>
58
+ <tbody>
59
+ </tbody>
60
+ </table>
61
+ <br/>
62
+ <button onclick="fetch('/telemetry/start');loadTelemetryStatus();">Start</button>
63
+ <button onclick="fetch('/telemetry/stop');loadTelemetryStatus();">Stop</button>
64
+ <button onclick="fetch('/telemetry/reset');loadTelemetryStatus();">Reset</button>
65
+ <script>
66
+
67
+ let LOG=false;
68
+
69
+ function log(s){
70
+ if(LOG)
71
+ console.log(s);
109
72
  }
110
- });
111
-
112
- pathRegExpStr += "$";
113
-
114
- return new RegExp(pathRegExpStr);
115
- }
116
-
117
-
118
- async function fetchTracesByParsing(path,method,status) {
119
- try {
120
- console.log(\`Fetchig traces for <\${path}> - \${method} - \${status},.. \`);
121
-
122
- const response = await fetch("/telemetry/list");
123
-
124
- if (!response.ok) {
125
- throw new Error("ERROR getting the Traces.");
73
+
74
+ async function fetchSpec() {
75
+ try {
76
+ const response = await fetch("/telemetry/spec");
77
+ if (!response.ok) {
78
+ throw new Error("ERROR getting the Spec");
79
+ }
80
+ apiSpec = await response.json();
81
+ loadAPISpec(apiSpec);
82
+ loadTelemetryStatus();
83
+ } catch (error) {
84
+ console.error("ERROR getting the Spec :", error);
85
+ }
126
86
  }
127
-
128
- const responseJSON = await response.json();
129
- const traces = responseJSON.spans;
130
-
131
- console.log(\`Feched \${traces.length} traces.\`);
132
- //console.log(\`First trace: \${JSON.stringify(traces[0],null,2)}\`);
133
-
134
- return traces.filter((t)=>{
135
- return (
136
- (getPathRegEx(path).test(t.attributes.http_dot_target)) &&
137
- (t.attributes.http_dot_method.toUpperCase().includes(method.toUpperCase())) &&
138
- (t.attributes.http_dot_status_code == status)
139
- );
140
- });
141
-
142
- } catch (error) {
143
- console.error("ERROR getting the Traces :", error);
144
- }
145
- }
146
-
147
- function parseTraceInfo(t){
148
- const ep = t.attributes.http_dot_target;
149
- const method = t.attributes.http_dot_method.toLowerCase();
150
- const status = t.attributes.http_dot_status_code;
151
-
152
- const startSec = t.startTime[0];
153
- const startNanoSec = t.startTime[1];
154
- const endSec = t.endTime[0];
155
- const endNanoSec = t.endTime[1];
156
-
157
- const durationSec = endSec -startSec;
158
- let durationNanoSec = endNanoSec -startNanoSec;
159
- if (durationSec)
160
- durationNanoSec = endNanoSec;
161
-
162
- const durationMiliSec = Math.round(durationNanoSec / 10000);
163
-
164
- const duration = durationSec + (durationMiliSec / 1000)
165
-
166
- let startDateObj = new Date((startSec * 1000)+(startNanoSec / 10000));
167
- let startTS = startDateObj.toISOString();
168
-
169
- let endDateObj = new Date((endSec * 1000)+(endNanoSec / 10000));
170
- let endTS = endDateObj.toISOString();
171
-
172
- console.log(\`\${startTS} - \${endTS} - \${t._spanContext.traceId} - \${t.name} - \${ep} - \${status} - \${duration}\`);
173
- return {
174
- ts : startTS,
175
- ep: ep,
176
- method: method,
177
- status: status,
178
- duration: duration
179
- };
180
- }
181
-
182
- async function loadStats(path,method,status,cellRequestCount,cellAverageResponseTime){
183
- let traces = await fetchTracesByParsing(path,method,status);
184
- let requestCount = traces.length;
185
- let averageResponseTime = 0;
186
-
187
- traces.forEach(trace=>{
188
- t = parseTraceInfo(trace);
189
- averageResponseTime += t.duration;
190
- });
191
- averageResponseTime = averageResponseTime / requestCount;
192
-
193
- cellRequestCount.textContent = requestCount;
194
- cellAverageResponseTime.textContent = requestCount? averageResponseTime.toFixed(3):"--";
195
-
196
- setTimeout(loadStats,2000,path,method,status,cellRequestCount,cellAverageResponseTime);
197
-
198
- }
199
-
200
- function loadAPISpec(apiSpec) {
201
-
202
- const tableBody = document.getElementById('apiTable').getElementsByTagName('tbody')[0];
203
- Object.keys(apiSpec.paths).forEach(path => {
204
- Object.keys(apiSpec.paths[path]).forEach(method => {
205
- Object.keys(apiSpec.paths[path][method].responses).forEach(responseType => {
206
- if(!Number.isNaN(parseInt(responseType))){
207
- const row = tableBody.insertRow();
208
- const cellPath = row.insertCell(0);
209
- const cellMethod = row.insertCell(1);
210
- const cellStatus = row.insertCell(2);
211
- const cellDescription = row.insertCell(3);
212
- const cellRequestCount = row.insertCell(4);
213
- cellRequestCount.style="text-align: center;"
214
- const cellAverageResponseTime = row.insertCell(5);
215
- cellAverageResponseTime.style.textAlign = "center";
216
-
217
- cellPath.textContent = path;
218
- cellMethod.textContent = method.toUpperCase();
219
- cellStatus.textContent = responseType;
220
- cellDescription.textContent = apiSpec.paths[path][method].summary
221
- + " - "
222
- + apiSpec.paths[path][method].responses[responseType].description;
223
-
224
-
225
- loadStats(path,method.toLowerCase(),responseType,cellRequestCount,cellAverageResponseTime);
226
- setTimeout(loadStats,1000,path,method.toLowerCase(),responseType,cellRequestCount,cellAverageResponseTime);
227
-
228
-
229
- row.detailPath = \`/telemetry/detail/\${responseType}/\${method.toLowerCase()}\${path}\`;
230
- row.onclick = function(){
231
- window.location.href = this.detailPath;
232
- };
87
+
88
+ async function loadTelemetryStatus(){
89
+ log("TEST");
90
+ const tss = document.getElementById("telemetryStatusSpan");
91
+ const response = await fetch("/telemetry/status");
92
+ if (!response.ok) {
93
+ throw new Error("ERROR getting the Status");
94
+ return;
95
+ }
96
+ tStatus = await response.json();
97
+
98
+ log(tStatus);
99
+ if(tStatus.active){
100
+ tss.textContent = "active";
101
+ tss.style.color = "#009900";
102
+ }
103
+ else{
104
+ tss.textContent = "stoped";
105
+ tss.style.color = "#666666";
106
+ }
107
+
108
+ }
109
+
110
+
111
+
112
+ function getPathRegEx(path){
113
+ let pathComponents = path.split("/");
114
+ let pathRegExpStr = "^"
115
+
116
+ pathComponents.forEach(c =>{
117
+ if(c != "") {
118
+ pathRegExpStr += "/";
119
+ if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
120
+ pathRegExpStr += "(.*)";
121
+ }else{
122
+ pathRegExpStr += c;
123
+ }
233
124
  }
234
125
  });
235
- });
236
- });
237
- }
238
-
239
- function sortTable(column) {
240
- const table = document.getElementById('apiTable');
241
- let rows, switching, i, x, y, shouldSwitch;
242
- switching = true;
243
- // Loop until no switching has been done:
244
- while (switching) {
245
- switching = false;
246
- rows = table.rows;
247
- // Loop through all table rows (except the first, which contains table headers):
248
- for (i = 1; i < (rows.length - 1); i++) {
249
- shouldSwitch = false;
250
- // Get the two elements you want to compare, one from current row and one from the next:
251
- x = rows[i].getElementsByTagName("TD")[column];
252
- y = rows[i + 1].getElementsByTagName("TD")[column];
253
- // Check if the two rows should switch place:
254
- if (x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
255
- shouldSwitch = true;
256
- break;
126
+
127
+ pathRegExpStr += "\$";
128
+
129
+ return new RegExp(pathRegExpStr);
130
+ }
131
+
132
+
133
+ async function fetchTracesByParsing(path,method,status) {
134
+ try {
135
+ log(\`Fetchig traces for <\${path}> - \${method} - \${status},.. \`);
136
+
137
+ const response = await fetch("/telemetry/list");
138
+
139
+ if (!response.ok) {
140
+ throw new Error("ERROR getting the Traces.");
141
+ }
142
+
143
+ const responseJSON = await response.json();
144
+ const traces = responseJSON.spans;
145
+
146
+ log(\`Feched \${traces.length} traces.\`);
147
+ //log(\`First trace: \${JSON.stringify(traces[0],null,2)}\`);
148
+
149
+ return traces.filter((t)=>{
150
+ return (
151
+ (getPathRegEx(path).test(t.attributes.http_dot_target)) &&
152
+ (t.attributes.http_dot_method.toUpperCase().includes(method.toUpperCase())) &&
153
+ (t.attributes.http_dot_status_code == status)
154
+ );
155
+ });
156
+
157
+ } catch (error) {
158
+ console.error("ERROR getting the Traces :", error);
257
159
  }
258
160
  }
259
- if (shouldSwitch) {
260
- // If a switch has been marked, make the switch and mark that a switch has been done:
261
- rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
161
+ function calculateTiming(startSecInput,startNanoSecInput,endSecInput,endNanoSecInput,precision = 3){
162
+ // Default precision 3 = miliseconds
163
+
164
+ let startSec= parseFloat(startSecInput)
165
+ let startNanoSec= parseFloat(startNanoSecInput)
166
+ let endSec= parseFloat(endSecInput)
167
+ let endNanoSec= parseFloat(endNanoSecInput)
168
+
169
+ let startNanoSecParsed = parseFloat("0."+startNanoSec);
170
+ let endNanoSecParsed = parseFloat("0."+endNanoSec);
171
+
172
+ let preciseStart = parseFloat(startSec + startNanoSecParsed);
173
+ let preciseEnd = parseFloat(endSec + endNanoSecParsed);
174
+ let preciseDuration = parseFloat(preciseEnd-preciseStart);
175
+
176
+ let startDate = new Date(preciseStart.toFixed(precision)*1000);
177
+ let startTS = startDate.toISOString();
178
+
179
+ let endDate = new Date(preciseEnd.toFixed(precision)*1000);
180
+ let endTS = endDate.toISOString();
181
+
182
+ return {
183
+ preciseStart: preciseStart,
184
+ preciseEnd : preciseEnd,
185
+ preciseDuration : preciseDuration,
186
+ start : parseFloat(preciseStart.toFixed(precision)),
187
+ end: parseFloat(preciseEnd.toFixed(precision)),
188
+ duration : parseFloat(preciseDuration.toFixed(precision)),
189
+ startDate: startDate,
190
+ endDate: endDate,
191
+ startTS :startTS,
192
+ endTS: endTS
193
+ };
194
+
195
+ }
196
+
197
+ function parseTraceInfo(t){
198
+ const ep = t.attributes.http_dot_target;
199
+ const method = t.attributes.http_dot_method.toLowerCase();
200
+ const status = t.attributes.http_dot_status_code;
201
+
202
+ const timing = calculateTiming(t.startTime[0],t.startTime[1],t.endTime[0],t.endTime[1]);
203
+
204
+ log(\`\${timing.startTS} - \${timing.endTS} - \${t._spanContext.traceId} - \${t.name} - \${ep} - \${status} - \${timing.duration}\`);
205
+ return {
206
+ ts : timing.startTS,
207
+ ep: ep,
208
+ method: method,
209
+ status: status,
210
+ duration: timing.duration
211
+ };
212
+ }
213
+
214
+ async function loadStats(path,method,status,cellRequestCount,cellAverageResponseTime){
215
+ let traces = await fetchTracesByParsing(path,method,status);
216
+ let requestCount = traces.length;
217
+ let averageResponseTime = 0;
218
+
219
+ traces.forEach(trace=>{
220
+ t = parseTraceInfo(trace);
221
+ log(JSON.stringify(t,null,2));
222
+ averageResponseTime += parseFloat(t.duration);
223
+ log(\`averageResponseTime += t.duration --> \${averageResponseTime} += \${ t.duration }\`);
224
+ });
225
+
226
+
227
+ averageResponseTime = averageResponseTime / requestCount;
228
+
229
+ log(\`averageResponseTime = averageResponseTime / requestCount --> \${averageResponseTime} = \${averageResponseTime} / \${requestCount}\`);
230
+
231
+ cellRequestCount.textContent = requestCount;
232
+ cellAverageResponseTime.textContent = requestCount? averageResponseTime.toFixed(3):"--";
233
+
234
+ setTimeout(loadStats,2000,path,method,status,cellRequestCount,cellAverageResponseTime);
235
+
236
+ }
237
+
238
+ function loadAPISpec(apiSpec) {
239
+
240
+ const tableBody = document.getElementById('apiTable').getElementsByTagName('tbody')[0];
241
+ Object.keys(apiSpec.paths).forEach(path => {
242
+ Object.keys(apiSpec.paths[path]).forEach(method => {
243
+ Object.keys(apiSpec.paths[path][method].responses).forEach(responseType => {
244
+ if(!Number.isNaN(parseInt(responseType))){
245
+ const row = tableBody.insertRow();
246
+ const cellPath = row.insertCell(0);
247
+ const cellMethod = row.insertCell(1);
248
+ const cellStatus = row.insertCell(2);
249
+ const cellDescription = row.insertCell(3);
250
+ const cellRequestCount = row.insertCell(4);
251
+ cellRequestCount.style="text-align: center;"
252
+ const cellAverageResponseTime = row.insertCell(5);
253
+ cellAverageResponseTime.style.textAlign = "center";
254
+
255
+ cellPath.textContent = path;
256
+ cellMethod.textContent = method.toUpperCase();
257
+ cellStatus.textContent = responseType;
258
+ cellDescription.textContent = apiSpec.paths[path][method].summary
259
+ + " - "
260
+ + apiSpec.paths[path][method].responses[responseType].description;
261
+
262
+
263
+ loadStats(path,method.toLowerCase(),responseType,cellRequestCount,cellAverageResponseTime);
264
+ setTimeout(loadStats,1000,path,method.toLowerCase(),responseType,cellRequestCount,cellAverageResponseTime);
265
+
266
+
267
+ row.detailPath = \`/telemetry/detail/\${responseType}/\${method.toLowerCase()}\${path}\`;
268
+ row.onclick = function(){
269
+ window.location.href = this.detailPath;
270
+ };
271
+ }
272
+ });
273
+ });
274
+ });
275
+ }
276
+
277
+ function sortTable(column) {
278
+ const table = document.getElementById('apiTable');
279
+ let rows, switching, i, x, y, shouldSwitch;
262
280
  switching = true;
281
+ // Loop until no switching has been done:
282
+ while (switching) {
283
+ switching = false;
284
+ rows = table.rows;
285
+ // Loop through all table rows (except the first, which contains table headers):
286
+ for (i = 1; i < (rows.length - 1); i++) {
287
+ shouldSwitch = false;
288
+ // Get the two elements you want to compare, one from current row and one from the next:
289
+ x = rows[i].getElementsByTagName("TD")[column];
290
+ y = rows[i + 1].getElementsByTagName("TD")[column];
291
+ // Check if the two rows should switch place:
292
+ if (x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
293
+ shouldSwitch = true;
294
+ break;
295
+ }
296
+ }
297
+ if (shouldSwitch) {
298
+ // If a switch has been marked, make the switch and mark that a switch has been done:
299
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
300
+ switching = true;
301
+ }
302
+ }
263
303
  }
264
- }
265
- }
266
-
267
- window.onload = fetchSpec();
268
- </script>
269
- </body>
270
- </html>
271
- `;
272
-
273
- ui.detail =
274
- `
275
- <!DOCTYPE html>
276
- <html lang="en">
277
- <head>
278
- <meta charset="UTF-8">
279
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
280
- <title>OAS - Telemetry</title>
281
- <style>
282
- body {
283
- font-family: Arial, sans-serif;
284
- margin: 20px;
285
- }
286
- table {
287
- width: 100%;
288
- border-collapse: collapse;
289
- }
290
- th, td {
291
- border: 1px solid #dddddd;
292
- padding: 8px;
293
- text-align: left;
294
- cursor: pointer;
295
- }
296
- th {
297
- background-color: #f2f2f2;
298
- }
299
- .box {
300
- width: 100%;
301
- margin: 0 auto;
302
- background: rgba(255,255,255,0.2);
303
- padding: 35px;
304
- border: 2px solid #fff;
305
- border-radius: 20px/50px;
306
- background-clip: padding-box;
307
- text-align: center;
308
- }
309
-
310
- .overlay {
311
- position: fixed;
312
- top: 0;
313
- bottom: 0;
314
- left: 0;
315
- right: 0;
316
- background: rgba(0, 0, 0, 0.7);
317
- transition: opacity 500ms;
318
- visibility: hidden;
319
- opacity: 0;
320
- overflow: scroll;
321
- }
322
-
323
- .overlay:target {
324
- visibility: visible;
325
- opacity: 1;
326
- }
327
-
328
- .popup {
329
- margin: 70px auto;
330
- padding: 20px;
331
- background: #fff;
332
- border-radius: 5px;
333
- width: 70%;
334
- position: relative;
335
- transition: all 5s ease-in-out;
336
- font-size: small;
337
- overflow: scroll;
338
- }
339
-
340
- .popup .close {
341
- position: absolute;
342
- top: 20px;
343
- right: 30px;
344
- transition: all 200ms;
345
- font-size: 30px;
346
- font-weight: bold;
347
- text-decoration: none;
348
- color: #333;
349
- }
350
-
351
- </style>
352
- </head>
353
- <body>
354
- <h1><span id="heading">Telemetry for...</span></h1>
355
- <a href="/telemetry/">Back</a><br><br>
356
- <table id="apiTable">
357
- <thead>
358
- <tr>
359
- <th onclick="sortTable(0)">TimeStamp</th>
360
- <th onclick="sortTable(1)">End point</th>
361
- <th onclick="sortTable(2)">Method</th>
362
- <th onclick="sortTable(3)">Status</th>
363
- <th onclick="sortTable(4)" style="text-align: center;">Response time<br> (sec)</th>
364
- </tr>
365
- </thead>
366
- <tbody>
367
- </tbody>
368
- </table>
369
- <script>
370
-
371
- let traceCount=-1;
372
-
373
- function parsePath() {
374
-
375
- let detailPath = window.location.pathname.split("/");
376
-
377
- if(detailPath.length < 6 || detailPath[5] == ""){
378
- alert("Wrong invocation params");
379
- return;
380
- }
381
-
382
- let status = parseInt(detailPath[3]);
383
-
384
- if(Number.isNaN(status))
385
- status = -1;
386
-
387
- const method = detailPath[4];
388
-
389
-
390
- const path = decodeURI("/"+ detailPath
391
- .splice(5,detailPath.length-5)
392
- .filter(c=>(c != ""))
393
- .join("/"));
394
-
395
- headingObj = document.getElementById('heading');
396
- headingObj.textContent = \`Telemetry for \${path} - \${method} - \${status} \`;
397
- fetchTracesByParsing(path,method,status);
398
- }
399
-
400
- function getSearchQuery(path,method,status){
401
- let pathComponents = path.split("/");
402
- let pathRegex = "^"
403
-
404
- pathComponents.forEach(c =>{
405
- if(c != "") {
406
- pathRegex += "/";
407
- if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
408
- pathRegex += "(.*)";
409
- }else{
410
- pathRegex += c;
304
+
305
+ window.onload = fetchSpec();
306
+ </script>
307
+ </body>
308
+ </html>
309
+ `,
310
+ detail:`
311
+
312
+ <!DOCTYPE html>
313
+ <html lang="en">
314
+ <head>
315
+ <meta charset="UTF-8">
316
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
317
+ <title>OAS - Telemetry</title>
318
+ <style>
319
+ body {
320
+ font-family: Arial, sans-serif;
321
+ margin: 20px;
322
+ }
323
+ table {
324
+ width: 100%;
325
+ border-collapse: collapse;
411
326
  }
327
+ th, td {
328
+ border: 1px solid #dddddd;
329
+ padding: 8px;
330
+ text-align: left;
331
+ cursor: pointer;
332
+ }
333
+ th {
334
+ background-color: #f2f2f2;
335
+ }
336
+ .box {
337
+ width: 100%;
338
+ margin: 0 auto;
339
+ background: rgba(255,255,255,0.2);
340
+ padding: 35px;
341
+ border: 2px solid #fff;
342
+ border-radius: 20px/50px;
343
+ background-clip: padding-box;
344
+ text-align: center;
345
+ }
346
+
347
+ .overlay {
348
+ position: fixed;
349
+ top: 0;
350
+ bottom: 0;
351
+ left: 0;
352
+ right: 0;
353
+ background: rgba(0, 0, 0, 0.7);
354
+ transition: opacity 500ms;
355
+ visibility: hidden;
356
+ opacity: 0;
357
+ overflow: scroll;
358
+ }
359
+
360
+ .overlay:target {
361
+ visibility: visible;
362
+ opacity: 1;
363
+ }
364
+
365
+ .popup {
366
+ margin: 70px auto;
367
+ padding: 20px;
368
+ background: #fff;
369
+ border-radius: 5px;
370
+ width: 70%;
371
+ position: relative;
372
+ transition: all 5s ease-in-out;
373
+ font-size: small;
374
+ overflow: scroll;
375
+ }
376
+
377
+ .popup .close {
378
+ position: absolute;
379
+ top: 20px;
380
+ right: 30px;
381
+ transition: all 200ms;
382
+ font-size: 30px;
383
+ font-weight: bold;
384
+ text-decoration: none;
385
+ color: #333;
386
+ }
387
+
388
+ </style>
389
+ </head>
390
+ <body>
391
+ <h1><span id="heading">Telemetry for...</span></h1>
392
+ <a href="/telemetry/">Back</a><br><br>
393
+ <table id="apiTable">
394
+ <thead>
395
+ <tr>
396
+ <th onclick="sortTable(0)">TimeStamp</th>
397
+ <th onclick="sortTable(1)">End point</th>
398
+ <th onclick="sortTable(2)">Method</th>
399
+ <th onclick="sortTable(3)">Status</th>
400
+ <th onclick="sortTable(4)" style="text-align: center;">Response time<br> (sec)</th>
401
+ </tr>
402
+ </thead>
403
+ <tbody>
404
+ </tbody>
405
+ </table>
406
+ <script>
407
+
408
+ let traceCount=-1;
409
+ let LOG=false;
410
+
411
+ function log(s){
412
+ if(LOG)
413
+ console.log(s);
412
414
  }
413
- });
414
-
415
- pathRegex += "$";
416
-
417
- return {
418
- "attributes.http_dot_target" : { $regex: new RegExp(pathRegex)},
419
- "name" : method.toUpperCase(),
420
- "attributes.http_dot_status_code" : status
421
- };
422
- }
423
-
424
- async function fetchTracesByFinding(path,method,status) {
425
- try {
426
- const response = await fetch("/telemetry/find",{
427
- method: 'POST',
428
- headers: {
429
- 'Accept': 'application/json',
430
- 'Content-Type': 'application/json'
431
- },
432
- body: JSON.stringify({a: 1, b: 'Textual content'})
433
- });
434
-
435
- if (!response.ok) {
436
- throw new Error("ERROR getting the Traces.");
437
- }
438
-
439
- const traces = await response.json();
440
- loadTraces(traces);
441
-
442
- } catch (error) {
443
- console.error("ERROR getting the Traces :", error);
444
- }
445
- }
446
-
447
- function getPathRegEx(path){
448
- let pathComponents = path.split("/");
449
- let pathRegExpStr = "^"
450
-
451
- pathComponents.forEach(c =>{
452
- if(c != "") {
453
- pathRegExpStr += "/";
454
- if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
455
- pathRegExpStr += "(.*)";
456
- }else{
457
- pathRegExpStr += c;
415
+
416
+ function parsePath() {
417
+
418
+ let detailPath = window.location.pathname.split("/");
419
+
420
+ if(detailPath.length < 6 || detailPath[5] == ""){
421
+ alert("Wrong invocation params");
422
+ return;
458
423
  }
424
+
425
+ let status = parseInt(detailPath[3]);
426
+
427
+ if(Number.isNaN(status))
428
+ status = -1;
429
+
430
+ const method = detailPath[4];
431
+
432
+
433
+ const path = decodeURI("/"+ detailPath
434
+ .splice(5,detailPath.length-5)
435
+ .filter(c=>(c != ""))
436
+ .join("/"));
437
+
438
+ headingObj = document.getElementById('heading');
439
+ headingObj.textContent = \`Telemetry for \${path} - \${method} - \${status} \`;
440
+ fetchTracesByParsing(path,method,status);
459
441
  }
460
- });
461
-
462
- pathRegExpStr += "$";
463
-
464
- return new RegExp(pathRegExpStr);
465
- }
466
-
467
- async function fetchTracesByParsing(path,method,status) {
468
- try {
469
- console.log(\`Fetchig traces for <\${path}> - \${method} - \${status},.. \`);
470
-
471
- const response = await fetch("/telemetry/list");
472
-
473
- if (!response.ok) {
474
- throw new Error("ERROR getting the Traces.");
442
+
443
+ function getSearchQuery(path,method,status){
444
+ let pathComponents = path.split("/");
445
+ let pathRegex = "^"
446
+
447
+ pathComponents.forEach(c =>{
448
+ if(c != "") {
449
+ pathRegex += "/";
450
+ if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
451
+ pathRegex += "(.*)";
452
+ }else{
453
+ pathRegex += c;
454
+ }
455
+ }
456
+ });
457
+
458
+ pathRegex += "\$";
459
+
460
+ return {
461
+ "attributes.http_dot_target" : { \$regex: new RegExp(pathRegex)},
462
+ "name" : method.toUpperCase(),
463
+ "attributes.http_dot_status_code" : status
464
+ };
475
465
  }
476
-
477
- const responseJSON = await response.json();
478
- const traces = responseJSON.spans;
479
-
480
- console.log(\`Feched \${traces.length} traces.\`);
481
- //console.log(\`First trace: \${JSON.stringify(traces[0],null,2)}\`);
482
- let filteredTraces = traces.filter((t)=>{
483
- return (
484
- (getPathRegEx(path).test(t.attributes.http_dot_target)) &&
485
- (t.attributes.http_dot_method.toUpperCase().includes(method.toUpperCase())) &&
486
- (t.attributes.http_dot_status_code == status)
487
- );
488
- })
489
-
490
- if(filteredTraces.length != traceCount){
491
- loadTraces(filteredTraces);
492
- traceCount = filteredTraces.length;
466
+
467
+ async function fetchTracesByFinding(path,method,status) {
468
+ try {
469
+ const response = await fetch("/telemetry/find",{
470
+ method: 'POST',
471
+ headers: {
472
+ 'Accept': 'application/json',
473
+ 'Content-Type': 'application/json'
474
+ },
475
+ body: JSON.stringify({a: 1, b: 'Textual content'})
476
+ });
477
+
478
+ if (!response.ok) {
479
+ throw new Error("ERROR getting the Traces.");
480
+ }
481
+
482
+ const traces = await response.json();
483
+ loadTraces(traces);
484
+
485
+ } catch (error) {
486
+ console.error("ERROR getting the Traces :", error);
487
+ }
493
488
  }
494
-
495
- setTimeout(fetchTracesByParsing,1000,path,method,status);
496
-
497
- } catch (error) {
498
- console.error("ERROR getting the Traces :", error);
499
- }
500
- }
501
-
502
- function parseTraceInfo(t){
503
- const ep = t.attributes.http_dot_target;
504
- const method = t.attributes.http_dot_method.toLowerCase();
505
- const status = t.attributes.http_dot_status_code;
506
-
507
- const startSec = t.startTime[0];
508
- const startNanoSec = t.startTime[1];
509
- const endSec = t.endTime[0];
510
- const endNanoSec = t.endTime[1];
511
-
512
- const durationSec = endSec -startSec;
513
- let durationNanoSec = endNanoSec -startNanoSec;
514
- if (durationSec)
515
- durationNanoSec = endNanoSec;
516
-
517
- const durationMiliSec = Math.round(durationNanoSec / 10000);
518
-
519
- const duration = durationSec + (durationMiliSec / 1000)
520
-
521
- let startDateObj = new Date((startSec * 1000)+(startNanoSec / 10000));
522
- let startTS = startDateObj.toISOString();
523
-
524
- let endDateObj = new Date((endSec * 1000)+(endNanoSec / 10000));
525
- let endTS = endDateObj.toISOString();
526
-
527
- console.log(\`\${startTS} - \${endTS} - \${t._spanContext.traceId} - \${t.name} - \${ep} - \${status} - \${duration}\`);
528
- return {
529
- ts : startTS,
530
- ep: ep,
531
- method: method,
532
- status: status,
533
- duration: duration
534
- };
535
- }
536
-
537
- function loadTraces(traces) {
538
-
539
- const tableBody = document.getElementById('apiTable').getElementsByTagName('tbody')[0];
540
- while (tableBody.hasChildNodes()) {
541
- tableBody.removeChild(tableBody.lastChild);
542
- }
543
-
544
- traces.forEach(trace => {
545
- const row = tableBody.insertRow();
546
- const cellTS = row.insertCell(0);
547
- const cellEP = row.insertCell(1);
548
- const cellMethod = row.insertCell(2);
549
- cellMethod.style.textAlign = "center";
550
- const cellStatus = row.insertCell(3);
551
- cellStatus.style.textAlign = "center";
552
- const cellDuration = row.insertCell(4);
553
- cellDuration.style.textAlign = "center";
554
-
555
- let t = parseTraceInfo(trace);
556
-
557
- cellTS.textContent = t.ts;
558
- cellEP.textContent = t.ep;
559
- cellMethod.textContent = t.method;
560
- cellStatus.textContent = t.status;
561
- cellDuration.textContent = t.duration;
562
-
563
- row.trace = trace;
564
- row.onclick = function() {
565
- const popup = document.getElementById("tracePopup");
566
- popup.firstChild.nodeValue = JSON.stringify(this.trace,null,2);
567
- const popupOverlay = document.getElementById("popupOverlay");
568
- popupOverlay.style.visibility = "visible";
569
- popupOverlay.style.opacity = 1;
570
- };
571
- });
572
- }
573
-
574
- function sortTable(column) {
575
- const table = document.getElementById('apiTable');
576
- let rows, switching, i, x, y, shouldSwitch;
577
- switching = true;
578
- // Loop until no switching has been done:
579
- while (switching) {
580
- switching = false;
581
- rows = table.rows;
582
- // Loop through all table rows (except the first, which contains table headers):
583
- for (i = 1; i < (rows.length - 1); i++) {
584
- shouldSwitch = false;
585
- // Get the two elements you want to compare, one from current row and one from the next:
586
- x = rows[i].getElementsByTagName("TD")[column];
587
- y = rows[i + 1].getElementsByTagName("TD")[column];
588
- // Check if the two rows should switch place:
589
- if (x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
590
- shouldSwitch = true;
591
- break;
489
+
490
+ function getPathRegEx(path){
491
+ let pathComponents = path.split("/");
492
+ let pathRegExpStr = "^"
493
+
494
+ pathComponents.forEach(c =>{
495
+ if(c != "") {
496
+ pathRegExpStr += "/";
497
+ if(c.charAt(0) == "{" && c.charAt(c.length-1) == "}"){
498
+ pathRegExpStr += "(.*)";
499
+ }else{
500
+ pathRegExpStr += c;
501
+ }
502
+ }
503
+ });
504
+
505
+ pathRegExpStr += "\$";
506
+
507
+ return new RegExp(pathRegExpStr);
508
+ }
509
+
510
+ async function fetchTracesByParsing(path,method,status) {
511
+ try {
512
+ log(\`Fetchig traces for <\${path}> - \${method} - \${status},.. \`);
513
+
514
+ const response = await fetch("/telemetry/list");
515
+
516
+ if (!response.ok) {
517
+ throw new Error("ERROR getting the Traces.");
518
+ }
519
+
520
+ const responseJSON = await response.json();
521
+ const traces = responseJSON.spans;
522
+
523
+ log(\`Feched \${traces.length} traces.\`);
524
+ //log(\`First trace: \${JSON.stringify(traces[0],null,2)}\`);
525
+ let filteredTraces = traces.filter((t)=>{
526
+ return (
527
+ (getPathRegEx(path).test(t.attributes.http_dot_target)) &&
528
+ (t.attributes.http_dot_method.toUpperCase().includes(method.toUpperCase())) &&
529
+ (t.attributes.http_dot_status_code == status)
530
+ );
531
+ })
532
+
533
+ if(filteredTraces.length != traceCount){
534
+ loadTraces(filteredTraces);
535
+ traceCount = filteredTraces.length;
536
+ }
537
+
538
+ setTimeout(fetchTracesByParsing,1000,path,method,status);
539
+
540
+ } catch (error) {
541
+ console.error("ERROR getting the Traces :", error);
542
+ }
543
+ }
544
+
545
+ function calculateTiming(startSecInput,startNanoSecInput,endSecInput,endNanoSecInput,precision = 3){
546
+ // Default precision 3 = miliseconds
547
+
548
+ let startSec= parseFloat(startSecInput)
549
+ let startNanoSec= parseFloat(startNanoSecInput)
550
+ let endSec= parseFloat(endSecInput)
551
+ let endNanoSec= parseFloat(endNanoSecInput)
552
+
553
+ let startNanoSecParsed = parseFloat("0."+startNanoSec);
554
+ let endNanoSecParsed = parseFloat("0."+endNanoSec);
555
+
556
+ let preciseStart = parseFloat(startSec + startNanoSecParsed);
557
+ let preciseEnd = parseFloat(endSec + endNanoSecParsed);
558
+ let preciseDuration = parseFloat(preciseEnd-preciseStart);
559
+
560
+ let startDate = new Date(preciseStart.toFixed(precision)*1000);
561
+ let startTS = startDate.toISOString();
562
+
563
+ let endDate = new Date(preciseEnd.toFixed(precision)*1000);
564
+ let endTS = endDate.toISOString();
565
+
566
+ return {
567
+ preciseStart: preciseStart,
568
+ preciseEnd : preciseEnd,
569
+ preciseDuration : preciseDuration,
570
+ start : parseFloat(preciseStart.toFixed(precision)),
571
+ end: parseFloat(preciseEnd.toFixed(precision)),
572
+ duration : parseFloat(preciseDuration.toFixed(precision)),
573
+ startDate: startDate,
574
+ endDate: endDate,
575
+ startTS :startTS,
576
+ endTS: endTS
577
+ };
578
+
579
+ }
580
+
581
+ function parseTraceInfo(t){
582
+ const ep = t.attributes.http_dot_target;
583
+ const method = t.attributes.http_dot_method.toLowerCase();
584
+ const status = t.attributes.http_dot_status_code;
585
+
586
+ const timing = calculateTiming(t.startTime[0],t.startTime[1],t.endTime[0],t.endTime[1]);
587
+
588
+ log(\`\${timing.startTS} - \${timing.endTS} - \${t._spanContext.traceId} - \${t.name} - \${ep} - \${status} - \${timing.duration}\`);
589
+ return {
590
+ ts : timing.startTS,
591
+ ep: ep,
592
+ method: method,
593
+ status: status,
594
+ duration: timing.duration
595
+ };
596
+ }
597
+
598
+ function loadTraces(traces) {
599
+
600
+ const tableBody = document.getElementById('apiTable').getElementsByTagName('tbody')[0];
601
+ while (tableBody.hasChildNodes()) {
602
+ tableBody.removeChild(tableBody.lastChild);
592
603
  }
604
+
605
+ traces.forEach(trace => {
606
+ const row = tableBody.insertRow();
607
+ const cellTS = row.insertCell(0);
608
+ const cellEP = row.insertCell(1);
609
+ const cellMethod = row.insertCell(2);
610
+ cellMethod.style.textAlign = "center";
611
+ const cellStatus = row.insertCell(3);
612
+ cellStatus.style.textAlign = "center";
613
+ const cellDuration = row.insertCell(4);
614
+ cellDuration.style.textAlign = "center";
615
+
616
+ let t = parseTraceInfo(trace);
617
+
618
+ cellTS.textContent = t.ts;
619
+ cellEP.textContent = t.ep;
620
+ cellMethod.textContent = t.method;
621
+ cellStatus.textContent = t.status;
622
+ cellDuration.textContent = t.duration.toFixed(3);
623
+
624
+ row.trace = trace;
625
+ row.onclick = function() {
626
+ const popup = document.getElementById("tracePopup");
627
+ popup.firstChild.nodeValue = JSON.stringify(this.trace,null,2);
628
+ const popupOverlay = document.getElementById("popupOverlay");
629
+ popupOverlay.style.visibility = "visible";
630
+ popupOverlay.style.opacity = 1;
631
+ };
632
+ });
593
633
  }
594
- if (shouldSwitch) {
595
- // If a switch has been marked, make the switch and mark that a switch has been done:
596
- rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
634
+
635
+ function sortTable(column) {
636
+ const table = document.getElementById('apiTable');
637
+ let rows, switching, i, x, y, shouldSwitch;
597
638
  switching = true;
639
+ // Loop until no switching has been done:
640
+ while (switching) {
641
+ switching = false;
642
+ rows = table.rows;
643
+ // Loop through all table rows (except the first, which contains table headers):
644
+ for (i = 1; i < (rows.length - 1); i++) {
645
+ shouldSwitch = false;
646
+ // Get the two elements you want to compare, one from current row and one from the next:
647
+ x = rows[i].getElementsByTagName("TD")[column];
648
+ y = rows[i + 1].getElementsByTagName("TD")[column];
649
+ // Check if the two rows should switch place:
650
+ if (x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
651
+ shouldSwitch = true;
652
+ break;
653
+ }
654
+ }
655
+ if (shouldSwitch) {
656
+ // If a switch has been marked, make the switch and mark that a switch has been done:
657
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
658
+ switching = true;
659
+ }
660
+ }
598
661
  }
599
- }
600
- }
601
-
602
- function hidePopup(){
603
- const popupOverlay = document.getElementById("popupOverlay");
604
- popupOverlay.style.visibility = "hidden";
605
- popupOverlay.style.opacity = 0;
606
- }
607
-
608
- window.onload = parsePath();
609
- </script>
610
-
611
-
612
-
613
- <div id="popupOverlay" class="overlay">
614
- <div class="popup">
615
- <pre id="tracePopup">
616
- "attributes": {
617
- "http_dot_url": "http://localhost:3000/api/v1/test/unknown",
618
- "http_dot_host": "localhost:3000",
619
- "net_dot_host_dot_name": "localhost",
620
- "http_dot_method": "GET",
621
- "http_dot_scheme": "http",
622
- "http_dot_target": "/api/v1/test/unknown",
623
- "http_dot_user_agent": "curl/7.68.0",
624
- "http_dot_flavor": "1.1",
625
- "net_dot_transport": "ip_tcp",
626
- "net_dot_host_dot_ip": "::ffff:127.0.0.1",
627
- "net_dot_host_dot_port": 3000,
628
- "net_dot_peer_dot_ip": "::ffff:127.0.0.1",
629
- "net_dot_peer_dot_port": 37718,
630
- "http_dot_status_code": 404,
631
- "http_dot_status_text": "NOT FOUND"
632
- },
633
- "links": [],
634
- "events": [],
635
- "_droppedAttributesCount": 0,
636
- "_droppedEventsCount": 0,
637
- "_droppedLinksCount": 0,
638
- "status": {
639
- "code": 0
640
- },
641
- "endTime": [
642
- 1714196017,
643
- 860657322
644
- ],
645
- "_ended": true,
646
- "_duration": [
647
- 0,
648
- 1657322
649
- ],
650
- "name": "GET",
651
- "_spanContext": {
652
- "traceId": "7963907d7be515617050ece544ab5c9e",
653
- "spanId": "f5cec976b23725c5",
654
- "traceFlags": 1
655
- },
656
- "kind": 1,
657
- "_performanceStartTime": 211662.4864029996,
658
- "_performanceOffset": -0.596435546875,
659
- "_startTimeProvided": false,
660
- "startTime": [
661
- 1714196017,
662
- 859000000
663
- ],
664
- "resource": {
665
- "_attributes": {
666
- "service_dot_name": "unknown_service:/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
667
- "telemetry_dot_sdk_dot_language": "nodejs",
668
- "telemetry_dot_sdk_dot_name": "opentelemetry",
669
- "telemetry_dot_sdk_dot_version": "1.22.0",
670
- "process_dot_pid": 12568,
671
- "process_dot_executable_dot_name": "/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
672
- "process_dot_executable_dot_path": "/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
673
- "process_dot_command_args": [
674
- "/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
675
- "/home/pafmon/devel/github/ot-ui-poc/index.js"
662
+
663
+ function hidePopup(){
664
+ const popupOverlay = document.getElementById("popupOverlay");
665
+ popupOverlay.style.visibility = "hidden";
666
+ popupOverlay.style.opacity = 0;
667
+ }
668
+
669
+ window.onload = parsePath();
670
+ </script>
671
+
672
+
673
+
674
+ <div id="popupOverlay" class="overlay">
675
+ <div class="popup">
676
+ <pre id="tracePopup">
677
+ "attributes": {
678
+ "http_dot_url": "http://localhost:3000/api/v1/test/unknown",
679
+ "http_dot_host": "localhost:3000",
680
+ "net_dot_host_dot_name": "localhost",
681
+ "http_dot_method": "GET",
682
+ "http_dot_scheme": "http",
683
+ "http_dot_target": "/api/v1/test/unknown",
684
+ "http_dot_user_agent": "curl/7.68.0",
685
+ "http_dot_flavor": "1.1",
686
+ "net_dot_transport": "ip_tcp",
687
+ "net_dot_host_dot_ip": "::ffff:127.0.0.1",
688
+ "net_dot_host_dot_port": 3000,
689
+ "net_dot_peer_dot_ip": "::ffff:127.0.0.1",
690
+ "net_dot_peer_dot_port": 37718,
691
+ "http_dot_status_code": 404,
692
+ "http_dot_status_text": "NOT FOUND"
693
+ },
694
+ "links": [],
695
+ "events": [],
696
+ "_droppedAttributesCount": 0,
697
+ "_droppedEventsCount": 0,
698
+ "_droppedLinksCount": 0,
699
+ "status": {
700
+ "code": 0
701
+ },
702
+ "endTime": [
703
+ 1714196017,
704
+ 860657322
676
705
  ],
677
- "process_dot_runtime_dot_version": "18.0.0",
678
- "process_dot_runtime_dot_name": "nodejs",
679
- "process_dot_runtime_dot_description": "Node.js",
680
- "process_dot_command": "/home/pafmon/devel/github/ot-ui-poc/index.js",
681
- "process_dot_owner": "pafmon"
682
- },
683
- "asyncAttributesPending": false,
684
- "_syncAttributes": {
685
- "service_dot_name": "unknown_service:/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
686
- "telemetry_dot_sdk_dot_language": "nodejs",
687
- "telemetry_dot_sdk_dot_name": "opentelemetry",
688
- "telemetry_dot_sdk_dot_version": "1.22.0"
689
- },
690
- "_asyncAttributesPromise": {}
691
- },
692
- "instrumentationLibrary": {
693
- "name": "@opentelemetry/instrumentation-http",
694
- "version": "0.51.0"
695
- },
696
- "_spanLimits": {
697
- "attributeValueLengthLimit": null,
698
- "attributeCountLimit": 128,
699
- "linkCountLimit": 128,
700
- "eventCountLimit": 128,
701
- "attributePerEventCountLimit": 128,
702
- "attributePerLinkCountLimit": 128
703
- },
704
- "_attributeValueLengthLimit": null,
705
- "_spanProcessor": "oas-telemetry skips this field to avoid circular reference",
706
- "_id": "3qYjJV2KdMa6zJw7"
707
- </pre>
708
- <a class="close" href="#" onclick="hidePopup()">&times;</a>
709
- </div>
710
- </div>
711
-
712
- </body>
713
- </html>
714
- `;
715
-
716
- return ui;
706
+ "_ended": true,
707
+ "_duration": [
708
+ 0,
709
+ 1657322
710
+ ],
711
+ "name": "GET",
712
+ "_spanContext": {
713
+ "traceId": "7963907d7be515617050ece544ab5c9e",
714
+ "spanId": "f5cec976b23725c5",
715
+ "traceFlags": 1
716
+ },
717
+ "kind": 1,
718
+ "_performanceStartTime": 211662.4864029996,
719
+ "_performanceOffset": -0.596435546875,
720
+ "_startTimeProvided": false,
721
+ "startTime": [
722
+ 1714196017,
723
+ 859000000
724
+ ],
725
+ "resource": {
726
+ "_attributes": {
727
+ "service_dot_name": "unknown_service:/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
728
+ "telemetry_dot_sdk_dot_language": "nodejs",
729
+ "telemetry_dot_sdk_dot_name": "opentelemetry",
730
+ "telemetry_dot_sdk_dot_version": "1.22.0",
731
+ "process_dot_pid": 12568,
732
+ "process_dot_executable_dot_name": "/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
733
+ "process_dot_executable_dot_path": "/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
734
+ "process_dot_command_args": [
735
+ "/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
736
+ "/home/pafmon/devel/github/ot-ui-poc/index.js"
737
+ ],
738
+ "process_dot_runtime_dot_version": "18.0.0",
739
+ "process_dot_runtime_dot_name": "nodejs",
740
+ "process_dot_runtime_dot_description": "Node.js",
741
+ "process_dot_command": "/home/pafmon/devel/github/ot-ui-poc/index.js",
742
+ "process_dot_owner": "pafmon"
743
+ },
744
+ "asyncAttributesPending": false,
745
+ "_syncAttributes": {
746
+ "service_dot_name": "unknown_service:/home/pafmon/.nvm/versions/node/v18.0.0/bin/node",
747
+ "telemetry_dot_sdk_dot_language": "nodejs",
748
+ "telemetry_dot_sdk_dot_name": "opentelemetry",
749
+ "telemetry_dot_sdk_dot_version": "1.22.0"
750
+ },
751
+ "_asyncAttributesPromise": {}
752
+ },
753
+ "instrumentationLibrary": {
754
+ "name": "@opentelemetry/instrumentation-http",
755
+ "version": "0.51.0"
756
+ },
757
+ "_spanLimits": {
758
+ "attributeValueLengthLimit": null,
759
+ "attributeCountLimit": 128,
760
+ "linkCountLimit": 128,
761
+ "eventCountLimit": 128,
762
+ "attributePerEventCountLimit": 128,
763
+ "attributePerLinkCountLimit": 128
764
+ },
765
+ "_attributeValueLengthLimit": null,
766
+ "_spanProcessor": "oas-telemetry skips this field to avoid circular reference",
767
+ "_id": "3qYjJV2KdMa6zJw7"
768
+ </pre>
769
+ <a class="close" href="#" onclick="hidePopup()">&times;</a>
770
+ </div>
771
+ </div>
772
+
773
+ </body>
774
+ </html>
775
+ `
776
+ }
717
777
  }