network-viewer: show unknown container (#16900)
show unknown container
Costa Tsaousis committed
Feb 1, 2024 at 14:25 UTC
69bc01c1560c631af1740bdc5aa200d47b51d2fc
2 files changed
+40
-21
collectors/network-viewer.plugin/network-viewer.c
+2
@@ -65,6 +65,8 @@ static void local_socket_to_array(struct local_socket_state *ls, struct local_so
65
const char *type;
66
if(n->net_ns_inode == ls->proc_self_net_ns_inode)
67
type = "system";
68
+ else if(n->net_ns_inode == 0)
69
+ type = "[unknown]";
70
else
71
type = "container";
72
collectors/network-viewer.plugin/viewer.html
+38
-21
@@ -26,6 +26,11 @@
26
<div id="d3-canvas"></div> <!-- Div for D3 rendering -->
27
28
<script>
29
+
30
+ let config = {
31
+ listen: true,
32
+ }
33
+
34
function transformData(dataPayload) {
35
// console.log("dataPayload", dataPayload);
36
const desiredColumns = ["Direction", "Protocol", "Namespace", "Process", "CommandLine", "LocalIP", "LocalPort", "RemoteIP", "RemotePort", "LocalAddressSpace", "RemoteAddressSpace"];
@@ -56,7 +61,9 @@
61
}
62
63
const appData = appMap.get(appName);
59
- appData.counts.total++;
64
+
65
+ if(config.listen || rowData['Direction'] !== 'listen')
66
+ appData.counts.total++;
67
68
if (rowData['Direction'] === 'listen')
69
appData.counts.listen++;
@@ -81,8 +88,12 @@
88
});
89
}
90
84
- // console.log("transformedData", transformedData);
85
- return transformedData;
91
+ if(!config.listen)
92
+ return transformedData.filter(function(d) {
93
+ return d.counts.total > 0;
94
+ });
95
+ else
96
+ return transformedData;
97
}
98
99
function normalizeData(data, w, h, borderPadding) {
@@ -128,10 +139,10 @@
139
right: logScaleRight(d.counts.public + 1),
140
left: logScaleLeft(d.counts.private + 1),
141
top: logScaleTop(d.counts.outbound + 1),
131
- bottom: logScaleBottom((d.counts.listen + d.counts.inbound) / 2 + 1),
142
+ bottom: logScaleBottom(((config.listen ? d.counts.listen : 0) + d.counts.inbound) / (config.listen ? 2 : 1) + 1),
143
};
144
134
- const others = d.counts.total - (d.counts.public + d.counts.private + d.counts.listen + d.counts.inbound + d.counts.outbound);
145
+ const others = d.counts.total - (d.counts.public + d.counts.private + (config.listen ? d.counts.listen : 0) + d.counts.inbound + d.counts.outbound);
146
d.d3 = {
147
x: borderPadding + cw + d.pos.right - d.pos.left,
148
y: borderPadding + ch + d.pos.bottom - d.pos.top,
@@ -139,7 +150,7 @@
150
pie: [
151
{ value: d.counts.public },
152
{ value: d.counts.private },
142
- { value: d.counts.listen + d.counts.inbound },
153
+ { value: (config.listen ? d.counts.listen : 0) + d.counts.inbound },
154
{ value: d.counts.outbound },
155
{ value: others > 0 ? others : 0 },
156
]
@@ -157,8 +168,8 @@
168
if(d.d3.y + d.d3.size / 2 > h)
169
d.d3.y = h - d.d3.size * 2;
170
160
- // if (d.name === 'telnet')
161
- // console.log("object", d, "cw", cw, "ch", ch);
171
+ if (d.name === 'upsd')
172
+ console.log("object", d, "cw", cw, "ch", ch);
173
});
174
175
return data;
@@ -225,6 +236,9 @@
236
}
237
238
function drawInitialChart(svg, data, w, h, borderPadding, theme) {
239
+ console.log("drawInitialChart");
240
+ d3.select("#d3-canvas").selectAll("svg > *").remove()
241
+
242
const cw = w / 2;
243
const ch = h / 2;
244
@@ -460,6 +474,7 @@
474
return mergedApp;
475
}
476
477
+ let forceInit = true;
478
let initial = true;
479
let simulation;
480
@@ -483,12 +498,14 @@
498
// Function to draw the circles and labels for each application with border forces
499
function drawApplications(data, w, h, borderPadding, theme) {
500
let svg = d3.select('#d3-canvas').select('svg');
486
- if(svg.empty()) {
501
+
502
+ if(svg.empty() || forceInit) {
503
svg = d3.select('#d3-canvas').append('svg')
504
.attr('width', '100%')
505
.attr('height', '100%');
506
507
drawInitialChart(svg, data, w, h, borderPadding, theme);
508
+ forceInit = false;
509
}
510
511
const app = updateApps(svg, data, w, h, borderPadding, theme);
@@ -508,17 +525,22 @@
525
initial = false;
526
}
527
528
+ let lastPayload = {};
529
function redrawChart() {
530
+ const transformed = transformData(lastPayload);
531
+ console.log(transformed);
532
+
533
const w = window.innerWidth;
534
const h = window.innerHeight;
535
+ const borderPadding = 40;
536
+
537
+ const normalized = normalizeData(transformed, w, h, borderPadding);
538
+ drawApplications(normalized, w, h, borderPadding, themes.dark);
539
540
// Update SVG dimensions
541
const svg = d3.select('#d3-canvas').select('svg')
542
.attr('width', w)
543
.attr('height', h);
519
-
520
- // Redraw the chart with the new dimensions
521
- fetchDataAndUpdateChart(); // This function should use the new 'w' and 'h'
544
}
545
546
// Debounce function to optimize performance
@@ -532,6 +554,7 @@
554
555
// Attach the event listener to the window resize event
556
window.addEventListener('resize', debounce(() => {
557
+ forceInit = true;
558
redrawChart();
559
}));
560
@@ -540,21 +563,15 @@
563
fetch('http://localhost:19999/api/v1/function?function=network-viewer')
564
.then(response => response.json())
565
.then(data => {
543
- const transformed = transformData(data);
544
-
545
- const w = window.innerWidth;
546
- const h = window.innerHeight;
547
- const borderPadding = 40;
548
-
549
- const normalized = normalizeData(transformed, w, h, borderPadding);
550
- drawApplications(normalized, w, h, borderPadding, themes.dark);
566
+ lastPayload = data;
567
+ redrawChart();
568
})
569
.catch(error => console.error('Error fetching data:', error));
570
}
571
572
// Initial load
573
window.onload = () => {
557
- redrawChart();
574
+ fetchDataAndUpdateChart();
575
setInterval(fetchDataAndUpdateChart, 2000); // You may need to adjust this part
576
};
577
</script>