diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation/operation-creator')
5 files changed, 154 insertions, 35 deletions
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html index 9f78088609..5faddd829c 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html @@ -50,7 +50,8 @@ label="{{ 'OPERATION_NAME' | translate }}" [(value)]="operation.name" testId="operationName" - (valueChange)="onChangeName()"> + (valueChange)="onChangeName()" + [disabled]="readonly"> </sdc-input> </div> @@ -80,7 +81,37 @@ </sdc-dropdown> </div> - <div class="form-item" *ngIf="!isUsingExistingWF()"></div> + <div class="form-item" *ngIf="!isUsingExistingWF() && !isUsingExternalWF()"></div> + + <div + *ngIf="isUsingExternalWF()" + class="form-item sdc-input"> + <label class="sdc-input__label required">{{ 'OPERATION_ARTIFACT' | translate }}</label> + <div class="i-sdc-form-item i-sdc-form-file-upload"> + <span + class="i-sdc-form-file-name" + data-tests-id="artifactFilename"> + {{ operation.artifactFile && operation.artifactFile.name }} + </span> + <div + *ngIf="operation.artifactFile && operation.artifactFile.name" + class="i-sdc-form-file-upload-x-btn" + data-tests-id="clearArtifact" + (click)="onChangeArtifactFile({ target: {} })"></div> + <label + class="i-sdc-form-file-upload-label" + [ngClass]="{'disabled': readonly}"> + <input + type="file" + base-sixty-four-input + maxsize="10240" + data-tests-id="artifactUpload" + (change)="onChangeArtifactFile($event)" + /> + <div class="file-upload-browse-btn">Browse</div> + </label> + </div> + </div> <div class="form-item sdc-input" *ngIf="isUsingExistingWF()"> <label class="sdc-input__label required">{{ 'OPERATION_WORKFLOW' | translate }} diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less index 1d65d98b9c..f2bd0f82af 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less @@ -57,6 +57,25 @@ flex: 0.4; } + .i-sdc-form-file-upload { + height: 37px; + margin-bottom: 0; + + .i-sdc-form-file-name { + padding: 8px 10px; + } + + .i-sdc-form-file-upload-x-btn { + top: 13px; + } + + .file-upload-browse-btn { + height: 100%; + padding: 7px 6px; + z-index: 1; + } + } + } } diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts index 6099cdbe98..7b36062427 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts @@ -102,11 +102,11 @@ export class OperationCreatorComponent implements OperationCreatorInput { this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT"); this.associationOptions = [ - new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.translateService.translate("NO_WORKFLOW_ASSOCIATION")), - new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")) + new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL, this.translateService.translate("EXTERNAL_WORKFLOW_ASSOCIATION")), + new DropDownOption(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")), ]; - this.workflowAssociationType = this.operation.workflowAssociationType || WORKFLOW_ASSOCIATION_OPTIONS.NONE; + this.workflowAssociationType = this.operation.workflowAssociationType || WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL; }); this.currentTab = this.TYPE_INPUT; @@ -167,7 +167,7 @@ export class OperationCreatorComponent implements OperationCreatorInput { (workflow: any) => new DropdownValue(workflow.id, workflow.name) ); } else { - this.workflows = [new DropdownValue(this.operation.workflowId, this.operation.workflowId)]; + this.workflows = []; } } this.reconstructOperation(); @@ -223,7 +223,7 @@ export class OperationCreatorComponent implements OperationCreatorInput { _.forEach( [...this.inputOperation.outputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)), (output: OperationParameter) => { - this.addParam(output); + this.addParam({...output, required: Boolean(output.required)}); } ); } @@ -234,7 +234,7 @@ export class OperationCreatorComponent implements OperationCreatorInput { _.forEach( [...this.inputOperation.inputs.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)), (input: OperationParameter) => { - this.addParam(input); + this.addParam({...input, required: Boolean(input.required)}); } ); } @@ -286,7 +286,7 @@ export class OperationCreatorComponent implements OperationCreatorInput { } set descriptionValue(v) { - this.operation.description = v; + this.operation.description = v || null; this.validityChanged(); } @@ -295,6 +295,11 @@ export class OperationCreatorComponent implements OperationCreatorInput { if (_.isUndefined(workflowId) || !this.workflowIsOnline) { return; } + + if (this.operation.workflowId === workflowId.value && !selectedVersionId) { + return; + } + this.operation.workflowId = workflowId.value; if (!this.assignInputParameters[this.operation.workflowId]) { this.assignInputParameters[this.operation.workflowId] = {}; @@ -313,12 +318,12 @@ export class OperationCreatorComponent implements OperationCreatorInput { (version: any) => { if (!this.assignInputParameters[this.operation.workflowId][version.id] && version.id !== selectedVersionId) { this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: OperationParameter) => { - return new OperationParameter({...input, type: input.type.toLowerCase()}); + return new OperationParameter({...input, type: input.type.toLowerCase(), required: Boolean(input.required)}); }) .sort((a, b) => a.name.localeCompare(b.name)); this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: OperationParameter) => { - return new OperationParameter({...output, type: output.type.toLowerCase()}); + return new OperationParameter({...output, type: output.type.toLowerCase(), required: Boolean(output.required)}); }) .sort((a, b) => a.name.localeCompare(b.name)); } @@ -376,6 +381,28 @@ export class OperationCreatorComponent implements OperationCreatorInput { } + onChangeArtifactFile(e: any) { + const file = e.target.files && e.target.files[0]; + this.operation.artifactFile = file; + + if (!this.operation.artifactFile) { + this.operation.artifactData = null; + this.validityChanged(); + return; + } + + const reader = new FileReader(); + reader.onloadend = () => { + this.isLoading = false; + const result = <String>reader.result; + this.operation.artifactData = result.substring(result.indexOf(',') + 1); + this.validityChanged(); + } + + this.isLoading = true; + reader.readAsDataURL(file); + } + tabChanged = (event) => { this.currentTab = event.title; @@ -397,8 +424,8 @@ export class OperationCreatorComponent implements OperationCreatorInput { } addParam(param?: OperationParameter): void { + this.tableParameters.push(new OperationParameter(param || {required: false})); this.validityChanged(); - this.tableParameters.push(new OperationParameter(param)); } canAdd = (): boolean => { @@ -456,6 +483,11 @@ export class OperationCreatorComponent implements OperationCreatorInput { return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING; } + isUsingExternalWF = (operation?: OperationModel): boolean => { + operation = operation || this.operation; + return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXTERNAL; + } + shouldCreateWF = (operation?: OperationModel): boolean => { operation = operation || this.operation; return operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW; @@ -463,7 +495,9 @@ export class OperationCreatorComponent implements OperationCreatorInput { checkFormValidForSubmit = (): boolean => { return this.operation.name && - (!this.isUsingExistingWF() || this.operation.workflowVersionId) && + (this.isUsingExternalWF() ? + (this.operation.artifactFile && this.operation.artifactFile.name) : + (!this.isUsingExistingWF() || this.operation.workflowVersionId)) && this.isParamsValid(); } diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html index aa4277c004..3ac9328487 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html @@ -39,7 +39,7 @@ <div class="cell field-property" *ngIf="isInputParam"> <select - *ngIf="filteredInputProps.length || !isAssociateWorkflow" + *ngIf="filteredInputProps.length || operationOutputCats.length || !isAssociateWorkflow" [(ngModel)]="param.inputId" (change)="onChangeProperty($event)" [ngClass]="{'disabled': readonly}" @@ -60,7 +60,7 @@ </optgroup> </select> <span - *ngIf="!filteredInputProps.length && isAssociateWorkflow" + *ngIf="!filteredInputProps.length && !operationOutputCats.length && isAssociateWorkflow" class="no-properties-error"> {{ 'PARAM_NONE_OF_TYPE' | translate }} </span> diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts index 1b51d721af..bdf1003a64 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts @@ -1,6 +1,6 @@ import {Component, Input} from '@angular/core'; import {DataTypeService} from "app/ng2/services/data-type.service"; -import {OperationModel, OperationParameter, InputBEModel} from 'app/models'; +import {OperationModel, OperationParameter, InputBEModel, DataTypeModel} from 'app/models'; import {DropDownOption} from "../operation-creator.component"; import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; @@ -38,12 +38,38 @@ export class ParamRowComponent { constructor(private dataTypeService: DataTypeService) {} ngOnInit() { - this.propTypeEnum = _.uniq( - _.map( - this.getPrimitiveSubtypes(), - prop => prop.type - ) - ); + if (this.isInputParam) { + this.propTypeEnum = _.uniq( + _.map( + _.concat( + this.getPrimitiveSubtypes(), + _.reduce( + this.operationOutputs, + (acc, op) => [...acc, ...op.outputs.listToscaDataDefinition], + []) + ), + prop => prop.type + ) + ); + } else { + const dataTypes: Array<DataTypeModel> = _.toArray(this.dataTypeService.getAllDataTypes()); + this.propTypeEnum = _.concat( + _.map( + _.filter( + dataTypes, + type => this.isTypePrimitive(type.name) + ), + type => type.name + ).sort(), + _.map( + _.filter( + dataTypes, + type => !this.isTypePrimitive(type.name) + ), + type => type.name + ).sort() + ); + } this.onChangeType(); this.validityChanged(); @@ -54,6 +80,11 @@ export class ParamRowComponent { } onChangeType() { + if (!this.isInputParam) { + this.validityChanged(); + return; + } + this.filteredInputProps = _.map( _.filter( this.getPrimitiveSubtypes(), @@ -115,21 +146,25 @@ export class ParamRowComponent { const dataTypes = this.dataTypeService.getAllDataTypes(); _.forEach(this.inputProps, prop => { - const type = _.find( + const type:DataTypeModel = _.find( _.toArray(dataTypes), - (type: any) => type.name === prop.type + (type: DataTypeModel) => type.name === prop.type ); flattenedProps.push(prop); - if (type.properties) { - _.forEach(type.properties, subType => { - if (this.isTypePrimitive(subType.type)) { - flattenedProps.push({ - type: subType.type, - name: `${prop.name}.${subType.name}`, - uniqueId: `${prop.uniqueId}.${subType.name}` - }); - } - }); + if (!type) { + console.error('Could not find prop in dataTypes: ', prop); + } else { + if (type.properties) { + _.forEach(type.properties, subType => { + if (this.isTypePrimitive(subType.type)) { + flattenedProps.push({ + type: subType.type, + name: `${prop.name}.${subType.name}`, + uniqueId: `${prop.uniqueId}.${subType.name}` + }); + } + }); + } } }); @@ -149,7 +184,7 @@ export class ParamRowComponent { ); } - isTypePrimitive(type): boolean { + isTypePrimitive(type: string): boolean { return ( type === 'string' || type === 'integer' || |