From 26e5029d922779fd7e786c1a31b6b37492132388 Mon Sep 17 00:00:00 2001 From: vasraz Date: Tue, 16 Feb 2021 17:37:57 +0000 Subject: Implement Attributes/Outputs FE Change-Id: I014bb0ebc07f3fea4266a4f295172eadee546705 Signed-off-by: Vasyl Razinkov Issue-ID: SDC-3448 --- .../attributes/attribute-modal.component.ts | 2 +- .../workspace/attributes/attributes.component.html | 93 ---------- .../workspace/attributes/attributes.component.less | 36 ---- .../attributes/attributes.component.spec.ts | 182 -------------------- .../workspace/attributes/attributes.component.ts | 188 --------------------- .../workspace/attributes/attributes.module.ts | 2 +- 6 files changed, 2 insertions(+), 501 deletions(-) delete mode 100644 catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.html delete mode 100644 catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.less delete mode 100644 catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.spec.ts delete mode 100644 catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.ts (limited to 'catalog-ui/src/app/ng2/pages/workspace') diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.ts index b0a7651809..426ed4063e 100644 --- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.ts +++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.ts @@ -11,7 +11,7 @@ import { AttributeOptions } from './attributes-options'; @Component({ selector: 'attribute-modal', templateUrl: './attribute-modal.component.html', - styleUrls: ['./attributes.component.less'] + styleUrls: ['../../../../view-models/workspace/tabs/attributes/attributes.component.less'] }) export class AttributeModalComponent implements OnInit { diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.html b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.html deleted file mode 100644 index 6d50bbe11b..0000000000 --- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.html +++ /dev/null @@ -1,93 +0,0 @@ - -
- -
- - -
- - - - - -
{{row.description}}
- - - - - - -
- - {{ row.name }} -
- - - - - - - {{row.type}} - - - - - - {{row._default}} - - - - - -
- - - - -
- - - - -
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.less b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.less deleted file mode 100644 index 3e91ae4689..0000000000 --- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.less +++ /dev/null @@ -1,36 +0,0 @@ -.action-bar-wrapper { - flex: 0 0 30%; - display: flex; - justify-content: flex-end; - margin-bottom: 10px; -} - -.add-attr-icon{ - cursor: pointer; -} - -.attr-container { - display: flex; - justify-content: space-between; - - .attr-col { - display: flex; - flex-direction: column; - max-width: 275px; - flex-grow: 1; - } - -} - -.attributeType { - margin-bottom: 10px; -} - -sdc-checkbox { - margin-top: 20px; -} - -.actionColumn { - text-align: center; - padding: 5px; -} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.spec.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.spec.ts deleted file mode 100644 index f676e2b4d9..0000000000 --- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.spec.ts +++ /dev/null @@ -1,182 +0,0 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture } from '@angular/core/testing'; -import { NgxDatatableModule } from '@swimlane/ngx-datatable'; -import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular'; -import 'rxjs/add/observable/of'; -import { Observable } from 'rxjs/Rx'; -import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper'; -import { ComponentMetadata } from '../../../../models/component-metadata'; -import { ModalsHandler } from '../../../../utils'; -import { TopologyTemplateService } from '../../../services/component-services/topology-template.service'; -import { TranslateService } from '../../../shared/translator/translate.service'; -import { WorkspaceService } from '../workspace.service'; -import { AttributesComponent } from './attributes.component'; - -describe('attributes component', () => { - - let fixture: ComponentFixture; - - // Mocks - let workspaceServiceMock: Partial; - let topologyTemplateServiceMock: Partial; - let loaderServiceMock: Partial; - let componentMetadataMock: ComponentMetadata; - let modalServiceMock: Partial; - - const mockAttributesList = [ - { uniqueId: '1', name: 'attr1', description: 'description1', type: 'string', hidden: false, defaultValue: 'val1', schema: null }, - { uniqueId : '2', name : 'attr2', description: 'description2', type : 'int', hidden : false, defaultValue : 1, schema : null}, - { uniqueId : '3', name : 'attr3', description: 'description3', type : 'double', hidden : false, defaultValue : 1.0, schema : null}, - { uniqueId : '4', name : 'attr4', description: 'description4', type : 'boolean', hidden : false, defaultValue : true, schema : null}, - ]; - - const newAttribute = { - uniqueId : '5', name : 'attr5', description: 'description5', type : 'string', hidden : false, defaultValue : 'val5', schema : null - }; - const updatedAttribute = { - uniqueId : '2', name : 'attr2', description: 'description_new', type : 'string', hidden : false, defaultValue : 'new_val2', schema : null - }; - const errorAttribute = { - uniqueId : '99', name : 'attr99', description: 'description_error', type : 'string', hidden : false, defaultValue : 'error', schema : null - }; - - beforeEach( - async(() => { - - componentMetadataMock = new ComponentMetadata(); - componentMetadataMock.uniqueId = 'fake'; - componentMetadataMock.componentType = 'VL'; - - topologyTemplateServiceMock = { - getComponentAttributes: jest.fn().mockResolvedValue({ attributes : mockAttributesList }), - addAttributeAsync: jest.fn().mockImplementation( - (compType, cUid, attr) => { - if (attr === errorAttribute) { - return Observable.throwError('add_error').toPromise(); - } else { - return Observable.of(newAttribute).toPromise(); - } - } - ), - updateAttributeAsync: jest.fn().mockImplementation( - (compType, cUid, attr) => { - if (attr === errorAttribute) { - return Observable.throwError('update_error').toPromise(); - } else { - return Observable.of(updatedAttribute).toPromise(); - } - } - ), - deleteAttributeAsync: jest.fn().mockImplementation((cid, ctype, attr) => Observable.of(attr)) - }; - - workspaceServiceMock = { - metadata: componentMetadataMock - }; - - const customModalInstance = { innerModalContent: { instance: { onValidationChange: { subscribe: jest.fn()}}}}; - - modalServiceMock = { - openInfoModal: jest.fn(), - openCustomModal: jest.fn().mockImplementation(() => customModalInstance) - }; - - loaderServiceMock = { - activate: jest.fn(), - deactivate: jest.fn() - }; - - const configure: ConfigureFn = (testBed) => { - testBed.configureTestingModule({ - declarations: [AttributesComponent], - imports: [NgxDatatableModule], - schemas: [NO_ERRORS_SCHEMA], - providers: [ - {provide: WorkspaceService, useValue: workspaceServiceMock}, - {provide: TopologyTemplateService, useValue: topologyTemplateServiceMock}, - {provide: ModalsHandler, useValue: {}}, - {provide: TranslateService, useValue: { translate: jest.fn() }}, - {provide: SdcUiServices.ModalService, useValue: modalServiceMock }, - {provide: SdcUiServices.LoaderService, useValue: loaderServiceMock } - ], - }); - }; - - configureTests(configure).then((testBed) => { - fixture = testBed.createComponent(AttributesComponent); - }); - }) - ); - - it('should see exactly 1 attributes on init', async () => { - await fixture.componentInstance.asyncInitComponent(); - expect(fixture.componentInstance.getAttributes().length).toEqual(4); - }); - - it('should see exactly 5 attributes when adding', async () => { - await fixture.componentInstance.asyncInitComponent(); - expect(fixture.componentInstance.getAttributes().length).toEqual(4); - - await fixture.componentInstance.addOrUpdateAttribute(newAttribute, false); - expect(fixture.componentInstance.getAttributes().length).toEqual(5); - }); - - it('should see exactly 3 attributes when deleting', async () => { - await fixture.componentInstance.asyncInitComponent(); - expect(fixture.componentInstance.getAttributes().length).toEqual(4); - const attrToDelete = mockAttributesList[0]; - expect(fixture.componentInstance.getAttributes().filter((attr) => attr.uniqueId === attrToDelete.uniqueId).length).toEqual(1); - await fixture.componentInstance.deleteAttribute(attrToDelete); - expect(fixture.componentInstance.getAttributes().length).toEqual(3); - expect(fixture.componentInstance.getAttributes().filter((attr) => attr.uniqueId === attrToDelete.uniqueId).length).toEqual(0); - }); - - it('should see updated attribute', async () => { - await fixture.componentInstance.asyncInitComponent(); - - await fixture.componentInstance.addOrUpdateAttribute(updatedAttribute, true); - expect(fixture.componentInstance.getAttributes().length).toEqual(4); - const attribute = fixture.componentInstance.getAttributes().filter( (attr) => { - return attr.uniqueId === updatedAttribute.uniqueId; - })[0]; - expect(attribute.description).toEqual( 'description_new'); - }); - - it('Add fails, make sure loader is deactivated and attribute is not added', async () => { - await fixture.componentInstance.asyncInitComponent(); - const numAttributes = fixture.componentInstance.getAttributes().length; - await fixture.componentInstance.addOrUpdateAttribute(errorAttribute, false); // Add - expect(loaderServiceMock.deactivate).toHaveBeenCalled(); - expect(fixture.componentInstance.getAttributes().length).toEqual(numAttributes); - }); - - it('Update fails, make sure loader is deactivated', async () => { - await fixture.componentInstance.asyncInitComponent(); - const numAttributes = fixture.componentInstance.getAttributes().length; - await fixture.componentInstance.addOrUpdateAttribute(errorAttribute, true); // Add - expect(loaderServiceMock.deactivate).toHaveBeenCalled(); - expect(fixture.componentInstance.getAttributes().length).toEqual(numAttributes); - }); - - it('on delete modal shell be opened', async () => { - await fixture.componentInstance.asyncInitComponent(); - const event = { stopPropagation: jest.fn() }; - fixture.componentInstance.onDeleteAttribute(event, fixture.componentInstance.getAttributes()[0]); - expect(event.stopPropagation).toHaveBeenCalled(); - expect(modalServiceMock.openInfoModal).toHaveBeenCalled(); - }); - - it('on add modal shell be opened', async () => { - await fixture.componentInstance.asyncInitComponent(); - fixture.componentInstance.onAddAttribute(); - expect(modalServiceMock.openCustomModal).toHaveBeenCalled(); - }); - - it('on edit modal shell be opened', async () => { - await fixture.componentInstance.asyncInitComponent(); - const event = { stopPropagation: jest.fn() }; - fixture.componentInstance.onEditAttribute(event, fixture.componentInstance.getAttributes()[0]); - expect(event.stopPropagation).toHaveBeenCalled(); - expect(modalServiceMock.openCustomModal).toHaveBeenCalled(); - }); -}); diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.ts deleted file mode 100644 index bc47f1456b..0000000000 --- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.component.ts +++ /dev/null @@ -1,188 +0,0 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { Select } from '@ngxs/store'; -import { IAttributeModel } from 'app/models'; -import * as _ from 'lodash'; -import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular'; -import { ModalComponent } from 'onap-ui-angular/dist/modals/modal.component'; -import { AttributeModel } from '../../../../models'; -import { Resource } from '../../../../models'; -import { ModalsHandler } from '../../../../utils'; -import { TopologyTemplateService } from '../../../services/component-services/topology-template.service'; -import { TranslateService } from '../../../shared/translator/translate.service'; -import { WorkspaceState } from '../../../store/states/workspace.state'; -import { WorkspaceService } from '../workspace.service'; -import { AttributeModalComponent } from './attribute-modal.component'; - -@Component({ - selector: 'attributes', - templateUrl: './attributes.component.html', - styleUrls: ['./attributes.component.less', '../../../../../assets/styles/table-style.less'] -}) -export class AttributesComponent implements OnInit { - - @Select(WorkspaceState.isViewOnly) - isViewOnly$: boolean; - - @ViewChild('componentAttributesTable') - private table: any; - - private componentType: string; - private componentUid: string; - - private attributes: IAttributeModel[] = []; - private temp: IAttributeModel[] = []; - private customModalInstance: ModalComponent; - - constructor(private workspaceService: WorkspaceService, - private topologyTemplateService: TopologyTemplateService, - private modalsHandler: ModalsHandler, - private modalService: SdcUiServices.ModalService, - private loaderService: SdcUiServices.LoaderService, - private translateService: TranslateService) { - - this.componentType = this.workspaceService.metadata.componentType; - this.componentUid = this.workspaceService.metadata.uniqueId; - } - - ngOnInit(): void { - this.asyncInitComponent(); - } - - async asyncInitComponent() { - this.loaderService.activate(); - const response = await this.topologyTemplateService.getComponentAttributes(this.componentType, this.componentUid); - this.attributes = response.attributes; - this.temp = [...response.attributes]; - this.loaderService.deactivate(); - } - - getAttributes(): IAttributeModel[] { - return this.attributes; - } - - addOrUpdateAttribute = async (attribute: AttributeModel, isEdit: boolean) => { - this.loaderService.activate(); - let attributeFromServer: AttributeModel; - this.temp = [...this.attributes]; - - const deactivateLoader = () => { - this.loaderService.deactivate(); - return undefined; - }; - - if (isEdit) { - attributeFromServer = await this.topologyTemplateService - .updateAttributeAsync(this.componentType, this.componentUid, attribute) - .catch(deactivateLoader); - if (attributeFromServer) { - const indexOfUpdatedAttribute = _.findIndex(this.temp, (e) => e.uniqueId === attributeFromServer.uniqueId); - this.temp[indexOfUpdatedAttribute] = attributeFromServer; - } - } else { - attributeFromServer = await this.topologyTemplateService - .addAttributeAsync(this.componentType, this.componentUid, attribute) - .catch(deactivateLoader); - if (attributeFromServer) { - this.temp.push(attributeFromServer); - } - } - this.attributes = this.temp; - this.loaderService.deactivate(); - } - - deleteAttribute = async (attributeToDelete: AttributeModel) => { - this.loaderService.activate(); - this.temp = [...this.attributes]; - const res = await this.topologyTemplateService.deleteAttributeAsync(this.componentType, this.componentUid, attributeToDelete); - _.remove(this.temp, (attr) => attr.uniqueId === attributeToDelete.uniqueId); - this.attributes = this.temp; - this.loaderService.deactivate(); - }; - - openAddEditModal(selectedRow: AttributeModel, isEdit: boolean) { - const component = new Resource(undefined, undefined, undefined); - component.componentType = this.componentType; - component.uniqueId = this.componentUid; - - const title: string = this.translateService.translate('ATTRIBUTE_DETAILS_MODAL_TITLE'); - const attributeModalConfig = { - title, - size: 'md', - type: SdcUiCommon.ModalType.custom, - buttons: [ - { - id: 'save', - text: 'Save', - // spinner_position: Placement.left, - size: 'sm', - callback: () => this.modalCallBack(isEdit), - closeModal: true, - disabled: false, - } - ] as SdcUiCommon.IModalButtonComponent[] - }; - - this.customModalInstance = this.modalService.openCustomModal(attributeModalConfig, AttributeModalComponent, { attributeToEdit: selectedRow }); - this.customModalInstance.innerModalContent.instance. - onValidationChange.subscribe((isValid) => this.customModalInstance.getButtonById('save').disabled = !isValid); - } - - /*********************** - * Call Backs from UI * - ***********************/ - - /** - * Called when 'Add' is clicked - */ - onAddAttribute() { - this.openAddEditModal(new AttributeModel(), false); - } - - /** - * Called when 'Edit' button is clicked - */ - onEditAttribute(event, row) { - event.stopPropagation(); - - const attributeToEdit: AttributeModel = new AttributeModel(row); - this.openAddEditModal(attributeToEdit, true); - } - - /** - * Called when 'Delete' button is clicked - */ - onDeleteAttribute(event, row: AttributeModel) { - event.stopPropagation(); - const onOk = () => { - this.deleteAttribute(row); - }; - - const title: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TITLE'); - const message: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TEXT'); - const okButton = new SdcUiComponents.ModalButtonComponent(); - okButton.testId = 'OK'; - okButton.text = 'OK'; - okButton.type = SdcUiCommon.ButtonType.info; - okButton.closeModal = true; - okButton.callback = onOk; - - this.modalService.openInfoModal(title, message, 'delete-modal', [okButton]); - } - - onExpandRow(event) { - if (event.type === 'click') { - this.table.rowDetail.toggleExpandRow(event.row); - } - } - - /** - * Callback from Modal after "Save" is clicked - * - * @param {boolean} isEdit - Whether modal is edit or add attribute - */ - modalCallBack = (isEdit: boolean) => { - const attribute: AttributeModel = this.customModalInstance.innerModalContent.instance.attributeToEdit; - this.addOrUpdateAttribute(attribute, isEdit); - } - -} diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.module.ts b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.module.ts index 5abb952e37..f85d5298f9 100644 --- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.module.ts +++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attributes.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { SdcUiComponentsModule } from 'onap-ui-angular'; import { GlobalPipesModule } from '../../../pipes/global-pipes.module'; -import { AttributesComponent } from './attributes.component'; +import { AttributesComponent } from '../../../../view-models/workspace/tabs/attributes/attributes.component'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { TopologyTemplateService } from '../../../services/component-services/topology-template.service'; import { AttributeModalComponent } from './attribute-modal.component'; -- cgit 1.2.3-korg