frontend: refator kubernetes namespace

src/frontend/src/app/admin/admin.module.ts

@@ -127,7 +127,8 @@ import { KubeClusterrolebindingModule } from './kubernetes/clusterrolebinding/ku
     KubeRolebindingModule,
     KubeServiceaccountModule,
     KubeClusterroleModule,
-    KubeClusterrolebindingModule
+    KubeClusterrolebindingModule,
+    KubeNamespaceModule
   ],
   providers: [
     AdminAuthCheckGuard,

src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.html

@@ -2,11 +2,18 @@
   <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
     <div class="table-search">
       <div class="table-search-left">
+        <button class="wayne-button normal" (click)="createResource()">
+          {{'ADMIN.KUBERNETES.NAMESPACE.CREATE' | translate}}
+        </button>
+        <button class="wayne-button normal" (click)="retrieveResource()">
+          {{'ADMIN.KUBERNETES.ACTION.REFRESH' | translate}}
+        </button>
         <wayne-filter-box (confirm)="onConfirmEvent()" (cancel)="onCancelEvent()">
           <wayne-checkbox-group [(ngModel)]="showList">
-            <wayne-checkbox value="name">名称</wayne-checkbox>
-            <wayne-checkbox value="status">状态</wayne-checkbox>
-            <wayne-checkbox value="createTime">创建时间</wayne-checkbox>
+            <wayne-checkbox value="name">{{'ADMIN.KUBERNETES.NAMESPACE.LIST.NAME' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="label">{{'ADMIN.KUBERNETES.NAMESPACE.LIST.LABEL' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="status">{{'ADMIN.KUBERNETES.NAMESPACE.LIST.STATUS' | translate}}</wayne-checkbox>
+            <wayne-checkbox value="age">{{'ADMIN.KUBERNETES.NAMESPACE.LIST.AGE' | translate}}</wayne-checkbox>
           </wayne-checkbox-group>
         </wayne-filter-box>
       </div>
@@ -15,17 +22,16 @@
     <wayne-list-namespace
       [resources]="resources"
       [showState]="showState"
-      (refresh)="refresh($event)"
       (delete)="onDeleteResourceEvent($event)"
-      (detail)="onEditResourceEvent($event)"
       (edit)="onEditResourceEvent($event)"
       [page]="pageState.page"
-      (paginate)="retrieveResource($event)"
-    >
+      [cluster]="cluster"
+      (paginate)="retrieveResource($event)">
     </wayne-list-namespace>
   </div>
 </div>
-<wayne-ace-editor (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
+<deletion-dialog (outputObj)="confirmDeleteEvent($event)"></deletion-dialog>
+<wayne-ace-editor (createOutputObj)="onCreateResourceEvent($event)" (outputObj)="onSaveResourceEvent($event)"></wayne-ace-editor>
 <wayne-float-window value="{{ cluster }}">
   <wayne-float-window-item *ngFor="let cluster of clusters" [value]="cluster"
                            (click)="jumpToHref(cluster)"></wayne-float-window-item>

src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.component.ts

@@ -1,100 +1,55 @@
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ConfirmationDialogService } from '../../../shared/confirmation-dialog/confirmation-dialog.service';
 import { MessageHandlerService } from '../../../shared/message-handler/message-handler.service';
 import { ClusterService } from '../../../shared/client/v1/cluster.service';
 import { AuthService } from '../../../shared/auth/auth.service';
 import { AceEditorComponent } from '../../../shared/ace-editor/ace-editor.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { KubeResourceNamespace } from '../../../shared/shared.const';
+import { DeletionDialogComponent } from '../../../shared/deletion-dialog/deletion-dialog.component';
+import { KubernetesUnNamespacedResource } from '../../../shared/base/kubernetes-namespaced/kubernetes-unnamespaced-resource';
 import { ListNamespaceComponent } from './list-namespace/list-namespace.component';
-import { NamespaceClient } from '../../../shared/client/v1/kubernetes/namespace';
-import { KubernetesResource } from '../../../shared/base/kubernetes/kubernetes-resource';
-import { NamespaceList } from '../../../shared/model/v1/namespace-list';
-import { KubeNamespace } from '../../../shared/model/v1/kubernetes/namespace';
 
 const showState = {
   'name': {hidden: false},
+  'label': {hidden: false},
   'status': {hidden: false},
-  'createTime': {hidden: false},
+  'age': {hidden: false},
 };
 
 @Component({
   selector: 'wayne-kube-namespace',
-  templateUrl: './kube-namespace.component.html',
-  styleUrls: ['./kube-namespace.component.scss']
+  templateUrl: './kube-namespace.component.html'
 })
 
-export class KubeNamespaceComponent extends KubernetesResource implements OnInit, OnDestroy {
+export class KubeNamespaceComponent extends KubernetesUnNamespacedResource implements OnInit, OnDestroy {
   @ViewChild(ListNamespaceComponent)
   listResourceComponent: ListNamespaceComponent;
 
   @ViewChild(AceEditorComponent)
   aceEditorModal: AceEditorComponent;
 
-  constructor( public namespaceClient: NamespaceClient,
-               public route: ActivatedRoute,
-               public router: Router,
-               public clusterService: ClusterService,
-               public authService: AuthService,
-               public messageHandlerService: MessageHandlerService,
-               public deletionDialogService: ConfirmationDialogService) {
-    super(namespaceClient, route, router, clusterService, authService, messageHandlerService, deletionDialogService);
+  @ViewChild(DeletionDialogComponent)
+  deletionDialogComponent: DeletionDialogComponent;
+
+  constructor(public kubernetesClient: KubernetesClient,
+              public route: ActivatedRoute,
+              public router: Router,
+              public clusterService: ClusterService,
+              public authService: AuthService,
+              public messageHandlerService: MessageHandlerService) {
+    super(kubernetesClient, route, router, clusterService, authService, messageHandlerService);
     super.registResourceType('namespace');
+    super.registKubeResource(KubeResourceNamespace);
     super.registShowSate(showState);
   }
 
   ngOnInit() {
-    this.initShow();
-    this.cluster = this.route.snapshot.params['cluster'];
-    this.clusterService.getNames().subscribe(
-      response => {
-        const data = response.data;
-        this.clusters = data.map(item => item.name);
-        if (data && data.length > 0 && !this.cluster) {
-          this.jumpToHref(data[0].name);
-          return;
-        }
-        this.retrieveResource();
-      },
-      error => this.messageHandlerService.handleError(error)
-    );
+    super.ngOnInit();
   }
 
   ngOnDestroy(): void {
-  }
-
-  onEditResourceEvent(ns: NamespaceList) {
-    this.namespaceClient.getNamespaceDetail( this.cluster, ns.objectMeta.name)
-      .subscribe(
-        response => {
-          const data = response.data;
-          this.aceEditorModal.openModal(data, '编辑 namespace', true);
-        },
-        error => this.messageHandlerService.handleError(error)
-      );
-  }
-
-  onSaveResourceEvent(ns: KubeNamespace) {
-    this.namespaceClient.getNamespaceDetail( this.cluster, ns.metadata.name).subscribe(
-      resp => {
-        const namespace: KubeNamespace = resp.data;
-        namespace.spec = ns.spec;
-        namespace.metadata.labels = ns.metadata.labels;
-        namespace.metadata.annotations = ns.metadata.annotations;
-        this.namespaceClient.update(namespace, this.cluster).subscribe(
-          resp2 => {
-            this.messageHandlerService.showSuccess('namespace 更新成功！');
-            this.retrieveResource();
-          },
-          error => {
-            this.messageHandlerService.handleError(error);
-          }
-        );
-      },
-      error => {
-        this.messageHandlerService.handleError(error);
-      }
-    );
-
+    super.ngOnDestroy();
   }
 
 }

src/frontend/src/app/admin/kubernetes/namespace/kube-namespace.module.ts

@@ -1,24 +1,21 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../shared/shared.module';
-import { PersistentVolumeClient } from '../../../shared/client/v1/kubernetes/persistentvolume';
 import { ReactiveFormsModule } from '@angular/forms';
-import { PersistentVolumeRobinClient } from '../../../shared/client/v1/kubernetes/persistentvolume-robin';
 import { KubeNamespaceComponent } from './kube-namespace.component';
+import { KubernetesClient } from '../../../shared/client/v1/kubernetes/kubernetes';
+import { DeletionDialogModule } from '../../../shared/deletion-dialog/deletion-dialog.module';
 import { ListNamespaceComponent } from './list-namespace/list-namespace.component';
 
 @NgModule({
   imports: [
     SharedModule,
     ReactiveFormsModule,
+    DeletionDialogModule
   ],
   providers: [
-    PersistentVolumeClient,
-    PersistentVolumeRobinClient
-  ],
-  exports: [
-    KubeNamespaceComponent,
-    ListNamespaceComponent
+    KubernetesClient
   ],
+  exports: [],
   declarations: [
     KubeNamespaceComponent,
     ListNamespaceComponent

src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.html

@@ -1,28 +1,39 @@
 <clr-datagrid (clrDgRefresh)="refresh($event)">
-  <clr-dg-column [clrDgField]="'name'">
+  <clr-dg-column class="col-app-name" [clrDgField]="'name'">
     <ng-container *clrDgHideableColumn="showState['name']">
-      名称
+      {{'ADMIN.KUBERNETES.NAMESPACE.LIST.NAME' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['status']">
-      状态
+    <ng-container *clrDgHideableColumn="showState['label']">
+      {{'ADMIN.KUBERNETES.NAMESPACE.LIST.LABEL' | translate}}
     </ng-container>
   </clr-dg-column>
   <clr-dg-column>
-    <ng-container *clrDgHideableColumn="showState['createTime']">
-      创建时间
+    <ng-container *clrDgHideableColumn="showState['status']">
+      {{'ADMIN.KUBERNETES.NAMESPACE.LIST.STATUS' | translate}}
+    </ng-container>
+  </clr-dg-column>
+  <clr-dg-column [clrDgField]="'creationTimestamp'">
+    <ng-container *clrDgHideableColumn="showState['age']">
+      {{'ADMIN.KUBERNETES.NAMESPACE.LIST.AGE' | translate}}
     </ng-container>
   </clr-dg-column>
 
 
-  <clr-dg-row *ngFor="let namespace of resources" [clrDgItem]="namespace">
+  <clr-dg-row *ngFor="let obj of resources" [clrDgItem]="obj">
     <clr-dg-action-overflow>
-      <button class="action-item" (click)="onDetailEvent(namespace)">编辑</button>
+      <button class="action-item" (click)="onEditEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.EDIT' | translate}}</button>
+      <button class="action-item" (click)="onDeleteEvent(obj)">{{'ADMIN.KUBERNETES.ACTION.DELETE' | translate}}</button>
     </clr-dg-action-overflow>
-    <clr-dg-cell> {{namespace.objectMeta.name}} </clr-dg-cell>
-    <clr-dg-cell> {{ namespace.status }} </clr-dg-cell>
-    <clr-dg-cell> {{namespace.objectMeta.creationTimestamp | relativeTime}} </clr-dg-cell>
+    <clr-dg-cell class="col-app-name"> {{ obj.metadata.name }} </clr-dg-cell>
+    <clr-dg-cell>
+      <div *ngFor="let label of obj.metadata.labels | keyvalue" class="version-text">
+        <a href="javascript:" (click)="versionDetail(label.key + ': ' + label.value)">{{label.key}}: {{label.value}}</a>
+      </div>
+    </clr-dg-cell>
+    <clr-dg-cell> {{ obj.status.phase }} </clr-dg-cell>
+    <clr-dg-cell> {{ obj.metadata.creationTimestamp | relativeTime}} </clr-dg-cell>
   </clr-dg-row>
   <clr-dg-footer>
     <wayne-paginate

src/frontend/src/app/admin/kubernetes/namespace/list-namespace/list-namespace.component.ts

@@ -1,29 +1,18 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { NamespaceList } from '../../../../shared/model/v1/namespace-list';
-import { KubernetesListResource } from '../../../../shared/base/kubernetes/kubernetes-list-resource';
-
+import { Component, Input } from '@angular/core';
+import { KubernetesListResource } from '../../../../shared/base/kubernetes-namespaced/kubernetes-list-resource';
+import { TplDetailService } from '../../../../shared/tpl-detail/tpl-detail.service';
 
 @Component({
   selector: 'wayne-list-namespace',
-  templateUrl: './list-namespace.component.html',
-  styleUrls: ['./list-namespace.component.scss']
+  templateUrl: './list-namespace.component.html'
 })
 
-export class ListNamespaceComponent extends KubernetesListResource implements OnInit, OnDestroy {
-  @Input() resources: NamespaceList[];
+export class ListNamespaceComponent extends KubernetesListResource {
+  @Input() resources: any[];
   @Input() showState: object;
 
-  @Output() detail = new EventEmitter<NamespaceList>();
-
-  constructor() {
-    super();
-  }
-
-  ngOnInit() {
+  constructor(public tplDetailService: TplDetailService) {
+    super(tplDetailService);
   }
 
-  ngOnDestroy() {
-  }
-
-
 }

src/frontend/src/assets/i18n/zh-Hans.json

@@ -806,6 +806,15 @@
           "LABEL": "标签",
           "AGE": "启动时间"
         }
+      },
+      "NAMESPACE": {
+        "CREATE": "创建 Namespace",
+        "LIST": {
+          "NAME": "名称",
+          "LABEL": "标签",
+          "AGE": "启动时间",
+          "STATUS": "状态"
+        }
       }
     }
   }