This is an automated email from the ASF dual-hosted git repository.
Duansg 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 ecb238804b [improve] Improve status page settings UI for better UX
(#4139)
ecb238804b is described below
commit ecb238804b4998224e23176bd2f62569b4165a2c
Author: Duansg <[email protected]>
AuthorDate: Fri May 22 14:30:34 2026 +0800
[improve] Improve status page settings UI for better UX (#4139)
Co-authored-by: Tomsun28 <[email protected]>
---
.../routes/setting/status/status.component.html | 335 ++++++++++++---------
.../routes/setting/status/status.component.less | 267 ++++++++++++++++
.../app/routes/setting/status/status.component.ts | 13 +
web-app/src/assets/i18n/en-US.json | 7 +
web-app/src/assets/i18n/ja-JP.json | 7 +
web-app/src/assets/i18n/pt-BR.json | 7 +
web-app/src/assets/i18n/zh-CN.json | 7 +
web-app/src/assets/i18n/zh-TW.json | 7 +
8 files changed, 515 insertions(+), 135 deletions(-)
diff --git a/web-app/src/app/routes/setting/status/status.component.html
b/web-app/src/app/routes/setting/status/status.component.html
index edbd709228..de038ee6b0 100644
--- a/web-app/src/app/routes/setting/status/status.component.html
+++ b/web-app/src/app/routes/setting/status/status.component.html
@@ -26,122 +26,200 @@
<nz-divider></nz-divider>
<nz-spin [nzSpinning]="orgLoading" [nzTip]="'Loading...'" nzSize="large">
- <div class="-inner-content">
- <form nz-form #newForm="ngForm">
- <nz-form-item>
- <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">
- {{ 'status.org.name' | i18n }}
- </nz-form-label>
- <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' |
i18n">
- <input
- [(ngModel)]="statusOrgForEdit.name"
- nz-input
- name="name"
- type="text"
- id="name"
- required
- [placeholder]="'status.org.name.tip' | i18n"
- />
- </nz-form-control>
- </nz-form-item>
- <nz-form-item>
- <nz-form-label [nzSpan]="7" nzFor="desc" nzRequired="true">
- {{ 'status.org.desc' | i18n }}
- </nz-form-label>
- <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' |
i18n">
- <input
- [(ngModel)]="statusOrgForEdit.description"
- nz-input
- required
- name="desc"
- type="text"
- id="desc"
- [placeholder]="'status.org.desc.tip' | i18n"
- />
- </nz-form-control>
- </nz-form-item>
- <nz-form-item>
- <nz-form-label [nzSpan]="7" nzFor="home" nzRequired="true">
- {{ 'status.org.home' | i18n }}
- </nz-form-label>
- <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' |
i18n">
- <input
- [(ngModel)]="statusOrgForEdit.home"
- nz-input
- required
- name="home"
- type="text"
- id="home"
- [placeholder]="'status.org.home.tip' | i18n"
- />
- </nz-form-control>
- </nz-form-item>
- <nz-form-item>
- <nz-form-label [nzSpan]="7" nzFor="logo" nzRequired="true">
- {{ 'status.org.logo' | i18n }}
- </nz-form-label>
- <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' |
i18n">
- <input
- [(ngModel)]="statusOrgForEdit.logo"
- nz-input
- required
- name="logo"
- type="text"
- id="logo"
- [placeholder]="'status.org.logo.tip' | i18n"
- />
- </nz-form-control>
- </nz-form-item>
- <nz-form-item>
- <nz-form-label [nzSpan]="7" nzFor="feedback" nzRequired="true">
- {{ 'status.org.feedback' | i18n }}
- </nz-form-label>
- <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' |
i18n">
- <input
- [(ngModel)]="statusOrgForEdit.feedback"
- nz-input
- required
- name="feedback"
- type="text"
- id="feedback"
- [placeholder]="'status.org.feedback.tip' | i18n"
- />
- </nz-form-control>
- </nz-form-item>
- <nz-form-item>
- <nz-form-label [nzSpan]="7" nzFor="color">
- {{ 'status.org.color' | i18n }}
- </nz-form-label>
- <nz-form-control [nzSpan]="8">
- <input
- [(colorPicker)]="statusOrgForEdit.color"
- cpFallbackColor="#e9f3d3"
- cpOutputFormat="hex"
- [style.background]="statusOrgForEdit.color"
- style="width: 100%"
- nz-input
- required
- name="color"
- type="text"
- id="color"
- [placeholder]="statusOrgForEdit.color == undefined ?
('status.org.color.tip' | i18n) : ''"
- />
- </nz-form-control>
- </nz-form-item>
- <div nz-row>
- <div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 8, offset: 7 }"
style="text-align: center">
- <button nz-button nzType="primary" type="submit"
(click)="onSaveStatusOrg(newForm.form)">
- {{ 'common.button.ok' | i18n }}
+ <!-- Organization brand card: empty-state guide / configured summary /
inline edit form -->
+ <div class="status-org-card">
+ <!-- Empty state: organization not configured -->
+ <ng-container *ngIf="!orgEditing && statusOrg?.id == undefined">
+ <div class="status-org-empty">
+ <div class="status-org-empty-icon">
+ <i nz-icon nzType="appstore" nzTheme="outline"></i>
+ </div>
+ <div class="status-org-empty-content">
+ <div class="status-org-empty-title">{{ 'status.org.empty.title' |
i18n }}</div>
+ <div class="status-org-empty-desc">{{ 'status.org.empty.desc' | i18n
}}</div>
+ </div>
+ <div class="status-org-empty-action">
+ <button nz-button nzType="primary" (click)="startEditOrg()">
+ <i nz-icon nzType="setting" nzTheme="outline"></i>
+ {{ 'status.org.setup' | i18n }}
</button>
</div>
</div>
- </form>
+ </ng-container>
+
+ <!-- Configured summary: shows brand at a glance -->
+ <ng-container *ngIf="!orgEditing && statusOrg?.id != undefined">
+ <div class="status-org-summary" [style.borderLeftColor]="statusOrg.color
|| '#1890ff'">
+ <div class="status-org-summary-logo"
[style.backgroundColor]="statusOrg.color || '#f0f5ff'">
+ <img *ngIf="statusOrg.logo" [src]="statusOrg.logo" alt="logo" />
+ <i *ngIf="!statusOrg.logo" nz-icon nzType="appstore"
nzTheme="outline"></i>
+ </div>
+ <div class="status-org-summary-body">
+ <div class="status-org-summary-title">
+ <span class="status-org-name">{{ statusOrg.name }}</span>
+ <nz-tag nzColor="success" class="status-org-tag">
+ <i nz-icon nzType="check-circle" nzTheme="fill"></i>
+ {{ 'status.org.configured' | i18n }}
+ </nz-tag>
+ </div>
+ <div class="status-org-summary-desc"
*ngIf="statusOrg.description">{{ statusOrg.description }}</div>
+ <div class="status-org-summary-meta">
+ <span class="meta-item" *ngIf="statusOrg.home">
+ <i nz-icon nzType="link" nzTheme="outline"></i>
+ <a [href]="statusOrg.home" target="_blank" rel="noopener">{{
statusOrg.home }}</a>
+ </span>
+ <span class="meta-item" *ngIf="statusOrg.feedback">
+ <i nz-icon nzType="message" nzTheme="outline"></i>
+ <a [href]="statusOrg.feedback" target="_blank" rel="noopener">{{
statusOrg.feedback }}</a>
+ </span>
+ <span class="meta-item" *ngIf="statusOrg.color">
+ <i nz-icon nzType="bg-colors" nzTheme="outline"></i>
+ <span class="color-chip"
[style.background]="statusOrg.color"></span>
+ <span>{{ statusOrg.color }}</span>
+ </span>
+ </div>
+ </div>
+ <div class="status-org-summary-actions">
+ <a routerLink="/status" target="_blank" class="status-preview-link">
+ <i nz-icon nzType="eye" nzTheme="outline"></i>
+ {{ 'status.preview' | i18n }}
+ <i nz-icon nzType="arrow-right" nzTheme="outline"></i>
+ </a>
+ <button nz-button nzType="default" (click)="startEditOrg()">
+ <i nz-icon nzType="edit" nzTheme="outline"></i>
+ {{ 'common.button.edit' | i18n }}
+ </button>
+ </div>
+ </div>
+ </ng-container>
+
+ <!-- Inline edit form -->
+ <ng-container *ngIf="orgEditing">
+ <div class="status-org-edit-header">
+ <span class="status-org-edit-title">
+ <i nz-icon nzType="setting" nzTheme="outline"></i>
+ {{ 'status.org.edit' | i18n }}
+ </span>
+ </div>
+ <div class="-inner-content">
+ <form nz-form #newForm="ngForm">
+ <nz-form-item>
+ <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">
+ {{ 'status.org.name' | i18n }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required'
| i18n">
+ <input
+ [(ngModel)]="statusOrgForEdit.name"
+ nz-input
+ name="name"
+ type="text"
+ id="name"
+ required
+ [placeholder]="'status.org.name.tip' | i18n"
+ />
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item>
+ <nz-form-label [nzSpan]="7" nzFor="desc" nzRequired="true">
+ {{ 'status.org.desc' | i18n }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required'
| i18n">
+ <input
+ [(ngModel)]="statusOrgForEdit.description"
+ nz-input
+ required
+ name="desc"
+ type="text"
+ id="desc"
+ [placeholder]="'status.org.desc.tip' | i18n"
+ />
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item>
+ <nz-form-label [nzSpan]="7" nzFor="home" nzRequired="true">
+ {{ 'status.org.home' | i18n }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required'
| i18n">
+ <input
+ [(ngModel)]="statusOrgForEdit.home"
+ nz-input
+ required
+ name="home"
+ type="text"
+ id="home"
+ [placeholder]="'status.org.home.tip' | i18n"
+ />
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item>
+ <nz-form-label [nzSpan]="7" nzFor="logo" nzRequired="true">
+ {{ 'status.org.logo' | i18n }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required'
| i18n">
+ <input
+ [(ngModel)]="statusOrgForEdit.logo"
+ nz-input
+ required
+ name="logo"
+ type="text"
+ id="logo"
+ [placeholder]="'status.org.logo.tip' | i18n"
+ />
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item>
+ <nz-form-label [nzSpan]="7" nzFor="feedback" nzRequired="true">
+ {{ 'status.org.feedback' | i18n }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required'
| i18n">
+ <input
+ [(ngModel)]="statusOrgForEdit.feedback"
+ nz-input
+ required
+ name="feedback"
+ type="text"
+ id="feedback"
+ [placeholder]="'status.org.feedback.tip' | i18n"
+ />
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item>
+ <nz-form-label [nzSpan]="7" nzFor="color">
+ {{ 'status.org.color' | i18n }}
+ </nz-form-label>
+ <nz-form-control [nzSpan]="12">
+ <input
+ [(colorPicker)]="statusOrgForEdit.color"
+ cpFallbackColor="#e9f3d3"
+ cpOutputFormat="hex"
+ [style.background]="statusOrgForEdit.color"
+ style="width: 100%"
+ nz-input
+ required
+ name="color"
+ type="text"
+ id="color"
+ [placeholder]="statusOrgForEdit.color == undefined ?
('status.org.color.tip' | i18n) : ''"
+ />
+ </nz-form-control>
+ </nz-form-item>
+ <div nz-row>
+ <div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 12, offset: 7 }"
class="status-org-edit-actions">
+ <button nz-button type="button" (click)="cancelEditOrg()"
*ngIf="statusOrg?.id != undefined">
+ {{ 'common.button.cancel' | i18n }}
+ </button>
+ <button nz-button nzType="primary" type="submit"
(click)="onSaveStatusOrg(newForm.form)">
+ {{ 'common.button.ok' | i18n }}
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </ng-container>
</div>
</nz-spin>
-<nz-divider></nz-divider>
-
-<nz-tabset nzSize="large" [nzTabBarGutter]="8">
+<nz-tabset nzSize="large" [nzTabBarGutter]="8" class="status-tabset">
<nz-tab [nzTitle]="'status.component' | i18n"
(nzClick)="loadComponentInfo()">
<app-toolbar>
<ng-template #left>
@@ -152,23 +230,17 @@
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
{{ 'status.component.new' | i18n }}
</button>
- <button *ngIf="statusOrg?.id != undefined && statusOrg?.name !=
undefined" nz-button nzType="primary">
- <a routerLink="/status" target="_blank">
- <i nz-icon nzType="link" nzTheme="outline"></i>
- {{ statusOrg.name + ' ' + ('menu.advanced.status' | i18n) }}
- </a>
- </button>
</ng-template>
</app-toolbar>
- <nz-table #fixedTable [nzData]="statusComponents"
nzFrontPagination="false" [nzLoading]="componentLoading" [nzScroll]="{ x:
'1240px' }">
+ <nz-table #fixedTable [nzData]="statusComponents"
nzFrontPagination="false" [nzLoading]="componentLoading">
<thead>
<tr>
- <th nzAlign="center" nzWidth="15%">{{ 'status.component.name' | i18n
}}</th>
- <th nzAlign="center" nzWidth="15%">{{ 'status.component.state' |
i18n }}</th>
- <th nzAlign="center" nzWidth="15%">{{ 'status.component.method' |
i18n }}</th>
- <th nzAlign="center" nzWidth="15%">{{ 'status.component.tag' | i18n
}}</th>
- <th nzAlign="center" nzWidth="20%">{{ 'common.edit-time' | i18n
}}</th>
- <th nzAlign="center" nzWidth="15%">{{ 'common.edit' | i18n }}</th>
+ <th nzAlign="center" nzWidth="18%">{{ 'status.component.name' | i18n
}}</th>
+ <th nzAlign="center" nzWidth="12%">{{ 'status.component.state' |
i18n }}</th>
+ <th nzAlign="center" nzWidth="14%">{{ 'status.component.method' |
i18n }}</th>
+ <th nzAlign="center" nzWidth="20%">{{ 'status.component.tag' | i18n
}}</th>
+ <th nzAlign="center" nzWidth="22%">{{ 'common.edit-time' | i18n
}}</th>
+ <th nzAlign="center" nzWidth="14%">{{ 'common.edit' | i18n }}</th>
</tr>
</thead>
<tbody>
@@ -244,12 +316,6 @@
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
{{ 'status.incident.new' | i18n }}
</button>
- <button *ngIf="statusOrg?.id != undefined && statusOrg?.name !=
undefined" nz-button nzType="primary">
- <a routerLink="/status" target="_blank">
- <i nz-icon nzType="link" nzTheme="outline"></i>
- {{ statusOrg.name + ' ' + ('menu.advanced.status' | i18n) }}
- </a>
- </button>
</ng-template>
<ng-template #right>
<app-multi-func-input
@@ -279,16 +345,15 @@
nzShowPagination="true"
nzShowSizeChanger
[nzLoading]="incidentLoading"
- [nzScroll]="{ x: '1240px' }"
>
<thead>
<tr>
- <th nzAlign="center" nzWidth="15%">{{ 'status.incident.name' | i18n
}}</th>
+ <th nzAlign="center" nzWidth="16%">{{ 'status.incident.name' | i18n
}}</th>
<th nzAlign="center" nzWidth="10%">{{ 'status.incident.state' | i18n
}}</th>
- <th nzAlign="center" nzWidth="40%">{{
'status.incident.message-latest' | i18n }}</th>
- <th nzAlign="center" nzWidth="15%">{{ 'status.incident.component' |
i18n }}</th>
- <th nzAlign="center" nzWidth="10%">{{ 'common.new-time' | i18n
}}</th>
- <th nzAlign="center" nzWidth="10%">{{ 'common.edit' | i18n }}</th>
+ <th nzAlign="center" nzWidth="34%">{{
'status.incident.message-latest' | i18n }}</th>
+ <th nzAlign="center" nzWidth="14%">{{ 'status.incident.component' |
i18n }}</th>
+ <th nzAlign="center" nzWidth="12%">{{ 'common.new-time' | i18n
}}</th>
+ <th nzAlign="center" nzWidth="14%">{{ 'common.edit' | i18n }}</th>
</tr>
</thead>
<tbody>
diff --git a/web-app/src/app/routes/setting/status/status.component.less
b/web-app/src/app/routes/setting/status/status.component.less
index e69de29bb2..eeb634bd1d 100644
--- a/web-app/src/app/routes/setting/status/status.component.less
+++ b/web-app/src/app/routes/setting/status/status.component.less
@@ -0,0 +1,267 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+:host {
+ display: block;
+}
+
+.status-org-card {
+ background: #fff;
+ border-radius: 8px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
+ margin-bottom: 20px;
+ overflow: hidden;
+ transition: box-shadow 0.2s ease;
+
+ &:hover {
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
+ }
+}
+
+/* ---------- Empty state ---------- */
+.status-org-empty {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 28px 32px;
+ background: linear-gradient(135deg, #f0f5ff 0%, #fafafa 100%);
+ border-left: 4px solid #1890ff;
+}
+
+.status-org-empty-icon {
+ flex: 0 0 64px;
+ height: 64px;
+ border-radius: 50%;
+ background: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 28px;
+ color: #1890ff;
+ box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+}
+
+.status-org-empty-content {
+ flex: 1;
+ min-width: 0;
+}
+
+.status-org-empty-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.85);
+ margin-bottom: 4px;
+}
+
+.status-org-empty-desc {
+ font-size: 13px;
+ color: rgba(0, 0, 0, 0.55);
+ line-height: 1.6;
+}
+
+.status-org-empty-action {
+ flex: 0 0 auto;
+}
+
+/* ---------- Configured summary ---------- */
+.status-org-summary {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ padding: 20px 24px;
+ border-left: 4px solid #1890ff;
+ transition: border-color 0.2s ease;
+}
+
+.status-org-summary-logo {
+ flex: 0 0 64px;
+ width: 64px;
+ height: 64px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ color: #fff;
+ font-size: 28px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain;
+ }
+}
+
+.status-org-summary-body {
+ flex: 1;
+ min-width: 0;
+}
+
+.status-org-summary-title {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 6px;
+
+ .status-org-name {
+ font-size: 18px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.88);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .status-org-tag {
+ margin-right: 0;
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ }
+}
+
+.status-org-summary-desc {
+ font-size: 13px;
+ color: rgba(0, 0, 0, 0.55);
+ margin-bottom: 8px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+
+.status-org-summary-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16px;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.55);
+
+ .meta-item {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ max-width: 260px;
+
+ a {
+ color: rgba(0, 0, 0, 0.55);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &:hover {
+ color: #1890ff;
+ }
+ }
+ }
+
+ .color-chip {
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ border-radius: 3px;
+ border: 1px solid rgba(0, 0, 0, 0.08);
+ }
+}
+
+.status-org-summary-actions {
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.status-preview-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 6px 14px;
+ border-radius: 16px;
+ background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
+ color: #fff !important;
+ font-size: 13px;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ box-shadow: 0 2px 6px rgba(24, 144, 255, 0.25);
+
+ &:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(24, 144, 255, 0.35);
+ color: #fff !important;
+ }
+
+ i {
+ font-size: 12px;
+ }
+}
+
+/* ---------- Inline edit form ---------- */
+.status-org-edit-header {
+ padding: 16px 24px;
+ border-bottom: 1px solid #f0f0f0;
+ background: #fafafa;
+
+ .status-org-edit-title {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 15px;
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.85);
+ }
+}
+
+.status-org-card .-inner-content {
+ padding: 24px 24px 8px;
+}
+
+.status-org-edit-actions {
+ text-align: right;
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+ padding-top: 8px;
+}
+
+/* ---------- Tabset polish ---------- */
+.status-tabset {
+ background: #fff;
+ border-radius: 8px;
+ padding: 8px 16px 16px;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+/* ---------- Responsive ---------- */
+@media (max-width: 768px) {
+ .status-org-empty,
+ .status-org-summary {
+ flex-wrap: wrap;
+ padding: 20px 16px;
+ }
+
+ .status-org-summary-actions {
+ width: 100%;
+ justify-content: flex-end;
+ padding-top: 12px;
+ border-top: 1px dashed #f0f0f0;
+ }
+
+ .status-org-summary-meta {
+ gap: 10px;
+
+ .meta-item {
+ max-width: 100%;
+ }
+ }
+}
diff --git a/web-app/src/app/routes/setting/status/status.component.ts
b/web-app/src/app/routes/setting/status/status.component.ts
index 660b12ea8e..cd33eac8e1 100644
--- a/web-app/src/app/routes/setting/status/status.component.ts
+++ b/web-app/src/app/routes/setting/status/status.component.ts
@@ -71,6 +71,7 @@ export class StatusComponent implements OnInit {
pageIndex: number = 1;
pageSize: number = 8;
total: number = 0;
+ orgEditing: boolean = false;
ngOnInit(): void {
this.loadStatusPageConfig();
@@ -184,6 +185,8 @@ export class StatusComponent implements OnInit {
(message: Message<StatusPageOrg>) => {
if (message.code === 0) {
this.statusOrg = message.data;
+ this.statusOrgForEdit = { ...this.statusOrg };
+ this.orgEditing = false;
this.notifySvc.success(this.i18nSvc.fanyi('common.notify.apply-success'), '');
} else {
this.notifySvc.error(this.i18nSvc.fanyi('common.notify.apply-fail'),
message.msg);
@@ -197,6 +200,16 @@ export class StatusComponent implements OnInit {
);
}
+ startEditOrg() {
+ this.statusOrgForEdit = { ...this.statusOrg };
+ this.orgEditing = true;
+ }
+
+ cancelEditOrg() {
+ this.statusOrgForEdit = { ...this.statusOrg };
+ this.orgEditing = false;
+ }
+
onNewStatusComponent() {
this.isComponentModalAdd = true;
this.currentStatusComponent = new StatusPageComponent();
diff --git a/web-app/src/assets/i18n/en-US.json
b/web-app/src/assets/i18n/en-US.json
index 0f82ca7be5..7095b07d2a 100644
--- a/web-app/src/assets/i18n/en-US.json
+++ b/web-app/src/assets/i18n/en-US.json
@@ -1074,8 +1074,12 @@
"status.incident.update": "Update Incident",
"status.org.color": "Theme Color",
"status.org.color.tip": "Please config the status page theme color",
+ "status.org.configured": "Configured",
"status.org.desc": "Introduction",
"status.org.desc.tip": "Introduction to the organization information
displayed on the status page",
+ "status.org.edit": "Edit Organization",
+ "status.org.empty.desc": "Set up your organization name, logo and theme
color to publish a branded status page for your users.",
+ "status.org.empty.title": "Organization information not configured yet",
"status.org.feedback": "Feedback Link",
"status.org.feedback.tip": "Please config the users feedback contact
address",
"status.org.home": "Website Link",
@@ -1084,7 +1088,10 @@
"status.org.logo.tip": "Please config the organization logo image URL
address, suggest svg",
"status.org.name": "Organization Name",
"status.org.name.tip": "The name of the organization team displayed on the
status page, such as TanCloud",
+ "status.org.setup": "Set Up Now",
"status.org.state": "Organization State",
+ "status.org.title": "Organization",
+ "status.preview": "View Status Page",
"status.page": "Status Page",
"status.public.30-day": "30 days ago",
"status.public.feedback": "Feedback Issue",
diff --git a/web-app/src/assets/i18n/ja-JP.json
b/web-app/src/assets/i18n/ja-JP.json
index 352f40db66..3901bce547 100644
--- a/web-app/src/assets/i18n/ja-JP.json
+++ b/web-app/src/assets/i18n/ja-JP.json
@@ -997,13 +997,20 @@
"status.org.desc.tip": "ステータスページに表示される組織情報の紹介",
"status.org.feedback": "フィードバックリンク",
"status.org.feedback.tip": "ユーザーのフィードバック連絡先を設定してください",
+ "status.org.configured": "設定済み",
+ "status.org.edit": "組織情報を編集",
+ "status.org.empty.desc": "組織名、ロゴ、テーマカラーなどのブランド情報を設定すると、ステータスページを公開できます。",
+ "status.org.empty.title": "組織情報がまだ設定されていません",
"status.org.home": "ウェブサイトリンク",
"status.org.home.tip": "組織のウェブサイトのホームページアドレスを設定してください",
"status.org.logo": "ロゴ画像",
"status.org.logo.tip": "組織のロゴ画像のURLアドレスを設定してください。svgを推奨します",
"status.org.name": "組織名",
"status.org.name.tip": "ステータスページに表示される組織チームの名前。例：TanCloud",
+ "status.org.setup": "今すぐ設定",
"status.org.state": "組織ステータス",
+ "status.org.title": "組織情報",
+ "status.preview": "ステータスページを表示",
"status.page": "ステータスページ",
"status.public.30-day": "30日前",
"status.public.feedback": "フィードバック問題",
diff --git a/web-app/src/assets/i18n/pt-BR.json
b/web-app/src/assets/i18n/pt-BR.json
index 0cb486e1ef..7b4acec48b 100644
--- a/web-app/src/assets/i18n/pt-BR.json
+++ b/web-app/src/assets/i18n/pt-BR.json
@@ -981,7 +981,14 @@
"status.org.feedback.tip": "Por favor, configure o endereço de contato de
feedback dos usuários",
"status.org.color": "Cor do Tema",
"status.org.color.tip": "Por favor, configure a cor do tema da página de
status",
+ "status.org.configured": "Configurado",
+ "status.org.edit": "Editar Organização",
+ "status.org.empty.desc": "Configure o nome da organização, logo e cor do
tema para publicar uma página de status com sua marca.",
+ "status.org.empty.title": "Informações da organização ainda não
configuradas",
+ "status.org.setup": "Configurar Agora",
"status.org.state": "Estado da Organização",
+ "status.org.title": "Organização",
+ "status.preview": "Ver Página de Status",
"status.public.feedback": "FEEDBACK DE PROBLEMAS",
"status.public.org.state.0": "Todos os Sistemas Operacionais",
"status.public.org.state.1": "Alguns Sistemas Anormais",
diff --git a/web-app/src/assets/i18n/zh-CN.json
b/web-app/src/assets/i18n/zh-CN.json
index d4c74654eb..7921a5dab4 100644
--- a/web-app/src/assets/i18n/zh-CN.json
+++ b/web-app/src/assets/i18n/zh-CN.json
@@ -1077,8 +1077,12 @@
"status.incident.update": "更新事件",
"status.org.color": "主题颜色",
"status.org.color.tip": "请配置状态页面主题背景颜色",
+ "status.org.configured": "已配置",
"status.org.desc": "组织介绍",
"status.org.desc.tip": "状态页面展示的组织信息介绍",
+ "status.org.edit": "编辑组织信息",
+ "status.org.empty.desc": "完善组织名称、Logo、主题色等品牌信息后，即可对外展示状态页。",
+ "status.org.empty.title": "尚未配置状态页组织信息",
"status.org.feedback": "反馈地址",
"status.org.feedback.tip": "请配置用户报告反馈问题的地址",
"status.org.home": "网站链接",
@@ -1087,7 +1091,10 @@
"status.org.logo.tip": "请配置组织Logo图片URL地址,建议SVG格式",
"status.org.name": "组织名称",
"status.org.name.tip": "状态页面展示的组织团队名称,如 TanCloud",
+ "status.org.setup": "立即配置",
"status.org.state": "组织状态",
+ "status.org.title": "组织信息",
+ "status.preview": "查看状态页",
"status.page": "状态页面",
"status.public.30-day": "30天前",
"status.public.feedback": "问题反馈",
diff --git a/web-app/src/assets/i18n/zh-TW.json
b/web-app/src/assets/i18n/zh-TW.json
index ba46a82bb6..219d38891d 100644
--- a/web-app/src/assets/i18n/zh-TW.json
+++ b/web-app/src/assets/i18n/zh-TW.json
@@ -1011,13 +1011,20 @@
"status.org.desc.tip": "狀態頁面展示的組織信息介紹",
"status.org.feedback": "反饋地址",
"status.org.feedback.tip": "請配置用戶報告反饋問題的地址",
+ "status.org.configured": "已配置",
+ "status.org.edit": "編輯組織資訊",
+ "status.org.empty.desc": "完善組織名稱、Logo、主題色等品牌資訊後，即可對外展示狀態頁。",
+ "status.org.empty.title": "尚未配置狀態頁組織資訊",
"status.org.home": "網站鏈接",
"status.org.home.tip": "請配置組織的網站主頁地址",
"status.org.logo": "標誌圖片",
"status.org.logo.tip": "請配置組織Logo圖片URL地址,建議SVG格式",
"status.org.name": "組織名稱",
"status.org.name.tip": "狀態頁面展示的組織團隊名稱,如 TanCloud",
+ "status.org.setup": "立即配置",
"status.org.state": "組織狀態",
+ "status.org.title": "組織資訊",
+ "status.preview": "查看狀態頁",
"status.page": "狀態頁面",
"status.public.30-day": "30天前",
"status.public.feedback": "問題反饋",
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
