Display account quota usage in new UI

frontend/src/components/domains/DomainSummary.vue

@@ -14,7 +14,7 @@
     </v-row>
     <v-row>
       <v-col cols="6"><translate>Quota</translate></v-col>
-      <v-col cols="6">{{ domain.quota }} MB</v-col>
+      <v-col cols="6">{{ domain.quota }} <translate>MB</translate></v-col>
     </v-row>
     <v-row>
       <v-col cols="6"><translate>Default mailbox quota</translate></v-col>

frontend/src/components/identities/AccountAliases.vue

@@ -4,9 +4,9 @@
     <translate class="headline">Aliases</translate>
   </v-card-title>
   <v-card-text>
-    <p v-for="alias in account.aliases" :key="alias">
+    <v-chip v-for="alias in account.aliases" :key="alias" class="mr-2 mt-2">
       {{ alias }}
-    </p>
+    </v-chip>
   </v-card-text>
 </v-card>
 </template>

frontend/src/components/identities/AccountSummary.vue

@@ -29,7 +29,28 @@
       <v-col cols="6"><translate>Phone number</translate></v-col>
       <v-col cols="6">{{ account.phone_number }}</v-col>
     </v-row>
+    <template v-if="account.mailbox">
+      <v-row>
+        <v-col cols="6"><translate>Quota</translate></v-col>
+        <v-col cols="6">
+          <v-progress-linear
+            :color="account.mailbox.quota_usage < 80 ? 'primary' : 'warning'"
+            :value="account.mailbox.quota_usage"
+            height="25"
+            class="white--text"
+            >
+            <template v-slot:default="{ value }">
+              {{ Math.ceil(value) }}% ({{ account.mailbox.quota }} <translate>MB</translate>)
+            </template>
+          </v-progress-linear>
+        </v-col>
+      </v-row>
+      <v-row v-if="account.mailbox.message_limit">
+        <v-col cols="6"><translate>Daily sending limit</translate></v-col>
+        <v-col cols="6">{{ account.mailbox.message_limit }}</v-col>
+      </v-row>
 
+    </template>
   </v-card-text>
 </v-card>
 </template>

frontend/yarn.lock

@@ -2410,9 +2410,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001407:
-  version "1.0.30001410"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001410.tgz#b5a86366fbbf439d75dd3db1d21137a73e829f44"
-  integrity sha512-QoblBnuE+rG0lc3Ur9ltP5q47lbguipa/ncNMyyGuqPk44FxbScWAeEO+k5fSQ8WekdAK4mWqNs1rADDAiN5xQ==
+  version "1.0.30001481"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz"
+  integrity sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"

modoboa/admin/api/v1/serializers.py

@@ -150,13 +150,18 @@ class MailboxSerializer(serializers.ModelSerializer):
 
     full_address = lib_fields.DRFEmailFieldUTF8()
     quota = serializers.CharField(required=False)
+    quota_usage = serializers.SerializerMethodField()
 
     class Meta:
         model = models.Mailbox
         fields = (
-            "pk", "full_address", "use_domain_quota", "quota", "message_limit"
+            "pk", "full_address", "use_domain_quota", "quota", "message_limit",
+            "quota_usage"
         )
 
+    def get_quota_usage(self, mb) -> int:
+        return mb.get_quota_in_percent()
+
     def validate_full_address(self, value):
         """Lower case address."""
         return value.lower()

modoboa/admin/api/v2/serializers.py

@@ -392,7 +392,7 @@ class MailboxSerializer(serializers.ModelSerializer):
     class Meta:
         model = models.Mailbox
         fields = (
-            "pk", "use_domain_quota", "quota", "message_limit"
+            "pk", "use_domain_quota", "quota", "message_limit",
         )
 
     def validate_quota(self, value):