From 963830b9d1cb341b40c27fd5515fc3b3f7158c24 Mon Sep 17 00:00:00 2001 From: pfh Date: Fri, 15 Jun 2018 11:03:47 +0800 Subject: [PATCH] Add replication rule label filter --- .../create-edit-rule.component.html | 27 ++- .../create-edit-rule.component.scss | 22 ++ .../create-edit-rule.component.spec.ts | 10 +- .../create-edit-rule.component.ts | 211 +++++++++++++++--- .../filter-label.component.html | 13 ++ .../filter-label.component.scss | 132 +++++++++++ .../filter-label.component.ts | 170 ++++++++++++++ src/ui_ng/lib/src/create-edit-rule/index.ts | 4 +- .../label-piece/label-piece.component.scss | 1 + .../list-replication-rule.component.html | 14 +- .../list-replication-rule.component.ts | 16 ++ .../replication/replication.component.html | 2 +- .../replication/replication.component.spec.ts | 6 +- .../src/replication/replication.component.ts | 1 + src/ui_ng/lib/src/service/label.service.ts | 4 +- src/ui_ng/lib/src/tag/tag.component.ts | 5 + src/ui_ng/package.json | 2 +- .../total-replication-page.component.html | 2 +- .../total-replication-page.component.ts | 6 + src/ui_ng/src/i18n/lang/en-us-lang.json | 6 +- src/ui_ng/src/i18n/lang/es-es-lang.json | 6 +- src/ui_ng/src/i18n/lang/fr-fr-lang.json | 6 +- src/ui_ng/src/i18n/lang/zh-cn-lang.json | 6 +- 23 files changed, 626 insertions(+), 46 deletions(-) create mode 100644 src/ui_ng/lib/src/create-edit-rule/filter-label.component.html create mode 100644 src/ui_ng/lib/src/create-edit-rule/filter-label.component.scss create mode 100644 src/ui_ng/lib/src/create-edit-rule/filter-label.component.ts diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html index 087bf4760..773516dcb 100644 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.html @@ -2,6 +2,14 @@

{{headerTitle | translate}}

+ +
+ {{deletedLabelInfo}} +
+ {{'REPLICATION.ACKNOWLEDGE' | translate}} +
+
+
@@ -39,23 +47,28 @@
-
-
+
+
- +
+
+ +
+
- + +
diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss index 416fa483a..98326fad0 100644 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.scss @@ -44,6 +44,7 @@ h4 { } .filterSelect { + position: relative; width: 315px; } @@ -156,8 +157,29 @@ h4 { cursor: pointer; } +.arrowSet{ + display: inline-block; + position: absolute; + right: 50px; + top: 8px; + transform: rotate(180deg); +} + clr-modal { ::ng-deep div.modal-dialog { width: 25rem; } } + +.deletedDiv { + text-align: left; + line-height: 14px; + color: red; +} +.deletedDiv a{ + margin-left: 10px; + text-decoration: underline; + cursor: pointer; + color: blue; +} + diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.spec.ts b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.spec.ts index 359247281..c216fef58 100644 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.spec.ts +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.spec.ts @@ -38,6 +38,9 @@ import { } from "../service/project.service"; import { JobLogViewerComponent } from "../job-log-viewer/job-log-viewer.component"; import { OperationService } from "../operation/operation.service"; +import {FilterLabelComponent} from "./filter-label.component"; +import {LabelService} from "../service/label.service"; +import {LabelPieceComponent} from "../label-piece/label-piece.component"; describe("CreateEditRuleComponent (inline template)", () => { let mockRules: ReplicationRule[] = [ @@ -239,7 +242,9 @@ describe("CreateEditRuleComponent (inline template)", () => { DatePickerComponent, FilterComponent, InlineAlertComponent, - JobLogViewerComponent + JobLogViewerComponent, + FilterLabelComponent, + LabelPieceComponent ], providers: [ ErrorHandler, @@ -248,7 +253,8 @@ describe("CreateEditRuleComponent (inline template)", () => { { provide: EndpointService, useClass: EndpointDefaultService }, { provide: ProjectService, useClass: ProjectDefaultService }, { provide: JobLogService, useClass: JobLogDefaultService }, - { provide: OperationService } + { provide: OperationService }, + { provide: LabelService } ] }); })); diff --git a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts index 35d3c9b2b..6acf3de98 100644 --- a/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts +++ b/src/ui_ng/lib/src/create-edit-rule/create-edit-rule.component.ts @@ -21,11 +21,11 @@ import { EventEmitter, Output } from "@angular/core"; -import { Filter, ReplicationRule, Endpoint } from "../service/interface"; +import {Filter, ReplicationRule, Endpoint, Label} from "../service/interface"; import { Subject } from "rxjs/Subject"; import { Subscription } from "rxjs/Subscription"; import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms"; -import { compareValue, isEmptyObject, toPromise } from "../utils"; +import {clone, compareValue, isEmptyObject, toPromise} from "../utils"; import { InlineAlertComponent } from "../inline-alert/inline-alert.component"; import { ReplicationService } from "../service/replication.service"; import { ErrorHandler } from "../error-handler/error-handler"; @@ -33,6 +33,7 @@ import { TranslateService } from "@ngx-translate/core"; import { EndpointService } from "../service/endpoint.service"; import { ProjectService } from "../service/project.service"; import { Project } from "../project-policy-config/project"; +import {LabelState} from "../tag/tag.component"; const ONE_HOUR_SECONDS = 3600; const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS; @@ -56,6 +57,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { noSelectedProject = true; noSelectedEndpoint = true; filterCount = 0; + alertClosed = false; triggerNames: string[] = ["Manual", "Immediate", "Scheduled"]; scheduleNames: string[] = ["Daily", "Weekly"]; weekly: string[] = [ @@ -67,7 +69,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { "Saturday", "Sunday" ]; - filterSelect: string[] = ["repository", "tag"]; + filterSelect: string[] = ["repository", "tag", "label"]; ruleNameTooltip = "REPLICATION.NAME_TOOLTIP"; headerTitle = "REPLICATION.ADD_POLICY"; @@ -80,13 +82,19 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { proNameChecker: Subject = new Subject(); firstClick = 0; policyId: number; + labelInputVal = ''; + filterLabelInfo: Label[] = []; // store filter selected labels` id + deletedLabelCount = 0; + deletedLabelInfo: string; confirmSub: Subscription; ruleForm: FormGroup; + formArrayLabel: FormArray; copyUpdateForm: ReplicationRule; @Input() projectId: number; @Input() projectName: string; + @Input() withAdmiral: boolean; @Output() goToRegistry = new EventEmitter(); @Output() reload = new EventEmitter(); @@ -118,16 +126,22 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.createForm(); } - baseFilterData(name: string, option: string[], state: boolean) { + baseFilterData(name: string, option: string[], state: boolean, inputValue: string) { return { name: name, options: option, state: state, - isValid: true + isValid: true, + isOpen: false, // label list + inputValue: inputValue }; } ngOnInit(): void { + if (this.withAdmiral) { + this.filterSelect = ["repository", "tag"]; + } + toPromise(this.endpointService.getEndpoints()) .then(targets => { this.targetList = targets || []; @@ -173,7 +187,8 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.proNameChecker .debounceTime(500) .distinctUntilChanged() - .subscribe((name: string) => { + .subscribe((resp: string) => { + let name = this.ruleForm.controls["projects"].value[0].name; this.noProjectInfo = ""; this.selectedProjectList = []; toPromise(this.proService.listProjects(name, undefined)) @@ -225,6 +240,8 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { } createForm() { + this.formArrayLabel = this.fb.array([]); + this.ruleForm = this.fb.group({ name: ["", Validators.required], description: "", @@ -263,7 +280,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.setTarget([this.emptyEndpoint]); this.setFilter([]); - this.copyUpdateForm = Object.assign({}, this.ruleForm.value); + this.copyUpdateForm = clone(this.ruleForm.value); } updateForm(rule: ReplicationRule): void { @@ -281,6 +298,9 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.noSelectedEndpoint = false; if (rule.filters) { + this.reOrganizeLabel(rule.filters); + + this.setFilter(rule.filters); this.updateFilter(rule.filters); } @@ -290,6 +310,46 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { setTimeout(() => clearInterval(hnd), 2000); } + // reorganize filter structure + reOrganizeLabel(filterLabels: any[]): void { + let count = 0; + if (filterLabels.length) { + this.filterLabelInfo = []; + + let delLabel = ''; + filterLabels.forEach((data: any) => { + if (data.kind === 'label') { + if (data.value.deleted !== true) { + count++; + this.filterLabelInfo.push(data.value); + } + if (data.value.deleted === true) { + this.deletedLabelCount++; + delLabel += data.value.name + ','; + } + } + }); + + this.translateService.get('REPLICATION.DELETED_LABEL_INFO', { + param: delLabel + }).subscribe((res: string) => { + this.deletedLabelInfo = res; + this.alertClosed = false; + }); + + // delete api return label info, replace with label count + if (delLabel || count) { + let len = filterLabels.length; + for (let i = 0 ; i < len; i ++) { + let lab = filterLabels.find(data => data.kind === this.filterSelect[2]); + if (lab) {filterLabels.splice(filterLabels.indexOf(lab), 1); } + } + filterLabels.push({kind: this.filterSelect[2], value: count + ' labels'}); + this.labelInputVal = count.toString(); + } + } + } + get projects(): FormArray { return this.ruleForm.get("projects") as FormArray; } @@ -320,16 +380,17 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { initFilter(name: string) { return this.fb.group({ kind: name, - pattern: ["", Validators.required] + value: ['', Validators.required] }); } - filterChange($event: any) { + filterChange($event: any, selectedValue: string) { if ($event && $event.target["value"]) { let id: number = $event.target.id; let name: string = $event.target.name; let value: string = $event.target["value"]; + const controlArray = this.ruleForm.get('filters'); this.filterListData.forEach((data, index) => { if (index === +id) { data.name = $event.target.name = value; @@ -339,6 +400,38 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { if (data.options.indexOf(name) === -1) { data.options.push(name); } + + // if before select, $event is label, then after select set inputValue is empty and isOpen is false + if (this.filterSelect.length === 3 && name === this.filterSelect[2] && data.name === value) { + this.labelInputVal = controlArray.controls[index].get('value').value.split(' ')[0]; + data.isOpen = false; + controlArray.controls[index].get('value').setValue(''); + } + // if before select, $event is not label, then after select set inputValue is labelInputVal and isOpen is true + if (this.filterSelect.length === 3 && data.name === this.filterSelect[2]) { + if (this.labelInputVal) { + controlArray.controls[index].get('value').setValue(this.labelInputVal + ' labels'); + } else { + controlArray.controls[index].get('value').setValue(''); + } + + // this.labelInputVal = ''; + data.isOpen = false; + } + + }); + } + } + + // when input value is label, then open label panel + openLabelList(labelTag: string, indexId: number, $event: any) { + if (this.filterSelect.length === 3 && labelTag === this.filterSelect[2]) { + this.filterListData.forEach((data, index) => { + if (index === indexId) { + data.isOpen = true; + }else { + data.isOpen = false; + } }); } } @@ -398,15 +491,17 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { } addNewFilter(): void { + const controlArray = this.ruleForm.get('filters'); if (this.filterCount === 0) { this.filterListData.push( this.baseFilterData( this.filterSelect[0], this.filterSelect.slice(), - true + true, + '' ) ); - this.filters.push(this.initFilter(this.filterSelect[0])); + controlArray.push(this.initFilter(this.filterSelect[0])); } else { let nameArr: string[] = this.filterSelect.slice(); this.filterListData.forEach(data => { @@ -416,33 +511,41 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.filterListData.filter(data => { data.options.splice(data.options.indexOf(nameArr[0]), 1); }); - this.filterListData.push(this.baseFilterData(nameArr[0], nameArr, true)); - this.filters.push(this.initFilter(nameArr[0])); + this.filterListData.push(this.baseFilterData(nameArr[0], nameArr, true, '')); + controlArray.push(this.initFilter(nameArr[0])); } this.filterCount += 1; if (this.filterCount >= this.filterSelect.length) { this.isFilterHide = true; } + if (controlArray.controls[this.filterCount - 1].get('kind').value === 'label' && this.labelInputVal) { + controlArray.controls[this.filterCount - 1].get('value').setValue(this.labelInputVal + ' labels'); + } + } // delete a filter deleteFilter(i: number): void { if (i || i === 0) { - let delfilter = this.filterListData.splice(i, 1)[0]; + let delFilter = this.filterListData.splice(i, 1)[0]; if (this.filterCount === this.filterSelect.length) { this.isFilterHide = false; } this.filterCount -= 1; if (this.filterListData.length) { - let optionVal = delfilter.name; + let optionVal = delFilter.name; this.filterListData.filter(data => { if (data.options.indexOf(optionVal) === -1) { data.options.push(optionVal); } }); } - const control = this.ruleForm.controls["filters"]; + const control = this.ruleForm.get('filters'); + if (control.controls[i].get('kind').value === 'label') { + this.labelInputVal = control.controls[i].get('value').value.split(' ')[0]; + } control.removeAt(i); + this.setFilter(control.value); } } @@ -502,7 +605,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { filters.forEach((filter: any) => { let option: string[] = opt.slice(); option.unshift(filter.kind); - this.filterListData.push(this.baseFilterData(filter.kind, option, true)); + this.filterListData.push(this.baseFilterData(filter.kind, option, true, '')); }); this.filterCount = filters.length; if (filters.length === this.filterSelect.length) { @@ -510,6 +613,31 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { } } + selectedLabelList(selectedLabels: LabelState[], indexId: number) { + // set input value of filter label + const controlArray = this.ruleForm.get('filters'); + + this.filterListData.forEach((data, index) => { + if (data.name === 'label') { + let labelsLength = selectedLabels.filter(lab => lab.iconsShow === true).length; + if (labelsLength > 0) { + controlArray.controls[index].get('value').setValue(labelsLength + ' labels'); + this.labelInputVal = labelsLength.toString(); + }else { + controlArray.controls[index].get('value').setValue(''); + } + }; + }); + + // store filter label info + this.filterLabelInfo = []; + selectedLabels.forEach(data => { + if (data.iconsShow === true) { + this.filterLabelInfo.push(data.label); + } + }); + } + updateTrigger(trigger: any) { if (trigger["schedule_param"]) { this.isScheduleOpt = true; @@ -558,6 +686,19 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { } } + setFilterLabelVal(filters: any[]) { + let labels: any = filters.find(data => data.kind === this.filterSelect[2]); + + if (labels) { + filters.splice(filters.indexOf(labels), 1); + let info: any[] = []; + this.filterLabelInfo.forEach(data => { + info.push({kind: 'label', value: data.id}); + }); + filters.push.apply(filters, info); + } + } + public hasFormChange(): boolean { return !isEmptyObject(this.getChanges()); } @@ -567,6 +708,9 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.inProgress = true; let copyRuleForm: ReplicationRule = this.ruleForm.value; copyRuleForm.trigger = this.setTriggerVaule(copyRuleForm.trigger); + // rewrite key name of label when filer contain labels. + if (copyRuleForm.filters) { this.setFilterLabelVal(copyRuleForm.filters); }; + if (this.policyId < 0) { this.repService .createReplicationRule(copyRuleForm) @@ -602,19 +746,24 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { openCreateEditRule(ruleId?: number | string): void { this.initForm(); + this.inlineAlert.close(); this.selectedProjectList = []; this.filterCount = 0; + this.isFilterHide = false; this.filterListData = []; this.firstClick = 0; this.noSelectedProject = true; this.noSelectedEndpoint = true; this.isRuleNameValid = true; + this.deletedLabelCount = 0; this.weeklySchedule = false; this.isScheduleOpt = false; this.isImmediate = false; this.policyId = -1; this.createEditRuleOpened = true; + this.filterLabelInfo = []; + this.labelInputVal = ''; this.noProjectInfo = ""; this.noEndpointInfo = ""; @@ -630,12 +779,12 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.headerTitle = "REPLICATION.EDIT_POLICY_TITLE"; toPromise(this.repService.getReplicationRule(ruleId)) .then(response => { - this.copyUpdateForm = Object.assign({}, response); - // set filter value is [] if callback fiter value is null. - this.copyUpdateForm.filters = response.filters - ? response.filters - : []; + this.copyUpdateForm = clone(response); + // set filter value is [] if callback filter value is null. this.updateForm(response); + // keep trigger same value + this.copyUpdateForm.trigger = clone(response.trigger); + this.copyUpdateForm.filters = this.copyUpdateForm.filters === null ? [] : this.copyUpdateForm.filters; }) .catch((error: any) => { this.inlineAlert.showInlineError(error); @@ -648,8 +797,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { ]); this.noSelectedProject = false; } - - this.copyUpdateForm = Object.assign({}, this.ruleForm.value); + this.copyUpdateForm = clone(this.ruleForm.value); } } @@ -743,7 +891,20 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { getChanges(): { [key: string]: any | any[] } { let changes: { [key: string]: any | any[] } = {}; - let ruleValue: { [key: string]: any | any[] } = this.ruleForm.value; + let ruleValue: { [key: string]: any | any[] } = clone(this.ruleForm.value); + if (ruleValue.filters && ruleValue.filters.length) { + ruleValue.filters.forEach((data, index) => { + if (data.kind === 'label') { + ruleValue.filters.splice(index, 1); + } + }); + // rewrite filter label + this.filterLabelInfo.forEach(data => { + ruleValue.filters.push({kind: "label", pattern: "", value: data}); + }); + + } + if (!ruleValue || !this.copyUpdateForm) { return changes; } diff --git a/src/ui_ng/lib/src/create-edit-rule/filter-label.component.html b/src/ui_ng/lib/src/create-edit-rule/filter-label.component.html new file mode 100644 index 000000000..a28f37924 --- /dev/null +++ b/src/ui_ng/lib/src/create-edit-rule/filter-label.component.html @@ -0,0 +1,13 @@ +
+ × + +
+
{{'LABEL.NO_LABELS' | translate }}
+ +
+ +
+
\ No newline at end of file diff --git a/src/ui_ng/lib/src/create-edit-rule/filter-label.component.scss b/src/ui_ng/lib/src/create-edit-rule/filter-label.component.scss new file mode 100644 index 000000000..bf43a8b8c --- /dev/null +++ b/src/ui_ng/lib/src/create-edit-rule/filter-label.component.scss @@ -0,0 +1,132 @@ +.filterLabelPanel { + display: flex; + position: absolute; + left:135px; + -ms-flex-direction: column; + flex-direction: column; + background: #fff; + padding: .5rem 0; + border: 1px solid #ccc; + box-shadow: 0 1px 0.125rem hsla(0, 0%, 45%, .25); + min-width: 5rem; + max-width: 15rem; + border-radius: .125rem; + z-index: 100; +} + +.filterLabelPanel .filterInput{margin-left: .5rem; margin-right: .5rem;} + +.filterLabelHeader { + font-size: .5rem; + font-weight: 600; + letter-spacing: normal; + padding: 0 .5rem; + line-height: .75rem; + margin: 0; + color: #313131; +} + +.filterLabelPanel .form-group input { + position: relative; + margin-left: .5rem; + margin-right: .5rem; +} + +.filterClose { + position: absolute; + right: 8px; + top: 5px; + cursor: pointer; + font-size: 20px; +} + +.pull-left { + display: inline-block; + float: left; +} + +.pull-right { + display: inline-block; + float: right; +} + +.btn-link { + display: inline-flex; + width: 15px; + min-width: 15px; + color: black; + vertical-align: super; +} + +.trigger-item, +.signpost-item { + display: inline; +} + +.signpost-content-body .label { + margin: .3rem; +} + +.labelDiv { + position: absolute; + left: 28px; + top: 5px; +} + +.datagrid-action-bar { + z-index: 10; +} + +.trigger-item hbr-label-piece { + display: flex !important; + margin: 6px 0; +} + +:host>>>.signpost-content { + min-width: 4rem; +} + +:host>>>.signpost-content-body { + padding: 0 .4rem; +} + +:host>>>.signpost-content-header { + display: none; +} + +.filterLabelPiece { + position: absolute; + top: 4px; + z-index: 1; +} + +.dropdown .dropdown-toggle.btn { + margin: .25rem .5rem .25rem 0; +} + +.labelBtn { + position: relative; + overflow: hidden; + font-size: .58333rem; + letter-spacing: normal; + font-weight: 400; + background: transparent; + border: 0; + color: #565656; + cursor: pointer; + display: block; + margin: 0; + width: 100%; + height: 30px; + text-transform: none; +} + +.labelBtn:hover { + background-color: #eee; +} + +.labelBtn:focus { + outline: none; +} + +.labelDiv label{margin: 0;} diff --git a/src/ui_ng/lib/src/create-edit-rule/filter-label.component.ts b/src/ui_ng/lib/src/create-edit-rule/filter-label.component.ts new file mode 100644 index 000000000..21c006982 --- /dev/null +++ b/src/ui_ng/lib/src/create-edit-rule/filter-label.component.ts @@ -0,0 +1,170 @@ +import {Component, Input, OnInit, OnChanges, Output, EventEmitter, ChangeDetectorRef, SimpleChanges} from "@angular/core"; +import {LabelService} from "../service/label.service"; +import {toPromise} from "../utils"; +import {Label} from "../service/interface"; +import {ErrorHandler} from "../error-handler/error-handler"; +import {Subject} from "rxjs/Subject"; + +export interface LabelState { + iconsShow: boolean; + label: Label; + show: boolean; +} + +@Component({ + selector: "hbr-filter-label", + templateUrl: "./filter-label.component.html", + styleUrls: ["./filter-label.component.scss"] +}) +export class FilterLabelComponent implements OnInit, OnChanges { + + openFilterLabelPanel: boolean; + labelLists: LabelState[] = []; + filterLabelName = ''; + labelNameFilter: Subject = new Subject (); + @Input() isOpen: boolean; + @Input() projectId: number; + @Input() selectedLabelInfo: Label[]; + @Output() selectedLabels = new EventEmitter(); + @Output() closePanelEvent = new EventEmitter(); + + constructor(private labelService: LabelService, + private ref: ChangeDetectorRef, + private errorHandler: ErrorHandler) {} + + ngOnInit(): void { + Promise.all([this.getGLabels(), this.getPLabels()]).then(() => { + this.selectedLabelInfo.forEach(info => { + if (this.labelLists.length) { + let lab = this.labelLists.find(data => data.label.id === info.id); + if (lab) {this.selectOper(lab); } + } + }); + }); + + this.labelNameFilter + .debounceTime(500) + .distinctUntilChanged() + .subscribe((name: string) => { + if (this.filterLabelName.length) { + + this.labelLists.forEach(data => { + if (data.label.name.indexOf(this.filterLabelName) !== -1) { + data.show = true; + } else { + data.show = false; + } + }); + setTimeout(() => { + setInterval(() => this.ref.markForCheck(), 200); + }, 1000); + } + }); + } + + ngOnChanges(changes: SimpleChanges) { + if (changes['isOpen']) {this.openFilterLabelPanel = changes['isOpen'].currentValue; } + } + + getGLabels() { + return toPromise(this.labelService.getGLabels()).then((res: Label[]) => { + if (res.length) { + res.forEach(data => { + this.labelLists.push({'iconsShow': false, 'label': data, 'show': true}); + }); + } + }).catch(error => { + this.errorHandler.error(error); + }); + } + + getPLabels() { + if (this.projectId && this.projectId > 0) { + return toPromise(this.labelService.getPLabels(this.projectId)).then((res1: Label[]) => { + if (res1.length) { + res1.forEach(data => { + this.labelLists.push({'iconsShow': false, 'label': data, 'show': true}); + }); + } + }).catch(error => { + this.errorHandler.error(error); + }); + } + } + + handleInputFilter(): void { + if (this.filterLabelName.length) { + this.labelNameFilter.next(this.filterLabelName); + }else { + this.labelLists.every(data => data.show = true); + } + } + + selectLabel(labelInfo: LabelState): void { + if (labelInfo) { + let isClick = true; + if (!labelInfo.iconsShow) { + this.selectOper(labelInfo, isClick); + } else { + this.unSelectOper(labelInfo, isClick); + } + } + } + + selectOper(labelInfo: LabelState, isClick?: boolean): void { + // set the selected label in front + this.labelLists.splice(this.labelLists.indexOf(labelInfo), 1); + this.labelLists.some((data, i) => { + if (!data.iconsShow) { + this.labelLists.splice(i, 0, labelInfo); + return true; + } + }); + // when is the last one + if (this.labelLists.every(data => data.iconsShow === true)) { + this.labelLists.push(labelInfo); + } + + labelInfo.iconsShow = true; + if (isClick) { + this.selectedLabels.emit(this.labelLists); + } + + } + + unSelectOper(labelInfo: LabelState, isClick?: boolean): void { + this.sortOperation(this.labelLists, labelInfo); + + labelInfo.iconsShow = false; + if (isClick) { + this.selectedLabels.emit(this.labelLists); + } + } + + // insert the unselected label to groups with the same icons + sortOperation(labelList: LabelState[], labelInfo: LabelState): void { + labelList.some((data, i) => { + if (!data.iconsShow) { + if (data.label.scope === labelInfo.label.scope) { + labelList.splice(i, 0, labelInfo); + labelList.splice(labelList.indexOf(labelInfo, 0), 1); + return true; + } + if (data.label.scope !== labelInfo.label.scope && i === labelList.length - 1) { + labelList.push(labelInfo); + labelList.splice(labelList.indexOf(labelInfo), 1); + return true; + } + } + if (data.iconsShow && i === labelList.length - 1) { + labelList.push(labelInfo); + labelList.splice(labelList.indexOf(labelInfo), 1); + return true; + } + }); + } + + closeFilter(): void { + this.closePanelEvent.emit(); + } +} diff --git a/src/ui_ng/lib/src/create-edit-rule/index.ts b/src/ui_ng/lib/src/create-edit-rule/index.ts index 8a451ebea..a017632ff 100644 --- a/src/ui_ng/lib/src/create-edit-rule/index.ts +++ b/src/ui_ng/lib/src/create-edit-rule/index.ts @@ -1,7 +1,9 @@ import { Type } from "@angular/core"; import { CreateEditRuleComponent } from "./create-edit-rule.component"; +import {FilterLabelComponent} from "./filter-label.component"; export const CREATE_EDIT_RULE_DIRECTIVES: Type[] = [ - CreateEditRuleComponent + CreateEditRuleComponent, + FilterLabelComponent ]; diff --git a/src/ui_ng/lib/src/label-piece/label-piece.component.scss b/src/ui_ng/lib/src/label-piece/label-piece.component.scss index 3a5e468da..c4bc15a2f 100644 --- a/src/ui_ng/lib/src/label-piece/label-piece.component.scss +++ b/src/ui_ng/lib/src/label-piece/label-piece.component.scss @@ -3,6 +3,7 @@ color: #222; display: inline-block; justify-content: flex-start; + margin: 0; overflow: hidden; text-overflow: ellipsis; line-height: .875rem; diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html index 6caead2c8..21504fe4c 100644 --- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html +++ b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.html @@ -1,12 +1,13 @@
- + {{'REPLICATION.NAME' | translate}} + {{'REPLICATION.STATUS' | translate}} {{'REPLICATION.PROJECT' | translate}} {{'REPLICATION.DESCRIPTION' | translate}} {{'REPLICATION.DESTINATION_NAME' | translate}} @@ -14,6 +15,17 @@ {{'REPLICATION.PLACEHOLDER' | translate }} {{p.name}} + +
+ + Disabled + + {{'REPLICATION.RULE_DISABLED' | translate}} + + +
Enabled
+
+ {{p.projects?.length>0 ? p.projects[0].name : ''}} diff --git a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts index 463d95d93..cd371cb22 100644 --- a/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts +++ b/src/ui_ng/lib/src/list-replication-rule/list-replication-rule.component.ts @@ -152,6 +152,22 @@ export class ListReplicationRuleComponent implements OnInit, OnChanges { this.replicateManual.emit(rules); } + hasDeletedLabel(rule: any) { + if (rule.filters) { + let count = 0; + rule.filters.forEach((data: any) => { + if (data.kind === 'label' && data.value.deleted) { + count ++; + } + }); + if (count === 0) { + return 'enabled'; + }else { return 'disabled'; } + }else { + return 'enabled'; + } + } + deletionConfirm(message: ConfirmationAcknowledgement) { if ( message && diff --git a/src/ui_ng/lib/src/replication/replication.component.html b/src/ui_ng/lib/src/replication/replication.component.html index a81de3b09..742c04175 100644 --- a/src/ui_ng/lib/src/replication/replication.component.html +++ b/src/ui_ng/lib/src/replication/replication.component.html @@ -72,7 +72,7 @@
- +
diff --git a/src/ui_ng/lib/src/replication/replication.component.spec.ts b/src/ui_ng/lib/src/replication/replication.component.spec.ts index 1f0f1b019..5bf1e4adc 100644 --- a/src/ui_ng/lib/src/replication/replication.component.spec.ts +++ b/src/ui_ng/lib/src/replication/replication.component.spec.ts @@ -21,6 +21,8 @@ import { JobLogViewerComponent } from '../job-log-viewer/job-log-viewer.componen import { JobLogService, JobLogDefaultService, ReplicationJobItem } from '../service/index'; import {ProjectDefaultService, ProjectService} from "../service/project.service"; import {OperationService} from "../operation/operation.service"; +import {FilterLabelComponent} from "../create-edit-rule/filter-label.component"; +import {LabelPieceComponent} from "../label-piece/label-piece.component"; describe('Replication Component (inline template)', () => { @@ -224,7 +226,9 @@ describe('Replication Component (inline template)', () => { DatePickerComponent, FilterComponent, InlineAlertComponent, - JobLogViewerComponent + JobLogViewerComponent, + FilterLabelComponent, + LabelPieceComponent ], providers: [ ErrorHandler, diff --git a/src/ui_ng/lib/src/replication/replication.component.ts b/src/ui_ng/lib/src/replication/replication.component.ts index b8fa3f73f..5526bed10 100644 --- a/src/ui_ng/lib/src/replication/replication.component.ts +++ b/src/ui_ng/lib/src/replication/replication.component.ts @@ -105,6 +105,7 @@ export class ReplicationComponent implements OnInit, OnDestroy { @Input() projectId: number | string; @Input() projectName: string; @Input() isSystemAdmin: boolean; + @Input() withAdmiral: boolean; @Input() withReplicationJob: boolean; @Output() redirect = new EventEmitter(); diff --git a/src/ui_ng/lib/src/service/label.service.ts b/src/ui_ng/lib/src/service/label.service.ts index 41142091c..94215bcfd 100644 --- a/src/ui_ng/lib/src/service/label.service.ts +++ b/src/ui_ng/lib/src/service/label.service.ts @@ -20,7 +20,7 @@ export abstract class LabelService { abstract getLabels( scope: string, - projectId: number, + projectId?: number, name?: string, queryParams?: RequestQueryParams ): Observable | Promise; @@ -55,7 +55,7 @@ export class LabelDefaultService extends LabelService { getLabels( scope: string, - projectId: number, + projectId?: number, name?: string, queryParams?: RequestQueryParams ): Observable | Promise { diff --git a/src/ui_ng/lib/src/tag/tag.component.ts b/src/ui_ng/lib/src/tag/tag.component.ts index 82556b06b..c1a5efd2d 100644 --- a/src/ui_ng/lib/src/tag/tag.component.ts +++ b/src/ui_ng/lib/src/tag/tag.component.ts @@ -350,6 +350,11 @@ export class TagComponent implements OnInit, AfterViewInit { } }); + // when is the last one + if (this.imageStickLabels.every(data => data.iconsShow === true)) { + this.imageStickLabels.push(labelInfo); + } + labelInfo.iconsShow = true; this.inprogress = false; }).catch(err => { diff --git a/src/ui_ng/package.json b/src/ui_ng/package.json index eff7b0aa1..477acf2b0 100644 --- a/src/ui_ng/package.json +++ b/src/ui_ng/package.json @@ -49,7 +49,7 @@ "bootstrap": "4.0.0-alpha.5", "codelyzer": "~2.0.0-beta.4", "enhanced-resolve": "^3.0.0", - "harbor-ui": "0.7.19-test-14", + "harbor-ui": "0.7.19-test-16", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "~1.7.0", diff --git a/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html index d6d43b165..785054e6b 100644 --- a/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html +++ b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.html @@ -1,4 +1,4 @@

{{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}

- +
\ No newline at end of file diff --git a/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.ts b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.ts index a53b1bee1..ba4f4a214 100644 --- a/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.ts +++ b/src/ui_ng/src/app/replication/total-replication/total-replication-page.component.ts @@ -17,6 +17,7 @@ import {Router, ActivatedRoute} from "@angular/router"; import {ReplicationRule} from "harbor-ui"; import {SessionService} from "../../shared/session.service"; +import {AppConfigService} from "../../app-config.service"; @Component({ selector: 'total-replication', @@ -26,6 +27,7 @@ export class TotalReplicationPageComponent { constructor(private router: Router, private session: SessionService, + private appConfigService: AppConfigService, private activeRoute: ActivatedRoute) {} customRedirect(rule: ReplicationRule): void { if (rule) { @@ -40,4 +42,8 @@ export class TotalReplicationPageComponent { let account = this.session.getCurrentUser(); return account != null && account.has_admin_role; } + + get withAdmiral(): boolean { + return this.appConfigService.getConfig().with_admiral; + } } diff --git a/src/ui_ng/src/i18n/lang/en-us-lang.json b/src/ui_ng/src/i18n/lang/en-us-lang.json index 51e70c3df..7c876e418 100644 --- a/src/ui_ng/src/i18n/lang/en-us-lang.json +++ b/src/ui_ng/src/i18n/lang/en-us-lang.json @@ -272,6 +272,7 @@ "TEST_CONNECTION_SUCCESS": "Connection tested successfully.", "TEST_CONNECTION_FAILURE": "Failed to ping endpoint.", "NAME": "Name", + "STATUS": "Status", "PROJECT": "Project", "NAME_IS_REQUIRED": "Name is required.", "DESCRIPTION": "Description", @@ -344,7 +345,10 @@ "DELETE_REMOTE_IMAGES":"Delete remote images when locally deleted", "REPLICATE_IMMEDIATE":"Replicate existing images immediately", "NEW": "New", - "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers." + "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.", + "DELETED_LABEL_INFO": "Deleted label(s) '{{param}}' referenced in the filter, click 'SAVE' to update the filter to enable this rule.", + "ACKNOWLEDGE": "Acknowledge", + "RULE_DISABLED": "This rule has been disabled because a label used in its filter has been deleted. \n Edit the rule and update its filter to enable it." }, "DESTINATION": { "NEW_ENDPOINT": "New Endpoint", diff --git a/src/ui_ng/src/i18n/lang/es-es-lang.json b/src/ui_ng/src/i18n/lang/es-es-lang.json index e740c69ce..9653166cf 100644 --- a/src/ui_ng/src/i18n/lang/es-es-lang.json +++ b/src/ui_ng/src/i18n/lang/es-es-lang.json @@ -271,6 +271,7 @@ "TEST_CONNECTION_SUCCESS": "Conexión comprobada satisfactoriamente.", "TEST_CONNECTION_FAILURE": "Fallo al conectar con el endpoint.", "NAME": "Nombre", + "STATUS": "Status", "PROJECT": "Proyecto", "NAME_IS_REQUIRED": "El nombre es obligatorio.", "DESCRIPTION": "Descripción", @@ -343,7 +344,10 @@ "DELETE_REMOTE_IMAGES":"Delete remote images when locally deleted", "REPLICATE_IMMEDIATE":"Replicate existing images immediately", "NEW": "New", - "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers." + "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.", + "DELETED_LABEL_INFO": "Deleted label(s) '{{param}}' referenced in the filter, click 'SAVE' to update the filter to enable this rule.", + "ACKNOWLEDGE": "Acknowledge", + "RULE_DISABLED": "This rule has been disabled because a label used in its filter has been deleted. \n Edit the rule and update its filter to enable it." }, "DESTINATION": { "NEW_ENDPOINT": "Nuevo Endpoint", diff --git a/src/ui_ng/src/i18n/lang/fr-fr-lang.json b/src/ui_ng/src/i18n/lang/fr-fr-lang.json index f64434966..118e1f87f 100644 --- a/src/ui_ng/src/i18n/lang/fr-fr-lang.json +++ b/src/ui_ng/src/i18n/lang/fr-fr-lang.json @@ -250,6 +250,7 @@ "TEST_CONNECTION_SUCCESS": "Connexion testée avec succès.", "TEST_CONNECTION_FAILURE": "Echec du ping du point final.", "NAME": "Nom", + "STATUS": "Status", "PROJECT": "Projet", "NAME_IS_REQUIRED": "Le nom est obligatoire.", "DESCRIPTION": "Description", @@ -321,7 +322,10 @@ "DELETE_REMOTE_IMAGES":"Delete remote images when locally deleted", "REPLICATE_IMMEDIATE":"Replicate existing images immediately", "NEW": "New", - "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers." + "NAME_TOOLTIP": "replication rule name should be at least 2 characters long with lower case characters, numbers and ._- and must be start with characters or numbers.", + "DELETED_LABEL_INFO": "Deleted label(s) '{{param}}' referenced in the filter, click 'SAVE' to update the filter to enable this rule.", + "ACKNOWLEDGE": "Acknowledge", + "RULE_DISABLED": "This rule has been disabled because a label used in its filter has been deleted. \n Edit the rule and update its filter to enable it." }, "DESTINATION": { "NEW_ENDPOINT": "Nouveau Point Final", diff --git a/src/ui_ng/src/i18n/lang/zh-cn-lang.json b/src/ui_ng/src/i18n/lang/zh-cn-lang.json index b764f98b6..858efa2db 100644 --- a/src/ui_ng/src/i18n/lang/zh-cn-lang.json +++ b/src/ui_ng/src/i18n/lang/zh-cn-lang.json @@ -271,6 +271,7 @@ "TEST_CONNECTION_SUCCESS": "测试连接成功。", "TEST_CONNECTION_FAILURE": "测试连接失败。", "NAME": "名称", + "STATUS": "状态", "PROJECT": "项目", "NAME_IS_REQUIRED": "名称为必填项。", "DESCRIPTION": "描述", @@ -343,7 +344,10 @@ "DELETE_REMOTE_IMAGES":"删除本地镜像时同时也删除远程的镜像。", "REPLICATE_IMMEDIATE":"立即复制现有的镜像。", "NEW": "新增", - "NAME_TOOLTIP": "项目名称由小写字符、数字和._-组成且至少2个字符并以字符或者数字开头。" + "NAME_TOOLTIP": "项目名称由小写字符、数字和._-组成且至少2个字符并以字符或者数字开头。", + "DELETED_LABEL_INFO": "过滤项有被删除的标签 {{param}} , 点击保存按钮更新过滤项使规则可用。", + "ACKNOWLEDGE": "确认", + "RULE_DISABLED": "这个规则因为过滤选项中的标签被删除已经不能用了，更新过滤项以便重新启用规则。" }, "DESTINATION": { "NEW_ENDPOINT": "新建目标",