[webapp] update and fix alert ui when theme dark (#3082)

This commit is contained in:
tomsun28
2025-02-16 23:25:04 +08:00
committed by GitHub
parent 7d18118bbd
commit ce6f9feac6
22 changed files with 247 additions and 165 deletions
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
+1 -3
View File
@@ -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",
+1 -3
View File
@@ -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": "無視",
+2 -4
View File
@@ -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": "静音",
+1 -3
View File
@@ -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": "忽略",
-1
View File
@@ -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;