From 079e8e95b69dee67c2fd5c29a164eebd833313b0 Mon Sep 17 00:00:00 2001
From: Sergey Shkurov <sergey.shkurov@traderepublic.com>
Date: Tue, 25 Jul 2023 02:24:58 +0400
Subject: [PATCH] Show timing between packets

---
 src/App.vue                 |  4 ----
 src/components/Packet.vue   | 13 ++++++++-----
 src/main.js                 |  1 +
 src/views/ContentStream.vue | 20 +++++++++++++++++---
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 926714e..5befa74 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -307,7 +307,3 @@
 		padding-top: 55px; /* Space for fixed navbar */
 	}
 </style>
-
-<style lang="scss">
-	@import "~bootstrap-darkmode/scss/darktheme";
-</style>
diff --git a/src/components/Packet.vue b/src/components/Packet.vue
index 0d51f71..ce5b4a0 100644
--- a/src/components/Packet.vue
+++ b/src/components/Packet.vue
@@ -1,16 +1,18 @@
 <template>
 	<div :class="{'packet-incoming': packet.incoming, 'packet-outgoing': !packet.incoming}">
-		<div>#{{ packet.id }} at {{ dateToText(packet.timestamp) }}, {{ printPacketFlags(packet) }}
+		<div>#{{ packet.id }} at {{ dateToText(packet.timestamp) }}
+			<template v-if="offset !== null"> (+{{ offset }} ms)</template>
+			{{ printPacketFlags(packet) }}
 			<button @click.prevent="copyRaw" class="btn btn-link">Copy HEX</button>
 			<button @click.prevent="copyText" class="btn btn-link">Copy text</button>
 			<button @click.prevent="copyPythonBytes" class="btn btn-link">Copy as Python bytes</button>
 		</div>
 		<p v-if="!this.$store.state.hexdumpMode"
-		   class="pt-2 pb-2 mb-3"
-		   v-html="stringdata"/>
+			 class="pt-2 pb-2 mb-3"
+			 v-html="stringdata"/>
 		<p v-else
-		   class="pt-2 pb-2 mb-3"
-		   v-html="hexdata"/>
+			 class="pt-2 pb-2 mb-3"
+			 v-html="hexdata"/>
 	</div>
 </template>
 
@@ -29,6 +31,7 @@
 				tlsDecrypted: Boolean(),
 				content: String(),
 			},
+			offset: Number(),
 		},
 		computed: {
 			hexdata() {
diff --git a/src/main.js b/src/main.js
index 1895376..94ff28b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,7 @@ import store from './store';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import '@fortawesome/fontawesome-free/css/all.css';
+import "bootstrap-darkmode/scss/darktheme.scss";
 
 Vue.config.productionTip = false;
 Vue.use(BootstrapVue);
diff --git a/src/views/ContentStream.vue b/src/views/ContentStream.vue
index b8f5e22..af8ee70 100644
--- a/src/views/ContentStream.vue
+++ b/src/views/ContentStream.vue
@@ -5,9 +5,10 @@
 			<span style="background: var(--response-packet-color); box-shadow: 0 0 3px 3px var(--response-packet-color);">response</span>.
 			<ThemeButton class="d-inline float-right" style="margin-top: -0.25rem" />
 		</p>
-		<Packet v-for="packet in packets"
-				:key="packet.id"
-				:packet="packet"/>
+		<Packet v-for="packetWithOffset in packetsWithOffsets"
+				:key="packetWithOffset.packet.id"
+				:packet="packetWithOffset.packet"
+				:offset="packetWithOffset.offset" />
 		<infinite-loading @infinite="infiniteLoadingHandler" ref="infiniteLoader">
 			<span slot="no-results"></span>
 		</infinite-loading>
@@ -26,6 +27,19 @@
 				packets: [],
 			};
 		},
+		computed: {
+			packetsWithOffsets: function() {
+				return this.packets.map((el, i) => {
+					let offset = null;
+
+					if (i !== 0) {
+						offset = el.timestamp - this.packets[i - 1].timestamp;
+					}
+
+					return {packet: el, offset: offset,}
+				})
+			},
+		},
 		watch: {
 			'$route.params.streamId': function () {
 				this.packets = [];