Merge pull request #10080 from jwangyangls/modify-repository-list-filter-sort

Modify the repository list sort and filter

API/harbor/swagger.yaml

@@ -1005,7 +1005,7 @@ paths:
     get:
       summary: Get repositories accompany with relevant project and repo name.
       description: |
-        This endpoint lets user search repositories accompanying with relevant project ID and repo name. Repositories can be sorted by repo name, creation_time, update_time in either ascending or descending order.
+        This endpoint lets user search repositories accompanying with relevant project ID and repo name. Repositories can be sorted by repo name, creation_time, update_time, pull_count in either ascending or descending order.
       parameters:
         - name: project_id
           in: query

src/common/dao/repository.go

@@ -32,6 +32,9 @@ var orderMap = map[string]string{
 	"update_time":    "update_time asc",
 	"+update_time":   "update_time asc",
 	"-update_time":   "update_time desc",
+	"pull_count":     "pull_count asc",
+	"+pull_count":    "pull_count asc",
+	"-pull_count":    "pull_count desc",
 }
 
 // AddRepository adds a repo to the database.

src/portal/src/lib/components/repository-gridview/repository-gridview.component.html

@@ -29,9 +29,9 @@
                     <button *ngIf="withAdmiral" type="button" class="btn btn-sm btn-secondary" (click)="itemAddInfoEvent($event, selectedRow[0])" [disabled]="!(selectedRow.length===1 && hasProjectAdminRole)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.ADDITIONAL_INFO' | translate}}</button>
                     <button type="button" class="btn btn-sm btn-secondary" (click)="deleteRepos(selectedRow)" [disabled]="!(selectedRow.length)|| !hasDeleteRepositoryPermission"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'REPOSITORY.DELETE' | translate}}</button>
                 </clr-dg-action-bar>
-                <clr-dg-column [clrDgField]="'name'">{{'REPOSITORY.NAME' | translate}}</clr-dg-column>
-                <clr-dg-column [clrDgSortBy]="tagsCountComparator">{{'REPOSITORY.TAGS_COUNT' | translate}}</clr-dg-column>
-                <clr-dg-column [clrDgSortBy]="pullCountComparator">{{'REPOSITORY.PULL_COUNT' | translate}}</clr-dg-column>
+                <clr-dg-column [clrDgField]="'q'" [clrDgSortBy]="'name'">{{'REPOSITORY.NAME' | translate}}</clr-dg-column>
+                <clr-dg-column>{{'REPOSITORY.TAGS_COUNT' | translate}}</clr-dg-column>
+                <clr-dg-column [clrDgSortBy]="'pull_count'">{{'REPOSITORY.PULL_COUNT' | translate}}</clr-dg-column>
                 <clr-dg-placeholder>{{'REPOSITORY.PLACEHOLDER' | translate }}</clr-dg-placeholder>
                 <clr-dg-row *ngFor="let r of repositories"  [clrDgItem]="r">
                     <clr-dg-cell><a href="javascript:void(0)" (click)="watchRepoClickEvt(r)"><span *ngIf="withAdmiral" class="list-img"><img [src]="getImgLink(r)"/></span>{{r.name}}</a></clr-dg-cell>

src/portal/src/lib/components/repository-gridview/repository-gridview.component.ts

@@ -27,7 +27,7 @@ import {
     TagService
 } from '../../services';
 import { ErrorHandler } from '../../utils/error-handler/error-handler';
-import { CustomComparator, DEFAULT_PAGE_SIZE, calculatePage, doFiltering, doSorting, clone } from '../../utils/utils';
+import { DEFAULT_PAGE_SIZE, calculatePage, clone } from '../../utils/utils';
 import { ConfirmationState, ConfirmationTargets, ConfirmationButtons } from '../../entities/shared.const';
 import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
 import { ConfirmationMessage } from '../confirmation-dialog/confirmation-message';
@@ -42,6 +42,7 @@ import { SERVICE_CONFIG, IServiceConfig } from '../../entities/service.config';
 import { map, catchError } from "rxjs/operators";
 import { Observable, throwError as observableThrowError } from "rxjs";
 import { errorHandler as errorHandFn } from "../../utils/shared/shared.utils";
+import { ClrDatagridStateInterface } from "@clr/angular";
 @Component({
     selector: "hbr-repository-gridview",
     templateUrl: "./repository-gridview.component.html",
@@ -72,9 +73,6 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
     cardHover = false;
     listHover = false;
 
-    pullCountComparator: Comparator<RepositoryItem> = new CustomComparator<RepositoryItem>('pull_count', 'number');
-    tagsCountComparator: Comparator<RepositoryItem> = new CustomComparator<RepositoryItem>('tags_count', 'number');
-
     pageSize: number = DEFAULT_PAGE_SIZE;
     currentPage = 1;
     totalCount = 0;
@@ -351,15 +349,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
                 this.totalCount = repo.metadata.xTotalCount;
                 this.repositoriesCopy = repo.data;
                 this.signedCon = {};
-                // Do filtering and sorting
-                this.repositoriesCopy = doFiltering<RepositoryItem>(
-                    this.repositoriesCopy,
-                    this.currentState
-                );
-                this.repositoriesCopy = doSorting<RepositoryItem>(
-                    this.repositoriesCopy,
-                    this.currentState
-                );
+
                 this.repositories = this.repositories.concat(this.repositoriesCopy);
                 this.loading = false;
             }, error => {
@@ -370,7 +360,7 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
         setTimeout(() => clearInterval(hnd), 5000);
     }
 
-    clrLoad(state: State): void {
+    clrLoad(state: ClrDatagridStateInterface): void {
         if (!state || !state.page) {
             return;
         }
@@ -385,7 +375,14 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
 
         // Pagination
         let params: RequestQueryParams = new RequestQueryParams().set("page", "" + pageNumber).set("page_size", "" + this.pageSize);
-
+        if (state.filters && state.filters.length) {
+            state.filters.forEach(item => {
+                params = params.set(item.property, item.value);
+            });
+        }
+        if (state.sort && state.sort.by) {
+            params = params.set(`sort`, `${(state.sort.reverse ? `-` : ``)}${state.sort.by as string}`);
+        }
         this.loading = true;
 
         this.repositoryService.getRepositories(
@@ -399,12 +396,6 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit {
                 this.repositories = repo.data;
 
                 this.signedCon = {};
-                // Do filtering and sorting
-                this.repositories = doFiltering<RepositoryItem>(
-                    this.repositories,
-                    state
-                );
-                this.repositories = doSorting<RepositoryItem>(this.repositories, state);
                 this.loading = false;
             }, error => {
                 this.loading = false;