Skip to content

Commit

Permalink
refactor(ui): remove semantic from requirement and delete workflow mo…
Browse files Browse the repository at this point in the history 
…dal (#6157)
  • Loading branch information
@sguiheux
sguiheux authored May 2, 2022
1 parent 63f4aae commit ec18898
Show file tree
Hide file tree
Showing 19 changed files with 320 additions and 333 deletions.
2 changes: 2 additions & 0 deletions ui/src/app/shared/action/action.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export class ActionComponent implements OnDestroy, OnInit {

@Output() actionEvent = new EventEmitter<ActionEvent>();

requirementModalVisible = false;
collapsed = true;
configRequirements: { disableModel?: boolean, disableHostname?: boolean, disableRegion?: boolean } = {};
workerModels: Array<WorkerModel>;
Expand Down Expand Up @@ -151,6 +152,7 @@ export class ActionComponent implements OnDestroy, OnInit {
case 'delete':
let indexDelete = this.editableAction.requirements.indexOf(r.requirement);
if (indexDelete >= 0) {
this.editableAction.requirements = Object.assign([], this.editableAction.requirements);
this.editableAction.requirements.splice(indexDelete, 1);
}
if (r.requirement.type === 'model') {
Expand Down
46 changes: 18 additions & 28 deletions ui/src/app/shared/action/action.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,37 +31,27 @@
</div>
<div class="two wide right aligned field labelPadding">
<a class="pointing"
(click)="prepareEditRequirements(); requirementModal.show({inverted: false, closable: false, autofocus: false})">
(click)="prepareEditRequirements(); requirementModalVisible = true">
{{ editableAction.requirements.length + ' '}}{{'common_requirements' | translate }}
</a>
<sm-modal class="large" title="{{ 'common_requirements' | translate }}" #requirementModal>
<modal-content>
<div class="ui form">
<div class="field">
<app-requirements-list [workerModels]="workerModels" [suggest]="suggest"
[requirements]="editableAction.requirements" [edit]="edit"
(onChange)="editableAction.hasChanged = true"
(event)="requirementEvent($event)"></app-requirements-list>
<div class="requirementForm" *ngIf="edit && pipeline">
<h3>{{ 'requirement_add' | translate }}</h3>
<app-requirements-form [workerModels]="workerModels"
[config]="configRequirements" [suggest]="suggest" [modal]="requirementModal"
(event)="requirementEvent($event)"></app-requirements-form>
</div>
<div class="requirementForm" *ngIf="edit && !pipeline">
<app-requirements-form [workerModels]="workerModels" [suggest]="suggest"
[config]="configRequirements" [modal]="requirementModal"
(event)="requirementEvent($event)">
</app-requirements-form>
</div>
</div>
<nz-modal [nzVisible]="requirementModalVisible" nzTitle="Action requirements" nzWidth="900px"
(nzOnCancel)="requirementModalVisible = false">
<div *nzModalContent class="modalContent">
<app-requirements-list [workerModels]="workerModels" [suggest]="suggest"
[requirements]="editableAction.requirements" [edit]="edit"
(onChange)="editableAction.hasChanged = true" (event)="requirementEvent($event)">
</app-requirements-list>
<div class="requirementForm" *ngIf="edit && pipeline">
<app-requirements-form [workerModels]="workerModels" [suggest]="suggest"
[config]="configRequirements"
(event)="requirementEvent($event)">
</app-requirements-form>
</div>
</modal-content>
<modal-actions>
<button class="ui grey button"
(click)="requirementModal.hide();parseRequirements();">{{ 'common_close' | translate }}</button>
</modal-actions>
</sm-modal>
</div>
<div *nzModalFooter>
<button nz-button (click)="requirementModalVisible = false;parseRequirements();">Close</button>
</div>
</nz-modal>
</div>
</div>
</div>
Expand Down
19 changes: 5 additions & 14 deletions ui/src/app/shared/requirements/form/requirements.form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { Requirement } from 'app/model/requirement.model';
import { WorkerModel } from 'app/model/worker-model.model';
import { RequirementStore } from 'app/service/requirement/requirement.store';
import { RequirementEvent } from 'app/shared/requirements/requirement.event.model';
import { SemanticModalComponent } from '@sgu/ng-semantic';
import { finalize, first } from 'rxjs/operators';

export const OSArchitecture = 'os-architecture';
Expand All @@ -26,8 +25,8 @@ export class RequirementsFormComponent implements OnInit {
}
}
get suggest() {
return this._suggest;
}
return this._suggest;
}

_workerModels: Array<WorkerModel>;
@Input() set workerModels(wms: Array<WorkerModel>) {
Expand All @@ -43,11 +42,9 @@ export class RequirementsFormComponent implements OnInit {
}
}
get workerModels() {
return this._workerModels;
}

return this._workerModels;
}

@Input() modal: SemanticModalComponent;
@Input() config: { disableModel?: boolean, disableHostname?: boolean, disableRegion?: boolean };

@Output() event = new EventEmitter<RequirementEvent>();
Expand All @@ -59,7 +56,6 @@ export class RequirementsFormComponent implements OnInit {
suggestWithOsArch: Array<string> = [];
workerModelLinked: WorkerModel;
isFormValid = false;
modelTypeClass: string;
popupText: string;
placeholderTypeName: {};
placeholderTypeValue: {};
Expand Down Expand Up @@ -104,6 +100,7 @@ export class RequirementsFormComponent implements OnInit {
this.placeholderTypeName[a] = placeHolderName;
this.placeholderTypeValue[a] = placeHolderValue;
});
this._cd.markForCheck();
});
}

Expand Down Expand Up @@ -168,12 +165,6 @@ export class RequirementsFormComponent implements OnInit {
this.computeFormValid(form);
}

closeModal() {
if (this.modal) {
this.modal.hide();
}
}

computeDisplayLinkWorkerModel(): WorkerModel {
if (this.newRequirement.value === '' || !Array.isArray(this.workerModels)) {
return null;
Expand Down
143 changes: 72 additions & 71 deletions ui/src/app/shared/requirements/form/requirements.form.html
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,86 @@
<form class="ui form requirementForm" #formAddRequirement="ngForm">
<div class="fields">
<div class="three wide field">
<div class="field">
<sm-select class="search" *ngIf="availableRequirements.length > 0" (onChange)="selectType()" [(model)]="newRequirement.type" [options]="{'fullTextSearch': true}" placeholder="{{ 'requirement_type' | translate }}">
<option *ngFor="let r of availableRequirements" value="{{r}}">{{r}}</option>
</sm-select>
</div>
<form nz-form name="addReqForm" *ngIf="availableRequirements.length > 0" #formAddRequirement="ngForm">
<div nz-row>
<div nz-col nzSpan="6">
<nz-form-item>
<nz-select [(ngModel)]="newRequirement.type" (ngModelChange)="selectType()" name="selectType"
nzPlaceHolder="{{ 'requirement_type' | translate }}">
<nz-option *ngFor="let r of availableRequirements" [nzValue]="r" [nzLabel]="r"></nz-option>
</nz-select>
</nz-form-item>
</div>
<div class="ten wide field">
<div class="field" *ngIf="newRequirement.type === 'service'">
<label for="requirementname">
{{ 'requirement_hostname_service' | translate }}
</label>
<input name="requirementname" id="requirementname" [disabled]="newRequirement.type !== 'service'" auto-complete autocomplete="off" type="text" required pattern="[a-zA-Z0-9\-\._]*" placeholder="{{placeholderTypeName[newRequirement.type]}}" [source]="suggest"
[min-chars]="3" [(ngModel)]="newRequirement.name" [no-match-found-text]="false">
<div *ngIf="formAddRequirement.invalid && !formAddRequirement.pristine" class="ui error message">
<p>{{'requirement_hostname_error' | translate}}</p>
<div nz-col nzSpan="12">
<nz-form-item>
<div *ngIf="newRequirement.type === 'service'" class="container">
{{ 'requirement_hostname_service' | translate }}
<input nz-input [nzAutocomplete]="autoSuggestService" name="requirementname" id="requirementname" [disabled]="newRequirement.type !== 'service'" type="text" required pattern="[a-zA-Z0-9\-\._]*" placeholder="{{placeholderTypeName[newRequirement.type]}}" [(ngModel)]="newRequirement.name">
<nz-autocomplete [nzDataSource]="suggest" nzBackfill #autoSuggestService></nz-autocomplete>
<div *ngIf="formAddRequirement.invalid && !formAddRequirement.pristine" class="ui error message">
<p>{{'requirement_hostname_error' | translate}}</p>
</div>
</div>
</div>
<div class="field" *ngIf="newRequirement.type === 'os-architecture'">
<input name="name" [disabled]="newRequirement.type !== 'os-architecture'" auto-complete autocomplete="off" type="text" required placeholder="{{'requirement_placeholder_name_' + newRequirement.type | translate}}" [source]="suggestWithOsArch" [min-chars]="0"
[(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" (blur)="setName(formAddRequirement)">
<div *ngIf="formAddRequirement.invalid && !formAddRequirement.pristine" class="ui error message">
<p>{{'requirement_os-architecture_error' | translate}}</p>
<div class="container" *ngIf="newRequirement.type === 'os-architecture'">
<input nz-input [nzAutocomplete]="autoSuggestArch" name="name" [disabled]="newRequirement.type !== 'os-architecture'" type="text" required placeholder="{{'requirement_placeholder_name_' + newRequirement.type | translate}}"
[(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" (blur)="setName(formAddRequirement)">
<nz-autocomplete [nzDataSource]="suggestWithOsArch" nzBackfill #autoSuggestArch></nz-autocomplete>
<div *ngIf="formAddRequirement.invalid && !formAddRequirement.pristine" class="ui error message">
<p>{{'requirement_os-architecture_error' | translate}}</p>
</div>
</div>
</div>
<div *ngIf="newRequirement.type !== 'model' && newRequirement.type !== 'os-architecture'">
<label for="value" *ngIf="newRequirement.type === 'service'">
{{ 'requirement_value_service' | translate }}
</label>
<div class="field">
<input name="value" id="value" auto-complete autocomplete="off" type="text" [source]="suggest" [min-chars]="3" [(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" placeholder="{{placeholderTypeValue[newRequirement.type]}}"
[no-match-found-text]="false">
<div class="container" *ngIf="newRequirement.type !== 'model' && newRequirement.type !== 'os-architecture'">
<span *ngIf="newRequirement.type === 'service'">{{ 'requirement_value_service' | translate }}</span>
<input nz-input name="value" id="value" [nzAutocomplete]="autoServiceImage" type="text" [(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" placeholder="{{placeholderTypeValue[newRequirement.type]}}">
<nz-autocomplete [nzDataSource]="suggest" nzBackfill #autoServiceImage></nz-autocomplete>
</div>
</div>

<div *ngIf="newRequirement.type === 'model' && workerModels != null">
<input name="value-workermodel" auto-complete autocomplete="off" type="text" [source]="suggestWithWorkerModel" [min-chars]="0" [(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" (blur)="setName(formAddRequirement)" placeholder="{{'requirement_placeholder_value_model' | translate}}"
[no-match-found-text]="false">
<p *ngIf="workerModelLinked != null">
<a class="ui" [routerLink]="['/settings', 'worker-model', newRequirement.value]" target="_blank" (click)="closeModal()">
<div class="container" *ngIf="newRequirement.type === 'model' && workerModels != null">
<input nz-input name="value-workermodel" [nzAutocomplete]="autoModel" type="text" [(ngModel)]="newRequirement.value" (keyup)="setName(formAddRequirement)" (blur)="setName(formAddRequirement)" placeholder="{{'requirement_placeholder_value_model' | translate}}">
<nz-autocomplete [nzDataSource]="suggestWithWorkerModel" nzBackfill #autoModel></nz-autocomplete>
<p *ngIf="workerModelLinked != null">
<a class="ui" [routerLink]="['/settings', 'worker-model', newRequirement.value]" target="_blank">
{{ 'requirement_settings_worker_model' | translate }} {{ newRequirement.value }}
</a>
</p>
<label for="opts">
{{ 'requirement_options' | translate }}
</label>
<textarea name="opts" id="opts" [(ngModel)]="newRequirement.opts" rows="3" placeholder="{{'requirement_placeholder_opts_model' | translate}}"></textarea>
</div>
<div *ngIf="newRequirement.type === 'service'">
<label for="servopts">
{{ 'requirement_options' | translate }}
</label>
<textarea name="servopts" id="servopts" [(ngModel)]="newRequirement.opts" rows="3" placeholder="{{'requirement_placeholder_opts_service' | translate}}"></textarea>
</div>
</p>
{{ 'requirement_options' | translate }}
<textarea nz-input name="opts" id="opts" [(ngModel)]="newRequirement.opts" rows="3" placeholder="{{'requirement_placeholder_opts_model' | translate}}"></textarea>
</div>
<div class="container" *ngIf="newRequirement.type === 'service'">
{{ 'requirement_options' | translate }}
<textarea nz-input name="servopts" id="servopts" [(ngModel)]="newRequirement.opts" rows="3" placeholder="{{'requirement_placeholder_opts_service' | translate}}"></textarea>
</div>
</nz-form-item>
</div>
<div class="one wide center mtop8" *ngIf="newRequirement.type === 'model' && workerModelLinked != null">
<span *ngIf="workerModelLinked.is_official" [smDirTooltip]="'worker_model_official_tooltip' | translate" smDirPosition="top center"><i class="check circle outline icon large green"></i></span>
<span *ngIf="!workerModelLinked.is_official" [smDirTooltip]="'worker_model_unofficial' | translate" smDirPosition="top center"><i class="remove circle outline icon large red"></i></span>
<span *ngIf="workerModelLinked.is_deprecated" [smDirTooltip]="'worker_model_deprecated_tooltip' | translate" smDirPosition="top center"><i class="exclamation circle icon large orange"></i></span>
<div nz-col nzSpan="2">
<nz-form-item *ngIf="workerModelLinked">
<span *ngIf="workerModelLinked.is_official" nz-tooltip nzTooltipTitle="{{'worker_model_official_tooltip' | translate}}" nzTooltipPlacement="top"><i class="check circle outline icon large green"></i></span>
<span *ngIf="!workerModelLinked.is_official" nz-tooltip nzTooltipTitle="{{'worker_model_unofficial' | translate}}" nzTooltipPlacement="top"><i class="remove circle outline icon large red"></i></span>
<span *ngIf="workerModelLinked.is_deprecated" nz-tooltip nzTooltipTitle="{{'worker_model_deprecated_tooltip' | translate}}" nzTooltipPlacement="top"><i class="exclamation circle icon large orange"></i></span>
</nz-form-item>
</div>
<div class="two wide center field">
<div suiPopup
[popupText]="popupText"
popupPlacement="top"
*ngIf="(newRequirement.type === 'model' && config.disableModel) || (newRequirement.type === 'hostname' && config.disableHostname) || (newRequirement.type === 'region' && config.disableRegion)">
<button class="ui blue icon button"
[disabled]="!isFormValid"
(click)="onSubmitAddRequirement(formAddRequirement)">
<i class="plus icon"></i>
</button>
</div>
<div *ngIf="(newRequirement.type !== 'model' || !config.disableModel) && (newRequirement.type !== 'hostname' || !config.disableHostname) && (newRequirement.type !== 'region' || !config.disableRegion)">
<button class="ui blue icon button"
[disabled]="!isFormValid"
(click)="onSubmitAddRequirement(formAddRequirement)">
<i class="plus icon"></i>
</button>
</div>
<div nz-col nzSpan="4">
<nz-form-item>
<div suiPopup
[popupText]="popupText"
popupPlacement="top"
*ngIf="(newRequirement.type === 'model' && config.disableModel) || (newRequirement.type === 'hostname' && config.disableHostname) || (newRequirement.type === 'region' && config.disableRegion)">
<button class="ui blue icon button"
[disabled]="!isFormValid"
(click)="onSubmitAddRequirement(formAddRequirement)">
<i class="plus icon"></i>
</button>
</div>
<div *ngIf="(newRequirement.type !== 'model' || !config.disableModel) && (newRequirement.type !== 'hostname' || !config.disableHostname) && (newRequirement.type !== 'region' || !config.disableRegion)">
<button class="ui blue icon button"
[disabled]="!isFormValid"
(click)="onSubmitAddRequirement(formAddRequirement)">
<i class="plus icon"></i>
</button>
</div>
</nz-form-item>
</div>
</div>



<p>
<i class="fa fa-book"></i>
<a href="#" [routerLink]="['/docs', 'docs', 'concepts', 'requirement']" target="_blank" rel="noopener noreferrer">
Expand Down
19 changes: 16 additions & 3 deletions ui/src/app/shared/requirements/form/requirements.form.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,18 @@
.requirementForm {
.mtop8 {
margin-top: 8px;
nz-form-item {
padding-left: 15px;

nz-select {
width: 100%;
}

.container {
width: 100%;
}

input {
width: 100%;
}
textarea {
width: 100%;
}
}
Loading

0 comments on commit ec18898

Please sign in to comment.