Replace pretty-bytes vue filter with standalone package

Filters are removed in Vue3, so prepare by reducing filter usage.
spq · Dec 24, 2024 · 46e832d · 46e832d
1 parent 2e7448c
commit 46e832d
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 49 deletions.
diff --git a/web/package.json b/web/package.json
@@ -18,10 +18,10 @@
     "moo": "^0.5.2",
     "nearley": "^2.20.1",
     "pinia": "^2.3.0",
+    "pretty-bytes": "^6.1.1",
     "tiny-typed-emitter": "^2.1.0",
     "vue": "^2.7.14",
     "vue-apexcharts": "git+https://github.com/apexcharts/vue-apexcharts#c4b6de32b0659a46d610e4f457afb8ede0493fef",
-    "vue-filter-pretty-bytes": "^0.1.6",
     "vue-moment": "^4.1.0",
     "vue-router": "^3.6.5",
     "vuetify": "^2.6.14"

diff --git a/web/src/components/Pcaps.vue b/web/src/components/Pcaps.vue
@@ -34,7 +34,7 @@
       >
       <template #[`item.Filesize`]="{ value }"
         ><span :title="`${value} Bytes`">{{
-          $options.filters?.prettyBytes(value, 1, true)
+          prettyBytes(value, { maximumFractionDigits: 1, binary: true })
         }}</span></template
       >
     </v-data-table>
@@ -46,6 +46,7 @@ import { onMounted } from "vue";
 import { useRootStore } from "@/stores";
 import { EventBus } from "./EventBus";
 import { formatDate, formatDateLong } from "@/filters";
+import prettyBytes from "pretty-bytes";
 
 const store = useRootStore();
 const headers = [

diff --git a/web/src/components/Results.vue b/web/src/components/Results.vue
@@ -262,23 +262,21 @@
               </td>
               <td>
                 <span :title="`${stream.Stream.Client.Bytes} Bytes`">{{
-                  $options.filters?.prettyBytes(
-                    stream.Stream.Client.Bytes,
-                    1,
-                    true,
-                  )
+                  prettyBytes(stream.Stream.Client.Bytes, {
+                    maximumFractionDigits: 1,
+                    binary: true,
+                  })
                 }}</span>
               </td>
               <td>
                 {{ stream.Stream.Server.Host }}:{{ stream.Stream.Server.Port }}
               </td>
               <td>
                 <span :title="`${stream.Stream.Server.Bytes} Bytes`">{{
-                  $options.filters?.prettyBytes(
-                    stream.Stream.Server.Bytes,
-                    1,
-                    true,
-                  )
+                  prettyBytes(stream.Stream.Server.Bytes, {
+                    maximumFractionDigits: 1,
+                    binary: true,
+                  })
                 }}</span>
               </td>
               <td
@@ -315,6 +313,7 @@ import { useRoute, useRouter } from "vue-router/composables";
 import { Result } from "@/apiClient";
 import { capitalize, formatDate, formatDateLong, tagify } from "@/filters";
 import { getContrastTextColor } from "@/lib/colors";
+import prettyBytes from "pretty-bytes";
 
 const store = useRootStore();
 const route = useRoute();

diff --git a/web/src/components/Stream.vue b/web/src/components/Stream.vue
@@ -250,11 +250,10 @@
               stream.stream.Stream.Client.Port
             }}
             ({{
-              $options.filters?.prettyBytes(
-                stream.stream.Stream.Client.Bytes,
-                1,
-                true,
-              )
+              prettyBytes(stream.stream.Stream.Client.Bytes, {
+                maximumFractionDigits: 1,
+                binary: true,
+              })
             }})</v-col
           >
           <v-col cols="1" class="text-subtitle-2">First Packet:</v-col>
@@ -291,11 +290,10 @@
               stream.stream.Stream.Server.Port
             }}
             ({{
-              $options.filters?.prettyBytes(
-                stream.stream.Stream.Server.Bytes,
-                1,
-                true,
-              )
+              prettyBytes(stream.stream.Stream.Server.Bytes, {
+                maximumFractionDigits: 1,
+                binary: true,
+              })
             }})</v-col
           >
           <v-col cols="1" class="text-subtitle-2">Last Packet:</v-col>
@@ -379,6 +377,7 @@ import {
 } from "./streamSelector";
 import { formatDate, formatDateLong, tagify } from "@/filters";
 import { getContrastTextColor } from "@/lib/colors";
+import prettyBytes from "pretty-bytes";
 
 const CYBERCHEF_URL = "https://gchq.github.io/CyberChef/";
 

diff --git a/web/src/main.ts b/web/src/main.ts
@@ -5,7 +5,6 @@ import { createPinia, PiniaVuePlugin } from "pinia";
 import App from "./App.vue";
 import router from "./routes";
 import VueApexCharts from "vue-apexcharts";
-import VueFilterPrettyBytes from "vue-filter-pretty-bytes";
 import * as VueMoment from "vue-moment";
 
 Vue.config.productionTip = process.env.NODE_ENV == "production";
@@ -14,7 +13,6 @@ Vue.use(PiniaVuePlugin);
 Vue.use(Vuetify);
 Vue.use(VueApexCharts);
 Vue.use(VueMoment);
-Vue.use(VueFilterPrettyBytes);
 
 Vue.component("Apexchart", VueApexCharts);
 

diff --git a/web/src/shims-vue.d.ts b/web/src/shims-vue.d.ts
@@ -18,23 +18,3 @@ declare module "shims-vue" {
     }
   }
 }
-
-declare module "vue-filter-pretty-bytes" {
-  import { PluginObject } from "vue";
-  type prettyBytes = (
-    bytes: number,
-    decimals: number,
-    kib: boolean,
-    maxuint: string,
-  ) => string;
-  interface VueFilterPrettyBytes extends PluginObject<undefined> {}
-
-  module "vue/types/vue" {
-    interface Vue {
-      $prettyBytes: prettyBytes;
-    }
-  }
-
-  const VueFilterPrettyBytes: VueFilterPrettyBytes;
-  export default VueFilterPrettyBytes;
-}
diff --git a/web/yarn.lock b/web/yarn.lock
@@ -2409,6 +2409,11 @@ prettier@^3.4.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f"
   integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
 
+pretty-bytes@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-6.1.1.tgz#38cd6bb46f47afbf667c202cfc754bffd2016a3b"
+  integrity sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -3054,11 +3059,6 @@ vue-eslint-parser@^9.3.1, vue-eslint-parser@^9.4.3:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-filter-pretty-bytes@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/vue-filter-pretty-bytes/-/vue-filter-pretty-bytes-0.1.6.tgz#33f763700f2ed52c9d641477357220ecd02768f7"
-  integrity sha512-RcREeq5y4/So104i/A7F0xi3e5p6cxRsow+wxPClNHp07RH+k/y4g98Gzg5FZz+bavk5i+2YHmCZh2V0buN60Q==
-
 vue-moment@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-4.1.0.tgz#092a8ff723a96c6f85a0a8e23ad30f0bf320f3b0"