Show stream size in bytes and packets

This commit is contained in:
Sergey Shkurov 2023-04-30 06:15:02 +02:00
parent 23503a5ac7
commit 2a60cd29cc
5 changed files with 83 additions and 50 deletions

114
package-lock.json generated
View File

@ -8,7 +8,7 @@
"name": "packmate-frontend", "name": "packmate-frontend",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"axios": "^0.27.2", "axios": "^1.4.0",
"bootstrap": "^4.6.2", "bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1", "bootstrap-vue": "^2.23.1",
"core-js": "^3.26.1", "core-js": "^3.26.1",
@ -3699,12 +3699,13 @@
"dev": true "dev": true
}, },
"node_modules/axios": { "node_modules/axios": {
"version": "0.27.2", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
"dependencies": { "dependencies": {
"follow-redirects": "^1.14.9", "follow-redirects": "^1.15.0",
"form-data": "^4.0.0" "form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
} }
}, },
"node_modules/axios/node_modules/form-data": { "node_modules/axios/node_modules/form-data": {
@ -4065,6 +4066,14 @@
"vue-functional-data-merge": "^3.1.0" "vue-functional-data-merge": "^3.1.0"
} }
}, },
"node_modules/bootstrap-vue/node_modules/portal-vue": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
"peerDependencies": {
"vue": "^2.5.18"
}
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -5642,9 +5651,9 @@
} }
}, },
"node_modules/csstype": { "node_modules/csstype": {
"version": "3.1.1", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
}, },
"node_modules/cyclist": { "node_modules/cyclist": {
"version": "1.0.1", "version": "1.0.1",
@ -10321,9 +10330,15 @@
"optional": true "optional": true
}, },
"node_modules/nanoid": { "node_modules/nanoid": {
"version": "3.3.4", "version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"bin": { "bin": {
"nanoid": "bin/nanoid.cjs" "nanoid": "bin/nanoid.cjs"
}, },
@ -11230,14 +11245,6 @@
"url": "https://opencollective.com/popperjs" "url": "https://opencollective.com/popperjs"
} }
}, },
"node_modules/portal-vue": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
"peerDependencies": {
"vue": "^2.5.18"
}
},
"node_modules/portfinder": { "node_modules/portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -12015,6 +12022,11 @@
"node": ">= 0.10" "node": ">= 0.10"
} }
}, },
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/prr": { "node_modules/prr": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@ -14838,9 +14850,9 @@
} }
}, },
"node_modules/vue/node_modules/postcss": { "node_modules/vue/node_modules/postcss": {
"version": "8.4.19", "version": "8.4.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
"integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -14849,10 +14861,14 @@
{ {
"type": "tidelift", "type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss" "url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
} }
], ],
"dependencies": { "dependencies": {
"nanoid": "^3.3.4", "nanoid": "^3.3.6",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"source-map-js": "^1.0.2" "source-map-js": "^1.0.2"
}, },
@ -18746,12 +18762,13 @@
"dev": true "dev": true
}, },
"axios": { "axios": {
"version": "0.27.2", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
"requires": { "requires": {
"follow-redirects": "^1.14.9", "follow-redirects": "^1.15.0",
"form-data": "^4.0.0" "form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}, },
"dependencies": { "dependencies": {
"form-data": { "form-data": {
@ -19047,6 +19064,14 @@
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"portal-vue": "^2.1.7", "portal-vue": "^2.1.7",
"vue-functional-data-merge": "^3.1.0" "vue-functional-data-merge": "^3.1.0"
},
"dependencies": {
"portal-vue": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
"requires": {}
}
} }
}, },
"brace-expansion": { "brace-expansion": {
@ -20334,9 +20359,9 @@
} }
}, },
"csstype": { "csstype": {
"version": "3.1.1", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
}, },
"cyclist": { "cyclist": {
"version": "1.0.1", "version": "1.0.1",
@ -24083,9 +24108,9 @@
"optional": true "optional": true
}, },
"nanoid": { "nanoid": {
"version": "3.3.4", "version": "3.3.6",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
}, },
"nanomatch": { "nanomatch": {
"version": "1.2.13", "version": "1.2.13",
@ -24798,12 +24823,6 @@
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
}, },
"portal-vue": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
"requires": {}
},
"portfinder": { "portfinder": {
"version": "1.0.28", "version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@ -25480,6 +25499,11 @@
"ipaddr.js": "1.9.1" "ipaddr.js": "1.9.1"
} }
}, },
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"prr": { "prr": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@ -27622,11 +27646,11 @@
} }
}, },
"postcss": { "postcss": {
"version": "8.4.19", "version": "8.4.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
"integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==", "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
"requires": { "requires": {
"nanoid": "^3.3.4", "nanoid": "^3.3.6",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"source-map-js": "^1.0.2" "source-map-js": "^1.0.2"
} }

View File

@ -8,7 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^0.27.2", "axios": "^1.4.0",
"bootstrap": "^4.6.2", "bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1", "bootstrap-vue": "^2.23.1",
"core-js": "^3.26.1", "core-js": "^3.26.1",

View File

@ -1,7 +1,7 @@
<template> <template>
<li :id="`stream-${stream.id}`" class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;"> <li :id="`stream-${stream.id}`" class="nav-item stream-item" :class="{highlight: favorite0}">
<router-link class="nav-link" <router-link class="nav-link"
:to="{name: 'stream', params: {servicePort: stream.service, streamId: stream.id}, query: this.$route.query}"> :to="{name: 'stream', params: {servicePort: this.stream.service, streamId: this.stream.id}, query: this.$route.query}">
<a @click.stop.prevent="toggleFavorite"> <a @click.stop.prevent="toggleFavorite">
<i class="fa-star" style="color: #DC3545" :class="favorite0 ? 'fas' : 'far'"/> <i class="fa-star" style="color: #DC3545" :class="favorite0 ? 'fas' : 'far'"/>
</a> </a>
@ -15,6 +15,8 @@
</template> </template>
<template v-if="stream.userAgentHash"><br/>UA: {{ stream.userAgentHash }}</template> <template v-if="stream.userAgentHash"><br/>UA: {{ stream.userAgentHash }}</template>
<br/> <br/>
{{ stream.sizeBytes }} bytes in {{ stream.packetsCount }} packets
<br/>
<span v-for="pattern in notDeletedFoundPatterns" <span v-for="pattern in notDeletedFoundPatterns"
:key="pattern.id" :key="pattern.id"
:style="`color: ${pattern.color};`"> :style="`color: ${pattern.color};`">
@ -38,6 +40,8 @@
favorite: Boolean(), favorite: Boolean(),
ttl: Number(), ttl: Number(),
userAgentHash: String(), userAgentHash: String(),
sizeBytes: Number(),
packetsCount: Number(),
}, },
}, },
computed: { computed: {
@ -133,4 +137,10 @@
background: rgba(220, 53, 69, 0.3); background: rgba(220, 53, 69, 0.3);
box-shadow: 0 0 1px 1px rgba(255, 119, 182, 0.3); box-shadow: 0 0 1px 1px rgba(255, 119, 182, 0.3);
} }
.stream-item {
transition: all .5s;
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
</style> </style>

View File

@ -1,6 +1,6 @@
<template> <template>
<b-modal @ok="addPattern" @cancel="reset" id="patternModal" <b-modal @ok="addPattern" @cancel="reset" id="patternModal"
title="Creating pattern" :title="creating ? 'Creating pattern' : 'Editing pattern'"
cancel-title="Cancel" cancel-title="Cancel"
centered scrollable> centered scrollable>
<form ref="addPatternForm"> <form ref="addPatternForm">

View File

@ -1,4 +1,3 @@
<!--suppress JSUnresolvedVariable -->
<template> <template>
<b-modal id="settingsModal" title="Settings" centered scrollable ok-only> <b-modal id="settingsModal" title="Settings" centered scrollable ok-only>
<b-form-group <b-form-group