mirror of https://github.com/goharbor/harbor.git
154 lines
9.9 KiB
HTML
154 lines
9.9 KiB
HTML
<clr-modal [(clrModalOpen)]="createEditRuleOpened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
|
|
<h3 class="modal-title">{{headerTitle | translate}}</h3>
|
|
<hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
|
|
<div class="modal-body" style="max-height: 85vh;">
|
|
<clr-alert [hidden]='!deletedLabelCount' [clrAlertType]="'alert-warning'" [clrAlertSizeSmall]="true" [clrAlertClosable]="false"
|
|
[(clrAlertClosed)]="alertClosed">
|
|
<div class="alert-item">
|
|
<span class="alert-text">{{deletedLabelInfo}}</span>
|
|
<div class="alert-actions">
|
|
<a class="alert-action" (click)=" alertClosed = true">{{'REPLICATION.ACKNOWLEDGE' | translate}}</a>
|
|
</div>
|
|
</div>
|
|
</clr-alert>
|
|
<form [formGroup]="ruleForm" novalidate>
|
|
<section class="form-block">
|
|
<div class="form-group form-group-override">
|
|
<label class="form-group-label-override required">{{'REPLICATION.NAME' | translate}}</label>
|
|
<label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || !isRuleNameValid'>
|
|
<input type="text" id="ruleName" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth" required maxlength="255" formControlName="name"
|
|
#ruleName (keyup)='checkRuleName()' autocomplete="off">
|
|
<span class="tooltip-content">{{ruleNameTooltip | translate}}</span>
|
|
</label>
|
|
<span class="spinner spinner-inline spinner-pos" [hidden]="!inNameChecking"></span>
|
|
</div>
|
|
<!--Description-->
|
|
<div class="form-group form-group-override">
|
|
<label class="form-group-label-override">{{'REPLICATION.DESCRIPTION' | translate}}</label>
|
|
<textarea type="text" id="ruleDescription" class="inputWidth" row=3 formControlName="description"></textarea>
|
|
</div>
|
|
<!--Projects-->
|
|
<div class="form-group form-group-override">
|
|
<label class="form-group-label-override required">{{'REPLICATION.SOURCE_PROJECT' | translate}}</label>
|
|
<div formArrayName="projects">
|
|
<div class="projectInput inputWidth" *ngFor="let project of projects.controls; let i= index" [formGroupName]="i" (mouseleave)="leaveInput()">
|
|
<label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='noProjectInfo'>
|
|
<input *ngIf="!projectId" formControlName="name" type="text" class="inputWidth" value="name" required pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
|
|
(keyup)='handleValidation()' (focus)="focusClear($event)" autocomplete="off">
|
|
<input *ngIf="projectId" formControlName="name" type="text" class="inputWidth" value="name" readonly>
|
|
<span class="tooltip-content">{{noProjectInfo | translate}}</span>
|
|
</label>
|
|
<div class="selectBox inputWidth" [style.display]="selectedProjectList.length ? 'block' : 'none'">
|
|
<ul>
|
|
<li *ngFor="let project of selectedProjectList" (click)="selectedProjectName(project?.name)">{{project?.name}}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--images/Filter-->
|
|
<div class="form-group form-group-override">
|
|
<label class="form-group-label-override">{{'REPLICATION.SOURCE_IMAGES_FILTER' | translate}}</label>
|
|
<div formArrayName="filters">
|
|
<div class="filterSelect" *ngFor="let filter of filters.controls; let i=index">
|
|
<div [formGroupName]="i">
|
|
<div class="select floatSetPar">
|
|
<select formControlName="kind" #selectedValue (change)="filterChange($event, selectedValue.value)" id="{{i}}" name="{{filterListData[i]?.name}}">
|
|
<option *ngFor="let opt of filterListData[i]?.options;" value="{{opt}}">{{opt}}</option>
|
|
</select>
|
|
</div>
|
|
<label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(ruleForm.controls.filters.controls[i].controls.value.dirty || ruleForm.controls.filters.controls[i].controls.value.touched) && ruleForm.controls.filters.controls[i].controls.value.invalid'>
|
|
<input type="text" #filterValue required size="14" formControlName="value" [attr.disabled]="(filterListData[i]?.name=='label') ?'' : null">
|
|
<span class="tooltip-content">{{'TOOLTIP.EMPTY' | translate}}</span>
|
|
</label>
|
|
<div class="arrowSet" [hidden]="!(filterListData[i]?.name=='label')" (click)="openLabelList(selectedValue.value, i, $event)">
|
|
<clr-icon shape="angle"></clr-icon>
|
|
</div>
|
|
<clr-icon shape="warning-standard" class="is-solid is-warning" size="14" style="margin-left: -15px;" [hidden]="!deletedLabelCount || !(filterListData[i]?.name=='label')"></clr-icon>
|
|
<clr-icon shape="times-circle" class="is-solid" (click)="deleteFilter(i)"></clr-icon>
|
|
<div *ngIf="!withAdmiral">
|
|
<hbr-filter-label [projectId]="ruleForm.controls.projects.controls[0]?.value.project_id" [selectedLabelInfo]="filterLabelInfo"
|
|
[isOpen]="filterListData[i].isOpen" (selectedLabels)="selectedLabelList($event, i)" (closePanelEvent)="filterListData[i].isOpen = false"></hbr-filter-label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<clr-icon shape="plus-circle" class="is-solid" [hidden]="isFilterHide" (click)="addNewFilter()" style="margin-top: 11px;"></clr-icon>
|
|
|
|
</div>
|
|
<!--Targets-->
|
|
<div class="form-group form-group-override">
|
|
<label class="form-group-label-override required">{{'DESTINATION.ENDPOINT' | translate}}</label>
|
|
<div formArrayName="targets">
|
|
<div class="select endpointSelect pull-left" *ngFor="let target of targets.controls; let i= index" [formGroupName]="i">
|
|
<select id="ruleTarget" (change)="targetChange($event)" formControlName="id">
|
|
<option *ngFor="let target of targetList" value="{{target.id}}">{{target.name}}-{{target.endpoint}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
|
|
<!--Trigger-->
|
|
<div class="form-group form-group-override">
|
|
<label class="form-group-label-override">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
|
|
<div formGroupName="trigger">
|
|
<!--on trigger-->
|
|
<div class="select floatSetPar">
|
|
<select id="ruleTrigger" formControlName="kind" (change)="selectTrigger($event)">
|
|
<option value="Manual">{{'REPLICATION.MANUAL' | translate}}</option>
|
|
<option value="Immediate">{{'REPLICATION.IMMEDIATE' | translate}}</option>
|
|
<option value="Scheduled">{{'REPLICATION.SCHEDULE' | translate}}</option>
|
|
</select>
|
|
</div>
|
|
<!--on push-->
|
|
<div formGroupName="schedule_param">
|
|
<div class="select floatSet" [hidden]="!isScheduleOpt">
|
|
<select name="scheduleType" formControlName="type" (change)="selectSchedule($event)">
|
|
<option value="Daily">{{'REPLICATION.DAILY' | translate}}</option>
|
|
<option value="Weekly">{{'REPLICATION.WEEKLY' | translate}}</option>
|
|
</select>
|
|
</div>
|
|
<!--weekly-->
|
|
<span [hidden]="!weeklySchedule || !isScheduleOpt">on </span>
|
|
<div [hidden]="!weeklySchedule || !isScheduleOpt" class="select floatSet" style="width:104px">
|
|
<select name="scheduleDay" formControlName="weekday">
|
|
<option value="1">{{'WEEKLY.MONDAY' | translate}}</option>
|
|
<option value="2">{{'WEEKLY.TUESDAY' | translate}}</option>
|
|
<option value="3">{{'WEEKLY.WEDNESDAY' | translate}}</option>
|
|
<option value="4">{{'WEEKLY.THURSDAY' | translate}}</option>
|
|
<option value="5">{{'WEEKLY.FRIDAY' | translate}}</option>
|
|
<option value="6">{{'WEEKLY.SATURDAY' | translate}}</option>
|
|
<option value="7">{{'WEEKLY.SUNDAY' | translate}}</option>
|
|
</select>
|
|
</div>
|
|
<!--daily/time-->
|
|
<span [hidden]="!isScheduleOpt">at </span>
|
|
<input [hidden]="!isScheduleOpt" type="time" formControlName="offtime" required value="08:00" />
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;" [hidden]="!isImmediate">
|
|
<clr-checkbox [clrChecked]="false" id="ruleDeletion" formControlName="replicate_deletion">
|
|
{{'REPLICATION.DELETE_REMOTE_IMAGES' | translate}}
|
|
</clr-checkbox>
|
|
</div>
|
|
<div style="width: 100%;">
|
|
<clr-checkbox [clrChecked]="true" id="ruleExit" formControlName="replicate_existing_image_now">
|
|
{{'REPLICATION.REPLICATE_IMMEDIATE' | translate}}
|
|
</clr-checkbox>
|
|
</div>
|
|
</div>
|
|
<div style="display:block;text-align:center">
|
|
<span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
|
|
</div>
|
|
</section>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="ruleBtnCancel" class="btn btn-outline" [disabled]="this.inProgress" (click)="onCancel()">{{ 'BUTTON.CANCEL' | translate }}</button>
|
|
<button type="submit" id="ruleBtnOk" class="btn btn-primary" (click)="onSubmit()" [disabled]="!ruleForm.valid || !isValid || !hasFormChange()">{{ 'BUTTON.SAVE' | translate }}</button>
|
|
</div>
|
|
</clr-modal> |