feat: add disk usage information to the sidebar

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/" }, () => {});