diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
33 files changed, 819 insertions, 714 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap new file mode 100644 index 0000000000..02e98e2219 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/__snapshots__/filter-properties-assignment.component.spec.ts.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`filter-properties-assignemnt component should match current snapshot of artifact-tab component 1`] = ` +<filter-properties-assignment + allSelected="false" + clearAll={[Function Function]} + close={[Function Function]} + filterData={[Function FilterPropertiesAssignmentData]} + filterPopover={[Function ElementRef]} + footerButtons={[Function Object]} + onTypeSelected={[Function Function]} + search={[Function Function]} + searchProperties={[Function EventEmitter]} + selectAll={[Function Function]} + selectedTypes={[Function Object]} + someTypesSelectedAndThereIsPropertyName={[Function Function]} +> + <popover-content + placement="bottom-right" + > + <form> + <div + class="field" + > + <label> + Resource Type + </label> + <div> + <checkbox + data-tests-id="filter-checkbox-all" + /> + </div> + + </div> + <div + class="field" + > + <label> + Property Name + </label> + <input + class="i-sdc-form-input" + data-tests-id="filter-box" + name="propertyName" + placeholder="Type here" + required="" + /> + </div> + </form> + </popover-content><div + class="open-filter-button" + > + <div + class="sprite-new filter-icon" + data-tests-id="filter-button" + /> + </div> +</filter-properties-assignment> +`; diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html index 9593ade48b..1c2d77a728 100644 --- a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html @@ -38,6 +38,6 @@ </div> </form> </popover-content> -<div class="open-filter-button" [popover]="filterPopover" [ngClass]="{'open':showPopover}" (onShown)="showPopover = true" (onHidden)="showPopover = false"> +<div class="open-filter-button" [popover]="filterPopover" > <div class="sprite-new filter-icon" data-tests-id="filter-button"></div> </div> diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts new file mode 100644 index 0000000000..bcc5535b32 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.spec.ts @@ -0,0 +1,141 @@ +import {async, ComponentFixture} from "@angular/core/testing"; +import {FilterPropertiesAssignmentComponent} from "./filter-properties-assignment.component"; +import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper"; +import {NO_ERRORS_SCHEMA} from "@angular/core"; +import {FilterPropertiesAssignmentData} from "../../../../models/filter-properties-assignment-data"; +import {PopoverComponent} from "../../ui/popover/popover.component"; + + + +describe('filter-properties-assignemnt component', () => { + + let fixture: ComponentFixture<FilterPropertiesAssignmentComponent>; + + beforeEach( + async(() => { + + const configure: ConfigureFn = testBed => { + testBed.configureTestingModule({ + declarations: [FilterPropertiesAssignmentComponent], + imports: [], + schemas: [NO_ERRORS_SCHEMA], + providers: [], + }); + }; + + configureTests(configure).then(testBed => { + fixture = testBed.createComponent(FilterPropertiesAssignmentComponent); + + }); + }) + ); + + + it('should match current snapshot of artifact-tab component', () => { + expect(fixture).toMatchSnapshot(); + }); + + it('on selectAll', () => { + let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); + filterData.propertyName = 'testVal'; + let typesOptions:Array<string> = ['option1', 'option2', 'option3']; + let selectedTypes:Object = {}; + + fixture.componentInstance.filterData = filterData; + fixture.componentInstance.typesOptions = typesOptions; + fixture.componentInstance.selectedTypes = selectedTypes; + + fixture.componentInstance.selectAll(); + + let expectedRes = {"option1": false,"option2": false,"option3": false}; + expect(fixture.componentInstance.selectedTypes).toEqual(expectedRes); + }); + + + it ('on onTypeSelected allSelected set to False', () => { + let selectedTypes:Object = {"option1": true,"option2": false,"option3": true}; + fixture.componentInstance.selectedTypes = selectedTypes; + fixture.componentInstance.allSelected = true; + fixture.componentInstance.onTypeSelected('option2'); + + expect(fixture.componentInstance.allSelected).toBe(false); + }); + + it ('on onTypeSelected allSelected remains True', () => { + let selectedTypes:Object = {"option1": true,"option2": true,"option3": true}; + fixture.componentInstance.selectedTypes = selectedTypes; + fixture.componentInstance.allSelected = true; + fixture.componentInstance.onTypeSelected('option2'); + + expect(fixture.componentInstance.allSelected).toBe(true); + }); + + it ('on clearAll', () => { + let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); + filterData.propertyName = 'testVal'; + let selectedTypes:Object = {"option1": true,"option2": false,"option3": true}; + + fixture.componentInstance.filterData = filterData; + fixture.componentInstance.selectedTypes = selectedTypes; + fixture.componentInstance.allSelected = true; + + fixture.componentInstance.clearAll(); + + expect(fixture.componentInstance.filterData.propertyName).toBe(''); + expect(fixture.componentInstance.allSelected).toBe(false); + }); + + it ('someTypesSelectedAndThereIsPropertyName return True', ()=> { + let res = fixture.componentInstance.someTypesSelectedAndThereIsPropertyName(); + + expect(res).toBe(true) + }); + + it ('someTypesSelectedAndThereIsPropertyName return Null', ()=> { + let selectedTypes:Object = {"option1": true,"option2": false,"option3": true}; + let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); + filterData.propertyName = 'testVal'; + + fixture.componentInstance.selectedTypes = selectedTypes; + fixture.componentInstance.filterData = filterData; + + let res = fixture.componentInstance.someTypesSelectedAndThereIsPropertyName(); + + expect(res).toBe(null) + }); + + it ('search', ()=> { + + let filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); + filterData.selectedTypes = ["CP"]; + fixture.componentInstance.filterData = filterData; + + let componentType: string = 'resource'; + fixture.componentInstance.componentType = componentType; + + let selectedTypes:Object = {"option1": true,"CP": true,"option3": true}; + fixture.componentInstance.selectedTypes = selectedTypes; + + let temp:any; + let filterPopover: PopoverComponent = new PopoverComponent(temp , temp ); + fixture.componentInstance.filterPopover = filterPopover; + fixture.componentInstance.filterPopover.hide = jest.fn(); + + fixture.componentInstance.search(); + + expect(fixture.componentInstance.filterData.selectedTypes).toEqual(["CP"]); + expect(fixture.componentInstance.filterPopover.hide).toHaveBeenCalled(); + }); + + it('close', () => { + let temp:any; + let filterPopover: PopoverComponent = new PopoverComponent(temp , temp ); + fixture.componentInstance.filterPopover = filterPopover; + fixture.componentInstance.filterPopover.hide = jest.fn(); + + fixture.componentInstance.close(); + + expect(fixture.componentInstance.filterPopover.hide).toHaveBeenCalled(); + }); + +});
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html index 41ecaa899e..9d1a2fa734 100644 --- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html +++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.html @@ -29,8 +29,8 @@ [rowHeight]="200" [reorderable]="false" > - <ngx-datatable-column prop="{{col.prop}}" [minWidth]="100" *ngFor="let col of columns"> - <template let-column="column" height="100" ngx-datatable-header-template> + <ngx-datatable-column *ngFor="let col of columns" prop="{{col.prop}}" [minWidth]="100" > + <ng-template let-column="column" height="100" ngx-datatable-header-template> <span class="datatable-column-span"> <b>{{col.name}}</b> <div *ngIf="canBeDeleted(col.name)" style="width: 45px !important; color: red; " @@ -44,23 +44,23 @@ placeholder='Filter column...' (keyup)='updateColumnFilter($event, col.prop)' /> - </template> + </ng-template> </ngx-datatable-column> <ngx-datatable-column *ngIf="addNewColumn" class="datatable-white-body-cell" [minWidth]="220" [maxWidth]="220" [width]="220" > - <template ngx-datatable-header-template> + <ng-template ngx-datatable-header-template> <gab-column-provider [pathsAndNames]="pathsandnames" (onCancel)="hideAddNewColumn()" (onSave)="refresh()"></gab-column-provider> - </template> - <template class="datatable-white-body-cell" ngx-datatable-cell-template> - </template> + </ng-template> + <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template> + </ng-template> </ngx-datatable-column> <ngx-datatable-column class="datatable-white-body-cell" [minWidth]="50" [maxWidth]="50" [width]="50" > - <template ngx-datatable-header-template> + <ng-template ngx-datatable-header-template> <div data-tests-id="gab-add-btn" class="add-btn add-btn-div" (click)="showAddNewColumn()">Add</div> - </template> - <template class="datatable-white-body-cell" ngx-datatable-cell-template> - </template> + </ng-template> + <ng-template class="datatable-white-body-cell" ngx-datatable-cell-template> + </ng-template> </ngx-datatable-column> </ngx-datatable> -</div>
\ No newline at end of file +</div> diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts index 4de7ff07d9..ea8039e1b4 100644 --- a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser.component.ts @@ -64,8 +64,8 @@ export class GenericArtifactBrowserComponent { this.gabService.getArtifact(this.artifactid, this.resourceid, paths) .subscribe( response => { - let typedServerResponse: IServerResponse = response.json() as IServerResponse; - this.normalizeDataForNgxDatatable(typedServerResponse.data); + // let typedServerResponse: IServerResponse = response.json() as IServerResponse; + this.normalizeDataForNgxDatatable(response['data']); }, () => { this.ready = false; diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts new file mode 100644 index 0000000000..fc76463970 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.spec.ts @@ -0,0 +1,52 @@ +import { async, ComponentFixture } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper'; +import 'jest-dom/extend-expect'; +import {HierarchyNavigationComponent} from "./hierarchy-navigation.component"; +import {HierarchyDisplayOptions} from "./hierarchy-display-options"; + + +describe('hierarchyNavigationComponent', () => { + let fixture: ComponentFixture<HierarchyNavigationComponent>; + let hierarchyDisplayOptions: HierarchyDisplayOptions; + beforeEach( + async(() => { + const configure: ConfigureFn = testBed => { + testBed.configureTestingModule({ + declarations: [HierarchyNavigationComponent] + }); + }; + + configureTests(configure).then(testBed => { + fixture = testBed.createComponent(HierarchyNavigationComponent); + hierarchyDisplayOptions = new HierarchyDisplayOptions("id", "name", "children"); + fixture.componentInstance.displayOptions = hierarchyDisplayOptions; + fixture.detectChanges(); + fixture.componentInstance.displayData = [{name: "aaa", id: "1", children: [{name: "bbb", id: "1.1"}, {name: "ccc", id: "1.2", children: [{name: "aaa", id: "1.2.1"}]}]}, {name: "bbb", id: "2"}]; + fixture.detectChanges(); + }); + }) + ); + + it('should have a selected class after user click on a tree node', + () => { + let firstNodeElement = fixture.debugElement.query(By.css('.node-item')); + fixture.componentInstance.updateSelected.subscribe((item) => { + fixture.componentInstance.selectedItem = item.id; + fixture.detectChanges(); + }); + firstNodeElement.nativeElement.click(); + fixture.whenStable().then(() => { + expect(firstNodeElement.children[0].nativeElement).toHaveClass('selected'); + }); + }); + + it('should call onClick function when user click on a tree node', + () => { + spyOn(fixture.componentInstance, 'onClick'); + let firstNodeElement = fixture.debugElement.query(By.css('.node-item')).nativeElement; + firstNodeElement.click(); + expect(fixture.componentInstance.onClick).toHaveBeenCalled(); + }); + +});
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts index 1698157e90..8b20aa28f8 100644 --- a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts @@ -21,7 +21,6 @@ import {Component, Input, Output, EventEmitter} from '@angular/core'; import {HierarchyDisplayOptions} from './hierarchy-display-options'; - @Component({ selector: 'hierarchy-navigation', templateUrl: './hierarchy-navigation.component.html', @@ -32,7 +31,6 @@ export class HierarchyNavigationComponent { @Input() displayData: Array<any>; @Input() selectedItem: any; @Input() displayOptions: HierarchyDisplayOptions; - @Output() updateSelected:EventEmitter<any> = new EventEmitter(); onClick = ($event, item) => { diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html index 3ef1f57bf2..eeba590046 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -35,33 +35,37 @@ <div class="no-data" *ngIf="!inputs || !inputs.length">No data to display</div> <div> <div class="table-row" *ngFor="let input of inputs" (click)="selectedInputId = input.path" [ngClass]="{'selected': selectedInputId && selectedInputId === input.path}"> + <!-- Property Name --> <div class="table-cell col1"> <div class="inner-cell-div" tooltip="{{input.name}}"><span class="property-name">{{input.name}}</span></div> <span *ngIf="input.description" class="property-description-icon sprite-new show-desc" tooltip="{{input.description}}" tooltipDelay="0"></span> </div> + <!-- From Instance --> <div class="table-cell col3"> <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]?.name}}"> <span>{{instanceNamesMap[input.instanceUniqueId]?.name}}</span> </div> </div> + <!-- Type --> <div class="table-cell col2"> <div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}"> <span>{{input.type | contentAfterLastDot}}</span> </div> </div> + <!-- Value --> <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType"> <dynamic-element class="value-input" - *ngIf="input.isSimpleType" + *ngIf="checkInstanceFePropertiesMapIsFilled() && input.isSimpleType" pattern="validationUtils.getValidationPattern(input.type)" [value]="input.defaultValueObj" [type]="input.type" - [constraints]="input.constraints" [name]="input.name" (elementChanged)="onInputChanged(input, $event)" [readonly]="readonly" - [testId]="'input-' + input.name"> + [testId]="'input-' + input.name" + [constraints] = "getConstraints(input)"> </dynamic-element> <div class="delete-button-container"> <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)" data-tests-id="delete-input-button"></span> diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts index d95198f162..f45d5a85c7 100644 --- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts @@ -26,6 +26,8 @@ import { Component, Input, Output, EventEmitter } from "@angular/core"; import { InputFEModel } from "app/models"; import { ModalService } from "../../../services/modal.service"; import { InstanceFeDetails } from "app/models/instance-fe-details"; +import { InstanceFePropertiesMap } from "../../../../models/properties-inputs/property-fe-map"; +import { DataTypeService } from "../../../services/data-type.service"; @Component({ selector: 'inputs-table', @@ -41,6 +43,8 @@ export class InputsTableComponent { @Output() inputChanged: EventEmitter<any> = new EventEmitter<any>(); @Output() deleteInput: EventEmitter<any> = new EventEmitter<any>(); + @Input() fePropertiesMap: InstanceFePropertiesMap; + sortBy: String; reverse: boolean; selectedInputToDelete: InputFEModel; @@ -74,7 +78,8 @@ export class InputsTableComponent { }; - constructor(private modalService: ModalService) { + constructor(private modalService: ModalService, private dataTypeService: DataTypeService){ + var x = 5 } @@ -89,9 +94,40 @@ export class InputsTableComponent { }; openDeleteModal = (input: InputFEModel) => { + console.log('exist inputs: ' + this.inputs) + + this.selectedInputToDelete = input; this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); } + + getConstraints(input:InputFEModel): string[]{ + + if (input.inputPath){ + const pathValuesName = input.inputPath.split('#'); + const rootPropertyName = pathValuesName[0]; + const propertyName = pathValuesName[1]; + let filterredRootPropertyType = _.values(this.fePropertiesMap)[0].filter(property => + property.name == rootPropertyName); + if (filterredRootPropertyType.length > 0){ + let rootPropertyType = filterredRootPropertyType[0].type; + return this.dataTypeService.getConstraintsByParentTypeAndUniqueID(rootPropertyType, propertyName); + }else{ + return null; + } + + } + // else if(input.constraints.length > 0){ + // return input.constraints[0].validValues + // } + else{ + return null; + } + } + + checkInstanceFePropertiesMapIsFilled(){ + return _.keys(this.fePropertiesMap).length > 0 + } } diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts index aa5f2420b3..9613439859 100644 --- a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.component.ts @@ -14,12 +14,11 @@ * permissions and limitations under the License. */ - -import { Component, Input, Output, EventEmitter } from "@angular/core"; -import { PolicyInstance } from "app/models"; -import { ModalService } from "../../../services/modal.service"; -import { InstanceFeDetails } from "app/models/instance-fe-details"; -import {TranslateService} from 'app/ng2/shared/translator/translate.service'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { PolicyInstance } from 'app/models'; +import { InstanceFeDetails } from 'app/models/instance-fe-details'; +import { TranslateService } from 'app/ng2/shared/translator/translate.service'; +import { ModalService } from '../../../services/modal.service'; @Component({ selector: 'policies-table', @@ -28,13 +27,13 @@ import {TranslateService} from 'app/ng2/shared/translator/translate.service'; }) export class PoliciesTableComponent { - @Input() policies: Array<PolicyInstance>; + @Input() policies: PolicyInstance[]; @Input() instanceNamesMap: Map<string, InstanceFeDetails>; @Input() readonly: boolean; @Input() isLoading: boolean; @Output() deletePolicy: EventEmitter<any> = new EventEmitter<any>(); - sortBy: String; + sortBy: string; reverse: boolean; selectedPolicyToDelete: PolicyInstance; deleteMsgTitle: string; @@ -42,43 +41,39 @@ export class PoliciesTableComponent { modalDeleteBtn: string; modalCancelBtn: string; + constructor(private modalService: ModalService, private translateService: TranslateService) { + } + sort = (sortBy) => { this.reverse = (this.sortBy === sortBy) ? !this.reverse : true; - let reverse = this.reverse ? 1 : -1; + const reverse = this.reverse ? 1 : -1; this.sortBy = sortBy; - let instanceNameMapTemp = this.instanceNamesMap; - let itemIdx1Val = ""; - let itemIdx2Val = ""; - this.policies.sort(function (itemIdx1, itemIdx2) { - if (sortBy == 'instanceUniqueId') { - itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : ""; - itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : ""; - } - else { + const instanceNameMapTemp = this.instanceNamesMap; + let itemIdx1Val = ''; + let itemIdx2Val = ''; + this.policies.sort((itemIdx1, itemIdx2) => { + if (sortBy === 'instanceUniqueId') { + itemIdx1Val = (itemIdx1[sortBy] && instanceNameMapTemp[itemIdx1[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx1[sortBy]].name : ''; + itemIdx2Val = (itemIdx2[sortBy] && instanceNameMapTemp[itemIdx2[sortBy]] !== undefined) ? instanceNameMapTemp[itemIdx2[sortBy]].name : ''; + } else { itemIdx1Val = itemIdx1[sortBy]; itemIdx2Val = itemIdx2[sortBy]; - } + } if (itemIdx1Val < itemIdx2Val) { return -1 * reverse; - } - else if (itemIdx1Val > itemIdx2Val) { + } else if (itemIdx1Val > itemIdx2Val) { return 1 * reverse; - } - else { + } else { return 0; } }); - }; - - - constructor(private modalService: ModalService, private translateService: TranslateService) { } ngOnInit() { - this.translateService.languageChangedObservable.subscribe(lang => { - this.deleteMsgTitle = this.translateService.translate("DELETE_POLICY_TITLE"); - this.modalDeleteBtn = this.translateService.translate("MODAL_DELETE"); - this.modalCancelBtn = this.translateService.translate("MODAL_CANCEL"); + this.translateService.languageChangedObservable.subscribe((lang) => { + this.deleteMsgTitle = this.translateService.translate('DELETE_POLICY_TITLE'); + this.modalDeleteBtn = this.translateService.translate('MODAL_DELETE'); + this.modalCancelBtn = this.translateService.translate('MODAL_CANCEL'); }); } @@ -86,15 +81,13 @@ export class PoliciesTableComponent { onDeletePolicy = () => { this.deletePolicy.emit(this.selectedPolicyToDelete); this.modalService.closeCurrentModal(); - }; + } openDeleteModal = (policy: PolicyInstance) => { this.selectedPolicyToDelete = policy; - this.translateService.languageChangedObservable.subscribe(lang => { - this.deleteMsgBodyTxt = this.translateService.translate("DELETE_POLICY_MSG", {policyName: policy.name}); + this.translateService.languageChangedObservable.subscribe((lang) => { + this.deleteMsgBodyTxt = this.translateService.translate('DELETE_POLICY_MSG', {policyName: policy.name}); this.modalService.createActionModal(this.deleteMsgTitle, this.deleteMsgBodyTxt, this.modalDeleteBtn, this.onDeletePolicy, this.modalCancelBtn).instance.open(); }); } } - - diff --git a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts index f780c62c0b..57cb13c281 100644 --- a/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts +++ b/catalog-ui/src/app/ng2/components/logic/policies-table/policies-table.module.ts @@ -14,12 +14,12 @@ * permissions and limitations under the License. */ -import { NgModule } from "@angular/core"; -import {CommonModule} from "@angular/common"; -import {PoliciesTableComponent} from "./policies-table.component"; -import {TranslateModule} from 'app/ng2/shared/translator/translate.module'; -import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; -import {GlobalPipesModule} from "../../../pipes/global-pipes.module"; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; +import { TranslateModule } from 'app/ng2/shared/translator/translate.module'; +import { GlobalPipesModule } from '../../../pipes/global-pipes.module'; +import { PoliciesTableComponent } from './policies-table.component'; @NgModule({ declarations: [ @@ -38,4 +38,4 @@ import {GlobalPipesModule} from "../../../pipes/global-pipes.module"; providers: [] }) export class PoliciesTableModule { -}
\ No newline at end of file +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html index c4639aeda0..f6396e6f2c 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html @@ -12,8 +12,8 @@ * See the License for the specific language governing permissions and * limitations under the License. --> - - + + <div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn] [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName, 'readonly': property.isDisabled ||property.isDeclared}" [class.with-top-border]="property.isChildOfListOrMap" @@ -48,13 +48,13 @@ pattern="validationUtils.getValidationPattern(property.type)" [value]="property.isDeclared ? property.value : property.valueObj" [type]="property.isDeclared ? 'string' : property.type" - [childType]="property.schema.property.type" [name]="property.name" [path]="property.propertiesName" - [constraints]="property.constraints" (elementChanged)="onElementChanged($event)" [readonly]="readonly || property.isDeclared || property.isDisabled" [testId]="'prop-' + propertyTestsId" + [declared] = "property.isDeclared" + [constraints] = "constraints" ></dynamic-element> </div> </ng-container> @@ -69,7 +69,7 @@ <ng-container *ngIf="!property.isDeclared"> <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to list</a> <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'delete-from-list-' + propertyTestsId"></span> - <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId"></span> + <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId" ></span> </ng-container> </div> diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less index 0adce2c99d..1007292854 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less @@ -60,7 +60,7 @@ align-self:center; cursor:pointer; } - + } .filtered { diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts index 6e19c95003..715426f212 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts @@ -23,7 +23,7 @@ import {Component, Input, Output, EventEmitter, ViewChild, ComponentRef} from "@ import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models"; import { PROPERTY_TYPES } from 'app/utils'; import { DataTypeService } from "../../../../services/data-type.service"; -import { trigger, state, style, transition, animate } from '@angular/core'; +import { trigger, state, style, transition, animate } from '@angular/animations'; import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils"; import {IUiElementChangeEvent} from "../../../ui/form-components/ui-element-base.component"; import {DynamicElementComponent} from "../../../ui/dynamic-element/dynamic-element.component"; @@ -42,6 +42,7 @@ export class DynamicPropertyComponent { isPropertyFEModel: boolean; nestedLevel: number; propertyTestsId: string; + constraints:string[]; @Input() canBeDeclared: boolean; @Input() property: PropertyFEModel | DerivedFEProperty; @@ -72,7 +73,30 @@ export class DynamicPropertyComponent { this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; this.rootProperty = (this.rootProperty) ? this.rootProperty : <PropertyFEModel>this.property; - this.propertyTestsId = this.getPropertyTestsId(); + this.propertyTestsId = this.getPropertyTestsId(); + + this.initConsraintsValues(); + + + } + + initConsraintsValues(){ + let primitiveProperties = ['string', 'integer', 'float', 'boolean']; + + //Property has constraints + if(this.property.constraints){ + this.constraints = this.property.constraints[0].validValues + } + + //Complex Type + else if (primitiveProperties.indexOf(this.rootProperty.type) == -1 && primitiveProperties.indexOf(this.property.type) >= 0 ){ + this.constraints = this.dataTypeService.getConstraintsByParentTypeAndUniqueID(this.rootProperty.type, this.property.name); + } + + else{ + this.constraints = null; + } + } ngDoCheck() { diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html index 2068b170b3..89b85d3578 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html @@ -37,18 +37,18 @@ <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div> <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:vspId"> + <!-- Icon & Instance Name --> <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap"> - - <span [ngClass]="['prop-instance-icon', feInstanceNamesMap[instanceId].iconClass, 'small']"></span> - {{feInstanceNamesMap[instanceId].name}} + {{feInstanceNamesMap[instanceId].name}} <div class="sprite-new archive-label" *ngIf="feInstanceNamesMap[instanceId].originArchived == true"></div> </div> - - <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | orderBy:{path: path, direction: direction}; trackBy:property?.name " + + <div class="table-row" *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm | propertiesOrderBy:{path: path, direction: direction}; trackBy:property?.name " (click)="onClickPropertyRow(property, instanceId, $event)" [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}"> <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> + <!-- Property Name --> <div class="property-name"> <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled || property.isDeclared || readonly" (checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></checkbox> @@ -62,16 +62,19 @@ <span *ngIf="showDelete" class="sprite-new delete-btn" [ngClass]="{'disabled' : property.isDisabled || property.isDeclared}" (click)="openDeleteModal(property)" data-tests-id="delete-input-button"></span> </div> </div> + <!-- Property Type --> <div class="table-cell col2" *ngIf="!hidePropertyType"> <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}"> <span>{{property.type | contentAfterLastDot}}</span> </div> </div> + <!-- Property ES (Entry Schema) --> <div class="table-cell col3" *ngIf="!hidePropertyType"> <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}"> <span>{{property.schema.property.type | contentAfterLastDot}}</span> </div> </div> + <!-- Property Value --> <div class="table-cell valueCol"> <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"--> <dynamic-property @@ -86,9 +89,10 @@ (expandChild)="property.updateExpandedChildPropertyId($event)" (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)" (checkProperty)="propertyChecked(property, $event)" + > + </dynamic-property> - </div> </div> </ng-container> diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts new file mode 100644 index 0000000000..ea524e54b1 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.spec.ts @@ -0,0 +1,175 @@ +import { NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core'; +import { ComponentFixture } from '@angular/core/testing'; +import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper'; +import { DerivedFEProperty } from '../../../../models/properties-inputs/derived-fe-property'; +import { PropertyBEModel } from '../../../../models/properties-inputs/property-be-model'; +import { PropertyFEModel } from '../../../../models/properties-inputs/property-fe-model'; +import { ContentAfterLastDotPipe } from '../../../pipes/contentAfterLastDot.pipe'; +import { KeysPipe } from '../../../pipes/keys.pipe'; +import { PropertiesOrderByPipe } from '../../../pipes/properties-order-by.pipe'; +import { SearchFilterPipe } from '../../../pipes/searchFilter.pipe'; +import { ModalService } from '../../../services/modal.service'; +import { PropertiesService } from '../../../services/properties.service'; +import { PropertiesTableComponent, PropertyRowSelectedEvent } from './properties-table.component'; + +describe('properties-table component', () => { + + let fixture: ComponentFixture<PropertiesTableComponent>; + let propertiesServiceMock: Partial<PropertiesService>; + let modalServiceMock: Partial<ModalService>; + + beforeEach( + () => { + propertiesServiceMock = { + undoDisableRelatedProperties: jest.fn(), + disableRelatedProperties: jest.fn() + }; + modalServiceMock = { + + }; + + const configure: ConfigureFn = (testBed) => { + testBed.configureTestingModule({ + declarations: [ + PropertiesTableComponent, + KeysPipe, + PropertiesOrderByPipe, + SearchFilterPipe, + ContentAfterLastDotPipe + ], + imports: [], + schemas: [NO_ERRORS_SCHEMA], + providers: [ + {provide: PropertiesService, useValue: propertiesServiceMock}, + {provide: ModalService, useValue: modalServiceMock} + ], + }); + }; + + configureTests(configure).then((testBed) => { + fixture = testBed.createComponent(PropertiesTableComponent); + }); + } + ); + + it('When Properties assignment page is loaded, it is sorted by property name (acsending)', () => { + const fePropertiesMapValues = new SimpleChange('previousValue', 'currentValue', true); + const changes = { + fePropertiesMap: fePropertiesMapValues + }; + + // init values before ngOnChanges was called + fixture.componentInstance.sortBy = 'existingValue'; + + fixture.componentInstance.ngOnChanges(changes); + + expect (fixture.componentInstance.reverse).toEqual(true); + // expect (fixture.componentInstance.direction).toEqual(1); + expect (fixture.componentInstance.direction).toEqual(fixture.componentInstance.ascUpperLettersFirst); + expect (fixture.componentInstance.sortBy).toEqual('name'); + expect (fixture.componentInstance.path.length).toEqual(1); + expect (fixture.componentInstance.path[0]).toEqual('name'); + }); + + it('When ngOnChanges is called without fePropertiesMap,' + + ' sortBy will remain as it was', () => { + const fePropertiesMapValues = new SimpleChange('previousValue', 'currentValue', true); + const changes = { + dummyKey: fePropertiesMapValues + }; + + // init values before ngOnChanges was called + fixture.componentInstance.sortBy = 'existingValue'; + fixture.componentInstance.sort = jest.fn(); + + fixture.componentInstance.ngOnChanges(changes); + + expect (fixture.componentInstance.sortBy).toEqual('existingValue'); + }); + + it ('When sort is called init this.direction to 1', () => { + // init values + fixture.componentInstance.reverse = false; + fixture.componentInstance.direction = 0; + fixture.componentInstance.sortBy = 'initialize.Value'; + fixture.componentInstance.path = []; + + // call sore function + fixture.componentInstance.sort('initialize.Value'); + + // expect that + expect (fixture.componentInstance.reverse).toBe(true); + expect (fixture.componentInstance.direction).toBe(fixture.componentInstance.ascUpperLettersFirst); + expect (fixture.componentInstance.sortBy).toBe('initialize.Value'); + expect (fixture.componentInstance.path.length).toBe(2); + expect (fixture.componentInstance.path[0]).toBe('initialize'); + expect (fixture.componentInstance.path[1]).toBe('Value'); + }); + + it ('When sort is called init this.direction to -1', () => { + // init values + fixture.componentInstance.reverse = true; + fixture.componentInstance.direction = 0; + fixture.componentInstance.sortBy = 'initialize.Value'; + fixture.componentInstance.path = []; + + // call sore function + fixture.componentInstance.sort('initialize.Value'); + + // expect that + expect (fixture.componentInstance.reverse).toBe(false); + expect (fixture.componentInstance.direction).toBe(fixture.componentInstance.descLowerLettersFirst); + }); + + it ('When onPropertyChanged is called, event is emitted' , () => { + spyOn(fixture.componentInstance.emitter, 'emit'); + fixture.componentInstance.onPropertyChanged('testProperty'); + expect(fixture.componentInstance.emitter.emit).toHaveBeenCalledWith('testProperty'); + }); + + it ('When onClickPropertyRow is called, selectedPropertyId is updated and event is emitted.' , () => { + const propertyFEModel = new PropertyFEModel(new PropertyBEModel()); + propertyFEModel.name = 'propertyName'; + const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName'); + + spyOn(fixture.componentInstance.selectPropertyRow, 'emit'); + fixture.componentInstance.onClickPropertyRow(propertyFEModel, 'instanceName'); + + expect (fixture.componentInstance.selectedPropertyId).toBe('propertyName'); + expect (fixture.componentInstance.selectPropertyRow.emit).toHaveBeenCalledWith(propertyRowSelectedEvent); + }); + + it ('When onClickPropertyInnerRow is called, event is emitted.' , () => { + const derivedFEProperty = new DerivedFEProperty(new PropertyBEModel()); + const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(derivedFEProperty, 'instanceName'); + spyOn(fixture.componentInstance.selectPropertyRow, 'emit'); + fixture.componentInstance.onClickPropertyInnerRow(derivedFEProperty, 'instanceName'); + + expect (fixture.componentInstance.selectPropertyRow.emit).toHaveBeenCalledWith(propertyRowSelectedEvent); + }); + + it ('When propertyChecked is called, propertiesService.undoDisableRelatedProperties is called and event is emitted.' , () => { + + const propertyFEModel = new PropertyFEModel(new PropertyBEModel()); + propertyFEModel.isSelected = false; + const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName1'); + + spyOn(fixture.componentInstance.updateCheckedPropertyCount, 'emit'); + fixture.componentInstance.propertyChecked(propertyFEModel); + expect (propertiesServiceMock.undoDisableRelatedProperties).toHaveBeenCalledWith(propertyFEModel, undefined); + expect (fixture.componentInstance.updateCheckedPropertyCount.emit).toHaveBeenCalledWith(false); + }); + + it ('When propertyChecked is called, propertiesService.disableRelatedProperties is called and event is emitted.' , () => { + + const propertyFEModel = new PropertyFEModel(new PropertyBEModel()); + propertyFEModel.isSelected = true; + const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(propertyFEModel, 'instanceName1'); + + spyOn(fixture.componentInstance.updateCheckedPropertyCount, 'emit'); + fixture.componentInstance.propertyChecked(propertyFEModel); + expect (propertiesServiceMock.disableRelatedProperties).toHaveBeenCalledWith(propertyFEModel, undefined); + expect (fixture.componentInstance.updateCheckedPropertyCount.emit).toHaveBeenCalledWith(true); + }); + +}); diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts index 0cc188134f..e499b3786b 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts @@ -8,9 +8,9 @@ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * + * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. @@ -19,33 +19,33 @@ * ============LICENSE_END========================================================= */ -import { Component, Input, Output, EventEmitter} from "@angular/core"; -import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models"; -import {PropertiesService} from "../../../services/properties.service"; -import {ModalService} from "../../../services/modal.service"; -import { InstanceFeDetails } from "../../../../models/instance-fe-details"; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { DerivedFEProperty, InstanceFePropertiesMap, PropertyFEModel } from 'app/models'; +import { InstanceFeDetails } from '../../../../models/instance-fe-details'; +import { PropertiesService } from '../../../services/properties.service'; +import { ModalService } from '../../../services/modal.service'; @Component({ selector: 'properties-table', templateUrl: './properties-table.component.html', styleUrls: ['./properties-table.component.less'] }) -export class PropertiesTableComponent { +export class PropertiesTableComponent implements OnChanges { @Input() fePropertiesMap: InstanceFePropertiesMap; @Input() feInstanceNamesMap: Map<string, InstanceFeDetails>; @Input() selectedPropertyId: string; - @Input() propertyNameSearchText:string; - @Input() searchTerm:string; - @Input() readonly:boolean; - @Input() isLoading:boolean; - @Input() hasDeclareOption:boolean; - @Input() hidePropertyType:boolean; + @Input() propertyNameSearchText: string; + @Input() searchTerm: string; + @Input() readonly: boolean; + @Input() isLoading: boolean; + @Input() hasDeclareOption: boolean; + @Input() hidePropertyType: boolean; @Input() showDelete:boolean; - + @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>(); @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>(); - @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption and hasDeclareListOption + @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>(); // only for hasDeclareOption @Output() updateCheckedChildPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareListOption @Output() deleteProperty: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>(); private selectedPropertyToDelete: PropertyFEModel; @@ -53,41 +53,48 @@ export class PropertiesTableComponent { sortBy: String; reverse: boolean; direction: number; - path:string[]; + path: string[]; - sort(sortBy){ - this.reverse = (this.sortBy === sortBy) ? !this.reverse : true; - this.direction = this.reverse ? 1 : -1; - this.sortBy = sortBy; - this.path = sortBy.split('.'); + readonly ascUpperLettersFirst = 1; + readonly descLowerLettersFirst = -1; + + constructor(private propertiesService: PropertiesService, private modalService: ModalService ) { } - constructor (private propertiesService:PropertiesService, private modalService: ModalService){ + ngOnChanges(changes: SimpleChanges): void { + if (changes.fePropertiesMap) { + this.sortBy = ''; + this.sort('name'); + } } - - ngOnInit() { + + sort(sortBy) { + this.reverse = (this.sortBy === sortBy) ? !this.reverse : true; + this.direction = this.reverse ? this.ascUpperLettersFirst : this.descLowerLettersFirst; + this.sortBy = sortBy; + this.path = sortBy.split('.'); } onPropertyChanged = (property) => { this.emitter.emit(property); - }; + } // Click on main row (row of propertyFEModel) - onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => { - //event && event.stopPropagation(); + onClickPropertyRow = (property: PropertyFEModel, instanceName: string, event?) => { + // event && event.stopPropagation(); this.selectedPropertyId = property.name; - let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); + const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); this.selectPropertyRow.emit(propertyRowSelectedEvent); - }; + } // Click on inner row (row of DerivedFEProperty) - onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => { - let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); + onClickPropertyInnerRow = (property: DerivedFEProperty, instanceName: string) => { + const propertyRowSelectedEvent: PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); this.selectPropertyRow.emit(propertyRowSelectedEvent); } propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { - let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; + const isChecked: boolean = (!childPropName) ? prop.isSelected : prop.flattenedChildren.find((prop) => prop.propertiesName == childPropName).isSelected; if (!isChecked) { this.propertiesService.undoDisableRelatedProperties(prop, childPropName); @@ -116,11 +123,10 @@ export class PropertiesTableComponent { } export class PropertyRowSelectedEvent { - propertyModel:PropertyFEModel | DerivedFEProperty; - instanceName:string; - constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){ + propertyModel: PropertyFEModel | DerivedFEProperty; + instanceName: string; + constructor( propertyModel: PropertyFEModel | DerivedFEProperty, instanceName: string ) { this.propertyModel = propertyModel; this.instanceName = instanceName; } } - diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts index cb8c9a694b..4d968a088c 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts @@ -4,7 +4,6 @@ import {DynamicPropertyComponent} from "./dynamic-property/dynamic-property.comp import {FormsModule} from "@angular/forms"; import {UiElementsModule} from "../../ui/ui-elements.module"; import {CommonModule} from "@angular/common"; -import {HttpModule} from "@angular/http"; import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe"; import {GlobalPipesModule} from "../../../pipes/global-pipes.module"; import {PropertiesService} from "../../../services/properties.service"; @@ -13,7 +12,6 @@ import {MultilineEllipsisModule} from "../../../shared/multiline-ellipsis/multil @NgModule({ imports: [ FormsModule, - HttpModule, CommonModule, GlobalPipesModule, UiElementsModule, diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts index 2e3c21c210..d41b580514 100644 --- a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts @@ -9,6 +9,7 @@ import {ComponentInstanceServiceNg2} from "../../../services/component-instance- import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils"; import {Requirement} from "../../../../models/requirement"; import {Capability, RequirementCapabilityModel} from "../../../../models/capability"; +import { WorkspaceService } from "app/ng2/pages/workspace/workspace.service"; const REQUIREMENT = 'Requirement'; const CAPABILITY = 'Capability'; @@ -24,14 +25,9 @@ export class SelectRequirementOrCapabilityComponent implements OnInit { @Input() optionalRequirementsMap:Dictionary<Requirement[]>; //optional requirement map - key is type, value is array of requirements @Input() optionalCapabilitiesMap:Dictionary<Capability[]>; //optional capabilities map - key is type, value is array of capabilities - @Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability ) - - @Input() currentComponent:ComponentModel; @Input() componentInstanceId:string; - @Input() selectedReqOrCapModel:RequirementCapabilityModel; - @Output() updateSelectedReqOrCap:EventEmitter<RequirementCapabilityModel> = new EventEmitter<RequirementCapabilityModel>(); types:Array<string> = []; @@ -51,7 +47,8 @@ export class SelectRequirementOrCapabilityComponent implements OnInit { private _loadingCapabilityProperties: Array<Capability>; constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2, - private propertiesUtils:PropertiesUtils) { + private propertiesUtils:PropertiesUtils, + private workspaceService: WorkspaceService) { this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)]; this._loadingCapabilityProperties = []; } @@ -171,14 +168,13 @@ export class SelectRequirementOrCapabilityComponent implements OnInit { } } - private setCapabilityProperties = ():void => { let selectedCapability = <Capability>this.selectedReqOrCapModel; if (!selectedCapability.properties) { this.loadingCapabilityProperties = true; if (this._loadingCapabilityProperties.indexOf(selectedCapability) == -1) { this._loadingCapabilityProperties.push(selectedCapability); - this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability) + this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.workspaceService.metadata.componentType, this.workspaceService.metadata.uniqueId, this.componentInstanceId, selectedCapability) .subscribe((response: Array<PropertyModel>) => { if (this.selectedReqOrCapModel === selectedCapability) { delete this.loadingCapabilityProperties; diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less index 5830c06972..f4d673d695 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less +++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.less @@ -50,7 +50,7 @@ } .operation-name { - .s_1; + // .s_1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts index ebcf9eba22..08e6c36db1 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.component.ts @@ -14,34 +14,38 @@ * permissions and limitations under the License. */ -import {Component, Input, ComponentRef} from '@angular/core'; -import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service'; -import {ComponentInstanceServiceNg2} from 'app/ng2/services/component-instance-services/component-instance.service'; -import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service"; -import {ModalService} from 'app/ng2/services/modal.service'; -import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; +import { Component, ComponentRef, Input } from '@angular/core'; import { - ModalModel, ButtonModel, - OperationModel, - Service, - ServiceInstanceObject, - PropertyFEModel, - PropertyBEModel, + CapabilitiesGroup, + Capability, + Component as TopologyTemplate, InputBEModel, InterfaceModel, - CapabilitiesGroup, - Capability + ModalModel, + OperationModel, + PropertyBEModel, + PropertyFEModel } from 'app/models'; -import {ServiceConsumptionCreatorComponent} from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component'; - +import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component'; +import { ServiceConsumptionCreatorComponent } from 'app/ng2/pages/service-consumption-editor/service-consumption-editor.component'; +import { ComponentInstanceServiceNg2 } from 'app/ng2/services/component-instance-services/component-instance.service'; +import { ComponentServiceNg2 } from 'app/ng2/services/component-services/component.service'; +import { ModalService } from 'app/ng2/services/modal.service'; +import { ComponentMetadata } from '../../../../models/component-metadata'; +import { Resource } from '../../../../models/components/resource'; +import { FullComponentInstance } from '../../../../models/componentsInstances/fullComponentInstance'; +import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces'; +import { ComponentFactory } from '../../../../utils/component-factory'; +import { ComponentType } from '../../../../utils/constants'; +import { TopologyTemplateService } from '../../../services/component-services/topology-template.service'; export class ConsumptionInput extends PropertyFEModel{ inputId: string; type: string; source: string; value: any; - constraints: Array<any>; + constraints: any[]; constructor(input?: any) { super(input); @@ -49,19 +53,20 @@ export class ConsumptionInput extends PropertyFEModel{ this.inputId = input.inputId; this.type = input.type; this.source = input.source; - this.value = input.value || ""; + this.value = input.value || ''; this.constraints = input.constraints; } } } +// tslint:disable-next-line:max-classes-per-file export class ConsumptionInputDetails extends ConsumptionInput { name: string; expanded: boolean; assignValueLabel: string; - associatedProps: Array<string>; - associatedInterfaces: Array<any>; - associatedCapabilities: Array<Capability>; + associatedProps: string[]; + associatedInterfaces: any[]; + associatedCapabilities: Capability[]; origVal: string; isValid: boolean; @@ -74,7 +79,7 @@ export class ConsumptionInputDetails extends ConsumptionInput { this.associatedProps = input.associatedProps; this.associatedInterfaces = input.associatedInterfaces; this.associatedCapabilities = input.associatedCapabilities; - this.origVal = input.value || ""; + this.origVal = input.value || ''; this.isValid = input.isValid; } } @@ -84,9 +89,10 @@ export class ConsumptionInputDetails extends ConsumptionInput { } } +// tslint:disable-next-line:max-classes-per-file export class ServiceOperation { operation: OperationModel; - consumptionInputs: Array<ConsumptionInputDetails>; + consumptionInputs: ConsumptionInputDetails[]; constructor(input?: any) { if (input) { @@ -96,24 +102,24 @@ export class ServiceOperation { } } +// tslint:disable-next-line:max-classes-per-file export class InterfaceWithServiceOperation { interfaceId: string; displayName: string; - operationsList: Array<ServiceOperation>; + operationsList: ServiceOperation[]; isExpanded: boolean; constructor(input?: InterfaceModel) { if (input) { this.interfaceId = input.uniqueId; this.displayName = input.displayType(); - this.operationsList = _.map(input.operations, operation => new ServiceOperation({operation: operation})); + this.operationsList = _.map(input.operations, (operation) => new ServiceOperation({operation: operation})); this.isExpanded = true; } } } - - +// tslint:disable-next-line:max-classes-per-file @Component({ selector: 'service-consumption', templateUrl: './service-consumption.component.html', @@ -125,21 +131,23 @@ export class ServiceConsumptionComponent { modalInstance: ComponentRef<ModalComponent>; isLoading: boolean = false; - interfacesList: Array<InterfaceWithServiceOperation>; - operationsGroup: Array<ServiceOperation>; - @Input() parentServiceInputs: Array<InputBEModel> = []; - @Input() parentService: Service; - @Input() selectedService: Service; + interfacesList: InterfaceWithServiceOperation[]; + operationsGroup: ServiceOperation[]; + @Input() parentServiceInputs: InputBEModel[] = []; + @Input() parentService: ComponentMetadata; + @Input() selectedService: TopologyTemplate | FullComponentInstance; @Input() selectedServiceInstanceId: string; - @Input() instancesMappedList: Array<ServiceInstanceObject>; - @Input() instancesCapabilitiesMap: Map<string, Array<Capability>>; + @Input() instancesMappedList: ServiceInstanceObject[]; + @Input() instancesCapabilitiesMap: Map<string, Capability[]>; @Input() readonly: boolean; - selectedInstanceSiblings: Array<ServiceInstanceObject>; - selectedInstancePropertiesList: Array<PropertyBEModel> = []; - selectedInstanceCapabilitisList: Array<Capability> = []; + selectedInstanceSiblings: ServiceInstanceObject[]; + selectedInstancePropertiesList: PropertyBEModel[] = []; + selectedInstanceCapabilitisList: Capability[] = []; - constructor(private ModalServiceNg2: ModalService, private serviceServiceNg2: ServiceServiceNg2, private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2:ComponentInstanceServiceNg2) {} + constructor(private modalServiceNg2: ModalService, private topologyTemplateService: TopologyTemplateService, + private componentServiceNg2: ComponentServiceNg2, private componentInstanceServiceNg2: ComponentInstanceServiceNg2, + private componentFactory: ComponentFactory) {} ngOnInit() { this.updateSelectedInstancePropertiesAndSiblings(); @@ -147,15 +155,15 @@ export class ServiceConsumptionComponent { } ngOnChanges(changes) { - if(changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) { + if (changes.selectedServiceInstanceId && changes.selectedServiceInstanceId.currentValue !== changes.selectedServiceInstanceId.previousValue) { this.selectedServiceInstanceId = changes.selectedServiceInstanceId.currentValue; - if(changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) { + if (changes.selectedService && changes.selectedService.currentValue !== changes.selectedService.previousValue) { this.selectedService = changes.selectedService.currentValue; } this.updateSelectedInstancePropertiesAndSiblings(); this.updateSelectedServiceCapabilities(); } - if(changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) { + if (changes.instancesMappedList && !_.isEqual(changes.instancesMappedList.currentValue, changes.instancesMappedList.previousValue)) { this.updateSelectedInstancePropertiesAndSiblings(); this.updateSelectedServiceCapabilities(); } @@ -163,22 +171,22 @@ export class ServiceConsumptionComponent { updateSelectedInstancePropertiesAndSiblings() { this.interfacesList = []; - let selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, coInstance => coInstance.id === this.selectedServiceInstanceId); + const selectedInstanceMetadata: ServiceInstanceObject = _.find(this.instancesMappedList, (coInstance) => coInstance.id === this.selectedServiceInstanceId); if (selectedInstanceMetadata) { - _.forEach(selectedInstanceMetadata.interfaces, (interfaceData:InterfaceModel) => { + _.forEach(selectedInstanceMetadata.interfaces, (interfaceData: InterfaceModel) => { this.interfacesList.push(new InterfaceWithServiceOperation(interfaceData)); }); } - this.interfacesList.sort((interf1:InterfaceWithServiceOperation, interf2:InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName)); + this.interfacesList.sort((interf1: InterfaceWithServiceOperation, interf2: InterfaceWithServiceOperation) => interf1.displayName.localeCompare(interf2.displayName)); this.selectedInstancePropertiesList = selectedInstanceMetadata && selectedInstanceMetadata.properties; - this.selectedInstanceSiblings = _.filter(this.instancesMappedList, coInstance => coInstance.id !== this.selectedServiceInstanceId); + this.selectedInstanceSiblings = _.filter(this.instancesMappedList, (coInstance) => coInstance.id !== this.selectedServiceInstanceId); } updateSelectedServiceCapabilities() { this.selectedInstanceCapabilitisList = _.filter( CapabilitiesGroup.getFlattenedCapabilities(this.selectedService.capabilities), - cap => cap.properties && cap.ownerId === this.selectedService.uniqueId + (cap) => cap.properties && cap.ownerId === this.selectedService.uniqueId ); } @@ -186,15 +194,15 @@ export class ServiceConsumptionComponent { currInterface.isExpanded = !currInterface.isExpanded; } - onSelectOperation(event, currInterface:InterfaceWithServiceOperation, opIndex: number) { + onSelectOperation(event, currInterface: InterfaceWithServiceOperation, opIndex: number) { event.stopPropagation(); - if(!this.readonly) { + if (!this.readonly) { this.operationsGroup = currInterface.operationsList; - let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal); - let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled); - let modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard'); - this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); - this.ModalServiceNg2.addDynamicContentToModal( + const cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.modalServiceNg2.closeCurrentModal); + const saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createOrUpdateOperationInput, this.getDisabled); + const modalModel: ModalModel = new ModalModel('l', 'Modify Operation Consumption', '', [saveButton, cancelButton], 'standard'); + this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); + this.modalServiceNg2.addDynamicContentToModal( this.modalInstance, ServiceConsumptionCreatorComponent, { @@ -215,11 +223,11 @@ export class ServiceConsumptionComponent { } } - createOrUpdateOperationInput = ():void => { + createOrUpdateOperationInput = (): void => { this.isLoading = true; - let consumptionInputsList:Array<{[id: string]: Array<ConsumptionInput>}> = _.map(this.operationsGroup, (serviceOp) => { - let consumptionInputsArr: Array<any> = []; - if(serviceOp.consumptionInputs) { + const consumptionInputsList: Array<{[id: string]: ConsumptionInput[]}> = _.map(this.operationsGroup, (serviceOp) => { + let consumptionInputsArr: any[] = []; + if (serviceOp.consumptionInputs) { consumptionInputsArr = _.map(serviceOp.consumptionInputs, (input: ConsumptionInputDetails) => { return { inputId: input.inputId, @@ -233,16 +241,24 @@ export class ServiceConsumptionComponent { [serviceOp.operation.uniqueId]: consumptionInputsArr }; }); - this.serviceServiceNg2.createOrUpdateServiceConsumptionInputs(this.parentService,this.selectedServiceInstanceId, consumptionInputsList).subscribe(() => { + this.topologyTemplateService.createOrUpdateServiceConsumptionInputs(this.convertMetaDataToComponent(this.parentService).uniqueId, this.selectedServiceInstanceId, consumptionInputsList) + .subscribe(() => { this.isLoading = false; - }, err=> { + }, (err) => { this.isLoading = false; }); - this.ModalServiceNg2.closeCurrentModal(); - }; + this.modalServiceNg2.closeCurrentModal(); + } - getDisabled = ():boolean => { + getDisabled = (): boolean => { return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit(); - }; + } + + //TODO remove when workspace page convert to angular5 + convertMetaDataToComponent(componentMetadata: ComponentMetadata) { + const newResource: Resource = this.componentFactory.createEmptyComponent(ComponentType.RESOURCE) as Resource; + newResource.setComponentMetadata(componentMetadata); + return newResource; + } }
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts index 8593bef3eb..70b5911779 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-consumption/service-consumption.module.ts @@ -14,11 +14,11 @@ * permissions and limitations under the License. */ -import { NgModule } from "@angular/core"; -import {CommonModule} from "@angular/common"; -import {ServiceConsumptionComponent} from "./service-consumption.component"; -import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; -import {TranslateModule} from 'app/ng2/shared/translator/translate.module'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; +import { TranslateModule } from 'app/ng2/shared/translator/translate.module'; +import { ServiceConsumptionComponent } from './service-consumption.component'; @NgModule({ declarations: [ @@ -29,11 +29,13 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module'; UiElementsModule, TranslateModule ], - exports: [], + exports: [ + ServiceConsumptionComponent + ], entryComponents: [ ServiceConsumptionComponent ], providers: [] }) export class ServiceConsumptionModule { -}
\ No newline at end of file +} diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less index ae990dc85f..2fccfb414b 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less @@ -38,7 +38,7 @@ justify-content: space-between; .rule-details { - .s_1; + // .s_1; display: flex; flex: 1; align-items: center; @@ -67,4 +67,13 @@ } } + .w-sdc-designer-sidebar-section-footer { + margin-top: 10px; + text-align: center; + width: 100%; + } + .w-sdc-designer-sidebar-section-footer-action { + width: 180px; + margin-top: 10px; + } }
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts index bc3531dc58..fa75a275aa 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts @@ -13,22 +13,22 @@ * or implied. See the License for the specific language governing * permissions and limitations under the License. */ -import {Component, Input, Output, EventEmitter, ComponentRef} from '@angular/core'; -import {ModalService} from 'app/ng2/services/modal.service'; +import { Component, ComponentRef, EventEmitter, Input, Output } from '@angular/core'; import { - Service, + ButtonModel, ComponentInstance, + InputBEModel, ModalModel, - ButtonModel, PropertyBEModel, - InputBEModel, - ServiceInstanceObject } from 'app/models'; -import {ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component'; -import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; -import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service'; -import {TranslateService} from 'app/ng2/shared/translator/translate.service'; -import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response'; +import { ModalComponent } from 'app/ng2/components/ui/modal/modal.component'; +import { ServiceDependenciesEditorComponent } from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component'; +import { ModalService } from 'app/ng2/services/modal.service'; +import { ComponentGenericResponse } from 'app/ng2/services/responses/component-generic-response'; +import { TranslateService } from 'app/ng2/shared/translator/translate.service'; +import { ComponentMetadata } from '../../../../models/component-metadata'; +import { ServiceInstanceObject } from '../../../../models/service-instance-properties-and-interfaces'; +import { TopologyTemplateService } from '../../../services/component-services/topology-template.service'; export class ConstraintObject { servicePropertyName: string; @@ -48,12 +48,13 @@ export class ConstraintObject { } } +// tslint:disable-next-line:max-classes-per-file export class ConstraintObjectUI extends ConstraintObject{ isValidValue: boolean; constructor(input?: any) { super(input); - if(input) { + if (input) { this.isValidValue = input.isValidValue ? input.isValidValue : input.value !== ''; } } @@ -63,7 +64,7 @@ export class ConstraintObjectUI extends ConstraintObject{ } public isValidRule(isStatic) { - let isValidValue = isStatic ? this.isValidValue : true; + const isValidValue = isStatic ? this.isValidValue : true; return this.servicePropertyName != null && this.servicePropertyName !== '' && this.value != null && this.value !== '' && isValidValue; } @@ -75,6 +76,7 @@ export const OPERATOR_TYPES = { LESS_THAN: 'less_than' }; +// tslint:disable-next-line:max-classes-per-file class I18nTexts { static uncheckModalTitle: string; static uncheckModalText: string; @@ -89,21 +91,21 @@ class I18nTexts { static deleteRuleMsg: string; public static translateTexts(translateService) { - I18nTexts.uncheckModalTitle = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TITLE"); - I18nTexts.uncheckModalText = translateService.translate("SERVICE_DEPENDENCY_UNCHECK_TEXT"); - I18nTexts.modalApprove = translateService.translate("MODAL_APPROVE"); - I18nTexts.modalCancel = translateService.translate("MODAL_CANCEL"); - I18nTexts.modalCreate = translateService.translate("MODAL_CREATE"); - I18nTexts.modalSave = translateService.translate("MODAL_SAVE"); - I18nTexts.modalDelete = translateService.translate("MODAL_DELETE"); - I18nTexts.addRuleTxt = translateService.translate("SERVICE_DEPENDENCY_ADD_RULE"); - I18nTexts.updateRuleTxt = translateService.translate("SERVICE_DEPENDENCY_UPDATE_RULE"); - I18nTexts.deleteRuleTxt = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE"); - I18nTexts.deleteRuleMsg = translateService.translate("SERVICE_DEPENDENCY_DELETE_RULE_MSG"); + I18nTexts.uncheckModalTitle = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TITLE'); + I18nTexts.uncheckModalText = translateService.translate('SERVICE_DEPENDENCY_UNCHECK_TEXT'); + I18nTexts.modalApprove = translateService.translate('MODAL_APPROVE'); + I18nTexts.modalCancel = translateService.translate('MODAL_CANCEL'); + I18nTexts.modalCreate = translateService.translate('MODAL_CREATE'); + I18nTexts.modalSave = translateService.translate('MODAL_SAVE'); + I18nTexts.modalDelete = translateService.translate('MODAL_DELETE'); + I18nTexts.addRuleTxt = translateService.translate('SERVICE_DEPENDENCY_ADD_RULE'); + I18nTexts.updateRuleTxt = translateService.translate('SERVICE_DEPENDENCY_UPDATE_RULE'); + I18nTexts.deleteRuleTxt = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE'); + I18nTexts.deleteRuleMsg = translateService.translate('SERVICE_DEPENDENCY_DELETE_RULE_MSG'); } } - +// tslint:disable-next-line:max-classes-per-file @Component({ selector: 'service-dependencies', templateUrl: './service-dependencies.component.html', @@ -115,56 +117,55 @@ export class ServiceDependenciesComponent { modalInstance: ComponentRef<ModalComponent>; isDependent: boolean; isLoading: boolean; - parentServiceInputs: Array<InputBEModel> = []; - rulesList: Array<ConstraintObject> = []; - operatorTypes: Array<any>; + parentServiceInputs: InputBEModel[] = []; + rulesList: ConstraintObject[] = []; + operatorTypes: any[]; @Input() readonly: boolean; - @Input() compositeService: Service; + @Input() compositeService: ComponentMetadata; @Input() currentServiceInstance: ComponentInstance; - @Input() selectedInstanceSiblings: Array<ServiceInstanceObject>; - @Input() selectedInstanceConstraints: Array<ConstraintObject> = []; - @Input() selectedInstanceProperties: Array<PropertyBEModel> = []; - @Output() updateRulesListEvent:EventEmitter<Array<ConstraintObject>> = new EventEmitter<Array<ConstraintObject>>(); + @Input() selectedInstanceSiblings: ServiceInstanceObject[]; + @Input() selectedInstanceConstraints: ConstraintObject[] = []; + @Input() selectedInstanceProperties: PropertyBEModel[] = []; + @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>(); @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter(); @Output() dependencyStatus = new EventEmitter<boolean>(); - - constructor(private componentServiceNg2: ComponentServiceNg2, private ModalServiceNg2: ModalService, private translateService: TranslateService) { + constructor(private topologyTemplateService: TopologyTemplateService, private modalServiceNg2: ModalService, private translateService: TranslateService) { } ngOnInit() { this.isLoading = false; this.operatorTypes = [ - {label: ">", value: OPERATOR_TYPES.GREATER_THAN}, - {label: "<", value: OPERATOR_TYPES.LESS_THAN}, - {label: "=", value: OPERATOR_TYPES.EQUAL} + {label: '>', value: OPERATOR_TYPES.GREATER_THAN}, + {label: '<', value: OPERATOR_TYPES.LESS_THAN}, + {label: '=', value: OPERATOR_TYPES.EQUAL} ]; - this.componentServiceNg2.getComponentInputsWithProperties(this.compositeService).subscribe((result: ComponentGenericResponse) => { + this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((result: ComponentGenericResponse) => { this.parentServiceInputs = result.inputs; }); this.loadRules(); - this.translateService.languageChangedObservable.subscribe(lang => { + this.translateService.languageChangedObservable.subscribe((lang) => { I18nTexts.translateTexts(this.translateService); }); } ngOnChanges(changes) { - if(changes.currentServiceInstance) { + if (changes.currentServiceInstance) { this.currentServiceInstance = changes.currentServiceInstance.currentValue; this.isDependent = this.currentServiceInstance.isDependent(); } - if(changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) { + if (changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) { this.selectedInstanceConstraints = changes.selectedInstanceConstraints.currentValue; this.loadRules(); } } public openRemoveDependencyModal = (): ComponentRef<ModalComponent> => { - let actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency); - let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); - let modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]); - return this.ModalServiceNg2.createCustomModal(modalModel); + const actionButton: ButtonModel = new ButtonModel(I18nTexts.modalApprove, 'blue', this.onUncheckDependency); + const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); + const modalModel: ModalModel = new ModalModel('sm', I18nTexts.uncheckModalTitle, I18nTexts.uncheckModalText, [actionButton, cancelButton]); + return this.modalServiceNg2.createCustomModal(modalModel); } loadRules() { @@ -178,60 +179,59 @@ export class ServiceDependenciesComponent { } onUncheckDependency = () => { - this.ModalServiceNg2.closeCurrentModal(); + this.modalServiceNg2.closeCurrentModal(); this.isLoading = true; - let isDepOrig = this.isDependent; - let rulesListOrig = this.rulesList; + const isDepOrig = this.isDependent; + const rulesListOrig = this.rulesList; this.currentServiceInstance.unmarkAsDependent(); this.updateComponentInstance(isDepOrig, rulesListOrig); } onCloseRemoveDependencyModal = () => { this.isDependent = true; - this.ModalServiceNg2.closeCurrentModal(); + this.modalServiceNg2.closeCurrentModal(); } onCheckDependency = () => { - let isDepOrig = this.isDependent; - let rulesListOrig = this.rulesList; + const isDepOrig = this.isDependent; + const rulesListOrig = this.rulesList; this.currentServiceInstance.markAsDependent(); this.rulesList = []; this.updateComponentInstance(isDepOrig, rulesListOrig); } onMarkAsDependent() { - if(!this.currentServiceInstance.isDependent()) { + if (!this.currentServiceInstance.isDependent()) { this.onCheckDependency(); - } - else { + } else { this.openRemoveDependencyModal().instance.open(); } } - updateComponentInstance(isDependent_origVal : boolean, rulesList_orig: Array<ConstraintObject>) { + updateComponentInstance(isDependentOrigVal: boolean, rulesListOrig: ConstraintObject[]) { this.isLoading = true; - this.componentServiceNg2.updateComponentInstance(this.compositeService, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => { + this.topologyTemplateService.updateComponentInstance(this.compositeService.uniqueId, this.currentServiceInstance).subscribe((updatedServiceIns: ComponentInstance) => { this.currentServiceInstance = new ComponentInstance(updatedServiceIns); this.isDependent = this.currentServiceInstance.isDependent(); this.dependencyStatus.emit(this.isDependent); - if(this.isDependent) { + if (this.isDependent) { this.loadRulesListEvent.emit(); } this.isLoading = false; - }, err=> { - this.isDependent = isDependent_origVal; - this.rulesList = rulesList_orig; + }, (err) => { + this.isDependent = isDependentOrigVal; + this.rulesList = rulesListOrig; this.isLoading = false; console.log('An error has occurred.'); }); } - onAddRule () { - let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal); - let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled); - let modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard'); - this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); - this.ModalServiceNg2.addDynamicContentToModal( + onAddRule() { + const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal); + const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled); + const modalModel: ModalModel = new ModalModel('l', I18nTexts.addRuleTxt, '', [saveButton, cancelButton], 'standard'); + this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); + this.modalServiceNg2.addDynamicContentToModal( this.modalInstance, ServiceDependenciesEditorComponent, { @@ -247,16 +247,16 @@ export class ServiceDependenciesComponent { } onSelectRule(index: number) { - let cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.ModalServiceNg2.closeCurrentModal); - let saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled); - let modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard'); - this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); - this.ModalServiceNg2.addDynamicContentToModal( + const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal); + const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled); + const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateRuleTxt, '', [saveButton, cancelButton], 'standard'); + this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); + this.modalServiceNg2.addDynamicContentToModal( this.modalInstance, ServiceDependenciesEditorComponent, { serviceRuleIndex: index, - serviceRules: _.map(this.rulesList, rule => new ConstraintObjectUI(rule)), + serviceRules: _.map(this.rulesList, (rule) => new ConstraintObjectUI(rule)), currentServiceName: this.currentServiceInstance.name, operatorTypes: this.operatorTypes, compositeServiceName: this.compositeService.name, @@ -268,40 +268,40 @@ export class ServiceDependenciesComponent { this.modalInstance.instance.open(); } - getDisabled = ():boolean => { + getDisabled = (): boolean => { return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit(); - }; + } - createRule = ():void => { - let newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule); + createRule = (): void => { + const newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule); this.isLoading = true; - this.componentServiceNg2.createServiceFilterConstraints( - this.compositeService, - this.currentServiceInstance, + this.topologyTemplateService.createServiceFilterConstraints( + this.compositeService.uniqueId, + this.currentServiceInstance.uniqueId, newRuleToCreate ).subscribe( (response) => { this.updateRulesListEvent.emit(response.properties); this.isLoading = false; - }, err=> { + }, (err) => { this.isLoading = false; }); - this.ModalServiceNg2.closeCurrentModal(); - }; + this.modalServiceNg2.closeCurrentModal(); + } - updateRules = ():void => { - let allRulesToUpdate: Array<ConstraintObject> = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map(rule => new ConstraintObject(rule)); + updateRules = (): void => { + const allRulesToUpdate: ConstraintObject[] = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule)); this.isLoading = true; - this.componentServiceNg2.updateServiceFilterConstraints( - this.compositeService, - this.currentServiceInstance, + this.topologyTemplateService.updateServiceFilterConstraints( + this.compositeService.uniqueId, + this.currentServiceInstance.uniqueId, allRulesToUpdate ).subscribe((response) => { this.updateRulesListEvent.emit(response.properties); this.isLoading = false; - }, err => { + }, (err) => { this.isLoading = false; }); - this.ModalServiceNg2.closeCurrentModal(); + this.modalServiceNg2.closeCurrentModal(); } getSymbol(constraintOperator) { @@ -312,23 +312,23 @@ export class ServiceDependenciesComponent { } } - onDeleteRule = (index:number) => { + onDeleteRule = (index: number) => { this.isLoading = true; - this.componentServiceNg2.deleteServiceFilterConstraints( - this.compositeService, - this.currentServiceInstance, + this.topologyTemplateService.deleteServiceFilterConstraints( + this.compositeService.uniqueId, + this.currentServiceInstance.uniqueId, index ).subscribe( (response) => { this.updateRulesListEvent.emit(response.properties); this.isLoading = false; - }, err=> { + }, (err) => { this.isLoading = false; }); - this.ModalServiceNg2.closeCurrentModal(); - }; + this.modalServiceNg2.closeCurrentModal(); + } - openDeleteModal = (index:number) => { - this.ModalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg, + openDeleteModal = (index: number) => { + this.modalServiceNg2.createActionModal(I18nTexts.deleteRuleTxt, I18nTexts.deleteRuleMsg, I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open(); } -}
\ No newline at end of file +} diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts index 7e66ed99c7..5e2d03d26c 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts @@ -1,9 +1,9 @@ -import { NgModule } from "@angular/core"; -import {CommonModule} from "@angular/common"; -import {ServiceDependenciesComponent} from "./service-dependencies.component"; -import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; -import {TranslateModule} from 'app/ng2/shared/translator/translate.module'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module'; +import { TranslateModule } from 'app/ng2/shared/translator/translate.module'; +import { ServiceDependenciesComponent } from './service-dependencies.component'; @NgModule({ declarations: [ @@ -14,11 +14,13 @@ import {TranslateModule} from 'app/ng2/shared/translator/translate.module'; UiElementsModule, TranslateModule ], - exports: [], + exports: [ + ServiceDependenciesComponent + ], entryComponents: [ ServiceDependenciesComponent ], providers: [] }) export class ServiceDependenciesModule { -}
\ No newline at end of file +} diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html deleted file mode 100644 index e1a4f68a9b..0000000000 --- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.html +++ /dev/null @@ -1,27 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ - ~ Licensed under the Apache License, Version 2.0 (the "License"); - ~ you may not use this file except in compliance with the License. - ~ You may obtain a copy of the License at - ~ - ~ http://www.apache.org/licenses/LICENSE-2.0 - ~ - ~ Unless required by applicable law or agreed to in writing, software - ~ distributed under the License is distributed on an "AS IS" BASIS, - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - ~ See the License for the specific language governing permissions and - ~ limitations under the License. - --> - -<div class="service-path-selector"> - <label>Service Flows:</label> - <ui-element-dropdown - class="path-dropdown" - data-tests-id="service-path-selector" - [readonly]="dropdownOptions.length < 3" - [(value)]="selectedPathId" - [values]="dropdownOptions" - (valueChange)="onSelectPath()"> - </ui-element-dropdown> -</div> diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less deleted file mode 100644 index f3cb4a3c34..0000000000 --- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.less +++ /dev/null @@ -1,24 +0,0 @@ -@import './../../../../../assets/styles/variables.less'; -.service-path-selector { - margin: 10px 35px 10px 0; - display: flex; - font-size: 12px; - - /deep/ .path-dropdown { - width: 150px; - select { - font-size: 14px; - font-family: @font-opensans-regular; - padding: 4px 10px; - } - } - - label { - margin-right: 10px; - align-self: center; - font-size: 14px; - font-family: @font-opensans-regular; - font-weight: normal; - margin-bottom: initial; - } -} diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts deleted file mode 100644 index e09001fc6c..0000000000 --- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.component.ts +++ /dev/null @@ -1,133 +0,0 @@ -import {Component, Input, KeyValueDiffer, IterableDiffers, KeyValueDiffers, DoCheck} from '@angular/core'; -import {Service} from "app/models/components/service"; -import {TranslateService} from "app/ng2/shared/translator/translate.service"; -import {ForwardingPath} from "app/models/forwarding-path"; -import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component"; - -@Component({ - selector: 'service-path-selector', - templateUrl: './service-path-selector.component.html', - styleUrls:['service-path-selector.component.less'], - providers: [TranslateService] -}) - -export class ServicePathSelectorComponent implements DoCheck { - - defaultSelectedId: string; - hideAllValue: string; - hideAllId: string = '0'; - showAllValue: string; - showAllId: string = '1'; - - paths: Array<ForwardingPath> = []; - dropdownOptions: Array<DropdownValue>; - differ: KeyValueDiffer; - - @Input() service: Service; - @Input() drawPath: Function; - @Input() deletePaths: Function; - @Input() selectedPathId: string; - - constructor(private differs: KeyValueDiffers, private translateService: TranslateService) { - - this.defaultSelectedId = this.hideAllId; - this.convertPathsToDropdownOptions(); - - this.translateService.languageChangedObservable.subscribe(lang => { - this.hideAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_HIDE_ALL_VALUE"); - this.showAllValue = this.translateService.translate("SERVICE_PATH_SELECTOR_SHOW_ALL_VALUE"); - this.convertPathsToDropdownOptions(); - }); - - } - - ngOnInit(): void { - - this.selectedPathId = this.defaultSelectedId; - this.differ = this.differs.find(this.service.forwardingPaths).create(null); - - } - - ngDoCheck(): void { - - const pathsChanged = this.differ.diff(this.service.forwardingPaths); - - if (pathsChanged) { - let oldPaths = _.cloneDeep(this.paths); - this.populatePathsFromService(); - - if (!(_.isEqual(oldPaths, this.paths))) { - this.convertPathsToDropdownOptions(); - - let temp = this.selectedPathId; - this.selectedPathId = '-1'; - - setTimeout(() => { - this.selectedPathId = temp; - this.onSelectPath(); - }, 0); - } - } - - } - - populatePathsFromService(): void { - - this.paths = []; - let {forwardingPaths} = this.service; - - _.forEach(forwardingPaths, path => { - this.paths.push(path); - }); - this.paths.sort((a:ForwardingPath, b:ForwardingPath)=> { - return a.name.localeCompare(b.name); - }); - - } - - convertPathsToDropdownOptions(): void { - - let result = [ - new DropdownValue(this.hideAllId, this.hideAllValue), - new DropdownValue(this.showAllId, this.showAllValue) - ]; - - _.forEach(this.paths, (value: ForwardingPath) => { - result[result.length] = new DropdownValue(value.uniqueId, value.name); - }); - - this.dropdownOptions = result; - - } - - onSelectPath = (): void => { - - if (this.selectedPathId !== '-1') { - this.deletePaths(); - - switch (this.selectedPathId) { - case this.hideAllId: - break; - - case this.showAllId: - _.forEach(this.paths, path => - this.drawPath(path) - ); - break; - - default: - let path = this.paths.find(path => - path.uniqueId === this.selectedPathId - ); - if (!path) { - this.selectedPathId = this.defaultSelectedId; - this.onSelectPath(); // currently does nothing in default case, but if one day it does, we want the selection to behave accordingly. - break; - } - this.drawPath(path); - break; - } - } - - } -} diff --git a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts deleted file mode 100644 index c07061ce9a..0000000000 --- a/catalog-ui/src/app/ng2/components/logic/service-path-selector/service-path-selector.module.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { NgModule } from "@angular/core"; -import {CommonModule} from "@angular/common"; -import {ServicePathSelectorComponent} from "./service-path-selector.component"; -import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; - -@NgModule({ - declarations: [ - ServicePathSelectorComponent - ], - imports: [ - CommonModule, - UiElementsModule - ], - exports: [], - entryComponents: [ - ServicePathSelectorComponent - ], - providers: [] -}) -export class ServicePathSelectorModule { -}
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html deleted file mode 100644 index 2a6a72ab7a..0000000000 --- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.html +++ /dev/null @@ -1,31 +0,0 @@ -<!-- - ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved. - ~ - ~ Licensed under the Apache License, Version 2.0 (the "License"); - ~ you may not use this file except in compliance with the License. - ~ You may obtain a copy of the License at - ~ - ~ http://www.apache.org/licenses/LICENSE-2.0 - ~ - ~ Unless required by applicable law or agreed to in writing, software - ~ distributed under the License is distributed on an "AS IS" BASIS, - ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - ~ See the License for the specific language governing permissions and - ~ limitations under the License. - --> - -<div class='service-path'> - <button class='zoom-icons create-path-button' data-tests-id="pathsMenuBtn" (click)="showServicePathMenu = !showServicePathMenu">...</button> - <div class="service-path-menu" *ngIf="showServicePathMenu"> - <div > - <ul> - <li *ngIf='!isViewOnly'><div class="hand" (click)="onCreateServicePath()" data-tests-id="createPathMenuItem"> - Create Service Flow - </div></li> - <li><div class="hand" (click)="onListServicePath()" data-tests-id="pathsListMenuItem"> - Service Flows List - </div></li> - </ul> - </div> - </div> -</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less deleted file mode 100644 index 777b206714..0000000000 --- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.less +++ /dev/null @@ -1,51 +0,0 @@ -//@import 'src/assets/styles/variables.less'; -@import './../../../../../assets/styles/variables.less'; -.service-path { - position: relative; - .create-path-button{ - &:extend(.search-bar-button); - width: 30px; - height: 30px; - &:hover { - color: @main_color_a; - } - &:active { - background: @main_color_a; - color: @main_color_p; - } - &:focus { - outline: none; - } - } - .service-path-menu { - border: 1px solid @main_color_o; - border-radius: 0 0 2px 2px; - border-top-color: @main_color_a; - border-top-width: 3px; - - box-sizing: border-box; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30); - - background-color: @main_color_p; - - padding: 5px 0; - right: 34px; - position: absolute; - top: 10px; - width: 150px; - font-size: 13px; - font-family: @font-opensans-regular; - - li { - color: @main_color_m; - padding: 0 10px; - line-height: 20px; - &:hover { - cursor: pointer; - color: @main_color_a; - background-color: fade(@main_color_a, 5%); - } - } - - } -} diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts deleted file mode 100644 index d66c5f0132..0000000000 --- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.component.ts +++ /dev/null @@ -1,84 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, ComponentRef} from '@angular/core'; -import {ModalService} from 'app/ng2/services/modal.service'; -import {ModalModel, ButtonModel} from 'app/models'; -import {ServicePathCreatorComponent} from 'app/ng2/pages/service-path-creator/service-path-creator.component'; -import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component'; -import ServicePathsListComponent from "app/ng2/pages/service-paths-list/service-paths-list.component"; -import {Service} from "app/models/components/service"; - -@Component({ - selector: 'service-path', - templateUrl: './service-path.component.html', - styleUrls: ['service-path.component.less'], - providers: [ModalService] -}) - -export class ServicePathComponent { - showServicePathMenu: boolean = false; - modalInstance: ComponentRef<ModalComponent>; - @Input() service: Service; - @Input() onCreate: Function; - @Input() onSave: Function; - @Input() isViewOnly:boolean; - - constructor(private ModalServiceNg2: ModalService) {} - - onCreateServicePath = ():void => { - this.showServicePathMenu = false; - let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal); - let saveButton: ButtonModel = new ButtonModel('Create', 'blue', this.createPath, this.getDisabled ); - let modalModel: ModalModel = new ModalModel('l', 'Create Service Flow', '', [saveButton, cancelButton], 'standard', true); - this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); - this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service}); - this.modalInstance.instance.open(); - }; - - onListServicePath = ():void => { - this.showServicePathMenu = false; - let cancelButton: ButtonModel = new ButtonModel('Close', 'outline white', this.ModalServiceNg2.closeCurrentModal); - let modalModel: ModalModel = new ModalModel('md', 'Service Flows List','', [cancelButton], 'standard', true); - this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); - this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathsListComponent, {service: this.service, - onCreateServicePath: this.onCreateServicePath, onEditServicePath: this.onEditServicePath, isViewOnly: this.isViewOnly}); - this.modalInstance.instance.open(); - }; - - createPath = ():void => { - this.onCreate(this.modalInstance.instance.dynamicContent.instance.createServicePathData()); - this.ModalServiceNg2.closeCurrentModal(); - }; - - onEditServicePath = (id:string):void => { - let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline white', this.ModalServiceNg2.closeCurrentModal); - let saveButton: ButtonModel = new ButtonModel('Save', 'blue', this.createPath, this.getDisabled ); - let modalModel: ModalModel = new ModalModel('l', 'Edit Path', '', [saveButton, cancelButton], 'standard', true); - this.modalInstance = this.ModalServiceNg2.createCustomModal(modalModel); - this.ModalServiceNg2.addDynamicContentToModal(this.modalInstance, ServicePathCreatorComponent, {service: this.service, pathId: id}); - this.modalInstance.instance.open(); - }; - - getDisabled = ():boolean => { - return this.isViewOnly || !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit(); - }; -} - diff --git a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts b/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts deleted file mode 100644 index 96af247086..0000000000 --- a/catalog-ui/src/app/ng2/components/logic/service-path/service-path.module.ts +++ /dev/null @@ -1,39 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from "@angular/core"; -import {CommonModule} from "@angular/common"; -import {ServicePathComponent} from "./service-path.component"; -import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module"; - -@NgModule({ - declarations: [ - ServicePathComponent - ], - imports: [CommonModule, - UiElementsModule], - exports: [], - entryComponents: [ - ServicePathComponent - ], - providers: [] -}) -export class ServicePathModule { -}
\ No newline at end of file |