add progress bar above disk usage

files/file.go

@@ -43,6 +43,7 @@ type FileInfo struct {
 	DiskUsedPercent string            `json:"diskUsedPercent"`
 	FreeDiskSpace   string            `json:"freeDiskSpace"`
 	TotalDiskSpace  string            `json:"totalDiskSpace"`
+	UsedDiskSpace   string            `json:"usedDiskSpace"`
 }
 
 // FileOptions are the options when getting a file info.

frontend/package-lock.json

@@ -25,6 +25,7 @@
         "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"
@@ -14019,6 +14020,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",
@@ -26798,6 +26804,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",

frontend/package.json

@@ -27,6 +27,7 @@
     "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"

frontend/src/components/Sidebar.vue

@@ -44,7 +44,12 @@
           <span>{{ $t("sidebar.settings") }}</span>
         </button>
 
-        <div v-if="$router.currentRoute.path === '/files/'" style="padding: 1.3em">
+        <div
+          v-if="$router.currentRoute.path.includes('/files/')"
+          style="padding: 0.5em 1.3em 0 1.3em"
+        >
+          <progress-bar :val="req.diskUsedPercent" :size="large"></progress-bar>
+          <br />
           {{ req.freeDiskSpace }} free of {{ req.totalDiskSpace }}
         </div>
 
@@ -105,6 +110,7 @@
 
 <script>
 import { mapState, mapGetters } from "vuex";
+import ProgressBar from "vue-simple-progress";
 import * as auth from "@/utils/auth";
 import {
   version,
@@ -128,6 +134,9 @@ export default {
     noAuth: () => noAuth,
     authMethod: () => authMethod,
   },
+  components: {
+    ProgressBar,
+  },
   methods: {
     toRoot() {
       this.$router.push({ path: "/files/" }, () => {});

http/resource.go

@@ -1,10 +1,8 @@
 package http
 
 import (
-	"code.cloudfoundry.org/bytefmt"
 	"context"
 	"fmt"
-	"github.com/filebrowser/filebrowser/v2/disk"
 	"io"
 	"net/http"
 	"net/url"
@@ -13,6 +11,9 @@ import (
 	"path/filepath"
 	"strings"
 
+	"code.cloudfoundry.org/bytefmt"
+	"github.com/filebrowser/filebrowser/v2/disk"
+
 	"github.com/spf13/afero"
 
 	"github.com/filebrowser/filebrowser/v2/errors"
@@ -35,6 +36,7 @@ var resourceGetHandler = withUser(func(w http.ResponseWriter, r *http.Request, d
 	file.DiskUsedPercent = fmt.Sprintf("%.2f", usage.UsedPercent)
 	file.TotalDiskSpace = bytefmt.ByteSize(usage.Total)
 	file.FreeDiskSpace = bytefmt.ByteSize(usage.Free)
+	file.UsedDiskSpace = bytefmt.ByteSize(usage.Used)
 
 	if err != nil {
 		return errToStatus(err), err