mirror of
https://github.com/dromara/hertzbeat.git
synced 2026-09-17 09:40:58 +00:00
[webapp] update and fix alert ui when theme dark (#3082)
This commit is contained in:
@@ -38,22 +38,6 @@
|
||||
border-radius: 6px;
|
||||
padding: 4px 11px 4px 40px;
|
||||
}
|
||||
|
||||
.ant-input-prefix {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper {
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -390,6 +374,59 @@
|
||||
:host {
|
||||
.alert-card {
|
||||
background-color: @common-background-color-dark;
|
||||
.alert-header {
|
||||
.alert-info {
|
||||
.alert-meta-info {
|
||||
color: rgb(214, 214, 214);
|
||||
}
|
||||
}
|
||||
}
|
||||
.alert-details {
|
||||
::ng-deep {
|
||||
.ant-collapse {
|
||||
.ant-collapse-item {
|
||||
.ant-collapse-header {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.ant-collapse-extra {
|
||||
color: rgb(236, 236, 236);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-section {
|
||||
.section-title {
|
||||
color: #cdcdcd;
|
||||
}
|
||||
.alert-count {
|
||||
color: #ececec;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-annotations {
|
||||
.annotation-item {
|
||||
.annotation-key {
|
||||
color: #dfdede;
|
||||
}
|
||||
.annotation-value {
|
||||
color: #e3e3e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-info {
|
||||
.time-item {
|
||||
.time-label {
|
||||
color: #dfdede;
|
||||
}
|
||||
.time-value {
|
||||
color: #e3e3e3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,12 +77,13 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.group-converge.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'alert.group-converge.group-labels' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="14%">{{ 'alert.group-converge.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%">{{ 'alert.group-converge.group-labels' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%">{{ 'alert.group-converge.group-wait' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%">{{ 'alert.group-converge.group-interval' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%">{{ 'alert.group-converge.repeat-interval' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="8%" nzRight>{{ 'alert.group-converge.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%" nzRight>{{ 'common.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="14%">{{ 'common.edit-time' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%" nzRight>{{ 'common.edit' | i18n }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -101,6 +102,7 @@
|
||||
<td nzAlign="center" nzRight>
|
||||
<nz-switch [(ngModel)]="data.enable" (ngModelChange)="updateGroupConverge(data)" name="enable"></nz-switch>
|
||||
</td>
|
||||
<td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
|
||||
<td nzAlign="center" nzRight>
|
||||
<div class="actions">
|
||||
<button
|
||||
|
||||
@@ -78,10 +78,11 @@
|
||||
<tr>
|
||||
<th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.inhibit.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'alert.inhibit.source_labels' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'alert.inhibit.target_labels' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="18%">{{ 'alert.inhibit.source_labels' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="18%">{{ 'alert.inhibit.target_labels' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.inhibit.equal_labels' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="8%" nzRight>{{ 'common.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%" nzRight>{{ 'common.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="14%">{{ 'common.edit-time' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%" nzRight>{{ 'common.edit' | i18n }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -101,6 +102,7 @@
|
||||
<td nzAlign="center" nzRight>
|
||||
<nz-switch [(ngModel)]="data.enable" (ngModelChange)="updateInhibit(data)" name="enable"></nz-switch>
|
||||
</td>
|
||||
<td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
|
||||
<td nzAlign="center" nzRight>
|
||||
<div class="actions">
|
||||
<button nz-button nzType="primary" (click)="editInhibit(data.id)" nz-tooltip [nzTooltipTitle]="'alert.inhibit.edit' | i18n">
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
{{ 'common.button.copy' | i18n }}
|
||||
</button>
|
||||
</div>
|
||||
<div style="padding: 12px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: #f5f5f5; word-wrap: break-word">
|
||||
<div style="padding: 12px; border: 1px solid; border-radius: 4px; word-wrap: break-word">
|
||||
{{ token }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+20
-11
@@ -55,9 +55,9 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.notice.receiver.people' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'alert.notice.receiver.type' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'alert.notice.receiver.setting' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'common.edit-time' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.notice.receiver.type' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="25%">{{ 'alert.notice.receiver.setting' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'common.edit-time' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%" nzRight>{{ 'common.edit' | i18n }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -152,15 +152,24 @@
|
||||
>
|
||||
<i nz-icon nzTheme="outline" nzType="edit"></i>
|
||||
</button>
|
||||
<button
|
||||
(click)="onDeleteOneNoticeReceiver(data.id)"
|
||||
[nzTooltipTitle]="'alert.notice.receiver.delete' | i18n"
|
||||
nz-button
|
||||
nz-tooltip
|
||||
nzDanger
|
||||
>
|
||||
<i nz-icon nzTheme="outline" nzType="delete"></i>
|
||||
<button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
|
||||
<span nz-icon nzType="ellipsis"></span>
|
||||
</button>
|
||||
<nz-dropdown-menu #more_menu="nzDropdownMenu">
|
||||
<ul nz-menu>
|
||||
<li nz-menu-item>
|
||||
<button
|
||||
(click)="onDeleteOneNoticeReceiver(data.id)"
|
||||
[nzTooltipTitle]="'alert.notice.receiver.delete' | i18n"
|
||||
nz-button
|
||||
nz-tooltip
|
||||
nzDanger
|
||||
>
|
||||
<i nz-icon nzTheme="outline" nzType="delete"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nz-dropdown-menu>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
+22
-13
@@ -54,13 +54,13 @@
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.notice.rule.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.notice.receiver.people' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.notice.template.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%">{{ 'alert.notice.rule.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%">{{ 'alert.notice.receiver.people' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%">{{ 'alert.notice.template.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%">{{ 'alert.notice.rule.all' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%">{{ 'common.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'common.edit-time' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%" nzRight>{{ 'common.edit' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="14%">{{ 'common.edit-time' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%" nzRight>{{ 'common.edit' | i18n }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -95,15 +95,24 @@
|
||||
>
|
||||
<i nz-icon nzTheme="outline" nzType="edit"></i>
|
||||
</button>
|
||||
<button
|
||||
(click)="onDeleteOneNoticeRule(data.id)"
|
||||
[nzTooltipTitle]="'alert.notice.rule.delete' | i18n"
|
||||
nz-button
|
||||
nz-tooltip
|
||||
nzDanger
|
||||
>
|
||||
<i nz-icon nzTheme="outline" nzType="delete"></i>
|
||||
<button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
|
||||
<span nz-icon nzType="ellipsis"></span>
|
||||
</button>
|
||||
<nz-dropdown-menu #more_menu="nzDropdownMenu">
|
||||
<ul nz-menu>
|
||||
<li nz-menu-item>
|
||||
<button
|
||||
(click)="onDeleteOneNoticeRule(data.id)"
|
||||
[nzTooltipTitle]="'alert.notice.rule.delete' | i18n"
|
||||
nz-button
|
||||
nz-tooltip
|
||||
nzDanger
|
||||
>
|
||||
<i nz-icon nzTheme="outline" nzType="delete"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nz-dropdown-menu>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
+2
-2
@@ -57,7 +57,7 @@
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th nzAlign="center" nzWidth="25%">{{ 'alert.notice.template.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'alert.notice.template.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.notice.template.type' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.notice.template.preset' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'common.edit-time' | i18n }}</th>
|
||||
@@ -244,7 +244,7 @@
|
||||
[(ngModel)]="template.content"
|
||||
id="template_content_example"
|
||||
name="template_content"
|
||||
style="white-space: nowrap; overflow: scroll; width: 100%; height: 200px"
|
||||
class="textarea"
|
||||
type="textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
@import "~src/styles/theme";
|
||||
|
||||
.textarea {
|
||||
white-space: nowrap;
|
||||
overflow: scroll;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: #c6bfbf;
|
||||
}
|
||||
|
||||
@@ -93,12 +93,13 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
|
||||
<th nzAlign="center" nzWidth="10%">{{ 'alert.setting.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%">{{ 'alert.setting.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="8%">{{ 'alert.setting.type' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="24%">{{ 'alert.setting.expr' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="20%">{{ 'alert.setting.template' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="8%">{{ 'label.bind' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="8%" nzRight>{{ 'alert.setting.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.setting.expr' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'alert.setting.template' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="15%">{{ 'label.bind' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="8%" nzRight>{{ 'common.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="14%">{{ 'common.edit-time' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="8%" nzRight>{{ 'common.edit' | i18n }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -116,16 +117,19 @@
|
||||
<span>{{ 'alert.setting.type.periodic' | i18n }}</span>
|
||||
</nz-tag>
|
||||
</td>
|
||||
<td nzAlign="center">
|
||||
<td nzAlign="center" nzEllipsis nz-tooltip [nzTooltipTitle]="data.expr">
|
||||
<span>{{ data.expr }}</span>
|
||||
</td>
|
||||
<td nzAlign="center">{{ data.template }}</td>
|
||||
<td nzAlign="center" nzEllipsis nz-tooltip [nzTooltipTitle]="data.template">
|
||||
<span>{{ data.template }}</span>
|
||||
</td>
|
||||
<td nzAlign="center">
|
||||
<nz-tag *ngFor="let item of data.labels | keyvalue">{{ item.key }}:{{ item.value }}</nz-tag>
|
||||
</td>
|
||||
<td nzAlign="center" nzRight>
|
||||
<nz-switch [(ngModel)]="data.enable" (ngModelChange)="updateAlertDefine(data)" name="enable"></nz-switch>
|
||||
</td>
|
||||
<td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
|
||||
<td nzAlign="center" nzRight>
|
||||
<div class="actions">
|
||||
<button
|
||||
@@ -285,12 +289,7 @@
|
||||
<nz-form-item *ngIf="define.type == 'realtime' && cascadeValues.length > 0 && cascadeValues[1] !== 'availability' && !isExpr">
|
||||
<nz-form-label [nzSpan]="7" [nzNoColon]="true"></nz-form-label>
|
||||
<nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n" [nzValidateStatus]="qbFormCtrl">
|
||||
<ngx-query-builder
|
||||
[classNames]="qbClassNames"
|
||||
[config]="qbConfig"
|
||||
[formControl]="qbFormCtrl"
|
||||
[ngStyle]="{ background: 'ghostwhite', borderRadius: '4px' }"
|
||||
>
|
||||
<ngx-query-builder [classNames]="qbClassNames" [config]="qbConfig" [formControl]="qbFormCtrl" [ngStyle]="{ borderRadius: '4px' }">
|
||||
<ng-container *querySwitchGroup="let rule; let onChange = onChange">
|
||||
<nz-radio-group
|
||||
style="white-space: nowrap"
|
||||
|
||||
@@ -246,8 +246,7 @@
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background: #fafafa;
|
||||
border: 1px dashed @border-color;
|
||||
border: 1px dashed fade(@primary-color, 30%);
|
||||
border-radius: 6px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -258,7 +257,6 @@
|
||||
.draggable-tag {
|
||||
padding: 8px 12px;
|
||||
min-width: 140px;
|
||||
background: #f0f5ff;
|
||||
border: 1px solid fade(@primary-color, 30%);
|
||||
border-radius: 4px;
|
||||
cursor: move;
|
||||
|
||||
@@ -77,11 +77,12 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th nzAlign="center" nzLeft nzWidth="3%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
|
||||
<th nzAlign="center" nzWidth="7%">{{ 'alert.silence.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="7%">{{ 'alert.silence.type' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="10%">{{ 'alert.silence.times' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="3%" nzRight>{{ 'alert.silence.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="5%" nzRight>{{ 'common.edit' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="14%">{{ 'alert.silence.name' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%">{{ 'alert.silence.type' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%">{{ 'alert.silence.times' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%" nzRight>{{ 'common.enable' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="14%">{{ 'common.edit-time' | i18n }}</th>
|
||||
<th nzAlign="center" nzWidth="12%" nzRight>{{ 'common.edit' | i18n }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -109,6 +110,7 @@
|
||||
<td nzAlign="center" nzRight>
|
||||
<nz-switch [(ngModel)]="data.enable" (ngModelChange)="updateAlertSilence(data)" name="enable"></nz-switch>
|
||||
</td>
|
||||
<td nzAlign="center">{{ (data.gmtUpdate ? data.gmtUpdate : data.gmtCreate) | date : 'YYYY-MM-dd HH:mm:ss' }}</td>
|
||||
<td nzAlign="center" nzRight>
|
||||
<div class="actions">
|
||||
<button
|
||||
|
||||
@@ -223,13 +223,7 @@
|
||||
<nz-dropdown-menu #more_menu="nzDropdownMenu">
|
||||
<ul nz-menu>
|
||||
<li nz-menu-item>
|
||||
<button
|
||||
nz-button
|
||||
nzType="primary"
|
||||
(click)="onEditOneMonitor(data.id)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="'monitor.edit-monitor' | i18n"
|
||||
>
|
||||
<button nz-button (click)="onEditOneMonitor(data.id)" nz-tooltip [nzTooltipTitle]="'monitor.edit-monitor' | i18n">
|
||||
<i nz-icon nzType="edit" nzTheme="outline"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
@@ -167,16 +167,25 @@
|
||||
>
|
||||
<i nz-icon nzType="down-circle" nzTheme="outline"></i>
|
||||
</button>
|
||||
<button
|
||||
[disabled]="data.collector.name == 'main-default-collector'"
|
||||
nz-button
|
||||
nzDanger
|
||||
(click)="onDeleteOneCollector(data.collector.name)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="'collector.delete' | i18n"
|
||||
>
|
||||
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
||||
<button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
|
||||
<span nz-icon nzType="ellipsis"></span>
|
||||
</button>
|
||||
<nz-dropdown-menu #more_menu="nzDropdownMenu">
|
||||
<ul nz-menu>
|
||||
<li nz-menu-item>
|
||||
<button
|
||||
[disabled]="data.collector.name == 'main-default-collector'"
|
||||
nz-button
|
||||
nzDanger
|
||||
(click)="onDeleteOneCollector(data.collector.name)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="'collector.delete' | i18n"
|
||||
>
|
||||
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nz-dropdown-menu>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -110,9 +110,18 @@
|
||||
>
|
||||
<i nz-icon nzType="edit" nzTheme="outline"></i>
|
||||
</button>
|
||||
<button nz-button nzDanger (click)="onDeleteOnePlugin(data.id)" nz-tooltip [nzTooltipTitle]="'plugin.delete' | i18n">
|
||||
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
||||
<button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
|
||||
<span nz-icon nzType="ellipsis"></span>
|
||||
</button>
|
||||
<nz-dropdown-menu #more_menu="nzDropdownMenu">
|
||||
<ul nz-menu>
|
||||
<li nz-menu-item>
|
||||
<button nz-button nzDanger (click)="onDeleteOnePlugin(data.id)" nz-tooltip [nzTooltipTitle]="'plugin.delete' | i18n">
|
||||
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nz-dropdown-menu>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -18,27 +18,27 @@
|
||||
-->
|
||||
|
||||
<nz-spin [nzSpinning]="loading">
|
||||
<div nz-row *ngIf="config">
|
||||
<div nz-col nzSpan="12">
|
||||
<form nz-form #objectStoreForm="ngForm" (submit)="onSaveObjectStore()">
|
||||
<div class="main" *ngIf="config">
|
||||
<div class="left">
|
||||
<form nz-form nzLayout="vertical" #objectStoreForm="ngForm" (submit)="onSaveObjectStore()">
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSpan]="8" nzFor="config.type" nzRequired="true">{{ 'settings.object-store.type' | i18n }}</nz-form-label>
|
||||
<nz-select
|
||||
[(ngModel)]="config.type"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
style="text-align: center; font-weight: bolder"
|
||||
[nzDropdownStyle]="{ 'font-weight': 'bolder', 'font-size': 'larger' }"
|
||||
(ngModelChange)="onChange()"
|
||||
>
|
||||
<nz-option [nzValue]="ObjectStoreType.FILE" [nzLabel]="'settings.object-store.type.file' | i18n"></nz-option>
|
||||
<nz-option [nzValue]="ObjectStoreType.DATABASE" [nzLabel]="'settings.object-store.type.database' | i18n"></nz-option>
|
||||
<nz-option [nzValue]="ObjectStoreType.OBS" [nzLabel]="'settings.object-store.type.obs' | i18n"></nz-option>
|
||||
</nz-select>
|
||||
<nz-form-label nzFor="config.type">{{ 'settings.object-store.type' | i18n }}</nz-form-label>
|
||||
<nz-form-control [nzErrorTip]="'validation.required' | i18n">
|
||||
<nz-select
|
||||
[(ngModel)]="config.type"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
style="text-align: center; font-weight: bolder; margin-top: 4px"
|
||||
[nzDropdownStyle]="{ 'font-weight': 'bolder', 'font-size': 'larger' }"
|
||||
(ngModelChange)="onChange()"
|
||||
>
|
||||
<nz-option [nzValue]="ObjectStoreType.FILE" [nzLabel]="'settings.object-store.type.file' | i18n"></nz-option>
|
||||
<nz-option [nzValue]="ObjectStoreType.DATABASE" [nzLabel]="'settings.object-store.type.database' | i18n"></nz-option>
|
||||
<nz-option [nzValue]="ObjectStoreType.OBS" [nzLabel]="'settings.object-store.type.obs' | i18n"></nz-option>
|
||||
</nz-select>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item *ngIf="config.type == ObjectStoreType.OBS">
|
||||
<nz-form-label [nzSpan]="6" nzFor="obs.accessKey" nzRequired="true">{{
|
||||
'settings.object-store.obs.accessKey' | i18n
|
||||
}}</nz-form-label>
|
||||
<nz-form-label nzFor="obs.accessKey" nzRequired="true">{{ 'settings.object-store.obs.accessKey' | i18n }}</nz-form-label>
|
||||
<nz-form-control [nzErrorTip]="'validation.required' | i18n">
|
||||
<input
|
||||
[(ngModel)]="config.config.accessKey"
|
||||
@@ -52,9 +52,7 @@
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item *ngIf="config.type == ObjectStoreType.OBS">
|
||||
<nz-form-label [nzSpan]="6" nzFor="obs.secretKey" nzRequired="true">{{
|
||||
'settings.object-store.obs.secretKey' | i18n
|
||||
}}</nz-form-label>
|
||||
<nz-form-label nzFor="obs.secretKey" nzRequired="true">{{ 'settings.object-store.obs.secretKey' | i18n }}</nz-form-label>
|
||||
<nz-form-control [nzErrorTip]="'validation.required' | i18n">
|
||||
<input
|
||||
[(ngModel)]="config.config.secretKey"
|
||||
@@ -68,9 +66,7 @@
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item *ngIf="config.type == ObjectStoreType.OBS">
|
||||
<nz-form-label [nzSpan]="6" nzFor="obs.bucketName" nzRequired="true">{{
|
||||
'settings.object-store.obs.bucketName' | i18n
|
||||
}}</nz-form-label>
|
||||
<nz-form-label nzFor="obs.bucketName" nzRequired="true">{{ 'settings.object-store.obs.bucketName' | i18n }}</nz-form-label>
|
||||
<nz-form-control [nzErrorTip]="'validation.required' | i18n">
|
||||
<input
|
||||
[(ngModel)]="config.config.bucketName"
|
||||
@@ -84,9 +80,7 @@
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item *ngIf="config.type == ObjectStoreType.OBS">
|
||||
<nz-form-label [nzSpan]="6" nzFor="obs.endpoint" nzRequired="true">{{
|
||||
'settings.object-store.obs.endpoint' | i18n
|
||||
}}</nz-form-label>
|
||||
<nz-form-label nzFor="obs.endpoint" nzRequired="true">{{ 'settings.object-store.obs.endpoint' | i18n }}</nz-form-label>
|
||||
<nz-form-control [nzErrorTip]="'validation.required' | i18n">
|
||||
<input
|
||||
[(ngModel)]="config.config.endpoint"
|
||||
@@ -100,9 +94,7 @@
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item *ngIf="config.type == ObjectStoreType.OBS">
|
||||
<nz-form-label [nzSpan]="6" nzFor="obs.savePath" nzRequired="true">{{
|
||||
'settings.object-store.obs.savePath' | i18n
|
||||
}}</nz-form-label>
|
||||
<nz-form-label nzFor="obs.savePath" nzRequired="true">{{ 'settings.object-store.obs.savePath' | i18n }}</nz-form-label>
|
||||
<nz-form-control [nzErrorTip]="'validation.required' | i18n">
|
||||
<input
|
||||
[(ngModel)]="config.config.savePath"
|
||||
|
||||
@@ -17,8 +17,10 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
|
||||
import { Component, Inject, OnInit, ViewChild } from '@angular/core';
|
||||
import { NgForm } from '@angular/forms';
|
||||
import { I18NService } from '@core';
|
||||
import { ALAIN_I18N_TOKEN } from '@delon/theme';
|
||||
import { NzNotificationService } from 'ng-zorro-antd/notification';
|
||||
import { finalize } from 'rxjs/operators';
|
||||
|
||||
@@ -34,28 +36,19 @@ const key = 'oss';
|
||||
})
|
||||
export class ObjectStoreComponent implements OnInit {
|
||||
constructor(
|
||||
private cdr: ChangeDetectorRef,
|
||||
private notifySvc: NzNotificationService,
|
||||
private configService: GeneralConfigService,
|
||||
@Inject(DOCUMENT) private doc: any
|
||||
private notifySvc: NzNotificationService,
|
||||
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
|
||||
) {}
|
||||
|
||||
loading = true;
|
||||
config!: ObjectStore<any>;
|
||||
isObjectStoreModalVisible: boolean = false;
|
||||
@ViewChild('objectStoreForm', { static: false }) ruleForm: NgForm | undefined;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadObjectStore();
|
||||
}
|
||||
|
||||
onConfigObjectStore() {
|
||||
this.isObjectStoreModalVisible = true;
|
||||
}
|
||||
|
||||
onCancelObjectStore() {
|
||||
this.isObjectStoreModalVisible = false;
|
||||
}
|
||||
|
||||
loadObjectStore() {
|
||||
this.loading = true;
|
||||
let configInit$ = this.configService.getGeneralConfig(key).subscribe(
|
||||
@@ -81,6 +74,15 @@ export class ObjectStoreComponent implements OnInit {
|
||||
}
|
||||
|
||||
onSaveObjectStore() {
|
||||
if (this.ruleForm?.invalid) {
|
||||
Object.values(this.ruleForm.controls).forEach(control => {
|
||||
if (control.invalid) {
|
||||
control.markAsDirty();
|
||||
control.updateValueAndValidity({ onlySelf: true });
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
const configOk$ = this.configService
|
||||
.saveGeneralConfig(this.config, key)
|
||||
@@ -93,12 +95,13 @@ export class ObjectStoreComponent implements OnInit {
|
||||
.subscribe(
|
||||
message => {
|
||||
if (message.code === 0) {
|
||||
this.notifySvc.success(this.i18nSvc.fanyi('common.notify.apply-success'), '');
|
||||
} else {
|
||||
// this.notifySvc.error(this.i18nSvc.fanyi('common.notify.apply-fail'), message.msg);
|
||||
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.apply-fail'), message.msg);
|
||||
}
|
||||
},
|
||||
error => {
|
||||
// this.notifySvc.error(this.i18nSvc.fanyi('common.notify.apply-fail'), error.msg);
|
||||
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.apply-fail'), error.msg);
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -115,6 +118,5 @@ export class ObjectStoreComponent implements OnInit {
|
||||
}
|
||||
};
|
||||
|
||||
protected readonly ObjectStore = ObjectStore;
|
||||
protected readonly ObjectStoreType = ObjectStoreType;
|
||||
}
|
||||
|
||||
@@ -210,15 +210,24 @@
|
||||
>
|
||||
<i nz-icon nzType="edit" nzTheme="outline"></i>
|
||||
</button>
|
||||
<button
|
||||
nz-button
|
||||
nzDanger
|
||||
(click)="onDeleteOneComponent(data.id)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="'status.component.delete' | i18n"
|
||||
>
|
||||
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
||||
<button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
|
||||
<span nz-icon nzType="ellipsis"></span>
|
||||
</button>
|
||||
<nz-dropdown-menu #more_menu="nzDropdownMenu">
|
||||
<ul nz-menu>
|
||||
<li nz-menu-item>
|
||||
<button
|
||||
nz-button
|
||||
nzDanger
|
||||
(click)="onDeleteOneComponent(data.id)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="'status.component.delete' | i18n"
|
||||
>
|
||||
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nz-dropdown-menu>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -297,15 +306,24 @@
|
||||
>
|
||||
<i nz-icon nzType="redo" nzTheme="outline"></i>
|
||||
</button>
|
||||
<button
|
||||
nz-button
|
||||
nzDanger
|
||||
(click)="onDeleteOneIncident(data.id)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="'status.incident.delete' | i18n"
|
||||
>
|
||||
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
||||
<button nz-button nz-dropdown [nzDropdownMenu]="more_menu">
|
||||
<span nz-icon nzType="ellipsis"></span>
|
||||
</button>
|
||||
<nz-dropdown-menu #more_menu="nzDropdownMenu">
|
||||
<ul nz-menu>
|
||||
<li nz-menu-item>
|
||||
<button
|
||||
nz-button
|
||||
nzDanger
|
||||
(click)="onDeleteOneIncident(data.id)"
|
||||
nz-tooltip
|
||||
[nzTooltipTitle]="'status.incident.delete' | i18n"
|
||||
>
|
||||
<i nz-icon nzType="delete" nzTheme="outline"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nz-dropdown-menu>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -46,7 +46,6 @@
|
||||
"alert.export.use-type": "Export rules in {{type}} file format",
|
||||
"alert.group-converge.delete": "Delete Converge Strategy",
|
||||
"alert.group-converge.edit": "Edit Converge Strategy",
|
||||
"alert.group-converge.enable": "Enable Converge",
|
||||
"alert.group-converge.group-interval": "Interval Time",
|
||||
"alert.group-converge.group-interval.tip": "Minimum interval for sending grouped alert notifications, avoid too frequent notifications, default 5 minutes",
|
||||
"alert.group-converge.group-labels": "Group Labels",
|
||||
@@ -307,7 +306,6 @@
|
||||
"alert.severity.all": "All Severity",
|
||||
"alert.silence.delete": "Delete Silence Strategy",
|
||||
"alert.silence.edit": "Edit Silence Strategy",
|
||||
"alert.silence.enable": "Enable Silence",
|
||||
"alert.silence.labels": "Tag Match",
|
||||
"alert.silence.match-all": "Match All",
|
||||
"alert.silence.name": "Silence Strategy Name",
|
||||
@@ -430,7 +428,7 @@
|
||||
"common.copy.button": "Copy",
|
||||
"common.disable": "Disable",
|
||||
"common.edit": "Operate",
|
||||
"common.edit-time": "Update Time",
|
||||
"common.edit-time": "Edit Time",
|
||||
"common.enable": "Enable",
|
||||
"common.file.select": "Select File",
|
||||
"common.ignore": "Ignore",
|
||||
|
||||
@@ -46,7 +46,6 @@
|
||||
"alert.export.use-type": "{{type}}ファイル形式で閾値ルールをエクスポート",
|
||||
"alert.group-converge.delete": "収束戦略を削除",
|
||||
"alert.group-converge.edit": "収束戦略を編集",
|
||||
"alert.group-converge.enable": "収束を有効化",
|
||||
"alert.group-converge.group-interval": "間隔時間",
|
||||
"alert.group-converge.group-interval.tip": "グループ化されたアラート通知を送信する最小間隔時間。通知が頻繁になりすぎないように、デフォルトは5分です",
|
||||
"alert.group-converge.group-labels": "グループラベル",
|
||||
@@ -307,7 +306,6 @@
|
||||
"alert.severity.all": "すべての重大度",
|
||||
"alert.silence.delete": "サイレンス戦略を削除",
|
||||
"alert.silence.edit": "サイレンス戦略を編集",
|
||||
"alert.silence.enable": "サイレンスを有効化",
|
||||
"alert.silence.labels": "タグ一致",
|
||||
"alert.silence.match-all": "すべて一致",
|
||||
"alert.silence.name": "サイレンス戦略名",
|
||||
@@ -430,7 +428,7 @@
|
||||
"common.copy.button": "コピー",
|
||||
"common.disable": "無効化",
|
||||
"common.edit": "操作",
|
||||
"common.edit-time": "更新時間",
|
||||
"common.edit-time": "編集時間",
|
||||
"common.enable": "有効化",
|
||||
"common.file.select": "ファイルを選択",
|
||||
"common.ignore": "無視",
|
||||
|
||||
@@ -46,7 +46,6 @@
|
||||
"alert.export.use-type": "以 {{type}} 文件格式导出阈值规则",
|
||||
"alert.group-converge.delete": "删除分组策略",
|
||||
"alert.group-converge.edit": "编辑分组策略",
|
||||
"alert.group-converge.enable": "启用分组策略",
|
||||
"alert.group-converge.group-interval": "间隔时间",
|
||||
"alert.group-converge.group-interval.tip": "发送分组告警通知的最小时间间隔,避免告警通知过于频繁,默认5分钟",
|
||||
"alert.group-converge.group-labels": "分组标签",
|
||||
@@ -307,7 +306,6 @@
|
||||
"alert.severity.all": "全部级别",
|
||||
"alert.silence.delete": "删除静默策略",
|
||||
"alert.silence.edit": "编辑静默策略",
|
||||
"alert.silence.enable": "启用静默策略",
|
||||
"alert.silence.labels": "匹配标签",
|
||||
"alert.silence.match-all": "应用所有",
|
||||
"alert.silence.name": "策略名称",
|
||||
@@ -430,8 +428,8 @@
|
||||
"common.copy.button": "复制",
|
||||
"common.disable": "关闭",
|
||||
"common.edit": "操作",
|
||||
"common.edit-time": "更新时间",
|
||||
"common.enable": "是否启用",
|
||||
"common.edit-time": "编辑时间",
|
||||
"common.enable": "启用状态",
|
||||
"common.file.select": "选择文件",
|
||||
"common.ignore": "忽略",
|
||||
"common.mute": "静音",
|
||||
|
||||
@@ -46,7 +46,6 @@
|
||||
"alert.export.use-type": "以 {{type}} 文件格式導出阈值規則",
|
||||
"alert.group-converge.delete": "刪除收斂策略",
|
||||
"alert.group-converge.edit": "編輯收斂策略",
|
||||
"alert.group-converge.enable": "啟用收斂策略",
|
||||
"alert.group-converge.group-interval": "間隔時間",
|
||||
"alert.group-converge.group-interval.tip": "發送分組告警通知的最小時間間隔,避免告警通知過於頻繁,默認5分鐘",
|
||||
"alert.group-converge.group-labels": "分組標籤",
|
||||
@@ -307,7 +306,6 @@
|
||||
"alert.severity.all": "全部級別",
|
||||
"alert.silence.delete": "刪除靜默策略",
|
||||
"alert.silence.edit": "編輯靜默策略",
|
||||
"alert.silence.enable": "啟用靜默策略",
|
||||
"alert.silence.labels": "匹配標籤",
|
||||
"alert.silence.match-all": "應用所有",
|
||||
"alert.silence.name": "策略名稱",
|
||||
@@ -430,7 +428,7 @@
|
||||
"common.copy.button": "複製",
|
||||
"common.disable": "關閉",
|
||||
"common.edit": "操作",
|
||||
"common.edit-time": "更新時間",
|
||||
"common.edit-time": "編輯時間",
|
||||
"common.enable": "開啓",
|
||||
"common.file.select": "選擇文件",
|
||||
"common.ignore": "忽略",
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
@primary-color: #3f51b5;
|
||||
@secondary-color: #8c8c8c;
|
||||
@highlight-blue: #d6e4ff;
|
||||
@border-color: #d9d9d9;
|
||||
@success-green: #52c41a;
|
||||
@error-red: #f5222d;
|
||||
@font-size-base: 14px;
|
||||
|
||||
Reference in New Issue
Block a user