fix
This commit is contained in:
@@ -10,7 +10,9 @@ export const fetchAlertRecords = (data: {
|
||||
severity_id?: number,
|
||||
start_time?: string,
|
||||
end_time?: string,
|
||||
keyword?: string
|
||||
keyword?: string,
|
||||
sort?: string,
|
||||
order?: string,
|
||||
}) => {
|
||||
return request.get("/Alert/v1/record/list", { params: data });
|
||||
};
|
||||
|
||||
@@ -97,3 +97,67 @@ export const updateServer = (id: number, data: Partial<ServerFormData>) => {
|
||||
export const deleteServer = (id: number) => {
|
||||
return request.delete<{ message: string }>(`/DC-Control/v1/servers/${id}`)
|
||||
}
|
||||
|
||||
/** 主机最新指标摘要（统计卡片，与 dc-control /servers/metrics/summary 一致） */
|
||||
export interface HostMetricsUseStat {
|
||||
total_bytes: number
|
||||
used_bytes: number
|
||||
free_bytes: number
|
||||
used_percent: number
|
||||
}
|
||||
|
||||
export interface HostMetricsDiskMount {
|
||||
mount: string
|
||||
total_bytes: number
|
||||
used_bytes: number
|
||||
free_bytes: number
|
||||
used_percent: number
|
||||
}
|
||||
|
||||
export interface HostMetricsCpuCard {
|
||||
usage_percent: number
|
||||
logical_cores_total: number
|
||||
}
|
||||
|
||||
export interface HostMetricsSummary {
|
||||
server_identity: string
|
||||
timestamp?: string
|
||||
has_data: boolean
|
||||
memory?: HostMetricsUseStat
|
||||
disk_root?: HostMetricsDiskMount
|
||||
data_disks?: HostMetricsDiskMount[]
|
||||
cpu?: HostMetricsCpuCard
|
||||
}
|
||||
|
||||
export interface HostNetworkTrafficPoint {
|
||||
time: string
|
||||
recv_mbps: number
|
||||
send_mbps: number
|
||||
}
|
||||
|
||||
export interface HostNetworkTrafficPayload {
|
||||
server_identity: string
|
||||
hours: number
|
||||
/** 时间窗内是否有主机采集写入的网络累计指标行 */
|
||||
has_data: boolean
|
||||
/** 是否已根据相邻采样差分算出速率曲线（至少两个采样点） */
|
||||
has_rate_series?: boolean
|
||||
points: HostNetworkTrafficPoint[]
|
||||
note: string
|
||||
}
|
||||
|
||||
/** 最新一批主机指标（用于监控大屏卡片） */
|
||||
export const fetchServerMetricsSummary = (serverIdentity: string) => {
|
||||
return request.get<{ code: number; details?: HostMetricsSummary; message?: string }>(
|
||||
'/DC-Control/v1/servers/metrics/summary',
|
||||
{ params: { server_identity: serverIdentity } },
|
||||
)
|
||||
}
|
||||
|
||||
/** 近 N 小时网络收/发速率（Mbps，相邻采样字节差分） */
|
||||
export const fetchServerNetworkTraffic = (serverIdentity: string, hours = 6) => {
|
||||
return request.get<{ code: number; details?: HostNetworkTrafficPayload; message?: string }>(
|
||||
'/DC-Control/v1/servers/metrics/network-traffic',
|
||||
{ params: { server_identity: serverIdentity, hours } },
|
||||
)
|
||||
}
|
||||
|
||||
@@ -211,6 +211,22 @@ export const localMenuFlatItems: MenuItem[] = [
|
||||
sort_key: 14,
|
||||
created_at: '2025-12-26T13:23:51.892569+08:00',
|
||||
},
|
||||
{
|
||||
id: 12020,
|
||||
identity: '019c7100-0001-7000-8000-000000000020',
|
||||
title: '操作系统监控',
|
||||
title_en: 'OS Monitoring',
|
||||
code: 'ops:综合监控:操作系统监控',
|
||||
description: '综合监控 - 操作系统资源与流量、告警',
|
||||
app_id: 2,
|
||||
parent_id: 23,
|
||||
menu_path: '/monitor/os',
|
||||
menu_icon: 'appstore',
|
||||
component: 'ops/pages/monitor/os',
|
||||
type: 1,
|
||||
sort_key: 13.5,
|
||||
created_at: '2026-04-11T10:00:00+08:00',
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
identity: '019b591d-01a5-776f-ac4b-3cd896dd3f48',
|
||||
|
||||
@@ -226,6 +226,23 @@ export const localMenuItems: MenuItem[] = [
|
||||
created_at: '2025-12-26T13:23:51.892569+08:00',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 12020,
|
||||
identity: '019c7100-0001-7000-8000-000000000020',
|
||||
title: '操作系统监控',
|
||||
title_en: 'OS Monitoring',
|
||||
code: 'ops:综合监控:操作系统监控',
|
||||
description: '综合监控 - 操作系统资源与流量、告警',
|
||||
app_id: 2,
|
||||
parent_id: 23,
|
||||
menu_path: '/monitor/os',
|
||||
menu_icon: 'appstore',
|
||||
component: 'ops/pages/monitor/os',
|
||||
type: 1,
|
||||
sort_key: 5,
|
||||
created_at: '2026-04-11T10:00:00+08:00',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
identity: '019b591d-01a5-776f-ac4b-3cd896dd3f48',
|
||||
|
||||
827
src/views/ops/pages/monitor/os/index.vue
Normal file
827
src/views/ops/pages/monitor/os/index.vue
Normal file
@@ -0,0 +1,827 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="page-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<span class="toolbar-label">当前服务器</span>
|
||||
<a-select
|
||||
v-model="selectedServerIdentity"
|
||||
class="server-select"
|
||||
placeholder="输入名称或地址搜索"
|
||||
allow-search
|
||||
allow-clear
|
||||
:loading="serverListLoading"
|
||||
:filter-option="filterServerOption"
|
||||
>
|
||||
<a-option
|
||||
v-for="item in serverOptions"
|
||||
:key="item.server_identity"
|
||||
:value="item.server_identity"
|
||||
:label="`${item.name} ${item.host} ${item.ip}`"
|
||||
>
|
||||
<div class="server-option">
|
||||
<span class="server-option-name">{{ item.name }}</span>
|
||||
<span class="server-option-ip">{{ item.ip }}</span>
|
||||
</div>
|
||||
</a-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div v-if="activeServer" class="toolbar-meta text-muted">
|
||||
{{ activeServer.os }} · {{ activeServer.location }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 资源统计 -->
|
||||
<a-spin :loading="statsLoading" style="width: 100%">
|
||||
<a-row :gutter="16" class="stats-row">
|
||||
<a-col :xs="24" :sm="12" :lg="6">
|
||||
<a-card class="stats-card" :bordered="false">
|
||||
<div class="stats-content">
|
||||
<div class="stats-icon stats-icon-primary">
|
||||
<icon-storage />
|
||||
</div>
|
||||
<div class="stats-info">
|
||||
<div class="stats-title">内存</div>
|
||||
<div class="stats-value">{{ stats.memory.util }}%</div>
|
||||
<div class="stats-desc">
|
||||
总值 {{ stats.memory.total }} · 已用 {{ stats.memory.used }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12" :lg="6">
|
||||
<a-card class="stats-card" :bordered="false">
|
||||
<div class="stats-content">
|
||||
<div class="stats-icon stats-icon-cyan">
|
||||
<icon-drive-file />
|
||||
</div>
|
||||
<div class="stats-info">
|
||||
<div class="stats-title">磁盘（系统盘 /）</div>
|
||||
<div class="stats-value">{{ stats.systemDisk.util }}%</div>
|
||||
<div class="stats-desc">
|
||||
总值 {{ stats.systemDisk.total }} · 已用 {{ stats.systemDisk.used }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12" :lg="6">
|
||||
<a-card class="stats-card" :bordered="false">
|
||||
<div class="stats-content">
|
||||
<div class="stats-icon stats-icon-green">
|
||||
<icon-code-square />
|
||||
</div>
|
||||
<div class="stats-info">
|
||||
<div class="stats-title">CPU</div>
|
||||
<div class="stats-value">{{ stats.cpu.util }}%</div>
|
||||
<div class="stats-desc">
|
||||
总值 {{ stats.cpu.total }} · 已用 {{ stats.cpu.used }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :xs="24" :sm="12" :lg="6">
|
||||
<a-card class="stats-card" :bordered="false">
|
||||
<div class="stats-content">
|
||||
<div class="stats-icon stats-icon-purple">
|
||||
<icon-folder />
|
||||
</div>
|
||||
<div class="stats-info">
|
||||
<div class="stats-title">硬盘（数据盘汇总）</div>
|
||||
<div class="stats-value">{{ stats.dataDisk.util }}%</div>
|
||||
<div class="stats-desc">
|
||||
总值 {{ stats.dataDisk.total }} · 已用 {{ stats.dataDisk.used }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-spin>
|
||||
|
||||
<a-row :gutter="16" class="chart-row">
|
||||
<a-col :xs="24" :lg="14">
|
||||
<a-card title="网络流量（近 6 小时）" :bordered="false">
|
||||
<template #extra>
|
||||
<a-space>
|
||||
<span class="legend-item">
|
||||
<span class="legend-dot legend-dot-1"></span>
|
||||
<span>接收</span>
|
||||
</span>
|
||||
<span class="legend-item">
|
||||
<span class="legend-dot legend-dot-2"></span>
|
||||
<span>发送</span>
|
||||
</span>
|
||||
</a-space>
|
||||
</template>
|
||||
<a-spin :loading="chartLoading" class="chart-spin">
|
||||
<p v-if="trafficHint" class="traffic-hint text-muted">{{ trafficHint }}</p>
|
||||
<div class="chart-container">
|
||||
<Chart :options="trafficChartOptions" height="300px" />
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :xs="24" :lg="10">
|
||||
<a-card title="最近告警" :bordered="false">
|
||||
<template #extra>
|
||||
<span class="text-muted">当前主机 · 最近 5 条</span>
|
||||
</template>
|
||||
<a-spin :loading="alertsLoading" class="alert-spin">
|
||||
<div v-if="recentAlerts.length" class="alert-list">
|
||||
<div
|
||||
v-for="item in recentAlerts"
|
||||
:key="item.id"
|
||||
class="alert-item"
|
||||
>
|
||||
<div class="alert-item-top">
|
||||
<span class="alert-item-name" :title="item.alert_name">{{
|
||||
item.alert_name || '-'
|
||||
}}</span>
|
||||
<a-tag
|
||||
v-if="item.severity"
|
||||
size="small"
|
||||
:color="item.severity.color || undefined"
|
||||
>
|
||||
{{ item.severity.name }}
|
||||
</a-tag>
|
||||
</div>
|
||||
<div class="alert-item-meta">
|
||||
<a-tag size="small" :color="alertStatusColor(item.status)">
|
||||
{{ alertStatusText(item.status) }}
|
||||
</a-tag>
|
||||
<span class="alert-item-time">{{
|
||||
formatAlertTime(item.starts_at)
|
||||
}}</span>
|
||||
</div>
|
||||
<div v-if="item.summary" class="alert-item-summary text-muted">
|
||||
{{ item.summary }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-empty
|
||||
v-else
|
||||
class="alert-empty"
|
||||
description="暂无与该主机相关的告警"
|
||||
/>
|
||||
</a-spin>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { Message } from '@arco-design/web-vue'
|
||||
import {
|
||||
IconStorage,
|
||||
IconDriveFile,
|
||||
IconCodeSquare,
|
||||
IconFolder,
|
||||
} from '@arco-design/web-vue/es/icon'
|
||||
import Chart from '@/components/chart/index.vue'
|
||||
import {
|
||||
fetchServerList,
|
||||
fetchServerMetricsSummary,
|
||||
fetchServerNetworkTraffic,
|
||||
type HostMetricsDiskMount,
|
||||
type HostMetricsSummary,
|
||||
type HostNetworkTrafficPayload,
|
||||
type ServerItem,
|
||||
} from '@/api/ops/server'
|
||||
import { fetchAlertRecords } from '@/api/ops/alertRecord'
|
||||
|
||||
interface ServerOption {
|
||||
server_identity: string
|
||||
name: string
|
||||
host: string
|
||||
ip: string
|
||||
os: string
|
||||
location: string
|
||||
}
|
||||
|
||||
interface MetricBlock {
|
||||
total: string
|
||||
used: string
|
||||
util: number
|
||||
}
|
||||
|
||||
interface ServerMetrics {
|
||||
memory: MetricBlock
|
||||
systemDisk: MetricBlock
|
||||
cpu: MetricBlock
|
||||
dataDisk: MetricBlock
|
||||
}
|
||||
|
||||
const serverListLoading = ref(false)
|
||||
const statsLoading = ref(false)
|
||||
const chartLoading = ref(false)
|
||||
const alertsLoading = ref(false)
|
||||
|
||||
/** 与当前选中主机相关的最近告警（来自 Alert record/list） */
|
||||
const recentAlerts = ref<any[]>([])
|
||||
|
||||
const serverOptions = ref<ServerOption[]>([])
|
||||
const selectedServerIdentity = ref<string | undefined>(undefined)
|
||||
|
||||
const summaryPayload = ref<HostMetricsSummary | null>(null)
|
||||
const trafficPayload = ref<HostNetworkTrafficPayload | null>(null)
|
||||
|
||||
const activeServer = computed(() =>
|
||||
serverOptions.value.find((s) => s.server_identity === selectedServerIdentity.value),
|
||||
)
|
||||
|
||||
const defaultMetrics: ServerMetrics = {
|
||||
memory: { total: '-', used: '-', util: 0 },
|
||||
systemDisk: { total: '-', used: '-', util: 0 },
|
||||
cpu: { total: '-', used: '-', util: 0 },
|
||||
dataDisk: { total: '-', used: '-', util: 0 },
|
||||
}
|
||||
|
||||
function round1(n: number) {
|
||||
return Math.round(n * 10) / 10
|
||||
}
|
||||
|
||||
function formatBytes(n: number | undefined | null): string {
|
||||
if (n === undefined || n === null || n <= 0) return '-'
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
||||
let i = 0
|
||||
let x = n
|
||||
while (x >= 1024 && i < units.length - 1) {
|
||||
x /= 1024
|
||||
i += 1
|
||||
}
|
||||
const digits = i === 0 ? 0 : x >= 10 ? 1 : 2
|
||||
return `${x.toFixed(digits)} ${units[i]}`
|
||||
}
|
||||
|
||||
function useStatToBlock(
|
||||
m: { total_bytes: number; used_bytes: number; used_percent: number } | undefined,
|
||||
): MetricBlock {
|
||||
if (!m) return { total: '-', used: '-', util: 0 }
|
||||
return {
|
||||
total: formatBytes(m.total_bytes),
|
||||
used: formatBytes(m.used_bytes),
|
||||
util: round1(m.used_percent),
|
||||
}
|
||||
}
|
||||
|
||||
function diskMountToBlock(d: HostMetricsDiskMount | undefined): MetricBlock {
|
||||
if (!d) return { total: '-', used: '-', util: 0 }
|
||||
return {
|
||||
total: formatBytes(d.total_bytes),
|
||||
used: formatBytes(d.used_bytes),
|
||||
util: round1(d.used_percent),
|
||||
}
|
||||
}
|
||||
|
||||
function aggregateDataDisks(disks: HostMetricsDiskMount[] | undefined): MetricBlock {
|
||||
if (!disks?.length) return { total: '-', used: '-', util: 0 }
|
||||
let total = 0
|
||||
let used = 0
|
||||
for (const d of disks) {
|
||||
total += d.total_bytes
|
||||
used += d.used_bytes
|
||||
}
|
||||
if (total <= 0) return { total: '-', used: '-', util: 0 }
|
||||
return {
|
||||
total: formatBytes(total),
|
||||
used: formatBytes(used),
|
||||
util: round1((used / total) * 100),
|
||||
}
|
||||
}
|
||||
|
||||
const stats = computed<ServerMetrics>(() => {
|
||||
const d = summaryPayload.value
|
||||
if (!d || !d.has_data) {
|
||||
return defaultMetrics
|
||||
}
|
||||
const cores = d.cpu?.logical_cores_total ?? 0
|
||||
const usage = d.cpu?.usage_percent ?? 0
|
||||
const usedCores = cores > 0 ? (usage / 100) * cores : 0
|
||||
const cpuBlock: MetricBlock = {
|
||||
total: cores > 0 ? `${round1(cores)} 核` : '-',
|
||||
used: cores > 0 ? `约 ${round1(usedCores)} 核` : '-',
|
||||
util: round1(usage),
|
||||
}
|
||||
return {
|
||||
memory: useStatToBlock(d.memory),
|
||||
systemDisk: diskMountToBlock(d.disk_root),
|
||||
cpu: cpuBlock,
|
||||
dataDisk: aggregateDataDisks(d.data_disks),
|
||||
}
|
||||
})
|
||||
|
||||
function filterServerOption(input: string, option: { label?: string }) {
|
||||
if (!input) return true
|
||||
const q = input.trim().toLowerCase()
|
||||
const label = String(option?.label ?? '').toLowerCase()
|
||||
return label.includes(q)
|
||||
}
|
||||
|
||||
/** 判断告警记录是否属于当前主机（labels 或文本中出现 identity / IP / hostname） */
|
||||
function matchServerAlert(record: any, server: ServerOption): boolean {
|
||||
try {
|
||||
const raw = record?.labels
|
||||
const labels =
|
||||
typeof raw === 'string' && raw
|
||||
? JSON.parse(raw)
|
||||
: raw && typeof raw === 'object'
|
||||
? raw
|
||||
: null
|
||||
if (labels && typeof labels === 'object') {
|
||||
if (labels.server_identity === server.server_identity) return true
|
||||
const inst = String(labels.instance ?? '')
|
||||
if (inst && (inst === server.ip || inst === server.host)) return true
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
const text = `${record?.alert_name ?? ''} ${record?.summary ?? ''} ${record?.description ?? ''}`
|
||||
return (
|
||||
text.includes(server.server_identity) ||
|
||||
(!!server.ip && server.ip !== '-' && text.includes(server.ip)) ||
|
||||
(!!server.host && text.includes(server.host))
|
||||
)
|
||||
}
|
||||
|
||||
function formatAlertTime(iso: string | undefined | null) {
|
||||
if (!iso) return '-'
|
||||
return dayjs(iso).format('MM-DD HH:mm')
|
||||
}
|
||||
|
||||
function alertStatusColor(status: string | undefined) {
|
||||
const map: Record<string, string> = {
|
||||
firing: 'red',
|
||||
pending: 'orange',
|
||||
acked: 'gold',
|
||||
resolved: 'green',
|
||||
silenced: 'gray',
|
||||
suppressed: 'lightgray',
|
||||
}
|
||||
return map[status || ''] || 'blue'
|
||||
}
|
||||
|
||||
function alertStatusText(status: string | undefined) {
|
||||
const map: Record<string, string> = {
|
||||
firing: '告警中',
|
||||
pending: '待处理',
|
||||
acked: '已确认',
|
||||
resolved: '已解决',
|
||||
silenced: '已屏蔽',
|
||||
suppressed: '已抑制',
|
||||
}
|
||||
return map[status || ''] || status || '-'
|
||||
}
|
||||
|
||||
async function loadRecentAlertsForServer(server: ServerOption | undefined) {
|
||||
if (!server) {
|
||||
recentAlerts.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res: any = await fetchAlertRecords({
|
||||
page: 1,
|
||||
page_size: 100,
|
||||
sort: 'starts_at',
|
||||
order: 'desc',
|
||||
})
|
||||
if (res.code !== 0) {
|
||||
recentAlerts.value = []
|
||||
Message.error(res.message || '加载最近告警失败')
|
||||
return
|
||||
}
|
||||
const rows: any[] = res.details?.data ?? []
|
||||
recentAlerts.value = rows.filter((r) => matchServerAlert(r, server)).slice(0, 5)
|
||||
} catch (e: any) {
|
||||
recentAlerts.value = []
|
||||
Message.error(e?.message || '加载最近告警失败')
|
||||
}
|
||||
}
|
||||
|
||||
/** 是否已有速率曲线数据（兼容旧接口仅看 points） */
|
||||
const hasTrafficRateSeries = computed(() => {
|
||||
const p = trafficPayload.value
|
||||
if (!p) return false
|
||||
if (typeof p.has_rate_series === 'boolean') return p.has_rate_series
|
||||
return (p.points?.length ?? 0) > 0
|
||||
})
|
||||
|
||||
const trafficHint = computed(() => {
|
||||
const p = trafficPayload.value
|
||||
if (!p || chartLoading.value) return ''
|
||||
if (hasTrafficRateSeries.value) return ''
|
||||
if (p.has_data) {
|
||||
return p.note || '已有指标，需至少两次采集后才展示速率曲线'
|
||||
}
|
||||
return '暂无主机网络累计指标（control_host_metrics_data），请确认主机采集与落库。'
|
||||
})
|
||||
|
||||
const trafficChartOptions = computed(() => {
|
||||
const pts = trafficPayload.value?.points ?? []
|
||||
if (!pts.length) {
|
||||
return {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { show: false },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: { type: 'category', boundaryGap: false, data: ['-'] },
|
||||
yAxis: { type: 'value', name: 'Mb/s' },
|
||||
series: [
|
||||
{
|
||||
name: '接收',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [0],
|
||||
lineStyle: { width: 2, color: '#165DFF' },
|
||||
itemStyle: { color: '#165DFF' },
|
||||
},
|
||||
{
|
||||
name: '发送',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [0],
|
||||
lineStyle: { width: 2, color: '#14C9C9' },
|
||||
itemStyle: { color: '#14C9C9' },
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
const labels = pts.map((p) => dayjs(p.time).format('MM-DD HH:mm'))
|
||||
const rx = pts.map((p) => round1(p.recv_mbps))
|
||||
const tx = pts.map((p) => round1(p.send_mbps))
|
||||
return {
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { show: false },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: labels,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'Mb/s',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '接收',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: rx,
|
||||
areaStyle: { opacity: 0.08 },
|
||||
lineStyle: { width: 2, color: '#165DFF' },
|
||||
itemStyle: { color: '#165DFF' },
|
||||
},
|
||||
{
|
||||
name: '发送',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: tx,
|
||||
areaStyle: { opacity: 0.08 },
|
||||
lineStyle: { width: 2, color: '#14C9C9' },
|
||||
itemStyle: { color: '#14C9C9' },
|
||||
},
|
||||
],
|
||||
}
|
||||
})
|
||||
|
||||
async function loadServerOptions() {
|
||||
serverListLoading.value = true
|
||||
try {
|
||||
const res: any = await fetchServerList({ page: 1, size: 500 })
|
||||
if (res.code !== 0) {
|
||||
Message.error(res.message || '加载服务器列表失败')
|
||||
serverOptions.value = []
|
||||
return
|
||||
}
|
||||
const list: ServerItem[] = res.details?.data ?? []
|
||||
serverOptions.value = list.map((r) => ({
|
||||
server_identity: r.server_identity,
|
||||
name: r.name,
|
||||
host: r.host,
|
||||
ip: r.ip_address || r.host,
|
||||
os: [r.os, r.os_version].filter(Boolean).join(' ') || '-',
|
||||
location: r.location || '-',
|
||||
}))
|
||||
if (
|
||||
selectedServerIdentity.value &&
|
||||
!serverOptions.value.some((s) => s.server_identity === selectedServerIdentity.value)
|
||||
) {
|
||||
selectedServerIdentity.value = undefined
|
||||
}
|
||||
if (!selectedServerIdentity.value && serverOptions.value.length > 0) {
|
||||
selectedServerIdentity.value = serverOptions.value[0].server_identity
|
||||
}
|
||||
} catch (e: any) {
|
||||
Message.error(e?.message || '加载服务器列表失败')
|
||||
serverOptions.value = []
|
||||
} finally {
|
||||
serverListLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshDashboard() {
|
||||
const sid = selectedServerIdentity.value
|
||||
if (!sid) {
|
||||
summaryPayload.value = null
|
||||
trafficPayload.value = null
|
||||
recentAlerts.value = []
|
||||
return
|
||||
}
|
||||
const server = serverOptions.value.find((s) => s.server_identity === sid)
|
||||
statsLoading.value = true
|
||||
chartLoading.value = true
|
||||
alertsLoading.value = true
|
||||
try {
|
||||
const [sumRes, trafRes]: any[] = await Promise.all([
|
||||
fetchServerMetricsSummary(sid),
|
||||
fetchServerNetworkTraffic(sid, 6),
|
||||
loadRecentAlertsForServer(server),
|
||||
])
|
||||
if (sumRes.code === 0) {
|
||||
summaryPayload.value = sumRes.details ?? null
|
||||
} else {
|
||||
summaryPayload.value = null
|
||||
Message.error(sumRes.message || '加载统计卡片失败')
|
||||
}
|
||||
if (trafRes.code === 0) {
|
||||
trafficPayload.value = trafRes.details ?? null
|
||||
} else {
|
||||
trafficPayload.value = null
|
||||
Message.error(trafRes.message || '加载网络流量失败')
|
||||
}
|
||||
} catch (e: any) {
|
||||
Message.error(e?.message || '请求失败')
|
||||
summaryPayload.value = null
|
||||
trafficPayload.value = null
|
||||
recentAlerts.value = []
|
||||
} finally {
|
||||
statsLoading.value = false
|
||||
chartLoading.value = false
|
||||
alertsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedServerIdentity, (sid) => {
|
||||
if (!sid) {
|
||||
summaryPayload.value = null
|
||||
trafficPayload.value = null
|
||||
recentAlerts.value = []
|
||||
return
|
||||
}
|
||||
refreshDashboard()
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await loadServerOptions()
|
||||
// 首次选中由 loadServerOptions 设置，watch(selectedServerIdentity) 会拉取指标
|
||||
})
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'OsMonitor',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.server-select {
|
||||
min-width: 260px;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.server-option {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.server-option-name {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.server-option-ip {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.toolbar-meta {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
height: 100%;
|
||||
|
||||
:deep(.arco-card-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.stats-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stats-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
|
||||
&-primary {
|
||||
background-color: rgba(22, 93, 255, 0.1);
|
||||
color: rgb(var(--primary-6));
|
||||
}
|
||||
|
||||
&-cyan {
|
||||
background-color: rgba(20, 201, 201, 0.1);
|
||||
color: #14c9c9;
|
||||
}
|
||||
|
||||
&-green {
|
||||
background-color: rgba(0, 180, 42, 0.1);
|
||||
color: rgb(var(--success-6));
|
||||
}
|
||||
|
||||
&-purple {
|
||||
background-color: rgba(114, 46, 209, 0.1);
|
||||
color: #722ed1;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stats-title {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-3);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stats-desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
|
||||
&-1 {
|
||||
background-color: #165dff;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
background-color: #14c9c9;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-spin {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.alert-spin {
|
||||
display: block;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.alert-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.alert-item {
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--color-fill-1);
|
||||
border: 1px solid var(--color-border-1);
|
||||
}
|
||||
|
||||
.alert-item-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.alert-item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-1);
|
||||
line-height: 1.4;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.alert-item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.alert-item-time {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.alert-item-summary {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.alert-empty {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user