frontend: namespace apikey i18n

src/frontend/src/app/portal/app-apikey/apikey.component.html

@@ -1,13 +1,13 @@
 <div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-      <h2 class="header-title">APIKey列表</h2>
+      <h2 class="header-title">APIKey {{'TITEL.LIST' | translate}}</h2>
     </div>
     <div class="table-search">
       <div class="table-search-left">
         <button *ngIf="authService.currentAppPermission.apiKey.create || authService.currentUser.admin" class="wayne-button normal"
           (click)="openModal()">
-          创建APIKey
+          {{'ACTION.CREATE' | translate}} APIKey
         </button>
         <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">

src/frontend/src/app/portal/app-apikey/apikey.component.ts

@@ -12,6 +12,7 @@ import {CreateEditApiKeyComponent} from './create-edit-apikey/create-edit-apikey
 import {ApiKey} from '../../shared/model/v1/apikey';
 import {ApiKeyService} from '../../shared/client/v1/apikey.service';
 import {ActivatedRoute} from '@angular/router';
+import {TranslateService} from '@ngx-translate/core';
 
 const showState = {
   '名称': {hidden: false},
@@ -46,6 +47,7 @@ export class AppApiKeyComponent implements OnInit, OnDestroy {
               private route: ActivatedRoute,
               public authService: AuthService,
               private messageHandlerService: MessageHandlerService,
+              public translate: TranslateService,
               private deletionDialogService: ConfirmationDialogService) {
     this.subscription = deletionDialogService.confirmationConfirm$.subscribe(message => {
       if (message &&

src/frontend/src/app/portal/namespace-apikey/apikey.component.html

@@ -4,23 +4,23 @@
     <div class="row">
       <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
-          <h2 class="header-title">APIKey列表</h2>
+          <h2 class="header-title">APIKey {{'TITEL.LIST' | translate}}</h2>
         </div>
         <div class="table-search">
           <div class="table-search-left">
             <button class="wayne-button normal" *ngIf="authService.currentNamespacePermission.apiKey.create || authService.currentUser.admin"
               (click)="openModal()">
-              创建APIKey
+              {{'ACTION.CREATE' | translate}} APIKey
             </button>
             <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
               <wayne-checkbox-group [(ngModel)]="showList">
-                <wayne-checkbox>名称</wayne-checkbox>
-                <wayne-checkbox>角色</wayne-checkbox>
-                <wayne-checkbox>创建时间</wayne-checkbox>
-                <wayne-checkbox>过期时间</wayne-checkbox>
-                <wayne-checkbox>创建者</wayne-checkbox>
-                <wayne-checkbox>描述</wayne-checkbox>
-                <wayne-checkbox>操作</wayne-checkbox>
+                <wayne-checkbox value="name">{{'TITEL.NAME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="role">{{'TITEL.ROLE' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="create_time">{{'TITEL.CREATE_TIME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="expire_time">{{'TITEL.EXPIRE_TIME' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="create_user">{{'TITEL.CREATE_USER' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="description">{{'TITEL.DESCRIPTION' | translate}}</wayne-checkbox>
+                <wayne-checkbox value="action">{{'TITEL.ACTION' | translate}}</wayne-checkbox>
               </wayne-checkbox-group>
             </wayne-filter-box>
           </div>

src/frontend/src/app/portal/namespace-apikey/apikey.component.ts

@@ -19,13 +19,13 @@ import {ApiKey} from '../../shared/model/v1/apikey';
 import {ApiKeyService} from '../../shared/client/v1/apikey.service';
 
 const showState = {
-  '名称': {hidden: false},
-  '角色': {hidden: false},
-  '创建时间': {hidden: false},
-  '过期时间': {hidden: false},
-  '创建者': {hidden: false},
-  '描述': {hidden: false},
-  '操作': {hidden: false}
+  'name': {hidden: false},
+  'role': {hidden: false},
+  'create_time': {hidden: false},
+  'expire_time': {hidden: false},
+  'create_user': {hidden: false},
+  'description': {hidden: false},
+  'action': {hidden: false}
 };
 
 @Component({

src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.html

@@ -3,38 +3,38 @@
     <ng-container>ID</ng-container>
   </clr-dg-column>
   <clr-dg-column [clrDgField]="'name'">
-    <ng-container  *clrDgHideableColumn="showState['名称']">名称</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['name']">{{'TITEL.NAME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container  *clrDgHideableColumn="showState['角色']">角色</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['role']">{{'TITEL.ROLE' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-time">
-    <ng-container  *clrDgHideableColumn="showState['创建时间']">创建时间</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['create_time']">{{'TITEL.CREATE_TIME' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container  *clrDgHideableColumn="showState['过期时间']">过期时间(s)</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['expire_time']">{{'TITEL.EXPIRE_TIME' | translate}}(s)</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-user">
-    <ng-container  *clrDgHideableColumn="showState['创建者']">创建者</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['create_user']">{{'TITEL.CREATE_USER' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container  *clrDgHideableColumn="showState['描述']">描述</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['description']">{{'TITEL.DESCRIPTION' | translate}}</ng-container>
   </clr-dg-column>
   <clr-dg-column class="col-operate">
-    <ng-container  *clrDgHideableColumn="showState['操作']">操作</ng-container>
+    <ng-container  *clrDgHideableColumn="showState['action']">{{'TITEL.ACTION' | translate}}</ng-container>
   </clr-dg-column>
 
   <clr-dg-row *ngFor="let apiKey of apiKeys" [clrDgItem]="apiKey">
     <clr-dg-cell class="col-id">{{apiKey.id}}</clr-dg-cell>
     <clr-dg-cell class="copy">{{apiKey.name}}</clr-dg-cell>
     <clr-dg-cell class="copy">{{apiKey.group?.name}}</clr-dg-cell>
     <clr-dg-cell class="col-time">{{apiKey.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
-    <clr-dg-cell>{{apiKey.expireIn==0 ? "永久有效": apiKey.expireIn}}</clr-dg-cell>
+    <clr-dg-cell>{{apiKey.expireIn==0 ? "always available": apiKey.expireIn}}</clr-dg-cell>
     <clr-dg-cell class="col-user">{{apiKey.user}}</clr-dg-cell>
     <clr-dg-cell>{{apiKey.description}}</clr-dg-cell>
     <clr-dg-cell class="col-operate">
-      <button class="wayne-button text" *ngIf="authService.currentNamespacePermission.apiKey.read || authService.currentUser.admin"  (click)="tokenDetail(apiKey)">详情</button>
-      <button class="wayne-button text" *ngIf="authService.currentNamespacePermission.apiKey.delete || authService.currentUser.admin" (click)="deleteApiKey(apiKey)">删除</button>
+      <button class="wayne-button text" *ngIf="authService.currentNamespacePermission.apiKey.read || authService.currentUser.admin"  (click)="tokenDetail(apiKey)">{{'ACTION.DETAIL' | translate}}</button>
+      <button class="wayne-button text" *ngIf="authService.currentNamespacePermission.apiKey.delete || authService.currentUser.admin" (click)="deleteApiKey(apiKey)">{{'ACTION.DELETE' | translate}}</button>
     </clr-dg-cell>
   </clr-dg-row>
 

src/frontend/src/app/portal/namespace-apikey/list-apikey/list-apikey.component.ts

@@ -4,6 +4,7 @@ import {Page} from '../../../shared/page/page-state';
 import {ApiKey} from '../../../shared/model/v1/apikey';
 import {TokenDetailComponent} from '../token-detail/token-detail';
 import {AuthService} from '../../../shared/auth/auth.service';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'list-apikey',
@@ -24,7 +25,10 @@ export class ListApiKeyComponent implements OnInit {
   @Output() delete = new EventEmitter<ApiKey>();
   @Output() edit = new EventEmitter<ApiKey>();
 
-  constructor(public authService: AuthService) {
+  constructor(
+    public authService: AuthService,
+    public translate: TranslateService
+    ) {
   }
 
   ngOnInit(): void {

src/frontend/src/app/shared/filter-box/filter-box.component.html

@@ -1,6 +1,6 @@
 <button class="wayne-button normal" (click)="open()" [class.active]="show">{{'TITEL.SHOW_COLUMN' | translate}}</button>
 <ng-container *ngIf="show">
-  <wayne-box class="filter-box" style="width: 190px;">
+  <wayne-box class="filter-box">
     <div class="filter-header">
       {{'ACTION.CHOOSE_SHOW_COLUMN' | translate}}
     </div>

src/frontend/src/assets/i18n/en.json

@@ -71,7 +71,10 @@
     "NAME": "Name",
     "DESCRIPTION": "Description",
     "CREATE_USER": "Create User",
-    "ACTION": "Action"
+    "ACTION": "Action",
+    "LIST": "List",
+    "ROLE": "Role",
+    "EXPIRE_TIME": "Expire Time"
   },
   "ACTION": {
     "UNFOLD": "UnFold",
@@ -82,7 +85,8 @@
     "MONITOR": "Monitor",
     "EDIT": "Edit",
     "DELETE": "Delete",
-    "CHOOSE_SHOW_COLUMN": "Choose Columns"
+    "CHOOSE_SHOW_COLUMN": "Choose Columns",
+    "CREATE": "Create"
   },
   "PLACEHOLDER": {
     "PRODUCT": "Click Here to filter Product",