Skip to content

Fix: 优化告警记录页面，限制了每一个告警栏中的各个标签的展示长度 #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 11, 2025
Merged

Fix: 优化告警记录页面，限制了每一个告警栏中的各个标签的展示长度 #102

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion client/src/views/AlertsView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -656,7 +656,7 @@ onMounted(() => {
.alert-content {
display: flex;
align-items: flex-start;
gap: 12px;
gap: 16px;
padding: 16px;
}

Expand All @@ -677,36 +677,58 @@ onMounted(() => {

.alert-info {
flex: 1;
min-width: 0;
overflow: hidden;
}

.alert-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
flex-wrap: wrap;
}

.alert-title {
font-size: 16px;
font-weight: 600;
color: #1e293b;
line-height: 1.4;
word-break: break-word;
overflow-wrap: break-word;
flex: 1;
min-width: 0;
}

.alert-badges {
display: flex;
gap: 8px;
flex-shrink: 0;
}

.alert-labels {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 8px;
max-width: 100%;
}

.label-tag {
font-size: 12px;
max-width: 200px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Enhancement Suggestion: Add a tooltip to show full label content when truncated. Users may need to see the complete label text for security auditing or troubleshooting.

<el-tag 
  v-for="label in alert.labels" 
  :key="label.key"
  size="small" 
  type="info" 
  class="label-tag"
  :title="`${label.key}=${label.value}`"
>
  {{ label.key }}={{ label.value }}
</el-tag>

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: ltr;
}
Comment on lines 717 to +725
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

在 .label-tag 规则中，overflow, text-overflow 和 white-space 属性是多余的。因为这些属性已经在 :deep(.el-tag__content) 选择器中为内部元素设置了，而文本截断正是在该内部元素上发生的。为了保持CSS的简洁和可维护性，建议从父元素中移除这些重复的属性。我还建议添加 vertical-align: middle; 以改善标签与其他行内元素的对齐。

.label-tag {
  font-size: 12px;
  max-width: 200px;
  display: inline-block;
  direction: ltr;
  vertical-align: middle;
}


.label-tag :deep(.el-tag__content) {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.alert-time {
Expand All @@ -718,6 +740,8 @@ onMounted(() => {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-left: auto;
}

.analysis-dialog {
Expand Down