mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-11 02:15:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

enhance: remove unused log and improve loading style

Browse source
This commit is contained in:
Akino 2025-04-10 03:46:42 +00:00
parent 9f0107eeed
commit 32d7c74835
No known key found for this signature in database
GPG key ID: FB2F74D193A40907
10 changed files with 68 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

1
api/nginx/status.go
View file

@ -313,7 +313,6 @@ func getNginxProcessInfo() (map[string]interface{}, error) {
// 转换为 MB // 转换为 MB
memoryUsage := float64(mem.RSS) / 1024 / 1024 memoryUsage := float64(mem.RSS) / 1024 / 1024
totalMemory += memoryUsage totalMemory += memoryUsage
logger.Debug("Master进程内存使用(MB):", memoryUsage)
} }
break break

6
app/src/composables/useNginxPerformance.ts
View file

@ -8,17 +8,17 @@ export function useNginxPerformance() {
const error = ref<string>('') const error = ref<string>('')
const lastUpdateTime = ref(new Date()) const lastUpdateTime = ref(new Date())
// 更新刷新时间 // Update refresh time
function updateLastUpdateTime() { function updateLastUpdateTime() {
lastUpdateTime.value = new Date() lastUpdateTime.value = new Date()
} }
// 格式化上次更新时间 // Format the last update time
const formattedUpdateTime = computed(() => { const formattedUpdateTime = computed(() => {
return lastUpdateTime.value.toLocaleTimeString() return lastUpdateTime.value.toLocaleTimeString()
}) })
// 获取Nginx状态数据 // Get Nginx status data
async function fetchInitialData() { async function fetchInitialData() {
loading.value = true loading.value = true
error.value = '' error.value = ''

20
app/src/composables/usePerformanceMetrics.ts
View file

@ -3,7 +3,7 @@ import type { Ref } from 'vue'
import { computed } from 'vue' import { computed } from 'vue'
export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | undefined>) { export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | undefined>) {
// 格式化数值为可读性更好的形式 // Format numbers to a more readable form
function formatNumber(num: number): string { function formatNumber(num: number): string {
if (num >= 1000000) { if (num >= 1000000) {
return `${(num / 1000000).toFixed(2)}M` return `${(num / 1000000).toFixed(2)}M`
@ -14,7 +14,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
return num.toString() return num.toString()
} }
// 活跃连接百分比 // Active connections percentage
const activeConnectionsPercent = computed(() => { const activeConnectionsPercent = computed(() => {
if (!nginxInfo.value) { if (!nginxInfo.value) {
return 0 return 0
@ -23,7 +23,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
return Number(((nginxInfo.value.active / maxConnections) * 100).toFixed(2)) return Number(((nginxInfo.value.active / maxConnections) * 100).toFixed(2))
}) })
// 工作进程使用百分比 // Worker processes usage percentage
const workerProcessesPercent = computed(() => { const workerProcessesPercent = computed(() => {
if (!nginxInfo.value) { if (!nginxInfo.value) {
return 0 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)) return Number(((nginxInfo.value.workers / nginxInfo.value.worker_processes) * 100).toFixed(2))
}) })
// 每连接请求数 // Requests per connection
const requestsPerConnection = computed(() => { const requestsPerConnection = computed(() => {
if (!nginxInfo.value || nginxInfo.value.handled === 0) { if (!nginxInfo.value || nginxInfo.value.handled === 0) {
return 0 return 0
@ -39,7 +39,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
return (nginxInfo.value.requests / nginxInfo.value.handled).toFixed(2) return (nginxInfo.value.requests / nginxInfo.value.handled).toFixed(2)
}) })
// 最大每秒请求数 // Maximum requests per second
const maxRPS = computed(() => { const maxRPS = computed(() => {
if (!nginxInfo.value) { if (!nginxInfo.value) {
return 0 return 0
@ -47,7 +47,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
return nginxInfo.value.worker_processes * nginxInfo.value.worker_connections return nginxInfo.value.worker_processes * nginxInfo.value.worker_connections
}) })
// 进程构成数据 // Process composition data
const processTypeData = computed(() => { const processTypeData = computed(() => {
if (!nginxInfo.value) { if (!nginxInfo.value) {
return [] return []
@ -61,7 +61,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
] ]
}) })
// 资源利用率 // Resource utilization
const resourceUtilization = computed(() => { const resourceUtilization = computed(() => {
if (!nginxInfo.value) { if (!nginxInfo.value) {
return 0 return 0
@ -74,7 +74,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
return Math.round((cpuFactor * 0.5 + connectionFactor * 0.5) * 100) return Math.round((cpuFactor * 0.5 + connectionFactor * 0.5) * 100)
}) })
// 表格数据 // Table data
const statusData = computed(() => { const statusData = computed(() => {
if (!nginxInfo.value) { if (!nginxInfo.value) {
return [] return []
@ -119,7 +119,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
] ]
}) })
// 工作进程数据 // Worker processes data
const workerData = computed(() => { const workerData = computed(() => {
if (!nginxInfo.value) { if (!nginxInfo.value) {
return [] return []
@ -159,7 +159,7 @@ export function usePerformanceMetrics(nginxInfo: Ref<NginxPerformanceInfo | unde
] ]
}) })
// 配置数据 // Configuration data
const configData = computed(() => { const configData = computed(() => {
if (!nginxInfo.value) { if (!nginxInfo.value) {
return [] return []

16
app/src/composables/useSSE.ts
View file

@ -12,14 +12,14 @@ export interface SSEOptions {
} }
/** /**
* SSE 连接 Composable * SSE Composable
* 提供创建、管理和自动清理 SSE 连接的能力 * Provide the ability to create, manage, and automatically clean up SSE connections
*/ */
export function useSSE() { export function useSSE() {
const sseInstance = shallowRef<SSE>() const sseInstance = shallowRef<SSE>()
/** /**
* 连接 SSE 服务 * Connect to SSE service
*/ */
function connect(options: SSEOptions) { function connect(options: SSEOptions) {
disconnect() disconnect()
@ -39,7 +39,7 @@ export function useSSE() {
}, },
}) })
// 处理消息 // Handle messages
sse.onmessage = (e: SSEvent) => { sse.onmessage = (e: SSEvent) => {
if (!e.data) { if (!e.data) {
return return
@ -54,11 +54,11 @@ export function useSSE() {
} }
} }
// 处理错误并重连 // Handle errors and reconnect
sse.onerror = () => { sse.onerror = () => {
onError?.() onError?.()
// 重连逻辑 // Reconnect logic
setTimeout(() => { setTimeout(() => {
connect(options) connect(options)
}, reconnectInterval) }, reconnectInterval)
@ -69,7 +69,7 @@ export function useSSE() {
} }
/** /**
* 断开 SSE 连接 * Disconnect SSE connection
*/ */
function disconnect() { function disconnect() {
if (sseInstance.value) { if (sseInstance.value) {
@ -78,7 +78,7 @@ export function useSSE() {
} }
} }
// 组件卸载时自动断开连接 // Automatically disconnect when the component is unmounted
onUnmounted(() => { onUnmounted(() => {
disconnect() disconnect()
}) })

36
app/src/views/dashboard/NginxDashBoard.vue
View file

@ -12,12 +12,12 @@ import PerformanceTablesCard from './components/PerformanceTablesCard.vue'
import ProcessDistributionCard from './components/ProcessDistributionCard.vue' import ProcessDistributionCard from './components/ProcessDistributionCard.vue'
import ResourceUsageCard from './components/ResourceUsageCard.vue' import ResourceUsageCard from './components/ResourceUsageCard.vue'
// 全局状态 // Global state
const global = useGlobalStore() const global = useGlobalStore()
const { nginxStatus: status } = storeToRefs(global) const { nginxStatus: status } = storeToRefs(global)
const { token } = storeToRefs(useUserStore()) const { token } = storeToRefs(useUserStore())
// 使用性能数据composable // Use performance data composable
const { const {
loading, loading,
nginxInfo, nginxInfo,
@ -27,10 +27,10 @@ const {
fetchInitialData, fetchInitialData,
} = useNginxPerformance() } = useNginxPerformance()
// SSE 连接 // SSE connection
const { connect, disconnect } = useSSE() const { connect, disconnect } = useSSE()
// 连接SSE // Connect SSE
function connectSSE() { function connectSSE() {
disconnect() disconnect()
loading.value = true loading.value = true
@ -52,7 +52,7 @@ function connectSSE() {
onError: () => { onError: () => {
error.value = $gettext('Connection error, trying to reconnect...') error.value = $gettext('Connection error, trying to reconnect...')
// 如果连接失败，尝试使用传统方式获取数据 // If the connection fails, try to get data using the traditional method
setTimeout(() => { setTimeout(() => {
fetchInitialData() fetchInitialData()
}, 5000) }, 5000)
@ -60,12 +60,12 @@ function connectSSE() {
}) })
} }
// 手动刷新数据 // Manually refresh data
function refreshData() { function refreshData() {
fetchInitialData().then(connectSSE) fetchInitialData().then(connectSSE)
} }
// 组件挂载时初始化连接 // Initialize connection when the component is mounted
onMounted(() => { onMounted(() => {
fetchInitialData().then(connectSSE) fetchInitialData().then(connectSSE)
}) })
@ -73,7 +73,7 @@ onMounted(() => {
<template> <template>
<div> <div>
<!-- 顶部操作栏 --> <!-- Top operation bar -->
<div class="mb-4 mx-6 md:mx-0 flex flex-wrap justify-between items-center"> <div class="mb-4 mx-6 md:mx-0 flex flex-wrap justify-between items-center">
<div class="flex items-center"> <div class="flex items-center">
<ABadge :status="status === NginxStatus.Running ? 'success' : 'error'" /> <ABadge :status="status === NginxStatus.Running ? 'success' : 'error'" />
@ -90,7 +90,7 @@ onMounted(() => {
</div> </div>
</div> </div>
<!-- Nginx 状态提示 --> <!-- Nginx status prompt -->
<AAlert <AAlert
v-if="status !== NginxStatus.Running" v-if="status !== NginxStatus.Running"
class="mb-4" class="mb-4"
@ -100,7 +100,7 @@ onMounted(() => {
:description="$gettext('Cannot get performance data in this state')" :description="$gettext('Cannot get performance data in this state')"
/> />
<!-- 错误提示 --> <!-- Error prompt -->
<AAlert <AAlert
v-if="error" v-if="error"
class="mb-4" class="mb-4"
@ -110,14 +110,14 @@ onMounted(() => {
:description="error" :description="error"
/> />
<!-- 加载中状态 --> <!-- Loading state -->
<ASpin :spinning="loading" :tip="$gettext('Loading data...')"> <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')" /> <AEmpty :description="$gettext('No data')" />
</div> </div>
<div v-if="nginxInfo" class="performance-dashboard"> <div v-if="nginxInfo" class="performance-dashboard">
<!-- 顶部性能指标卡片 --> <!-- Top performance metrics card -->
<ARow :gutter="[16, 16]" class="mb-4"> <ARow :gutter="[16, 16]" class="mb-4">
<ACol :span="24"> <ACol :span="24">
<ACard :title="$gettext('Performance Metrics')" :bordered="false"> <ACard :title="$gettext('Performance Metrics')" :bordered="false">
@ -126,22 +126,22 @@ onMounted(() => {
</ACol> </ACol>
</ARow> </ARow>
<!-- 指标卡片 --> <!-- Metrics card -->
<ConnectionMetricsCard :nginx-info="nginxInfo" class="mb-4" /> <ConnectionMetricsCard :nginx-info="nginxInfo" class="mb-4" />
<!-- 资源监控 --> <!-- Resource monitoring -->
<ARow :gutter="[16, 16]" class="mb-4"> <ARow :gutter="[16, 16]" class="mb-4">
<!-- CPU和内存使用 --> <!-- CPU and memory usage -->
<ACol :xs="24" :md="12"> <ACol :xs="24" :md="12">
<ResourceUsageCard :nginx-info="nginxInfo" /> <ResourceUsageCard :nginx-info="nginxInfo" />
</ACol> </ACol>
<!-- 进程分布 --> <!-- Process distribution -->
<ACol :xs="24" :md="12"> <ACol :xs="24" :md="12">
<ProcessDistributionCard :nginx-info="nginxInfo" /> <ProcessDistributionCard :nginx-info="nginxInfo" />
</ACol> </ACol>
</ARow> </ARow>
<!-- 性能指标表格 --> <!-- Performance metrics table -->
<ARow :gutter="[16, 16]" class="mb-4"> <ARow :gutter="[16, 16]" class="mb-4">
<ACol :span="24"> <ACol :span="24">
<PerformanceTablesCard :nginx-info="nginxInfo" /> <PerformanceTablesCard :nginx-info="nginxInfo" />

16
app/src/views/dashboard/components/ConnectionMetricsCard.vue
View file

@ -7,18 +7,18 @@ const props = defineProps<{
nginxInfo: NginxPerformanceInfo nginxInfo: NginxPerformanceInfo
}>() }>()
// 活跃连接百分比 // Active connections percentage
const activeConnectionsPercent = computed(() => { const activeConnectionsPercent = computed(() => {
const maxConnections = props.nginxInfo.worker_connections * props.nginxInfo.worker_processes const maxConnections = props.nginxInfo.worker_connections * props.nginxInfo.worker_processes
return Number(((props.nginxInfo.active / maxConnections) * 100).toFixed(2)) return Number(((props.nginxInfo.active / maxConnections) * 100).toFixed(2))
}) })
// 工作进程使用百分比 // Worker processes usage percentage
const workerProcessesPercent = computed(() => { const workerProcessesPercent = computed(() => {
return Number(((props.nginxInfo.workers / props.nginxInfo.worker_processes) * 100).toFixed(2)) return Number(((props.nginxInfo.workers / props.nginxInfo.worker_processes) * 100).toFixed(2))
}) })
// 每连接请求数 // Requests per connection
const requestsPerConnection = computed(() => { const requestsPerConnection = computed(() => {
if (props.nginxInfo.handled === 0) { if (props.nginxInfo.handled === 0) {
return '0' return '0'
@ -26,7 +26,7 @@ const requestsPerConnection = computed(() => {
return (props.nginxInfo.requests / props.nginxInfo.handled).toFixed(2) return (props.nginxInfo.requests / props.nginxInfo.handled).toFixed(2)
}) })
// 格式化数值 // Format numbers
function formatNumber(num: number): string { function formatNumber(num: number): string {
if (num >= 1000000) { if (num >= 1000000) {
return `${(num / 1000000).toFixed(2)}M` return `${(num / 1000000).toFixed(2)}M`
@ -40,7 +40,7 @@ function formatNumber(num: number): string {
<template> <template>
<ARow :gutter="[16, 16]"> <ARow :gutter="[16, 16]">
<!-- 当前活跃连接 --> <!-- Current active connections -->
<ACol :xs="24" :sm="12" :md="12" :lg="6"> <ACol :xs="24" :sm="12" :md="12" :lg="6">
<ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }"> <ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }">
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
@ -61,7 +61,7 @@ function formatNumber(num: number): string {
</ACard> </ACard>
</ACol> </ACol>
<!-- 工作进程 --> <!-- Worker processes -->
<ACol :xs="24" :sm="12" :md="12" :lg="6"> <ACol :xs="24" :sm="12" :md="12" :lg="6">
<ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }"> <ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }">
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
@ -87,7 +87,7 @@ function formatNumber(num: number): string {
</ACard> </ACard>
</ACol> </ACol>
<!-- 每连接请求数 --> <!-- Requests per connection -->
<ACol :xs="24" :sm="12" :md="12" :lg="6"> <ACol :xs="24" :sm="12" :md="12" :lg="6">
<ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }"> <ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }">
<div class="flex flex-col h-full justify-between"> <div class="flex flex-col h-full justify-between">
@ -114,7 +114,7 @@ function formatNumber(num: number): string {
</ACard> </ACard>
</ACol> </ACol>
<!-- 资源利用率 --> <!-- Resource utilization -->
<ACol :xs="24" :sm="12" :md="12" :lg="6"> <ACol :xs="24" :sm="12" :md="12" :lg="6">
<ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }"> <ACard class="h-full" :bordered="false" :body-style="{ padding: '20px', height: '100%' }">
<div class="flex flex-col h-full justify-between"> <div class="flex flex-col h-full justify-between">

12
app/src/views/dashboard/components/PerformanceStatisticsCard.vue
View file

@ -13,7 +13,7 @@ const props = defineProps<{
nginxInfo: NginxPerformanceInfo nginxInfo: NginxPerformanceInfo
}>() }>()
// 计算连接效率 - 每连接的请求数 // Calculate connection efficiency - requests per connection
const requestsPerConnection = computed(() => { const requestsPerConnection = computed(() => {
if (props.nginxInfo.handled === 0) { if (props.nginxInfo.handled === 0) {
return '0' return '0'
@ -21,7 +21,7 @@ const requestsPerConnection = computed(() => {
return (props.nginxInfo.requests / props.nginxInfo.handled).toFixed(2) return (props.nginxInfo.requests / props.nginxInfo.handled).toFixed(2)
}) })
// 估算最大每秒请求数 // Estimate maximum requests per second
const maxRPS = computed(() => { const maxRPS = computed(() => {
return props.nginxInfo.worker_processes * props.nginxInfo.worker_connections return props.nginxInfo.worker_processes * props.nginxInfo.worker_connections
}) })
@ -29,7 +29,7 @@ const maxRPS = computed(() => {
<template> <template>
<ARow :gutter="[16, 24]"> <ARow :gutter="[16, 24]">
<!-- 最大RPS --> <!-- Maximum RPS -->
<ACol :xs="24" :sm="12" :md="8" :lg="6"> <ACol :xs="24" :sm="12" :md="8" :lg="6">
<AStatistic <AStatistic
:value="maxRPS" :value="maxRPS"
@ -50,7 +50,7 @@ const maxRPS = computed(() => {
</div> </div>
</ACol> </ACol>
<!-- 最大并发连接 --> <!-- Maximum concurrent connections -->
<ACol :xs="24" :sm="12" :md="8" :lg="6"> <ACol :xs="24" :sm="12" :md="8" :lg="6">
<AStatistic <AStatistic
:title="$gettext('Max Concurrent Connections')" :title="$gettext('Max Concurrent Connections')"
@ -66,7 +66,7 @@ const maxRPS = computed(() => {
</div> </div>
</ACol> </ACol>
<!-- 每连接请求数 --> <!-- Requests per connection -->
<ACol :xs="24" :sm="12" :md="8" :lg="6"> <ACol :xs="24" :sm="12" :md="8" :lg="6">
<AStatistic <AStatistic
:title="$gettext('Requests Per Connection')" :title="$gettext('Requests Per Connection')"
@ -83,7 +83,7 @@ const maxRPS = computed(() => {
</div> </div>
</ACol> </ACol>
<!-- Nginx进程总数 --> <!-- Total Nginx processes -->
<ACol :xs="24" :sm="12" :md="8" :lg="6"> <ACol :xs="24" :sm="12" :md="8" :lg="6">
<AStatistic <AStatistic
:title="$gettext('Total Nginx Processes')" :title="$gettext('Total Nginx Processes')"

18
app/src/views/dashboard/components/PerformanceTablesCard.vue
View file

@ -10,7 +10,7 @@ const props = defineProps<{
const activeTabKey = ref('status') const activeTabKey = ref('status')
// 表格列定义 // Table column definition
const columns: TableColumnType[] = [ const columns: TableColumnType[] = [
{ {
title: $gettext('Indicator'), title: $gettext('Indicator'),
@ -25,7 +25,7 @@ const columns: TableColumnType[] = [
}, },
] ]
// 格式化数值 // Format numbers
function formatNumber(num: number): string { function formatNumber(num: number): string {
if (num >= 1000000) { if (num >= 1000000) {
return `${(num / 1000000).toFixed(2)}M` return `${(num / 1000000).toFixed(2)}M`
@ -36,7 +36,7 @@ function formatNumber(num: number): string {
return num.toString() return num.toString()
} }
// 状态数据 // Status data
const statusData = computed(() => { const statusData = computed(() => {
return [ return [
{ {
@ -77,7 +77,7 @@ const statusData = computed(() => {
] ]
}) })
// 工作进程数据 // Worker processes data
const workerData = computed(() => { const workerData = computed(() => {
return [ return [
{ {
@ -113,7 +113,7 @@ const workerData = computed(() => {
] ]
}) })
// 配置数据 // Configuration data
const configData = computed(() => { const configData = computed(() => {
return [ return [
{ {
@ -129,7 +129,7 @@ const configData = computed(() => {
] ]
}) })
// 最大每秒请求数 // Maximum requests per second
const maxRPS = computed(() => { const maxRPS = computed(() => {
return props.nginxInfo.worker_processes * props.nginxInfo.worker_connections return props.nginxInfo.worker_processes * props.nginxInfo.worker_connections
}) })
@ -138,7 +138,7 @@ const maxRPS = computed(() => {
<template> <template>
<ACard :bordered="false"> <ACard :bordered="false">
<ATabs v-model:active-key="activeTabKey"> <ATabs v-model:active-key="activeTabKey">
<!-- 请求统计 --> <!-- Request statistics -->
<ATabPane key="status" :tab="$gettext('Request statistics')"> <ATabPane key="status" :tab="$gettext('Request statistics')">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<ATable <ATable
@ -151,7 +151,7 @@ const maxRPS = computed(() => {
</div> </div>
</ATabPane> </ATabPane>
<!-- 进程信息 --> <!-- Process information -->
<ATabPane key="workers" :tab="$gettext('Process information')"> <ATabPane key="workers" :tab="$gettext('Process information')">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<ATable <ATable
@ -164,7 +164,7 @@ const maxRPS = computed(() => {
</div> </div>
</ATabPane> </ATabPane>
<!-- 配置信息 --> <!-- Configuration information -->
<ATabPane key="config" :tab="$gettext('Configuration information')"> <ATabPane key="config" :tab="$gettext('Configuration information')">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<ATable <ATable

4
app/src/views/dashboard/components/ProcessDistributionCard.vue
View file

@ -6,7 +6,7 @@ const props = defineProps<{
nginxInfo: NginxPerformanceInfo nginxInfo: NginxPerformanceInfo
}>() }>()
// 进程构成数据 // Process composition data
const processTypeData = computed(() => { const processTypeData = computed(() => {
return [ return [
{ type: $gettext('Worker Processes'), value: props.nginxInfo.workers, color: '#1890ff' }, { type: $gettext('Worker Processes'), value: props.nginxInfo.workers, color: '#1890ff' },
@ -16,7 +16,7 @@ const processTypeData = computed(() => {
] ]
}) })
// 总进程数 // Total processes
const totalProcesses = computed(() => { const totalProcesses = computed(() => {
return props.nginxInfo.workers + props.nginxInfo.master + props.nginxInfo.cache + props.nginxInfo.other return props.nginxInfo.workers + props.nginxInfo.master + props.nginxInfo.cache + props.nginxInfo.other
}) })

8
app/src/views/dashboard/components/ResourceUsageCard.vue
View file

@ -11,7 +11,7 @@ const props = defineProps<{
nginxInfo: NginxPerformanceInfo nginxInfo: NginxPerformanceInfo
}>() }>()
// 资源利用率 // Resource utilization
const resourceUtilization = computed(() => { const resourceUtilization = computed(() => {
const cpuFactor = Math.min(props.nginxInfo.cpu_usage / 100, 1) const cpuFactor = Math.min(props.nginxInfo.cpu_usage / 100, 1)
const maxConnections = props.nginxInfo.worker_connections * props.nginxInfo.worker_processes const maxConnections = props.nginxInfo.worker_connections * props.nginxInfo.worker_processes
@ -24,7 +24,7 @@ const resourceUtilization = computed(() => {
<template> <template>
<ACard :title="$gettext('Resource Usage of Nginx')" :bordered="false" class="h-full" :body-style="{ padding: '16px', height: 'calc(100% - 58px)' }"> <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"> <div class="flex flex-col h-full">
<!-- CPU使用率 --> <!-- CPU usage -->
<ARow :gutter="[16, 8]" class="mb-2"> <ARow :gutter="[16, 8]" class="mb-2">
<ACol :span="24"> <ACol :span="24">
<div class="flex items-center"> <div class="flex items-center">
@ -47,7 +47,7 @@ const resourceUtilization = computed(() => {
</ACol> </ACol>
</ARow> </ARow>
<!-- 内存使用 --> <!-- Memory usage -->
<ARow :gutter="[16, 8]" class="mb-2"> <ARow :gutter="[16, 8]" class="mb-2">
<ACol :span="24"> <ACol :span="24">
<div class="flex items-center"> <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 {{ $gettext('Per worker memory') }}: {{ (nginxInfo.memory_usage / (nginxInfo.workers || 1)).toFixed(2) }} MB
</div> </div>
<!-- 系统负载 --> <!-- System load -->
<div class="mt-4 text-xs text-gray-500 border-t border-gray-100 pt-2"> <div class="mt-4 text-xs text-gray-500 border-t border-gray-100 pt-2">
<div class="flex justify-between mb-1"> <div class="flex justify-between mb-1">
<span>{{ $gettext('System load') }}</span> <span>{{ $gettext('System load') }}</span>