From be26ea5bcea8761bf36f05a0411db374366c5a78 Mon Sep 17 00:00:00 2001
From: serega6531 <S.Shkurov@bssys.com>
Date: Tue, 12 Jan 2021 13:43:10 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         | 41 ++++++++++++++++++++++++-----
 src/components/Navbar.vue           | 17 ++----------
 src/components/PatternsDropdown.vue | 17 ++----------
 src/store.js                        |  8 +++++-
 4 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8a22513..30c4860 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
 	<div id="app">
-		<Navbar ref="navbar"/>
+		<Navbar/>
 		<div class="container-fluid">
 			<div class="row">
 				<transition name="fade" mode="out-in">
@@ -90,19 +90,19 @@
 							break;
 						}
 						case 'SAVE_SERVICE': {
-							this.$refs.navbar.addServiceFromWs(parsed.value);
+							this.addServiceFromWs(parsed.value);
 							break;
 						}
 						case 'DELETE_SERVICE': {
-							this.$refs.navbar.deleteServiceFromWs(parsed.value);
+							this.deleteServiceFromWs(parsed.value);
 							break;
 						}
 						case 'SAVE_PATTERN': {
-							this.$refs.navbar.$refs.patternsDropdown.addPatternFromWs(parsed.value);
+							this.addPatternFromWs(parsed.value);
 							break;
 						}
 						case 'DELETE_PATTERN': {
-							this.$refs.navbar.$refs.patternsDropdown.deletePatternFromWs(parsed.value);
+							this.deletePatternFromWs(parsed.value);
 							break;
 						}
 						case 'COUNTERS_UPDATE': {
@@ -123,11 +123,11 @@
 							break;
 						}
 						case 'ENABLE_PATTERN': {
-							this.$refs.navbar.$refs.patternsDropdown.togglePatternFromWs(parsed.value, true);
+							this.togglePatternFromWs(parsed.value, true);
 							break;
 						}
 						case 'DISABLE_PATTERN': {
-							this.$refs.navbar.$refs.patternsDropdown.togglePatternFromWs(parsed.value, false);
+							this.togglePatternFromWs(parsed.value, false);
 							break;
 						}
 						case 'PCAP_STARTED': {
@@ -167,6 +167,33 @@
 					console.warn('[WS] Error', ev);
 				};
 			},
+			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) {
+						pattern.enabled = enabled;
+					}
+				});
+			},
+			addServiceFromWs(service) {
+				const foundIndex = this.$store.state.services.findIndex(el => el.port === service.port);
+				if (foundIndex === -1) {
+          this.$store.commit('addService', service);
+					return;
+				}
+
+				let newServices = this.$store.state.services.slice();
+        newServices.splice(foundIndex, 1, service);
+        this.$store.commit('setServices', newServices);
+			},
+			deleteServiceFromWs(port) {
+        this.$store.commit('setServices', this.$store.state.services.filter(o => o.port !== port));
+      },
 		},
 		components: {
 			AddPattern,
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index ef6d0b0..a2b3c92 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -7,7 +7,7 @@
 				<li class="nav-item text-nowrap">
 					<router-link class="nav-link" to="/" exact>All</router-link>
 				</li>
-				<template v-for="service in services">
+				<template v-for="service in this.$store.state.services">
 					<router-link :key="service.name" tag="li" class="nav-item text-nowrap edit-button"
 								 :to="{name:'stream', params: {servicePort: service.port}, query: $route.query}">
 						<a class="nav-link">{{service.name}} #{{service.port}}</a>
@@ -43,8 +43,6 @@
 		name: 'Navbar',
 		data() {
 			return {
-				services: Array(),
-
 				serviceModalIsCreating: true,
 				serviceModalEditingService: {},
 			};
@@ -73,7 +71,7 @@
 			},
 			updateServices() {
 				this.$http.get('service/')
-					.then(r => this.services = r.data)
+					.then(r => this.$store.commit('setServices', r.data))
 					.catch(e => {
 						this.$bvToast.toast(`Failed to load services: ${e}`, {
 							title: 'Error',
@@ -82,17 +80,6 @@
 						console.error('Failed to load services:', e);
 					});
 			},
-			addServiceFromWs(service) {
-				const foundIndex = this.services.findIndex(el => el.port === service.port);
-				if (foundIndex === -1) {
-					this.services.push(service);
-					return;
-				}
-				this.services.splice(foundIndex, 1, service);
-			},
-			deleteServiceFromWs(port) {
-				this.services = this.services.filter(o => o.port !== port);
-			},
 		},
 		components: {
 			ServiceModal,
diff --git a/src/components/PatternsDropdown.vue b/src/components/PatternsDropdown.vue
index 912379e..bc62453 100644
--- a/src/components/PatternsDropdown.vue
+++ b/src/components/PatternsDropdown.vue
@@ -2,7 +2,7 @@
 	<b-dropdown no-flip text="Patterns" block variant="dark" class="col-sm-2 mr-0 p-0">
 		<li role="presentation" style="padding-left: 0.5em; padding-right: 0.5em;">
 			<button role="menuitem" type="button" class="btn btn-sm btn-primary btn-block"
-					@click.stop.prevent="showAddService">
+					@click.stop.prevent="showAddPattern">
 				<i class="fas fa-plus"/>
 			</button>
 		</li>
@@ -66,7 +66,7 @@
 					return `color: inherit;`;
 				}
     	},
-			showAddService() {
+			showAddPattern() {
 				this.$bvModal.show('addPatternModal');
 			},
 			showLookBack(pattern) {
@@ -124,19 +124,6 @@
 					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) {
-						pattern.enabled = enabled;
-					}
-				});
-			},
 		},
 	};
 </script>
diff --git a/src/store.js b/src/store.js
index 33673b3..a36ede7 100644
--- a/src/store.js
+++ b/src/store.js
@@ -21,6 +21,7 @@ export default new Vuex.Store({
 		serviceModalId: 0,
 
 		patterns: [],
+		services: [],
 	},
 	mutations: {
 		setHexdumpBlockSize: (s, p) => s.hexdumpBlockSize = p,
@@ -40,6 +41,9 @@ export default new Vuex.Store({
 
 		setPatterns: (s, p) => s.patterns = p,
 		addPattern: (s, p) => s.patterns.push(p),
+
+		setServices: (s, p) => s.services = p,
+		addService: (s, p) => s.services.push(p),
 	},
 	actions: {},
 	plugins: [
@@ -56,7 +60,9 @@ export default new Vuex.Store({
 					&& mName !== 'startPcap'
 					&& mName !== 'toggleHexdumpMode'
 					&& mName !== 'setPatterns'
-					&& mName !== 'addPattern';
+					&& mName !== 'addPattern'
+					&& mName !== 'setServices'
+					&& mName !== 'addService';
 				console.debug('Processing?', process);
 				return process;
 			},