インスタンス管理画面作り直し (#7473)

* wip

* wip

* wip

* wip

1 files changed, 131 insertions, 0 deletions

diff --git a/src/client/pages/instance/overview.vue b/src/client/pages/instance/overview.vue
new file mode 100644
index 0000000000..651ace08f9
--- /dev/null
+++ b/src/client/pages/instance/overview.vue
@@ -0,0 +1,131 @@
+<template>
+<FormBase>
+	<FormSuspense :p="init">
+		<FormSuspense :p="fetchStats" v-slot="{ result: stats }">
+			<FormGroup>
+				<FormKeyValueView>
+					<template #key>Users</template>
+					<template #value>{{ number(stats.originalUsersCount) }}</template>
+				</FormKeyValueView>
+				<FormKeyValueView>
+					<template #key>Notes</template>
+					<template #value>{{ number(stats.originalNotesCount) }}</template>
+				</FormKeyValueView>
+			</FormGroup>
+		</FormSuspense>
+	
+		<div class="_formItem">
+			<div class="_formPanel">
+				<MkInstanceStats :chart-limit="300" :detailed="true"/>
+			</div>
+		</div>
+
+		<XMetrics/>
+
+		<FormSuspense :p="fetchServerInfo" v-slot="{ result: serverInfo }">
+			<FormGroup>
+				<FormKeyValueView>
+					<template #key>Node.js</template>
+					<template #value>{{ serverInfo.node }}</template>
+				</FormKeyValueView>
+				<FormKeyValueView>
+					<template #key>PostgreSQL</template>
+					<template #value>{{ serverInfo.psql }}</template>
+				</FormKeyValueView>
+				<FormKeyValueView>
+					<template #key>Redis</template>
+					<template #value>{{ serverInfo.redis }}</template>
+				</FormKeyValueView>
+			</FormGroup>
+		</FormSuspense>
+	</FormSuspense>
+</FormBase>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, markRaw } from 'vue';
+import VueJsonPretty from 'vue-json-pretty';
+import FormKeyValueView from '@client/components/form/key-value-view.vue';
+import FormInput from '@client/components/form/input.vue';
+import FormButton from '@client/components/form/button.vue';
+import FormBase from '@client/components/form/base.vue';
+import FormGroup from '@client/components/form/group.vue';
+import FormTextarea from '@client/components/form/textarea.vue';
+import FormInfo from '@client/components/form/info.vue';
+import FormSuspense from '@client/components/form/suspense.vue';
+import MkInstanceStats from '@client/components/instance-stats.vue';
+import MkButton from '@client/components/ui/button.vue';
+import MkSelect from '@client/components/ui/select.vue';
+import MkInput from '@client/components/ui/input.vue';
+import MkContainer from '@client/components/ui/container.vue';
+import MkFolder from '@client/components/ui/folder.vue';
+import { version, url } from '@client/config';
+import bytes from '../../filters/bytes';
+import number from '../../filters/number';
+import MkInstanceInfo from './instance.vue';
+import XMetrics from './metrics.vue';
+import * as os from '@client/os';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	components: {
+		FormBase,
+		FormSuspense,
+		FormGroup,
+		FormKeyValueView,
+		MkInstanceStats,
+		MkButton,
+		MkSelect,
+		MkInput,
+		MkContainer,
+		MkFolder,
+		XMetrics,
+		VueJsonPretty,
+	},
+
+	emits: ['info'],
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.overview,
+				icon: 'fas fa-tachometer-alt'
+			},
+			page: 'index',
+			version,
+			url,
+			stats: null,
+			fetchStats: () => os.api('stats', {}),
+			fetchServerInfo: () => os.api('admin/server-info', {}),
+			fetchJobs: () => os.api('admin/queue/deliver-delayed', {}),
+			fetchModLogs: () => os.api('admin/show-moderation-logs', {}),
+		}
+	},
+
+	async mounted() {
+		this.$emit('info', this[symbols.PAGE_INFO]);
+	},
+
+	methods: {
+		async init() {
+			this.meta = await os.api('meta', { detail: true });
+		},
+	
+		async showInstanceInfo(q) {
+			let instance = q;
+			if (typeof q === 'string') {
+				instance = await os.api('federation/show-instance', {
+					host: q
+				});
+			}
+			os.popup(MkInstanceInfo, {
+				instance: instance
+			}, {}, 'closed');
+		},
+
+		bytes,
+
+		number,
+	}
+});
+</script>