upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor synced 2024-09-20 20:15:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
[OCI] Artifact filter params changes in ui
This commit is contained in:
jwangyangls 2020-03-17 10:02:50 +08:00 committed by GitHub
commit 580b74035d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 57 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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();

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

@ -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;
st.filters = [{ property: this.filterByType, value: this.lastFilteredTagName }];
this.clrLoad(st);
}
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.filters = [];
if (this.lastFilteredTagName) {
this.filters.push(`${this.filterByType}=~${this.lastFilteredTagName}`);
}
this.clrLoad(st);
}
@ -345,10 +330,12 @@ export class ArtifactListTabComponent implements OnInit, OnDestroy {
if (sortBy) {
params.sort = sortBy;
}
if (state.filters && state.filters.length) {
state.filters.forEach(item => {
params[item.property] = item.value;
if (this.filters && this.filters.length) {
let q = "";
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 }];
} else {
st.filters = [{ property: 'labels.id', value: labelId }];
}
this.filters = [`${this.filterByType}=(${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 }];
} else {
st.filters = [];
}
this.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: 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;
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) {

2
src/portal/src/app/project/repository/artifact/artifact.ts
View File

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

4
src/portal/src/app/project/repository/repository-gridview.component.ts
View File

@ -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);
})