mirror of
https://github.com/0xJacky/nginx-ui.git
synced 2025-05-11 02:15:48 +02:00
enhance: remove unused log and improve loading style
This commit is contained in:
Akino
parent
9f0107eeed
commit
32d7c74835
10 changed files with 68 additions and 69 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 = ''
|
||||
|
|
|
|||
|
|
@ -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 []
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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')"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue