You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@servicecomb.apache.org by ti...@apache.org on 2021/05/17 03:01:50 UTC
[servicecomb-service-center] branch master updated: fix: 国际化抽取 closes #969 (#974)
This is an automated email from the ASF dual-hosted git repository.
tianxiaoliang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/servicecomb-service-center.git
The following commit(s) were added to refs/heads/master by this push:
new 4ad3692 fix: 国际化抽取 closes #969 (#974)
4ad3692 is described below
commit 4ad369280633d72261425a8871ab9432eda2cc66
Author: tuan <ya...@126.com>
AuthorDate: Mon May 17 11:01:45 2021 +0800
fix: 国际化抽取 closes #969 (#974)
Co-authored-by: tuan <>
---
ux/package-lock.json | 18 +-
ux/package.json | 4 +-
ux/src/app/app.component.ts | 55 ++++--
.../modal/create/create-modal.component.html | 8 +-
.../modal/create/create-modal.component.ts | 50 ++++--
.../modal/select-app/select-app.component.html | 19 +-
.../modal/select-app/select-app.component.ts | 17 +-
.../select-service/select-service.component.html | 27 +--
.../select-service/select-service.component.ts | 21 ---
.../config-create/config-create.component.html | 80 +++++----
.../pages/config-create/config-create.component.ts | 31 +++-
.../pages/list/config-list.component.html | 22 ++-
.../pages/list/config-list.component.ts | 195 ++++++++++++---------
ux/src/app/config-list/pipe/config-status.pipe.ts | 21 ++-
ux/src/app/config-list/pipe/config-type.pipe.ts | 27 ++-
.../app/instance-list/instance-list.component.html | 20 ++-
.../app/instance-list/instance-list.component.ts | 83 ++++-----
.../instance-list/instance-list.component.html | 18 +-
.../instance-list/instance-list.component.ts | 76 ++++----
.../invoked-service/invoked-service.component.html | 11 +-
.../invoked-service/invoked-service.component.ts | 4 -
.../service-detail/service-detail.component.html | 66 +++++--
.../modal/create/create.component.html | 31 ++--
.../service-list/modal/create/create.component.ts | 44 ++---
.../modal/delete/delete.component.html | 18 +-
.../app/service-list/service-list.component.html | 30 +++-
ux/src/app/service-list/service-list.component.ts | 93 ++++------
ux/src/app/shared/pipe/environment.pipe.ts | 9 +-
ux/src/app/shared/pipe/instance-status.pipe.ts | 28 +--
ux/src/app/shared/shared.module.ts | 38 +++-
ux/src/assets/i18n/zh_CN.json | 162 +++++++++++++++++
ux/src/common/service.service.ts | 4 +-
ux/src/config/global.config.js | 2 +-
ux/src/environments/environment.prod.ts | 1 +
ux/src/environments/environment.ts | 1 +
ux/src/styles.less | 8 +
36 files changed, 870 insertions(+), 472 deletions(-)
diff --git a/ux/package-lock.json b/ux/package-lock.json
index 2909dba..46466a1 100644
--- a/ux/package-lock.json
+++ b/ux/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "ux",
- "version": "0.0.1",
+ "version": "0.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -1652,6 +1652,22 @@
"webpack-sources": "2.2.0"
}
},
+ "@ngx-translate/core": {
+ "version": "13.0.0",
+ "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-13.0.0.tgz",
+ "integrity": "sha512-+tzEp8wlqEnw0Gc7jtVRAJ6RteUjXw6JJR4O65KlnxOmJrCGPI0xjV/lKRnQeU0w4i96PQs/jtpL921Wrb7PWg==",
+ "requires": {
+ "tslib": "^2.0.0"
+ }
+ },
+ "@ngx-translate/http-loader": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-6.0.0.tgz",
+ "integrity": "sha512-LCekn6qCbeXWlhESCxU1rAbZz33WzDG0lI7Ig0pYC1o5YxJWrkU9y3Y4tNi+jakQ7R6YhTR2D3ox6APxDtA0wA==",
+ "requires": {
+ "tslib": "^2.0.0"
+ }
+ },
"@nodelib/fs.scandir": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
diff --git a/ux/package.json b/ux/package.json
index 34f1c11..cacfb87 100644
--- a/ux/package.json
+++ b/ux/package.json
@@ -1,6 +1,6 @@
{
"name": "ux",
- "version": "0.0.1",
+ "version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
@@ -19,6 +19,8 @@
"@angular/platform-browser-dynamic": "~11.2.10",
"@angular/router": "~11.2.10",
"@devui-design/icons": "^1.2.0",
+ "@ngx-translate/core": "^13.0.0",
+ "@ngx-translate/http-loader": "^6.0.0",
"js-yaml": "^4.1.0",
"lodash": "^4.17.21",
"ng-devui": "^11.1.0",
diff --git a/ux/src/app/app.component.ts b/ux/src/app/app.component.ts
index 7a0a5ac..d901541 100644
--- a/ux/src/app/app.component.ts
+++ b/ux/src/app/app.component.ts
@@ -14,8 +14,9 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
import { filter, map } from 'rxjs/operators';
@Component({
@@ -24,7 +25,11 @@ import { filter, map } from 'rxjs/operators';
styleUrls: ['./app.component.less'],
})
export class AppComponent {
- constructor(private router: Router, private route: ActivatedRoute) {
+ constructor(
+ private router: Router,
+ private route: ActivatedRoute,
+ private translate: TranslateService
+ ) {
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
@@ -42,22 +47,38 @@ export class AppComponent {
? true
: res.snapshot.data.showLeftMenu;
});
+
+ this.translate.get('leftMenu').subscribe((i18n) => {
+ this.menu = [
+ {
+ title: i18n.service.title,
+ children: [
+ {
+ title: i18n.service.serviceList,
+ link: '/servicelist',
+ linkType: 'routerLink',
+ },
+ {
+ title: i18n.service.instanceList,
+ link: '/instancelist',
+ linkType: 'routerLink',
+ },
+ ],
+ },
+ {
+ title: i18n.config.title,
+ children: [
+ {
+ title: i18n.config.configList,
+ link: '/kie',
+ linkType: 'routerLink',
+ },
+ ],
+ },
+ ];
+ });
}
- title = 'local-cse';
showLeftMenu!: boolean;
-
- menu = [
- {
- title: '服务管理',
- children: [
- { title: '服务列表', link: '/servicelist', linkType: 'routerLink' },
- { title: '实例列表', link: '/instancelist', linkType: 'routerLink' },
- ],
- },
- {
- title: '配置管理',
- children: [{ title: '服务配置', link: '/kie', linkType: 'routerLink' }],
- },
- ];
+ menu: any;
}
diff --git a/ux/src/app/config-list/modal/create/create-modal.component.html b/ux/src/app/config-list/modal/create/create-modal.component.html
index f71d7ec..eb8d0e1 100644
--- a/ux/src/app/config-list/modal/create/create-modal.component.html
+++ b/ux/src/app/config-list/modal/create/create-modal.component.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="modal-component">
- <h2>选择配置类型</h2>
+ <h2>{{ "kie.modal.title" | translate }}</h2>
<div class="container" *ngFor="let item of items">
<div class="left">
@@ -23,9 +23,9 @@ limitations under the License.
<div>{{ item.content }}</div>
</div>
<div class="right">
- <d-button bsStyle="danger" (click)="onCreateBtn(item.type)"
- >立即配置</d-button
- >
+ <d-button bsStyle="danger" (click)="onCreateBtn(item.type)">
+ {{ "kie.modal.createBtn" | translate }}
+ </d-button>
</div>
</div>
</div>
diff --git a/ux/src/app/config-list/modal/create/create-modal.component.ts b/ux/src/app/config-list/modal/create/create-modal.component.ts
index aee64de..f04eff8 100644
--- a/ux/src/app/config-list/modal/create/create-modal.component.ts
+++ b/ux/src/app/config-list/modal/create/create-modal.component.ts
@@ -16,6 +16,7 @@ limitations under the License.
*/
import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-create-modal',
@@ -26,29 +27,40 @@ export class CreateModalComponent implements OnInit {
@Input() data!: {
onClose: () => void;
};
- constructor(private router: Router) {}
+ constructor(private router: Router, private translate: TranslateService) {
+ this.i18nInit();
+ }
- items = [
- {
- title: '应用级配置',
- content: '将新建到配置关联到某一应用，并添加应用名称和所在环境到标签。',
- type: 'app',
- },
- {
- title: '微服务级配置',
- content:
- '将新建到配置关联到某一微服务，并添加微服务名称和所在环境到标签。',
- type: 'service',
- },
- {
- title: '自定义配置',
- content: '自定义一个新到配置文件。',
- type: 'custom',
- },
- ];
+ items!: {
+ title: string;
+ content: string;
+ type: string;
+ }[];
ngOnInit(): void {}
+ async i18nInit(): Promise<void> {
+ const common = await this.translate.get('common').toPromise();
+ const i18n = await this.translate.get('kie.modal').toPromise();
+ this.items = [
+ {
+ title: common.appConfig,
+ content: i18n.appConfigContent,
+ type: 'app',
+ },
+ {
+ title: common.serviceConfig,
+ content: i18n.serviceConfigContent,
+ type: 'service',
+ },
+ {
+ title: common.customConfig,
+ content: i18n.customConfigContent,
+ type: 'custom',
+ },
+ ];
+ }
+
onCreateBtn(type: string): void {
this.data.onClose();
this.router.navigate(['/kie/create'], {
diff --git a/ux/src/app/config-list/modal/select-app/select-app.component.html b/ux/src/app/config-list/modal/select-app/select-app.component.html
index 2659b0d..1a75a49 100644
--- a/ux/src/app/config-list/modal/select-app/select-app.component.html
+++ b/ux/src/app/config-list/modal/select-app/select-app.component.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="modal-component">
- <h2>选择应用</h2>
+ <h2>{{ "kie.create.appSelect" | translate }}</h2>
<div class="container">
<d-data-table
@@ -28,9 +28,8 @@ limitations under the License.
<thead dTableHead>
<tr dTableRow>
<th dHeadCell></th>
- <th dHeadCell *ngFor="let colOption of columns">
- {{ colOption.header }}
- </th>
+ <th dHeadCell>{{ "kie.modal.appName" | translate }}</th>
+ <th dHeadCell>{{ "kie.modal.enviroment" | translate }}</th>
</tr>
</thead>
<tbody dTableBody>
@@ -67,11 +66,11 @@ limitations under the License.
</d-pagination>
</div>
<div class="footer">
- <d-button bsStyle="danger" [disabled]="!selectId" (click)="onConfirm()"
- >确定</d-button
- >
- <d-button bsStyle="common" class="cse-mg-left-lg" (click)="onCancel()"
- >取消</d-button
- >
+ <d-button bsStyle="danger" [disabled]="!selectId" (click)="onConfirm()">
+ {{ "common.confirm" | translate }}
+ </d-button>
+ <d-button bsStyle="common" class="cse-mg-left-lg" (click)="onCancel()">
+ {{ "common.cancel" | translate }}
+ </d-button>
</div>
</div>
diff --git a/ux/src/app/config-list/modal/select-app/select-app.component.ts b/ux/src/app/config-list/modal/select-app/select-app.component.ts
index 41ff7fb..cc522c3 100644
--- a/ux/src/app/config-list/modal/select-app/select-app.component.ts
+++ b/ux/src/app/config-list/modal/select-app/select-app.component.ts
@@ -57,26 +57,11 @@ export class SelectAppComponent implements OnInit {
},
];
- columns = [
- {
- field: 'appId',
- header: '应用名称',
- fieldType: 'text',
- order: 1,
- },
- {
- field: 'enviroment',
- header: '环境',
- fieldType: 'text',
- order: 2,
- },
- ];
-
ngOnInit(): void {
this.service.getApps().subscribe(
(res) => {
this.basicDataSource = res;
- this.pager.total = res.length;
+ this.pager.total = res?.length || 0;
this.dataSource = getTabelData(res, this.pager);
},
(err) => {
diff --git a/ux/src/app/config-list/modal/select-service/select-service.component.html b/ux/src/app/config-list/modal/select-service/select-service.component.html
index b1d1723..da01c67 100644
--- a/ux/src/app/config-list/modal/select-service/select-service.component.html
+++ b/ux/src/app/config-list/modal/select-service/select-service.component.html
@@ -15,12 +15,14 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="modal-component">
- <h2>选择微服务</h2>
+ <h2>{{ "kie.create.serviceSelect" | translate }}</h2>
<div class="container">
<form dForm ngForm>
<d-form-item>
- <d-form-label [required]="true">选择微服务</d-form-label>
+ <d-form-label [required]="true">
+ {{ "kie.create.serviceSelect" | translate }}
+ </d-form-label>
<d-form-control>
<d-data-table
[dataSource]="dataSource"
@@ -32,9 +34,9 @@ limitations under the License.
<thead dTableHead>
<tr dTableRow>
<th dHeadCell></th>
- <th dHeadCell *ngFor="let colOption of columns">
- {{ colOption.header }}
- </th>
+ <th dHeadCell>{{ "kie.modal.serviceName" | translate }}</th>
+ <th dHeadCell>{{ "kie.modal.app" | translate }}</th>
+ <th dHeadCell>{{ "kie.modal.enviroment" | translate }}</th>
</tr>
</thead>
<tbody dTableBody>
@@ -80,11 +82,13 @@ limitations under the License.
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="true">选择版本</d-form-label>
+ <d-form-label [required]="true">
+ {{ "kie.modal.vision" | translate }}
+ </d-form-label>
<d-form-control>
<d-select
class="w-200"
- [placeholder]="'选择版本'"
+ [placeholder]="'kie.modal.visionPlaceholder' | translate"
[options]="options"
[filterKey]="'version'"
[readonly]="true"
@@ -100,10 +104,11 @@ limitations under the License.
bsStyle="danger"
[disabled]="!selectService || !selectVersion"
(click)="onConfirm()"
- >确定</d-button
- >
- <d-button bsStyle="common" class="cse-mg-left-lg" (click)="onCancel()"
- >取消</d-button
>
+ {{ "common.confirm" | translate }}
+ </d-button>
+ <d-button bsStyle="common" class="cse-mg-left-lg" (click)="onCancel()">
+ {{ "common.cancel" | translate }}
+ </d-button>
</div>
</div>
diff --git a/ux/src/app/config-list/modal/select-service/select-service.component.ts b/ux/src/app/config-list/modal/select-service/select-service.component.ts
index aff32bc..579d8d5 100644
--- a/ux/src/app/config-list/modal/select-service/select-service.component.ts
+++ b/ux/src/app/config-list/modal/select-service/select-service.component.ts
@@ -66,27 +66,6 @@ export class SelectServiceComponent implements OnInit {
},
];
- columns = [
- {
- field: 'serviceName',
- header: '服务名称',
- fieldType: 'text',
- order: 1,
- },
- {
- field: 'appId',
- header: '应用',
- fieldType: 'text',
- order: 2,
- },
- {
- field: 'enviroment',
- header: '环境',
- fieldType: 'text',
- order: 3,
- },
- ];
-
ngOnInit(): void {
this.serviceService.getServiceByGovern().subscribe(
(res) => {
diff --git a/ux/src/app/config-list/pages/config-create/config-create.component.html b/ux/src/app/config-list/pages/config-create/config-create.component.html
index 215b15e..a1ccb00 100644
--- a/ux/src/app/config-list/pages/config-create/config-create.component.html
+++ b/ux/src/app/config-list/pages/config-create/config-create.component.html
@@ -17,10 +17,17 @@ limitations under the License.
<div class="container">
<d-breadcrumb>
<d-breadcrumb-item>
- <a routerLink="/kie">配置管理</a>
+ <a routerLink="/kie">{{ "kie.create.title" | translate }}</a>
</d-breadcrumb-item>
<d-breadcrumb-item>
- <span>{{ title }}</span>
+ <span>
+ {{
+ (type === "eidt"
+ ? "kie.create.eidteConfig"
+ : "kie.create.createConfig"
+ ) | translate
+ }}
+ </span>
</d-breadcrumb-item>
</d-breadcrumb>
@@ -35,11 +42,15 @@ limitations under the License.
[labelSize]="'sm'"
>
<d-form-item *ngIf="configType">
- <d-form-label [required]="false">配置类型</d-form-label>
+ <d-form-label [required]="false">
+ {{ "kie.create.type" | translate }}
+ </d-form-label>
<d-form-control>{{ configType }}</d-form-control>
</d-form-item>
<d-form-item *ngIf="configType === 'app' && type === 'create'">
- <d-form-label [required]="true">应用</d-form-label>
+ <d-form-label [required]="true">
+ {{ "kie.create.app" | translate }}
+ </d-form-label>
<d-form-control>
<span *ngIf="appId">{{ appId }}</span>
<i
@@ -47,14 +58,16 @@ limitations under the License.
class="icon icon-delete app-delete"
(click)="onDeleteApp()"
></i>
- <d-button *ngIf="!appId" bsStyle="common" (click)="onSelectApp()"
- >选择应用</d-button
- >
+ <d-button *ngIf="!appId" bsStyle="common" (click)="onSelectApp()">
+ {{ "kie.create.appSelect" | translate }}
+ </d-button>
</d-form-control>
</d-form-item>
<d-form-item *ngIf="configType === 'service' && type === 'create'">
- <d-form-label [required]="true">微服务</d-form-label>
+ <d-form-label [required]="true">
+ {{ "kie.create.service" | translate }}
+ </d-form-label>
<d-form-control>
<span *ngIf="serviceId">{{ serviceId }}</span>
<i
@@ -66,36 +79,27 @@ limitations under the License.
*ngIf="!serviceId"
bsStyle="common"
(click)="onSelectService()"
- >选择微服务</d-button
>
+ {{ "kie.create.serviceSelect" | translate }}
+ </d-button>
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="true" [hasHelp]="true" helpTips="xxxxx">
- 配置项
+ <d-form-label [required]="true">
+ {{ "kie.create.configName" | translate }}
</d-form-label>
<d-form-control>
+ {{ configMessage }}
<ng-container *ngIf="type === 'create'; else elseTemplate">
<input
type="text"
dTextInput
class="w-300"
- placeholder="请输入配置项"
+ [placeholder]="'kie.create.configPlaceholder' | translate"
+ autocomplete="off"
name="configName"
formControlName="configName"
- [dValidateRules]="[
- { required: true },
- { whitespace: true },
- { minlength: 1 },
- { maxlength: 128 },
- {
- pattern: isAlphabetPattern,
- message: {
- default:
- '请输入由数字/字母/下划线/中划线或小数点组成对1-128位字符'
- }
- }
- ]"
+ [dValidateRules]="configNameRules"
/>
</ng-container>
<ng-template #elseTemplate>
@@ -104,7 +108,9 @@ limitations under the License.
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="false">标签</d-form-label>
+ <d-form-label [required]="false">
+ {{ "kie.create.tag" | translate }}
+ </d-form-label>
<d-form-control>
<div class="cse-mg-bottom-sm">
<d-tag
@@ -122,7 +128,7 @@ limitations under the License.
type="text"
dTextInput
class="w-300"
- placeholder="请输入标签键"
+ [placeholder]="'kie.create.tagKeyPlaceholder' | translate"
[(ngModel)]="configTageKey"
[ngModelOptions]="{ standalone: true }"
[dValidateRules]="[
@@ -134,7 +140,7 @@ limitations under the License.
type="text"
dTextInput
class="w-300 cse-mg-left-xs"
- placeholder="请输入标签值"
+ [placeholder]="'kie.create.tagValuePlaceholder' | translate"
[(ngModel)]="configTageValue"
[ngModelOptions]="{ standalone: true }"
[dValidateRules]="[
@@ -153,7 +159,9 @@ limitations under the License.
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="false">配置格式</d-form-label>
+ <d-form-label [required]="false">
+ {{ "kie.create.size" | translate }}
+ </d-form-label>
<d-form-control>
<d-button-group size="md">
<d-button
@@ -167,14 +175,18 @@ limitations under the License.
</d-form-control>
</d-form-item>
<d-form-item *ngIf="type === 'eidt'">
- <d-form-label [required]="false">是否启用</d-form-label>
+ <d-form-label [required]="false">
+ {{ "kie.create.isAvailable" | translate }}
+ </d-form-label>
<d-form-control>
- <d-toggle [checked]="status === 'enabled'"></d-toggle>
+ <d-toggle formControlName="isAvailable"></d-toggle>
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="true">配置内容</d-form-label>
+ <d-form-label [required]="true">
+ {{ "kie.create.configContent" | translate }}
+ </d-form-label>
<d-form-control>
<ngx-monaco-editor
#monacoEditor
@@ -200,10 +212,10 @@ limitations under the License.
dTooltip
[content]="form.errorMessage"
>
- Submit
+ {{ "common.confirm" | translate }}
</d-button>
<d-button bsStyle="common" circled="true" (click)="cancel()">
- Cancel
+ {{ "common.cancel" | translate }}
</d-button>
</d-form-operation>
</form>
diff --git a/ux/src/app/config-list/pages/config-create/config-create.component.ts b/ux/src/app/config-list/pages/config-create/config-create.component.ts
index 058fd78..432df55 100644
--- a/ux/src/app/config-list/pages/config-create/config-create.component.ts
+++ b/ux/src/app/config-list/pages/config-create/config-create.component.ts
@@ -17,6 +17,7 @@ limitations under the License.
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
import { DValidateRules, FormLayout, ModalService } from 'ng-devui';
import { EditorComponent } from 'ngx-monaco-editor';
import { ConfigService, getTagsByObj } from '../../../../common/config.service';
@@ -39,7 +40,8 @@ export class ConfigCreateComponent implements OnInit {
private route: ActivatedRoute,
private router: Router,
private service: ConfigService,
- private modalService: ModalService
+ private modalService: ModalService,
+ private translate: TranslateService
) {
this.route.queryParams.subscribe((res) => {
if (res.configType) {
@@ -49,13 +51,16 @@ export class ConfigCreateComponent implements OnInit {
});
this.route.data.subscribe((res) => {
this.type = res.type;
- this.title = res.type === 'eidt' ? '编辑配置' : '新建配置';
+ });
+ this.translate.get('kie.create.configMessage').subscribe((res) => {
+ this.configNameRules[4].message = res;
});
}
formGroup = new FormGroup({
code: new FormControl(''),
configName: new FormControl(''),
+ isAvailable: new FormControl(false),
});
formRules: { [key: string]: DValidateRules } = {
@@ -71,7 +76,17 @@ export class ConfigCreateComponent implements OnInit {
type!: 'create' | 'eidt'; // 编辑 创建
configType!: 'app' | 'service' | 'custom'; // custom app service
kvId!: string;
- title!: string;
+ configNameRules = [
+ { required: true },
+ { whitespace: true },
+ { minlength: 1 },
+ { maxlength: 128 },
+ {
+ pattern: /^[a-zA-Z0-9-_.]+$/,
+ message: '',
+ },
+ ];
+ configMessage!: string;
FormLayout = FormLayout;
configFormatItems = [
{
@@ -107,8 +122,6 @@ export class ConfigCreateComponent implements OnInit {
appId = ''; // 应用名称
serviceId = ''; // 微服务id
- isAlphabetPattern = /^[a-zA-Z0-9-_.]+$/;
-
configTageKey!: string;
configTageValue!: string;
@@ -119,7 +132,9 @@ export class ConfigCreateComponent implements OnInit {
this.tags = getTagsByObj(res.labels || {});
this.formGroup.controls.configName.setValue(res.key);
this.formGroup.controls.code.setValue(res.value);
- this.status = res.status;
+ this.formGroup.controls.isAvailable.setValue(
+ res.status === 'enabled'
+ );
this.configFormatItems = JSON.parse(
JSON.stringify(this.configFormatItems)
).filter((item: any) => item.id === res.value_type);
@@ -215,7 +230,9 @@ export class ConfigCreateComponent implements OnInit {
labels,
value: this.formGroup.controls.code.value,
value_type: this.editorOptions.language,
- status: this.status,
+ status: this.formGroup.controls.isAvailable.value
+ ? 'enabled'
+ : 'disabled',
};
if (this.kvId) {
this.service.putKie(this.kvId, param).subscribe(
diff --git a/ux/src/app/config-list/pages/list/config-list.component.html b/ux/src/app/config-list/pages/list/config-list.component.html
index a12fe6b..e17c12b 100644
--- a/ux/src/app/config-list/pages/list/config-list.component.html
+++ b/ux/src/app/config-list/pages/list/config-list.component.html
@@ -15,14 +15,16 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="title">
- <span>配置管理</span>
+ <span>{{ "kie.list.title" | translate }}</span>
<d-button
icon="icon-add"
+ type="button"
bsStyle="danger"
style="float: right"
(click)="onCreate()"
>
- 新建配置
+ {{ "kie.list.create" | translate }}
+ <span class="opacity-placeholder">_</span>
</d-button>
</div>
<div class="header">
@@ -70,14 +72,16 @@ limitations under the License.
*ngIf="rowItem.status === 'enabled'"
bsStyle="text"
(click)="onForbidden(rowItem)"
- >禁用</d-button
>
+ {{ "kie.list.operator.forbidden" | translate }}
+ </d-button>
<d-button
*ngIf="rowItem.status === 'disabled'"
bsStyle="text"
(click)="onEnable(rowItem)"
- >启用</d-button
>
+ {{ "kie.list.operator.enabled" | translate }}
+ </d-button>
<d-button
bsStyle="text"
class="cse-mg-left-xs"
@@ -85,19 +89,23 @@ limitations under the License.
[queryParams]="{
kvId: rowItem.id
}"
- >更新</d-button
>
+ {{ "kie.list.operator.update" | translate }}
+ </d-button>
<d-button
bsStyle="text"
class="cse-mg-left-xs"
(click)="onDeleteItem(rowItem)"
- >删除</d-button
>
+ {{ "kie.list.operator.delete" | translate }}
+ </d-button>
</td>
</tr>
</ng-template>
<ng-template #noResultTemplateRef>
- <div style="text-align: center; margin-top: 20px">No Data</div>
+ <div style="text-align: center; margin-top: 20px">
+ {{ "common.noData" | translate }}
+ </div>
</ng-template>
</tbody>
</d-data-table>
diff --git a/ux/src/app/config-list/pages/list/config-list.component.ts b/ux/src/app/config-list/pages/list/config-list.component.ts
index 5e800ca..747141d 100644
--- a/ux/src/app/config-list/pages/list/config-list.component.ts
+++ b/ux/src/app/config-list/pages/list/config-list.component.ts
@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
import { cloneDeep, flatten, map, uniq, uniqBy } from 'lodash';
import { DialogService, ICategorySearchTagItem, ModalService } from 'ng-devui';
import {
@@ -34,74 +35,19 @@ export class ConfigListComponent implements OnInit {
constructor(
private service: ConfigService,
private modalService: ModalService,
- private dialogService: DialogService
+ private dialogService: DialogService,
+ private translate: TranslateService
) {}
private basicDataSource: any;
dataSource: any;
- category: Array<ICategorySearchTagItem> | any = [
- {
- field: 'key',
- label: '配置项',
- type: 'textInput',
- },
- {
- field: 'status',
- label: '状态',
- options: [],
- type: 'label',
- },
- {
- field: 'labels_format',
- label: '标签',
- options: [],
- type: 'label',
- },
- ];
+ category: Array<ICategorySearchTagItem> | any = [];
- columns = [
- {
- field: 'key',
- header: '配置项',
- fieldType: 'text',
- width: '100px',
- },
- {
- field: 'status',
- header: '状态',
- fieldType: 'text',
- width: '50px',
- },
- {
- field: 'lables',
- header: '标签',
- fieldType: 'text',
- width: '200px',
- },
- {
- field: 'type',
- header: '配置项类型',
- fieldType: 'text',
- width: '100px',
- },
- {
- field: 'value_type',
- header: '配置格式',
- fieldType: 'text',
- width: '100px',
- },
- {
- field: 'update_time',
- header: '更新时间',
- fieldType: 'date',
- width: '200px',
- },
- {
- field: '',
- header: '操作项',
- fieldType: 'date',
- width: '100px',
- },
- ];
+ columns!: {
+ field: string;
+ header: string;
+ fieldType: string;
+ width: string;
+ }[];
pager = {
total: 0,
@@ -112,9 +58,76 @@ export class ConfigListComponent implements OnInit {
ngOnInit(): void {
this.onRefresh();
+ this.translate.get('kie.list').subscribe((i18n) => {
+ this.columns = [
+ {
+ field: 'key',
+ header: i18n.columns.key,
+ fieldType: 'text',
+ width: '100px',
+ },
+ {
+ field: 'status',
+ header: i18n.columns.status,
+ fieldType: 'text',
+ width: '50px',
+ },
+ {
+ field: 'lables',
+ header: i18n.columns.lables,
+ fieldType: 'text',
+ width: '200px',
+ },
+ {
+ field: 'type',
+ header: i18n.columns.type,
+ fieldType: 'text',
+ width: '100px',
+ },
+ {
+ field: 'value_type',
+ header: i18n.columns.value_type,
+ fieldType: 'text',
+ width: '100px',
+ },
+ {
+ field: 'update_time',
+ header: i18n.columns.update_time,
+ fieldType: 'date',
+ width: '200px',
+ },
+ {
+ field: 'operator',
+ header: i18n.columns.operator,
+ fieldType: 'text',
+ width: '100px',
+ },
+ ];
+
+ this.category = [
+ {
+ field: 'key',
+ label: i18n.columns.key,
+ type: 'textInput',
+ },
+ {
+ field: 'status',
+ label: i18n.columns.status,
+ options: [],
+ type: 'label',
+ },
+ {
+ field: 'labels_format',
+ label: i18n.columns.lables,
+ options: [],
+ type: 'label',
+ },
+ ];
+ });
}
- onRefresh(): void {
+ async onRefresh(): Promise<void> {
+ const operator = await this.getI18n('kie.list.operator');
this.service.getAllKies().subscribe(
(data) => {
this.basicDataSource = data.data
@@ -128,7 +141,8 @@ export class ConfigListComponent implements OnInit {
this.category[1].options = uniqBy(
map(this.basicDataSource, (item: any) => ({
id: item.status,
- label: item.status === 'enabled' ? '启用' : '禁用',
+ label:
+ item.status === 'enabled' ? operator.enabled : operator.forbidden,
})),
'label'
);
@@ -164,15 +178,20 @@ export class ConfigListComponent implements OnInit {
});
}
- onForbidden(rowItem: { id: string; key: string }): void {
+ async onForbidden(rowItem: { id: string; key: string }): Promise<void> {
+ const common = await this.getI18n('common');
+ const title = await this.getI18n('kie.list.tip');
+ const content = await this.getI18n('kie.list.forbiddenContent', {
+ key: rowItem.key,
+ });
const results = this.dialogService.open({
id: 'forbidden',
- title: '提示',
- content: `确认禁用配置项 ${rowItem.key}`,
+ title,
+ content,
width: '400px',
buttons: [
{
- text: '确定',
+ text: common.confirm,
cssClass: 'danger',
handler: async () => {
await forbiddenFn(rowItem.id, rowItem.key);
@@ -181,7 +200,7 @@ export class ConfigListComponent implements OnInit {
},
},
{
- text: '取消',
+ text: common.cancel,
cssClass: 'common',
handler: () => {
results.modalInstance.hide();
@@ -199,15 +218,20 @@ export class ConfigListComponent implements OnInit {
};
}
- onEnable(rowItem: { id: string; key: string }): void {
+ async onEnable(rowItem: { id: string; key: string }): Promise<void> {
+ const common = await this.getI18n('common');
+ const title = await this.getI18n('kie.list.tip');
+ const content = await this.getI18n('kie.list.enableContent', {
+ key: rowItem.key,
+ });
const results = this.dialogService.open({
id: 'forbidden',
- title: '提示',
- content: `确认启用配置项 ${rowItem.key} `,
+ title,
+ content,
width: '400px',
buttons: [
{
- text: '确定',
+ text: common.confirm,
cssClass: 'danger',
handler: async () => {
await enableFn(rowItem.id, rowItem.key);
@@ -216,7 +240,7 @@ export class ConfigListComponent implements OnInit {
},
},
{
- text: '取消',
+ text: common.cancel,
cssClass: 'common',
handler: () => {
results.modalInstance.hide();
@@ -234,16 +258,21 @@ export class ConfigListComponent implements OnInit {
};
}
- onDeleteItem(rowItem: { id: string; key: string }): void {
+ async onDeleteItem(rowItem: { id: string; key: string }): Promise<void> {
+ const common = await this.getI18n('common');
+ const title = await this.getI18n('kie.list.tip');
+ const content = await this.getI18n('kie.list.deleteContent', {
+ key: rowItem.key,
+ });
const results = this.dialogService.open({
id: 'deleteKie',
width: '400px',
showAnimate: true,
- title: '提示',
- content: `你确定要删除配置项 ${rowItem.key}`,
+ title,
+ content,
buttons: [
{
- text: '确认',
+ text: common.confirm,
cssClass: 'danger',
handler: async () => {
// todo
@@ -253,7 +282,7 @@ export class ConfigListComponent implements OnInit {
},
},
{
- text: '取消',
+ text: common.cancel,
cssClass: 'common',
handler: () => {
// todo
@@ -281,4 +310,8 @@ export class ConfigListComponent implements OnInit {
this.pager = pageination;
this.dataSource = tableData;
}
+
+ private async getI18n(key: string, param?: any): Promise<any> {
+ return await this.translate.get(key, param).toPromise();
+ }
}
diff --git a/ux/src/app/config-list/pipe/config-status.pipe.ts b/ux/src/app/config-list/pipe/config-status.pipe.ts
index 410263c..1c94d66 100644
--- a/ux/src/app/config-list/pipe/config-status.pipe.ts
+++ b/ux/src/app/config-list/pipe/config-status.pipe.ts
@@ -15,15 +15,24 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
@Pipe({ name: 'configStatusPipe' })
export class ConfigStatusPipe implements PipeTransform {
+ constructor(private translate: TranslateService) {
+ this.translate.get('kie.list.operator').subscribe((i18n) => {
+ this.statusMap = {
+ enabled: i18n.enabled,
+ disabled: i18n.forbidden,
+ };
+ });
+ }
+
+ statusMap = {
+ enabled: '',
+ disabled: '',
+ };
transform(value: 'enabled' | 'disabled'): string {
- return statusMap[value];
+ return this.statusMap[value];
}
}
-
-const statusMap = {
- enabled: '启用',
- disabled: '禁用',
-};
diff --git a/ux/src/app/config-list/pipe/config-type.pipe.ts b/ux/src/app/config-list/pipe/config-type.pipe.ts
index 1d47b3e..6cbc271 100644
--- a/ux/src/app/config-list/pipe/config-type.pipe.ts
+++ b/ux/src/app/config-list/pipe/config-type.pipe.ts
@@ -15,13 +15,32 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
@Pipe({
name: 'ConfigTypePipe',
})
export class ConfigTypePipe implements PipeTransform {
+ constructor(private translate: TranslateService) {
+ this.translate
+ .get('common')
+ .subscribe(({ appConfig, customConfig, serviceConfig }) => {
+ this.types = {
+ app: appConfig,
+ custom: customConfig,
+ service: serviceConfig,
+ };
+ });
+ }
+
+ types = {
+ app: '',
+ custom: '',
+ service: '',
+ };
+
transform(value: Lables): string {
- return types[configTypeFn(value)];
+ return this.types[configTypeFn(value)];
}
}
@@ -43,12 +62,6 @@ export const configTypeFn = (value: Lables): type => {
return 'custom';
};
-const types = {
- app: '应用级配置',
- custom: '自定义配置',
- service: '微服务级配置',
-};
-
interface Lables {
[lable: string]: string;
}
diff --git a/ux/src/app/instance-list/instance-list.component.html b/ux/src/app/instance-list/instance-list.component.html
index c1406cb..cb0bd6f 100644
--- a/ux/src/app/instance-list/instance-list.component.html
+++ b/ux/src/app/instance-list/instance-list.component.html
@@ -14,7 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
-<div class="title">{{ title }}</div>
+<div class="title">{{ "instance.title" | translate }}</div>
<d-data-table
#datatable
@@ -26,10 +26,14 @@ limitations under the License.
>
<thead dTableHead>
<tr dTableRow>
- <th dHeadCell *ngFor="let colOption of columns">
- {{ colOption.header }}
- </th>
- <th dHeadCell [width]="'200px'">操作</th>
+ <th dHeadCell>{{ "instance.columns.hostName" | translate }}</th>
+ <th dHeadCell>{{ "instance.columns.status" | translate }}</th>
+ <th dHeadCell>{{ "instance.columns.environment" | translate }}</th>
+ <th dHeadCell>{{ "instance.columns.serviceName" | translate }}</th>
+ <th dHeadCell>{{ "instance.columns.endpoints" | translate }}</th>
+ <th dHeadCell>{{ "instance.columns.version" | translate }}</th>
+ <th dHeadCell>{{ "instance.columns.modTimestamp" | translate }}</th>
+ <th dHeadCell [width]="'200px'">{{ "common.operator" | translate }}</th>
</tr>
</thead>
<tbody dTableBody>
@@ -52,7 +56,7 @@ limitations under the License.
<app-action-menu
[actions]="actionFn(rowItem)"
[maxShowNum]="2"
- [menuText]="'更多'"
+ [menuText]="'common.more' | translate"
(menuClick)="actionClick($event, rowItem)"
></app-action-menu>
</td>
@@ -60,7 +64,9 @@ limitations under the License.
</ng-template>
<ng-template #noResultTemplateRef>
- <div style="text-align: center; margin-top: 20px">No Data</div>
+ <div style="text-align: center; margin-top: 20px">
+ {{ "common.noData" | translate }}
+ </div>
</ng-template>
</tbody>
</d-data-table>
diff --git a/ux/src/app/instance-list/instance-list.component.ts b/ux/src/app/instance-list/instance-list.component.ts
index 0a2fdfc..9df3006 100644
--- a/ux/src/app/instance-list/instance-list.component.ts
+++ b/ux/src/app/instance-list/instance-list.component.ts
@@ -15,7 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Component, OnInit } from '@angular/core';
-import { DialogService, ModalService, TableWidthConfig } from 'ng-devui';
+import { TranslateService } from '@ngx-translate/core';
+import { DialogService } from 'ng-devui';
import { ServiceService } from 'src/common/service.service';
import { ActionItem } from '../shared/action-menu/action-menu.module';
import { getTabelData } from '../shared/toolFunction/tabel.pagination';
@@ -29,10 +30,8 @@ export class InstanceListComponent implements OnInit {
constructor(
private service: ServiceService,
private dialog: DialogService,
- private module: ModalService
+ private translate: TranslateService
) {}
- title = '实例列表';
-
private basicDataSource = [];
dataSource: any[] = [];
pager = {
@@ -44,43 +43,36 @@ export class InstanceListComponent implements OnInit {
columns = [
{
field: 'hostName',
- header: '实例名称',
fieldType: 'text',
width: '300px',
},
{
field: 'status',
- header: '状态',
fieldType: 'text',
width: '100px',
},
{
field: 'environment',
- header: '环境',
fieldType: 'text',
width: '100px',
},
{
field: 'serviceName',
- header: '所属服务',
fieldType: 'text',
width: '100px',
},
{
field: 'endpoints',
- header: 'Endpoints',
fieldType: 'text',
width: '200px',
},
{
field: 'version',
- header: '所属版本',
fieldType: 'text',
width: '150px',
},
{
field: 'modTimestamp',
- header: '更新时间',
fieldType: 'text',
width: '250px',
},
@@ -95,7 +87,7 @@ export class InstanceListComponent implements OnInit {
this.service.getInstances().subscribe(
(res) => {
this.basicDataSource = res;
- this.pager.total = res.length;
+ this.pager.total = res?.length || 0;
this.dataSource = getTabelData(this.basicDataSource, this.pager);
},
(err) => {
@@ -105,41 +97,50 @@ export class InstanceListComponent implements OnInit {
}
actionFn(rowItem: any): ActionItem[] {
- // UP在线,OUTOFSERVICE摘机,STARTING正在启动,DOWN下线,TESTING拨测状态。
- const actions: ActionItem[] = [
- {
- id: 'DOWN',
- label: '下线',
- disabled: rowItem.status === 'DOWN',
- },
- {
- id: 'UP',
- label: '上线',
- disabled: rowItem.status === 'UP',
- },
- {
- id: 'OUTOFSERVICE',
- label: '摘机',
- disabled: rowItem.status === 'OUTOFSERVICE',
- },
- {
- id: 'TESTING',
- label: '拨测',
- disabled: rowItem.status === 'TESTING',
- },
- ];
-
+ let actions: ActionItem[] = [];
+ this.translate.get('instanceStatus').subscribe((status) => {
+ // UP在线,OUTOFSERVICE摘机,STARTING正在启动,DOWN下线,TESTING拨测状态。
+ actions = [
+ {
+ id: 'DOWN',
+ label: status.DOWN,
+ disabled: rowItem.status === 'DOWN',
+ },
+ {
+ id: 'UP',
+ label: status.UP,
+ disabled: rowItem.status === 'UP',
+ },
+ {
+ id: 'OUTOFSERVICE',
+ label: status.OUTOFSERVICE,
+ disabled: rowItem.status === 'OUTOFSERVICE',
+ },
+ {
+ id: 'TESTING',
+ label: status.TESTING,
+ disabled: rowItem.status === 'TESTING',
+ },
+ ];
+ });
return actions;
}
- actionClick(e: ActionItem, rowItem: any): void {
+ async actionClick(e: ActionItem, rowItem: any): Promise<void> {
+ const common = await this.translate.get('common').toPromise();
+ const content = await this.translate
+ .get('instance.changeContent', {
+ hostName: rowItem.hostName,
+ status: e.label,
+ })
+ .toPromise();
const results = this.dialog.open({
id: 'action-modal',
- title: '提示',
- content: `确认改变实例 "${rowItem.hostName}" 的状态为${e.label}?`,
+ title: common.tips,
+ content,
buttons: [
{
- text: '确定',
+ text: common.confirm,
cssClass: 'danger',
handler: () => {
this.service
@@ -156,7 +157,7 @@ export class InstanceListComponent implements OnInit {
},
},
{
- text: '取消',
+ text: common.cancel,
cssClass: 'common',
handler: () => {
results.modalInstance.hide();
diff --git a/ux/src/app/service-detail/components/instance-list/instance-list.component.html b/ux/src/app/service-detail/components/instance-list/instance-list.component.html
index 9652e79..267da38 100644
--- a/ux/src/app/service-detail/components/instance-list/instance-list.component.html
+++ b/ux/src/app/service-detail/components/instance-list/instance-list.component.html
@@ -24,8 +24,20 @@ limitations under the License.
>
<thead dTableHead>
<tr dTableRow>
- <th dHeadCell *ngFor="let colOption of columns">
- {{ colOption.header }}
+ <th dHeadCell>
+ {{ "serviceDetail.instance.hostName" | translate }}
+ </th>
+ <th dHeadCell>
+ {{ "serviceDetail.instance.status" | translate }}
+ </th>
+ <th dHeadCell>
+ {{ "serviceDetail.instance.endpoints" | translate }}
+ </th>
+ <th dHeadCell>
+ {{ "serviceDetail.instance.modTimestamp" | translate }}
+ </th>
+ <th dHeadCell>
+ {{ "common.operator" | translate }}
</th>
</tr>
</thead>
@@ -46,7 +58,7 @@ limitations under the License.
<app-action-menu
[actions]="actionFn(rowItem)"
[maxShowNum]="2"
- [menuText]="'更多'"
+ [menuText]="'common.more' | translate"
(menuClick)="actionClick($event, rowItem)"
>
</app-action-menu>
diff --git a/ux/src/app/service-detail/components/instance-list/instance-list.component.ts b/ux/src/app/service-detail/components/instance-list/instance-list.component.ts
index 973b289..dd78f7b 100644
--- a/ux/src/app/service-detail/components/instance-list/instance-list.component.ts
+++ b/ux/src/app/service-detail/components/instance-list/instance-list.component.ts
@@ -16,6 +16,7 @@ limitations under the License.
*/
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
import { cloneDeep } from 'lodash';
import { DialogService } from 'ng-devui';
import { ActionItem } from 'src/app/shared/action-menu/action-menu.module';
@@ -31,7 +32,8 @@ export class InstanceListComponent implements OnInit {
constructor(
private service: ServiceService,
private route: ActivatedRoute,
- private dialog: DialogService
+ private dialog: DialogService,
+ private translate: TranslateService
) {
this.serviceId = this.route.snapshot.paramMap.get('id') as string;
}
@@ -49,31 +51,26 @@ export class InstanceListComponent implements OnInit {
columns = [
{
field: 'hostName',
- header: '实例名称',
fieldType: 'text',
width: '300px',
},
{
field: 'status',
- header: '实例状态',
fieldType: 'text',
width: '150px',
},
{
field: 'endpoints',
- header: 'Endpoints',
fieldType: 'text',
width: '300px',
},
{
field: 'modTimestamp',
- header: '更新时间',
fieldType: 'date',
width: '300px',
},
{
field: 'operation',
- header: '操作',
fieldType: 'text',
width: '200px',
},
@@ -89,7 +86,7 @@ export class InstanceListComponent implements OnInit {
this.service.getInstancesbyServiceId(serviceId).subscribe(
(res) => {
this.basicDataSource = res.instances;
- this.pager.total = res.instances?.length;
+ this.pager.total = res.instances?.length || 0;
this.dataSource = getTabelData(this.basicDataSource, this.pager);
},
(err) => {
@@ -102,41 +99,50 @@ export class InstanceListComponent implements OnInit {
onToggle(e?: any): void {}
actionFn(rowItem: any): ActionItem[] {
+ let actions: ActionItem[] = [];
+ this.translate.get('instanceStatus').subscribe((i18n) => {
+ actions = [
+ {
+ id: 'DOWN',
+ label: i18n.DOWN,
+ disabled: rowItem.status === 'DOWN',
+ },
+ {
+ id: 'UP',
+ label: i18n.UP,
+ disabled: rowItem.status === 'UP',
+ },
+ {
+ id: 'OUTOFSERVICE',
+ label: i18n.OUTOFSERVICE,
+ disabled: rowItem.status === 'OUTOFSERVICE',
+ },
+ {
+ id: 'TESTING',
+ label: i18n.TESTING,
+ disabled: rowItem.status === 'TESTING',
+ },
+ ];
+ });
// UP在线,OUTOFSERVICE摘机,STARTING正在启动,DOWN下线,TESTING拨测状态。
- const actions: ActionItem[] = [
- {
- id: 'DOWN',
- label: '下线',
- disabled: rowItem.status === 'DOWN',
- },
- {
- id: 'UP',
- label: '上线',
- disabled: rowItem.status === 'UP',
- },
- {
- id: 'OUTOFSERVICE',
- label: '摘机',
- disabled: rowItem.status === 'OUTOFSERVICE',
- },
- {
- id: 'TESTING',
- label: '拨测',
- disabled: rowItem.status === 'TESTING',
- },
- ];
-
return actions;
}
- actionClick(e: ActionItem, rowItem: any): void {
+ async actionClick(e: ActionItem, rowItem: any): Promise<void> {
+ const common = await this.translate.get('common').toPromise();
+ const content = await this.translate
+ .get('instance.changeContent', {
+ hostName: rowItem.hostName,
+ status: e.label,
+ })
+ .toPromise();
const results = this.dialog.open({
id: 'action-modal',
- title: '提示',
- content: `确认改变实例 "${rowItem.hostName}" 的状态为${e.label}?`,
+ title: common.tips,
+ content,
buttons: [
{
- text: '确定',
+ text: common.confirm,
cssClass: 'danger',
handler: () => {
this.service
@@ -153,7 +159,7 @@ export class InstanceListComponent implements OnInit {
},
},
{
- text: '取消',
+ text: common.cancel,
cssClass: 'common',
handler: () => {
results.modalInstance.hide();
diff --git a/ux/src/app/service-detail/components/invoked-service/invoked-service.component.html b/ux/src/app/service-detail/components/invoked-service/invoked-service.component.html
index 6ea04af..1af9fb1 100644
--- a/ux/src/app/service-detail/components/invoked-service/invoked-service.component.html
+++ b/ux/src/app/service-detail/components/invoked-service/invoked-service.component.html
@@ -24,9 +24,10 @@ limitations under the License.
>
<thead dTableHead>
<tr dTableRow>
- <th dHeadCell *ngFor="let colOption of columns">
- {{ colOption.header }}
- </th>
+ <th dHeadCell>{{ "serviceDetail.invoked.serviceName" | translate }}</th>
+ <th dHeadCell>{{ "serviceDetail.invoked.app" | translate }}</th>
+ <th dHeadCell>{{ "serviceDetail.invoked.version" | translate }}</th>
+ <th dHeadCell>{{ "serviceDetail.invoked.timestamp" | translate }}</th>
</tr>
</thead>
<tbody dTableBody>
@@ -48,7 +49,9 @@ limitations under the License.
</ng-template>
<ng-template #noResultTemplateRef>
- <div style="text-align: center; margin-top: 20px">No Data</div>
+ <div style="text-align: center; margin-top: 20px">
+ {{ "common.noData" | translate }}
+ </div>
</ng-template>
</tbody>
</d-data-table>
diff --git a/ux/src/app/service-detail/components/invoked-service/invoked-service.component.ts b/ux/src/app/service-detail/components/invoked-service/invoked-service.component.ts
index d7cac18..c8e7213 100644
--- a/ux/src/app/service-detail/components/invoked-service/invoked-service.component.ts
+++ b/ux/src/app/service-detail/components/invoked-service/invoked-service.component.ts
@@ -47,25 +47,21 @@ export class InvokedServiceComponent implements OnInit {
columns = [
{
field: 'serviceName',
- header: '服务名称',
fieldType: 'text',
width: '300px',
},
{
field: 'appId',
- header: '所属应用',
fieldType: 'text',
width: '150px',
},
{
field: 'version',
- header: '版本',
fieldType: 'text',
width: '150px',
},
{
field: 'timestamp',
- header: '创建时间',
fieldType: 'date',
width: '300px',
},
diff --git a/ux/src/app/service-detail/service-detail.component.html b/ux/src/app/service-detail/service-detail.component.html
index 8ad40fa..eb6b13b 100644
--- a/ux/src/app/service-detail/service-detail.component.html
+++ b/ux/src/app/service-detail/service-detail.component.html
@@ -17,7 +17,7 @@ limitations under the License.
<div class="container">
<d-breadcrumb style="margin-bottom: 20px">
<d-breadcrumb-item>
- <a routerLink="/servicelist">微服务目录</a>
+ <a routerLink="/servicelist">{{ "serviceDetail.back" | translate }}</a>
</d-breadcrumb-item>
<d-breadcrumb-item>
<span>{{ title }}</span>
@@ -29,7 +29,9 @@ limitations under the License.
<div class="grid">
<div class="u-1-2">
<d-form-item>
- <d-form-label> 微服务名称 </d-form-label>
+ <d-form-label>
+ {{ "serviceDetail.serviceName" | translate }}
+ </d-form-label>
<d-form-control class="form-control-width">
{{ serviceData?.serviceName }}
</d-form-control>
@@ -37,7 +39,9 @@ limitations under the License.
</div>
<div class="u-1-2">
<d-form-item>
- <d-form-label> 实例数 </d-form-label>
+ <d-form-label>
+ {{ "serviceDetail.instanceNum" | translate }}
+ </d-form-label>
<d-form-control class="form-control-width">
{{ serviceData?.instances?.length || 0 }}
</d-form-control>
@@ -45,7 +49,9 @@ limitations under the License.
</div>
<div class="u-1-2">
<d-form-item>
- <d-form-label> 所属环境 </d-form-label>
+ <d-form-label>
+ {{ "serviceDetail.environment" | translate }}
+ </d-form-label>
<d-form-control class="form-control-width">
{{ serviceData?.environment | EnvironmentPipe }}
</d-form-control>
@@ -53,7 +59,7 @@ limitations under the License.
</div>
<div class="u-1-2">
<d-form-item>
- <d-form-label> 所属应用 </d-form-label>
+ <d-form-label> {{ "serviceDetail.app" | translate }} </d-form-label>
<d-form-control class="form-control-width">
{{ serviceData?.appId }}
</d-form-control>
@@ -61,7 +67,9 @@ limitations under the License.
</div>
<div class="u-1-2">
<d-form-item>
- <d-form-label> 微服务版本 </d-form-label>
+ <d-form-label>
+ {{ "serviceDetail.version" | translate }}
+ </d-form-label>
<d-form-control class="form-control-width">
{{ serviceData?.version }}
</d-form-control>
@@ -69,7 +77,9 @@ limitations under the License.
</div>
<div class="u-1-2">
<d-form-item>
- <d-form-label> 框架 </d-form-label>
+ <d-form-label>
+ {{ "serviceDetail.framework" | translate }}
+ </d-form-label>
<d-form-control class="form-control-width">
{{ serviceData?.framework?.version }}
</d-form-control>
@@ -77,7 +87,9 @@ limitations under the License.
</div>
<div class="u-1-2">
<d-form-item>
- <d-form-label> 上线时间 </d-form-label>
+ <d-form-label>
+ {{ "serviceDetail.lineTime" | translate }}
+ </d-form-label>
<d-form-control class="form-control-width">
{{
serviceData?.modTimestamp * 1000
@@ -88,7 +100,9 @@ limitations under the License.
</div>
<div class="u-1-2">
<d-form-item>
- <d-form-label> 创建时间 </d-form-label>
+ <d-form-label>
+ {{ "serviceDetail.createTime" | translate }}
+ </d-form-label>
<d-form-control class="form-control-width">
{{
serviceData?.timestamp * 1000 | date: "yyyy/MM/dd HH:mm:ss zzzz"
@@ -98,7 +112,9 @@ limitations under the License.
</div>
<div class="u-1-2">
<d-form-item>
- <d-form-label> 描述 </d-form-label>
+ <d-form-label>
+ {{ "serviceDetail.description" | translate }}
+ </d-form-label>
<d-form-control class="form-control-width">
{{ serviceData?.description || "--" }}
</d-form-control>
@@ -114,13 +130,21 @@ limitations under the License.
[reactivable]="true"
(activeTabChange)="activeTabChange($event)"
>
- <d-tab title="实例列表" tabId="instance" id="instance">
+ <d-tab
+ [title]="'serviceDetail.tabs.instance' | translate"
+ tabId="instance"
+ id="instance"
+ >
<ng-template dTabContent>
<app-instance-list></app-instance-list>
</ng-template>
</d-tab>
- <d-tab title="被调用服务" tabId="invoked" id="invoked">
+ <d-tab
+ [title]="'serviceDetail.tabs.invoked' | translate"
+ tabId="invoked"
+ id="invoked"
+ >
<ng-template dTabContent>
<app-invoked-service
[appId]="serviceData.appId"
@@ -129,7 +153,11 @@ limitations under the License.
</ng-template>
</d-tab>
- <d-tab title="调用服务" tabId="invoking" id="invoking">
+ <d-tab
+ [title]="'serviceDetail.tabs.invoking' | translate"
+ tabId="invoking"
+ id="invoking"
+ >
<ng-template dTabContent>
<app-invoked-service
[appId]="serviceData.appId"
@@ -138,12 +166,20 @@ limitations under the License.
></app-invoked-service>
</ng-template>
</d-tab>
- <d-tab title="服务契约" tabId="contract" id="contract">
+ <d-tab
+ [title]="'serviceDetail.tabs.contract' | translate"
+ tabId="contract"
+ id="contract"
+ >
<ng-template dTabContent>
<app-service-contract></app-service-contract>
</ng-template>
</d-tab>
- <d-tab title="元数据" tabId="originalData" id="configuration">
+ <d-tab
+ [title]="'serviceDetail.tabs.original' | translate"
+ tabId="originalData"
+ id="configuration"
+ >
<ng-template dTabContent>
<app-original-data></app-original-data>
</ng-template>
diff --git a/ux/src/app/service-list/modal/create/create.component.html b/ux/src/app/service-list/modal/create/create.component.html
index e979777..e5314b1 100644
--- a/ux/src/app/service-list/modal/create/create.component.html
+++ b/ux/src/app/service-list/modal/create/create.component.html
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="modal-component">
- <h2>创建微服务</h2>
+ <h2>{{ "service.create.title" | translate }}</h2>
<div class="form">
<form
@@ -26,11 +26,13 @@ limitations under the License.
[dValidateRules]="formRules.rule"
>
<d-form-item>
- <d-form-label [required]="true">微服名称</d-form-label>
+ <d-form-label [required]="true">
+ {{ "service.create.serviceName" | translate }}
+ </d-form-label>
<d-form-control>
<input
dTextInput
- placeholder="数字字母开头结尾，例如：myServiceName"
+ [placeholder]="'service.create.serviceNamePlaceholder' | translate"
autocomplete="off"
name="serviceName"
formControlName="serviceName"
@@ -39,11 +41,13 @@ limitations under the License.
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="true">微服务应用</d-form-label>
+ <d-form-label [required]="true">
+ {{ "service.create.app" | translate }}
+ </d-form-label>
<d-form-control>
<input
dTextInput
- placeholder="数字字母开头结尾，例如：myAppId"
+ [placeholder]="'service.create.appPlaceholder' | translate"
autocomplete="off"
name="appId"
formControlName="appId"
@@ -52,7 +56,9 @@ limitations under the License.
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="true">版本</d-form-label>
+ <d-form-label [required]="true">
+ {{ "service.create.version" | translate }}
+ </d-form-label>
<d-form-control>
<input
dTextInput
@@ -65,7 +71,9 @@ limitations under the License.
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="true">微服务环境</d-form-label>
+ <d-form-label [required]="true">
+ {{ "service.create.environment" | translate }}
+ </d-form-label>
<d-form-control>
<d-select
class="w-150"
@@ -80,11 +88,12 @@ limitations under the License.
</d-form-control>
</d-form-item>
<d-form-item>
- <d-form-label [required]="false">描述</d-form-label>
+ <d-form-label [required]="false">
+ {{ "service.create.description" | translate }}
+ </d-form-label>
<d-form-control>
<textarea
dTextarea
- placeholder="Please Enter"
autocomplete="off"
name="description"
formControlName="description"
@@ -102,10 +111,10 @@ limitations under the License.
dTooltip
[content]="form.errorMessage"
>
- 确定
+ {{ "common.confirm" | translate }}
</d-button>
<d-button bsStyle="common" (click)="onCancel()" class="cse-mg-left-lg">
- 取消
+ {{ "common.cancel" | translate }}
</d-button>
</div>
</div>
diff --git a/ux/src/app/service-list/modal/create/create.component.ts b/ux/src/app/service-list/modal/create/create.component.ts
index e4ae4b4..8bfa2f9 100644
--- a/ux/src/app/service-list/modal/create/create.component.ts
+++ b/ux/src/app/service-list/modal/create/create.component.ts
@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Component, Input, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { DValidateRules } from 'ng-devui';
+import { FormControl, FormGroup } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
import { envOptions } from 'src/config/global.config';
import { ServiceService } from '../../../../common/service.service';
@@ -30,7 +30,25 @@ export class CreateComponent implements OnInit {
onClose: (data?: any) => void;
};
- constructor(private service: ServiceService) {}
+ constructor(
+ private service: ServiceService,
+ private translate: TranslateService
+ ) {
+ this.translate.get('service.create').subscribe((i18n) => {
+ this.formRules.versionRules.validators[4].message = i18n.versionMessage;
+ });
+
+ this.translate.get('common.empty').subscribe((empty) => {
+ this.envOpetions = JSON.parse(
+ JSON.stringify(
+ envOptions.map((item) => {
+ item.label = item.label || empty;
+ return item;
+ })
+ )
+ );
+ });
+ }
formGroup = new FormGroup({
serviceName: new FormControl(''),
@@ -39,7 +57,7 @@ export class CreateComponent implements OnInit {
environment: new FormControl(''),
description: new FormControl(''),
});
- formRules: { [key: string]: DValidateRules } = {
+ formRules = {
rule: { message: 'The form verification failed, please check.' },
usernameRules: {
validators: [
@@ -65,14 +83,7 @@ export class CreateComponent implements OnInit {
{ maxlength: 46 },
{
pattern: /^\d{1,}\.(\d{1,}\.){1,2}\d{1,}$/,
- message: {
- 'zh-cn':
- 'X.Y.Z, X.Y.Z.B 型版本号, X、Y、Z 为数字且范围在0-32767, 长度为3-46个字符',
- 'en-us':
- 'The value cannot contain characters except uppercase and lowercase letters.',
- default:
- 'X.Y.Z, X.Y.Z.B 型版本号, X、Y、Z 为数字且范围在0-32767, 长度为3-46个字符',
- },
+ message: '',
},
],
},
@@ -84,21 +95,12 @@ export class CreateComponent implements OnInit {
},
};
- items = [
- {
- title: 'aaa',
- content: 'content',
- type: 'ddd',
- },
- ];
-
envOpetions!: {
id: string;
label: string;
}[];
ngOnInit(): void {
- this.envOpetions = JSON.parse(JSON.stringify(envOptions));
this.formGroup.controls.environment.setValue(this.envOpetions[0]);
}
diff --git a/ux/src/app/service-list/modal/delete/delete.component.html b/ux/src/app/service-list/modal/delete/delete.component.html
index 777e6ee..8d18afc 100644
--- a/ux/src/app/service-list/modal/delete/delete.component.html
+++ b/ux/src/app/service-list/modal/delete/delete.component.html
@@ -15,23 +15,25 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="modal-component">
- <h2>删除微服务</h2>
+ <h2>{{ "service.delete.title" | translate }}</h2>
<div class="container">
<div>
- <div>确定要对微服务及其版本进行删除操作吗？</div>
+ <div>{{ "service.delete.content1" | translate }}</div>
<p>
- 删除后将无法恢复。
+ {{ "service.delete.content2" | translate }}
<span style="color: red">
- 如果删除的服务有实例，需要先将对应实例卸载，否则服务会再次注册。
+ {{ "service.delete.content3" | translate }}
</span>
</p>
</div>
</div>
<div class="footer">
- <d-button bsStyle="danger" (click)="onConfirm()">确定</d-button>
- <d-button bsStyle="common" (click)="onCancel()" class="cse-mg-left-lg"
- >取消</d-button
- >
+ <d-button bsStyle="danger" (click)="onConfirm()">
+ {{ "common.confirm" | translate }}
+ </d-button>
+ <d-button bsStyle="common" (click)="onCancel()" class="cse-mg-left-lg">
+ {{ "common.cancel" | translate }}
+ </d-button>
</div>
</div>
diff --git a/ux/src/app/service-list/service-list.component.html b/ux/src/app/service-list/service-list.component.html
index 4095cd0..0a00a9d 100644
--- a/ux/src/app/service-list/service-list.component.html
+++ b/ux/src/app/service-list/service-list.component.html
@@ -15,10 +15,10 @@ See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="title">
- <div class="label">服务列表</div>
+ <div class="label">{{ "service.title" | translate }}</div>
<div class="btn-group">
<d-button icon="icon-add" bsStyle="danger" (click)="onCreateService()">
- 创建微服务
+ {{ "service.createService" | translate }}
</d-button>
</div>
</div>
@@ -36,11 +36,22 @@ limitations under the License.
>
<thead dTableHead [checkable]="false">
<tr dTableRow>
- <th dHeadCell width="150px">服务名称</th>
- <th dHeadCell *ngFor="let colOption of columns">
- {{ colOption.header }}
+ <th dHeadCell width="150px">
+ {{ "service.columns.serviceName" | translate }}
</th>
- <th dHeadCell width="150px">操作</th>
+ <th dHeadCell width="150px">
+ {{ "service.columns.environment" | translate }}
+ </th>
+ <th dHeadCell width="150px">
+ {{ "service.columns.version" | translate }}
+ </th>
+ <th dHeadCell width="150px">
+ {{ "service.columns.app" | translate }}
+ </th>
+ <th dHeadCell width="150px">
+ {{ "service.columns.timestamp" | translate }}
+ </th>
+ <th dHeadCell width="150px">{{ "common.operator" | translate }}</th>
</tr>
</thead>
<tbody dTableBody>
@@ -72,14 +83,17 @@ limitations under the License.
bsStyle="text"
class="cse-mg-left-sm"
(click)="deleteItem(rowItem)"
- >删除</d-button
>
+ {{ "common.delete" | translate }}
+ </d-button>
</td>
</tr>
</ng-template>
<ng-template #noResultTemplateRef>
- <div style="text-align: center; margin-top: 20px">No Data</div>
+ <div style="text-align: center; margin-top: 20px">
+ {{ "common.noData" | translate }}
+ </div>
</ng-template>
</tbody>
</d-data-table>
diff --git a/ux/src/app/service-list/service-list.component.ts b/ux/src/app/service-list/service-list.component.ts
index ecf9ca6..3ba3471 100644
--- a/ux/src/app/service-list/service-list.component.ts
+++ b/ux/src/app/service-list/service-list.component.ts
@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Component, OnInit, ViewChild } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
import { cloneDeep, map, uniqBy } from 'lodash';
import { ICategorySearchTagItem } from 'ng-devui';
import { DataTableComponent, TableWidthConfig } from 'ng-devui/data-table';
@@ -37,41 +38,14 @@ import { DeleteComponent } from './modal/delete/delete.component';
export class ServiceListComponent implements OnInit {
constructor(
private modalService: ModalService,
- private service: ServiceService
+ private service: ServiceService,
+ private translate: TranslateService
) {}
@ViewChild(DataTableComponent, { static: true })
datatable!: DataTableComponent;
- title = '服务列表';
-
private basicDataSource: any;
dataSource: any; // 展示的数据
- columns = [
- {
- field: 'environment',
- header: '环境',
- fieldType: 'text',
- order: 2,
- },
- {
- field: 'version',
- header: '版本',
- fieldType: 'text',
- order: 3,
- },
- {
- field: 'appId',
- header: '应用',
- fieldType: 'text',
- order: 4,
- },
- {
- field: 'timestamp',
- header: '创建时间',
- fieldType: 'date',
- order: 5,
- },
- ];
tableWidthConfig: TableWidthConfig[] = [
{
@@ -104,43 +78,52 @@ export class ServiceListComponent implements OnInit {
};
// todo ui框架问题设置为any解决
- category: Array<ICategorySearchTagItem> | any = [
- {
- field: 'serviceName',
- label: '名称',
- type: 'textInput',
- },
- {
- field: 'environment',
- label: '环境',
- type: 'label',
- options: cloneDeep(envOptions),
- },
- {
- field: 'version',
- label: '版本',
- type: 'label',
- options: [],
- },
- {
- field: 'appId',
- label: '应用',
- type: 'textInput',
- },
- ];
+ category: Array<ICategorySearchTagItem> | any;
ngOnInit(): void {
this.initData();
}
- initData(): void {
+ async initData(): Promise<void> {
this.dataSource = [];
+ this.category = [];
+ const common = await this.translate.get('common').toPromise();
+ const columns = await this.translate.get('service.columns').toPromise();
+ this.category = [
+ {
+ field: 'serviceName',
+ label: columns.serviceName,
+ type: 'textInput',
+ },
+ {
+ field: 'environment',
+ label: columns.environment,
+ type: 'label',
+ options: cloneDeep(
+ envOptions.map((item) => {
+ item.label = item.label || common.empty;
+ return item;
+ })
+ ),
+ },
+ {
+ field: 'version',
+ label: columns.version,
+ type: 'label',
+ options: [],
+ },
+ {
+ field: 'appId',
+ label: columns.app,
+ type: 'textInput',
+ },
+ ];
this.service.getServiceByGovern().subscribe(
(data) => {
this.basicDataSource = (data?.allServicesDetail || [])
.map((item: any) => {
if (!item.microService?.environment) {
- item.microService.environment = '<空>';
+ item.microService.environment = common.empty;
}
return item.microService;
})
diff --git a/ux/src/app/shared/pipe/environment.pipe.ts b/ux/src/app/shared/pipe/environment.pipe.ts
index 8fdf273..fd432b4 100644
--- a/ux/src/app/shared/pipe/environment.pipe.ts
+++ b/ux/src/app/shared/pipe/environment.pipe.ts
@@ -15,12 +15,19 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
@Pipe({ name: 'EnvironmentPipe' })
export class EnvironmentPipe implements PipeTransform {
+ constructor(private translate: TranslateService) {
+ this.translate.get('common.empty').subscribe((empty) => {
+ this.empty = empty;
+ });
+ }
+ empty!: string;
transform(value: string): string {
if (!value) {
- return '<空>';
+ return this.empty;
}
return value;
}
diff --git a/ux/src/app/shared/pipe/instance-status.pipe.ts b/ux/src/app/shared/pipe/instance-status.pipe.ts
index 10c79e0..ea273d1 100644
--- a/ux/src/app/shared/pipe/instance-status.pipe.ts
+++ b/ux/src/app/shared/pipe/instance-status.pipe.ts
@@ -15,23 +15,29 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
@Pipe({ name: 'InstanceStatus' })
export class InstanceStatusPipe implements PipeTransform {
+ statusMap!: StatusMap;
+ constructor(private translate: TranslateService) {
+ // UP在线,OUTOFSERVICE摘机,STARTING正在启动,DOWN下线,TESTING拨测状态。
+ this.translate
+ .get('instanceStatus')
+ .subscribe(({ UP, DOWN, STARTING, TESTING, OUTOFSERVICE }) => {
+ this.statusMap = {
+ UP,
+ DOWN,
+ STARTING,
+ TESTING,
+ OUTOFSERVICE,
+ };
+ });
+ }
transform(value: State): string {
- return statusMap[value] || value;
+ return this.statusMap[value] || value;
}
}
-
-export const statusMap = {
- // UP在线,OUTOFSERVICE摘机,STARTING正在启动,DOWN下线,TESTING拨测状态。
- UP: '在线',
- DOWN: '下线',
- STARTING: '启动中',
- TESTING: '拨测',
- OUTOFSERVICE: '摘机',
-};
-
export interface StatusMap {
UP: string;
DOWN: string;
diff --git a/ux/src/app/shared/shared.module.ts b/ux/src/app/shared/shared.module.ts
index 65c3386..6315cd5 100644
--- a/ux/src/app/shared/shared.module.ts
+++ b/ux/src/app/shared/shared.module.ts
@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { CommonModule } from '@angular/common';
-import { HttpClientXsrfModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { HttpClient, HttpClientXsrfModule } from '@angular/common/http';
+import { Inject, LOCALE_ID, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
CategorySearchModule,
@@ -40,6 +40,19 @@ import { FilterRefreshModule } from './filter-refresh/filter-refresh.module';
import { EnvironmentPipe } from './pipe/environment.pipe';
import { InstanceStatusPipe } from './pipe/instance-status.pipe';
+import { environment } from 'src/environments/environment';
+
+import {
+ TranslateModule,
+ TranslateLoader,
+ TranslateService,
+} from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
+ return new TranslateHttpLoader(http, './assets/i18n/', '.json');
+}
+
const devUIModules = [
CategorySearchModule,
CheckBoxModule,
@@ -75,6 +88,13 @@ const derective = [AutoHidePaginationDirective];
...angularModule,
...cusModule,
MonacoEditorModule.forRoot(),
+ TranslateModule.forRoot({
+ loader: {
+ provide: TranslateLoader,
+ useFactory: createTranslateLoader,
+ deps: [HttpClient],
+ },
+ }),
],
exports: [
...devUIModules,
@@ -83,6 +103,18 @@ const derective = [AutoHidePaginationDirective];
...pipes,
...derective,
MonacoEditorModule,
+ TranslateModule,
],
})
-export class SharedModule {}
+export class SharedModule {
+ constructor(
+ private i18n: TranslateService,
+ @Inject(LOCALE_ID) locale: string
+ ) {
+ if (environment.supportedLocale.indexOf(locale as never) === -1) {
+ locale = 'zh_CN';
+ }
+
+ this.i18n.use(locale);
+ }
+}
diff --git a/ux/src/assets/i18n/zh_CN.json b/ux/src/assets/i18n/zh_CN.json
new file mode 100644
index 0000000..230fae0
--- /dev/null
+++ b/ux/src/assets/i18n/zh_CN.json
@@ -0,0 +1,162 @@
+{
+ "common": {
+ "confirm": "确定",
+ "cancel": "取消",
+ "tips": "提示",
+ "noData": "暂无数据",
+ "appConfig": "应用级配置",
+ "customConfig": "自定义级配置",
+ "serviceConfig": "服务级配置",
+ "operator": "操作",
+ "more": "更多",
+ "delete": "删除",
+ "empty": "<空>"
+ },
+ "leftMenu": {
+ "service": {
+ "title": "服务管理",
+ "serviceList": "服务列表",
+ "instanceList": "实例列表"
+ },
+ "config": {
+ "title": "配置管理",
+ "configList": "服务配置"
+ }
+ },
+ "kie": {
+ "list": {
+ "title": "配置管理",
+ "create": "新建配置",
+ "operator": {
+ "forbidden": "禁用",
+ "enabled": "启用",
+ "update": "更新",
+ "delete": "删除"
+ },
+ "tip": "提示",
+ "forbiddenContent": "确认禁用配置项 {{key}}",
+ "enableContent": "确认启用配置项 {{key}}",
+ "deleteContent": "你确定要删除配置项 {{key}}",
+ "columns": {
+ "key": "配置项",
+ "status": "状态",
+ "lables": "标签",
+ "type": "配置项类型",
+ "value_type": "配置格式",
+ "update_time": "更新时间",
+ "operator": "操作项"
+ }
+ },
+ "create": {
+ "title": "配置管理",
+ "eidteConfig": "编辑配置",
+ "createConfig": "新建配置",
+ "type": "配置类型",
+ "app": "应用",
+ "appSelect": "选择应用",
+ "service": "微服务",
+ "serviceSelect": "选择微服务",
+ "configName": "配置项",
+ "configPlaceholder": "请输入配置项",
+ "configMessage": "请输入由数字/字母/下划线/中划线或小数点组成对1-128位字符",
+ "tag": "标签",
+ "tagKeyPlaceholder": "请输入标签键",
+ "tagValuePlaceholder": "请输入标签值",
+ "size": "配置格式",
+ "isAvailable": "是否启用",
+ "configContent": "配置内容"
+ },
+ "modal": {
+ "title": "选择配置类型",
+ "createBtn": "立即配置",
+ "appConfigContent": "将新建到配置关联到某一应用，并添加应用名称和所在环境到标签。",
+ "serviceConfigContent": "将新建到配置关联到某一微服务，并添加微服务名称和所在环境到标签。",
+ "customConfigContent": "自定义一个新到配置文件。",
+ "appName": "应用名称",
+ "enviroment": "环境",
+ "vision": "选择版本",
+ "visionPlaceholder": "选择版本",
+ "serviceName": "服务名称",
+ "app": "应用"
+ }
+ },
+ "instance": {
+ "title": "实例列表",
+ "columns": {
+ "hostName": "实例名称",
+ "status": "状态",
+ "environment": "环境",
+ "serviceName": "所属服务",
+ "endpoints": "Endpoints",
+ "version": "所属版本",
+ "modTimestamp": "更新时间"
+ },
+ "changeContent": "确认改变实例 {{hostName}} 的状态为{{status}}?"
+ },
+ "instanceStatus": {
+ "UP": "上线",
+ "DOWN": "下线",
+ "OUTOFSERVICE": "摘机",
+ "TESTING": "拨测",
+ "STARTING": "启动中"
+ },
+ "service": {
+ "title": "服务列表",
+ "createService": "创建微服务",
+ "columns": {
+ "serviceName": "服务名称",
+ "environment": "环境",
+ "version": "版本",
+ "app": "应用",
+ "timestamp": "创建时间"
+ },
+ "create": {
+ "title": "创建微服务",
+ "serviceName": "微服名称",
+ "serviceNamePlaceholder": "数字字母开头结尾，例如：myServiceName",
+ "app": "微服务应用",
+ "appPlaceholder": "数字字母开头结尾，例如：myAppId",
+ "version": "版本",
+ "environment": "微服务环境",
+ "description": "描述",
+ "versionMessage": "X.Y.Z, X.Y.Z.B 型版本号, X、Y、Z 为数字且范围在0-32767, 长度为3-46个字符"
+ },
+ "delete": {
+ "title": "删除微服务",
+ "content1": "确定要对微服务及其版本进行删除操作吗？",
+ "content2": "删除后将无法恢复。",
+ "content3": "如果删除的服务有实例，需要先将对应实例卸载，否则服务会再次注册。"
+ }
+ },
+ "serviceDetail": {
+ "back": "微服务目录",
+ "serviceName": "微服名称",
+ "instanceNum": "实例数",
+ "environment": "所属环境",
+ "app": "所属应用",
+ "version": "微服务版本",
+ "framework": "框架",
+ "lineTime": "上线时间",
+ "createTime": "创建时间",
+ "description": "描述",
+ "tabs": {
+ "instance": "实例列表",
+ "invoked": "被调用服务",
+ "invoking": "调用服务",
+ "contract": "服务契约",
+ "original": "元数据"
+ },
+ "instance": {
+ "hostName": "实例名称",
+ "status": "实例状态",
+ "endpoints": "Endpoints",
+ "modTimestamp": "更新时间"
+ },
+ "invoked": {
+ "serviceName": "微服名称",
+ "app": "所属应用",
+ "version": "版本",
+ "timestamp": "创建时间"
+ }
+ }
+}
diff --git a/ux/src/common/service.service.ts b/ux/src/common/service.service.ts
index 8d36cf9..3f4542e 100644
--- a/ux/src/common/service.service.ts
+++ b/ux/src/common/service.service.ts
@@ -86,7 +86,7 @@ export class ServiceService {
};
this.getServiceByGovern(query).subscribe(
(res) => {
- const result = res.allServicesDetail.reduce(
+ const result = res.allServicesDetail?.reduce(
(list: any[], item: any) => {
if (item.instances?.length) {
item.instances.forEach((instance: any) => {
@@ -100,7 +100,7 @@ export class ServiceService {
},
[]
);
- instances$.next(result);
+ instances$.next(result || []);
},
(err) => {
instances$.next([]);
diff --git a/ux/src/config/global.config.js b/ux/src/config/global.config.js
index e733ec2..5105299 100644
--- a/ux/src/config/global.config.js
+++ b/ux/src/config/global.config.js
@@ -26,7 +26,7 @@ export const REGISTRY_PREFIX = `/api/v4/${PROJECT_ID}/registry`;
export const envOptions = [
{
id: "",
- label: "<空>",
+ label: "",
},
{
id: "production",
diff --git a/ux/src/environments/environment.prod.ts b/ux/src/environments/environment.prod.ts
index 34aedb2..cf72cff 100644
--- a/ux/src/environments/environment.prod.ts
+++ b/ux/src/environments/environment.prod.ts
@@ -16,4 +16,5 @@ limitations under the License.
*/
export const environment = {
production: true,
+ supportedLocale: [],
};
diff --git a/ux/src/environments/environment.ts b/ux/src/environments/environment.ts
index 2608fe0..b26cc32 100644
--- a/ux/src/environments/environment.ts
+++ b/ux/src/environments/environment.ts
@@ -20,6 +20,7 @@ limitations under the License.
export const environment = {
production: false,
+ supportedLocale: [],
};
/*
diff --git a/ux/src/styles.less b/ux/src/styles.less
index c52f0de..9b06c78 100644
--- a/ux/src/styles.less
+++ b/ux/src/styles.less
@@ -83,3 +83,11 @@ limitations under the License.
.cse-mg-bottom-xl {
margin-bottom: 40px;
}
+
+.opacity-placeholder {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+ opacity: 0;
+}