From 502b7b7839374680a494c1606798a8b4588daa2b Mon Sep 17 00:00:00 2001 From: Arielk Date: Wed, 3 Oct 2018 14:06:13 +0300 Subject: Operation screen changes. 1. [ATTASDC-7390] Output parameter support 2. VF Workflow context 3. [ATTASDC-7420] "Opening same operation displays invalid fields and values" Change-Id: I7bb94b50ad299af6080266076b5e0b632ef5e0e7 Issue-ID: SDC-1814 Signed-off-by: Arielk --- catalog-ui/src/app/models/operation.ts | 14 +-- .../interface-operation.page.component.html | 4 +- .../interface-operation.page.component.ts | 28 +++-- .../operation-creator.component.html | 49 ++++---- .../operation-creator.component.less | 20 ++-- .../operation-creator.component.ts | 132 ++++++++++++++++++--- .../param-row/param-row.component.html | 2 +- .../param-row/param-row.component.less | 3 +- .../param-row/param-row.component.ts | 1 + catalog-ui/src/app/utils/common-utils.ts | 6 +- .../interface-operation-view.html | 7 +- 11 files changed, 196 insertions(+), 70 deletions(-) (limited to 'catalog-ui/src/app') diff --git a/catalog-ui/src/app/models/operation.ts b/catalog-ui/src/app/models/operation.ts index 2a5298c3b0..f15f0b13b5 100644 --- a/catalog-ui/src/app/models/operation.ts +++ b/catalog-ui/src/app/models/operation.ts @@ -31,14 +31,6 @@ export class OperationModel { workflowId: string; workflowVersionId: string; - protected OperationTypeEnum: Array = [ - 'Create', - 'Delete', - 'Instantiate', - 'Start', - 'Stop' - ]; - constructor(operation?: any) { if (operation) { this.description = operation.description; @@ -59,7 +51,11 @@ export class OperationModel { public createOutputParamsList(outputParams: Array): void { this.outputParams = { - listToscaDataDefinition: outputParams + listToscaDataDefinition: _.map(outputParams, output => { + const newOutput = {...output}; + delete newOutput.property; + return newOutput; + }) }; } } diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html index e210534352..c9fdf94fe0 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html @@ -15,6 +15,8 @@ -->
+ +
- -
{ - if (this.inputs) { + if (gotInputs) { this.isLoading = false; + } else { + gotOperations = true; } - let {interfaceOperations} = response; - this.component.interfaceOperations = interfaceOperations; - this.operationList = _.toArray(interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType)); + this.component.interfaceOperations = response.interfaceOperations; + this.operationList = _.toArray(response.interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType)); }); + this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => { - if (this.component.interfaceOperations) { + if (gotOperations) { this.isLoading = false; + } else { + gotInputs = true; } this.inputs = response.inputs; }); @@ -99,7 +109,7 @@ export class InterfaceOperationComponent { modalData.saveBtnText, 'blue', () => { - this.modalInstance.instance.dynamicContent.instance.createInputParamList(); + this.modalInstance.instance.dynamicContent.instance.createParamLists(); this.ModalServiceNg2.closeCurrentModal(); const {operation, isAssociateWorkflow} = this.modalInstance.instance.dynamicContent.instance; @@ -180,6 +190,8 @@ export class InterfaceOperationComponent { const versionId = response.workflowVersionId; const artifactId = response.artifactUUID; this.WorkflowServiceNg2.associateWorkflowArtifact(resourceId, operationId, workflowId, versionId, artifactId).subscribe(); + } else { + this.$state.go('workspace.plugins', { path: 'workflowDesigner' }); } }); } 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 d7d12d0585..5c511c15f3 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 @@ -31,7 +31,7 @@ [ngClass]="{'disabled':isEditMode}" />
-
+
-
- - +
+
+ + + +
+
-
+
- Input Parameters + + + + Add Input Parameter + (click)="addParam()">Add Parameter
Name Type - + Property - Mandatory - ●●● + Mandatory + ●●●
-
+
NO PARAMETERS TO SHOW
-
+
Select Workflow and Workflow Version above in order to see the parameters @@ -118,9 +124,10 @@
= []; assignInputParameters: { [key: string]: { [key: string]: Array; }; } = {}; + outputParameters: Array = []; + noAssignOutputParameters: Array = []; + assignOutputParameters: { [key: string]: { [key: string]: Array; }; } = {}; + + tableParameters: Array = []; + + associationOptions: Array; + workflowAssociationType: String; + enableWorkflowAssociation: boolean; - isAssociateWorkflow: boolean; isEditMode: boolean = false; isLoading: boolean = false; readonly: boolean; @@ -47,10 +57,30 @@ export class OperationCreatorComponent { propertyTooltipText: String; + WORKFLOW_ASSOCIATION_OPTIONS = { + NONE: 'No Workflow', + NEW: 'New Workflow', + EXISTING: 'Existing Workflow' + } + + TYPE_INPUT = 'Inputs'; + TYPE_OUTPUT = 'Outputs'; + + @ViewChild('propertyInputTabs') propertyInputTabs: Tabs; + currentTab: String; + constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) { this.translateService.languageChangedObservable.subscribe(lang => { this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT"); }); + this.currentTab = this.TYPE_INPUT; + + this.associationOptions = [ + new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.WORKFLOW_ASSOCIATION_OPTIONS.NONE), + new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.NEW, this.WORKFLOW_ASSOCIATION_OPTIONS.NEW), + new DropdownValue(this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) + ]; + this.workflowAssociationType = this.WORKFLOW_ASSOCIATION_OPTIONS.NONE; } ngOnInit() { @@ -91,20 +121,37 @@ export class OperationCreatorComponent { if (inputOperation) { if (!this.enableWorkflowAssociation || !inputOperation.workflowVersionId || this.isService) { this.inputParameters = this.noAssignInputParameters; - this.isAssociateWorkflow = false; - this.buildInputParams(); + this.outputParameters = this.noAssignOutputParameters; + this.buildParams(); + this.updateTable(); } else { - this.isAssociateWorkflow = true; - this.onSelectWorkflow(inputOperation.workflowVersionId).add(this.buildInputParams); + this.workflowAssociationType = this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING; + this.onSelectWorkflow(inputOperation.workflowVersionId).add(() => { + this.buildParams(); + this.updateTable(); + }); } if (inputOperation.uniqueId) { this.isEditMode = true; } } + this.updateTable(); } - buildInputParams = () => { + buildParams = () => { + if (this.input.operation.outputParams) { + this.currentTab = this.TYPE_OUTPUT; + this.updateTable(); + _.forEach( + [...this.input.operation.outputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)), + (output: OperationParameter) => { + this.addParam(output); + } + ); + } + this.currentTab = this.TYPE_INPUT; + this.updateTable(); if (this.input.operation.inputParams) { _.forEach( [...this.input.operation.inputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)), @@ -120,6 +167,7 @@ export class OperationCreatorComponent { this.operation.workflowVersionId = selectedVersionId || null; if (!this.assignInputParameters[this.operation.workflowId]) { this.assignInputParameters[this.operation.workflowId] = {}; + this.assignOutputParameters[this.operation.workflowId] = {}; } this.isLoading = true; @@ -141,6 +189,16 @@ export class OperationCreatorComponent { }); }) .sort((a, b) => a.name.localeCompare(b.name)); + + this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: any) => { + return new OperationParameter({ + name: output.name, + type: output.type && output.type.toLowerCase(), + property: null, + mandatory: output.mandatory, + }); + }) + .sort((a, b) => a.name.localeCompare(b.name)); } return new DropdownValue(version.id, `V ${version.name}`); } @@ -156,30 +214,55 @@ export class OperationCreatorComponent { changeWorkflowVersion() { this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId]; + this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId]; + this.updateTable(); } toggleAssociateWorkflow() { - if (!this.isAssociateWorkflow) { + if (this.workflowAssociationType !== this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) { this.inputParameters = this.noAssignInputParameters; + this.outputParameters = this.noAssignOutputParameters; } else { if (!this.operation.workflowId || !this.operation.workflowVersionId) { this.inputParameters = []; + this.outputParameters = []; } else { this.inputParameters = this.assignInputParameters[this.operation.workflowId][this.operation.workflowVersionId]; + this.outputParameters = this.assignOutputParameters[this.operation.workflowId][this.operation.workflowVersionId]; } } + this.updateTable(); + + } + + tabChanged = (event) => { + this.currentTab = event.title; + this.updateTable(); + } + + updateTable() { + switch (this.currentTab) { + case this.TYPE_INPUT: + this.tableParameters = this.inputParameters; + break; + case this.TYPE_OUTPUT: + this.tableParameters = this.outputParameters; + break; + } } addParam(param?: OperationParameter): void { - this.inputParameters.push(new OperationParameter(param)); + this.tableParameters.push(new OperationParameter(param)); } isParamsValid(): boolean { - for (let ctr=0; ctr { - let index = _.indexOf(this.inputParameters, param); - this.inputParameters.splice(index, 1); + let index = _.indexOf(this.tableParameters, param); + this.tableParameters.splice(index, 1); } - createInputParamList(): void { - this.operation.createInputParamsList(this.inputParameters); + createParamLists(): void { + this.operation.createInputParamsList(_.map(this.inputParameters, input => { + return { + name: input.name, + type: input.type, + property: input.property, + mandatory: Boolean(input.mandatory) + } + })); + this.operation.createOutputParamsList(_.map(this.outputParameters, output => { + return { + name: output.name, + type: output.type, + property: output.property, + mandatory: Boolean(output.mandatory) + } + })); } checkFormValidForSubmit(): boolean { return this.operation.operationType && - (!this.isAssociateWorkflow || this.operation.workflowVersionId) && + (this.workflowAssociationType !== this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING || 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 33085b08f4..8382f1e842 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 @@ -36,7 +36,7 @@ {{param.type}}
-
+
= []; filteredInputProps: Array = []; diff --git a/catalog-ui/src/app/utils/common-utils.ts b/catalog-ui/src/app/utils/common-utils.ts index 0c6a8b6a54..f195e2dc96 100644 --- a/catalog-ui/src/app/utils/common-utils.ts +++ b/catalog-ui/src/app/utils/common-utils.ts @@ -145,11 +145,13 @@ export class CommonUtils { return acc.concat( _.map(interf.operations, - ({description, name, uniqueId, inputs, outputs}) => { + ({description, name, uniqueId, inputs, outputs, workflowId, workflowVersionId}) => { const operation = new OperationModel({ description, operationType: name, - uniqueId + uniqueId, + workflowId, + workflowVersionId }); if (inputs) { const inputParams = _.map(inputs.listToscaDataDefinition, (input:any) => { diff --git a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html index 6c520d0471..a92fca2a1c 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/interface-operation/interface-operation-view.html @@ -15,5 +15,10 @@ -->
- + +
-- cgit 1.2.3-korg