Add admin interface to manage instances subscriptions

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

js/src/views/Admin/Dashboard.vue

@@ -38,6 +38,13 @@
                         </article>
                     </router-link>
                 </div>
+                <div class="tile is-parent">
+                    <router-link :to="{ name: RouteName.RELAYS }">
+                        <article class="tile is-child box">
+                            <p class="subtitle">{{ $t('Instances') }}</p>
+                        </article>
+                    </router-link>
+                </div>
             </div>
             <div class="tile is-parent">
                 <article class="tile is-child box">
@@ -67,6 +74,12 @@ import { RouteName } from '@/router';
       query: DASHBOARD,
     },
   },
+  metaInfo() {
+    return {
+      title: this.$t('Administration') as string,
+      titleTemplate: '%s | Mobilizon',
+    };
+  },
 })
 export default class Dashboard extends Vue {
   dashboard!: IDashboard;

js/src/views/Admin/Follows.vue

@@ -0,0 +1,57 @@
+<template>
+    <div class="container">
+        <h1 class="title">{{ $t('Instances') }}</h1>
+        <div class="tabs is-boxed">
+            <ul>
+                <router-link tag="li" active-class="is-active" :to="{name: RouteName.RELAY_FOLLOWINGS}" exact>
+                    <a>
+                        <b-icon icon="inbox-arrow-down"></b-icon>
+                        <span>{{ $t('Followings') }} <b-tag rounded> {{ relayFollowings.total }} </b-tag> </span>
+                    </a>
+                </router-link>
+                <router-link tag="li" active-class="is-active" :to="{name: RouteName.RELAY_FOLLOWERS}" exact>
+                    <a>
+                        <b-icon icon="inbox-arrow-up"></b-icon>
+                        <span>{{ $t('Followers') }} <b-tag rounded> {{ relayFollowers.total }} </b-tag> </span>
+                    </a>
+                </router-link>
+            </ul>
+        </div>
+        <router-view></router-view>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import { RouteName } from '@/router';
+import { RELAY_FOLLOWERS, RELAY_FOLLOWINGS } from '@/graphql/admin';
+import { Paginate } from '@/types/paginate';
+import { IFollower } from '@/types/actor/follower.model';
+
+@Component({
+  apollo: {
+    relayFollowings: {
+      query: RELAY_FOLLOWINGS,
+      fetchPolicy: 'cache-and-network',
+    },
+    relayFollowers: {
+      query: RELAY_FOLLOWERS,
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+})
+export default class Follows extends Vue {
+  RouteName = RouteName;
+  activeTab: number = 0;
+
+  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
+  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
+}
+</script>
+<style lang="scss">
+    .tab-item {
+        form {
+            margin-bottom: 1.5rem;
+        }
+    }
+</style>