Реализовал сохранение статистики в IndexedDB

package-lock.json

@@ -6604,6 +6604,11 @@
         "postcss": "^7.0.14"
       }
     },
+    "idb": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-5.0.2.tgz",
+      "integrity": "sha512-53yU1RbSPkSkQxufmNgcBkxxnbsTMGaYCv2NwQDmBP75muYj4Z75DsvCqhCCivYcC1XaXDi9tZSUOfDQFxuABA=="
+    },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",

package.json

@@ -12,6 +12,7 @@
     "bootstrap": "^4.4.1",
     "bootstrap-vue": "^2.10.1",
     "core-js": "^3.6.4",
+    "idb": "^5.0.2",
     "sockjs-client": "^1.4.0",
     "vue": "^2.6.11",
     "vue-infinite-loading": "^2.4.5",

src/App.vue

@@ -21,21 +21,41 @@
 </template>
 
 <script>
+	export const DB_OBJSTORE_COUNTERS_HISTORY = 'countersHistory';
+
 	import Navbar from './components/Navbar';
 	import Settings from './views/Settings';
 	import AddService from './views/AddService';
 	import EditService from './views/EditService';
 	import AddPattern from './views/AddPattern';
 	import SockJS from 'sockjs-client';
+	import {openDB,} from 'idb';
 
 	export default {
 		data() {
 			return {
 				websocket: null,
+				db: null,
 			};
 		},
 		mounted() {
 			this.connectWs();
+			openDB('packmate', 1, {
+				upgrade(db, oldVersion, newVersion) {
+					console.info('[IDB] Creating new database! Old rev %d, new rev %d',
+						oldVersion, newVersion);
+					db.createObjectStore(DB_OBJSTORE_COUNTERS_HISTORY, {
+						autoIncrement: false,
+						keyPath: null,
+					});
+				},
+			})
+				.then(db => {
+					this.db = db;
+				})
+				.catch(e => {
+					console.error('[IDB] Failed to open DB!', e);
+				});
 		},
 		beforeDestroy() {
 			this.websocket?.close();
@@ -85,7 +105,21 @@
 							break;
 						}
 						case 'COUNTERS_UPDATE': {
-							break;  //TODO implement
+							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,
+								servicesPackets: data.servicesPackets,
+								servicesStreams: data.servicesStreams,
+							}, Date.now()).then(() => {
+								console.debug('[IDB] Added entry');
+							}).catch(e => {
+								console.error('[IDB] Failed to add entry!', e);
+							});
+							break;
 						}
 						default: {
 							console.error('[WS] Event is not implemented!', parsed);

src/components/PatternsDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-	<b-dropdown no-flip text="Patterns" block variant="dark" class="col-sm-3 mr-0">
+	<b-dropdown no-flip text="Patterns" block variant="dark" class="col-sm-2 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="showAddService">