refactor: optimize kms monitor page charts

Author: ikxin

app/pages/monitor.vue

@@ -6,6 +6,7 @@ definePageMeta({
 const monitorData = useState<MonitorInfo[]>('monitorData')
 
 function getColor(value: number): string {
+  if (value < 0) return '#d9d9d9'
   if (value < 200) return '#52c41a'
   if (value < 500) return '#faad14'
   return '#f5222d'
@@ -29,17 +30,19 @@ function getChartOption(item: MonitorInfo): ECOption {
       trigger: 'axis',
     },
     grid: {
+      containLabel: true,
       left: 0,
-      right: 16,
+      right: 24,
       top: 8,
       bottom: 8,
-      containLabel: true,
     },
     xAxis: {
       type: 'category',
       data: times,
     },
     yAxis: {
+      max: 999,
+      min: 0,
       type: 'value',
       show: false,
     },
@@ -56,10 +59,14 @@ function getChartOption(item: MonitorInfo): ECOption {
 </script>
 
 <template>
-  <div class="flex w-full flex-col gap-4">
+  <div class="flex w-full flex-col gap-4" ref="monitor">
     <template v-for="item in monitorData" :key="item.host">
       <ACard :title="item.host">
-        <VChart :option="getChartOption(item)" class="h-24 w-full" />
+        <VChart
+          :autoresize="true"
+          :option="getChartOption(item)"
+          class="h-32 w-full"
+        />
       </ACard>
     </template>
   </div>

server/api/monitor.ts

@@ -1,19 +1,19 @@
 export default defineEventHandler(async () => {
   const results = await Promise.all(
-    monitorList.map(async (host) => {
-      let data = await storage.getItem<MonitorData[]>(`${host}.json`);
+    monitorList.map(async host => {
+      let data = await storage.getItem<MonitorData[]>(`${host}.json`)
 
       if (!Array.isArray(data)) {
-        data = [];
+        data = []
       }
 
-      const total = data.length;
+      const total = data.length
 
-      const success = data.filter(({ status }) => status).length;
+      const success = data.filter(({ status }) => status).length
 
-      const fail = total - success;
+      const fail = total - success
 
-      const delay = data.reduce((acc, { delay }) => acc + delay, 0) / total;
+      const delay = data.reduce((acc, { delay }) => acc + delay, 0) / total
 
       return {
         host,
@@ -22,16 +22,17 @@ export default defineEventHandler(async () => {
         fail,
         delay: delay ? Number(delay.toFixed(2)) : 0,
         data,
-      };
-    })
-  );
+      }
+    }),
+  )
 
+  // 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 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 sortedData;
-});
+  return results
+})

server/tasks/monitor.ts

@@ -12,7 +12,7 @@ export default defineTask({
           monitorData = []
         }
 
-        if (monitorData.length >= 100) {
+        if (monitorData.length >= 120) {
           monitorData.shift()
         }
 
@@ -27,7 +27,7 @@ export default defineTask({
         await storage.setItem<MonitorData[]>(`${host}.json`, monitorData)
 
         return { host, status }
-      })
+      }),
     )
 
     const count = results.filter(item => {
@@ -39,7 +39,7 @@ export default defineTask({
 
     console.log(
       new Date().toISOString(),
-      `Monitor task completed, successful: ${count}`
+      `Monitor task completed, successful: ${count}`,
     )
 
     return { result: 'Done' }

server/utils/kms.ts

@@ -1,16 +1,26 @@
-import { execFile } from "child_process";
-import { arch, platform } from "os";
+import { execFile } from 'child_process'
+import { arch, platform } from 'os'
 
-export const monitorList = process.env.MONITOR_LIST?.split(",") || [
-  "kms.8b5.cn",
-  "kms.wxlost.com",
-  "kms.03k.org",
-  "kms.sixyin.com",
-  "kms.343.re",
-  "kms.vmem.top",
-  "kms.zhi.fun",
-  "kms.loli.best",
-];
+export const monitorList = process.env.MONITOR_LIST?.split(',') || [
+  'kms.8b5.cn',
+  'kms.org.cn',
+  'win.freekms.cn',
+  'kms.akams.cn',
+  'kms.bige0.com',
+  'win.kms.pub',
+  'windows.kms.app',
+  'kms.zhi.fun',
+  'kms.03k.org',
+  'kms.chs.ink',
+  'kms.cgtsoft.com',
+  'kms.loli.best',
+  'kms.litbear.cn',
+  'kms.343.re',
+  'kms.sixyin.com',
+  'kms.vmem.top',
+  'kms.wxlost.com',
+  'kms.digiboy.ir',
+]
 
 export const runVlmcs = ({
   host,
@@ -19,28 +29,28 @@ export const runVlmcs = ({
   edition = 26,
 }: RunVlmcsParams) => {
   return new Promise<RunVlmcsResult>((resolve, reject) => {
-    const before = Date.now();
+    const before = Date.now()
     const vlmcs = execFile(
       `./binaries/vlmcs-${platform()}-${arch()}`,
       [`${host}:${port}`, `-${protocol}`, `-l ${edition}`],
-      { timeout: 10 * 1000 },
+      { timeout: 5 * 1000 },
       (err, stdout) => {
         resolve({
           host,
-          delay: Date.now() - before,
+          delay: err ? -1 : Date.now() - before,
           content: stdout.trim(),
           status: err ? false : true,
-        });
-      }
-    );
+        })
+      },
+    )
 
-    vlmcs.on("error", (err) => {
-      reject(err);
-    });
+    vlmcs.on('error', err => {
+      reject(err)
+    })
 
-    vlmcs.on("close", () => {
-      vlmcs.removeAllListeners();
-      vlmcs.kill();
-    });
-  });
-};
+    vlmcs.on('close', () => {
+      vlmcs.removeAllListeners()
+      vlmcs.kill()
+    })
+  })
+}