feat: 新增监控页面平均延迟和成功率

Author: ikxin

app/app.vue

@@ -1,5 +1,18 @@
 <script lang="ts" setup>
 const monitorData = useState<MonitorInfo[]>('monitorData')
+const { locale } = useI18n()
+
+const echartsLocale = computed(() => {
+  if (locale.value === 'zh-cn') return 'ZH'
+  return 'EN'
+})
+
+provide(
+  INIT_OPTIONS_KEY,
+  computed(() => ({
+    locale: echartsLocale.value
+  }))
+)
 
 onMounted(async () => {
   const data = await request()('/api/monitor')

app/pages/monitor.vue

@@ -4,27 +4,61 @@ definePageMeta({
 })
 
 const monitorData = useState<MonitorInfo[]>('monitorData')
+const { t, locale } = useI18n()
 
-function getColor(value: number): string {
-  if (value < 0) return '#d9d9d9'
-  if (value < 200) return '#52c41a'
-  if (value < 500) return '#faad14'
-  return '#f5222d'
+const timeLocale = computed(() => {
+  if (locale.value === 'zh-cn') return 'zh-CN'
+  return 'en-US'
+})
+
+function getColor(delay: number, status: boolean): string {
+  if (!status) return '#f5222d'
+  if (delay < 500) return '#52c41a'
+  if (delay < 999) return '#f7ba1e'
+  return '#fa8c16'
 }
 
 function formatTime(timestamp: number): string {
-  return new Date(timestamp).toLocaleTimeString()
+  return new Date(timestamp).toLocaleTimeString(timeLocale.value)
+}
+
+function getAverageDelay(item: MonitorInfo): number {
+  if (!item.data.length) return 0
+  const totalDelay = item.data.reduce((sum, data) => sum + data.delay, 0)
+  return Math.round(totalDelay / item.data.length)
+}
+
+function getSuccessRate(item: MonitorInfo): number {
+  if (!item.total) return 0
+  return Number(((item.success / item.total) * 100).toFixed(1))
+}
+
+function getDelayTagColor(item: MonitorInfo): 'green' | 'orange' | 'red' {
+  const avgDelay = getAverageDelay(item)
+  if (avgDelay < 500) return 'green'
+  if (avgDelay < 999) return 'orange'
+  return 'red'
+}
+
+function getSuccessRateTagColor(item: MonitorInfo): 'green' | 'orange' | 'red' {
+  const successRate = getSuccessRate(item)
+  if (successRate > 90) return 'green'
+  if (successRate < 60) return 'red'
+  return 'orange'
 }
 
 function getChartOption(item: MonitorInfo): ECOption {
   const times = item.data.map(data => formatTime(data.time))
   const delays = item.data.map(data => ({
     value: data.delay,
     itemStyle: {
-      color: getColor(data.delay)
+      color: getColor(data.delay, data.status)
     }
   }))
 
+  const maxDelay = item.data.reduce((max, data) => Math.max(max, data.delay), 0)
+  const yAxisMax = Math.max(1200, Math.ceil(maxDelay / 100) * 100)
+
   return {
     tooltip: {
       trigger: 'axis'
@@ -41,14 +75,14 @@ function getChartOption(item: MonitorInfo): ECOption {
       data: times
     },
     yAxis: {
-      max: 999,
+      max: yAxisMax,
       min: 0,
       type: 'value',
       show: false
     },
     series: [
       {
-        name: '延迟',
+        name: t('label.delay'),
         type: 'bar',
         data: delays,
         barWidth: '70%'
@@ -61,7 +95,22 @@ function getChartOption(item: MonitorInfo): ECOption {
 <template>
   <div class="flex w-full flex-col gap-4" ref="monitor">
     <template v-for="item in monitorData" :key="item.host">
-      <ACard :title="item.host">
+      <ACard
+        :title="item.host"
+        class="[&_.arco-card-body]:!p-0 [&_.arco-card-header]:items-center"
+      >
+        <template #extra>
+          <div
+            class="flex flex-nowrap items-center justify-end gap-2 whitespace-nowrap"
+          >
+            <ATag bordered :color="getDelayTagColor(item)"
+              >{{ getAverageDelay(item) }}ms</ATag
+            >
+            <ATag bordered :color="getSuccessRateTagColor(item)"
+              >{{ getSuccessRate(item).toFixed(1) }}%</ATag
+            >
+          </div>
+        </template>
         <VChart
           :autoresize="true"
           :option="getChartOption(item)"
@@ -71,9 +120,3 @@ function getChartOption(item: MonitorInfo): ECOption {
     </template>
   </div>
 </template>
-
-<style scoped>
-:deep(.arco-card-size-medium .arco-card-body) {
-  padding: 0px !important;
-}
-</style>

i18n/locales/en.json

@@ -66,12 +66,7 @@
     "download": "Download",
     "protocol": "Protocol",
     "submit": "Submit",
-    "rate": "Success Rate",
-    "delay": "Average Delay",
-    "total": "Total Requests",
-    "success-total": "Successes",
-    "fail-total": "Failures",
-    "updated-at": "Updated At"
+    "delay": "Delay"
   },
   "title": {
     "kms-check": "KMS Server Check",

i18n/locales/zh-cn.json

@@ -66,12 +66,7 @@
     "download": "下载",
     "protocol": "请求协议",
     "submit": "提交",
-    "rate": "成功率",
-    "delay": "平均延迟",
-    "total": "总请求",
-    "success-total": "成功数",
-    "fail-total": "失败数",
-    "updated-at": "更新时间"
+    "delay": "延迟"
   },
   "title": {
     "kms-check": "KMS 服务器检测",

server/api/monitor.ts

@@ -27,12 +27,12 @@ export default defineEventHandler(async () => {
   )
 
   // Sort by success rate and delay
-  const sortedData = results.sort((a, b) => {
-    const successRateA = a.success / a.total
-    const successRateB = b.success / b.total
+  // const sortedData = results.sort((a, b) => {
+  //   const successRateA = a.success / a.total
+  //   const successRateB = b.success / b.total
 
-    return successRateB - successRateA || a.delay - b.delay
-  })
+  //   return successRateB - successRateA || a.delay - b.delay
+  // })
 
   return results
 })

server/utils/kms.ts

@@ -12,7 +12,6 @@ const defaultMonitorList = [
   'kms.jihuowin.com',
   'kms.kuretru.com',
   'kms.litbear.cn',
-  'kms.loli.beer',
   'kms.loli.best',
   'kms.lolico.moe',
   'kms.mc06.net',