Добавлено меню для применения паттерна к старым стримам

src/App.vue

@@ -17,6 +17,7 @@
 		<AddService/>
 		<EditService/>
 		<AddPattern/>
+		<LookBack ref="lookBack" />
 	</div>
 </template>
 
@@ -28,6 +29,7 @@
 	import AddService from './views/AddService';
 	import EditService from './views/EditService';
 	import AddPattern from './views/AddPattern';
+	import LookBack from './views/LookBack';
 	import SockJS from 'sockjs-client';
 	import {openDB,} from 'idb';
 
@@ -81,7 +83,6 @@
 				};
 				this.websocket.onmessage = (ev) => {
 					const parsed = JSON.parse(ev.data);
-					// console.debug('[WS] New message', parsed);
 
 					switch (parsed.type) {
 						case 'NEW_STREAM': {
@@ -146,6 +147,16 @@
 							});
 							break;
 						}
+						case 'FINISH_LOOKBACK': {
+							this.$bvToast.toast(`Lookback completed`, {
+								title: 'Notification',
+								variant: 'success',
+								autoHideDelay: 5000,
+							});
+							this.$refs.sidebar.streams = [];
+							this.$refs.sidebar.$refs.infiniteLoader.stateChanger.reset();
+							break;
+						}
 						default: {
 							console.error('[WS] Event is not implemented!', parsed);
 							break;
@@ -161,6 +172,7 @@
 			AddPattern,
 			AddService,
 			EditService,
+			LookBack,
 			Settings,
 			Navbar,
 		},

src/components/PatternsDropdown.vue

@@ -27,12 +27,20 @@
 			<template v-else>in response</template>
 
 			<div class="float-right" style="margin-left: 2em;">
-				<button v-if="pattern.enabled" type="button" class="btn btn-outline-danger btn-block btn-sm"
-						@click.stop.prevent="togglePattern(pattern)">
+				<button v-if="pattern.actionType === 'FIND'" type="button" class="btn btn-outline-warning btn-sm mr-1"
+								@click.stop.prevent="showLookBack(pattern)"
+								title="Apply pattern to older streams">
+					<i class="fas fa-backward"></i>
+				</button>
+
+				<button v-if="pattern.enabled" type="button" class="btn btn-outline-danger btn-sm"
+						@click.stop.prevent="togglePattern(pattern)"
+						title="Stop matching streams with this pattern">
 					<i class="fas fa-pause"></i>
 				</button>
-				<button v-else type="button" class="btn btn-outline-success btn-block btn-sm"
-						@click.stop.prevent="togglePattern(pattern)">
+				<button v-else type="button" class="btn btn-outline-success btn-sm"
+						@click.stop.prevent="togglePattern(pattern)"
+						title="Start matching streams with this pattern again">
 					<i class="fas fa-play"></i>
 				</button>
 			</div>
@@ -42,9 +50,6 @@
 <script>
 	export default {
 		name: 'PatternsDropdown',
-		data() {
-			return {};
-		},
 		mounted() {
 			this.updatePatterns();
 		},
@@ -64,6 +69,11 @@
 			showAddService() {
 				this.$bvModal.show('addPatternModal');
 			},
+			showLookBack(pattern) {
+				// Не знаю, как сделать это без костылей
+				this.$root.$children[0].$refs.lookBack.patternId = pattern.id;
+				this.$bvModal.show('lookBackModal');
+			},
 			updatePatterns() {
 				this.$http.get('pattern/')
 					.then(r => this.$store.commit('setPatterns', r.data))
@@ -114,15 +124,12 @@
 					console.error('Failed to toggle pattern', e);
 				});
 			},
-
 			addPatternFromWs(pattern) {
 				this.$store.commit('addPattern', pattern);
 			},
-
 			deletePatternFromWs(id) {
 				this.$store.commit('setPatterns', this.$store.state.patterns.filter(o => o.id !== id));
 			},
-
 			togglePatternFromWs(id, enabled) {
 				this.$store.state.patterns.forEach(pattern => {
 					if (pattern.id === id) {

src/components/Sidebar.vue

@@ -134,7 +134,7 @@
 				if (ourStreams?.length && ourStreams[ourStreams.length - 1]) {
 					startsFrom = ourStreams[ourStreams.length - 1].id;
 				} else {
-					startsFrom = Number.MAX_SAFE_INTEGER; // FIXME: rewrite backend?
+					startsFrom = Number.MAX_SAFE_INTEGER;
 				}
 
 				this.$http.post(`/stream/${this.$route?.params?.servicePort || 'all'}`, {
@@ -177,12 +177,12 @@
 					.then(() => {
 						this.$store.commit('startPcap');
 					}).catch(e => {
-					this.$bvToast.toast(`Failed to start pcap: ${e}`, {
-						title: 'Error',
-						variant: 'danger',
+						this.$bvToast.toast(`Failed to start pcap: ${e}`, {
+							title: 'Error',
+							variant: 'danger',
+						});
+						console.error('Failed to start pcap', e);
 					});
-					console.error('Failed to start pcap', e);
-				});
 			},
 			addStreamFromWs(stream) {
 				const currentPort = parseInt(this.$route?.params?.servicePort, 10);

src/views/AddPattern.vue

@@ -87,7 +87,7 @@
 		},
 		methods: {
 			getPlaceholder() {
-				if (this.newPattern.searchType === 'REGEX') return 'CTF{.{42}}';
+				if (this.newPattern.searchType === 'REGEX') return '[A-Z0-9]{31}=';
 				else if (this.newPattern.searchType === 'SUBSTRING') return 'HTTP/2';
 				else return 'DEAD BEEF 1337';
 			},
@@ -144,7 +144,3 @@
 		},
 	};
 </script>
-
-<style scoped>
-
-</style>

src/views/LookBack.vue

@@ -0,0 +1,58 @@
+<template>
+	<b-modal @ok="lookBack" id="lookBackModal"
+					 title="Search into the past"
+					 cancel-title="Cancel"
+					 centered scrollable>
+		<form ref="lookBackForm">
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Minutes"
+					description="How far into the past do we want to look"
+					label-for="lookback-minutes">
+				<b-form-input @keydown.native.enter="lookBack" id="lookback-minutes" required v-model="minutes"/>
+			</b-form-group>
+		</form>
+	</b-modal>
+</template>
+
+<script>
+export default {
+	name: 'LookBack',
+	props: {
+		id: Number,
+	},
+	data() {
+		return {
+			patternId: null,
+			minutes: 5,
+		};
+	},
+	methods: {
+		checkValidity() {
+			return this.$refs.lookBackForm.reportValidity();
+		},
+
+		lookBack(ev) {
+			ev.preventDefault();
+			if (!this.checkValidity()) {
+				console.debug('Form is invalid');
+				return;
+			}
+			console.debug('Looking back with pattern TODO');
+
+			this.$http.post(`pattern/${this.patternId}/lookback`, this.minutes)
+					.then(() => {
+						console.debug('Lookback started');
+						this.$bvModal.hide('lookBackModal');
+					}).catch(e => {
+				this.$bvToast.toast(`Failed to start lookback: ${e}`, {
+					title: 'Error',
+					variant: 'danger',
+				});
+				console.error('Failed to start lookback', e);
+			});
+		},
+	},
+};
+</script>