From 802bd2af2e3c6ba92eb1ce0180a13b11018f6695 Mon Sep 17 00:00:00 2001 From: Arielk Date: Mon, 16 Apr 2018 15:37:39 +0300 Subject: Interface Operation tab and screens Change-Id: If03234c783d6ce16fdd0945987ada83b6285f97f Issue-ID: SDC-1060 Signed-off-by: Arielk --- .../interface-operation.module.ts | 19 +++ .../interface-operation.page.component.html | 38 +++++ .../interface-operation.page.component.less | 88 +++++++++++ .../interface-operation.page.component.ts | 176 +++++++++++++++++++++ .../operation-creator.component.html | 59 +++++++ .../operation-creator.component.less | 69 ++++++++ .../operation-creator.component.ts | 68 ++++++++ .../operation-creator/operation-creator.module.ts | 27 ++++ .../param-row/param-row.component.html | 21 +++ .../param-row/param-row.component.less | 29 ++++ .../param-row/param-row.component.ts | 15 ++ 11 files changed, 609 insertions(+) create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less create mode 100644 catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts (limited to 'catalog-ui/src/app/ng2/pages/interface-operation') diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts new file mode 100644 index 0000000000..caf6a3f528 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts @@ -0,0 +1,19 @@ +import {NgModule} from "@angular/core"; +import {CommonModule} from "@angular/common"; +import {InterfaceOperationComponent} from "./interface-operation.page.component"; + +@NgModule({ + declarations: [ + InterfaceOperationComponent + ], + imports: [ + CommonModule + ], + exports: [], + entryComponents: [ + InterfaceOperationComponent + ], + providers: [] +}) + +export class InterfaceOperationModule {} 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 new file mode 100644 index 0000000000..25e8672db8 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html @@ -0,0 +1,38 @@ +
+
+ Add Operation +
+ +
+ +
+ + + +

{{operation.operationType}}

+ + + +

{{operation.description}}

+ + + + + + + + +
+
+ +
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less new file mode 100644 index 0000000000..435502066e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less @@ -0,0 +1,88 @@ +@import '../../../../assets/styles/variables.less'; + +.interface-operation { + .add-btn { + position: relative; + top: -31px; + text-transform: uppercase; + font-size: 14px; + } + + a:not(.disabled) { + &:hover { + cursor: pointer; + } + } + + .operation-list { + border-top: 1px solid @main_color_o; + padding-top: 25px; + + .operation-row { + width: 100%; + border: 1px solid @main_color_o; + display: flex; + justify-content: space-between; + align-items: center; + height: 100px; + + &:hover { + border-color: @main_color_c; + cursor: pointer; + } + + &:not(:first-child) { + margin-top: 20px; + } + + .operation-info-container { + height: 100%; + display: flex; + align-items: center; + margin-right: 60px; + + .operation-title, .operation-description { + display: flex; + align-items: center; + + .operation-text { + overflow: hidden; + margin-bottom: 0; + max-height: 5rem; + } + } + + .operation-title { + flex-shrink: 0; + width: 200px; + height: calc(100% - 13px); + border-right: 1px solid @main_color_o; + margin: 4px 0; + padding: 0 30px; + + .operation-text { + white-space: nowrap; + text-overflow: ellipsis; + } + } + + .operation-description { + padding-left: 30px; + text-align: left; + font-family: @font-opensans-regular; + + .operation-text { + word-break: break-word; + } + } + } + + .operation-dumbo { + padding-right: 20px; + display: flex; + flex-direction: column; + align-items: left; + } + } + } +} 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 new file mode 100644 index 0000000000..c58e1de135 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts @@ -0,0 +1,176 @@ +import * as _ from "lodash"; +import {Component, Input, ComponentRef, Inject} from '@angular/core'; +import {Component as IComponent} from 'app/models/components/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 {OperationCreatorComponent} from './operation-creator/operation-creator.component'; + +@Component({ + selector: 'interface-operation', + templateUrl: './interface-operation.page.component.html', + styleUrls: ['interface-operation.page.component.less'], + providers: [ModalService] +}) + +export class InterfaceOperationComponent { + + modalInstance: ComponentRef; + operationList: Array = []; + openOperation: OperationModel; + + @Input() component: IComponent; + @Input() readonly: boolean; + + constructor( + @Inject('$state') private $state:ng.ui.IStateService, + private ComponentServiceNg2: ComponentServiceNg2, + private ModalServiceNg2: ModalService, + ) {} + + ngOnInit(): void { + this.ComponentServiceNg2.getInterfaceOperations(this.component).subscribe((response: ComponentGenericResponse) => { + let {interfaceOperations} = response; + this.component.interfaceOperations = interfaceOperations; + this.operationList = _.toArray(interfaceOperations); + }); + } + + getDisabled = (): boolean => { + 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 => { + const modalMap = { + create: { + modalTitle: 'Create a New Operation', + saveBtnText: 'Create', + submitCallback: this.createOperation, + }, + edit: { + modalTitle: 'Edit Operation', + saveBtnText: 'Save', + submitCallback: this.updateOperation, + } + }; + + const modalData = operation ? modalMap.edit : modalMap.create; + + if (this.openOperation) { + if (operation ? operation.uniqueId === this.openOperation.uniqueId : !this.openOperation.uniqueId) { + operation = this.openOperation; + } + } + + this.ComponentServiceNg2.getComponentInputs(this.component).subscribe((response: ComponentGenericResponse) => { + + 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} = this.modalInstance.instance.dynamicContent.instance; + this.openOperation = operation; + 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(); + }); + } + + onRemoveOperation = (event: Event, operation: OperationModel): void => { + event.stopPropagation(); + + const confirmCallback = () => { + this.ModalServiceNg2.closeCurrentModal(); + this.ComponentServiceNg2 + .deleteInterfaceOperation(this.component, operation) + .subscribe(() => { + const index = _.findIndex(this.operationList, el => el.uniqueId === operation.uniqueId); + this.operationList.splice(index, 1); + this.component.interfaceOperations = this.operationList; + }); + } + + this.modalInstance = this.ModalServiceNg2.createActionModal( + operation.operationType, + 'Are you sure you want to delete this operation?', + 'Delete', + confirmCallback, + 'Cancel', + ); + + this.modalInstance.instance.open(); + } + + private createOperation = (operation: OperationModel): any => { + 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 + }); + + }); + } + + private updateOperation = (operation: OperationModel): any => { + this.ComponentServiceNg2.updateInterfaceOperation(this.component, operation).subscribe(newOperation => { + this.openOperation = null; + const index = _.findIndex(this.operationList, el => el.uniqueId === operation.uniqueId); + this.operationList.splice(index, 1, newOperation); + this.component.interfaceOperations = this.operationList; + }); + } + +} 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 new file mode 100644 index 0000000000..9e47cd5cef --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html @@ -0,0 +1,59 @@ +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+ Input Parameters + + Add Input Parameter + +
+ +
+
+ Name + Property Name + +
+ +
+ No data to display. +
+ + + +
+ +
+
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 new file mode 100644 index 0000000000..289dd5b452 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less @@ -0,0 +1,69 @@ +@import '../../../../../assets/styles/variables.less'; + +.operation-creator { + font-family: @font-opensans-regular; + user-select: none; + padding-top: 12px; + padding-bottom: 20px; + + .i-sdc-form-label { + font-size: 12px; + } + + .w-sdc-form .i-sdc-form-item { + margin-bottom: 15px; + } + + .side-by-side { + display: flex; + + .i-sdc-form-item { + flex-basis: 100%; + + &:first-child { + flex-basis: 40%; + margin-right: 10px; + } + } + } + + .input-param-title { + font-size: 16px; + text-transform: uppercase; + } + + .separator-buttons { + margin: 10px 0; + display: flex; + justify-content: space-between; + + .add-param-link { + &:not(.disabled):hover { + cursor: pointer; + } + } + } + + .generic-table { + max-height: 233px; + + .header-row .header-cell { + &:last-child { + padding: 0; + } + } + + .data-row { + &.empty-msg { + padding: 6px 14px; + } + } + + /deep/ .cell { + &:last-child { + 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 new file mode 100644 index 0000000000..cc7b5feaf3 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts @@ -0,0 +1,68 @@ +import * as _ from "lodash"; +import {Component} from '@angular/core'; +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'], +}) + +export class OperationCreatorComponent { + + inputProperties: Array; + input: any; + inputParams: Array = []; + operation: OperationModel; + isEditMode: boolean = false; + + ngOnInit() { + this.operation = new OperationModel(this.input.operation || {}); + + if (this.input.operation) { + let {inputParams} = this.input.operation; + + if (inputParams) { + _.forEach(inputParams.listToscaDataDefinition, (input: OperationParam) => { + this.addParam(input); + }); + } + + if (this.input.operation.uniqueId) { + this.isEditMode = true; + } + } + + this.inputProperties = _.map(this.input.inputProperties, + (input: InputModel) => new DropdownValue(input.uniqueId, input.name) + ); + } + + addParam(param?: OperationParam): void { + this.inputParams.push(new OperationParam(param)); + } + + isAddAllowed(): boolean { + if (this.inputParams.length === 0) { + 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); + } + + createInputParamList(): void { + this.operation.createInputParamsList(this.inputParams); + } + + checkFormValidForSubmit(): boolean { + return this.operation.operationType && this.operation.operationType.length > 0 && this.isAddAllowed(); + } + +} 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 new file mode 100644 index 0000000000..9128e74641 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts @@ -0,0 +1,27 @@ +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 {ParamRowComponent} from './param-row/param-row.component'; + +@NgModule({ + declarations: [ + OperationCreatorComponent, + ParamRowComponent + ], + imports: [ + CommonModule, + FormsModule, + FormElementsModule, + UiElementsModule + ], + exports: [], + entryComponents: [ + OperationCreatorComponent + ], + providers: [] +}) + +export class OperationCreatorModule {} 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 new file mode 100644 index 0000000000..86d7628c17 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html @@ -0,0 +1,21 @@ +
+ +
+ + + + +
+ + +
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 new file mode 100644 index 0000000000..9abd7c7681 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less @@ -0,0 +1,29 @@ +@import '../../../../../../assets/styles/variables.less'; + +.remove { + display: flex; + align-items: center; + justify-content: center; + + .delete-item-icon { + &:hover { + cursor: pointer; + } + } +} + + +.cell { + padding: 0; + + /deep/ select { + height: 30px; + border: none; + } + + input { + height: 30px; + border: none; + padding-left: 10px; + } +} 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 new file mode 100644 index 0000000000..01e0629942 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts @@ -0,0 +1,15 @@ +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'; + +@Component({ + selector: 'param-row', + templateUrl: './param-row.component.html', + styleUrls: ['./param-row.component.less'] +}) + +export class ParamRowComponent { + @Input() param: OperationParam; + @Input() inputProps: Array; + @Input() onRemoveParam: Function; +} -- cgit 1.2.3-korg