Показ количества стримов и пакетов в минуту

src/App.vue

@@ -21,6 +21,7 @@
 	</div>
 </template>
 
+<!--suppress JSUnresolvedVariable -->
 <script>
 	export const DB_OBJSTORE_COUNTERS_HISTORY = 'countersHistory';
 
@@ -106,10 +107,12 @@
 							break;
 						}
 						case 'COUNTERS_UPDATE': {
+							const data = parsed.value;
+							this.$store.commit('setCurrentPacketsCount', data.totalPackets);
+							this.$store.commit('setCurrentStreamsCount', data.totalStreams);
+
 							console.debug('Adding new counters to DB', parsed.value);
 							const tx = this.db.transaction(DB_OBJSTORE_COUNTERS_HISTORY, 'readwrite');
-							const data = parsed.value;
-							// noinspection JSUnresolvedVariable,JSCheckFunctionSignatures
 							tx.store.add({
 								newPacketsCount: data.totalPackets,
 								newStreamsCount: data.totalStreams,

src/components/Navbar.vue

@@ -1,5 +1,13 @@
 <template>
 	<nav class="navbar navbar-dark navbar-expand fixed-top bg-dark flex-md-nowrap p-0 shadow">
+		<span class="navbar-brand mb-0 ml-2">Packmate</span>
+		<span class="navbar-text">
+      {{ this.$store.state.currentStreamsCount }}
+			<u title="Streams per minute">SPM</u>
+			, {{ packetsPerStream }}
+			<u title="Packets per stream (average)">PPS</u>
+    </span>
+
 		<PatternsDropdown ref="patternsDropdown"/>
 
 		<div class="navbar-collapse collapse">
@@ -41,6 +49,19 @@
 
 	export default {
 		name: 'Navbar',
+		computed: {
+			packetsPerStream() {
+				let streams = this.$store.state.currentStreamsCount;
+				let packets = this.$store.state.currentPacketsCount;
+
+				if (streams === 0) {
+					return 0;
+				} else {
+					let pps = packets / streams;
+					return Math.round((pps + Number.EPSILON) * 10) / 10;
+				}
+			},
+		},
 		data() {
 			return {
 				serviceModalIsCreating: true,
@@ -110,6 +131,11 @@
 		overflow-x: auto;
 	}
 
+	u {
+		text-underline-position: under;
+		text-decoration-style: dotted;
+	}
+
 	::-webkit-scrollbar {
 		height: 0.2em
 	}

src/components/PatternsDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-	<b-dropdown no-flip text="Patterns" block variant="dark" class="col-sm-2 mr-0 p-0">
+	<b-dropdown no-flip text="Patterns" block variant="dark" class="col-sm-1 mr-0 p-0">
 		<li role="presentation" style="padding-left: 0.5em; padding-right: 0.5em;">
 			<button role="menuitem" type="button" class="btn btn-sm btn-primary btn-block"
 					@click.stop.prevent="showAddPattern">

src/store.js

@@ -22,6 +22,9 @@ export default new Vuex.Store({
 
 		patterns: [],
 		services: [],
+
+		currentPacketsCount: 0,
+		currentStreamsCount: 0,
 	},
 	mutations: {
 		setHexdumpBlockSize: (s, p) => s.hexdumpBlockSize = p,
@@ -44,6 +47,9 @@ export default new Vuex.Store({
 
 		setServices: (s, p) => s.services = p,
 		addService: (s, p) => s.services.push(p),
+
+		setCurrentPacketsCount: (s, p) => s.currentPacketsCount = p,
+		setCurrentStreamsCount: (s, p) => s.currentStreamsCount = p,
 	},
 	actions: {},
 	plugins: [
@@ -62,7 +68,9 @@ export default new Vuex.Store({
 					&& mName !== 'setPatterns'
 					&& mName !== 'addPattern'
 					&& mName !== 'setServices'
-					&& mName !== 'addService';
+					&& mName !== 'addService'
+					&& mName !== 'setCurrentPacketsCount'
+					&& mName !== 'setCurrentStreamsCount';
 				console.debug('Processing?', process);
 				return process;
 			},