feat: 完善服务监控与下游重投
This commit is contained in:
hectorzhao
@@ -1,7 +1,7 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { AlertTriangle, BarChart3, CheckCircle2, Eye, RefreshCw, Search, TimerReset } from 'lucide-react';
|
||||
import { adminApi, type DownstreamDeliveryDashboard, type DownstreamDeliveryRecord, type DownstreamRequeuePreview, type DownstreamRequeueTask, type DownstreamRequeueTaskItem, type EnterpriseApplication, type TenantOption } from '@/api/adminApi';
|
||||
import { Breadcrumb, Button, DateRangeInput, Input, Modal, Pagination, Select, Tag, type DateRangeValue } from '@/components/ui';
|
||||
import { Breadcrumb, Button, DateRangeInput, Input, Modal, Pagination, Select, Tag, Textarea, type DateRangeValue } from '@/components/ui';
|
||||
import { formatDateTime } from '@/utils/dateTime';
|
||||
|
||||
const statusTone: Record<string, 'neutral' | 'info' | 'success' | 'warning' | 'danger'> = {
|
||||
@@ -677,7 +677,7 @@ export function AdminDownstreamDeliveriesPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="surface admin-task-table-card report-task-table-card">
|
||||
<div className="surface admin-task-table-card report-task-table-card downstream-requeue-task-card">
|
||||
<div className="section-heading downstream-requeue-task-heading">
|
||||
<div><h2>后台重投任务</h2><p className="muted">按筛选快照安全恢复，支持暂停、继续、终止和完整结果追踪。</p></div>
|
||||
<div className="downstream-requeue-task-heading__actions">
|
||||
@@ -741,8 +741,20 @@ export function AdminDownstreamDeliveriesPage() {
|
||||
</div>
|
||||
<div className="downstream-requeue-preview__distribution"><span>状态分布</span><div>{Object.entries(taskPreview.statusCounts).map(([key, value]) => <Tag key={key} tone={statusTone[key] ?? 'neutral'}>{statusLabel[key] ?? key} {value}</Tag>)}</div></div>
|
||||
<Select label="执行速度" value={String(taskRate)} onChange={(event) => setTaskRate(Number(event.target.value))} options={[{ label: '平稳（每应用10条/秒）', value: '10' }, { label: '快速（每应用20条/秒）', value: '20' }, { label: '低速（每应用5条/秒）', value: '5' }]} />
|
||||
<label className="field"><span>任务原因 *</span><textarea value={taskReason} onChange={(event) => setTaskReason(event.target.value)} placeholder="请填写事故原因、工单号或处理说明（至少5个字）" rows={3} /></label>
|
||||
<div className="downstream-requeue-warning"><AlertTriangle size={20} /><div><strong>安全边界</strong><p>仅处理待投递、失败、未确认和拒绝记录；不会批量重投客户端已确认或正在等待 ACK 的记录。客户离线时进入等待，不计失败或跳过。</p></div></div>
|
||||
<Textarea
|
||||
className="downstream-requeue-reason"
|
||||
error={taskReason.length > 0 && taskReason.trim().length < 5 ? '任务原因至少填写 5 个字' : undefined}
|
||||
hint={`请填写事故原因、工单号或处理说明 · ${taskReason.length}/200`}
|
||||
id="downstream-requeue-task-reason"
|
||||
label="任务原因"
|
||||
maxLength={200}
|
||||
onChange={(event) => setTaskReason(event.target.value)}
|
||||
placeholder="例如：工单 INC-20260814，重新投递客户已确认的历史回执"
|
||||
required
|
||||
rows={4}
|
||||
value={taskReason}
|
||||
/>
|
||||
<div className="downstream-requeue-warning"><AlertTriangle size={20} /><div><strong>重复投递风险</strong><p>任务支持待投递、失败、未确认、拒绝和客户端已确认记录；已确认记录会再次发送，可能导致客户端重复处理。正在等待 ACK 的记录仍不会并发重投，客户离线时进入等待。</p></div></div>
|
||||
</div>
|
||||
</Modal>
|
||||
) : null}
|
||||
|
||||
@@ -11,20 +11,13 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.system-monitoring-title-row h1 {
|
||||
color: var(--color-text-strong);
|
||||
font-size: 24px;
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.system-monitoring-title-row p {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 13px;
|
||||
margin: 4px 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.system-monitoring-controls,
|
||||
@@ -191,6 +184,24 @@
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
}
|
||||
|
||||
.system-monitoring-service-metrics { padding: 18px; }
|
||||
.system-monitoring-service-metrics > header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.system-monitoring-service-metrics > header > div { align-items: center; color: var(--color-text-strong); display: flex; gap: 8px; }
|
||||
.system-monitoring-service-metrics > header > span { color: var(--color-text-muted); font-size: 12px; }
|
||||
.system-monitoring-service-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.system-monitoring-service-metric-grid article { background: var(--color-bg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; }
|
||||
.system-monitoring-service-metric-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 9px; }
|
||||
.system-monitoring-service-metric-title > strong { color: var(--color-text-strong); font-size: 14px; }
|
||||
.system-monitoring-service-metric-row { align-items: center; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; min-height: 34px; }
|
||||
.system-monitoring-service-metric-row span { color: var(--color-text-muted); font-size: 12px; }
|
||||
.system-monitoring-service-metric-row strong { color: var(--color-text); font-size: 13px; }
|
||||
.system-monitoring-service-metric-empty { color: var(--color-text-subtle); font-size: 12px; line-height: 1.55; padding-top: 8px; }
|
||||
|
||||
.system-monitoring-chart-stack {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
@@ -285,6 +296,7 @@
|
||||
.system-monitoring-main-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.system-monitoring-services { order: -1; }
|
||||
.system-monitoring-service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.system-monitoring-service-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.system-monitoring-service { border-bottom: 0; border-right: 1px solid var(--color-border); padding: 11px 12px; }
|
||||
.system-monitoring-service:nth-child(3n) { border-right: 0; }
|
||||
}
|
||||
@@ -299,7 +311,9 @@
|
||||
.system-monitoring-health__fact { border-left: 0; border-top: 1px solid var(--color-border); padding: 12px 0 0; }
|
||||
.system-monitoring-metrics,
|
||||
.system-monitoring-chart-stack,
|
||||
.system-monitoring-service-list { grid-template-columns: minmax(0, 1fr); }
|
||||
.system-monitoring-service-list,
|
||||
.system-monitoring-service-metric-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.system-monitoring-service-metrics > header { align-items: flex-start; flex-direction: column; gap: 6px; }
|
||||
.system-monitoring-service { border-bottom: 1px solid var(--color-border); border-right: 0; padding: 13px 0; }
|
||||
.system-monitoring-chart-card { padding: 14px 10px; }
|
||||
}
|
||||
|
||||
@@ -69,6 +69,15 @@ function formatUptime(value: number | null) {
|
||||
return days > 0 ? `${days}天 ${hours}小时` : `${hours}小时`;
|
||||
}
|
||||
|
||||
function formatServiceMetric(value: number | null, unit: 'percent' | 'seconds' | 'count' | 'per_second' | 'bytes') {
|
||||
if (value === null) return '—';
|
||||
if (unit === 'percent') return `${value.toFixed(2)}%`;
|
||||
if (unit === 'seconds') return value < 1 ? `${Math.round(value * 1000)} ms` : `${value.toFixed(1)} s`;
|
||||
if (unit === 'per_second') return `${value.toFixed(value < 10 ? 2 : 1)}/s`;
|
||||
if (unit === 'bytes') return formatBytes(value);
|
||||
return Math.round(value).toLocaleString('zh-CN');
|
||||
}
|
||||
|
||||
function formatTime(value: string | null) {
|
||||
if (!value) return '暂无采样';
|
||||
return new Intl.DateTimeFormat('zh-CN', {
|
||||
@@ -223,10 +232,7 @@ export function AdminSystemMonitoringPage() {
|
||||
<div>
|
||||
<Breadcrumb items={['系统管理', '系统监控']} />
|
||||
<div className="system-monitoring-title-row">
|
||||
<div>
|
||||
<h1>系统监控</h1>
|
||||
<p>服务器资源、核心服务与活动告警</p>
|
||||
</div>
|
||||
<p>服务器资源、核心服务与活动告警</p>
|
||||
<Tag tone={status.tone}>{status.label}</Tag>
|
||||
</div>
|
||||
</div>
|
||||
@@ -277,6 +283,29 @@ export function AdminSystemMonitoringPage() {
|
||||
<article className="surface system-monitoring-metric"><div className="system-monitoring-metric__icon is-green"><Network size={19} /></div><div><span>网络吞吐</span><strong>{formatRate(totalNetworkRate(metrics?.networkReceiveBytesPerSecond, metrics?.networkTransmitBytesPerSecond))}</strong><small>接收 {formatRate(metrics?.networkReceiveBytesPerSecond ?? null)} · 发送 {formatRate(metrics?.networkTransmitBytesPerSecond ?? null)}</small></div></article>
|
||||
</div>
|
||||
|
||||
<section className="surface system-monitoring-service-metrics">
|
||||
<header>
|
||||
<div><Database size={18} /><strong>服务关键指标</strong></div>
|
||||
<span>固定低基数聚合，不含手机号、短信ID或SQL文本</span>
|
||||
</header>
|
||||
<div className="system-monitoring-service-metric-grid">
|
||||
{(overview?.serviceMetrics ?? []).map((group) => (
|
||||
<article key={group.key}>
|
||||
<div className="system-monitoring-service-metric-title">
|
||||
<strong>{group.name}</strong>
|
||||
<Tag tone={group.available ? 'success' : 'neutral'}>{group.available ? '已采集' : '待采集'}</Tag>
|
||||
</div>
|
||||
{group.metrics.length ? group.metrics.map((metric) => (
|
||||
<div className="system-monitoring-service-metric-row" key={metric.key}>
|
||||
<span>{metric.label}</span>
|
||||
<strong>{formatServiceMetric(metric.value, metric.unit)}</strong>
|
||||
</div>
|
||||
)) : <div className="system-monitoring-service-metric-empty">已监控服务可用性，待原生容量指标接入</div>}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="system-monitoring-main-grid">
|
||||
<div className="system-monitoring-chart-stack">
|
||||
<article className="surface system-monitoring-chart-card"><header><div><Cpu size={17} /><strong>CPU 趋势</strong></div><span>{formatPercent(metrics?.cpuUsagePercent ?? null)}</span></header>{overview?.trends.cpuUsagePercent.length ? <Chart height={230} option={cpuOption} /> : <EmptyChart />}</article>
|
||||
|
||||
Reference in New Issue
Block a user