Исправил бесконечную загрузку, добавил настройки размера страниц и hdump

src/components/Content.vue

@@ -44,11 +44,20 @@ export default {
 					'Content-Type': 'application/json',
 				},
 			});
+
+			const packets = this.packets;
+			let startsFrom;
+			if (packets && packets.length && packets[packets.length - 1]) {
+				startsFrom = packets[packets.length - 1].id;
+			} else {
+				startsFrom = 0;
+			}
+
 			instance.post(`/packet/${this.streamId}`, {
-				fetchLatest: true,
+				fetchLatest: false,
 				direction: 'ASC',
-				startingFrom: this.packets.length,
+				startingFrom: startsFrom,
-				pageSize: 50,
+				pageSize: parseInt(this.$store.state.pageSize),
 			}).then(response => {
 				const data = response.data;
 				if (data.length === 0) return $state.complete();

src/components/Packet.vue

@@ -13,13 +13,14 @@ export default {
 	name: 'Packet',
 	props: ['id', 'content', 'timestamp',],
 	methods: {
-		hexdump(buffer, blockSize) {
+		hexdump(buffer, blockSize, lineNumberBase) {
 			blockSize = parseInt(blockSize, 10) || 16;
+			lineNumberBase = parseInt(lineNumberBase, 10) || 10;
 			let lines = [];
 			const hex = "0123456789ABCDEF";
 			for (let b = 0; b < buffer.length; b += blockSize) {
 				let block = buffer.slice(b, Math.min(b + blockSize, buffer.length));
-				let addr = ("0000000000" + b.toString(10)).slice(-10);
+				let addr = ("0000000000" + b.toString(lineNumberBase)).slice(-10);
 				let codes = block.split('').map(ch => {
 					let code = ch.charCodeAt(0);
 					return " " + hex[(0xF0 & code) >> 4] + hex[0x0F & code];
@@ -37,7 +38,7 @@ export default {
 		hexdata() {
 			// const dataString = decodeURIComponent(escape(atob(this.$props.content)));
 			const dataString = atob(this.$props.content);
-			return this.hexdump(dataString, this.$store.state.hexdumpBlockSize);
+			return this.hexdump(dataString, this.$store.state.hexdumpBlockSize, this.$store.state.hexdumpLineNumberBase);
 		},
 	},
 }

src/components/SettingsModal.vue

@@ -7,18 +7,37 @@
 						<label for="inputApiUrl">URL бэкенда</label>
 						<input type="url" class="form-control" id="inputApiUrl" placeholder="URL" v-model="apiUrl">
 					</div>
-					<div class="form-group">
+
-						<label for="inputApiLogin">Логин</label>
+					<div class="form-row">
-						<input type="text" class="form-control" id="inputApiLogin" v-model="apiLogin">
+						<div class="form-group col-md-6">
+							<label for="inputApiLogin">Логин</label>
+							<input type="text" class="form-control" id="inputApiLogin" v-model="apiLogin">
+						</div>
+						<div class="form-group col-md-6">
+							<label for="inputApiPassword">Пароль</label>
+							<input type="password" class="form-control" id="inputApiPassword" v-model="apiPassword">
+						</div>
 					</div>
-					<div class="form-group">
+
-						<label for="inputApiPassword">Пароль</label>
+					<div class="form-row">
-						<input type="password" class="form-control" id="inputApiPassword" v-model="apiPassword">
+						<div class="form-group col-md-5">
+							<label for="inputHexdumpBlockSize">Ширина блока HEX</label>
+							<input type="number" class="form-control" id="inputHexdumpBlockSize" v-model="hexdumpBlockSize">
+						</div>
+						<div class="form-group col-md-7">
+							<label for="inputHexdumpLineNumberBase">Номер строки</label>
+							<select id="inputHexdumpLineNumberBase" class="form-control" v-model="hexdumpLineNumberBase">
+								<option selected value="10">Десятичный</option>
+								<option value="16">Шестнадцатеричный</option>
+							</select>
+						</div>
 					</div>
+
 					<div class="form-group">
-						<label for="inputHexdumpBlockSize">Ширина блока HEX</label>
+						<label for="inputPageSize">Размер страницы</label>
-						<input type="number" class="form-control" id="inputHexdumpBlockSize" v-model="hexdumpBlockSize">
+						<input type="number" class="form-control" id="inputPageSize" v-model="pageSize">
 					</div>
+
 					<button type="submit" @click.prevent="$emit('close')" class="btn btn-primary">
 						Закрыть
 					</button>
@@ -77,6 +96,22 @@ export default {
 				this.$store.commit('setHexdumpBlockSize', value);
 			},
 		},
+		hexdumpLineNumberBase: {
+			get() {
+				return this.$store.state.hexdumpLineNumberBase;
+			},
+			set(value) {
+				this.$store.commit('setHexdumpLineNumberBase', value);
+			},
+		},
+		pageSize: {
+			get() {
+				return this.$store.state.pageSize;
+			},
+			set(value) {
+				this.$store.commit('setPageSize', value);
+			},
+		},
 	},
 }
 </script>
@@ -100,7 +135,7 @@ export default {
 	}
 
 	.modal-container {
-		width: 300px;
+		width: 500px;
 		margin: 0 auto;
 		padding: 20px 30px;
 		background-color: #fff;

src/components/Sidebar.vue

@@ -48,11 +48,20 @@ export default {
 					'Content-Type': 'application/json',
 				},
 			});
+
+			const streams = this.streams;
+			let startsFrom;
+			if (streams && streams.length && streams[streams.length - 1]) {
+				startsFrom = streams[streams.length - 1].id;
+			} else {
+				startsFrom = Number.MAX_SAFE_INTEGER; // FIXME -_-
+			}
+
 			instance.post(`/stream/${this.$props.servicePort || 'all'}`, {
-				fetchLatest: true,
+				fetchLatest: false,
 				direction: 'DESC',
-				startingFrom: this.streams.length,
+				startingFrom: startsFrom,
-				pageSize: 50,
+				pageSize: parseInt(this.$store.state.pageSize),
 			}).then(response => {
 				const data = response.data;
 				if (data.length === 0) return $state.complete();

src/store.js

@@ -10,12 +10,16 @@ export default new Vuex.Store({
 		apiLogin: 'BinaryBears',
 		apiPassword: '123456',
 		hexdumpBlockSize: 16,
+		hexdumpLineNumberBase: 10,
+		pageSize: 50,
 	},
 	mutations: {
 		setApiUrl: (state, payload) => state.apiUrl = payload,
 		setApiLogin: (state, payload) => state.apiLogin = payload,
 		setApiPassword: (state, payload) => state.apiPassword = payload,
 		setHexdumpBlockSize: (state, payload) => state.hexdumpBlockSize = payload,
+		setHexdumpLineNumberBase: (state, payload) => state.hexdumpLineNumberBase = payload,
+		setPageSize: (state, payload) => state.pageSize = payload,
 	},
 	plugins: [createPersistedState(),],
 })