From d2517e06a9c07f1f5fa79a7a9a8b308bbd6eaf77 Mon Sep 17 00:00:00 2001 From: AllForNothing Date: Wed, 15 Mar 2023 16:59:37 +0800 Subject: [PATCH] Make label filter editable for replication rule 1. Fixes #15825 2. Now, you can input labels or select them from the candidates Signed-off-by: AllForNothing --- .../create-edit-rule.component.html | 86 ++++--------- .../create-edit-rule.component.scss | 18 ++- .../create-edit-rule.component.ts | 117 ++++++++---------- 3 files changed, 92 insertions(+), 129 deletions(-) diff --git a/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.html b/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.html index 16898fedc54b..572e70369601 100644 --- a/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.html +++ b/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.html @@ -272,69 +272,25 @@

{{ headerTitle | translate }}

+
- -
-
- - - - ยทยทยท -
- -
+ class="clr-input-wrapper position-relative width-tag-label"> + + + + {{ headerTitle | translate }} *ngFor=" let value of supportedFilterLabels " - (click)="stickLabel(value, i)"> + (click)=" + stickLabel(value.name) + "> diff --git a/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.scss b/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.scss index 69b1572c33c4..098e2f337e7c 100644 --- a/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.scss +++ b/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.scss @@ -272,7 +272,7 @@ clr-modal { .right-align { min-width: 204px; overflow-y: auto; - transform: translateX(-4.3rem) translateY(1.25rem)!important; + transform: translateX(-9rem) translateY(1.25rem)!important; } .dropdown-item { @@ -327,3 +327,19 @@ clr-modal { .bandwidth { margin-top: 0.25rem; } + +.down { + height: 25px; + width: 25px; + right: 0.2rem; + color: rgb(164 164 164) !important; + cursor: pointer; +} +.dropdown { + left: -1.2rem; + position: relative !important; +} + +.label-input { + padding-right: 1.2rem; +} diff --git a/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.ts b/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.ts index 8516cd0c92e8..26611fb282a9 100644 --- a/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.ts +++ b/src/portal/src/app/base/left-side-nav/replication/replication/create-edit-rule/create-edit-rule.component.ts @@ -95,7 +95,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { supportedFilterLabels: { name: string; color: string; - select: boolean; scope: string; }[] = []; @@ -118,6 +117,8 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { selectedUnit: string = BandwidthUnit.KB; copySpeedUnit: string = BandwidthUnit.KB; showChunkOption: boolean = false; + stringForLabelFilter: string = ''; + copyStringForLabelFilter: string = ''; constructor( private fb: UntypedFormBuilder, private repService: ReplicationService, @@ -365,9 +366,23 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { }); this.isPushMode = true; this.selectedUnit = BandwidthUnit.KB; + this.stringForLabelFilter = ''; } updateRuleFormAndCopyUpdateForm(rule: ReplicationPolicy): void { + if (rule?.filters?.length) { + // set stringForLabelFilter + this.stringForLabelFilter = ''; + this.copyStringForLabelFilter = ''; + rule.filters.forEach(item => { + if (item.type === FilterType.LABEL) { + this.stringForLabelFilter = (item.value as string[]).join( + ',' + ); + this.copyStringForLabelFilter = this.stringForLabelFilter; + } + }); + } this.isPushMode = rule.dest_registry.id !== 0; this.checkChunkOption(rule.dest_registry.id || rule.src_registry.id); setTimeout(() => { @@ -482,6 +497,10 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { // speed unit has been changed return true; } + if (this.copyStringForLabelFilter !== this.stringForLabelFilter) { + // label filter has been changed + return true; + } return !isEmptyObject(this.hasChanges()); } @@ -511,6 +530,18 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { copyRuleForm.dest_registry = null; } let filters: any = copyRuleForm.filters; + + // set label filter + if (this.stringForLabelFilter) { + // set stringForLabelFilter + copyRuleForm.filters.forEach(item => { + if (item.type === FilterType.LABEL) { + item.value = this.stringForLabelFilter + .split(',') + .filter(item => item); + } + }); + } // remove the filters which user not set. for (let i = filters.length - 1; i >= 0; i--) { if ( @@ -575,30 +606,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.noEndpointInfo = 'REPLICATION.NO_ENDPOINT_INFO'; } if (rule) { - if ( - this.supportedFilterLabels && - this.supportedFilterLabels.length - ) { - this.supportedFilterLabels.forEach((label, index) => { - if (rule.filters && rule.filters.length) { - rule.filters.forEach(f => { - if ( - f.type === FilterType.LABEL && - f.value && - (f.value as any).length - ) { - (f.value as any).forEach(name => { - if (label.name === name) { - this.supportedFilterLabels[ - index - ].select = true; - } - }); - } - }); - } - }); - } this.onGoing = true; this.policyId = +rule.id; this.headerTitle = 'REPLICATION.EDIT_POLICY_TITLE'; @@ -634,14 +641,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { adapter => { this.setFilterAndTrigger(adapter); this.copyUpdateForm = clone(this.ruleForm.value); - if ( - this.supportedFilterLabels && - this.supportedFilterLabels.length - ) { - this.supportedFilterLabels.forEach((label, index) => { - label.select = false; - }); - } }, (error: any) => { this.inlineAlert.showInlineError(error); @@ -746,24 +745,20 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { } return false; } - stickLabel(value, index) { - value.select = !value.select; - let filters = this.ruleForm.get('filters') as UntypedFormArray; - let fromIndex = filters.controls[index] as UntypedFormGroup; - let labelValue = this.supportedFilterLabels.reduce( - (cumulatedSelectedArrs, currentValue) => { - if (currentValue.select) { - if (!cumulatedSelectedArrs.length) { - return [currentValue.name]; - } - return [...cumulatedSelectedArrs, currentValue.name]; - } - return cumulatedSelectedArrs; - }, - [] - ); - - fromIndex.setControl('value', this.fb.array(labelValue)); + stickLabel(name: string) { + if (this.isSelect(name)) { + let arr: string[] = this.stringForLabelFilter.split(','); + arr = arr.filter(item => { + return item !== name; + }); + this.stringForLabelFilter = arr.join(','); + } else { + if (this.stringForLabelFilter) { + this.stringForLabelFilter += `,${name}`; + } else { + this.stringForLabelFilter += `${name}`; + } + } } // set prefix '0 ', so user can not set item of 'seconds' inputInvalid(e: any) { @@ -820,7 +815,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { this.supportedFilterLabels.push({ name: data.name, color: data.color ? data.color : '#FFFFFF', - select: false, scope: 'g', }); }); @@ -849,7 +843,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { color: data.color ? data.color : '#FFFFFF', - select: false, scope: 'g', }); }); @@ -880,17 +873,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { return realSpeed ? realSpeed : -1; } } - getLabel(labelName: string): Label { - if (this.supportedFilterLabels?.length) { - let label: Label; - this.supportedFilterLabels.forEach(item => { - if (item.name === labelName) { - label = item; - } - }); - return label; - } - } checkChunkOption(id: number, info?: RegistryInfo) { this.showChunkOption = false; this.ruleForm.get('copy_by_chunk').reset(false); @@ -906,4 +888,11 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy { } } } + + isSelect(v: string) { + if (v && this.stringForLabelFilter) { + return this.stringForLabelFilter.indexOf(v) !== -1; + } + return false; + } }