优化系统健康评分与缓存监测
This commit is contained in:
Cheng Zhou
@@ -15,6 +15,17 @@ vi.mock("@/api/projectPermissions", () => ({
|
||||
cache_metrics: {
|
||||
total_accesses: 1000, cache_hits: 850, cache_misses: 150,
|
||||
cache_invalidations: 5, hit_rate: 85.0, miss_rate: 15.0,
|
||||
window_seconds: 3600, scope: "sliding_window",
|
||||
by_cache: {
|
||||
project_permissions: {
|
||||
total_accesses: 800, cache_hits: 700, cache_misses: 100,
|
||||
cache_invalidations: 5, hit_rate: 87.5, miss_rate: 12.5,
|
||||
},
|
||||
member_roles: {
|
||||
total_accesses: 200, cache_hits: 150, cache_misses: 50,
|
||||
cache_invalidations: 5, hit_rate: 75, miss_rate: 25,
|
||||
},
|
||||
},
|
||||
},
|
||||
uptime_seconds: 3600,
|
||||
},
|
||||
@@ -22,7 +33,21 @@ vi.mock("@/api/projectPermissions", () => ({
|
||||
fetchPermissionHealth: vi.fn().mockResolvedValue({
|
||||
data: {
|
||||
status: "healthy", health_score: 95, issues: [],
|
||||
metrics: {}, cache_stats: { cache_items: { total_count: 60 }, cache_metrics: {} },
|
||||
sample_sufficient: true,
|
||||
score_breakdown: {
|
||||
performance: { weight: 40, deduction: 0 },
|
||||
deny_rate: { weight: 20, deduction: 0 },
|
||||
cache: {
|
||||
weight: 25, deduction: 5, sample_sufficient: true,
|
||||
scope: "sliding_window", window_seconds: 3600,
|
||||
},
|
||||
alerts: { weight: 15, deduction: 0 },
|
||||
},
|
||||
last_hour: {
|
||||
total_checks: 30, denied_checks: 2, deny_rate: 6.67,
|
||||
avg_elapsed_ms: 3.5, error_alerts: 0, warning_alerts: 0,
|
||||
},
|
||||
cache_stats: { cache_items: { total_count: 60 }, cache_metrics: {} },
|
||||
},
|
||||
}),
|
||||
fetchPermissionAlerts: vi.fn().mockResolvedValue({ data: { total: 0, alerts: [] } }),
|
||||
@@ -94,7 +119,7 @@ describe("PermissionMonitoring.vue", () => {
|
||||
it("resizes the source-analysis chart when its tab becomes active", () => {
|
||||
const source = readFileSync(resolve(__dirname, "./PermissionMonitoring.vue"), "utf8");
|
||||
|
||||
expect(source).toContain('import { ref, computed, h, nextTick, onMounted } from "vue"');
|
||||
expect(source).toContain("onUnmounted");
|
||||
expect(source).toContain("type IpLocationsExpose");
|
||||
expect(source).toContain("resize: () => void | Promise<void>");
|
||||
expect(source).toContain('if (tab === "ip-locations")');
|
||||
|
||||
@@ -44,24 +44,37 @@
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
<div class="score-breakdown">
|
||||
<span v-for="item in healthScoreItems" :key="item.label">
|
||||
{{ item.label }} {{ item.deduction ? `-${item.deduction}` : "正常" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="!health.sample_sufficient" class="sample-warning">
|
||||
近 1 小时仅 {{ health.last_hour.total_checks }} 次检查，样本不足，当前评分仅供参考
|
||||
</div>
|
||||
<div v-if="health.issues.length > 0" class="health-issues">
|
||||
<div v-for="(issue, index) in health.issues" :key="index" class="issue-item">
|
||||
<span class="issue-dot" />
|
||||
<span>{{ issue }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="health-ok">
|
||||
<div v-else-if="health.sample_sufficient" class="health-ok">
|
||||
<span class="ok-icon">✓</span>
|
||||
<span>系统运行正常，未发现问题</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="metrics" class="cache-card">
|
||||
<h3>缓存效率</h3>
|
||||
<div class="cache-title">
|
||||
<h3>缓存效率</h3>
|
||||
<span>近 1 小时</span>
|
||||
</div>
|
||||
<div class="cache-stats">
|
||||
<div class="cache-stat primary">
|
||||
<div class="cache-stat-header">
|
||||
<span class="stat-label">命中率</span>
|
||||
<span class="stat-label">
|
||||
综合命中率（{{ metrics.cache_metrics.cache_hits }}/{{ metrics.cache_metrics.total_accesses }}）
|
||||
</span>
|
||||
<strong class="stat-value" :style="{ color: getProgressColor(metrics.cache_metrics.hit_rate) }">
|
||||
{{ metrics.cache_metrics.hit_rate.toFixed(1) }}%
|
||||
</strong>
|
||||
@@ -73,6 +86,22 @@
|
||||
:show-text="false"
|
||||
/>
|
||||
</div>
|
||||
<div class="cache-scope-details">
|
||||
<span>
|
||||
项目权限
|
||||
{{ metrics.cache_metrics.by_cache.project_permissions.hit_rate.toFixed(1) }}%
|
||||
（{{ metrics.cache_metrics.by_cache.project_permissions.cache_hits }}/{{
|
||||
metrics.cache_metrics.by_cache.project_permissions.total_accesses
|
||||
}}）
|
||||
</span>
|
||||
<span>
|
||||
成员角色
|
||||
{{ metrics.cache_metrics.by_cache.member_roles.hit_rate.toFixed(1) }}%
|
||||
（{{ metrics.cache_metrics.by_cache.member_roles.cache_hits }}/{{
|
||||
metrics.cache_metrics.by_cache.member_roles.total_accesses
|
||||
}}）
|
||||
</span>
|
||||
</div>
|
||||
<div class="cache-stat-row">
|
||||
<div class="cache-stat-mini">
|
||||
<span class="stat-label">缓存项目</span>
|
||||
@@ -173,7 +202,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, h, nextTick, onMounted } from "vue";
|
||||
import { ref, computed, h, nextTick, onMounted, onUnmounted } from "vue";
|
||||
import type {
|
||||
PermissionMetricsResponse,
|
||||
AlertsResponse,
|
||||
@@ -304,6 +333,16 @@ const summaryCards = computed(() => {
|
||||
];
|
||||
});
|
||||
|
||||
const healthScoreItems = computed(() => {
|
||||
if (!health.value) return [];
|
||||
return [
|
||||
{ label: "性能", deduction: health.value.score_breakdown.performance.deduction },
|
||||
{ label: "拒绝率", deduction: health.value.score_breakdown.deny_rate.deduction },
|
||||
{ label: "缓存", deduction: health.value.score_breakdown.cache.deduction },
|
||||
{ label: "告警", deduction: health.value.score_breakdown.alerts.deduction },
|
||||
];
|
||||
});
|
||||
|
||||
const loadOverviewData = async () => {
|
||||
const [metricsRes, healthRes, alertsRes, deniedRes, summaryRes] = await Promise.allSettled([
|
||||
fetchPermissionMetrics(),
|
||||
@@ -335,7 +374,18 @@ const refresh = () => {
|
||||
else if (activeTab.value === "ip-locations") ipLocationsRef.value?.refresh();
|
||||
};
|
||||
|
||||
onMounted(loadOverviewData);
|
||||
let overviewRefreshTimer: number | undefined;
|
||||
|
||||
onMounted(() => {
|
||||
loadOverviewData();
|
||||
overviewRefreshTimer = window.setInterval(() => {
|
||||
if (activeTab.value === "overview") loadOverviewData();
|
||||
}, 60_000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (overviewRefreshTimer !== undefined) window.clearInterval(overviewRefreshTimer);
|
||||
});
|
||||
|
||||
defineExpose({ refresh });
|
||||
</script>
|
||||
@@ -632,6 +682,32 @@ defineExpose({ refresh });
|
||||
padding: 8px 0 16px;
|
||||
}
|
||||
|
||||
.score-breakdown {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: -6px 0 12px;
|
||||
}
|
||||
|
||||
.score-breakdown span {
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
background: #f1f5f9;
|
||||
color: var(--mon-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sample-warning {
|
||||
margin-bottom: 10px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 10px;
|
||||
background: #fffbeb;
|
||||
color: #b45309;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.score-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -699,6 +775,36 @@ defineExpose({ refresh });
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.cache-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.cache-title h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cache-title span {
|
||||
color: var(--mon-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cache-scope-details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cache-scope-details span {
|
||||
flex: 1 1 180px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
color: var(--mon-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cache-stat.primary {
|
||||
padding: 14px;
|
||||
background: #f8fafc;
|
||||
|
||||
@@ -238,7 +238,7 @@ export interface PermissionCheckMetrics {
|
||||
errors: number;
|
||||
}
|
||||
|
||||
export interface CacheMetrics {
|
||||
export interface CacheMetricCounts {
|
||||
total_accesses: number;
|
||||
cache_hits: number;
|
||||
cache_misses: number;
|
||||
@@ -247,6 +247,15 @@ export interface CacheMetrics {
|
||||
miss_rate: number;
|
||||
}
|
||||
|
||||
export interface CacheMetrics extends CacheMetricCounts {
|
||||
window_seconds: number;
|
||||
scope: "sliding_window";
|
||||
by_cache: {
|
||||
project_permissions: CacheMetricCounts;
|
||||
member_roles: CacheMetricCounts;
|
||||
};
|
||||
}
|
||||
|
||||
export interface PermissionMetricsResponse {
|
||||
check_metrics: PermissionCheckMetrics;
|
||||
cache_metrics: CacheMetrics;
|
||||
@@ -279,10 +288,33 @@ export interface HealthResponse {
|
||||
status: "healthy" | "degraded" | "unhealthy";
|
||||
health_score: number;
|
||||
issues: string[];
|
||||
metrics: PermissionMetricsResponse;
|
||||
sample_sufficient: boolean;
|
||||
score_breakdown: {
|
||||
performance: HealthScoreItem;
|
||||
deny_rate: HealthScoreItem;
|
||||
cache: HealthScoreItem & {
|
||||
sample_sufficient: boolean;
|
||||
scope: "sliding_window";
|
||||
window_seconds: number;
|
||||
};
|
||||
alerts: HealthScoreItem;
|
||||
};
|
||||
last_hour: {
|
||||
total_checks: number;
|
||||
denied_checks: number;
|
||||
deny_rate: number;
|
||||
avg_elapsed_ms: number;
|
||||
error_alerts: number;
|
||||
warning_alerts: number;
|
||||
};
|
||||
cache_stats: CacheStatsResponse;
|
||||
}
|
||||
|
||||
export interface HealthScoreItem {
|
||||
weight: number;
|
||||
deduction: number;
|
||||
}
|
||||
|
||||
// 系统监测 - 访问日志
|
||||
export interface AccessLogItem {
|
||||
id: string;
|
||||
|
||||
@@ -1184,6 +1184,40 @@ const onSubmit = async () => {
|
||||
响应式断点适配
|
||||
═══════════════════════ */
|
||||
|
||||
/* 大屏保持 1:1 分栏，通过扩大有效内容区改善内容密度 */
|
||||
@media (min-width: 1440px) {
|
||||
.login-left-brand {
|
||||
flex: 1;
|
||||
padding: clamp(64px, 5vw, 96px);
|
||||
}
|
||||
|
||||
.login-right-form {
|
||||
flex: 1;
|
||||
padding: clamp(64px, 6vw, 112px);
|
||||
}
|
||||
|
||||
.brand-slogan-block,
|
||||
.brand-features-grid {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.brand-main-title {
|
||||
font-size: clamp(38px, 2.4vw, 48px);
|
||||
}
|
||||
|
||||
.brand-sub-desc {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.login-card-container {
|
||||
max-width: 440px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.login-left-brand {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user