From aefe3914447a6dfd0973a75cb517b338c088e37b Mon Sep 17 00:00:00 2001 From: Arielk Date: Sun, 14 Oct 2018 16:50:17 +0300 Subject: Operation WF association UI Change-Id: Id390261074721966ad85f881ae8c9e39b5022fad Issue-ID: SDC-1814 Signed-off-by: Arielk --- catalog-ui/src/app/models/operation.ts | 16 +++- catalog-ui/src/app/modules/directive-module.ts | 2 +- .../interface-operation.page.component.ts | 36 +++------ .../operation-creator.component.html | 17 ++-- .../operation-creator.component.ts | 94 +++++++++------------- .../operation-creator/operation-creator.module.ts | 4 +- .../param-row/param-row.component.html | 6 ++ .../param-row/param-row.component.less | 5 ++ .../param-row/param-row.component.ts | 14 +--- catalog-ui/src/app/utils/common-utils.ts | 3 +- .../interface-operation-view.html | 4 +- catalog-ui/src/assets/languages/en_US.json | 3 + 12 files changed, 94 insertions(+), 110 deletions(-) (limited to 'catalog-ui') diff --git a/catalog-ui/src/app/models/operation.ts b/catalog-ui/src/app/models/operation.ts index f15f0b13b5..2aa1332f06 100644 --- a/catalog-ui/src/app/models/operation.ts +++ b/catalog-ui/src/app/models/operation.ts @@ -2,7 +2,7 @@ export class OperationParameter { name: string; - type: string; + type: String; property: string; mandatory: boolean; @@ -20,6 +20,12 @@ export interface IOperationParamsList { listToscaDataDefinition: Array; } +export class WORKFLOW_ASSOCIATION_OPTIONS { + static NONE = 'NONE'; + static NEW = 'NEW'; + static EXISTING = 'EXISTING'; +} + export class OperationModel { operationType: string; description: string; @@ -28,16 +34,20 @@ export class OperationModel { inputParams: IOperationParamsList; outputParams: IOperationParamsList; + workflowAssociationType: string; workflowId: string; workflowVersionId: string; constructor(operation?: any) { if (operation) { + this.operationType = operation.operationType; this.description = operation.description; + this.uniqueId = operation.uniqueId; + this.inputParams = operation.inputParams; - this.operationType = operation.operationType; this.outputParams = operation.outputParams; - this.uniqueId = operation.uniqueId; + + this.workflowAssociationType = operation.workflowAssociationType; this.workflowId = operation.workflowId; this.workflowVersionId = operation.workflowVersionId; } diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts index e7acb1ccf6..683a3344ca 100644 --- a/catalog-ui/src/app/modules/directive-module.ts +++ b/catalog-ui/src/app/modules/directive-module.ts @@ -245,7 +245,7 @@ directiveModule.directive('ng2ServicePathSelector', downgradeComponent({ outputs: [] }) as angular.IDirectiveFactory); -directiveModule.directive('ng2InterfaceOperation', downgradeComponent({ +directiveModule.directive('interfaceOperation', downgradeComponent({ component: InterfaceOperationComponent, inputs: ['component', 'readonly'], outputs: [] 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 f23f66a5ff..2dff6a833d 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 @@ -4,9 +4,11 @@ import {Component as IComponent} from 'app/models/components/component'; import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config"; +import {Observable} from "rxjs/Observable"; + import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; import {ModalService} from 'app/ng2/services/modal.service'; -import {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse} from 'app/models'; +import {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models'; import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service'; import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response'; @@ -47,26 +49,14 @@ export class InterfaceOperationComponent { ngOnInit(): void { this.isLoading = true; - let gotOperations = false; - let gotInputs = false; - - this.ComponentServiceNg2.getInterfaceOperations(this.component).subscribe((response: ComponentGenericResponse) => { - if (gotInputs) { - this.isLoading = false; - } else { - gotOperations = true; - } - 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 (gotOperations) { - this.isLoading = false; - } else { - gotInputs = true; - } - this.inputs = response.inputs; + Observable.forkJoin( + this.ComponentServiceNg2.getInterfaceOperations(this.component), + this.ComponentServiceNg2.getComponentInputs(this.component) + ).subscribe((response) => { + this.isLoading = false; + this.component.interfaceOperations = response[0].interfaceOperations; + this.operationList = _.toArray(response[0].interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType)); + this.inputs = response[1].inputs; }); } @@ -183,14 +173,14 @@ export class InterfaceOperationComponent { this.operationList.push(new OperationModel(response)); this.operationList.sort((a, b) => a.operationType.localeCompare(b.operationType)); - if (response.workflowId) { + if (response.workflowId && operation.workflowAssociationType === 'EXISTING') { 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).subscribe(); - } else { + } else if (operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW) { 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 5c511c15f3..6d5fd8d72f 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 @@ -47,7 +47,8 @@
@@ -56,7 +57,7 @@
-
+
Add Parameter @@ -100,19 +101,19 @@ Property - Mandatory - ●●● + Mandatory + ●●●
NO PARAMETERS TO SHOW
-
+
Select Workflow and Workflow Version above in order to see the parameters @@ -127,7 +128,7 @@ *ngFor="let param of tableParameters" class="data-row" [isInputParam]="currentTab == TYPE_INPUT" - [isAssociateWorkflow]="workflowAssociationType == WORKFLOW_ASSOCIATION_OPTIONS.EXISTING" + [isAssociateWorkflow]="isUsingExistingWF()" [param]="param" [inputProps]="inputProperties" [propTypes]="inputPropertyTypes" 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 42f95d577c..207bfa9f55 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 @@ -5,7 +5,7 @@ import {Subscription} from "rxjs/Subscription"; import {TranslateService} from "app/ng2/shared/translator/translate.service"; import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service'; -import {OperationModel, OperationParameter, InputBEModel, RadioButtonModel} from 'app/models'; +import {OperationModel, OperationParameter, InputBEModel, RadioButtonModel, WORKFLOW_ASSOCIATION_OPTIONS} from 'app/models'; import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component"; import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; @@ -47,7 +47,6 @@ export class OperationCreatorComponent { tableParameters: Array = []; associationOptions: Array; - workflowAssociationType: String; enableWorkflowAssociation: boolean; isEditMode: boolean = false; @@ -57,12 +56,6 @@ export class OperationCreatorComponent { propertyTooltipText: String; - WORKFLOW_ASSOCIATION_OPTIONS = { - NONE: 'No Workflow', - NEW: 'New Workflow', - EXISTING: 'Existing Workflow' - } - TYPE_INPUT = 'Inputs'; TYPE_OUTPUT = 'Outputs'; @@ -72,15 +65,14 @@ export class OperationCreatorComponent { constructor(private workflowServiceNg2: WorkflowServiceNg2, private translateService: TranslateService) { this.translateService.languageChangedObservable.subscribe(lang => { this.propertyTooltipText = this.translateService.translate("OPERATION_PROPERTY_TOOLTIP_TEXT"); + + this.associationOptions = [ + new DropdownValue(WORKFLOW_ASSOCIATION_OPTIONS.NONE, this.translateService.translate("NO_WORKFLOW_ASSOCIATION")), + new DropdownValue(WORKFLOW_ASSOCIATION_OPTIONS.EXISTING, this.translateService.translate("EXISTING_WORKFLOW_ASSOCIATION")) + ]; }); - 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; + this.currentTab = this.TYPE_INPUT; } ngOnInit() { @@ -100,6 +92,7 @@ export class OperationCreatorComponent { const inputOperation = this.input.operation; this.operation = new OperationModel(inputOperation || {}); + this.operation.workflowAssociationType = inputOperation ? inputOperation.workflowAssociationType : WORKFLOW_ASSOCIATION_OPTIONS.NONE; if (this.enableWorkflowAssociation) { this.isLoading = true; @@ -125,7 +118,7 @@ export class OperationCreatorComponent { this.buildParams(); this.updateTable(); } else { - this.workflowAssociationType = this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING; + this.operation.workflowAssociationType = WORKFLOW_ASSOCIATION_OPTIONS.EXISTING; this.onSelectWorkflow(inputOperation.workflowVersionId).add(() => { this.buildParams(); this.updateTable(); @@ -179,26 +172,19 @@ export class OperationCreatorComponent { versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED ).sort((a, b) => a.name.localeCompare(b.name)), (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, - }); + if (!this.assignInputParameters[this.operation.workflowId][version.id] && !selectedVersionId) { + this.assignInputParameters[this.operation.workflowId][version.id] = _.map(version.inputs, (input: OperationParameter) => { + return new OperationParameter({...input, type: input.type.toLowerCase()}); }) .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, - }); + this.assignOutputParameters[this.operation.workflowId][version.id] = _.map(version.outputs, (output: OperationParameter) => { + return new OperationParameter({...output, type: output.type.toLowerCase()}); }) .sort((a, b) => a.name.localeCompare(b.name)); + } else if (selectedVersionId) { + this.assignInputParameters[this.operation.workflowId][version.id] = []; + this.assignOutputParameters[this.operation.workflowId][version.id] = []; } return new DropdownValue(version.id, `V ${version.name}`); } @@ -207,6 +193,7 @@ export class OperationCreatorComponent { if (!selectedVersionId && this.workflowVersions.length) { this.operation.workflowVersionId = _.last(this.workflowVersions).value; } + this.changeWorkflowVersion(); }); @@ -220,7 +207,7 @@ export class OperationCreatorComponent { toggleAssociateWorkflow() { - if (this.workflowAssociationType !== this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING) { + if (!this.isUsingExistingWF()) { this.inputParameters = this.noAssignInputParameters; this.outputParameters = this.noAssignOutputParameters; } else { @@ -258,16 +245,13 @@ export class OperationCreatorComponent { } isParamsValid(): boolean { - - for (let ctr=0; ctr { + if (!param.name || (this.currentTab == this.TYPE_INPUT && !param.property)) { + valid = false; } - } - return true; - + }); + return valid; } onRemoveParam = (param: OperationParameter): void => { @@ -276,27 +260,21 @@ export class OperationCreatorComponent { } 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) - } - })); + this.operation.createInputParamsList(this.inputParameters); + this.operation.createOutputParamsList(this.outputParameters); + } + + isUsingExistingWF(): boolean { + return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.EXISTING; + } + + shouldCreateWF(): boolean { + return this.operation.workflowAssociationType === WORKFLOW_ASSOCIATION_OPTIONS.NEW; } checkFormValidForSubmit(): boolean { return this.operation.operationType && - (this.workflowAssociationType !== this.WORKFLOW_ASSOCIATION_OPTIONS.EXISTING || this.operation.workflowVersionId) && + (!this.isUsingExistingWF() || this.operation.workflowVersionId) && this.isParamsValid(); } diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts index 9128e74641..461a35e4d1 100644 --- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts @@ -1,9 +1,11 @@ import {NgModule} from "@angular/core"; import {CommonModule} from "@angular/common"; -import {OperationCreatorComponent} from "./operation-creator.component"; + import {FormsModule} from "@angular/forms"; import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module"; import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; + +import {OperationCreatorComponent} from "./operation-creator.component"; import {ParamRowComponent} from './param-row/param-row.component'; @NgModule({ 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 8382f1e842..29e8a3508b 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 @@ -38,11 +38,17 @@
+ + No available properties of this type. +
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 81a1832c21..28932eb90f 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 @@ -36,5 +36,10 @@ &:last-child { flex: 1; } + + .no-properties-error { + color: red; + font-style: italic; + } } } 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 9f7f4230ee..8844cf65bb 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,5 +1,4 @@ import {Component, Input} from '@angular/core'; -import {PROPERTY_DATA} from "app/utils"; import {DataTypeService} from "app/ng2/services/data-type.service"; import {OperationParameter} from 'app/models'; import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; @@ -22,19 +21,8 @@ export class ParamRowComponent { propTypeEnum: Array = []; filteredInputProps: Array = []; - constructor(private dataTypeService:DataTypeService) {} - ngOnInit() { - const types = PROPERTY_DATA.TYPES.concat( - _.filter( - Object.keys(this.dataTypeService.getAllDataTypes()), - type => PROPERTY_DATA.TYPES.indexOf(type) === -1 - ) - ); - this.propTypeEnum = _.filter( - types, - type => _.toArray(this.propTypes).indexOf(type) > -1 - ); + this.propTypeEnum = _.uniq(_.toArray(this.propTypes)); this.onChangeType(); } diff --git a/catalog-ui/src/app/utils/common-utils.ts b/catalog-ui/src/app/utils/common-utils.ts index f195e2dc96..7ba50fdcf1 100644 --- a/catalog-ui/src/app/utils/common-utils.ts +++ b/catalog-ui/src/app/utils/common-utils.ts @@ -145,11 +145,12 @@ export class CommonUtils { return acc.concat( _.map(interf.operations, - ({description, name, uniqueId, inputs, outputs, workflowId, workflowVersionId}) => { + ({description, name, uniqueId, inputs, outputs, workflowId, workflowVersionId, workflowAssociationType}) => { const operation = new OperationModel({ description, operationType: name, uniqueId, + workflowAssociationType, workflowId, workflowVersionId }); 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 a92fca2a1c..0e7c355c47 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,10 +15,10 @@ -->
- - +
diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json index 48751c9f73..d959d84df9 100644 --- a/catalog-ui/src/assets/languages/en_US.json +++ b/catalog-ui/src/assets/languages/en_US.json @@ -454,6 +454,9 @@ "=========== OPERATION CREATOR ============": "", "OPERATION_PROPERTY_TOOLTIP_TEXT": "VNF properties are defined by the input parameter type. In case you can't find a certain parameter, it might be due to a wrong type selection.", "SERVICE_OPERATION_PROPERTY_TOOLTIP_TEXT": "Service properties are defined by the input parameter type. In case you can't find a certain parameter, it might be due to a wrong type selection.", + "NO_WORKFLOW_ASSOCIATION": "No Workflow", + "NEW_WORKFLOW_ASSOCIATION": "New Workflow", + "EXISTING_WORKFLOW_ASSOCIATION": "Existing Workflow", "=========== PLUGIN NOT CONNECTED ===========": "", "PLUGIN_NOT_CONNECTED_ERROR_MAIN": "The \"{{pluginName}}\" plugin is currently unavailable.", -- cgit 1.2.3-korg