server: replace client metadata with IP address in registry (#5118)

web/frps/src/components/ClientCard.vue

@@ -17,6 +17,12 @@
         <span class="info-value">{{ client.hostname || 'N/A' }}</span>
       </div>
 
+      <div class="info-row" v-if="client.ip">
+        <el-icon class="info-icon"><Connection /></el-icon>
+        <span class="info-label">IP:</span>
+        <span class="info-value monospace">{{ client.ip }}</span>
+      </div>
+
       <div class="info-row" v-if="client.user">
         <el-icon class="info-icon"><User /></el-icon>
         <span class="info-label">User:</span>
@@ -26,7 +32,7 @@
       <div class="info-row">
         <el-icon class="info-icon"><Key /></el-icon>
         <span class="info-label">Run ID:</span>
-        <span class="info-value monospace">{{ client.runId }}</span>
+        <span class="info-value monospace">{{ client.runID }}</span>
       </div>
 
       <div class="info-row" v-if="client.firstConnectedAt">
@@ -48,26 +54,12 @@
       </div>
     </div>
 
-    <div class="client-metas" v-if="client.metasArray.length > 0">
-      <div class="metas-label">Metadata:</div>
-      <div class="metas-tags">
-        <el-tag
-          v-for="meta in client.metasArray"
-          :key="meta.key"
-          size="small"
-          type="info"
-          class="meta-tag"
-        >
-          {{ meta.key }}: {{ meta.value }}
-        </el-tag>
-      </div>
-    </div>
   </el-card>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Monitor, User, Key, Clock, CircleClose } from '@element-plus/icons-vue'
+import { Monitor, User, Key, Clock, CircleClose, Connection } from '@element-plus/icons-vue'
 import type { Client } from '../utils/client'
 
 interface Props {
@@ -190,37 +182,6 @@ html.dark .info-value {
   color: #d1d5db;
 }
 
-.client-metas {
-  margin-bottom: 16px;
-  padding-top: 12px;
-  border-top: 1px solid #e4e7ed;
-}
-
-html.dark .client-metas {
-  border-top-color: #3a3d5c;
-}
-
-.metas-label {
-  font-size: 13px;
-  color: #909399;
-  font-weight: 500;
-  margin-bottom: 8px;
-}
-
-html.dark .metas-label {
-  color: #9ca3af;
-}
-
-.metas-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.meta-tag {
-  font-size: 12px;
-}
-
 .monospace {
   font-family: 'Courier New', Courier, monospace;
   font-size: 12px;

web/frps/src/types/client.ts

@@ -1,9 +1,10 @@
 export interface ClientInfoData {
   key: string
   user: string
-  clientId: string
-  runId: string
+  clientID: string
+  runID: string
   hostname: string
+  clientIP?: string
   metas?: Record<string, string>
   firstConnectedAt: number
   lastConnectedAt: number

web/frps/src/utils/client.ts

@@ -4,9 +4,10 @@ import type { ClientInfoData } from '../types/client'
 export class Client {
   key: string
   user: string
-  clientId: string
-  runId: string
+  clientID: string
+  runID: string
   hostname: string
+  ip: string
   metas: Map<string, string>
   firstConnectedAt: Date
   lastConnectedAt: Date
@@ -16,9 +17,10 @@ export class Client {
   constructor(data: ClientInfoData) {
     this.key = data.key
     this.user = data.user
-    this.clientId = data.clientId
-    this.runId = data.runId
+    this.clientID = data.clientID
+    this.runID = data.runID
     this.hostname = data.hostname
+    this.ip = data.clientIP || ''
     this.metas = new Map<string, string>()
     if (data.metas) {
       for (const [key, value] of Object.entries(data.metas)) {
@@ -34,14 +36,14 @@ export class Client {
   }
 
   get displayName(): string {
-    if (this.clientId) {
-      return this.user ? `${this.user}.${this.clientId}` : this.clientId
+    if (this.clientID) {
+      return this.user ? `${this.user}.${this.clientID}` : this.clientID
     }
-    return this.runId
+    return this.runID
   }
 
   get shortRunId(): string {
-    return this.runId.substring(0, 8)
+    return this.runID.substring(0, 8)
   }
 
   get firstConnectedAgo(): string {
@@ -74,8 +76,8 @@ export class Client {
     return (
       this.key.toLowerCase().includes(search) ||
       this.user.toLowerCase().includes(search) ||
-      this.clientId.toLowerCase().includes(search) ||
-      this.runId.toLowerCase().includes(search) ||
+      this.clientID.toLowerCase().includes(search) ||
+      this.runID.toLowerCase().includes(search) ||
       this.hostname.toLowerCase().includes(search)
     )
   }