Revert "增强插件治理中心执行表现与风险排行"

This reverts commit e3694b9320.
This commit is contained in:
Liu
2026-05-01 12:45:38 +08:00
parent f183283789
commit d1c2aa06f0
3 changed files with 10 additions and 399 deletions

View File

@@ -18,113 +18,41 @@
</div>
<el-row :gutter="16" class="overview-grid">
<el-col :xs="24" :sm="12" :md="8" :lg="4">
<el-col :xs="24" :sm="12" :md="6">
<el-card class="overview-card overview-card--primary" shadow="hover">
<div class="overview-label">插件总数</div>
<div class="overview-value">{% raw %}{{ plugins.length }}{% endraw %}</div>
<div class="overview-note">当前已注册插件模块</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="4">
<el-col :xs="24" :sm="12" :md="6">
<el-card class="overview-card" shadow="hover">
<div class="overview-label">运行中</div>
<div class="overview-value">{% raw %}{{ runningPluginsCount }}{% endraw %}</div>
<div class="overview-note">可正常提供能力的插件</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="4">
<el-col :xs="24" :sm="12" :md="6">
<el-card class="overview-card" shadow="hover">
<div class="overview-label">已停用</div>
<div class="overview-value">{% raw %}{{ stoppedPluginsCount }}{% endraw %}</div>
<div class="overview-note">待启用或排查状态</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="4">
<el-col :xs="24" :sm="12" :md="6">
<el-card class="overview-card overview-card--soft" shadow="hover">
<div class="overview-label">治理告警</div>
<div class="overview-value">{% raw %}{{ governanceRiskCount }}{% endraw %}</div>
<div class="overview-note">存在配置、依赖或加载风险的插件</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="4">
<el-card class="overview-card" shadow="hover">
<div class="overview-label">执行异常</div>
<div class="overview-value">{% raw %}{{ executionRiskCount }}{% endraw %}</div>
<div class="overview-note">最近执行失败、超时或进入熔断的插件</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="4">
<el-card class="overview-card" shadow="hover">
<div class="overview-label">熔断中</div>
<div class="overview-value">{% raw %}{{ openCircuitCount }}{% endraw %}</div>
<div class="overview-note">当前被保护机制隔离的高风险插件</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="16" class="insight-grid">
<el-col :xs="24" :md="12">
<el-card class="workspace-card" shadow="hover">
<div slot="header" class="workspace-header">
<div>
<h3>高风险插件</h3>
<p>优先排查熔断中、连续失败或最近错误较多的插件。</p>
</div>
</div>
<div class="rank-list">
<div v-if="topRiskPlugins.length === 0" class="mobile-empty-state">暂无高风险插件</div>
<div v-for="(plugin, index) in topRiskPlugins" :key="`risk-${plugin.module_name}`" class="rank-item">
<div class="rank-item__index">{% raw %}{{ index + 1 }}{% endraw %}</div>
<div class="rank-item__content">
<div class="rank-item__title-row">
<div class="rank-item__title">{% raw %}{{ plugin.name }}{% endraw %}</div>
<el-tag :type="executionTagType((plugin.execution_summary || {}).status)" size="mini">
{% raw %}{{ executionLabel((plugin.execution_summary || {}).status) }}{% endraw %}
</el-tag>
</div>
<div class="rank-item__summary">{% raw %}{{ (plugin.execution_summary || {}).summary || '暂无执行摘要' }}{% endraw %}</div>
<div class="rank-item__meta">
<span>最近错误:{% raw %}{{ (plugin.execution_summary || {}).last_error_message || '无' }}{% endraw %}</span>
</div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :xs="24" :md="12">
<el-card class="workspace-card" shadow="hover">
<div slot="header" class="workspace-header">
<div>
<h3>慢插件排行</h3>
<p>基于最近一次执行耗时,快速定位可能影响主链路响应的插件。</p>
</div>
</div>
<div class="rank-list">
<div v-if="slowestPlugins.length === 0" class="mobile-empty-state">暂无执行样本</div>
<div v-for="(plugin, index) in slowestPlugins" :key="`slow-${plugin.module_name}`" class="rank-item">
<div class="rank-item__index">{% raw %}{{ index + 1 }}{% endraw %}</div>
<div class="rank-item__content">
<div class="rank-item__title-row">
<div class="rank-item__title">{% raw %}{{ plugin.name }}{% endraw %}</div>
<div class="rank-item__value">{% raw %}{{ formatDurationMs((plugin.execution_summary || {}).last_process_time_ms) }}{% endraw %}</div>
</div>
<div class="rank-item__summary">{% raw %}{{ (plugin.execution_summary || {}).summary || '暂无执行摘要' }}{% endraw %}</div>
<div class="rank-item__meta">
<span>成功率:{% raw %}{{ formatPercent((plugin.execution_summary || {}).success_rate) }}{% endraw %}</span>
<span>累计执行:{% raw %}{{ (plugin.execution_summary || {}).total_executions || 0 }}{% endraw %}</span>
</div>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-card class="workspace-card" shadow="hover">
<div slot="header" class="workspace-header">
<div>
<h3>插件列表</h3>
<p>优先关注状态、执行表现和说明,再进入单个插件详情与配置编辑。</p>
<p>优先关注状态和说明,再进入单个插件详情与配置编辑。</p>
</div>
</div>
@@ -163,23 +91,6 @@
</div>
</template>
</el-table-column>
<el-table-column label="执行表现" min-width="220">
<template slot-scope="scope">
<div class="execution-cell">
<div class="execution-cell__head">
<el-tag :type="executionTagType((scope.row.execution_summary || {}).status)" size="mini">
{% raw %}{{ executionLabel((scope.row.execution_summary || {}).status) }}{% endraw %}
</el-tag>
<span class="execution-cell__metric">
{% raw %}{{ `${formatPercent((scope.row.execution_summary || {}).success_rate)} / ${formatDurationMs((scope.row.execution_summary || {}).last_process_time_ms)}` }}{% endraw %}
</span>
</div>
<div class="execution-cell__summary">
{% raw %}{{ (scope.row.execution_summary || {}).summary || '暂无执行摘要' }}{% endraw %}
</div>
</div>
</template>
</el-table-column>
<el-table-column label="能力类型" width="150" align="center">
<template slot-scope="scope">
<div class="command-tags command-tags--compact">
@@ -246,11 +157,6 @@
<span>版本:{% raw %}{{ plugin.version || '未知' }}{% endraw %}</span>
<span>治理:{% raw %}{{ governanceLabel(plugin.governance_status) }}{% endraw %}</span>
</div>
<div class="mobile-plugin-card__meta">
<span>执行:{% raw %}{{ executionLabel((plugin.execution_summary || {}).status) }}{% endraw %}</span>
<span>成功率:{% raw %}{{ formatPercent((plugin.execution_summary || {}).success_rate) }}{% endraw %}</span>
<span>耗时:{% raw %}{{ formatDurationMs((plugin.execution_summary || {}).last_process_time_ms) }}{% endraw %}</span>
</div>
<div class="mobile-plugin-card__desc">
{% raw %}{{ plugin.description || '暂无描述' }}{% endraw %}
</div>
@@ -375,45 +281,6 @@
</div>
</div>
</el-descriptions-item>
<el-descriptions-item label="执行表现" :span="2" v-if="selectedPlugin.execution_summary">
<div class="config-overview-grid">
<div class="config-overview-item">
<span class="config-overview-label">执行状态</span>
<span class="config-overview-value">{% raw %}{{ executionLabel(selectedPlugin.execution_summary.status) }}{% endraw %}</span>
</div>
<div class="config-overview-item">
<span class="config-overview-label">累计执行</span>
<span class="config-overview-value">{% raw %}{{ selectedPlugin.execution_summary.total_executions || 0 }}{% endraw %}</span>
</div>
<div class="config-overview-item">
<span class="config-overview-label">成功率</span>
<span class="config-overview-value">{% raw %}{{ formatPercent(selectedPlugin.execution_summary.success_rate) }}{% endraw %}</span>
</div>
<div class="config-overview-item">
<span class="config-overview-label">超时率</span>
<span class="config-overview-value">{% raw %}{{ formatPercent(selectedPlugin.execution_summary.timeout_rate) }}{% endraw %}</span>
</div>
<div class="config-overview-item">
<span class="config-overview-label">最近耗时</span>
<span class="config-overview-value">{% raw %}{{ formatDurationMs(selectedPlugin.execution_summary.last_process_time_ms) }}{% endraw %}</span>
</div>
<div class="config-overview-item">
<span class="config-overview-label">最近成功</span>
<span class="config-overview-value">{% raw %}{{ selectedPlugin.execution_summary.last_success_at_text || '-' }}{% endraw %}</span>
</div>
<div class="config-overview-item">
<span class="config-overview-label">最近失败</span>
<span class="config-overview-value">{% raw %}{{ selectedPlugin.execution_summary.last_failure_at_text || '-' }}{% endraw %}</span>
</div>
<div class="config-overview-item">
<span class="config-overview-label">最近错误</span>
<span class="config-overview-value">{% raw %}{{ selectedPlugin.execution_summary.last_error_message || '无' }}{% endraw %}</span>
</div>
</div>
<div class="entity-subtitle" style="margin-top: 8px;">
{% raw %}{{ selectedPlugin.execution_summary.summary || '暂无执行摘要' }}{% endraw %}
</div>
</el-descriptions-item>
<el-descriptions-item label="治理诊断" :span="2" v-if="selectedPlugin.governance_diagnostics">
<div v-if="selectedPlugin.governance_diagnostics.length > 0" class="diagnostic-list">
<div
@@ -627,50 +494,6 @@
governanceRiskCount() {
return (this.plugins || []).filter(plugin => ['warning', 'error'].includes((plugin.governance_status || '').toLowerCase())).length;
},
executionRiskCount() {
// 这里把执行风险单独统计出来,和治理告警区分开:
// 治理告警偏配置/依赖/加载问题,执行风险偏运行过程中的失败、超时与熔断。
return (this.plugins || []).filter(plugin => ['warning', 'error'].includes((((plugin.execution_summary || {}).status) || '').toLowerCase())).length;
},
openCircuitCount() {
return (this.plugins || []).filter(plugin => ((((plugin.execution_summary || {}).circuit_state) || '').toLowerCase() === 'open')).length;
},
topRiskPlugins() {
// 风险排行优先按熔断状态、执行状态和连续失败次数排序,
// 让页面顶部尽量把“最值得先排查”的插件顶上来。
const statusPriority = {
error: 0,
warning: 1,
info: 2,
healthy: 3
};
return (this.plugins || [])
.filter(plugin => ['warning', 'error'].includes((((plugin.execution_summary || {}).status) || '').toLowerCase()))
.slice()
.sort((left, right) => {
const leftSummary = left.execution_summary || {};
const rightSummary = right.execution_summary || {};
const leftPriority = statusPriority[(leftSummary.status || 'info').toLowerCase()];
const rightPriority = statusPriority[(rightSummary.status || 'info').toLowerCase()];
return (
(typeof leftPriority === 'number' ? leftPriority : 9) - (typeof rightPriority === 'number' ? rightPriority : 9)
|| Number(rightSummary.consecutive_failures || 0) - Number(leftSummary.consecutive_failures || 0)
|| Number(rightSummary.failure_count_total || 0) - Number(leftSummary.failure_count_total || 0)
|| Number(rightSummary.timeout_count_total || 0) - Number(leftSummary.timeout_count_total || 0)
);
})
.slice(0, 5);
},
slowestPlugins() {
// 慢插件排行只看有执行样本的插件,避免未执行插件把榜单冲掉。
return (this.plugins || [])
.filter(plugin => Number((plugin.execution_summary || {}).total_executions || 0) > 0)
.slice()
.sort((left, right) => {
return Number((right.execution_summary || {}).last_process_time_ms || 0) - Number((left.execution_summary || {}).last_process_time_ms || 0);
})
.slice(0, 5);
},
// 弹窗宽度按视口分级收缩,保证手机上弹窗内容不会贴边或继续触发横向溢出。
pluginInfoDialogWidth() {
return this.isMobileViewport ? '94%' : '64%';
@@ -707,7 +530,7 @@
},
pluginStatusLabel(plugin) {
if (plugin && plugin.status_label) return plugin.status_label;
const normalizedStatus = String((plugin && plugin.status) || '').toUpperCase();
const normalizedStatus = String(plugin?.status || '').toUpperCase();
const mapping = {
RUNNING: '运行中',
STOPPED: '已停用',
@@ -735,27 +558,10 @@
};
return mapping[normalizedLevel] || '提示';
},
executionTagType(level) {
const normalizedLevel = String(level || '').toLowerCase();
if (normalizedLevel === 'error') return 'danger';
if (normalizedLevel === 'warning') return 'warning';
if (normalizedLevel === 'healthy') return 'success';
return 'info';
},
executionLabel(level) {
const normalizedLevel = String(level || '').toLowerCase();
const mapping = {
healthy: '稳定',
warning: '需关注',
error: '高风险',
info: '暂无样本'
};
return mapping[normalizedLevel] || '暂无样本';
},
governanceIssueSummary(plugin) {
const errorCount = Number((plugin && plugin.governance_error_count) || 0);
const warningCount = Number((plugin && plugin.governance_warning_count) || 0);
const infoCount = Number((plugin && plugin.governance_info_count) || 0);
const errorCount = Number(plugin?.governance_error_count || 0);
const warningCount = Number(plugin?.governance_warning_count || 0);
const infoCount = Number(plugin?.governance_info_count || 0);
if (errorCount > 0 || warningCount > 0) {
return `错误 ${errorCount} / 告警 ${warningCount}`;
}
@@ -764,16 +570,6 @@
}
return '暂无治理问题';
},
formatPercent(value) {
const normalizedValue = Number(value || 0);
if (!Number.isFinite(normalizedValue)) return '0.00%';
return `${normalizedValue.toFixed(2)}%`;
},
formatDurationMs(value) {
const normalizedValue = Number(value || 0);
if (!Number.isFinite(normalizedValue) || normalizedValue <= 0) return '-';
return `${normalizedValue.toFixed(2)} ms`;
},
loadPlugins() {
this.loading = true;
axios.get('/api/plugins')
@@ -891,7 +687,7 @@
})
.catch(error => {
console.error('保存配置出错:', error);
this.configError = '保存配置出错: ' + (((error.response || {}).data || {}).message || error.message);
this.configError = '保存配置出错: ' + (error.response?.data?.message || error.message);
});
} catch (e) {
this.configError = '处理配置时出错: ' + e.message;
@@ -1058,7 +854,6 @@
font-size: 14px;
}
.overview-grid .el-col { margin-bottom: 16px; }
.insight-grid .el-col { margin-bottom: 16px; }
.overview-card { min-height: 112px; }
.overview-card--primary {
background: linear-gradient(180deg, rgba(79,70,229,0.10), rgba(255,255,255,0.94)) !important;
@@ -1074,64 +869,6 @@
}
.workspace-header h3 { font-size: 18px; margin-bottom: 4px; }
.workspace-header p { font-size: 13px; color: #64748b; }
.rank-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.rank-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px;
border-radius: 16px;
background: rgba(248,250,252,0.82);
border: 1px solid rgba(148,163,184,0.12);
}
.rank-item__index {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(79,70,229,0.10);
color: #4f46e5;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.rank-item__content {
flex: 1;
min-width: 0;
}
.rank-item__title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.rank-item__title,
.rank-item__value {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.rank-item__summary {
font-size: 13px;
line-height: 1.7;
color: #475569;
word-break: break-word;
}
.rank-item__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 8px;
font-size: 12px;
color: #94a3b8;
}
.entity-cell { display: flex; align-items: center; gap: 12px; }
.entity-badge {
width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center;
@@ -1166,28 +903,6 @@
color: #94a3b8;
line-height: 1.4;
}
.execution-cell {
display: flex;
flex-direction: column;
gap: 6px;
}
.execution-cell__head {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.execution-cell__metric {
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.execution-cell__summary {
font-size: 12px;
color: #94a3b8;
line-height: 1.6;
word-break: break-word;
}
.config-overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
@@ -1364,10 +1079,6 @@
.mobile-plugin-card__header {
flex-direction: column;
}
.rank-item__title-row {
flex-direction: column;
align-items: flex-start;
}
.mobile-plugin-card__actions .el-button,
.mobile-group-card__actions .el-button {
flex: 1 1 calc(50% - 8px);