feat: add disk usage information to the sidebar

2022-06-02 12:52:24 +02:00
parent 42a39b3f1d
commit d1d8e3e340
9 changed files with 144 additions and 1 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,12 +19,15 @@
        "moment": "^2.29.2",
        "normalize.css": "^8.0.1",
        "noty": "^3.2.0-beta",
+        "pretty-bytes": "^6.0.0",
        "qrcode.vue": "^1.7.0",
        "utif": "^3.1.0",
        "vue": "^2.6.10",
+        "vue-async-computed": "^3.9.0",
        "vue-i18n": "^8.15.3",
        "vue-lazyload": "^1.3.3",
        "vue-router": "^3.1.3",
+        "vue-simple-progress": "^1.1.1",
        "vuex": "^3.1.2",
        "vuex-router-sync": "^5.0.0",
        "whatwg-fetch": "^3.6.2"
@@ -11127,6 +11130,17 @@
        "node": ">=6.0.0"
      }
    },
+    "node_modules/pretty-bytes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
+      "integrity": "sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/pretty-error": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
@@ -13839,6 +13853,14 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
    },
+    "node_modules/vue-async-computed": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.9.0.tgz",
+      "integrity": "sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==",
+      "peerDependencies": {
+        "vue": "~2"
+      }
+    },
    "node_modules/vue-eslint-parser": {
      "version": "7.6.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
@@ -14018,6 +14040,11 @@
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
    },
+    "node_modules/vue-simple-progress": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-simple-progress/-/vue-simple-progress-1.1.1.tgz",
+      "integrity": "sha512-ltLWYBA5eVQHWyt1NwZeGeK0VQC69JVh1oqUdro0po7r8Hc8SEMEyEfuwyCO4s27h5I3jbD99BKKkyPSQZgoZA=="
+    },
    "node_modules/vue-style-loader": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -24394,6 +24421,11 @@
        "fast-diff": "^1.1.2"
      }
    },
+    "pretty-bytes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.0.0.tgz",
+      "integrity": "sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg=="
+    },
    "pretty-error": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
@@ -26664,6 +26696,12 @@
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
    },
+    "vue-async-computed": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.9.0.tgz",
+      "integrity": "sha512-ac6m/9zxHHNGGKNOU1en8qNk+fAmEbJLuWL7qyQTFuH3vjv3V4urv//QHcVzCobROM6btnaDG2b+XYMncF/ETA==",
+      "requires": {}
+    },
    "vue-eslint-parser": {
      "version": "7.6.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
@@ -26801,6 +26839,11 @@
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
    },
+    "vue-simple-progress": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-simple-progress/-/vue-simple-progress-1.1.1.tgz",
+      "integrity": "sha512-ltLWYBA5eVQHWyt1NwZeGeK0VQC69JVh1oqUdro0po7r8Hc8SEMEyEfuwyCO4s27h5I3jbD99BKKkyPSQZgoZA=="
+    },
    "vue-style-loader": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,12 +21,15 @@
    "moment": "^2.29.2",
    "normalize.css": "^8.0.1",
    "noty": "^3.2.0-beta",
+    "pretty-bytes": "^6.0.0",
    "qrcode.vue": "^1.7.0",
    "utif": "^3.1.0",
    "vue": "^2.6.10",
+    "vue-async-computed": "^3.9.0",
    "vue-i18n": "^8.15.3",
    "vue-lazyload": "^1.3.3",
    "vue-router": "^3.1.3",
+    "vue-simple-progress": "^1.1.1",
    "vuex": "^3.1.2",
    "vuex-router-sync": "^5.0.0",
    "whatwg-fetch": "^3.6.2"
--- a/frontend/src/api/files.js
+++ b/frontend/src/api/files.js
@@ -1,4 +1,4 @@
-import { fetchURL, removePrefix, createURL } from "./utils";
+import { createURL, fetchURL, removePrefix } from "./utils";
 import { baseURL } from "@/utils/constants";
 import store from "@/store";

@@ -176,3 +176,11 @@ export function getSubtitlesURL(file) {

  return subtitles;
 }
+
+export async function usage(url) {
+  url = removePrefix(url);
+
+  const res = await fetchURL(`/api/usage${url}`, {});
+
+  return await res.json();
+}
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -80,6 +80,16 @@
      </router-link>
    </template>

+    <div
+      class="credits"
+      v-if="$router.currentRoute.path.includes('/files/')"
+      style="width: 90%; margin: 2em 2.5em 3em 2.5em"
+    >
+      <progress-bar :val="usage.usedPercentage" :size="large"></progress-bar>
+      <br />
+      {{ usage.used }} of {{ usage.total }} used
+    </div>
+
    <p class="credits">
      <span>
        <span v-if="disableExternal">File Browser</span>
@@ -109,9 +119,15 @@ import {
  noAuth,
  authMethod,
 } from "@/utils/constants";
+import { files as api } from "@/api";
+import ProgressBar from "vue-simple-progress";
+import prettyBytes from "pretty-bytes";

 export default {
  name: "sidebar",
+  components: {
+    ProgressBar,
+  },
  computed: {
    ...mapState(["user"]),
    ...mapGetters(["isLogged"]),
@@ -124,6 +140,31 @@ export default {
    noAuth: () => noAuth,
    authMethod: () => authMethod,
  },
+  asyncComputed: {
+    usage: {
+      async get() {
+        let path = this.$route.path.endsWith("/")
+          ? this.$route.path
+          : this.$route.path + "/";
+        let usageStats = { used: 0, total: 0, usedPercentage: 0 };
+        try {
+          let usage = await api.usage(path);
+          usageStats = {
+            used: prettyBytes(usage.used),
+            total: prettyBytes(usage.total),
+            usedPercentage: Math.round((usage.used / usage.total) * 100),
+          };
+        } catch (error) {
+          this.$showError(error);
+        }
+        return usageStats;
+      },
+      default: { used: "0 B", total: "0 B", usedPercentage: 0 },
+      shouldUpdate() {
+        return this.$router.currentRoute.path.includes("/files/");
+      },
+    },
+  },
  methods: {
    toRoot() {
      this.$router.push({ path: "/files/" }, () => {});
--- a/frontend/src/utils/vue.js
+++ b/frontend/src/utils/vue.js
@@ -3,8 +3,10 @@ import Noty from "noty";
 import VueLazyload from "vue-lazyload";
 import i18n from "@/i18n";
 import { disableExternal } from "@/utils/constants";
+import AsyncComputed from "vue-async-computed";

 Vue.use(VueLazyload);
+Vue.use(AsyncComputed);

 Vue.config.productionTip = true;