diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation')
7 files changed, 339 insertions, 82 deletions
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts index c58e1de135..010a1f9dda 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts @@ -1,11 +1,15 @@ import * as _ from "lodash"; import {Component, Input, ComponentRef, Inject} from '@angular/core'; import {Component as IComponent} from 'app/models/components/component'; + +import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; import {ModalService} from 'app/ng2/services/modal.service'; import {ModalModel, ButtonModel, InputModel, OperationModel, CreateOperationResponse} from 'app/models'; -import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; + import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service'; import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response'; +import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service'; + import {OperationCreatorComponent} from './operation-creator/operation-creator.component'; @Component({ @@ -27,6 +31,7 @@ export class InterfaceOperationComponent { constructor( @Inject('$state') private $state:ng.ui.IStateService, private ComponentServiceNg2: ComponentServiceNg2, + private WorkflowServiceNg2: WorkflowServiceNg2, private ModalServiceNg2: ModalService, ) {} @@ -87,8 +92,15 @@ export class InterfaceOperationComponent { () => { this.modalInstance.instance.dynamicContent.instance.createInputParamList(); this.ModalServiceNg2.closeCurrentModal(); - const {operation} = this.modalInstance.instance.dynamicContent.instance; - this.openOperation = operation; + + const {operation, isAssociateWorkflow} = this.modalInstance.instance.dynamicContent.instance; + this.openOperation = {...operation}; + + if (!isAssociateWorkflow) { + operation.workflowId = null; + operation.workflowVersionId = null; + } + modalData.submitCallback(operation); }, this.getDisabled, @@ -103,6 +115,7 @@ export class InterfaceOperationComponent { ); this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); + this.ModalServiceNg2.addDynamicContentToModal( this.modalInstance, OperationCreatorComponent, @@ -145,22 +158,15 @@ export class InterfaceOperationComponent { this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: CreateOperationResponse) => { this.openOperation = null; - const workflowId = response.artifactUUID; - const operationId = response.uniqueId; - const resourceId = this.component.uuid; - - const queryParams = { - id: workflowId, - operationID: operationId, - uuid: resourceId, - displayMode: 'create', - }; - - this.$state.go('workspace.plugins', { - path: 'workflowDesigner', - queryParams - }); + if (response.workflowId) { + const resourceId = this.component.uuid; + const operationId = response.uniqueId; + const workflowId = response.workflowId; + const versionId = response.workflowVersionId; + const artifactId = response.artifactUUID; + this.WorkflowServiceNg2.associateWorkflowArtifact(resourceId, operationId, workflowId, versionId, artifactId); + } }); } 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 9e47cd5cef..c0a6966ceb 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 @@ -1,16 +1,17 @@ <div class="operation-creator"> + <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader> + <form class="w-sdc-form"> <div class="side-by-side"> <div class="i-sdc-form-item"> - <label class="i-sdc-form-label">Operation Type</label> - <input - type="text" - data-tests-id="operationType" - name="operationType" - [(ngModel)]="operation.operationType" - [attr.maxLength]="200" - [disabled]="isEditMode" /> + <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">Operation Type</label> + <ui-element-dropdown + data-tests-id="operationTypeDropdown" + [values]="operation.OperationTypeEnum" + [(value)]="operation.operationType" + [readonly]="isEditMode"> + </ui-element-dropdown> </div> <div class="i-sdc-form-item" > @@ -24,33 +25,85 @@ </div> </div> + <div class="i-sdc-form-item"> + <checkbox + [label]="'Assign Workflow'" + [(checked)]="isAssociateWorkflow" + (checkedChange)="toggleAssociateWorkflow()" + data-tests-id="checkbox-assign-workflow"> + </checkbox> + </div> + + <div class="side-by-side" *ngIf="isAssociateWorkflow"> + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label required">Workflow</label> + <ui-element-dropdown + data-tests-id="associated-workflow" + [values]="workflows" + [(value)]="operation.workflowId" + (valueChange)="onSelectWorkflow()"> + </ui-element-dropdown> + </div> + + <div class="i-sdc-form-item"> + <label class="i-sdc-form-label required">Workflow Version</label> + <ui-element-dropdown + data-tests-id="associated-workflow-version" + [ngClass]="{'disabled': !operation.workflowId}" + [values]="workflowVersions" + [(value)]="operation.workflowVersionId" + (valueChange)="changeWorkflowVersion()"> + </ui-element-dropdown> + </div> + </div> + <div class="separator-buttons"> <span class="input-param-title">Input Parameters</span> <a - class="add-param-link" + class="add-param-link add-btn" + *ngIf="!isAssociateWorkflow" data-tests-id="addInputParameter" - [ngClass]="{'disabled':!isAddAllowed()}" - (click)="addParam()"> - Add Input Parameter - </a> + [ngClass]="{'disabled':!isParamsValid()}" + (click)="addParam()">Add Input Parameter</a> </div> <div class="generic-table"> <div class="header-row table-row"> - <span class="cell header-cell">Name</span> - <span class="cell header-cell">Property Name</span> - <span class="cell header-cell"></span> + <span class="cell header-cell field-name">Name</span> + <span class="cell header-cell">Type</span> + <span class="cell header-cell field-property"> + Property + <span + *ngIf="!isAssociateWorkflow" + class="sprite-new info-icon" + tooltip="{{propertyTooltipText}}" + tooltipDelay="0"> + </span> + </span> + <span class="cell header-cell field-mandatory" *ngIf="!isAssociateWorkflow">Mandatory</span> + <span class="cell header-cell remove" *ngIf="!isAssociateWorkflow">●●●</span> </div> - <div class="empty-msg data-row" *ngIf="inputParams.length === 0"> - No data to display. + <div class="empty-msg data-row" *ngIf="inputParameters.length === 0"> + <div>NO PARAMETERS TO SHOW</div> + <div *ngIf="isAssociateWorkflow && !operation.workflowVersionId"> + <div *ngIf="workflows.length"> + <span class="bold-message">Select Workflow and Workflow Version above</span> + <span>in order to see the parameters</span> + </div> + <div *ngIf="!workflows.length"> + Only <span class="bold-message">certified</span> workflow versions can be assigned to an operation + </div> + </div> </div> <param-row - *ngFor="let param of inputParams; let idx=index" + *ngFor="let param of inputParameters; let idx=index" class="data-row" + [isAssociateWorkflow]="isAssociateWorkflow" [param]="param" [inputProps]="inputProperties" + [propTypes]="inputPropertyTypes" [onRemoveParam]="onRemoveParam"> </param-row> </div> 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 289dd5b452..f962bc2dca 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 @@ -48,19 +48,59 @@ max-height: 233px; .header-row .header-cell { - &:last-child { - padding: 0; + &.remove { + padding: 8px; + } + .info-icon { + float: right; + } + .tooltip-inner { + &.tooltip-inner { + &.tooltip-inner { + max-width: 230px; + } + } } } .data-row { &.empty-msg { - padding: 6px 14px; + .bold-message { + font-weight: 600; + } + + :first-child { + &:not(:only-child) { + margin: 6px 0; + } + } + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 11px 0; } } /deep/ .cell { - &:last-child { + &.field-name { + flex: 2; + } + + + &.field-mandatory { + flex: 0.5; + text-align: center; + } + + &.field-property { + &, &:last-child { + flex: 1; + } + } + + &.remove { min-width: 40px; } } 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 cc7b5feaf3..8d26055feb 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 @@ -1,68 +1,179 @@ import * as _ from "lodash"; import {Component} from '@angular/core'; + +import {Subscription} from "rxjs/Subscription"; + +import {TranslateService} from "app/ng2/shared/translator/translate.service"; +import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service'; +import {InputModel, OperationModel, OperationParameter} from 'app/models'; + import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; -import {InputModel, OperationModel, OperationParam} from 'app/models'; @Component({ selector: 'operation-creator', templateUrl: './operation-creator.component.html', styleUrls:['./operation-creator.component.less'], + providers: [TranslateService] }) export class OperationCreatorComponent { - inputProperties: Array<DropdownValue>; input: any; - inputParams: Array<OperationParam> = []; operation: OperationModel; + + workflows: Array<DropdownValue> = []; + workflowVersions: Array<DropdownValue> = []; + inputProperties: Array<DropdownValue> = []; + inputPropertyTypes: {}; + + inputParameters: Array<OperationParameter> = []; + noAssignInputParameters: Array<OperationParameter> = []; + assignInputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {}; + + isAssociateWorkflow: boolean = false; isEditMode: boolean = false; + isLoading: boolean = false; + + propertyTooltipText: String; + + constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) { + this.translateService.languageChangedObservable.subscribe(lang => { + this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT"); + }); + } ngOnInit() { - this.operation = new OperationModel(this.input.operation || {}); - if (this.input.operation) { - let {inputParams} = this.input.operation; + this.inputProperties = _.map(this.input.inputProperties, + (input: InputModel) => new DropdownValue(input.uniqueId, input.name) + ); + + this.inputPropertyTypes = {}; + _.forEach(this.input.inputProperties, (input: InputModel) => { + this.inputPropertyTypes[input.uniqueId] = input.type; + }); - if (inputParams) { - _.forEach(inputParams.listToscaDataDefinition, (input: OperationParam) => { + const inputOperation = <OperationModel>this.input.operation; + this.operation = new OperationModel(inputOperation || {}); + + const buildInputParams = () => { + if (inputOperation.inputParams) { + this.inputParameters = []; + _.forEach(inputOperation.inputParams.listToscaDataDefinition, (input: OperationParameter) => { this.addParam(input); }); } + } + + this.isLoading = true; + this.workflowServiceNg2.getWorkflows().subscribe(workflows => { + this.isLoading = false; + + this.workflows = _.map(workflows, (workflow: any) => { + return new DropdownValue(workflow.id, workflow.name); + }); + + if (inputOperation) { + if (inputOperation.workflowVersionId) { + this.isAssociateWorkflow = true; + this.onSelectWorkflow(inputOperation.workflowVersionId).add(buildInputParams); + } else { + this.inputParameters = this.noAssignInputParameters; + this.isAssociateWorkflow = false; + buildInputParams(); + } + + if (inputOperation.uniqueId) { + this.isEditMode = true; + } + } + }); - if (this.input.operation.uniqueId) { - this.isEditMode = true; + + } + + onSelectWorkflow(selectedVersionId?: string): Subscription { + + this.operation.workflowVersionId = selectedVersionId || null; + if (!this.assignInputParameters[this.operation.workflowId]) { + this.assignInputParameters[this.operation.workflowId] = {}; + } + + this.isLoading = true; + return this.workflowServiceNg2.getWorkflowVersions(this.operation.workflowId).subscribe((versions: Array<any>) => { + this.isLoading = false; + + this.workflowVersions = _.map( + _.filter(versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED), + (version: any) => { + if (!this.assignInputParameters[this.operation.workflowId][version.id]) { + this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: any) => { + return new OperationParameter({ + name: input.name, + type: input.type && input.type.toLowerCase(), + property: null, + mandatory: input.mandatory, + }); + }); + } + return new DropdownValue(version.id, `v. ${version.name}`); + } + ); + + if (!selectedVersionId && versions.length) { + this.operation.workflowVersionId = _.last(versions.sort()).id; + } + this.changeWorkflowVersion(); + }); + + } + + changeWorkflowVersion() { + this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId]; + } + + toggleAssociateWorkflow() { + + if (!this.isAssociateWorkflow) { + this.inputParameters = this.noAssignInputParameters; + } else { + if (!this.operation.workflowId || !this.operation.workflowVersionId) { + this.inputParameters = []; + } else { + this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId]; } } - this.inputProperties = _.map(this.input.inputProperties, - (input: InputModel) => new DropdownValue(input.uniqueId, input.name) - ); } - addParam(param?: OperationParam): void { - this.inputParams.push(new OperationParam(param)); + addParam(param?: OperationParameter): void { + this.inputParameters.push(new OperationParameter(param)); } - isAddAllowed(): boolean { - if (this.inputParams.length === 0) { - return true; + isParamsValid(): boolean { + + for (let ctr=0; ctr<this.inputParameters.length; ctr++) { + if (!this.inputParameters[ctr].name || !this.inputParameters[ctr].property) { + return false; + } } + return true; - const {paramId, paramName} = _.last(this.inputParams); - return paramId && paramName.length > 0; } - onRemoveParam = (param: OperationParam): void => { - let index = _.indexOf(this.inputParams, param); - this.inputParams.splice(index, 1); + onRemoveParam = (param: OperationParameter): void => { + let index = _.indexOf(this.inputParameters, param); + this.inputParameters.splice(index, 1); } createInputParamList(): void { - this.operation.createInputParamsList(this.inputParams); + this.operation.createInputParamsList(this.inputParameters); } checkFormValidForSubmit(): boolean { - return this.operation.operationType && this.operation.operationType.length > 0 && this.isAddAllowed(); + return this.operation.operationType && + (!this.isAssociateWorkflow || 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 86d7628c17..2a72177621 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 @@ -1,18 +1,40 @@ -<div class="cell"> +<div class="cell field-name"> <input + *ngIf="!isAssociateWorkflow" type="text" - data-tests-id="inputParamName" - [(ngModel)]="param.paramName" /> + data-tests-id="paramName" + [(ngModel)]="param.name" /> + <span *ngIf="isAssociateWorkflow">{{param.name}}</span> </div> -<ui-element-dropdown - class="cell" - data-tests-id="inputParamProperty" - [values]="inputProps" - [(value)]="param.paramId"> -</ui-element-dropdown> +<div class="cell field-type"> + <ui-element-dropdown + *ngIf="!isAssociateWorkflow" + data-tests-id="paramType" + [values]="propTypeEnum" + [(value)]="param.type" + (valueChange)="onChangeType()"> + </ui-element-dropdown> + <span *ngIf="isAssociateWorkflow">{{param.type}}</span> +</div> + +<div class="cell field-property"> + <ui-element-dropdown + data-tests-id="paramProperty" + [values]="filteredInputProps" + [(value)]="param.property"> + </ui-element-dropdown> +</div> + +<div class="cell field-mandatory" *ngIf="!isAssociateWorkflow"> + <checkbox + *ngIf="!isAssociateWorkflow" + data-tests-id="paramMandatory" + [(checked)]="param.mandatory"> + </checkbox> +</div> -<div class="cell remove"> +<div class="cell remove" *ngIf="!isAssociateWorkflow"> <span class="sprite-new delete-item-icon" data-tests-id="removeInputParam" diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less index 9abd7c7681..8795d22e8d 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less @@ -5,7 +5,7 @@ align-items: center; justify-content: center; - .delete-item-icon { + .delete-btn { &:hover { cursor: pointer; } @@ -14,16 +14,26 @@ .cell { - padding: 0; + padding: 10px; + display: flex; + align-items: center; + + > * { + flex-basis: 100%; + } /deep/ select { height: 30px; - border: none; } input { height: 30px; - border: none; padding-left: 10px; } + + &.field-property { + &:last-child { + flex: 1; + } + } } 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 01e0629942..75d4fcf7d2 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 {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; -import {OperationParam} from 'app/models'; +import {OperationParameter} from 'app/models'; @Component({ selector: 'param-row', @@ -9,7 +9,22 @@ import {OperationParam} from 'app/models'; }) export class ParamRowComponent { - @Input() param: OperationParam; + @Input() param: OperationParameter; @Input() inputProps: Array<DropdownValue>; + @Input() propTypes: {}; @Input() onRemoveParam: Function; + @Input() isAssociateWorkflow: boolean; + + propTypeEnum: Array<string> = ['boolean', 'float', 'integer', 'string']; + filteredInputProps: Array<DropdownValue> = []; + + ngOnInit() { + this.onChangeType(); + } + + onChangeType() { + this.filteredInputProps = _.filter(this.inputProps, prop => { + return this.propTypes[prop.value] === this.param.type; + }); + } } |