This is an automated email from the ASF dual-hosted git repository.
zhaoqingran pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/hertzbeat.git
The following commit(s) were added to refs/heads/master by this push:
new a806ca1319 [Feature] Enhance draggable UI elements in alert settings
(#3915) (#3917)
a806ca1319 is described below
commit a806ca1319a50393e2c06ddd09089975b3ee08ee
Author: KOYR <[email protected]>
AuthorDate: Wed Dec 17 09:33:23 2025 +0800
[Feature] Enhance draggable UI elements in alert settings (#3915) (#3917)
---
.../routes/alert/alert-setting/alert-setting.component.html | 4 ++--
.../routes/alert/alert-setting/alert-setting.component.less | 10 +++++++---
2 files changed, 9 insertions(+), 5 deletions(-)
diff --git
a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
index f1e726e893..224e315a56 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
@@ -860,7 +860,7 @@
<nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' |
i18n">
<div class="template-input-wrapper">
<div *ngIf="define.type === 'realtime_metric' || define.type ===
'realtime_log'" class="draggable-vars-container">
- <div *ngIf="define.type === 'realtime_metric'">
+ <div *ngIf="define.type === 'realtime_metric'"
class="draggable-box">
<div *ngFor="let env of templateEnvVars" class="draggable-tag"
draggable="true" (dragstart)="onDragStart($event, env)">
<div class="key-value-block">
<span class="var-key">{{ env.name }}</span>
@@ -875,7 +875,7 @@
</div>
</div>
</div>
- <div *ngIf="define.type === 'realtime_log'">
+ <div *ngIf="define.type === 'realtime_log'"
class="draggable-box">
<div *ngFor="let field of logFields" class="draggable-tag"
draggable="true" (dragstart)="onDragStart($event, field)">
<div class="key-value-block">
<span class="var-key">{{ '${' + field.value + '}' }}</span>
diff --git
a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less
b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less
index b696ba5e1d..18fb75f8c2 100644
--- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less
+++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.less
@@ -240,13 +240,17 @@
}
.draggable-vars-container {
+ border: 1px dashed fade(@primary-color, 30%);
+ margin-bottom: 16px;
+ }
+
+ .draggable-box {
display: flex;
flex-wrap: wrap;
gap: 10px;
- margin-bottom: 16px;
padding: 12px;
- border: 1px dashed fade(@primary-color, 30%);
- border-radius: 6px;
+ max-height: 480px;
+ overflow-y: auto;
@media (max-width: 768px) {
flex-direction: column;
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
