feat: コントロールパネルのメイン画面にサーバーメトリクスを追加

CHANGELOG_CHERRYPICK.md

@@ -28,6 +28,7 @@
 
 ### General
 - 리액션 수신의 기본값을 전체로 설정
+- 제어판 메인 화면에 서버 통계 추가
 
 ### Client
 - 리노트 전 확인 팝업을 띄움

packages/frontend/src/pages/admin/overview.vue

@@ -9,6 +9,11 @@
 					<XStats/>
 				</MkFoldableSection>
 
+				<MkFoldableSection class="item">
+					<template #header>Server Metric</template>
+					<XCpuMemoryNetCompact :connection="connection" :meta="meta"/>
+				</MkFoldableSection>
+
 				<MkFoldableSection class="item">
 					<template #header>Active users</template>
 					<XActiveUsers/>
@@ -65,7 +70,7 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import {markRaw, onMounted, onBeforeUnmount, nextTick, onUnmounted, ref} from 'vue';
 import XHeader from './_header_.vue';
 import XFederation from './overview.federation.vue';
 import XInstances from './overview.instances.vue';
@@ -82,6 +87,8 @@ import { useStream } from '@/stream';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import XCpuMemoryNetCompact from "@/widgets/server-metric/cpu-mem-net-pie.vue";
+import XCpuMemory from "@/widgets/server-metric/cpu-mem.vue";
 
 const rootEl = $shallowRef<HTMLElement>();
 let serverInfo: any = $ref(null);
@@ -94,6 +101,7 @@ let federationSubActiveDiff = $ref<number | null>(null);
 let newUsers = $ref(null);
 let activeInstances = $shallowRef(null);
 const queueStatsConnection = markRaw(useStream().useChannel('queueStats'));
+const connection = useStream().useChannel('serverStats');
 const now = new Date();
 const filesPagination = {
 	endpoint: 'admin/drive/files' as const,
@@ -101,6 +109,12 @@ const filesPagination = {
 	noPaging: true,
 };
 
+const meta = ref(null);
+
+os.api('server-info', {}).then(res => {
+	meta.value = res;
+});
+
 function onInstanceClick(i) {
 	os.pageWindow(`/instance-info/${i.host}`);
 }
@@ -172,6 +186,10 @@ onBeforeUnmount(() => {
 	queueStatsConnection.dispose();
 });
 
+onUnmounted(() => {
+	connection.dispose();
+});
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);