pub-relay (#6341)

* pub-relay

* relay actorをApplicationにする

* Disable koa-compress

* Homeはリレーに送らない

* Disable debug

* UI

* cleanupなど

3 files changed, 101 insertions, 2 deletions

diff --git a/src/client/app.vue b/src/client/app.vue
index 170ba9365d..5e7396205b 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -132,7 +132,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { v4 as uuid } from 'uuid';
@@ -169,7 +169,7 @@ export default Vue.extend({
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			canBack: false,
 			wallpaper: localStorage.getItem('wallpaper') != null,
-			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer
+			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
 		};
 	},
 
@@ -415,6 +415,11 @@ export default Vue.extend({
 					icon: faGlobe,
 				}, {
 					type: 'link',
+					text: this.$t('relays'),
+					to: '/instance/relays',
+					icon: faProjectDiagram,
+				}, {
+					type: 'link',
 					text: this.$t('announcements'),
 					to: '/instance/announcements',
 					icon: faBroadcastTower,
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
new file mode 100644
index 0000000000..568f5edd71
--- /dev/null
+++ b/src/client/pages/instance/relays.vue
@@ -0,0 +1,93 @@
+<template>
+<div class="relaycxt">
+	<portal to="icon"><fa :icon="faProjectDiagram"/></portal>
+	<portal to="title">{{ $t('relays') }}</portal>
+
+	<section class="_card add">
+		<div class="_title"><fa :icon="faPlus"/> {{ $t('addRelay') }}</div>
+		<div class="_content">
+			<mk-input v-model="inbox">
+				<span>{{ $t('inboxUrl') }}</span>
+			</mk-input>
+			<mk-button @click="add(inbox)" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
+		</div>
+	</section>
+
+	<section class="_card relays">
+		<div class="_title"><fa :icon="faProjectDiagram"/> {{ $t('addedRelays') }}</div>
+		<div class="_content relay" v-for="relay in relays" :key="relay.inbox">
+			<div>{{ relay.inbox }}</div>
+			<div>{{ $t(`_relayStatus.${relay.status}`) }}</div>
+			<mk-button class="button" inline @click="remove(relay.inbox)"><fa :icon="faTrashAlt"/> {{ $t('remove') }}</mk-button>
+		</div>
+	</section>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPlus, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+import { faSave, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
+import i18n from '../../i18n';
+import MkButton from '../../components/ui/button.vue';
+import MkInput from '../../components/ui/input.vue';
+
+export default Vue.extend({
+	i18n,
+
+	metaInfo() {
+		return {
+			title: this.$t('relays') as string
+		};
+	},
+
+	components: {
+		MkButton,
+		MkInput,
+	},
+
+	data() {
+		return {
+			relays: [],
+			inbox: '',
+			faPlus, faProjectDiagram, faSave, faTrashAlt
+		}
+	},
+
+	created() {
+		this.refresh();
+	},
+
+	methods: {
+		add(inbox: string) {
+			this.$root.api('admin/relays/add', {
+				inbox
+			}).then((relay: any) => {
+				this.refresh();
+			});
+		},
+
+		remove(inbox: string) {
+			this.$root.api('admin/relays/remove', {
+				inbox
+			}).then(() => {
+				this.refresh();
+			});
+		},
+
+		refresh() {
+			this.$root.api('admin/relays/list').then((relays: any) => {
+				this.relays = relays;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+._content.relay {
+	div {
+		margin: 0.5em 0;
+	}
+}
+</style>
diff --git a/src/client/router.ts b/src/client/router.ts
index e997d2db99..cf98c57bd7 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -58,6 +58,7 @@ export const router = new VueRouter({
 		{ path: '/instance/queue', component: page('instance/queue') },
 		{ path: '/instance/settings', component: page('instance/settings') },
 		{ path: '/instance/federation', component: page('instance/federation') },
+		{ path: '/instance/relays', component: page('instance/relays') },
 		{ path: '/instance/announcements', component: page('instance/announcements') },
 		{ path: '/notes/:note', name: 'note', component: page('note') },
 		{ path: '/tags/:tag', component: page('tag') },