From eaaf8019188ad99ad2b76e43519c7dae9f4ac592 Mon Sep 17 00:00:00 2001 From: Arielk Date: Tue, 31 Jul 2018 12:59:36 +0300 Subject: Enhance operations to associate workflows Change-Id: Iacf74ee333a3bc2e76e764c28ae660322bc9e6e4 Issue-ID: SDC-1535 Signed-off-by: Arielk --- .../interface-operation.page.component.ts | 42 +++--- .../operation-creator.component.html | 91 +++++++++--- .../operation-creator.component.less | 48 +++++- .../operation-creator.component.ts | 161 +++++++++++++++++---- .../param-row/param-row.component.html | 42 ++++-- .../param-row/param-row.component.less | 18 ++- .../param-row/param-row.component.ts | 19 ++- 7 files changed, 339 insertions(+), 82 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages') 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 @@
+ +
- - + + +
@@ -24,33 +25,85 @@
+
+ + +
+ +
+
+ + + +
+ +
+ + + +
+
+
Input Parameters - Add Input Parameter - + [ngClass]="{'disabled':!isParamsValid()}" + (click)="addParam()">Add Input Parameter
- Name - Property Name - + Name + Type + + Property + + + + Mandatory + ●●●
-
- No data to display. +
+
NO PARAMETERS TO SHOW
+
+
+ Select Workflow and Workflow Version above + in order to see the parameters +
+
+ Only certified workflow versions can be assigned to an operation +
+
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; input: any; - inputParams: Array = []; operation: OperationModel; + + workflows: Array = []; + workflowVersions: Array = []; + inputProperties: Array = []; + inputPropertyTypes: {}; + + inputParameters: Array = []; + noAssignInputParameters: Array = []; + assignInputParameters: { [key: string]: { [key: string]: Array; }; } = {}; + + 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 = 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) => { + 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 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 @@ -
+
+ data-tests-id="paramName" + [(ngModel)]="param.name" /> + {{param.name}}
- - +
+ + + {{param.type}} +
+ +
+ + +
+ +
+ + +
-
+
* { + 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; + @Input() propTypes: {}; @Input() onRemoveParam: Function; + @Input() isAssociateWorkflow: boolean; + + propTypeEnum: Array = ['boolean', 'float', 'integer', 'string']; + filteredInputProps: Array = []; + + ngOnInit() { + this.onChangeType(); + } + + onChangeType() { + this.filteredInputProps = _.filter(this.inputProps, prop => { + return this.propTypes[prop.value] === this.param.type; + }); + } } -- cgit 1.2.3-korg