From 2cbc08f79ebd49f1ae1c7161a038009ac23e3e83 Mon Sep 17 00:00:00 2001
From: Sergey Shkurov <sergey.shkurov@traderepublic.com>
Date: Sat, 29 Apr 2023 01:30:58 +0200
Subject: [PATCH 1/6] Remove outdated AddService

---
 src/App.vue              |   3 -
 src/views/AddService.vue | 145 ---------------------------------------
 2 files changed, 148 deletions(-)
 delete mode 100644 src/views/AddService.vue

diff --git a/src/App.vue b/src/App.vue
index 5fc053a..ef2205b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@
 			</div>
 		</div>
 		<Settings/>
-		<AddService/>
 		<AddPattern/>
 		<LookBack ref="lookBack" />
 	</div>
@@ -26,7 +25,6 @@
 
 	import Navbar from './components/Navbar';
 	import Settings from './views/Settings';
-	import AddService from './views/AddService';
 	import AddPattern from './views/AddPattern';
 	import LookBack from './views/LookBack';
 	import SockJS from 'sockjs-client';
@@ -201,7 +199,6 @@
 		},
 		components: {
 			AddPattern,
-			AddService,
 			LookBack,
 			Settings,
 			Navbar,
diff --git a/src/views/AddService.vue b/src/views/AddService.vue
deleted file mode 100644
index 1fd420a..0000000
--- a/src/views/AddService.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-	<b-modal @ok="createService" @cancel="reset" id="addServiceModal" title="Add service"
-			 cancel-title="Cancel"
-			 centered scrollable>
-		<form ref="addServiceForm">
-			<b-form-group
-					label-cols-sm="4"
-					label="Name"
-					label-for="addSvc-name">
-				<b-form-input @keydown.native.enter="createService" id="addSvc-name" required
-							  v-model="svcName"/>
-			</b-form-group>
-			<b-form-group
-					label-cols-sm="4"
-					label="Port"
-					label-for="addSvc-port">
-				<b-form-input @keydown.native.enter="createService" type="number" min="1" max="65535"
-							  id="addSvc-port" required v-model.number="svcPort"/>
-			</b-form-group>
-			<b-form-group
-					label-cols-sm="4"
-					label="Process chunked transfer encoding"
-					label-for="addSvc-process-chunked">
-				<b-form-checkbox id="addSvc-process-chunked" required
-								 v-model="processChunkedEncoding"/>
-			</b-form-group>
-			<b-form-group
-					label-cols-sm="4"
-					label="Decompress GZIP"
-					label-for="addSvc-ungzip">
-				<b-form-checkbox id="addSvc-ungzip" required
-								 v-model="ungzipHttp"/>
-			</b-form-group>
-			<b-form-group
-					label-cols-sm="4"
-					label="Apply urldecode"
-					label-for="addSvc-urldecode">
-				<b-form-checkbox id="addSvc-urldecode" required
-								 v-model="urldecodeHttpRequests"/>
-			</b-form-group>
-			<b-form-group
-					label-cols-sm="4"
-					label="Merge adjacent packets"
-					label-for="addSvc-mergeAdjacent">
-				<b-form-checkbox id="addSvc-mergeAdjacent" required
-								 v-model="mergeAdjacentPackets"/>
-			</b-form-group>
-			<b-form-group
-					label-cols-sm="4"
-					label="Inflate WebSockets"
-					label-for="addSvc-inflateWS">
-				<b-form-checkbox id="addSvc-inflateWS" required
-								 v-model="parseWebSockets"/>
-			</b-form-group>
-			<b-form-group
-					label-cols-sm="4"
-					label="Decrypt TLS (TLS_RSA_WITH_AES only)"
-					label-for="addSvc-decryptTls">
-				<b-form-checkbox id="addSvc-decryptTls" required
-								 v-model="decryptTls"/>
-			</b-form-group>
-		</form>
-	</b-modal>
-</template>
-
-<script>
-	export default {
-		name: 'AddService',
-		data() {
-			return {
-				svcName: String(),
-				svcPort: Number(),
-				processChunkedEncoding: Boolean,
-				ungzipHttp: Boolean(),
-				urldecodeHttpRequests: Boolean(),
-				mergeAdjacentPackets: Boolean(),
-				parseWebSockets: Boolean(),
-				decryptTls: Boolean(),
-			};
-		},
-		methods: {
-			checkValidity() {
-				return this.$refs.addServiceForm.reportValidity()
-					&& this.svcPort >= 1
-					&& this.svcPort <= 65535;
-			},
-
-			reset() {
-				this.svcName = '';
-				this.svcPort = 0;
-				this.processChunkedEncoding = false;
-				this.ungzipHttp = false;
-				this.urldecodeHttpRequests = false;
-				this.mergeAdjacentPackets = false;
-				this.parseWebSockets = false;
-				this.decryptTls = false;
-			},
-
-			createService(ev) {
-				const name = this.svcName;
-				const port = this.svcPort;
-				const processChunkedEncoding = this.processChunkedEncoding;
-				const ungzipHttp = this.ungzipHttp;
-				const urldecodeHttpRequests = this.urldecodeHttpRequests;
-				const mergeAdjacentPackets = this.mergeAdjacentPackets;
-				const parseWebSockets = this.parseWebSockets;
-				const decryptTls = this.decryptTls;
-				if (!this.checkValidity()) {
-					ev.preventDefault();
-					console.debug('Form is invalid');
-					return;
-				}
-				console.debug(`Creating service ${name} (${port})...`);
-
-				this.$http.post('service/', {
-					name,
-					port,
-					processChunkedEncoding,
-					ungzipHttp,
-					urldecodeHttpRequests,
-					mergeAdjacentPackets,
-					parseWebSockets,
-					decryptTls,
-				}).then(response => {
-					const data = response.data;
-					console.debug('Done adding service', data);
-					this.$emit('serviceAddComplete');
-					this.reset();
-					this.$bvModal.hide('addServiceModal');
-				}).catch(e => {
-					this.$bvToast.toast(`Failed to add service: ${e}`, {
-						title: 'Error',
-						variant: 'danger',
-					});
-					console.error('Failed to add service', e);
-				});
-				ev.preventDefault();
-			},
-		},
-	};
-</script>
-
-<style scoped>
-
-</style>

From f33613ed6b9e1ee51972578bb3088c4896be3992 Mon Sep 17 00:00:00 2001
From: Sergey Shkurov <sergey.shkurov@traderepublic.com>
Date: Sat, 29 Apr 2023 01:31:46 +0200
Subject: [PATCH 2/6] Change service edit endpoint

---
 src/views/ServiceModal.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/views/ServiceModal.vue b/src/views/ServiceModal.vue
index 2aa75fd..7eda366 100644
--- a/src/views/ServiceModal.vue
+++ b/src/views/ServiceModal.vue
@@ -102,7 +102,16 @@
 					return;
 				}
 				console.debug('Submitting service...', this.service, this.creating);
-				this.$http.post('service/', this.service)
+
+				let url;
+
+				if (this.creating) {
+					url = 'service/';
+				} else {
+					url = 'service/' + this.initialService.port
+				}
+
+				this.$http.post(url, this.service)
 					.then(response => {
 						console.info('Done editing/creating service', response.data);
 						this.$emit('service-update-needed');

From 154338f128f9e5212c1c94ab1bc5b5b85e85efb4 Mon Sep 17 00:00:00 2001
From: Sergey Shkurov <sergey.shkurov@traderepublic.com>
Date: Sat, 29 Apr 2023 02:06:57 +0200
Subject: [PATCH 3/6] Refactor AddPattern.vue

---
 src/App.vue                                    | 3 ---
 src/components/PatternsDropdown.vue            | 8 +++++++-
 src/views/{AddPattern.vue => PatternModal.vue} | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)
 rename src/views/{AddPattern.vue => PatternModal.vue} (97%)

diff --git a/src/App.vue b/src/App.vue
index ef2205b..d614253 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@
 			</div>
 		</div>
 		<Settings/>
-		<AddPattern/>
 		<LookBack ref="lookBack" />
 	</div>
 </template>
@@ -25,7 +24,6 @@
 
 	import Navbar from './components/Navbar';
 	import Settings from './views/Settings';
-	import AddPattern from './views/AddPattern';
 	import LookBack from './views/LookBack';
 	import SockJS from 'sockjs-client';
 	import {openDB,} from 'idb';
@@ -198,7 +196,6 @@
       },
 		},
 		components: {
-			AddPattern,
 			LookBack,
 			Settings,
 			Navbar,
diff --git a/src/components/PatternsDropdown.vue b/src/components/PatternsDropdown.vue
index 9e16d59..ffc002e 100644
--- a/src/components/PatternsDropdown.vue
+++ b/src/components/PatternsDropdown.vue
@@ -54,11 +54,17 @@
 				</button>
 			</div>
 		</b-dropdown-item-button>
+
+		<AddPattern/>
 	</b-dropdown>
 </template>
+<!--suppress JSUnresolvedReference -->
 <script>
+	import PatternModal from '@/views/PatternModal.vue';
+
 	export default {
 		name: 'PatternsDropdown',
+		components: {AddPattern: PatternModal, },
 		mounted() {
 			this.updatePatterns();
 		},
@@ -84,7 +90,7 @@
 				return this.$store.state.services.find(o => o.port === port)?.name ?? '<Deleted service>'
 			},
 			showAddPattern() {
-				this.$bvModal.show('addPatternModal');
+				this.$bvModal.show('patternModal');
 			},
 			showLookBack(pattern) {
 				// Не знаю, как сделать это без костылей
diff --git a/src/views/AddPattern.vue b/src/views/PatternModal.vue
similarity index 97%
rename from src/views/AddPattern.vue
rename to src/views/PatternModal.vue
index 1e299ba..5604911 100644
--- a/src/views/AddPattern.vue
+++ b/src/views/PatternModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<b-modal @ok="addPattern" @cancel="reset" id="addPatternModal"
+	<b-modal @ok="addPattern" @cancel="reset" id="patternModal"
 			 title="Creating pattern"
 			 cancel-title="Cancel"
 			 centered scrollable>
@@ -164,7 +164,7 @@
 						console.debug('Done adding pattern', data);
 						this.$emit('patternAddComplete');
 						this.reset();
-						this.$bvModal.hide('addPatternModal');
+						this.$bvModal.hide('patternModal');
 					}).catch(e => {
 					this.$bvToast.toast(`Failed to add pattern: ${e}`, {
 						title: 'Error',

From 41c982b1dd015ece347dbfa3529fb98b1b93c21e Mon Sep 17 00:00:00 2001
From: Sergey Shkurov <sergey.shkurov@traderepublic.com>
Date: Sat, 29 Apr 2023 02:58:43 +0200
Subject: [PATCH 4/6] Pass parameters to PatternModal

---
 src/components/PatternsDropdown.vue | 11 +++++++-
 src/views/ContentStream.vue         |  4 ---
 src/views/PatternModal.vue          | 42 ++++++++++++++++++++++-------
 src/views/ServiceModal.vue          |  4 ---
 src/views/Settings.vue              |  4 ---
 5 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/components/PatternsDropdown.vue b/src/components/PatternsDropdown.vue
index ffc002e..80c0546 100644
--- a/src/components/PatternsDropdown.vue
+++ b/src/components/PatternsDropdown.vue
@@ -55,7 +55,7 @@
 			</div>
 		</b-dropdown-item-button>
 
-		<AddPattern/>
+		<AddPattern :creating="patternModalIsCreating" :initial-pattern="patternModalEditingPattern" />
 	</b-dropdown>
 </template>
 <!--suppress JSUnresolvedReference -->
@@ -65,6 +65,12 @@
 	export default {
 		name: 'PatternsDropdown',
 		components: {AddPattern: PatternModal, },
+		data() {
+			return {
+				patternModalIsCreating: true,
+				patternModalEditingPattern: {},
+			};
+		},
 		mounted() {
 			this.updatePatterns();
 		},
@@ -90,7 +96,10 @@
 				return this.$store.state.services.find(o => o.port === port)?.name ?? '<Deleted service>'
 			},
 			showAddPattern() {
+				this.patternModalIsCreating = true;
+				this.patternModalEditingPattern = {};
 				this.$bvModal.show('patternModal');
+				console.debug('Showing patternModal...');
 			},
 			showLookBack(pattern) {
 				// Не знаю, как сделать это без костылей
diff --git a/src/views/ContentStream.vue b/src/views/ContentStream.vue
index cd8a9f1..c112763 100644
--- a/src/views/ContentStream.vue
+++ b/src/views/ContentStream.vue
@@ -67,7 +67,3 @@
 		},
 	};
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/PatternModal.vue b/src/views/PatternModal.vue
index 5604911..2a5114e 100644
--- a/src/views/PatternModal.vue
+++ b/src/views/PatternModal.vue
@@ -85,22 +85,44 @@
 </template>
 
 <script>
-	const hexRegex = /[0-9A-Fa-f ]/;
+
+const hexRegex = /[0-9A-Fa-f ]/;
+const defaultPattern = {
+	name: '',
+	value: '',
+	color: '#FF7474',
+	searchType: 'SUBSTRING',
+	directionType: 'BOTH',
+	actionType: 'FIND',
+	serviceId: null,
+};
+
 	export default {
 		name: 'AddPattern',
+		props: {
+			creating: Boolean,
+
+			initialPattern: {
+				name: String,
+				value: String,
+				color: String,
+				searchType: String,
+				directionType: String,
+				actionType: String,
+				serviceId: Number,
+			},
+		},
 		data() {
 			return {
-				newPattern: {
-					name: '',
-					value: '',
-					color: '#FF7474',
-					searchType: 'SUBSTRING',
-					directionType: 'BOTH',
-          actionType: 'FIND',
-					serviceId: null,
-				},
+				newPattern: {},
 			};
 		},
+		watch: {
+			initialPattern() {
+				console.debug('initialService changed, reassigning...', this.initialPattern);
+				this.newPattern = {...defaultPattern, ...this.initialPattern,};
+			},
+		},
 		computed: {
 			serviceOptions: function () {
 				let services = this.$store.state.services;
diff --git a/src/views/ServiceModal.vue b/src/views/ServiceModal.vue
index 7eda366..b66fb8e 100644
--- a/src/views/ServiceModal.vue
+++ b/src/views/ServiceModal.vue
@@ -142,7 +142,3 @@
 		},
 	};
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index de5939b..25b6e08 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -62,7 +62,3 @@
 		},
 	};
 </script>
-
-<style scoped>
-
-</style>

From ae1a026380d6106713f1776e687eb73ba2a5a1f3 Mon Sep 17 00:00:00 2001
From: Sergey Shkurov <sergey.shkurov@traderepublic.com>
Date: Sat, 29 Apr 2023 04:17:41 +0200
Subject: [PATCH 5/6] Pattern editing

---
 src/App.vue                         |  1 +
 src/components/PatternsDropdown.vue | 21 ++++++++++++++++++---
 src/views/PatternModal.vue          | 29 +++++++++++++++++------------
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d614253..d718fd6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -143,6 +143,7 @@
 							break;
 						}
 						case 'FINISH_LOOKBACK': {
+							console.debug('Lookback completed');
 							this.$bvToast.toast(`Lookback completed`, {
 								title: 'Notification',
 								variant: 'success',
diff --git a/src/components/PatternsDropdown.vue b/src/components/PatternsDropdown.vue
index 80c0546..e07637a 100644
--- a/src/components/PatternsDropdown.vue
+++ b/src/components/PatternsDropdown.vue
@@ -30,6 +30,12 @@
 			<template v-else>of service {{ getServiceName(pattern.serviceId) }} #{{ pattern.serviceId }}</template>
 
 			<div class="float-right" style="margin-left: 2em;">
+				<button type="button" class="btn btn-outline-info btn-sm mr-1"
+								@click.stop.prevent="showEditPattern(pattern)"
+								title="Edit pattern">
+					<i class="fas fa-edit"></i>
+				</button>
+
 				<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">
@@ -55,7 +61,7 @@
 			</div>
 		</b-dropdown-item-button>
 
-		<AddPattern :creating="patternModalIsCreating" :initial-pattern="patternModalEditingPattern" />
+		<PatternModal :creating="patternModalIsCreating" :initial-pattern="patternModalEditingPattern" />
 	</b-dropdown>
 </template>
 <!--suppress JSUnresolvedReference -->
@@ -64,7 +70,7 @@
 
 	export default {
 		name: 'PatternsDropdown',
-		components: {AddPattern: PatternModal, },
+		components: {PatternModal: PatternModal, },
 		data() {
 			return {
 				patternModalIsCreating: true,
@@ -99,7 +105,16 @@
 				this.patternModalIsCreating = true;
 				this.patternModalEditingPattern = {};
 				this.$bvModal.show('patternModal');
-				console.debug('Showing patternModal...');
+				console.debug('Showing patternModal (create)');
+			},
+			showEditPattern(pattern) {
+				this.patternModalIsCreating = false;
+				this.patternModalEditingPattern = {};
+				this.$nextTick(() => {
+					this.patternModalEditingPattern = pattern;
+					this.$bvModal.show('patternModal');
+					console.debug('Showing patternModal (edit)');
+				});
 			},
 			showLookBack(pattern) {
 				// Не знаю, как сделать это без костылей
diff --git a/src/views/PatternModal.vue b/src/views/PatternModal.vue
index 2a5114e..856ce5b 100644
--- a/src/views/PatternModal.vue
+++ b/src/views/PatternModal.vue
@@ -14,6 +14,7 @@
 			</b-form-group>
 
 			<b-form-group
+					v-if="creating"
 					label-cols-sm="4"
 					label-cols-lg="3"
 					label="Pattern"
@@ -25,6 +26,7 @@
 			</b-form-group>
 
       <b-form-group
+					v-if="creating"
           label-cols-sm="4"
           label-cols-lg="3"
           label="Search action"
@@ -46,6 +48,7 @@
 			</b-form-group>
 
 			<b-form-group
+					v-if="creating"
 					label-cols-sm="4"
 					label-cols-lg="3"
 					label="Search method"
@@ -59,6 +62,7 @@
 			</b-form-group>
 
 			<b-form-group
+					v-if="creating"
 					label-cols-sm="4"
 					label-cols-lg="3"
 					label="Search type"
@@ -72,6 +76,7 @@
 			</b-form-group>
 
 			<b-form-group
+					v-if="creating"
 					label-cols-sm="4"
 					label-cols-lg="3"
 					label="Service"
@@ -98,7 +103,7 @@ const defaultPattern = {
 };
 
 	export default {
-		name: 'AddPattern',
+		name: 'PatternModal',
 		props: {
 			creating: Boolean,
 
@@ -158,14 +163,7 @@ const defaultPattern = {
 			},
 
 			reset() {
-				this.newPattern = {
-					name: '',
-					value: '',
-					color: '#FF7474',
-					searchType: 'SUBSTRING',
-					directionType: 'BOTH',
-          actionType: 'FIND',
-				};
+				this.newPattern = {...defaultPattern,};
 			},
 
 			addPattern(ev) {
@@ -174,16 +172,23 @@ const defaultPattern = {
 					console.debug('Form is invalid');
 					return;
 				}
-				console.debug('Adding pattern...', this.newPattern);
+				console.debug('Adding/editing pattern...', this.newPattern);
 
 				if (this.newPattern.searchType === 'SUBBYTES') {
 					this.newPattern.value = this.newPattern.value.replace(/\s+/g, '').toLowerCase();
 				}
 
-				this.$http.post('pattern/', this.newPattern)
+				let url;
+				if (this.creating) {
+					url = 'pattern/'
+				} else {
+					url = 'pattern/' + this.newPattern.id
+				}
+
+				this.$http.post(url, this.newPattern)
 					.then(response => {
 						const data = response.data;
-						console.debug('Done adding pattern', data);
+						console.debug('Done adding/editing pattern', data);
 						this.$emit('patternAddComplete');
 						this.reset();
 						this.$bvModal.hide('patternModal');

From b9691e9215c1c5f48f4e052b02fe108ba61cbfbc Mon Sep 17 00:00:00 2001
From: Sergey Shkurov <sergey.shkurov@traderepublic.com>
Date: Sat, 29 Apr 2023 04:29:18 +0200
Subject: [PATCH 6/6] Refactor lookback

---
 src/App.vue                         | 3 ---
 src/components/PatternsDropdown.vue | 8 +++++---
 src/views/LookBack.vue              | 3 +--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d718fd6..5befa74 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,6 @@
 			</div>
 		</div>
 		<Settings/>
-		<LookBack ref="lookBack" />
 	</div>
 </template>
 
@@ -24,7 +23,6 @@
 
 	import Navbar from './components/Navbar';
 	import Settings from './views/Settings';
-	import LookBack from './views/LookBack';
 	import SockJS from 'sockjs-client';
 	import {openDB,} from 'idb';
 
@@ -197,7 +195,6 @@
       },
 		},
 		components: {
-			LookBack,
 			Settings,
 			Navbar,
 		},
diff --git a/src/components/PatternsDropdown.vue b/src/components/PatternsDropdown.vue
index e07637a..df4dcb6 100644
--- a/src/components/PatternsDropdown.vue
+++ b/src/components/PatternsDropdown.vue
@@ -62,19 +62,22 @@
 		</b-dropdown-item-button>
 
 		<PatternModal :creating="patternModalIsCreating" :initial-pattern="patternModalEditingPattern" />
+		<LookBack :pattern-id="patternIdForLookback" />
 	</b-dropdown>
 </template>
 <!--suppress JSUnresolvedReference -->
 <script>
 	import PatternModal from '@/views/PatternModal.vue';
+	import LookBack from '@/views/LookBack.vue';
 
 	export default {
 		name: 'PatternsDropdown',
-		components: {PatternModal: PatternModal, },
+		components: {LookBack, PatternModal, },
 		data() {
 			return {
 				patternModalIsCreating: true,
 				patternModalEditingPattern: {},
+				patternIdForLookback: 0,
 			};
 		},
 		mounted() {
@@ -117,8 +120,7 @@
 				});
 			},
 			showLookBack(pattern) {
-				// Не знаю, как сделать это без костылей
-				this.$root.$children[0].$refs.lookBack.patternId = pattern.id;
+				this.patternIdForLookback = pattern.id;
 				this.$bvModal.show('lookBackModal');
 			},
 			updatePatterns() {
diff --git a/src/views/LookBack.vue b/src/views/LookBack.vue
index c8de37c..ef7e16e 100644
--- a/src/views/LookBack.vue
+++ b/src/views/LookBack.vue
@@ -20,11 +20,10 @@
 export default {
 	name: 'LookBack',
 	props: {
-		id: Number,
+		patternId: Number,
 	},
 	data() {
 		return {
-			patternId: null,
 			minutes: 5,
 		};
 	},