Реализовал фильтрацию по паттернам

src/components/Content.vue

@@ -58,7 +58,6 @@ export default {
 			}
 
 			instance.post(`/packet/${this.streamId}`, {
-				fetchLatest: false,
 				direction: 'ASC',
 				startingFrom: startsFrom,
 				pageSize: parseInt(this.$store.state.pageSize),

src/components/FlagPattern.vue

@@ -1,5 +1,6 @@
 <template>
-	<div class="dropdown-item" :style="'color:' + color">
+	<div class="dropdown-item" :style="'color:' + color"
+			@click="openPattern">
 		{{name}}: {{regex ? `/${value}/` : `'${value}'`}}
 		<div class="float-right">
 			<button @click.prevent.stop="deleteSelf()" class="btn btn-outline-danger btn-block btn-sm" type="button">x</button>
@@ -9,11 +10,17 @@
 
 <script>
 import axios from "axios";
+import $ from "jquery";
 
 export default {
 	name: "FlagPattern",
 	props: ['name', 'value', 'color', 'id', 'regex',],
 	methods: {
+		openPattern() {
+			this.$router.push({name: 'home', params: this.$route.params, query: {pId: this.id,},});
+			// $('.dropdown').trigger('hide.bs.dropdown')
+			$('.dropdown-toggle').dropdown('toggle')
+		},
 		deleteSelf() {
 			const instance = axios.create({
 				baseURL: this.$store.state.apiUrl,

src/components/Sidebar.vue

@@ -35,24 +35,36 @@ export default {
 					const newStream = this.$data.streams[index - 1];
 					if (!newStream) return;
 					const newId = newStream.id;
-					this.$router.push({name: 'home', params: {servicePort: this.$props.servicePort, streamId: newId}});
+					this.$router.push({
+						name: 'home',
+						params: {servicePort: this.$props.servicePort, streamId: newId,},
+					});
 				} else if (e.key === 'ArrowDown') {
 					e.preventDefault();
 					const index = this.$data.streams.findIndex(e => e.id === this.$props.streamId);
 					const newStream = this.$data.streams[index + 1];
 					if (!newStream) return;
 					const newId = newStream.id;
-					this.$router.push({name: 'home', params: {servicePort: this.$props.servicePort, streamId: newId}});
+					this.$router.push({
+						name: 'home',
+						params: {servicePort: this.$props.servicePort, streamId: newId,},
+					});
 				} else if (e.key === 'Home') {
 					const newStream = this.$data.streams[0];
 					if (!newStream) return;
 					const newId = newStream.id;
-					this.$router.push({name: 'home', params: {servicePort: this.$props.servicePort, streamId: newId}});
+					this.$router.push({
+						name: 'home',
+						params: {servicePort: this.$props.servicePort, streamId: newId,},
+					});
 				} else if (e.key === 'End') {
 					const newStream = this.$data.streams[this.$data.streams.length - 1];
 					if (!newStream) return;
 					const newId = newStream.id;
-					this.$router.push({name: 'home', params: {servicePort: this.$props.servicePort, streamId: newId}});
+					this.$router.push({
+						name: 'home',
+						params: {servicePort: this.$props.servicePort, streamId: newId,},
+					});
 				}
 			},
 		}
@@ -63,6 +75,11 @@ export default {
 			this.streams = [];
 			this.$refs.infiniteLoading.stateChanger.reset();
 		},
+		'$route.query': function (query) {
+			console.debug('Sidebar.vue: query changed! new:', query);
+			this.streams = [];
+			this.$refs.infiniteLoading.stateChanger.reset();
+		},
 	},
 	methods: {
 		infiniteHandler($state) {
@@ -88,10 +105,10 @@ export default {
 			}
 
 			instance.post(`/stream/${this.$props.servicePort || 'all'}`, {
-				fetchLatest: false,
 				direction: 'DESC',
 				startingFrom: startsFrom,
 				pageSize: parseInt(this.$store.state.pageSize),
+				pattern: this.$route.query.pId ? {id: this.$route.query.pId,} : null,
 			}).then(response => {
 				const data = response.data;
 				if (data.length === 0) return $state.complete();

src/components/Stream.vue

@@ -1,6 +1,6 @@
 <template>
 	<li class="nav-item">
-		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id} }">
+		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
 			#{{id}} {{proto}}<br/>
 			{{new Date(startTime).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}
 			- {{new Date(endTime).toLocaleTimeString('ru-RU', {hour:'2-digit', minute: '2-digit', second: '2-digit'})}}