Fix:Add k8s namespace page flipping function in the background

src/backend/controllers/kubernetes/namespace/namespace.go

@@ -24,6 +24,7 @@ type KubeNamespaceController struct {
 func (c *KubeNamespaceController) URLMapping() {
 	c.Mapping("Resources", c.Resources)
 	c.Mapping("List", c.List)
+	c.Mapping("GetNames", c.GetNames)
 }
 
 func (c *KubeNamespaceController) Prepare() {
@@ -32,16 +33,17 @@ func (c *KubeNamespaceController) Prepare() {
 }
 
 // @Title List namespace
-// @Description get all namespace
+// @Description get all namespace by page
 // @Param	cluster		path 	string	true		"the cluster name"
 // @Success 200 {object} common.Page success
 // @router /clusters/:cluster [get]
 func (c *KubeNamespaceController) List() {
+	param := c.BuildQueryParam()
 	cluster := c.Ctx.Input.Param(":cluster")
 
 	cli, err := client.Client(cluster)
 	if err == nil {
-		result, err := namespace.GetNamespaceList(cli)
+		result, err := namespace.GetNamespacePage(cli, param)
 		if err != nil {
 			logs.Error("list kubernetes namespaces error.", cluster, err)
 			c.HandleError(err)
@@ -53,6 +55,28 @@ func (c *KubeNamespaceController) List() {
 	}
 }
 
+// @Title List all namespace name
+// @Description get all namespace name
+// @Param	cluster		path 	string	true		"the cluster name"
+// @router /clusters/:cluster/names [get]
+func (c *KubeNamespaceController) GetNames() {
+	cluster := c.Ctx.Input.Param(":cluster")
+
+	cli, err := client.Client(cluster)
+	if err == nil {
+		result, err := namespace.GetAllNamespaceName(cli)
+		if err != nil {
+			logs.Error("list all kubernetes namespace names error.", cluster, err)
+			c.HandleError(err)
+			return
+		}
+		c.Success(result)
+	} else {
+		c.AbortBadRequestFormat("Cluster")
+	}
+
+}
+
 // @Title Get namespace info
 // @Description get one namespace detail
 // @Param	cluster		path 	string	true		"the cluster name"

src/backend/resources/namespace/common.go

@@ -2,6 +2,7 @@ package namespace
 
 import (
 	"github.com/Qihoo360/wayne/src/backend/resources/common"
+	"github.com/Qihoo360/wayne/src/backend/resources/dataselector"
 	"k8s.io/api/core/v1"
 )
 
@@ -18,3 +19,19 @@ func toNamespace(namespace *v1.Namespace) *Namespace {
 
 	return result
 }
+
+type NamespaceCell Namespace
+
+func (cell NamespaceCell) GetProperty(name dataselector.PropertyName) dataselector.ComparableValue {
+	switch name {
+	case dataselector.NameProperty:
+		return dataselector.StdComparableString(cell.ObjectMeta.Name)
+	case dataselector.CreationTimestampProperty:
+		return dataselector.StdComparableTime(cell.ObjectMeta.CreationTimestamp.Time)
+	case dataselector.NamespaceProperty:
+		return dataselector.StdComparableString(cell.ObjectMeta.Namespace)
+	default:
+		// if name is not supported then just return a constant dummy value, sort will have no effect.
+		return nil
+	}
+}

src/backend/resources/namespace/list.go

@@ -1,12 +1,14 @@
 package namespace
 
 import (
+	"github.com/Qihoo360/wayne/src/backend/common"
+	"github.com/Qihoo360/wayne/src/backend/resources/dataselector"
 	"k8s.io/api/core/v1"
 	metaV1 "k8s.io/apimachinery/pkg/apis/meta/v1"
 	"k8s.io/client-go/kubernetes"
 )
 
-func GetNamespaceList(cli *kubernetes.Clientset) ([]Namespace, error) {
+func GetNamespacePage(cli *kubernetes.Clientset, q *common.QueryParam) (*common.Page, error) {
 	kubeNamespaces, err := cli.CoreV1().Namespaces().List(metaV1.ListOptions{})
 	if err != nil {
 		return nil, err
@@ -17,10 +19,31 @@ func GetNamespaceList(cli *kubernetes.Clientset) ([]Namespace, error) {
 	for i := 0; i < len(kubeNamespaces.Items); i++ {
 		namespaces = append(namespaces, *toNamespace(&kubeNamespaces.Items[i]))
 	}
+	return dataselector.DataSelectPage(toCells(namespaces), q), nil
+}
+
+func GetAllNamespaceName(cli *kubernetes.Clientset) ([]string, error) {
+	kubeNamespaces, err := cli.CoreV1().Namespaces().List(metaV1.ListOptions{})
+	if err != nil {
+		return nil, err
+	}
 
+	namespaces := make([]string, 0)
+
+	for _, ns := range kubeNamespaces.Items {
+		namespaces = append(namespaces, ns.Name)
+	}
 	return namespaces, nil
 }
 
+func toCells(ns []Namespace) []dataselector.DataCell {
+	cells := make([]dataselector.DataCell, len(ns))
+	for i := range ns {
+		cells[i] = NamespaceCell(ns[i])
+	}
+	return cells
+}
+
 func GetNamespace(cli *kubernetes.Clientset, namespace string) (*v1.Namespace, error) {
 	kubeNamespaces, err := cli.CoreV1().Namespaces().List(metaV1.ListOptions{})
 	if err != nil {

src/backend/routers/commentsRouter_controllers_kubernetes_namespace.go

@@ -55,4 +55,12 @@ func init() {
 			MethodParams:     param.Make(),
 			Params:           nil})
 
+	beego.GlobalControllerRouter["github.com/Qihoo360/wayne/src/backend/controllers/kubernetes/namespace:KubeNamespaceController"] = append(beego.GlobalControllerRouter["github.com/Qihoo360/wayne/src/backend/controllers/kubernetes/namespace:KubeNamespaceController"],
+		beego.ControllerComments{
+			Method:           "GetNames",
+			Router:           `/clusters/:cluster/names`,
+			AllowHTTPMethods: []string{"get"},
+			MethodParams:     param.Make(),
+			Params:           nil})
+
 }

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

@@ -20,8 +20,8 @@
                   [(ngModel)]="namespace"
                   name="namespace_name"
                   (change)="retrieve()">
-            <option *ngFor="let namespace of namespaces" [ngValue]="namespace.objectMeta.name"
-                    [selected]="namespace.objectMeta.name == 'default'">{{namespace.objectMeta.name}}
+            <option *ngFor="let namespace of namespaces" [ngValue]="namespace"
+                    [selected]="namespace == 'default'">{{namespace}}
             </option>
           </select>
         </div>

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

@@ -46,7 +46,7 @@ export class KubeDeploymentComponent implements OnInit {
   showList: any[] = Array();
   showState: object = showState;
 
-  namespaces: any;
+  namespaces: string[];
 
   constructor(private breadcrumbService: BreadcrumbService,
               private deploymentClient: DeploymentClient,
@@ -93,7 +93,7 @@ export class KubeDeploymentComponent implements OnInit {
           return;
         }
         if (cluster) {
-          this.namespaceClient.list(cluster).subscribe(
+          this.namespaceClient.getNames(cluster).subscribe(
             resp => {
               this.namespaces = resp.data;
               this.jumpTo(cluster);

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

@@ -19,6 +19,8 @@
       (delete)="onDeleteResourceEvent($event)"
       (detail)="onEditResourceEvent($event)"
       (edit)="onEditResourceEvent($event)"
+      [page]="pageState.page"
+      (paginate)="retrieveResource($event)"
     >
     </wayne-list-namespace>
   </div>

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

@@ -53,15 +53,7 @@ export class KubeNamespaceComponent extends KubernetesResource implements OnInit
           this.jumpToHref(data[0].name);
           return;
         }
-        if (this.cluster) {
-          this.namespaceClient.list(this.cluster).subscribe(
-            resp => {
-              this.resources = resp.data;
-              this.jumpToHref(this.cluster);
-            },
-            error => this.messageHandlerService.handleError(error)
-          );
-        }
+        this.retrieveResource();
       },
       error => this.messageHandlerService.handleError(error)
     );

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

@@ -1,15 +1,15 @@
-<clr-datagrid>
+<clr-datagrid (clrDgRefresh)="refresh($event)">
   <clr-dg-column [clrDgField]="'name'">
     <ng-container *clrDgHideableColumn="showState['name']">
       名称
     </ng-container>
   </clr-dg-column>
-  <clr-dg-column [clrDgField]="'status'">
+  <clr-dg-column>
     <ng-container *clrDgHideableColumn="showState['status']">
       状态
     </ng-container>
   </clr-dg-column>
-  <clr-dg-column [clrDgField]="'createTime'">
+  <clr-dg-column>
     <ng-container *clrDgHideableColumn="showState['createTime']">
       创建时间
     </ng-container>
@@ -23,5 +23,12 @@
     <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-row>
+  </clr-dg-row>
+
+  <wayne-paginate
+    [(currentPage)]="currentPage"
+    [total]="page.totalCount"
+    [pageSizes]="[10, 20, 50]"
+    (sizeChange)="pageSizeChange($event)">
+  </wayne-paginate>
 </clr-datagrid>

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

@@ -1,5 +1,6 @@
 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';
 
 
 @Component({
@@ -8,13 +9,14 @@ import { NamespaceList } from '../../../../shared/model/v1/namespace-list';
   styleUrls: ['./list-namespace.component.scss']
 })
 
-export class ListNamespaceComponent implements OnInit, OnDestroy {
+export class ListNamespaceComponent extends KubernetesListResource implements OnInit, OnDestroy {
   @Input() resources: NamespaceList[];
   @Input() showState: object;
 
   @Output() detail = new EventEmitter<NamespaceList>();
 
   constructor() {
+    super();
   }
 
   ngOnInit() {
@@ -23,7 +25,5 @@ export class ListNamespaceComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
   }
 
-  onDetailEvent(obj: any) {
-    this.detail.emit(obj);
-  }
+
 }

src/frontend/src/app/shared/base/kubernetes/kubernetes-list-resource.ts

@@ -0,0 +1,30 @@
+import { EventEmitter, Input, Output } from '@angular/core';
+import { State } from '@clr/angular';
+import { NamespaceList } from '../../model/v1/namespace-list';
+import { Page } from '../../page/page-state';
+
+export class KubernetesListResource {
+  state: State;
+  currentPage = 1;
+
+  @Input() page: Page;
+
+  @Output() paginate = new EventEmitter<State>();
+  @Output() detail = new EventEmitter<NamespaceList>();
+
+  onDetailEvent(obj: any) {
+    this.detail.emit(obj);
+  }
+
+  refresh(state: State) {
+    this.state = state;
+    this.paginate.emit(state);
+  }
+
+  pageSizeChange(pageSize: number) {
+    this.state.page.to = pageSize - 1;
+    this.state.page.size = pageSize;
+    this.currentPage = 1;
+    this.paginate.emit(this.state);
+  }
+}

src/frontend/src/app/shared/base/kubernetes/kubernetes-resource.ts

@@ -5,12 +5,15 @@ import { AceEditorComponent } from '../../ace-editor/ace-editor.component';
 import { AuthService } from '../../auth/auth.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ClusterService } from '../../client/v1/cluster.service';
+import {PageState} from '../../page/page-state';
+import {State} from '@clr/angular';
 
 export class KubernetesResource {
   listResourceComponent: any;
   aceEditorModal: AceEditorComponent;
 
   showState: object;
+  pageState: PageState = new PageState();
 
   cluster: string;
   clusters: Array<any>;
@@ -67,12 +70,18 @@ export class KubernetesResource {
     }
   }
 
-  retrieveResource(): void {
+  retrieveResource(state?: State): void {
+    if (state) {
+      this.pageState = PageState.fromState(state, {totalPage: this.pageState.page.totalPage, totalCount: this.pageState.page.totalCount});
+    }
     if (this.cluster) {
-      this.resourceClient.list(this.cluster)
+      this.resourceClient.listPage(this.pageState, this.cluster)
         .subscribe(
           response => {
-            this.resources = response.data;
+            const data = response.data;
+            this.resources = data.list;
+            this.pageState.page.totalPage = data.totalPage;
+            this.pageState.page.totalCount = data.totalCount;
           },
           error => this.messageHandlerService.handleError(error)
         );

src/frontend/src/app/shared/client/v1/kubernetes/namespace.ts

@@ -2,15 +2,24 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { KubeNamespace } from '../../../model/v1/kubernetes/namespace';
+import { PageState } from '../../../page/page-state';
+import { BaseClient } from './base-client';
 
 @Injectable()
 export class NamespaceClient {
   constructor(private http: HttpClient) {
   }
 
-  list(cluster: string): Observable<any> {
+  getNames(cluster: string): Observable<any> {
     return this.http
-      .get(`/api/v1/kubernetes/namespaces/clusters/${cluster}`)
+      .get(`/api/v1/kubernetes/namespaces/clusters/${cluster}/names`)
+      .catch(error => Observable.throw(error));
+  }
+
+  listPage(pageState: PageState, cluster: string): Observable<any> {
+    const params = BaseClient.buildParam(pageState);
+    return this.http
+      .get(`/api/v1/kubernetes/namespaces/clusters/${cluster}`, {params: params})
       .catch(error => Observable.throw(error));
   }