Добавил подсветку пакета, добавил время конца стрима

src/components/Content.vue

@@ -1,10 +1,14 @@
 <template>
 	<main class="col-md-9 ml-sm-auto col-lg-10 px-4">
+		<p>
+			<span style="background: #e1f5fe; box-shadow: 0 0 5px 5px #e1f5fe;">Outgoing</span>, <span style="background: #fbe9e7; box-shadow: 0 0 5px 5px #fbe9e7;">incoming</span>.
+		</p>
 			<Packet v-for="packet in packets"
 					:key="packet.id"
 					:id="packet.id"
 					:content="packet.content"
-					:timestamp="packet.timestamp"></Packet>
+					:timestamp="packet.timestamp"
+					:isIncoming="packet.incoming"></Packet>
 		<infinite-loading @infinite="infiniteHandler" spinner="waveDots" ref="infiniteLoading"></infinite-loading>
 	</main>
 </template>

src/components/Packet.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="packet" :class="{'packet-incoming': isIncoming}">
 		<div>#{{id}} at {{new Date(timestamp * 1000).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}</div>
 		<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
 			<pre>{{ hexdata }}</pre>
@@ -11,7 +11,7 @@
 
 export default {
 	name: 'Packet',
-	props: ['id', 'content', 'timestamp',],
+	props: ['id', 'content', 'timestamp', 'isIncoming',],
 	methods: {
 		hexdump(buffer, blockSize, lineNumberBase) {
 			blockSize = parseInt(blockSize, 10) || 16;
@@ -49,4 +49,12 @@ export default {
 		font-size: 100%;
 		color: black;
 	}
+	.packet {
+		background: #e1f5fe;
+		box-shadow: 0 0 5px 5px #e1f5fe;
+	}
+	.packet-incoming {
+		background: #fbe9e7;
+		box-shadow: 0 0 5px 5px #fbe9e7;
+	}
 </style>

src/components/Sidebar.vue

@@ -9,7 +9,8 @@
 						:proto="stream.protocol"
 						:servicePort="stream.service.port"
 						:foundPatterns="stream.foundPatterns"
-						:time="stream.startTimestamp"></Stream>
+						:startTime="stream.startTimestamp"
+						:endTime="stream.endTimestamp"></Stream>
 				<infinite-loading @infinite="infiniteHandler" spinner="waveDots" ref="infiniteLoading"></infinite-loading>
 			</ul>
 		</div>

src/components/Stream.vue

@@ -2,9 +2,10 @@
 	<li class="nav-item">
 		<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id} }">
 			#{{id}} {{proto}}<br/>
-			{{new Date(time * 1000).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}
+			{{new Date(startTime * 1000).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}
+			- {{new Date(endTime * 1000).toLocaleTimeString('ru-RU', {hour:'2-digit', minute: '2-digit', second: '2-digit'})}}
 			<span v-for="pattern in foundPatterns"
-				:key="pattern.id"
+					:key="pattern.id"
 					:style="'color:' + pattern.color"
 				>
 				{{pattern.name}}
@@ -16,7 +17,7 @@
 <script>
 export default {
 	name: "Stream",
-	props: ['id', 'proto', 'time', 'servicePort', 'foundPatterns',],
+	props: ['id', 'proto', 'startTime', 'endTime', 'servicePort', 'foundPatterns',],
 }
 </script>