Выбор сервиса для паттерна

src/components/PatternsDropdown.vue

@@ -22,9 +22,12 @@
       <template v-if="pattern.actionType === 'FIND'">search </template>
       <template v-else>ignore </template>
 
-			<template v-if="pattern.directionType === 'BOTH'">anywhere</template>
+			<template v-if="pattern.directionType === 'BOTH'">anywhere </template>
-			<template v-else-if="pattern.directionType === 'INPUT'">in request</template>
+			<template v-else-if="pattern.directionType === 'INPUT'">in request </template>
-			<template v-else>in response</template>
+			<template v-else>in response </template>
+
+			<template v-if="pattern.serviceId === null">of any service</template>
+			<template v-else>of service {{ getServiceName(pattern.serviceId) }} #{{ pattern.serviceId }}</template>
 
 			<div class="float-right" style="margin-left: 2em;">
 				<button v-if="pattern.actionType === 'FIND'" type="button" class="btn btn-outline-warning btn-sm mr-1"
@@ -66,6 +69,9 @@
 					return `color: inherit;`;
 				}
     	},
+			getServiceName(port) {
+				return this.$store.state.services.find(o => o.port === port)?.name ?? '<Deleted service>'
+			},
 			showAddPattern() {
 				this.$bvModal.show('addPatternModal');
 			},

src/views/AddPattern.vue

@@ -12,6 +12,7 @@
 					label-for="pattern-name">
 				<b-form-input @keydown.native.enter="addPattern" id="pattern-name" required v-model="newPattern.name"/>
 			</b-form-group>
+
 			<b-form-group
 					label-cols-sm="4"
 					label-cols-lg="3"
@@ -22,6 +23,7 @@
 							  id="pattern-value" required v-model="newPattern.value"
 							  :placeholder="getPlaceholder()"/>
 			</b-form-group>
+
       <b-form-group
           label-cols-sm="4"
           label-cols-lg="3"
@@ -33,6 +35,7 @@
           <option value="IGNORE">Ignore matching streams</option>
         </b-form-select>
       </b-form-group>
+
 			<b-form-group v-if="newPattern.actionType === 'FIND'"
 					label-cols-sm="4"
 					label-cols-lg="3"
@@ -41,6 +44,7 @@
 					label-for="pattern-color">
 				<b-form-input id="pattern-color" required type="color" v-model="newPattern.color"/>
 			</b-form-group>
+
 			<b-form-group
 					label-cols-sm="4"
 					label-cols-lg="3"
@@ -53,6 +57,7 @@
 					<option value="SUBBYTES">Bytes</option>
 				</b-form-select>
 			</b-form-group>
+
 			<b-form-group
 					label-cols-sm="4"
 					label-cols-lg="3"
@@ -65,6 +70,16 @@
 					<option value="BOTH" selected>Anywhere</option>
 				</b-form-select>
 			</b-form-group>
+
+			<b-form-group
+					label-cols-sm="4"
+					label-cols-lg="3"
+					label="Service"
+					description="Apply this pattern only to the specific service"
+					label-for="pattern-service">
+				<b-form-select id="pattern-service" :options="serviceOptions"
+											 required v-model="newPattern.serviceId"></b-form-select>
+			</b-form-group>
 		</form>
 	</b-modal>
 </template>
@@ -82,9 +97,26 @@
 					searchType: 'SUBSTRING',
 					directionType: 'BOTH',
           actionType: 'FIND',
+					serviceId: null,
 				},
 			};
 		},
+		computed: {
+			serviceOptions: function () {
+				let services = this.$store.state.services;
+				let options = services.map(service => {
+					return {
+						value: service.port,
+						text: `${service.name} #${service.port}`,
+					}
+				});
+
+				return [
+						{ value: null, text: 'Any service', },
+						...options,
+				];
+			},
+		},
 		methods: {
 			getPlaceholder() {
 				if (this.newPattern.searchType === 'REGEX') return '[A-Z0-9]{31}=';