Рефакторинг

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': {
@@ -166,6 +166,33 @@
 				this.websocket.onerror = (ev) => {
 					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: {

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,

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>

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;
 			},