summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src')
-rw-r--r--catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html35
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html45
-rw-r--r--catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts344
3 files changed, 213 insertions, 211 deletions
diff --git a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html
index 094045e8b4..590217d0a5 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html
+++ b/catalog-ui/src/app/ng2/pages/workspace/attributes/attribute-modal.component.html
@@ -5,14 +5,14 @@
<!-- ATTRIBUTE NAME - MANDATORY -->
<div>
<sdc-input
- #attributeName
- label="Name"
- [required]="true"
- [(value)]="attributeToEdit.name"
- [disabled]="isEdit"
- name="attributeName"
- testId="attributeName"
- [maxLength]="255">
+ #attributeName
+ label="Name"
+ [required]="true"
+ [(value)]="attributeToEdit.name"
+ [disabled]="isEdit"
+ name="attributeName"
+ testId="attributeName"
+ [maxLength]="255">
</sdc-input>
<sdc-validation [validateElement]="attributeName" (validityChanged)="onValidityChange($event, 'name')">
<sdc-required-validator message="{{'VALIDATION_ERROR_REQUIRED' | translate : { 'field' : 'Name' } }}"></sdc-required-validator>
@@ -38,6 +38,7 @@
<!-- ATTRIBUTE TYPE - MANDATORY -->
<sdc-dropdown #attributeType [disabled]="false" label="Type" [required]="true"
[selectedOption]="toDropDownOption(this.attributeToEdit.type)" placeHolder="Choose Type"
+ testId="attributeType"
[options]="types" (changed)="onTypeSelected($event)">
<sdc-validation [validateElement]="attributeType" (validityChanged)="onValidityChange($event, 'type')">
<sdc-required-validator message="'required field'"></sdc-required-validator>
@@ -48,15 +49,15 @@
<!-- ATTRIBUTE DEFAULT VALUE TEXT - OPTIONAL -->
<div *ngIf="attributeToEdit.type != 'boolean'">
<sdc-input
- #_default
- [required]="false"
- label="Default Value"
- [(value)]="attributeToEdit._default"
- [disabled]="false"
- name="_default"
- testId="defaultValue"
- [maxLength]="255"
- (valueChange)="defaultValueChanged()">
+ #_default
+ [required]="false"
+ label="Default Value"
+ [(value)]="attributeToEdit._default"
+ [disabled]="false"
+ name="_default"
+ testId="defaultValue"
+ [maxLength]="255"
+ (valueChange)="defaultValueChanged()">
</sdc-input>
<sdc-validation [validateElement]="_default" (validityChanged)="onValidityChange($event, 'default')">
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html
index 6d50bbe11b..a04849a7f6 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.html
@@ -17,27 +17,27 @@
<div class="action-bar-wrapper">
<svg-icon-label
- *ngIf="!(this.isViewOnly$ | async)"
- class="add-attr-icon"
- [name]="'plus'"
- [mode]="'primary'"
- [size]="'medium'"
- [label]="'Add'"
- [labelPlacement]="'right'"
- [labelClassName]="'externalActionLabel'"
- (click)="onAddAttribute()">
+ *ngIf="!(this.isViewOnly$ | async)"
+ class="add-attr-icon"
+ [name]="'plus'"
+ [mode]="'primary'"
+ [size]="'medium'"
+ [label]="'Add'"
+ [labelPlacement]="'right'"
+ [labelClassName]="'externalActionLabel'"
+ (click)="onAddAttribute()">
</svg-icon-label>
</div>
<ngx-datatable
- columnMode="flex"
- [footerHeight]="0"
- [limit]="50"
- [headerHeight]="40"
- [rowHeight]="35"
- [rows]="attributes"
- #componentAttributesTable
- (activate)="onExpandRow($event)">
+ columnMode="flex"
+ [footerHeight]="0"
+ [limit]="50"
+ [headerHeight]="40"
+ [rowHeight]="35"
+ [rows]="attributes"
+ #componentAttributesTable
+ (activate)="onExpandRow($event)">
<ngx-datatable-row-detail [rowHeight]="80">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
@@ -48,9 +48,10 @@
<ngx-datatable-column [resizeable]="false" name="Name" [flexGrow]="2">
<ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
- <div class="expand-collapse-cell">
+ <div class="expand-collapse-cell" [attr.data-tests-id]="'attrib-name_'+row.name">
<svg-icon [clickable]="true" class="expand-collapse-icon"
- [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
+ [name]="expanded ? 'caret1-up-o': 'caret1-down-o'"
+ [mode]="'primary'"
[size]="'medium'"></svg-icon>
<span>{{ row.name }}</span>
</div>
@@ -76,14 +77,16 @@
<svg-icon [clickable]="true"
[mode]="'primary2'"
[name]="'edit-o'"
+ [testId]="'edit_'+row.name"
[size]="'medium'"
(click)="onEditAttribute($event, row)">
</svg-icon>
<svg-icon [clickable]="true"
[mode]="'primary2'"
[name]="'trash-o'"
- (click)="onDeleteAttribute($event, row)"
- [size]="'medium'">
+ [testId]="'delete_'+row.name"
+ [size]="'medium'"
+ (click)="onDeleteAttribute($event, row)">
</svg-icon>
</div>
</ng-template>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts
index ca8d5460e8..d85755bce8 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes.component.ts
@@ -1,188 +1,186 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { Select } from '@ngxs/store';
-import { IAttributeModel } from 'app/models';
+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 '../../../../ng2/services/component-services/topology-template.service';
-import { TranslateService } from '../../../../ng2/shared/translator/translate.service';
-import { WorkspaceState } from '../../../../ng2/store/states/workspace.state';
-import { WorkspaceService } from '../../../../ng2/pages/workspace/workspace.service';
-import { AttributeModalComponent } from '../../../../ng2/pages/workspace/attributes/attribute-modal.component';
+import {SdcUiCommon, SdcUiComponents, SdcUiServices} from 'onap-ui-angular';
+import {ModalComponent} from 'onap-ui-angular/dist/modals/modal.component';
+import {AttributeModel, Resource} from '../../../../models';
+import {ModalsHandler} from '../../../../utils';
+import {TopologyTemplateService} from '../../../../ng2/services/component-services/topology-template.service';
+import {TranslateService} from '../../../../ng2/shared/translator/translate.service';
+import {WorkspaceState} from '../../../../ng2/store/states/workspace.state';
+import {WorkspaceService} from '../../../../ng2/pages/workspace/workspace.service';
+import {AttributeModalComponent} from '../../../../ng2/pages/workspace/attributes/attribute-modal.component';
@Component({
- selector: 'attributes',
- templateUrl: './attributes.component.html',
- styleUrls: ['./attributes.component.less', '../../../../../assets/styles/table-style.less']
+ 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();
- }
+ @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;
+ };
- getAttributes(): IAttributeModel[] {
- return this.attributes;
+ 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);
+ }
}
-
- 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,
}
- 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();
+ ] as SdcUiCommon.IModalButtonComponent[]
};
- 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);
- }
- }
+ 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);
+ };
- /**
- * 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);
+ const title: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TITLE');
+ const message: string = this.translateService.translate('ATTRIBUTE_VIEW_DELETE_MODAL_TEXT', {name: row.name});
+ 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);
+ }
}