Merge branch 'pattern-editing' into 'master'

Pattern editing

See merge request packmate/packmate-frontend!3

src/App.vue

@@ -14,9 +14,6 @@
 			</div>
 		</div>
 		<Settings/>
-		<AddService/>
-		<AddPattern/>
-		<LookBack ref="lookBack" />
 	</div>
 </template>
 
@@ -26,9 +23,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';
 	import {openDB,} from 'idb';
 
@@ -147,6 +141,7 @@
 							break;
 						}
 						case 'FINISH_LOOKBACK': {
+							console.debug('Lookback completed');
 							this.$bvToast.toast(`Lookback completed`, {
 								title: 'Notification',
 								variant: 'success',
@@ -200,9 +195,6 @@
       },
 		},
 		components: {
-			AddPattern,
-			AddService,
-			LookBack,
 			Settings,
 			Navbar,
 		},

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">
@@ -54,11 +60,26 @@
 				</button>
 			</div>
 		</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: {LookBack, PatternModal, },
+		data() {
+			return {
+				patternModalIsCreating: true,
+				patternModalEditingPattern: {},
+				patternIdForLookback: 0,
+			};
+		},
 		mounted() {
 			this.updatePatterns();
 		},
@@ -84,11 +105,22 @@
 				return this.$store.state.services.find(o => o.port === port)?.name ?? '<Deleted service>'
 			},
 			showAddPattern() {
-				this.$bvModal.show('addPatternModal');
+				this.patternModalIsCreating = true;
+				this.patternModalEditingPattern = {};
+				this.$bvModal.show('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) {
-				// Не знаю, как сделать это без костылей
-				this.$root.$children[0].$refs.lookBack.patternId = pattern.id;
+				this.patternIdForLookback = pattern.id;
 				this.$bvModal.show('lookBackModal');
 			},
 			updatePatterns() {

src/views/AddService.vue

@@ -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>

src/views/ContentStream.vue

@@ -67,7 +67,3 @@
 		},
 	};
 </script>
-
-<style scoped>
-
-</style>

src/views/LookBack.vue

@@ -20,11 +20,10 @@
 export default {
 	name: 'LookBack',
 	props: {
-		id: Number,
+		patternId: Number,
 	},
 	data() {
 		return {
-			patternId: null,
 			minutes: 5,
 		};
 	},

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>
@@ -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"
@@ -85,22 +90,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',
+		name: 'PatternModal',
+		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;
@@ -136,14 +163,7 @@
 			},
 
 			reset() {
-				this.newPattern = {
-					name: '',
-					value: '',
-					color: '#FF7474',
-					searchType: 'SUBSTRING',
-					directionType: 'BOTH',
-          actionType: 'FIND',
-				};
+				this.newPattern = {...defaultPattern,};
 			},
 
 			addPattern(ev) {
@@ -152,19 +172,26 @@
 					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('addPatternModal');
+						this.$bvModal.hide('patternModal');
 					}).catch(e => {
 					this.$bvToast.toast(`Failed to add pattern: ${e}`, {
 						title: 'Error',

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');
@@ -133,7 +142,3 @@
 		},
 	};
 </script>
-
-<style scoped>
-
-</style>

src/views/Settings.vue

@@ -62,7 +62,3 @@
 		},
 	};
 </script>
-
-<style scoped>
-
-</style>