Merge pull request #11007 from jwangyangls/artifact-filter-changes

[OCI] Artifact filter params changes in ui

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.html

@@ -31,7 +31,7 @@
     <div>
         <div class="row flex-items-xs-right rightPos">
             <div id="filterArea" *ngIf="!depth">
-                <div class='filterLabelPiece' *ngIf="(openLabelFilterPiece &&filterByType ==='label.id')"
+                <div class='filterLabelPiece' *ngIf="(openLabelFilterPiece &&filterByType ==='labels')"
                     [style.left.px]='96'>
                     <hbr-label-piece *ngIf="showlabel" [hidden]='!filterOneLabel' [label]="filterOneLabel"
                         [labelWidth]="130"></hbr-label-piece>
@@ -59,7 +59,7 @@
                             </div>
 
                         </div>
-                        <div class="label-filter-panel" *ngIf="!withAdmiral" [hidden]="!(openLabelFilterPanel&&filterByType==='label.id')">
+                        <div class="label-filter-panel" *ngIf="!withAdmiral" [hidden]="!(openLabelFilterPanel&&filterByType==='labels')">
                             <a class="filterClose" (click)="closeFilter()">&times;</a>
                             <label
                                 class="filterLabelHeader filter-dark">{{'REPOSITORY.FILTER_ARTIFACT_BY_LABEL' | translate}}</label>
@@ -146,7 +146,7 @@
 
             </clr-dg-action-bar>
 
-            <clr-dg-column class="flex-max-width" [clrDgField]="'q'">{{'REPOSITORY.ARTIFACTS_COUNT' | translate}}
+            <clr-dg-column class="flex-max-width">{{'REPOSITORY.ARTIFACTS_COUNT' | translate}}
             </clr-dg-column>
             <clr-dg-column *ngIf="depth">{{'REPOSITORY.PLATFORM' | translate}}</clr-dg-column>
             <clr-dg-column class="w-rem-4">{{'REPOSITORY.TAGS_COUNT' | translate}}</clr-dg-column>

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.spec.ts

@@ -366,7 +366,7 @@ describe("ArtifactListTabComponent (inline template)", () => {
     fixture.detectChanges();
     await fixture.whenStable();
     filtereName = 'sha256:3e33e3e3';
-    comp.doSearchArtifactNames('sha256:3e33e3e3');
+    comp.doSearchArtifactByFilter('sha256:3e33e3e3');
     fixture.detectChanges();
     await fixture.whenStable();
     fixture.detectChanges();

src/portal/src/app/project/repository/artifact-list-page/artifact-list/artifact-list-tab/artifact-list-tab.component.ts

@@ -144,7 +144,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   pageSize: number = DEFAULT_PAGE_SIZE;
   currentPage = 1;
   totalCount = 0;
-  currentState: State;
+  currentState: ClrDatagridStateInterface;
 
   hasAddLabelImagePermission: boolean;
   hasRetagImagePermission: boolean;
@@ -163,7 +163,8 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   mutipleFilter = clone(mutipleFilter);
   filterByType: string = this.mutipleFilter[0].filterBy;
   openSelectFilterPiece = false;
-
+  // could Pagination filter
+  filters: string[];
   constructor(
     private errorHandlerService: ErrorHandler,
     private userPermissionService: UserPermissionService,
@@ -282,32 +283,16 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
     this.lastFilteredTagName = filterWords;
     this.currentPage = 1;
 
-    let st: State = this.currentState;
+    let st: ClrDatagridStateInterface = this.currentState;
     if (!st) {
       st = { page: {} };
     }
     st.page.size = this.pageSize;
     st.page.from = 0;
     st.page.to = this.pageSize - 1;
-
+    this.filters = [];
-    st.filters = [{ property: this.filterByType, value: this.lastFilteredTagName }];
+    if (this.lastFilteredTagName) {
-    this.clrLoad(st);
+      this.filters.push(`${this.filterByType}=~${this.lastFilteredTagName}`);
-  }
-  doSearchArtifactNames(artifactName: string) {
-    this.lastFilteredTagName = artifactName;
-    this.currentPage = 1;
-
-    let st: State = this.currentState;
-    if (!st) {
-      st = { page: {} };
-    }
-    st.page.size = this.pageSize;
-    st.page.from = 0;
-    st.page.to = this.pageSize - 1;
-    st.filters = [{ property: this.filterByType, value: this.lastFilteredTagName }];
-    let selectedLab = this.imageFilterLabels.find(label => label.iconsShow === true);
-    if (selectedLab) {
-      st.filters.push({ property: this.filterByType, value: selectedLab.label.id });
     }
     this.clrLoad(st);
   }
@@ -345,10 +330,12 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
       if (sortBy) {
         params.sort = sortBy;
       }
-      if (state.filters && state.filters.length) {
+      if (this.filters && this.filters.length) {
-        state.filters.forEach(item => {
+        let q = "";
-          params[item.property] = item.value;
+        this.filters.forEach(item => {
+          q += item;
         });
+        params.q = encodeURIComponent(q);
       }
       if (this.artifactDigest) {
         const artifactParam: NewArtifactService.GetArtifactParams = {
@@ -424,7 +411,15 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   }
 
   refresh() {
-    this.doSearchArtifactNames(this.lastFilteredTagName);
+    this.currentPage = 1;
+    let st: ClrDatagridStateInterface = this.currentState;
+    if (!st) {
+      st = { page: {} };
+      st.page.size = this.pageSize;
+      st.page.from = 0;
+      st.page.to = this.pageSize - 1;
+    }
+    this.clrLoad(st);
   }
   getArtifactAnnotationsArray(artifactList: Artifact[]) {
     artifactList.forEach(artifact => {
@@ -581,18 +576,15 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
 
     // reload data
     this.currentPage = 1;
-    let st: State = this.currentState;
+    let st: ClrDatagridStateInterface = this.currentState;
     if (!st) {
       st = { page: {} };
     }
     st.page.size = this.pageSize;
     st.page.from = 0;
     st.page.to = this.pageSize - 1;
-    if (this.lastFilteredTagName) {
+
-      st.filters = [{ property: 'name', value: this.lastFilteredTagName }, { property: 'labels.id', value: labelId }];
+    this.filters = [`${this.filterByType}=(${labelId})`];
-    } else {
-      st.filters = [{ property: 'labels.id', value: labelId }];
-    }
 
     this.clrLoad(st);
   }
@@ -606,18 +598,15 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
 
     // reload data
     this.currentPage = 1;
-    let st: State = this.currentState;
+    let st: ClrDatagridStateInterface = this.currentState;
     if (!st) {
       st = { page: {} };
     }
     st.page.size = this.pageSize;
     st.page.from = 0;
     st.page.to = this.pageSize - 1;
-    if (this.lastFilteredTagName) {
+
-      st.filters = [{ property: 'name', value: this.lastFilteredTagName }];
+    this.filters = [];
-    } else {
-      st.filters = [];
-    }
     this.clrLoad(st);
   }
 
@@ -922,7 +911,7 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
   }
   selectFilterType() {
     this.lastFilteredTagName = '';
-    if (this.filterByType === 'label.id') {
+    if (this.filterByType === 'labels') {
       this.openLabelFilterPanel = true;
       this.openLabelFilterPiece = true;
     } else {
@@ -933,26 +922,38 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
           data.iconsShow = false;
       });
     }
-    this.doSearchArtifactNames("");
-  }
-
-  selectFilter(showItem: string, filterItem: string) {
-    this.lastFilteredTagName = filterItem;
     this.currentPage = 1;
-
+    let st: ClrDatagridStateInterface = this.currentState;
-    let st: State = this.currentState;
     if (!st) {
       st = { page: {} };
     }
     st.page.size = this.pageSize;
     st.page.from = 0;
     st.page.to = this.pageSize - 1;
-    st.filters = [{ property: this.filterByType, value: filterItem }];
+    this.filters = [];
+    this.clrLoad(st);
+  }
+
+  selectFilter(showItem: string, filterItem: string) {
+    this.lastFilteredTagName = filterItem;
+    this.currentPage = 1;
+
+    let st: ClrDatagridStateInterface = this.currentState;
+    if (!st) {
+      st = { page: {} };
+    }
+    st.page.size = this.pageSize;
+    st.page.from = 0;
+    st.page.to = this.pageSize - 1;
+    this.filters = [];
+    if (filterItem) {
+      this.filters.push(`${this.filterByType}=${filterItem}`);
+    }
 
     this.clrLoad(st);
   }
   get isFilterReadonly() {
-    return this.filterByType === 'label.id' ? 'readonly' : null;
+    return this.filterByType === 'labels' ? 'readonly' : null;
   }
   getArtifactIcon(artifacts: ArtifactFront[]) {
     for (const artifact of artifacts) {

src/portal/src/app/project/repository/artifact/artifact.ts

@@ -43,7 +43,7 @@ export const mutipleFilter = [
       ]
     },
     {
-      filterBy: 'label.id',
+      filterBy: 'labels',
       filterByShowText: 'Label',
       listItem: []
     },

src/portal/src/app/project/repository/repository-gridview.component.ts

@@ -156,8 +156,10 @@ export class RepositoryGridviewComponent implements OnChanges, OnInit, OnDestroy
             projectName: this.projectName,
             page: this.currentPage,
             pageSize: this.pageSize,
-            name: this.lastFilteredRepoName
         };
+        if (this.lastFilteredRepoName) {
+          params.q = encodeURIComponent(`name=~${this.lastFilteredRepoName}`);
+        }
           this.loading = true;
           return this.newRepoService.listRepositoriesResponse(params);
         })