Improve federation management UI

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

js/src/components/Admin/Followers.vue

@@ -43,18 +43,20 @@
           </template>
         </b-table-column>
 
-        <b-table-column field="actor.updatedAt" :label="$t('Date')" sortable>{{
-          props.row.updatedAt | formatDateTimeString
-        }}</b-table-column>
+        <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
+          <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
+            timeago(props.row.updatedAt)
+          }}</span></b-table-column
+        >
       </template>
 
       <template slot="detail" slot-scope="props">
         <article>
           <div class="content">
-            <strong>{{ props.row.actor.domain }}</strong>
-            <small>@{{ props.row.actor.preferredUsername }}</small>
-            <small>31m</small>
-            <br />
+            <strong>{{ props.row.actor.name }}</strong>
+            <small v-if="props.row.actor.preferredUsername !== 'relay'"
+              >@{{ props.row.actor.preferredUsername }}</small
+            >
             <p v-html="props.row.actor.summary" />
           </div>
         </article>

js/src/components/Admin/Followings.vue

@@ -56,18 +56,20 @@
           </template>
         </b-table-column>
 
-        <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>{{
-          props.row.updatedAt | formatDateTimeString
-        }}</b-table-column>
+        <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
+          <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
+            timeago(props.row.updatedAt)
+          }}</span></b-table-column
+        >
       </template>
 
       <template slot="detail" slot-scope="props">
         <article>
           <div class="content">
-            <strong>{{ props.row.targetActor.domain }}</strong>
-            <small>@{{ props.row.targetActor.preferredUsername }}</small>
-            <small>31m</small>
-            <br />
+            <strong>{{ props.row.targetActor.name }}</strong>
+            <small v-if="props.row.actor.preferredUsername !== 'relay'"
+              >@{{ props.row.targetActor.preferredUsername }}</small
+            >
             <p v-html="props.row.targetActor.summary" />
           </div>
         </article>

js/src/mixins/relay.ts

@@ -1,6 +1,7 @@
 import { Component, Vue, Ref } from "vue-property-decorator";
 import { ActorType, IActor } from "@/types/actor";
 import { IFollower } from "@/types/actor/follower.model";
+import TimeAgo from "javascript-time-ago";
 
 @Component
 export default class RelayMixin extends Vue {
@@ -12,6 +13,15 @@ export default class RelayMixin extends Vue {
 
   perPage = 10;
 
+  timeAgoInstance: TimeAgo | null = null;
+
+  async mounted() {
+    const localeName = this.$i18n.locale;
+    const locale = await import(`javascript-time-ago/locale/${localeName}`);
+    TimeAgo.addLocale(locale);
+    this.timeAgoInstance = new TimeAgo(localeName);
+  }
+
   toggle(row: object) {
     this.table.toggleDetails(row);
   }
@@ -43,4 +53,11 @@ export default class RelayMixin extends Vue {
       (actor.preferredUsername === "relay" || actor.preferredUsername === actor.domain)
     );
   }
+
+  timeago(dateTime: string): string {
+    if (this.timeAgoInstance != null) {
+      return this.timeAgoInstance.format(new Date(dateTime));
+    }
+    return "";
+  }
 }