Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-11-20 09:15:19 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #7404 from jwangyangls/replication_C

Browse Source 
In add or edit replication page ,disable the mode of pull and push when editing the replication and delete src_namespaces and delete useless code and add a validate content that when I choose scheduled, the cron field is mandatory.
This commit is contained in:
Wenkai Yin 2019-04-17 19:11:46 +08:00 committed by GitHub
commit eb00c9cb70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 91 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/portal/lib/src/create-edit-rule/create-edit-rule.component.html
View File

@ -22,9 +22,9 @@
<div class="form-group form-group-override">
<label class="form-group-label-override">{{'REPLICATION.REPLI_MODE' | translate}}</label>
<div class="radio" style="display:inherit;">
<input type="radio" id="push_base" name="replicationMode" [value]=true [(ngModel)]="isPushMode" (change)="modeChange()" [ngModelOptions]="{standalone: true}">
<input class="mode-base" type="radio" id="push_base" name="replicationMode" [value]=true [disabled]="!(policyId<0)" [(ngModel)]="isPushMode" (change)="modeChange()" [ngModelOptions]="{standalone: true}">
<label for="push_base">Push-based</label>
<input type="radio" id="pull_base" name="replicationMode" [value]=false [(ngModel)]="isPushMode" [ngModelOptions]="{standalone: true}">
<input class="mode-base" type="radio" id="pull_base" name="replicationMode" [value]=false [disabled]="!(policyId<0)" [(ngModel)]="isPushMode" [ngModelOptions]="{standalone: true}">
<label for="pull_base">Pull-based</label>
</div>
</div>
@ -33,7 +33,7 @@
<label class="form-group-label-override required">{{'REPLICATION.SOURCE_REGISTRY' | translate}}</label>
<div class="form-select">
<div class="select endpointSelect pull-left">
<select id="src_registry_id" (change)="sourceChange($event)" formControlName="src_registry" [compareWith]="equals">
<select id="src_registry_id" (change)="sourceChange($event)" formControlName="src_registry" [compareWith]="equals">
<option *ngFor="let source of sourceList" [ngValue]="source">{{source.name}}-{{source.url}}</option>
</select>
</div>
@ -41,22 +41,6 @@
<label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
<span class="alertLabel goLink" *ngIf="noEndpointInfo.length != 0" (click)="goRegistry()">{{'REPLICATION.ENDPOINTS' | translate}}</span>
</div>
<!--source namespace -->
<div class="form-group form-group-override">
<label class="form-group-label-override required">{{'REPLICATION.SOURCE_NAMESPACES' | translate}}</label>
<div formArrayName="src_namespaces">
<div class="width-315" *ngFor="let src_namespace of src_namespaces.controls; let i=index">
<div class="endpointSelect pull-left">
<label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(src_namespace.touched && src_namespace.invalid)'>
<input type="text" [formControlName]="i" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth" required maxlength="255">
<span class="tooltip-content">{{'REPLICATION.NAMESPACE_TOOLTIP' | translate}}</span>
</label>
</div>
<clr-icon shape="times-circle" class="is-solid" (click)="deleteNamespace(i)"></clr-icon>
</div>
</div>
<clr-icon id="addSourceNamespace" shape="plus-circle" class="is-solid mr-t-10" (click)="addNewNamespace()"></clr-icon>
</div>
<!--images/Filter-->
<div class="form-group form-group-override">
<label class="form-group-label-override">{{'REPLICATION.SOURCE_RESOURCE_FILTER' | translate}}</label>
@ -81,13 +65,13 @@
</div>
</div>
<!--destination registry-->
<div *ngIf="isPushMode" class="form-group form-group-override">
<div *ngIf="isPushMode" class="form-group form-group-override">
<label class="form-group-label-override required">{{'REPLICATION.DEST_REGISTRY' | translate}}</label>
<div class="form-select">
<div class="select endpointSelect pull-left">
<select id="dest_registry" (change)="targetChange($event)" formControlName="dest_registry" [compareWith]="equals">
<option *ngFor="let target of targetList" [ngValue]="target">{{target.name}}-{{target.url}}</option>
</select>
<select id="dest_registry" (change)="targetChange($event)" formControlName="dest_registry" [compareWith]="equals">
<option *ngFor="let target of targetList" [ngValue]="target">{{target.name}}-{{target.url}}</option>
</select>
</div>
</div>
<label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
@ -106,19 +90,20 @@
<!--Trigger-->
<div class="form-group form-group-override">
<label class="form-group-label-override">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
<label class="form-group-label-override required">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
<div formGroupName="trigger">
<!--on trigger-->
<div class="select width-115">
<select id="ruleTrigger" formControlName="type" (change)="selectTrigger($event)">
<select id="ruleTrigger" formControlName="type">
<option *ngFor="let trigger of supportedTriggers" [value]="trigger">{{'REPLICATION.' + trigger.toUpperCase() | translate }}</option>
</select>
</div>
<!--on push-->
<div formGroupName="trigger_settings">
<div [hidden]="isNotSchedule()">
<label>Cron String</label>
<label for="targetCron" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-right">
<div [hidden]="isNotSchedule()" class="form-group form-cron">
<label class="required">Cron String</label>
<label for="targetCron" aria-haspopup="true" role="tooltip"class="tooltip tooltip-validation tooltip-md tooltip-top-right"
[class.invalid]="!isNotSchedule() && cronTouched || !cronInputValid(ruleForm.value.trigger?.trigger_settings?.cron || '')" >
<input type="text" name=targetCron id="targetCron" required class="form-control cron-input" formControlName="cron">
<span class="tooltip-content">
{{'TOOLTIP.CRON_REQUIRED' | translate }}

8
src/portal/lib/src/create-edit-rule/create-edit-rule.component.scss
View File

@ -241,4 +241,10 @@ clr-modal {
.inline-block {
display: inline-block;
}
}
.form-cron {
padding-left:3.8rem;
}
.mode-base {
z-index: -1;
}

160
src/portal/lib/src/create-edit-rule/create-edit-rule.component.ts
View File

@ -31,9 +31,8 @@ import { ReplicationService } from "../service/replication.service";
import { ErrorHandler } from "../error-handler/error-handler";
import { TranslateService } from "@ngx-translate/core";
import { EndpointService } from "../service/endpoint.service";
import { cronRegex } from "../utils";
const ONE_HOUR_SECONDS = 3600;
const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS;
@Component({
selector: "hbr-create-edit-rule",
@ -41,16 +40,11 @@ const ONE_DAY_SECONDS: number = 24 * ONE_HOUR_SECONDS;
styleUrls: ["./create-edit-rule.component.scss"]
})
export class CreateEditRuleComponent implements OnInit, OnDestroy {
_localTime: Date = new Date();
sourceList: Endpoint[] = [];
targetList: Endpoint[] = [];
isFilterHide = false;
weeklySchedule: boolean;
noEndpointInfo = "";
isPushMode = true;
noSelectedEndpoint = true;
filterCount = 0;
alertClosed = false;
TRIGGER_TYPES = {
MANUAL: "manual",
SCHEDULED: "scheduled",
@ -61,12 +55,10 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
headerTitle = "REPLICATION.ADD_POLICY";
createEditRuleOpened: boolean;
filterListData: { [key: string]: any }[] = [];
inProgress = false;
inNameChecking = false;
isRuleNameValid = true;
nameChecker: Subject<string> = new Subject<string>();
firstClick = 0;
policyId: number;
confirmSub: Subscription;
ruleForm: FormGroup;
@ -139,13 +131,11 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
equals(c1: any, c2: any): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
modeChange(): void {
this.setFilter([]);
this.initRegistryInfo(0);
}
sourceChange($event): void {
this.noSelectedEndpoint = false;
let selectId = this.ruleForm.get('src_registry').value;
@ -161,18 +151,20 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
this.nameChecker.unsubscribe();
}
}
get src_namespaces(): FormArray { return this.ruleForm.get('src_namespaces') as FormArray; }
get isValid() {
let controlName = this.ruleForm.controls["name"].invalid;
let controlSrcNamespace = this.ruleForm.controls["src_namespaces"].invalid;
return !(
controlName ||
controlSrcNamespace ||
let controlName = !!this.ruleForm.controls["name"].value;
let sourceRegistry = !!this.ruleForm.controls["src_registry"].value;
let destRegistry = !!this.ruleForm.controls["dest_registry"].value;
let triggerMode = !!this.ruleForm.controls["trigger"].value.type;
let cron = !!this.ruleForm.value.trigger.trigger_settings.cron;
return !(!controlName ||
!triggerMode ||
!this.isRuleNameValid ||
this.noSelectedEndpoint ||
this.inProgress
);
(!this.isPushMode && !sourceRegistry ||
this.isPushMode && !destRegistry)
|| !(!this.isNotSchedule() && cron && this.cronInputValid(this.ruleForm.value.trigger.trigger_settings.cron || '')
|| this.isNotSchedule()));
}
createForm() {
@ -180,7 +172,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
name: ["", Validators.required],
description: "",
src_registry: new FormControl(),
src_namespaces: new FormArray([new FormControl('')], Validators.required),
dest_registry: new FormControl(),
dest_namespace: "",
trigger: this.fb.group({
@ -196,9 +187,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
});
}
selectTrigger($event: any): void {
}
isNotSchedule(): boolean {
return this.ruleForm.get("trigger").get("type").value !== this.TRIGGER_TYPES.SCHEDULED;
@ -225,25 +213,17 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
this.isPushMode = true;
}
initForm(): void {
this.formReset();
this.setFilter([]);
this.initRegistryInfo(0);
this.copyUpdateForm = clone(this.ruleForm.value);
}
updateForm(rule: ReplicationRule): void {
updateRuleFormAndCopyUpdateForm(rule: ReplicationRule): void {
if (rule.dest_registry.id === 0) {
this.isPushMode = false;
} else {
this.isPushMode = true;
}
setTimeout(() => {
this.ruleForm.reset({
name: rule.name,
description: rule.description,
src_namespaces: rule.src_namespaces,
dest_namespace: rule.dest_namespace,
src_registry: rule.src_registry,
dest_registry: rule.dest_registry,
@ -252,26 +232,15 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
enabled: rule.enabled,
override: rule.override
});
// reset the filter list.
let filters = [];
for (let i = 0; i < this.supportedFilters.length; i++) {
let findTag: boolean = false;
if (rule.filters) {
rule.filters.forEach((ruleItem, j) => {
if (this.supportedFilters[i].type === ruleItem.type) {
filters.push(ruleItem);
findTag = true;
}
});
}
if (!findTag) {
filters.push({ type: this.supportedFilters[i].type, value: "" });
}
}
let filtersArray = this.getFilterArray(rule);
this.noSelectedEndpoint = false;
this.setFilter(filters);
this.setFilter(filtersArray);
this.copyUpdateForm = clone(this.ruleForm.value);
// keep trigger same value
this.copyUpdateForm.trigger = clone(rule.trigger);
this.copyUpdateForm.filters = this.copyUpdateForm.filters === null ? [] : this.copyUpdateForm.filters;
// set filter value is [] if callback filter value is null.
}, 100);
// end of reset the filter list.
}
@ -302,28 +271,6 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
}
}
focusClear($event: any): void {
if (this.policyId < 0 && this.firstClick === 0) {
if ($event && $event.target && $event.target["value"]) {
$event.target["value"] = "";
}
this.firstClick++;
}
}
addNewNamespace(): void {
this.src_namespaces.push(new FormControl());
}
deleteNamespace(index: number): void {
this.src_namespaces.removeAt(index);
}
// Replication Schedule select value exchange
selectSchedule($event: any): void {
}
checkRuleName(): void {
let ruleName: string = this.ruleForm.controls["name"].value;
if (ruleName) {
@ -338,6 +285,9 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
}
onSubmit() {
if (this.ruleForm.value.trigger.type !== 'scheduled') {
this.ruleForm.get("trigger").get("trigger_settings").get('cron').setValue('');
}
// add new Replication rule
this.inProgress = true;
let copyRuleForm: ReplicationRule = this.ruleForm.value;
@ -363,6 +313,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
.subscribe(res => this.errorHandler.info(res));
this.inProgress = false;
this.reload.emit(true);
this.createForm();
this.close();
}, (error: any) => {
this.inProgress = false;
@ -384,19 +335,13 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
});
}
}
openCreateEditRule(ruleId?: number | string): void {
this.formReset();
this.copyUpdateForm = clone(this.ruleForm.value);
this.inlineAlert.close();
this.filterCount = 0;
this.isFilterHide = false;
this.filterListData = [];
this.firstClick = 0;
this.noSelectedEndpoint = true;
this.isRuleNameValid = true;
this.weeklySchedule = false;
this.policyId = -1;
this.createEditRuleOpened = true;
this.noEndpointInfo = "";
@ -412,21 +357,19 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
this.repService.getRegistryInfo(srcRegistryId)
.subscribe(adapter => {
this.setFilterAndTrigger(adapter);
this.copyUpdateForm = clone(ruleInfo);
// keep trigger same value
this.copyUpdateForm.trigger = clone(ruleInfo.trigger);
this.copyUpdateForm.filters = this.copyUpdateForm.filters === null ? [] : this.copyUpdateForm.filters;
// set filter value is [] if callback filter value is null.
this.updateForm(ruleInfo);
}, (error: any) => {
this.inlineAlert.showInlineError(error);
});
this.updateRuleFormAndCopyUpdateForm(ruleInfo);
}, (error: any) => {
this.inlineAlert.showInlineError(error);
});
}, (error: any) => {
this.inlineAlert.showInlineError(error);
});
} else {
let registryObs = this.repService.getRegistryInfo(0);
registryObs.subscribe(adapter => { this.setFilterAndTrigger(adapter); });
registryObs.subscribe(adapter => {
this.setFilterAndTrigger(adapter);
this.copyUpdateForm = clone(this.ruleForm.value);
});
this.headerTitle = "REPLICATION.ADD_POLICY";
this.copyUpdateForm = clone(this.ruleForm.value);
}
@ -449,6 +392,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
confirmCancel(confirmed: boolean) {
this.inlineAlert.close();
this.createForm();
this.close();
}
@ -458,6 +402,7 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
message: "ALERT.FORM_CHANGE_CONFIRMATION"
});
} else {
this.createForm();
this.close();
}
}
@ -479,4 +424,41 @@ export class CreateEditRuleComponent implements OnInit, OnDestroy {
}
return false;
}
getFilterArray(rule): Array<any> {
let filtersArray = [];
for (let i = 0; i < this.supportedFilters.length; i++) {
let findTag: boolean = false;
if (rule.filters) {
rule.filters.forEach((ruleItem) => {
if (this.supportedFilters[i].type === ruleItem.type) {
filtersArray.push(ruleItem);
findTag = true;
}
});
}
if (!findTag) {
filtersArray.push({ type: this.supportedFilters[i].type, value: "" });
}
}
return filtersArray;
}
cronInputValid(cronValue): boolean {
return cronRegex(cronValue);
}
get cronTouched(): boolean {
let triggerControl = this.ruleForm.controls.trigger as FormGroup;
if (!triggerControl) {
return false;
}
let trigger_settingsControls = triggerControl.controls.trigger_settings as FormGroup;
if (!trigger_settingsControls) {
return false;
}
return trigger_settingsControls.controls.cron.touched && trigger_settingsControls.controls.cron.dirty
&& !trigger_settingsControls.controls.cron.value;
}
}

1
src/portal/lib/src/service/replication.service.ts
View File

@ -232,7 +232,6 @@ export class ReplicationDefaultService extends ReplicationService {
rule != null &&
rule.name !== undefined &&
rule.name.trim() !== "" &&
rule.src_namespaces && rule.src_namespaces.length > 0 &&
(!!rule.dest_registry || !!rule.src_registry)
);
}