Show user and actors media usage in admin

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Admin/AdminGroupProfile.vue

@@ -198,6 +198,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
 import { GET_GROUP, REFRESH_PROFILE } from "@/graphql/group";
+import { formatBytes } from "@/utils/datetime";
 import { SUSPEND_PROFILE, UNSUSPEND_PROFILE } from "../../graphql/actor";
 import { IGroup, MemberRole } from "../../types/actor";
 import { usernameWithDomain, IActor } from "../../types/actor/actor.model";
@@ -258,6 +259,10 @@ export default class AdminGroupProfile extends Vue {
         key: this.$t("Domain") as string,
         value: (this.group.domain ? this.group.domain : this.$t("Local")) as string,
       },
+      {
+        key: this.$i18n.t("Uploaded media size") as string,
+        value: formatBytes(this.group.mediaSize),
+      },
     ];
     return res;
   }

js/src/views/Admin/AdminProfile.vue

@@ -126,11 +126,11 @@
 </template>
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import { formatBytes } from "@/utils/datetime";
 import { GET_PERSON, SUSPEND_PROFILE, UNSUSPEND_PROFILE } from "../../graphql/actor";
 import { IPerson } from "../../types/actor";
 import { usernameWithDomain } from "../../types/actor/actor.model";
 import RouteName from "../../router/name";
-import { IEvent } from "../../types/event.model";
 import ActorCard from "../../components/Account/ActorCard.vue";
 
 const EVENTS_PER_PAGE = 10;
@@ -171,9 +171,9 @@ export default class AdminProfile extends Vue {
 
   participationsPage = 1;
 
-  get metadata(): Array<object> {
+  get metadata(): Array<Record<string, unknown>> {
     if (!this.person) return [];
-    const res: object[] = [
+    const res: Record<string, unknown>[] = [
       {
         key: this.$t("Status") as string,
         value: this.person.suspended ? this.$t("Suspended") : this.$t("Active"),
@@ -182,6 +182,10 @@ export default class AdminProfile extends Vue {
         key: this.$t("Domain") as string,
         value: this.person.domain ? this.person.domain : this.$t("Local"),
       },
+      {
+        key: this.$i18n.t("Uploaded media size"),
+        value: formatBytes(this.person.mediaSize),
+      },
     ];
     if (!this.person.domain && this.person.user) {
       res.push({
@@ -193,7 +197,7 @@ export default class AdminProfile extends Vue {
     return res;
   }
 
-  async suspendProfile() {
+  async suspendProfile(): Promise<void> {
     this.$apollo.mutate<{ suspendProfile: { id: string } }>({
       mutation: SUSPEND_PROFILE,
       variables: {
@@ -229,7 +233,7 @@ export default class AdminProfile extends Vue {
     });
   }
 
-  async unsuspendProfile() {
+  async unsuspendProfile(): Promise<void> {
     const profileID = this.id;
     this.$apollo.mutate<{ unsuspendProfile: { id: string } }>({
       mutation: UNSUSPEND_PROFILE,
@@ -249,7 +253,7 @@ export default class AdminProfile extends Vue {
     });
   }
 
-  async onOrganizedEventsPageChange(page: number) {
+  async onOrganizedEventsPageChange(page: number): Promise<void> {
     this.organizedEventsPage = page;
     await this.$apollo.queries.person.fetchMore({
       variables: {
@@ -274,7 +278,7 @@ export default class AdminProfile extends Vue {
     });
   }
 
-  async onParticipationsPageChange(page: number) {
+  async onParticipationsPageChange(page: number): Promise<void> {
     this.participationsPage = page;
     await this.$apollo.queries.person.fetchMore({
       variables: {

js/src/views/Admin/AdminUserProfile.vue

@@ -26,7 +26,7 @@
     </nav>
     <table v-if="metadata.length > 0" class="table is-fullwidth">
       <tbody>
-        <tr v-for="{ key, value, link, elements } in metadata" :key="key">
+        <tr v-for="{ key, value, link, elements, type } in metadata" :key="key">
           <td>{{ key }}</td>
           <td v-if="elements && elements.length > 0">
             <ul v-for="{ value, link: elementLink, active } in elements" :key="value">
@@ -46,6 +46,9 @@
               {{ value }}
             </router-link>
           </td>
+          <td v-else-if="type == 'code'">
+            <code>{{ value }}</code>
+          </td>
           <td v-else>{{ value }}</td>
         </tr>
       </tbody>
@@ -60,6 +63,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
 import { Route } from "vue-router";
+import { formatBytes } from "@/utils/datetime";
 import { GET_USER, SUSPEND_USER } from "../../graphql/user";
 import { usernameWithDomain } from "../../types/actor/actor.model";
 import RouteName from "../../router/name";
@@ -139,11 +143,16 @@ export default class AdminUserProfile extends Vue {
       {
         key: this.$i18n.t("Last IP adress"),
         value: this.user.currentSignInIp || this.$t("Unknown"),
+        type: "code",
       },
       {
         key: this.$i18n.t("Participations"),
         value: this.user.participations.total,
       },
+      {
+        key: this.$i18n.t("Uploaded media size"),
+        value: formatBytes(this.user.mediaSize),
+      },
     ];
   }