94 lines
1.9 KiB
Vue
94 lines
1.9 KiB
Vue
<template>
|
|
<div id="quota">
|
|
<div>
|
|
<div class="quota-label">{{ $t("sidebar.quota.space") }}</div>
|
|
|
|
<br />
|
|
|
|
<progress-bar
|
|
:val="spaceProgress"
|
|
size="small"
|
|
:title="spaceProgress + '%'"
|
|
></progress-bar>
|
|
|
|
<div v-if="loaded" class="quota-metric">{{ spaceUsageTitle }}</div>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div>
|
|
<div class="quota-label">{{ $t("sidebar.quota.inodes") }}</div>
|
|
|
|
<br />
|
|
|
|
<progress-bar
|
|
:val="inodeProgress"
|
|
size="small"
|
|
:title="inodeProgress + '%'"
|
|
></progress-bar>
|
|
|
|
<div v-if="loaded" class="quota-metric">{{ inodeUsageTitle }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import filesize from "filesize";
|
|
import { mapState } from "vuex";
|
|
import ProgressBar from "vue-simple-progress";
|
|
|
|
export default {
|
|
name: "quota",
|
|
components: {
|
|
ProgressBar,
|
|
},
|
|
computed: {
|
|
...mapState("quota", {
|
|
inodes: (state) => state.inodes,
|
|
space: (state) => state.space,
|
|
}),
|
|
loaded() {
|
|
return this.inodes !== null && this.space !== null;
|
|
},
|
|
spaceProgress() {
|
|
if (!this.loaded) {
|
|
return 0;
|
|
}
|
|
|
|
return this.progress(this.space);
|
|
},
|
|
inodeProgress() {
|
|
if (!this.loaded) {
|
|
return 0;
|
|
}
|
|
|
|
return this.progress(this.inodes);
|
|
},
|
|
spaceUsageTitle() {
|
|
if (this.space === null) {
|
|
return "- / -";
|
|
} else {
|
|
return filesize(this.space.usage) + " / " + filesize(this.space.quota);
|
|
}
|
|
},
|
|
inodeUsageTitle() {
|
|
if (this.inodes === null) {
|
|
return "- / -";
|
|
} else {
|
|
return this.inodes.usage + " / " + this.inodes.quota;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch("quota/fetch");
|
|
},
|
|
methods: {
|
|
progress(metric) {
|
|
let prc = (metric.usage / metric.quota) * 100;
|
|
prc = Math.round((prc + Number.EPSILON) * 100) / 100;
|
|
return Math.min(prc, 100);
|
|
},
|
|
},
|
|
};
|
|
</script>
|