summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/interface-operation
diff options
context:
space:
mode:
authorArielk <Ariel.Kenan@amdocs.com>2018-04-16 15:37:39 +0300
committerAvi Gaffa <avi.gaffa@amdocs.com>2018-05-01 03:38:57 +0000
commit802bd2af2e3c6ba92eb1ce0180a13b11018f6695 (patch)
tree0906a846aa2c3edc9f2067364ed812bdead9f939 /catalog-ui/src/app/ng2/pages/interface-operation
parentd0f6cb3ef9600846358a0e7f849759be6f9d917e (diff)
Interface Operation tab and screens
Change-Id: If03234c783d6ce16fdd0945987ada83b6285f97f Issue-ID: SDC-1060 Signed-off-by: Arielk <Ariel.Kenan@amdocs.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/interface-operation')
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts19
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html38
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.less88
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts176
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html59
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less69
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts68
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts27
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html21
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less29
-rw-r--r--catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts15
11 files changed, 609 insertions, 0 deletions
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 @@
+<div class="interface-operation">
+ <div
+ class="add-btn"
+ [ngClass]="{'disabled': readonly}"
+ data-tests-id="addInterfaceOperation"
+ (click)="onAddOperation()">
+ Add Operation
+ </div>
+
+ <div class="operation-list" [ngClass]="{'disabled': readonly}">
+
+ <div
+ class="operation-row"
+ *ngFor="let operation of operationList"
+ (click)="onEditOperation(operation)">
+
+ <span class="operation-info-container">
+ <span class="operation-title">
+ <p class="operation-text" data-tests-id="interfaceOperationType">{{operation.operationType}}</p>
+ </span>
+
+ <span class="operation-description">
+ <p class="operation-text" data-tests-id="interfaceOperationDescription">{{operation.description}}</p>
+ </span>
+ </span>
+
+ <span class="operation-dumbo">
+ <span
+ class="sprite-new delete-item-icon"
+ data-tests-id="deleteInterfaceOperation"
+ (click)="onRemoveOperation($event, operation)">
+ </span>
+ </span>
+
+ </div>
+ </div>
+
+</div>
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<ModalComponent>;
+ operationList: Array<OperationModel> = [];
+ 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 @@
+<div class="operation-creator">
+ <form class="w-sdc-form">
+
+ <div class="side-by-side">
+ <div class="i-sdc-form-item">
+ <label class="i-sdc-form-label">Operation Type</label>
+ <input
+ type="text"
+ data-tests-id="operationType"
+ name="operationType"
+ [(ngModel)]="operation.operationType"
+ [attr.maxLength]="200"
+ [disabled]="isEditMode" />
+ </div>
+
+ <div class="i-sdc-form-item" >
+ <label class="i-sdc-form-label">Description</label>
+ <input
+ type="text"
+ data-tests-id="operationDescription"
+ name="description"
+ [(ngModel)]="operation.description"
+ [attr.maxLength]="200" />
+ </div>
+ </div>
+
+ <div class="separator-buttons">
+ <span class="input-param-title">Input Parameters</span>
+ <a
+ class="add-param-link"
+ data-tests-id="addInputParameter"
+ [ngClass]="{'disabled':!isAddAllowed()}"
+ (click)="addParam()">
+ Add Input Parameter
+ </a>
+ </div>
+
+ <div class="generic-table">
+ <div class="header-row table-row">
+ <span class="cell header-cell">Name</span>
+ <span class="cell header-cell">Property Name</span>
+ <span class="cell header-cell"></span>
+ </div>
+
+ <div class="empty-msg data-row" *ngIf="inputParams.length === 0">
+ No data to display.
+ </div>
+
+ <param-row
+ *ngFor="let param of inputParams; let idx=index"
+ class="data-row"
+ [param]="param"
+ [inputProps]="inputProperties"
+ [onRemoveParam]="onRemoveParam">
+ </param-row>
+ </div>
+
+ </form>
+</div>
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<DropdownValue>;
+ input: any;
+ inputParams: Array<OperationParam> = [];
+ 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 @@
+<div class="cell">
+ <input
+ type="text"
+ data-tests-id="inputParamName"
+ [(ngModel)]="param.paramName" />
+</div>
+
+<ui-element-dropdown
+ class="cell"
+ data-tests-id="inputParamProperty"
+ [values]="inputProps"
+ [(value)]="param.paramId">
+</ui-element-dropdown>
+
+<div class="cell remove">
+ <span
+ class="sprite-new delete-item-icon"
+ data-tests-id="removeInputParam"
+ (click)="onRemoveParam(param)">
+ </span>
+</div>
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<DropdownValue>;
+ @Input() onRemoveParam: Function;
+}