Стримы

src/components/Navbar.vue

@@ -15,7 +15,7 @@
 							   :name="service.name"
 							   :port="service.port"/>
 				<li class="nav-item text-nowrap" style="padding-left: 1em;">
-					<div class="my-2 my-lg-0 mr-3 navbar-cogs" style="cursor: pointer;"
+					<div class="my-2 mr-3 navbar-cogs" style="cursor: pointer;"
 						 @click.stop.prevent="showAddService">
 						<i class="fas fa-plus-circle"/>
 					</div>

src/components/Sidebar.vue

@@ -1,8 +1,10 @@
 <template>
 	<nav class="col-sm-3 d-none d-sm-block bg-light sidebar">
 		<div class="m-2">
-			<button type="button" class="btn btn-sm btn-outline-success">
+			<button type="button" class="btn btn-sm"
-				<i class="fas fa-pause"/> <!-- TODO! -->
+					:class="this.$store.state.pause ? 'btn-danger' : 'btn-outline-success'"
+					@click.stop.prevent="togglePause">
+				<i class="fas fa-pause"/>
 			</button>
 			<button type="button" class="btn btn-sm ml-1"
 					:class="this.$store.state.displayFavoritesOnly ? 'btn-danger' : 'btn-outline-danger'"
@@ -15,18 +17,6 @@
 		</div>
 		<div class="sidebar-sticky">
 			<ul class="nav flex-column">
-				<!--				<li class="nav-item">-->
-				<!--					<a class="nav-link" href="#">SOME ITEM</a>-->
-				<!--				</li>-->
-				<!--				<li class="nav-item">-->
-				<!--					<a class="nav-link" href="#">SOME ITEM</a>-->
-				<!--				</li>-->
-				<!--				<li class="nav-item">-->
-				<!--					<a class="nav-link" href="#">SOME ITEM</a>-->
-				<!--				</li>-->
-				<!--				<li class="nav-item">-->
-				<!--					<a class="nav-link" href="#">SOME ITEM</a>-->
-				<!--				</li>-->
 				<SidebarStream v-for="stream in streams"
 							   :key="stream.id"
 							   :stream="stream"/>
@@ -47,6 +37,13 @@
 				streams: [],
 			};
 		},
+		watch: {
+			'$route.params.servicePort': function () {
+				console.debug('Port reselected');
+				this.streams = [];
+				this.$refs.infiniteLoader.stateChanger.reset();
+			},
+		},
 		methods: {
 			infiniteLoadingHandler($state) {
 				const ourStreams = this.streams;
@@ -57,7 +54,7 @@
 					startsFrom = Number.MAX_SAFE_INTEGER; // FIXME: rewrite backend?
 				}
 
-				this.$http.post(`/stream/${this.$props.servicePort || 'all'}`, {
+				this.$http.post(`/stream/${this.$route?.params?.servicePort || 'all'}`, {
 					direction: 'DESC',
 					startingFrom: startsFrom,
 					pageSize: this.$store.state.pageSize,
@@ -84,6 +81,9 @@
 			toggleFavorites() {
 				this.$store.commit('toggleDisplayFavoritesOnly');
 			},
+			togglePause() {
+				this.$store.commit('togglePause');
+			},
 		},
 		components: {
 			SidebarStream,

src/components/SidebarStream.vue

@@ -1,12 +1,69 @@
 <template>
-	<li class="nav-item">
+	<li class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;">
-		<a class="nav-link" href="#">Huh?!</a>
+		<router-link class="nav-link"
+					 :to="{name: 'stream', params: {servicePort: stream.service, streamId: stream.id}}">
+			<a @click.stop.prevent="toggleFavorite">
+				<i class="fa-star" style="color: #DC3545" :class="favorite0 ? 'fas' : 'far'"/>
+			</a>
+			{{ stream.id }} {{ stream.protocol }}
+			<template v-if="stream.ttl">TTL {{ stream.ttl }}</template>
+			<br/>
+			{{ dateToText(stream.startTimestamp) }} - {{ dateToText(stream.endTimestamp) }}
+			<template v-if="stream.userAgentHash"><br/>UA: {{ stream.userAgentHash }}</template>
+
+			<span v-for="pattern in stream.foundPatterns"
+				  :key="pattern.id"
+				  :style="`color: ${pattern.color};`">
+				{{ pattern.name }}
+			</span>
+		</router-link>
 	</li>
 </template>
 
 <script>
 	export default {
 		name: 'SidebarStream',
+		props: {
+			stream: {
+				id: Number(),
+				protocol: String(),
+				service: Number(),
+				startTimestamp: Number(),
+				endTimestamp: Number(),
+				foundPatterns: Array(),
+				favorite: Boolean(),
+				ttl: Number(),
+				userAgentHash: String(),
+			},
+		},
+		data: function () {
+			return {
+				favorite0: this.stream.favorite,
+			};
+		},
+		methods: {
+			dateToText(unixTimestamp) {
+				return new Date(unixTimestamp).toLocaleDateString('ru-RU', {
+					month: '2-digit',
+					day: '2-digit',
+					hour: '2-digit',
+					minute: '2-digit',
+					second: '2-digit',
+				});
+			},
+
+			toggleFavorite() {
+				this.$http.post(`stream/${this.stream.id}/${this.favorite0 ? 'unfavorite' : 'favorite'}`)
+					.then(() => this.favorite0 = !this.favorite0)
+					.catch(e => {
+						this.$bvToast.toast(`Не удалось пометить сервис: ${e}`, {
+							title: 'Сбой',
+							variant: 'danger',
+						});
+						console.error('Failed to fav service', e);
+					});
+			},
+		},
 	};
 </script>
 
@@ -20,4 +77,11 @@
 	.nav-link.active {
 		color: #007BFF;
 	}
+
+	/*noinspection CssUnusedSymbol*/
+	.highlight {
+		/*background: rgb(220, 53, 69)*/
+		background: rgba(220, 53, 69, 0.3);
+		box-shadow: 0 0 1px 1px rgba(255, 119, 182, 0.3);
+	}
 </style>

src/store.js

@@ -14,6 +14,7 @@ export default new Vuex.Store({
 		hexdumpLineNumberBase: 10,
 		pageSize: 25,
 		displayFavoritesOnly: false,
+		pause: false,
 
 		serviceModalName: '',
 		serviceModalId: 0,
@@ -26,6 +27,8 @@ export default new Vuex.Store({
 		setPageSize: (s, p) => s.pageSize = p,
 		// eslint-disable-next-line no-unused-vars
 		toggleDisplayFavoritesOnly: (s, p) => s.displayFavoritesOnly = !s.displayFavoritesOnly,
+		// eslint-disable-next-line no-unused-vars
+		togglePause: (s, p) => s.pause = !s.pause,
 
 		setServiceModalName: (s, p) => s.serviceModalName = p,
 		setServiceModalId: (s, p) => s.serviceModalId = p,
@@ -40,7 +43,8 @@ export default new Vuex.Store({
 				const mName = mutation?.type;
 				const process = mName !== 'toggleDisplayFavoritesOnly'
 					&& mName !== 'setServiceModalName'
-					&& mName !== 'setServiceModalId';
+					&& mName !== 'setServiceModalId'
+					&& mName !== 'togglePause';
 				console.debug('Processing?', process);
 				return process;
 			},

src/views/ContentStream.vue

@@ -1,6 +1,10 @@
 <template>
 	<div>
-		Some stream #{{ streamId }} at port #{{ servicePort }}
+		<p>
+			Some stream #{{ $route.params.streamId }} at port #{{ $route.params.servicePort }} <br/>
+			<span style="background: rgba(224, 246, 255, 0.4); box-shadow: 0 0 5px 5px rgba(224, 246, 255, 0.4);">Ответ</span>,
+			<span style="background: rgba(251, 233, 231, 0.4); box-shadow: 0 0 5px 5px rgba(251, 233, 231, 0.4);">запрос</span>.
+		</p>
 	</div>
 </template>