"xEcompRequestId": " X-ECOMP-RequestID"
},
"imagesPath": "",
+ "enableWorkflowAssociation": "true",
"cpEndPointInstances" : ["cloudep","ossep","personep","premisesep"],
"toscaFileExtension":"yaml,yml",
"csarFileExtension":"csar",
{"text": "General", "action": "onMenuItemPressed", "state": "workspace.general"},
{"text": "TOSCA Artifacts", "action": "onMenuItemPressed", "state": "workspace.tosca_artifacts"},
{"text": "Composition", "action": "onMenuItemPressed", "state": "workspace.composition.details"},
+ {"text": "Operation", "action":"onMenuItemPressed", "state": "workspace.interface_operation"},
{"text": "Activity Log", "action": "onMenuItemPressed", "state": "workspace.activity_log"},
{"text": "Management Workflow", "action": "onMenuItemPressed", "state": "workspace.management_workflow"},
{"text": "Network Call Flow ", "action": "onMenuItemPressed", "state": "workspace.network_call_flow"},
"xEcompRequestId": " X-ECOMP-RequestID"
},
"imagesPath": "/sdc1",
+ "enableWorkflowAssociation": "true",
"cpEndPointInstances" : ["cloudep","ossep","personep","premisesep"],
"toscaFileExtension":"yaml,yml",
"csarFileExtension":"csar",
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {InterfaceOperationComponent} from "./interface-operation.page.component";
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
@NgModule({
declarations: [
InterfaceOperationComponent
],
imports: [
- CommonModule
+ CommonModule,
+ UiElementsModule
],
exports: [],
entryComponents: [
class="add-btn"
[ngClass]="{'disabled': readonly}"
data-tests-id="addInterfaceOperation"
- (click)="onAddOperation()">
+ (click)="onEditOperation()">
Add Operation
</div>
- <div class="operation-list" [ngClass]="{'disabled': readonly}">
+ <div class="operation-list">
+
+ <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
<div
class="operation-row"
</span>
</span>
- <span class="operation-dumbo">
+ <span class="operation-dumbo" *ngIf="!readonly">
<span
class="sprite-new delete-item-icon"
data-tests-id="deleteInterfaceOperation"
import {Component, Input, ComponentRef, Inject} from '@angular/core';
import {Component as IComponent} from 'app/models/components/component';
+import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
+
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 {ModalModel, ButtonModel, InputBEModel, OperationModel, CreateOperationResponse} from 'app/models';
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';
+import {OperationCreatorComponent, OperationCreatorInput} from './operation-creator/operation-creator.component';
@Component({
selector: 'interface-operation',
modalInstance: ComponentRef<ModalComponent>;
operationList: Array<OperationModel> = [];
openOperation: OperationModel;
+ enableWorkflowAssociation: boolean;
+ inputs: Array<InputBEModel>;
+ isLoading: boolean;
@Input() component: IComponent;
@Input() readonly: boolean;
constructor(
- @Inject('$state') private $state:ng.ui.IStateService,
+ @Inject(SdcConfigToken) sdcConfig: ISdcConfig,
private ComponentServiceNg2: ComponentServiceNg2,
private WorkflowServiceNg2: WorkflowServiceNg2,
private ModalServiceNg2: ModalService,
- ) {}
+ ) {
+ this.enableWorkflowAssociation = sdcConfig.enableWorkflowAssociation;
+ }
ngOnInit(): void {
+ this.isLoading = true;
this.ComponentServiceNg2.getInterfaceOperations(this.component).subscribe((response: ComponentGenericResponse) => {
+ if (this.inputs) {
+ this.isLoading = false;
+ }
let {interfaceOperations} = response;
this.component.interfaceOperations = interfaceOperations;
- this.operationList = _.toArray(interfaceOperations);
+ this.operationList = _.toArray(interfaceOperations).sort((a, b) => a.operationType.localeCompare(b.operationType));
+ });
+ this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => {
+ if (this.component.interfaceOperations) {
+ this.isLoading = false;
+ }
+ this.inputs = response.inputs;
});
}
return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit();
}
- onEditOperation = (operation: OperationModel): void => {
- this.ComponentServiceNg2
- .getInterfaceOperation(this.component, operation)
- .subscribe(op => this.onAddOperation(op));
- }
-
- onAddOperation = (operation?: OperationModel): void => {
+ onEditOperation = (operation?: OperationModel): void => {
const modalMap = {
create: {
modalTitle: 'Create a New Operation',
}
}
- this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => {
+ const cancelButton: ButtonModel = new ButtonModel(
+ 'Cancel',
+ 'outline white',
+ () => {
+ this.openOperation = null;
+ this.ModalServiceNg2.closeCurrentModal();
+ },
+ );
- const cancelButton: ButtonModel = new ButtonModel(
- 'Cancel',
- 'outline white',
- () => {
- this.openOperation = null;
- this.ModalServiceNg2.closeCurrentModal();
- },
- );
-
- const saveButton: ButtonModel = new ButtonModel(
- modalData.saveBtnText,
- 'blue',
- () => {
- this.modalInstance.instance.dynamicContent.instance.createInputParamList();
- this.ModalServiceNg2.closeCurrentModal();
-
- const {operation, isAssociateWorkflow} = this.modalInstance.instance.dynamicContent.instance;
- this.openOperation = {...operation};
-
- if (!isAssociateWorkflow) {
- operation.workflowId = null;
- operation.workflowVersionId = null;
- }
-
- modalData.submitCallback(operation);
- },
- this.getDisabled,
- );
-
- const modalModel: ModalModel = new ModalModel(
- 'l',
- modalData.modalTitle,
- '',
- [saveButton, cancelButton],
- 'standard',
- );
-
- this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
-
- this.ModalServiceNg2.addDynamicContentToModal(
- this.modalInstance,
- OperationCreatorComponent,
- {
- operation,
- inputProperties: response.inputs,
- },
- );
-
- this.modalInstance.instance.open();
- });
+ const saveButton: ButtonModel = new ButtonModel(
+ modalData.saveBtnText,
+ 'blue',
+ () => {
+ this.modalInstance.instance.dynamicContent.instance.createInputParamList();
+ this.ModalServiceNg2.closeCurrentModal();
+
+ const {operation, isAssociateWorkflow} = this.modalInstance.instance.dynamicContent.instance;
+ this.openOperation = {...operation};
+
+ if (!this.enableWorkflowAssociation && !isAssociateWorkflow) {
+ operation.workflowId = null;
+ operation.workflowVersionId = null;
+ }
+
+ modalData.submitCallback(operation);
+ },
+ this.getDisabled,
+ );
+
+ const modalModel: ModalModel = new ModalModel(
+ 'l',
+ modalData.modalTitle,
+ '',
+ [saveButton, cancelButton],
+ 'standard',
+ );
+
+ this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel);
+
+ let input: OperationCreatorInput = {
+ operation,
+ inputProperties: this.inputs,
+ enableWorkflowAssociation: this.enableWorkflowAssociation,
+ readonly: this.readonly,
+ isService: this.component.isService()
+ }
+
+ this.ModalServiceNg2.addDynamicContentToModal(
+ this.modalInstance,
+ OperationCreatorComponent,
+ input,
+ );
+
+ this.modalInstance.instance.open();
}
onRemoveOperation = (event: Event, operation: OperationModel): void => {
this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: CreateOperationResponse) => {
this.openOperation = null;
this.operationList.push(new OperationModel(response));
+ this.operationList.sort((a, b) => a.operationType.localeCompare(b.operationType));
+
if (response.workflowId) {
const resourceId = this.component.uuid;
const operationId = response.uniqueId;
const index = _.findIndex(this.operationList, el => el.uniqueId === operation.uniqueId);
this.operationList.splice(index, 1, newOperation);
this.component.interfaceOperations = this.operationList;
+
+ if (newOperation.workflowId) {
+ const resourceId = this.component.uuid;
+ const operationId = newOperation.uniqueId;
+ const workflowId = newOperation.workflowId;
+ const versionId = newOperation.workflowVersionId;
+ const artifactId = newOperation.artifactUUID;
+ this.WorkflowServiceNg2.associateWorkflowArtifact(resourceId, operationId, workflowId, versionId, artifactId).subscribe();
+ }
});
}
<div class="side-by-side">
<div class="i-sdc-form-item">
- <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>
+ <label class="i-sdc-form-label" [ngClass]="{'required': !isEditMode}">Operation Name</label>
+ <input
+ type="text"
+ name="type"
+ data-tests-id="operationType"
+ [(ngModel)]="operation.operationType"
+ [attr.maxLength]="200"
+ [ngClass]="{'disabled':isEditMode}" />
</div>
<div class="i-sdc-form-item" >
type="text"
data-tests-id="operationDescription"
name="description"
+ [ngClass]="{'disabled': readonly}"
[(ngModel)]="operation.description"
[attr.maxLength]="200" />
</div>
</div>
- <div class="i-sdc-form-item">
+ <div class="i-sdc-form-item" *ngIf="enableWorkflowAssociation">
<checkbox
[label]="'Assign Workflow'"
[(checked)]="isAssociateWorkflow"
(checkedChange)="toggleAssociateWorkflow()"
+ [ngClass]="{'disabled': readonly}"
data-tests-id="checkbox-assign-workflow">
</checkbox>
</div>
<label class="i-sdc-form-label required">Workflow</label>
<ui-element-dropdown
data-tests-id="associated-workflow"
+ [readonly]="readonly"
[values]="workflows"
[(value)]="operation.workflowId"
(valueChange)="onSelectWorkflow()">
<label class="i-sdc-form-label required">Workflow Version</label>
<ui-element-dropdown
data-tests-id="associated-workflow-version"
- [ngClass]="{'disabled': !operation.workflowId}"
+ [readonly]="!operation.workflowId || readonly"
[values]="workflowVersions"
[(value)]="operation.workflowVersionId"
(valueChange)="changeWorkflowVersion()">
<span class="input-param-title">Input Parameters</span>
<a
class="add-param-link add-btn"
- *ngIf="!isAssociateWorkflow"
+ *ngIf="!isAssociateWorkflow && !readonly"
data-tests-id="addInputParameter"
[ngClass]="{'disabled':!isParamsValid()}"
(click)="addParam()">Add Input Parameter</a>
<div class="generic-table">
<div class="header-row table-row">
<span class="cell header-cell field-name">Name</span>
- <span class="cell header-cell">Type</span>
+ <span class="cell header-cell field-type">Type</span>
<span class="cell header-cell field-property">
Property
<span
</span>
</span>
<span class="cell header-cell field-mandatory" *ngIf="!isAssociateWorkflow">Mandatory</span>
- <span class="cell header-cell remove" *ngIf="!isAssociateWorkflow">●●●</span>
+ <span class="cell header-cell remove" *ngIf="!isAssociateWorkflow && !readonly">●●●</span>
</div>
<div class="empty-msg data-row" *ngIf="inputParameters.length === 0">
</div>
<param-row
- *ngFor="let param of inputParameters; let idx=index"
+ *ngFor="let param of inputParameters"
class="data-row"
[isAssociateWorkflow]="isAssociateWorkflow"
[param]="param"
[inputProps]="inputProperties"
[propTypes]="inputPropertyTypes"
- [onRemoveParam]="onRemoveParam">
+ [onRemoveParam]="onRemoveParam"
+ [readonly]="readonly">
</param-row>
</div>
}
/deep/ .cell {
- &.field-name {
- flex: 2;
- }
-
-
- &.field-mandatory {
- flex: 0.5;
- text-align: center;
+ &.field-name, &.field-type {
+ flex: 1;
}
&.field-property {
}
}
+ &.field-mandatory {
+ flex: 0.5;
+ text-align: center;
+ }
+
&.remove {
min-width: 40px;
}
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 {OperationModel, OperationParameter, InputBEModel} from 'app/models';
import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+export interface OperationCreatorInput {
+ operation: OperationModel,
+ inputProperties: Array<InputBEModel>,
+ enableWorkflowAssociation: boolean,
+ readonly: boolean,
+ isService: boolean
+}
+
@Component({
selector: 'operation-creator',
templateUrl: './operation-creator.component.html',
- styleUrls:['./operation-creator.component.less'],
+ styleUrls: ['./operation-creator.component.less'],
providers: [TranslateService]
})
export class OperationCreatorComponent {
- input: any;
+ input: OperationCreatorInput;
operation: OperationModel;
workflows: Array<DropdownValue> = [];
workflowVersions: Array<DropdownValue> = [];
inputProperties: Array<DropdownValue> = [];
- inputPropertyTypes: {};
+ inputPropertyTypes: { [key: string]: string };
inputParameters: Array<OperationParameter> = [];
noAssignInputParameters: Array<OperationParameter> = [];
assignInputParameters: { [key: string]: { [key: string]: Array<OperationParameter>; }; } = {};
- isAssociateWorkflow: boolean = false;
+ enableWorkflowAssociation: boolean;
+ isAssociateWorkflow: boolean;
isEditMode: boolean = false;
isLoading: boolean = false;
+ readonly: boolean;
+ isService: boolean;
propertyTooltipText: String;
ngOnInit() {
+ this.readonly = this.input.readonly;
+ this.isService = this.input.isService;
+ this.enableWorkflowAssociation = this.input.enableWorkflowAssociation && !this.isService;
+
this.inputProperties = _.map(this.input.inputProperties,
- (input: InputModel) => new DropdownValue(input.uniqueId, input.name)
+ (input: InputBEModel) => new DropdownValue(input.uniqueId, input.name)
);
this.inputPropertyTypes = {};
- _.forEach(this.input.inputProperties, (input: InputModel) => {
+ _.forEach(this.input.inputProperties, (input: InputBEModel) => {
this.inputPropertyTypes[input.uniqueId] = input.type;
});
- const inputOperation = <OperationModel>this.input.operation;
+ 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);
+ if (this.enableWorkflowAssociation) {
+ this.isLoading = true;
+ this.workflowServiceNg2.getWorkflows().subscribe(workflows => {
+ this.isLoading = false;
+ this.workflows = _.map(workflows, (workflow: any) => {
+ return new DropdownValue(workflow.id, workflow.name);
});
- }
- }
-
- this.isLoading = true;
- this.workflowServiceNg2.getWorkflows().subscribe(workflows => {
- this.isLoading = false;
-
- this.workflows = _.map(workflows, (workflow: any) => {
- return new DropdownValue(workflow.id, workflow.name);
+ this.reconstructOperation();
});
+ } else {
+ this.reconstructOperation();
+ }
- 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;
- }
+ reconstructOperation = () => {
+ const inputOperation = this.input.operation;
+ if (inputOperation) {
+ if (!this.enableWorkflowAssociation || !inputOperation.workflowVersionId || this.isService) {
+ this.inputParameters = this.noAssignInputParameters;
+ this.isAssociateWorkflow = false;
+ this.buildInputParams();
+ } else {
+ this.isAssociateWorkflow = true;
+ this.onSelectWorkflow(inputOperation.workflowVersionId).add(this.buildInputParams);
}
- });
+ if (inputOperation.uniqueId) {
+ this.isEditMode = true;
+ }
+ }
+ }
+ buildInputParams = () => {
+ if (this.input.operation.inputParams) {
+ _.forEach(
+ [...this.input.operation.inputParams.listToscaDataDefinition].sort((a, b) => a.name.localeCompare(b.name)),
+ (input: OperationParameter) => {
+ this.addParam(input);
+ }
+ );
+ }
}
onSelectWorkflow(selectedVersionId?: string): Subscription {
this.isLoading = false;
this.workflowVersions = _.map(
- _.filter(versions, version => version.state === this.workflowServiceNg2.VERSION_STATE_CERTIFIED),
+ _.filter(
+ 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) => {
property: null,
mandatory: input.mandatory,
});
- });
+ })
+ .sort((a, b) => a.name.localeCompare(b.name));
}
- return new DropdownValue(version.id, `v. ${version.name}`);
+ return new DropdownValue(version.id, `V ${version.name}`);
}
);
- if (!selectedVersionId && versions.length) {
- this.operation.workflowVersionId = _.last(versions.sort()).id;
+ if (!selectedVersionId && this.workflowVersions.length) {
+ this.operation.workflowVersionId = _.last(this.workflowVersions).value;
}
this.changeWorkflowVersion();
});
<div class="cell field-name">
- <input
+ <ui-element-input
*ngIf="!isAssociateWorkflow"
- type="text"
data-tests-id="paramName"
- [(ngModel)]="param.name" />
+ [(value)]="param.name"
+ [readonly]="readonly">
+ </ui-element-input>
<span *ngIf="isAssociateWorkflow">{{param.name}}</span>
</div>
data-tests-id="paramType"
[values]="propTypeEnum"
[(value)]="param.type"
- (valueChange)="onChangeType()">
+ (valueChange)="onChangeType()"
+ [readonly]="readonly">
</ui-element-dropdown>
<span *ngIf="isAssociateWorkflow">{{param.type}}</span>
</div>
<ui-element-dropdown
data-tests-id="paramProperty"
[values]="filteredInputProps"
- [(value)]="param.property">
+ [(value)]="param.property"
+ [readonly]="readonly">
</ui-element-dropdown>
</div>
<checkbox
*ngIf="!isAssociateWorkflow"
data-tests-id="paramMandatory"
- [(checked)]="param.mandatory">
+ [(checked)]="param.mandatory"
+ [ngClass]="{'disabled':readonly}">
</checkbox>
</div>
-<div class="cell remove" *ngIf="!isAssociateWorkflow">
+<div class="cell remove" *ngIf="!isAssociateWorkflow && !readonly">
<span
class="sprite-new delete-item-icon"
data-tests-id="removeInputParam"
import {Component, Input} from '@angular/core';
-import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+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";
@Component({
selector: 'param-row',
export class ParamRowComponent {
@Input() param: OperationParameter;
@Input() inputProps: Array<DropdownValue>;
- @Input() propTypes: {};
+ @Input() propTypes: { [key: string]: string };
@Input() onRemoveParam: Function;
@Input() isAssociateWorkflow: boolean;
+ @Input() readonly: boolean;
- propTypeEnum: Array<string> = ['boolean', 'float', 'integer', 'string'];
+ propTypeEnum: Array<String> = [];
filteredInputProps: Array<DropdownValue> = [];
+ 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.onChangeType();
}
return this.dataTypes[typeName];
}
+ public getAllDataTypes(): DataTypesMap {
+ return this.dataTypes;
+ }
+
public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
//push all child properties to array
"=========== 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.",
"=========== PLUGIN NOT CONNECTED ===========": "",
"PLUGIN_NOT_CONNECTED_ERROR_MAIN": "The \"{{pluginName}}\" plugin is currently unavailable.",
Code Review / sdc.git / commitdiff