From e48f8f5fc0ec2d37099be34ce78bebfb4c36ffa6 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Wed, 4 Oct 2023 00:49:54 +0800
Subject: [PATCH] feat: online / offline badge and reporter ticker

---
 reporter/main.go             |  3 ++-
 src/client/pages/Servers.tsx | 10 ++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/reporter/main.go b/reporter/main.go
index da9197e..1d1d8e7 100644
--- a/reporter/main.go
+++ b/reporter/main.go
@@ -57,7 +57,6 @@ func main() {
 	ticker := time.Tick(time.Duration(interval) * time.Second)
 
 	for {
-		<-ticker
 		log.Println("Send report data to:", parsedURL.String())
 		sendUDPTestPack(*parsedURL, ReportData{
 			WorkspaceId: *WorkspaceId,
@@ -66,6 +65,8 @@ func main() {
 			Timeout:     interval * 2,
 			Payload:     utils.GetReportDataPaylod(interval, *IsVnstat),
 		})
+
+		<-ticker
 	}
 }
 
diff --git a/src/client/pages/Servers.tsx b/src/client/pages/Servers.tsx
index 020ca12..5aef4c7 100644
--- a/src/client/pages/Servers.tsx
+++ b/src/client/pages/Servers.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { Button, Form, Input, Modal, Table } from 'antd';
+import { Badge, Button, Form, Input, Modal, Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { PlusOutlined } from '@ant-design/icons';
 import { ServerStatusInfo } from '../../types';
@@ -67,9 +67,11 @@ export const ServerList: React.FC = React.memo(() => {
         key: 'status',
         title: 'Status',
         render: (val, record) => {
-          return Date.now() - (record.updatedAt + record.timeout) < 0
-            ? 'online'
-            : 'offline';
+          return Date.now() - (record.updatedAt + record.timeout) < 0 ? (
+            <Badge status="success" text="online" />
+          ) : (
+            <Badge status="error" text="offline" />
+          );
         },
       },
       {