From 32d7c748353cf5a245353c9e0853fce7a5bda91f Mon Sep 17 00:00:00 2001
From: Akino <akinochen@foxmail.com>
Date: Thu, 10 Apr 2025 03:46:42 +0000
Subject: [PATCH] enhance: remove unused log and improve loading style

---
 api/nginx/status.go                           |  1 -
 app/src/composables/useNginxPerformance.ts    |  6 ++--
 app/src/composables/usePerformanceMetrics.ts  | 20 +++++------
 app/src/composables/useSSE.ts                 | 16 ++++-----
 app/src/views/dashboard/NginxDashBoard.vue    | 36 +++++++++----------
 .../components/ConnectionMetricsCard.vue      | 16 ++++-----
 .../components/PerformanceStatisticsCard.vue  | 12 +++----
 .../components/PerformanceTablesCard.vue      | 18 +++++-----
 .../components/ProcessDistributionCard.vue    |  4 +--
 .../components/ResourceUsageCard.vue          |  8 ++---
 10 files changed, 68 insertions(+), 69 deletions(-)

diff --git a/api/nginx/status.go b/api/nginx/status.go
index 0e70ca5c..19d4adcf 100644
--- a/api/nginx/status.go
+++ b/api/nginx/status.go
@@ -313,7 +313,6 @@ func getNginxProcessInfo() (map[string]interface{}, error) {
 				// 转换为 MB
 				memoryUsage := float64(mem.RSS) / 1024 / 1024
 				totalMemory += memoryUsage
-				logger.Debug("Master进程内存使用(MB):", memoryUsage)
 			}
 
 			break
diff --git a/app/src/composables/useNginxPerformance.ts b/app/src/composables/useNginxPerformance.ts
index b5b12581..53d5a8ec 100644
--- a/app/src/composables/useNginxPerformance.ts
+++ b/app/src/composables/useNginxPerformance.ts
@@ -8,17 +8,17 @@ export function useNginxPerformance() {
   const error = ref<string>('')
   const lastUpdateTime = ref(new Date())
 
-  // 更新刷新时间
+  // Update refresh time
   function updateLastUpdateTime() {
     lastUpdateTime.value = new Date()
   }
 
-  // 格式化上次更新时间
+  // Format the last update time
   const formattedUpdateTime = computed(() => {
     return lastUpdateTime.value.toLocaleTimeString()
   })
 
-  // 获取Nginx状态数据
+  // Get Nginx status data
   async function fetchInitialData() {
     loading.value = true
     error.value = ''
diff --git a/app/src/composables/usePerformanceMetrics.ts b/app/src/composables/usePerformanceMetrics.ts
index 0a05ca97..c10ae275 100644
--- a/app/src/composables/usePerformanceMetrics.ts
+++ b/app/src/composables/usePerformanceMetrics.ts
@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import { computed } from 'vue'
 
 export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | undefined>) {
-  // 格式化数值为可读性更好的形式
+  // Format numbers to a more readable form
   function formatNumber(num: number): string {
     if (num >= 1000000) {
       return `${(num / 1000000).toFixed(2)}M`
@@ -14,7 +14,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     return num.toString()
   }
 
-  // 活跃连接百分比
+  // Active connections percentage
   const activeConnectionsPercent = computed(() => {
     if (!nginxInfo.value) {
       return 0
@@ -23,7 +23,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     return Number(((nginxInfo.value.active / maxConnections) * 100).toFixed(2))
   })
 
-  // 工作进程使用百分比
+  // Worker processes usage percentage
   const workerProcessesPercent = computed(() => {
     if (!nginxInfo.value) {
       return 0
@@ -31,7 +31,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     return Number(((nginxInfo.value.workers / nginxInfo.value.worker_processes) * 100).toFixed(2))
   })
 
-  // 每连接请求数
+  // Requests per connection
   const requestsPerConnection = computed(() => {
     if (!nginxInfo.value || nginxInfo.value.handled === 0) {
       return 0
@@ -39,7 +39,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     return (nginxInfo.value.requests / nginxInfo.value.handled).toFixed(2)
   })
 
-  // 最大每秒请求数
+  // Maximum requests per second
   const maxRPS = computed(() => {
     if (!nginxInfo.value) {
       return 0
@@ -47,7 +47,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     return nginxInfo.value.worker_processes * nginxInfo.value.worker_connections
   })
 
-  // 进程构成数据
+  // Process composition data
   const processTypeData = computed(() => {
     if (!nginxInfo.value) {
       return []
@@ -61,7 +61,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     ]
   })
 
-  // 资源利用率
+  // Resource utilization
   const resourceUtilization = computed(() => {
     if (!nginxInfo.value) {
       return 0
@@ -74,7 +74,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     return Math.round((cpuFactor * 0.5 + connectionFactor * 0.5) * 100)
   })
 
-  // 表格数据
+  // Table data
   const statusData = computed(() => {
     if (!nginxInfo.value) {
       return []
@@ -119,7 +119,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     ]
   })
 
-  // 工作进程数据
+  // Worker processes data
   const workerData = computed(() => {
     if (!nginxInfo.value) {
       return []
@@ -159,7 +159,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
     ]
   })
 
-  // 配置数据
+  // Configuration data
   const configData = computed(() => {
     if (!nginxInfo.value) {
       return []
diff --git a/app/src/composables/useSSE.ts b/app/src/composables/useSSE.ts
index befc567f..9ad9a0dd 100644
--- a/app/src/composables/useSSE.ts
+++ b/app/src/composables/useSSE.ts
@@ -12,14 +12,14 @@ export interface SSEOptions {
 }
 
 /**
- * SSE 连接 Composable
- * 提供创建、管理和自动清理 SSE 连接的能力
+ * SSE Composable
+ * Provide the ability to create, manage, and automatically clean up SSE connections
  */
 export function useSSE() {
   const sseInstance = shallowRef<SSE>()
 
   /**
-   * 连接 SSE 服务
+   * Connect to SSE service
    */
   function connect(options: SSEOptions) {
     disconnect()
@@ -39,7 +39,7 @@ export function useSSE() {
       },
     })
 
-    // 处理消息
+    // Handle messages
     sse.onmessage = (e: SSEvent) => {
       if (!e.data) {
         return
@@ -54,11 +54,11 @@ export function useSSE() {
       }
     }
 
-    // 处理错误并重连
+    // Handle errors and reconnect
     sse.onerror = () => {
       onError?.()
 
-      // 重连逻辑
+      // Reconnect logic
       setTimeout(() => {
         connect(options)
       }, reconnectInterval)
@@ -69,7 +69,7 @@ export function useSSE() {
   }
 
   /**
-   * 断开 SSE 连接
+   * Disconnect SSE connection
    */
   function disconnect() {
     if (sseInstance.value) {
@@ -78,7 +78,7 @@ export function useSSE() {
     }
   }
 
-  // 组件卸载时自动断开连接
+  // Automatically disconnect when the component is unmounted
   onUnmounted(() => {
     disconnect()
   })
diff --git a/app/src/views/dashboard/NginxDashBoard.vue b/app/src/views/dashboard/NginxDashBoard.vue
index 55646cc5..650e61c4 100644
--- a/app/src/views/dashboard/NginxDashBoard.vue
+++ b/app/src/views/dashboard/NginxDashBoard.vue
@@ -12,12 +12,12 @@ import PerformanceTablesCard from './components/PerformanceTablesCard.vue'
 import ProcessDistributionCard from './components/ProcessDistributionCard.vue'
 import ResourceUsageCard from './components/ResourceUsageCard.vue'
 
-// 全局状态
+// Global state
 const global = useGlobalStore()
 const { nginxStatus: status } = storeToRefs(global)
 const { token } = storeToRefs(useUserStore())
 
-// 使用性能数据composable
+// Use performance data composable
 const {
   loading,
   nginxInfo,
@@ -27,10 +27,10 @@ const {
   fetchInitialData,
 } = useNginxPerformance()
 
-// SSE 连接
+// SSE connection
 const { connect, disconnect } = useSSE()
 
-// 连接SSE
+// Connect SSE
 function connectSSE() {
   disconnect()
   loading.value = true
@@ -52,7 +52,7 @@ function connectSSE() {
     onError: () => {
       error.value = $gettext('Connection error, trying to reconnect...')
 
-      // 如果连接失败，尝试使用传统方式获取数据
+      // If the connection fails, try to get data using the traditional method
       setTimeout(() => {
         fetchInitialData()
       }, 5000)
@@ -60,12 +60,12 @@ function connectSSE() {
   })
 }
 
-// 手动刷新数据
+// Manually refresh data
 function refreshData() {
   fetchInitialData().then(connectSSE)
 }
 
-// 组件挂载时初始化连接
+// Initialize connection when the component is mounted
 onMounted(() => {
   fetchInitialData().then(connectSSE)
 })
@@ -73,7 +73,7 @@ onMounted(() => {
 
 <template>
   <div>
-    <!-- 顶部操作栏 -->
+    <!-- Top operation bar -->
     <div class="mb-4 mx-6 md:mx-0 flex flex-wrap justify-between items-center">
       <div class="flex items-center">
         <ABadge :status="status === NginxStatus.Running ? 'success' : 'error'" />
@@ -90,7 +90,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <!-- Nginx 状态提示 -->
+    <!-- Nginx status prompt -->
     <AAlert
       v-if="status !== NginxStatus.Running"
       class="mb-4"
@@ -100,7 +100,7 @@ onMounted(() => {
       :description="$gettext('Cannot get performance data in this state')"
     />
 
-    <!-- 错误提示 -->
+    <!-- Error prompt -->
     <AAlert
       v-if="error"
       class="mb-4"
@@ -110,14 +110,14 @@ onMounted(() => {
       :description="error"
     />
 
-    <!-- 加载中状态 -->
+    <!-- Loading state -->
     <ASpin :spinning="loading" :tip="$gettext('Loading data...')">
-      <div v-if="!nginxInfo && !loading && !error" class="text-center py-8">
+      <div v-if="!nginxInfo && !error" class="text-center py-8">
         <AEmpty :description="$gettext('No data')" />
       </div>
 
       <div v-if="nginxInfo" class="performance-dashboard">
-        <!-- 顶部性能指标卡片 -->
+        <!-- Top performance metrics card -->
         <ARow :gutter="[16, 16]" class="mb-4">
           <ACol :span="24">
             <ACard :title="$gettext('Performance Metrics')" :bordered="false">
@@ -126,22 +126,22 @@ onMounted(() => {
           </ACol>
         </ARow>
 
-        <!-- 指标卡片 -->
+        <!-- Metrics card -->
         <ConnectionMetricsCard :nginx-info="nginxInfo" class="mb-4" />
 
-        <!-- 资源监控 -->
+        <!-- Resource monitoring -->
         <ARow :gutter="[16, 16]" class="mb-4">
-          <!-- CPU和内存使用 -->
+          <!-- CPU and memory usage -->
           <ACol :xs="24" :md="12">
             <ResourceUsageCard :nginx-info="nginxInfo" />
           </ACol>
-          <!-- 进程分布 -->
+          <!-- Process distribution -->
           <ACol :xs="24" :md="12">
             <ProcessDistributionCard :nginx-info="nginxInfo" />
           </ACol>
         </ARow>
 
-        <!-- 性能指标表格 -->
+        <!-- Performance metrics table -->
         <ARow :gutter="[16, 16]" class="mb-4">
           <ACol :span="24">
             <PerformanceTablesCard :nginx-info="nginxInfo" />
diff --git a/app/src/views/dashboard/components/ConnectionMetricsCard.vue b/app/src/views/dashboard/components/ConnectionMetricsCard.vue
index 49be3664..7b00c958 100644
--- a/app/src/views/dashboard/components/ConnectionMetricsCard.vue
+++ b/app/src/views/dashboard/components/ConnectionMetricsCard.vue
@@ -7,18 +7,18 @@ const props = defineProps<{
   nginxInfo: NginxPerformanceInfo
 }>()
 
-// 活跃连接百分比
+// Active connections percentage
 const activeConnectionsPercent = computed(() => {
   const maxConnections = props.nginxInfo.worker_connections * props.nginxInfo.worker_processes
   return Number(((props.nginxInfo.active / maxConnections) * 100).toFixed(2))
 })
 
-// 工作进程使用百分比
+// Worker processes usage percentage
 const workerProcessesPercent = computed(() => {
   return Number(((props.nginxInfo.workers / props.nginxInfo.worker_processes) * 100).toFixed(2))
 })
 
-// 每连接请求数
+// Requests per connection
 const requestsPerConnection = computed(() => {
   if (props.nginxInfo.handled === 0) {
     return '0'
@@ -26,7 +26,7 @@ const requestsPerConnection = computed(() => {
   return (props.nginxInfo.requests / props.nginxInfo.handled).toFixed(2)
 })
 
-// 格式化数值
+// Format numbers
 function formatNumber(num: number): string {
   if (num >= 1000000) {
     return `${(num / 1000000).toFixed(2)}M`
@@ -40,7 +40,7 @@ function formatNumber(num: number): string {
 
 <template>
   <ARow :gutter="[16, 16]">
-    <!-- 当前活跃连接 -->
+    <!-- Current active connections -->
     <ACol :xs="24" :sm="12" :md="12" :lg="6">
       <ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }">
         <div class="flex flex-col h-full">
@@ -61,7 +61,7 @@ function formatNumber(num: number): string {
       </ACard>
     </ACol>
 
-    <!-- 工作进程 -->
+    <!-- Worker processes -->
     <ACol :xs="24" :sm="12" :md="12" :lg="6">
       <ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }">
         <div class="flex flex-col h-full">
@@ -87,7 +87,7 @@ function formatNumber(num: number): string {
       </ACard>
     </ACol>
 
-    <!-- 每连接请求数 -->
+    <!-- Requests per connection -->
     <ACol :xs="24" :sm="12" :md="12" :lg="6">
       <ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }">
         <div class="flex flex-col h-full justify-between">
@@ -114,7 +114,7 @@ function formatNumber(num: number): string {
       </ACard>
     </ACol>
 
-    <!-- 资源利用率 -->
+    <!-- Resource utilization -->
     <ACol :xs="24" :sm="12" :md="12" :lg="6">
       <ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }">
         <div class="flex flex-col h-full justify-between">
diff --git a/app/src/views/dashboard/components/PerformanceStatisticsCard.vue b/app/src/views/dashboard/components/PerformanceStatisticsCard.vue
index 735d559f..3c04f5a5 100644
--- a/app/src/views/dashboard/components/PerformanceStatisticsCard.vue
+++ b/app/src/views/dashboard/components/PerformanceStatisticsCard.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
   nginxInfo: NginxPerformanceInfo
 }>()
 
-// 计算连接效率 - 每连接的请求数
+// Calculate connection efficiency - requests per connection
 const requestsPerConnection = computed(() => {
   if (props.nginxInfo.handled === 0) {
     return '0'
@@ -21,7 +21,7 @@ const requestsPerConnection = computed(() => {
   return (props.nginxInfo.requests / props.nginxInfo.handled).toFixed(2)
 })
 
-// 估算最大每秒请求数
+// Estimate maximum requests per second
 const maxRPS = computed(() => {
   return props.nginxInfo.worker_processes * props.nginxInfo.worker_connections
 })
@@ -29,7 +29,7 @@ const maxRPS = computed(() => {
 
 <template>
   <ARow :gutter="[16, 24]">
-    <!-- 最大RPS -->
+    <!-- Maximum RPS -->
     <ACol :xs="24" :sm="12" :md="8" :lg="6">
       <AStatistic
         :value="maxRPS"
@@ -50,7 +50,7 @@ const maxRPS = computed(() => {
       </div>
     </ACol>
 
-    <!-- 最大并发连接 -->
+    <!-- Maximum concurrent connections -->
     <ACol :xs="24" :sm="12" :md="8" :lg="6">
       <AStatistic
         :title="$gettext('Max Concurrent Connections')"
@@ -66,7 +66,7 @@ const maxRPS = computed(() => {
       </div>
     </ACol>
 
-    <!-- 每连接请求数 -->
+    <!-- Requests per connection -->
     <ACol :xs="24" :sm="12" :md="8" :lg="6">
       <AStatistic
         :title="$gettext('Requests Per Connection')"
@@ -83,7 +83,7 @@ const maxRPS = computed(() => {
       </div>
     </ACol>
 
-    <!-- Nginx进程总数 -->
+    <!-- Total Nginx processes -->
     <ACol :xs="24" :sm="12" :md="8" :lg="6">
       <AStatistic
         :title="$gettext('Total Nginx Processes')"
diff --git a/app/src/views/dashboard/components/PerformanceTablesCard.vue b/app/src/views/dashboard/components/PerformanceTablesCard.vue
index 44f3606c..7c94e8f4 100644
--- a/app/src/views/dashboard/components/PerformanceTablesCard.vue
+++ b/app/src/views/dashboard/components/PerformanceTablesCard.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 
 const activeTabKey = ref('status')
 
-// 表格列定义
+// Table column definition
 const columns: TableColumnType[] = [
   {
     title: $gettext('Indicator'),
@@ -25,7 +25,7 @@ const columns: TableColumnType[] = [
   },
 ]
 
-// 格式化数值
+// Format numbers
 function formatNumber(num: number): string {
   if (num >= 1000000) {
     return `${(num / 1000000).toFixed(2)}M`
@@ -36,7 +36,7 @@ function formatNumber(num: number): string {
   return num.toString()
 }
 
-// 状态数据
+// Status data
 const statusData = computed(() => {
   return [
     {
@@ -77,7 +77,7 @@ const statusData = computed(() => {
   ]
 })
 
-// 工作进程数据
+// Worker processes data
 const workerData = computed(() => {
   return [
     {
@@ -113,7 +113,7 @@ const workerData = computed(() => {
   ]
 })
 
-// 配置数据
+// Configuration data
 const configData = computed(() => {
   return [
     {
@@ -129,7 +129,7 @@ const configData = computed(() => {
   ]
 })
 
-// 最大每秒请求数
+// Maximum requests per second
 const maxRPS = computed(() => {
   return props.nginxInfo.worker_processes * props.nginxInfo.worker_connections
 })
@@ -138,7 +138,7 @@ const maxRPS = computed(() => {
 <template>
   <ACard :bordered="false">
     <ATabs v-model:active-key="activeTabKey">
-      <!-- 请求统计 -->
+      <!-- Request statistics -->
       <ATabPane key="status" :tab="$gettext('Request statistics')">
         <div class="overflow-x-auto">
           <ATable
@@ -151,7 +151,7 @@ const maxRPS = computed(() => {
         </div>
       </ATabPane>
 
-      <!-- 进程信息 -->
+      <!-- Process information -->
       <ATabPane key="workers" :tab="$gettext('Process information')">
         <div class="overflow-x-auto">
           <ATable
@@ -164,7 +164,7 @@ const maxRPS = computed(() => {
         </div>
       </ATabPane>
 
-      <!-- 配置信息 -->
+      <!-- Configuration information -->
       <ATabPane key="config" :tab="$gettext('Configuration information')">
         <div class="overflow-x-auto">
           <ATable
diff --git a/app/src/views/dashboard/components/ProcessDistributionCard.vue b/app/src/views/dashboard/components/ProcessDistributionCard.vue
index b225c3d4..78a209d1 100644
--- a/app/src/views/dashboard/components/ProcessDistributionCard.vue
+++ b/app/src/views/dashboard/components/ProcessDistributionCard.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
   nginxInfo: NginxPerformanceInfo
 }>()
 
-// 进程构成数据
+// Process composition data
 const processTypeData = computed(() => {
   return [
     { type: $gettext('Worker Processes'), value: props.nginxInfo.workers, color: '#1890ff' },
@@ -16,7 +16,7 @@ const processTypeData = computed(() => {
   ]
 })
 
-// 总进程数
+// Total processes
 const totalProcesses = computed(() => {
   return props.nginxInfo.workers + props.nginxInfo.master + props.nginxInfo.cache + props.nginxInfo.other
 })
diff --git a/app/src/views/dashboard/components/ResourceUsageCard.vue b/app/src/views/dashboard/components/ResourceUsageCard.vue
index 63f222f7..ff959837 100644
--- a/app/src/views/dashboard/components/ResourceUsageCard.vue
+++ b/app/src/views/dashboard/components/ResourceUsageCard.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   nginxInfo: NginxPerformanceInfo
 }>()
 
-// 资源利用率
+// Resource utilization
 const resourceUtilization = computed(() => {
   const cpuFactor = Math.min(props.nginxInfo.cpu_usage / 100, 1)
   const maxConnections = props.nginxInfo.worker_connections * props.nginxInfo.worker_processes
@@ -24,7 +24,7 @@ const resourceUtilization = computed(() => {
 <template>
   <ACard :title="$gettext('Resource Usage of Nginx')" :bordered="false" class="h-full" :body-style="{ padding: '16px', height: 'calc(100% - 58px)' }">
     <div class="flex flex-col h-full">
-      <!-- CPU使用率 -->
+      <!-- CPU usage -->
       <ARow :gutter="[16, 8]" class="mb-2">
         <ACol :span="24">
           <div class="flex items-center">
@@ -47,7 +47,7 @@ const resourceUtilization = computed(() => {
         </ACol>
       </ARow>
 
-      <!-- 内存使用 -->
+      <!-- Memory usage -->
       <ARow :gutter="[16, 8]" class="mb-2">
         <ACol :span="24">
           <div class="flex items-center">
@@ -68,7 +68,7 @@ const resourceUtilization = computed(() => {
         {{ $gettext('Per worker memory') }}: {{ (nginxInfo.memory_usage / (nginxInfo.workers || 1)).toFixed(2) }} MB
       </div>
 
-      <!-- 系统负载 -->
+      <!-- System load -->
       <div class="mt-4 text-xs text-gray-500 border-t border-gray-100 pt-2">
         <div class="flex justify-between mb-1">
           <span>{{ $gettext('System load') }}</span>