add progress bar above disk usage

This commit is contained in:
Yash-Garg 2021-11-26 19:29:09 +05:30
parent 0a4b5665c4
commit ca0d97e4e8
No known key found for this signature in database
GPG Key ID: 83B503973C5C7470
5 changed files with 27 additions and 3 deletions

View File

@ -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.

View File

@ -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",

View File

@ -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"

View File

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

View File

@ -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