Merge pull request #3680 from modoboa/better_resource_usage_display

Improved resource usage display (quota and message limit).

frontend/src/components/admin/domains/DomainSummary.vue

@@ -33,8 +33,25 @@
             domain.message_limit !== undefined && domain.message_limit !== null
           "
           cols="6"
-          >{{ domain.message_limit }} {{ $gettext('messages') }}</v-col
         >
+          <template v-if="domain.message_limit === 0">
+            {{ $gettext('Sending forbidden') }}
+          </template>
+          <v-progress-linear
+            v-else
+            :color="
+              domain.sent_messages_in_percent < 80 ? 'primary' : 'warning'
+            "
+            :model-value="domain.sent_messages_in_percent"
+            height="25"
+            class="white--text"
+          >
+            <template #default="{ value }">
+              {{ Math.ceil(value) }}% ({{ domain.message_limit }}
+              {{ $gettext('messages') }})
+            </template>
+          </v-progress-linear>
+        </v-col>
         <v-col v-else cols="6">
           {{ $gettext('Unlimited') }}
         </v-col>

frontend/src/components/admin/identities/AccountSummary.vue

@@ -61,9 +61,34 @@
             </v-progress-linear>
           </v-col>
         </v-row>
-        <v-row v-if="account.mailbox.message_limit">
+        <v-row
+          v-if="
+            account.mailbox.message_limit !== null &&
+            account.mailbox.message_limit !== undefined
+          "
+        >
           <v-col cols="6">{{ $gettext('Daily sending limit') }}</v-col>
-          <v-col cols="6">{{ account.mailbox.message_limit }}</v-col>
+          <v-col cols="6">
+            <template v-if="account.mailbox.message_limit === 0">
+              {{ $gettext('Sending forbidden') }}
+            </template>
+            <v-progress-linear
+              v-else
+              :color="
+                account.mailbox.sent_messages_in_percent < 80
+                  ? 'primary'
+                  : 'warning'
+              "
+              :model-value="account.mailbox.sent_messages_in_percent"
+              height="25"
+              class="white--text"
+            >
+              <template #default="{ value }">
+                {{ Math.ceil(value) }}% ({{ account.mailbox.message_limit }}
+                {{ $gettext('messages') }})
+              </template>
+            </v-progress-linear>
+          </v-col>
         </v-row>
       </template>
     </v-card-text>

frontend/src/components/admin/identities/IdentityList.vue

@@ -122,6 +122,50 @@
           {{ item.role }}
         </v-chip>
       </template>
+      <template #[`item.quota_usage`]="{ item }">
+        <template v-if="item.mailbox">
+          <v-progress-linear
+            v-if="item.mailbox.quota !== '0'"
+            :color="item.mailbox.quota_usage < 80 ? 'primary' : 'warning'"
+            :model-value="item.mailbox.quota_usage"
+          />
+          <span v-else>
+            {{ $gettext('Unlimited') }}
+          </span>
+        </template>
+        <template v-else>
+          {{ $gettext('No mailbox') }}
+        </template>
+      </template>
+      <template #[`item.sent_messages_in_percent`]="{ item }">
+        <template v-if="item.mailbox">
+          <template
+            v-if="
+              item.mailbox.message_limit !== null &&
+              item.mailbox.message_limit !== undefined
+            "
+          >
+            <v-progress-linear
+              v-if="item.mailbox.message_limit !== 0"
+              :color="
+                item.mailbox.sent_messages_in_percent < 80
+                  ? 'primary'
+                  : 'warning'
+              "
+              :model-value="item.mailbox.sent_messages_in_percent"
+            />
+            <span v-else>
+              {{ $gettext('Sending forbidden') }}
+            </span>
+          </template>
+          <template v-else>
+            {{ $gettext('Unlimited') }}
+          </template>
+        </template>
+        <template v-else>
+          {{ $gettext('No mailbox') }}
+        </template>
+      </template>
       <template #[`item.actions`]="{ item }">
         <template
           v-if="
@@ -223,6 +267,11 @@ const availableAccountsColumns = {
   },
   is_active: { title: $gettext('Enabled'), key: 'is_active' },
   role: { title: $gettext('Role'), key: 'role' },
+  quota: { title: $gettext('Quota'), key: 'quota_usage' },
+  message_limit: {
+    title: $gettext('Message limit'),
+    key: 'sent_messages_in_percent',
+  },
   language: { title: $gettext('Language'), key: 'language' },
   phone_number: {
     title: $gettext('Phone number'),
@@ -258,6 +307,7 @@ const defaultAccountsColumns = [
   availableAccountsColumns.username,
   availableAccountsColumns.is_active,
   availableAccountsColumns.role,
+  availableAccountsColumns.quota,
 ]
 
 const identityType = ref('account')

modoboa/admin/api/v1/serializers.py

@@ -208,6 +208,7 @@ class MailboxSerializer(serializers.ModelSerializer):
             "message_limit",
             "quota_usage",
             "is_send_only",
+            "sent_messages_in_percent",
         )
 
     def get_quota_usage(self, mb) -> int: