From 71274a7b0551f489eb0c26a0f5e7e34eda2a2afd Mon Sep 17 00:00:00 2001 From: XRenso Date: Sat, 11 Oct 2025 17:55:33 +0300 Subject: [PATCH 1/2] ARP packages filter --- front/src/static/miminet_animation.js | 77 +++++++++++++++++++++++-- front/src/static/netfront_f.js | 50 ++++++++++++++-- front/src/templates/network.html | 10 ++++ front/src/templates/network_shared.html | 16 +++-- 4 files changed, 140 insertions(+), 13 deletions(-) diff --git a/front/src/static/miminet_animation.js b/front/src/static/miminet_animation.js index abf483dc..73f4d583 100644 --- a/front/src/static/miminet_animation.js +++ b/front/src/static/miminet_animation.js @@ -5,7 +5,7 @@ var PacketPlayer = (function () { var animation_guid = uid(); var animation_packets = []; var traffic = []; - var network_cy = null; + var original_traffic = []; var player_pause = 0; var player_play = 0; var pkts_on_the_fly = 0; @@ -14,9 +14,37 @@ var PacketPlayer = (function () { var instance; + const isArpPacket = function(packet) { + if (!packet || !packet.config || !packet.config.type) { + return false; + } + const packetType = packet.config.type.toLowerCase(); + return packetType.includes('arp-request') || packetType.includes('arp-response'); + }; + + const applyArpFilter = function() { + const arpFilterCheckbox = document.getElementById('arpFilterCheckbox'); + if (!arpFilterCheckbox || !original_traffic) { + traffic = original_traffic ? JSON.parse(JSON.stringify(original_traffic)) : []; + return; + } + + if (arpFilterCheckbox.checked) { + traffic = original_traffic.map(step => { + if (!Array.isArray(step)) return step; + return step.filter(packet => !isArpPacket(packet)); + }).filter(step => step.length > 0); + } else { + traffic = JSON.parse(JSON.stringify(original_traffic)); + } + }; + const InitPlayer = function(packet){ - setTraffic(packet); + original_traffic = packet ? JSON.parse(JSON.stringify(packet)) : []; + + applyArpFilter(); + setAnimationTrafficStep(0); clearAnimationPackets(); setPlayerPause(0); @@ -284,6 +312,10 @@ var PacketPlayer = (function () { return; } + const getFilteredTraffic = function () { + return traffic; + } + const setCy = function (cy) { network_cy = cy; return; @@ -337,6 +369,27 @@ var PacketPlayer = (function () { return animation_traffic_step_callback; } + // Function to update filter and refresh animation + const updateArpFilter = function() { + const wasPlaying = getPlayerPlay(); + const currentStep = getAnimationTrafficStep(); + + if (wasPlaying) { + StopPlayer(); + } + + applyArpFilter(); + + // Adjust current step if needed + const newStep = Math.min(currentStep, Math.max(0, traffic.length - 1)); + setAnimationTrafficStep(newStep); + + // Restart if was playing + if (wasPlaying && traffic.length > 0) { + setTimeout(() => StartPlayer(network_cy), 50); + } + }; + const createInstance = function () { return { @@ -349,7 +402,9 @@ var PacketPlayer = (function () { setAnimationTrafficStepCallback: setAnimationTrafficStepCallback, resetAnimationTrafficStepCallback: resetAnimationTrafficStepCallback, getAnimationTrafficStep: getAnimationTrafficStep, - setAnimationTrafficStep: setAnimationTrafficStep + setAnimationTrafficStep: setAnimationTrafficStep, + updateArpFilter: updateArpFilter, + getFilteredTraffic: getFilteredTraffic } } @@ -358,4 +413,18 @@ var PacketPlayer = (function () { return instance || (instance = createInstance()); } } -})(); \ No newline at end of file +})(); + +// Global function to update slider display with current traffic +window.updateSliderDisplay = function(x) { + const currentTraffic = PacketPlayer.getInstance().getFilteredTraffic(); + if (!currentTraffic || currentTraffic.length === 0){ + $('#NetworkPlayerLabel').text('0 пакетов'); + return; + } + const stepData = currentTraffic[x-1] || []; + const NumWord = window.NumWord || function(n, words) { + return words[n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2]; + }; + $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + currentTraffic.length + ' (' + stepData.length + ' ' + NumWord(stepData.length, ['пакет', 'пакета', 'пакетов']) + ')'); +}; \ No newline at end of file diff --git a/front/src/static/netfront_f.js b/front/src/static/netfront_f.js index b256d592..2de4e510 100644 --- a/front/src/static/netfront_f.js +++ b/front/src/static/netfront_f.js @@ -1836,8 +1836,25 @@ const SetNetworkPlayerState = function(simultaion_id) tooltips: false, }); - // Show Slider on + // Show Slider and filters $('#PacketSliderInput').show(); + $('#AnimationFilters').show(); + + // Setup ARP filter checkbox + $('#arpFilterCheckbox').off('change').on('change', function() { + PacketPlayer.getInstance().updateArpFilter(); + + const currentTraffic = PacketPlayer.getInstance().getFilteredTraffic(); + if (currentTraffic) { + $('#PacketSliderInput')[0].noUiSlider.updateOptions({ + range: { 'min': 1, 'max': Math.max(1, currentTraffic.length) } + }); + + const currentStep = parseInt($('#PacketSliderInput')[0].noUiSlider.get()); + const stepData = currentTraffic[currentStep-1] || []; + $('#NetworkPlayerLabel').text('Шаг: ' + currentStep + '/' + currentTraffic.length + ' (' + stepData.length + ' ' + NumWord(stepData.length, ['пакет', 'пакета', 'пакетов']) + ')'); + } + }); const pkt_count = packets.reduce((currentCount, row) => currentCount + row.length, 0); $('#NetworkPlayerLabel').text(packets.length + ' ' + NumWord(packets.length, ['шаг', 'шага', 'шагов']) + ' / ' + pkt_count + ' ' + NumWord(pkt_count, ['пакет', 'пакета', 'пакетов'])); @@ -1855,7 +1872,7 @@ const SetNetworkPlayerState = function(simultaion_id) $('#NetworkPlayerLabel').text('0 пакетов'); return; } - $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + packets.length + ' (' + packets[x-1].length + ' ' + NumWord(packets[x-1].length, ['пакет', 'пакета', 'пакетов']) + ')'); + window.updateSliderDisplay(x); }); // Set click handlers @@ -1920,8 +1937,10 @@ const SetNetworkPlayerState = function(simultaion_id) { $('#NetworkPlayer').empty(); $('#PacketSliderInput').hide(); + $('#AnimationFilters').hide(); $('#NetworkPlayer').append(''); - InsertWaitingTime() + + InsertWaitingTime(); CheckSimulation(simultaion_id); return; } @@ -1930,6 +1949,7 @@ const SetNetworkPlayerState = function(simultaion_id) // Add emulation button. $('#NetworkPlayer').empty(); $('#PacketSliderInput').hide(); + $('#AnimationFilters').hide(); $('#NetworkPlayer').append(''); $('#NetworkPlayerLabel').empty(); @@ -1957,6 +1977,8 @@ const SetNetworkPlayerState = function(simultaion_id) $('#NetworkPlayer').empty(); $('#NetworkPlayer').append(''); + $('#AnimationFilters').hide(); + InsertWaitingTime(); return; }); @@ -1995,8 +2017,25 @@ const SetSharedNetworkPlayerState = function() tooltips: false, }); - // Show Slider on + // Show Slider and filters $('#PacketSliderInput').show(); + $('#AnimationFilters').show(); + + // Setup ARP filter checkbox + $('#arpFilterCheckbox').off('change').on('change', function() { + PacketPlayer.getInstance().updateArpFilter(); + + const currentTraffic = PacketPlayer.getInstance().getFilteredTraffic(); + if (currentTraffic) { + $('#PacketSliderInput')[0].noUiSlider.updateOptions({ + range: { 'min': 1, 'max': Math.max(1, currentTraffic.length) } + }); + + const currentStep = parseInt($('#PacketSliderInput')[0].noUiSlider.get()); + const stepData = currentTraffic[currentStep-1] || []; + $('#NetworkPlayerLabel').text('Шаг: ' + currentStep + '/' + currentTraffic.length + ' (' + stepData.length + ' ' + NumWord(stepData.length, ['пакет', 'пакета', 'пакетов']) + ')'); + } + }); const pkt_count = packets.reduce((currentCount, row) => currentCount + row.length, 0); $('#NetworkPlayerLabel').text(packets.length + ' ' + NumWord(packets.length, ['шаг', 'шага', 'шагов']) + ' / ' + pkt_count + ' ' + NumWord(pkt_count, ['пакет', 'пакета', 'пакетов'])); @@ -2014,7 +2053,7 @@ const SetSharedNetworkPlayerState = function() $('#NetworkPlayerLabel').text('0 пакетов'); return; } - $('#NetworkPlayerLabel').text('Шаг: ' + x + '/' + packets.length + ' (' + packets[x-1].length + ' ' + NumWord(packets[x-1].length, ['пакет', 'пакета', 'пакетов']) + ')'); + window.updateSliderDisplay(x); }); // Set click handlers @@ -2075,6 +2114,7 @@ const SetSharedNetworkPlayerState = function() // Add info button $('#NetworkPlayer').empty(); $('#PacketSliderInput').hide(); + $('#AnimationFilters').hide(); $('#NetworkPlayerLabel').empty(); $('#NetworkPlayer').append(''); return; diff --git a/front/src/templates/network.html b/front/src/templates/network.html index b7338ac0..eeabda79 100644 --- a/front/src/templates/network.html +++ b/front/src/templates/network.html @@ -145,6 +145,16 @@ + Ожидание 10-30 сек. diff --git a/front/src/templates/network_shared.html b/front/src/templates/network_shared.html index 7c319b1d..4df09c4c 100644 --- a/front/src/templates/network_shared.html +++ b/front/src/templates/network_shared.html @@ -90,7 +90,7 @@ -
+
@@ -100,10 +100,18 @@
+ Ожидание 10-30 сек. - - - +
Задать вопрос
From 8128006f1287110a57bf4f3a83eb40ef1296419f Mon Sep 17 00:00:00 2001 From: XRenso Date: Sat, 11 Oct 2025 17:58:19 +0300 Subject: [PATCH 2/2] Fix: return network_cy --- front/src/static/miminet_animation.js | 1 + 1 file changed, 1 insertion(+) diff --git a/front/src/static/miminet_animation.js b/front/src/static/miminet_animation.js index 73f4d583..3cfa01c9 100644 --- a/front/src/static/miminet_animation.js +++ b/front/src/static/miminet_animation.js @@ -9,6 +9,7 @@ var PacketPlayer = (function () { var player_pause = 0; var player_play = 0; var pkts_on_the_fly = 0; + var network_cy = null; var animation_traffic_step_callback = function(){};