Add total quota to quota meter

galaxyproject · May 31, 2024 · 4b3a93d · 4b3a93d
1 parent 5fc1c66
commit 4b3a93d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/client/src/components/Masthead/QuotaMeter.test.ts b/client/src/components/Masthead/QuotaMeter.test.ts
@@ -38,10 +38,11 @@ describe("QuotaMeter.vue", () => {
         const user = {
             total_disk_usage: 5120,
             quota_percent: 50,
+            quota: "100 MB",
         };
         const config = { enable_quotas: true };
         const wrapper = await createQuotaMeterWrapper(config, user);
-        expect(wrapper.find(".quota-progress > span").text()).toBe("Using 50%");
+        expect(wrapper.find(".quota-progress > span").text()).toBe("Using 50% of 100 MB");
     });
 
     it("changes appearance depending on usage", async () => {

diff --git a/client/src/components/Masthead/QuotaMeter.vue b/client/src/components/Masthead/QuotaMeter.vue
@@ -16,6 +16,8 @@ const hasQuota = computed(() => {
     return quotasEnabled && quotaLimited;
 });
 
+const quotaLimit = computed(() => currentUser.value?.quota ?? 0);
+
 const totalUsageString = computed(() => {
     const total = currentUser.value?.total_disk_usage ?? 0;
     return bytesToString(total, true);
@@ -44,8 +46,14 @@ const variant = computed(() => {
             <BProgress :max="100">
                 <BProgressBar aria-label="Quota usage" :value="usage" :variant="variant" />
             </BProgress>
-            <span v-if="hasQuota">{{ "Using " + usage.toFixed(0) }}%</span>
-            <span v-else>{{ "Using " + totalUsageString }}</span>
+            <span>
+                <span v-localize>Using</span>
+                <span v-if="hasQuota">
+                    <span>{{ usage.toFixed(0) }}%</span>
+                    <span v-if="quotaLimit !== 0">of {{ quotaLimit }}</span>
+                </span>
+                <span v-else>{{ totalUsageString }}</span>
+            </span>
         </BLink>
     </div>
 </template>
@@ -57,16 +65,14 @@ const variant = computed(() => {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
     .quota-progress {
-        width: 150px;
+        width: 12rem;
         height: 1.4em;
         position: relative;
         & > * {
             position: absolute;
             width: 100%;
             height: 100%;
             text-align: center;
-        }
-        & > span {
             line-height: 1.4em;
             pointer-events: none;
         }