Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(ui): template apply form #6750

Merged
merged 1 commit into from
Dec 21, 2023
Merged

fix(ui): template apply form #6750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions ui/src/app/shared/workflow-template/apply-modal/workflow-template.apply-modal.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ import { calculateWorkflowTemplateDiff } from 'app/shared/diff/diff';
import { Item } from 'app/shared/diff/list/diff.list.component';
import { forkJoin } from 'rxjs';
import { finalize } from 'rxjs/operators';
import {NZ_MODAL_DATA, NzModalRef} from 'ng-zorro-antd/modal';
import { ToastService } from 'app/shared/toast/ToastService';
import { NZ_MODAL_DATA, NzModalRef } from 'ng-zorro-antd/modal';

interface IModalData {
workflowTemplateIn: WorkflowTemplate;
Expand Down Expand Up @@ -61,8 +60,7 @@ export class WorkflowTemplateApplyModalComponent implements OnInit, OnChanges {
private _projectService: ProjectService,
private _workflowService: WorkflowService,
private _templateService: WorkflowTemplateService,
private _cd: ChangeDetectorRef,
private _toast: ToastService
private _cd: ChangeDetectorRef
) { }

ngOnChanges() {
Expand Down Expand Up @@ -118,12 +116,11 @@ export class WorkflowTemplateApplyModalComponent implements OnInit, OnChanges {
}

onApply() {
this._workflowService.getWorkflow(this.workflowTemplateInstance.project.key,
this._workflowService.getWorkflow(this.workflowTemplateInstance.request.project_key,
this.workflowTemplateInstance.workflow_name).subscribe(w => {
this.workflowTemplateInstance = Object.assign({}, w.template_instance);
this._cd.markForCheck();
});

}

loadAudits() {
Expand Down
20 changes: 5 additions & 15 deletions ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { AutoUnsubscribe } from 'app/shared/decorator/autoUnsubscribe';
import { Column, ColumnType, Select } from 'app/shared/table/data-table.component';
import { interval, Observable, Subscription } from 'rxjs';
import { finalize } from 'rxjs/operators';
import {NZ_MODAL_DATA, NzModalRef} from 'ng-zorro-antd/modal';
import { NZ_MODAL_DATA, NzModalRef } from 'ng-zorro-antd/modal';

interface IModalData {
workflowTemplate: WorkflowTemplate;
Expand All @@ -50,7 +50,6 @@ export class WorkflowTemplateBulkModalComponent implements OnInit, OnDestroy {
currentStep = 0;
selectedInstanceKeys: Array<string> = new Array<string>();
selectedInstances: Array<WorkflowTemplateInstance>;
accordionOpenedIndex = 0;
parameters: { [s: number]: ParamData };
response: WorkflowTemplateBulk;
pollingStatusSub: Subscription;
Expand Down Expand Up @@ -94,16 +93,16 @@ export class WorkflowTemplateBulkModalComponent implements OnInit, OnDestroy {
name: 'Status',
class: 'rightAlign',
selector: (i: WorkflowTemplateBulkOperation) => ({
class: OperationStatusUtil.color(i.status),
value: OperationStatusUtil.translate(i.status)
})
class: OperationStatusUtil.color(i.status),
value: OperationStatusUtil.translate(i.status)
})
}
];

this.parameters = {};
}

ngOnDestroy(): void {} // Should be set to use @AutoUnsubscribe with AOT
ngOnDestroy(): void { } // Should be set to use @AutoUnsubscribe with AOT

ngOnInit(): void {
this.workflowTemplate = this.nzModalData.workflowTemplate;
Expand Down Expand Up @@ -192,15 +191,6 @@ export class WorkflowTemplateBulkModalComponent implements OnInit, OnDestroy {
this.moveToStep(2);
}

accordionOpen(e: any, index: number) {
if (this.accordionOpenedIndex === index) {
this.accordionOpenedIndex = -1; // close all accordion items
} else {
this.accordionOpenedIndex = index;
}
this._cd.markForCheck();
}

changeParam(instanceID: number, params: ParamData) {
this.parameters[instanceID] = params;
this.validateParam();
Expand Down
114 changes: 57 additions & 57 deletions ui/src/app/shared/workflow-template/bulk-modal/workflow-template.bulk-modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
<div class="content scrolling">
<nz-row>
<nz-col [nzSpan]="24">
<nz-steps [nzCurrent]="currentStep">
<nz-step nzTitle="Select instances"></nz-step>
<nz-step nzTitle="Fill parameters"></nz-step>
<nz-step nzTitle="Run"></nz-step>
</nz-steps>
</nz-col>
</nz-row>
<nz-row *ngIf="currentStep === 0">
<nz-col [nzSpan]="24">
<app-data-table [withSelect]="selectFunc" (selectChange)="selectChange($event)"
[withPagination]="10" [columns]="columnsInstances" [data]="instances"
[loading]="loadingInstances"></app-data-table>
</nz-col>
</nz-row>
<nz-row *ngIf="currentStep === 1">
<nz-col [nzSpan]="24">
<div *ngIf="withAsCodeWorkflow">
<nz-alert nzType="info" nzMessage="Some selected instances refer to ascode workflow. A pull request will be made on each workflow's repository. Please fill the branch and commit message to proceed."></nz-alert>
<app-ascode-save-form (paramChange)="onAsCodeParamChange($event)">
</app-ascode-save-form>
</div>
</nz-col>
<nz-col [nzSpan]="24">
<nz-collapse nzAccordion>
<nz-collapse-panel *ngFor="let instance of selectedInstances;let i = index" [nzActive]="accordionOpenedIndex === i" [nzHeader]="instance.request.workflow_name" (click)="accordionOpen($event, i)">
<app-workflow-template-param-form *ngIf="accordionOpenedIndex === i"
[project]="instance.project" [workflowTemplate]="workflowTemplate"
[workflowTemplateInstance]="instance"
[parameters]="parameters[instance.id] ? parameters[instance.id] : null"
(paramChange)="changeParam(instance.id, $event)">
<div class="content scrolling">
<nz-row>
<nz-col [nzSpan]="24">
<nz-steps [nzCurrent]="currentStep">
<nz-step nzTitle="Select instances"></nz-step>
<nz-step nzTitle="Fill parameters"></nz-step>
<nz-step nzTitle="Run"></nz-step>
</nz-steps>
</nz-col>
</nz-row>
<nz-row *ngIf="currentStep === 0">
<nz-col [nzSpan]="24">
<app-data-table [withSelect]="selectFunc" (selectChange)="selectChange($event)" [withPagination]="10"
[columns]="columnsInstances" [data]="instances" [loading]="loadingInstances"></app-data-table>
</nz-col>
</nz-row>
<nz-row *ngIf="currentStep === 1">
<nz-col [nzSpan]="24">
<div *ngIf="withAsCodeWorkflow">
<nz-alert nzType="info"
nzMessage="Some selected instances refer to ascode workflow. A pull request will be made on each workflow's repository. Please fill the branch and commit message to proceed."></nz-alert>
<app-ascode-save-form (paramChange)="onAsCodeParamChange($event)">
</app-ascode-save-form>
</div>
</nz-col>
<nz-col [nzSpan]="24">
<nz-collapse nzAccordion>
<nz-collapse-panel *ngFor="let instance of selectedInstances;let i = index"
[nzHeader]="instance.request.workflow_name">
<app-workflow-template-param-form [project]="instance.project" [workflowTemplate]="workflowTemplate"
[workflowTemplateInstance]="instance"
[parameters]="parameters[instance.id] ? parameters[instance.id] : null"
(paramChange)="changeParam(instance.id, $event)">
</app-workflow-template-param-form>
</nz-collapse-panel>
</nz-collapse>
</nz-col>
</nz-row>
<nz-row *ngIf="currentStep === 2">
<nz-col [nzSpan]="24">
<app-data-table *ngIf="response" [withPagination]="10" [columns]="columnsOperations"
[data]="response.operations"></app-data-table>
</nz-col>
</nz-row>
</div>
<div *nzModalFooter>
<ng-container *ngIf="currentStep === 0">
<button nz-button nzType="primary" [disabled]="selectedInstanceKeys.length === 0"
(click)="clickGoToParam()">Next</button>
</ng-container>
<ng-container *ngIf="currentStep === 1">
<button nz-button nzType="primary" (click)="clickGoToInstance()">Back</button>
<button nz-button nzType="primary" [disabled]="!validFields" (click)="clickRunBulk()">Run bulk update</button>
</ng-container>
<ng-container *ngIf="currentStep === 2">
<button nz-button nzType="primary" (click)="clickGoToInstanceReset()">Back</button>
<button nz-button (click)="clickClose()">Close</button>
</ng-container>
</div>
</nz-collapse>
</nz-col>
</nz-row>
<nz-row *ngIf="currentStep === 2">
<nz-col [nzSpan]="24">
<app-data-table *ngIf="response" [withPagination]="10" [columns]="columnsOperations"
[data]="response.operations"></app-data-table>
</nz-col>
</nz-row>
</div>
<div *nzModalFooter>
<ng-container *ngIf="currentStep === 0">
<button nz-button nzType="primary" [disabled]="selectedInstanceKeys.length === 0"
(click)="clickGoToParam()">Next</button>
</ng-container>
<ng-container *ngIf="currentStep === 1">
<button nz-button nzType="primary" (click)="clickGoToInstance()">Back</button>
<button nz-button nzType="primary" [disabled]="!validFields" (click)="clickRunBulk()">Run bulk update</button>
</ng-container>
<ng-container *ngIf="currentStep === 2">
<button nz-button nzType="primary" (click)="clickGoToInstanceReset()">Back</button>
<button nz-button (click)="clickClose()">Close</button>
</ng-container>
</div>
13 changes: 9 additions & 4 deletions ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {

ngOnInit(): void {
this.initProject();
this.changeParam();
this.emitParam();
}

initProject() {
Expand Down Expand Up @@ -124,7 +124,7 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {
let existingRepo = repoNames.find(n => n === selectedRepo);
if (existingRepo) {
this.parameterValues[parameterKey + '-repository'] = existingRepo;
this.changeParam();
this.emitParam();
}
}
}
Expand Down Expand Up @@ -175,7 +175,7 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {
}

if (this.workflowTemplate) {
this.changeParam();
this.emitParam();
}
}

Expand All @@ -194,7 +194,12 @@ export class WorkflowTemplateParamFormComponent implements OnInit, OnDestroy {
this._cd.markForCheck()
}

changeParam() {
changeParam(key: string, value: any): void {
this.parameterValues[key] = value;
this.emitParam();
}

emitParam(): void {
let parameters = new ParamData();

this.workflowTemplate.parameters.forEach(parameter => {
Expand Down
40 changes: 19 additions & 21 deletions ui/src/app/shared/workflow-template/param-form/workflow-template.param-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,48 +10,46 @@ <h3>Parameters</h3>
<nz-col [nzSpan]="12">
<div [ngSwitch]="parameter.type">
<input nz-input *ngSwitchDefault type="text" name="parameter-{{parameter.key}}"
[(ngModel)]="parameterValues[parameter.key]" (change)="changeParam()">
<label *ngSwitchCase="'boolean'" nz-checkbox name="parameter-{{parameter.key}}" [(ngModel)]="parameterValues[parameter.key]"
(ngModelChange)="changeParam()"></label>
[ngModel]="parameterValues[parameter.key]" (change)="changeParam(parameter.key, $event)">
<label *ngSwitchCase="'boolean'" nz-checkbox name="parameter-{{parameter.key}}"
[ngModel]="parameterValues[parameter.key]" (ngModelChange)="changeParam(parameter.key, $event)"></label>
<codemirror *ngSwitchCase="'json'" name="parameter-{{parameter.key}}"
[(ngModel)]="parameterValues[parameter.key]" [config]="codeMirrorConfig"
(change)="changeParam()" #codemirror>
[ngModel]="parameterValues[parameter.key]" [config]="codeMirrorConfig"
(change)="changeParam(parameter.key, $event)" #codemirror>
</codemirror>
<nz-select *ngSwitchCase="'repository'" name="parameter-{{parameter.key}}" nzShowSearch
nzPlaceHolder="{{'workflow_wizard_select_repo_man' | translate}}"
[(ngModel)]="parameterValues[parameter.key]" (ngModelChange)="fetchRepos(parameter.key, $event)">
nzPlaceHolder="{{'workflow_wizard_select_repo_man' | translate}}"
[ngModel]="parameterValues[parameter.key]" (ngModelChange)="fetchRepos(parameter.key, $event)">
<nz-option *ngFor="let vcs of vcsNames" [nzValue]="vcs" [nzLabel]="vcs"></nz-option>
</nz-select>
<nz-select *ngSwitchCase="'ssh-key'" name="parameter-{{parameter.key}}" nzShowSearch
nzPlaceHolder="{{'workflow_template_param_select_key' | translate}}"
(ngModelChange)="changeParam()"
[(ngModel)]="parameterValues[parameter.key]">
nzPlaceHolder="{{'workflow_template_param_select_key' | translate}}"
(ngModelChange)="changeParam(parameter.key, $event)" (ngModel]="parameterValues[parameter.key]">
<nz-option *ngFor="let key of sshKeys" [nzValue]="key" [nzLabel]="key"></nz-option>
</nz-select>
<nz-select *ngSwitchCase="'pgp-key'" name="parameter-{{parameter.key}}" nzShowSearch
nzPlaceHolder="{{'workflow_template_param_select_key' | translate}}"
(ngModelChange)="changeParam()"
[(ngModel)]="parameterValues[parameter.key]" #select>
nzPlaceHolder="{{'workflow_template_param_select_key' | translate}}"
(ngModelChange)="changeParam(parameter.key, $event)" [ngModel]="parameterValues[parameter.key]" #select>
<nz-option *ngFor="let key of pgpKeys" [nzValue]="key" [nzLabel]="key"></nz-option>
</nz-select>
<nz-row *ngIf="parameter.type === 'repository'">
<nz-col [nzSpan]="18">
<nz-select name="parameter-{{parameter.key}}-repo" nzShowSearch
[(ngModel)]="parameterValues[parameter.key + '-repository']"
(nzFocus)="focusRepo(parameter.key)"
(nzOnSearch)="filterRepo($event)" (ngModelChange)="changeParam()">
<nz-option *ngFor="let repository of filteredRepo"
[nzValue]="repository" [nzLabel]="repository">
[ngModel]="parameterValues[parameter.key + '-repository']" (nzFocus)="focusRepo(parameter.key)"
(nzOnSearch)="filterRepo($event)"
(ngModelChange)="changeParam(parameter.key + '-repository', $event)">
<nz-option *ngFor="let repository of filteredRepo" [nzValue]="repository"
[nzLabel]="repository">
</nz-option>
</nz-select>
</nz-col>
<nz-col [nzSpan]="6">
<button nz-button nzType="primary" name="resync" type="button" [nzLoading]="loading"
[disabled]="loading" (click)="resyncRepos(parameter.key)">
<button nz-button nzType="primary" name="resync" type="button" [nzLoading]="loading"
[disabled]="loading" (click)="resyncRepos(parameter.key)">
Resynchronize
</button>
</nz-col>
</nz-row>
</div>
</nz-col>
</nz-row>
</nz-row>