diff options
Diffstat (limited to 'catalog-ui')
12 files changed, 13 insertions, 275 deletions
diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts index 7719f7389f..ed1463af74 100644 --- a/catalog-ui/src/app/modules/directive-module.ts +++ b/catalog-ui/src/app/modules/directive-module.ts @@ -75,7 +75,6 @@ import {ZoneInstanceComponent} from "../ng2/pages/composition/graph/canvas-zone/ import {CompositionPanelComponent} from 'app/ng2/pages/composition/panel/composition-panel.component'; import {PropertiesAssignmentComponent} from "../ng2/pages/properties-assignment/properties-assignment.page.component"; import {SearchWithAutoCompleteComponent} from "../ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component"; -import {PalettePopupPanelComponent} from "../ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component"; import {ServicePathSelectorComponent} from '../ng2/pages/composition/graph/service-path-selector/service-path-selector.component'; import {MultilineEllipsisComponent} from "../ng2/shared/multiline-ellipsis/multiline-ellipsis.component"; import {InterfaceOperationComponent} from '../ng2/pages/interface-operation/interface-operation.page.component'; @@ -228,12 +227,6 @@ directiveModule.directive('ng2SearchWithAutocomplete', downgradeComponent({ outputs: ['searchChanged', 'searchButtonClicked'] }) as angular.IDirectiveFactory); -directiveModule.directive('ng2PalettePopupPanel', downgradeComponent({ - component: PalettePopupPanelComponent, - inputs: [], - outputs: [] -}) as angular.IDirectiveFactory); - directiveModule.directive('ng2ServicePathSelector', downgradeComponent({ component: ServicePathSelectorComponent, inputs: ['drawPath', 'deletePaths', 'service', 'selectedPathId'], diff --git a/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html index e1851d5c0c..090493941b 100644 --- a/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html +++ b/catalog-ui/src/app/ng2/pages/composition/composition-page.component.html @@ -1,7 +1,6 @@ <div class="workspace-composition-page"> <div class="composition-graph"> <composition-palette></composition-palette> - <app-palette-popup-panel></app-palette-popup-panel> <composition-graph dndDropzone [dndAllowExternal]=true [topologyTemplate]="topologyTemplate" [testId]="'canvas'"></composition-graph> <ng2-composition-panel [topologyTemplate]="topologyTemplate"></ng2-composition-panel> </div> diff --git a/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts b/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts index d0ca05b2be..18524a05be 100644 --- a/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts +++ b/catalog-ui/src/app/ng2/pages/composition/composition-page.module.ts @@ -7,14 +7,13 @@ import {CompositionGraphModule} from "./graph/composition-graph.module"; import {CompositionPageComponent} from "./composition-page.component"; import {NgxsModule} from "@ngxs/store"; import {PaletteModule} from "./palette/palette.module"; -import {PalettePopupPanelComponent} from "./palette/palette-popup-panel/palette-popup-panel.component"; import { CompositionPanelModule } from "app/ng2/pages/composition/panel/composition-panel.module"; import {CompositionService} from "./composition.service"; import {DndModule} from "ngx-drag-drop"; import {GraphState} from "./common/store/graph.state"; @NgModule({ - declarations: [CompositionPageComponent, PalettePopupPanelComponent], + declarations: [CompositionPageComponent], imports: [CommonModule, CompositionGraphModule, CompositionPanelModule, diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts index 1328747f88..6bbf1afab9 100644 --- a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts @@ -184,6 +184,10 @@ export class CompositionGraphComponent implements AfterViewInit { } public onDrop = (dndEvent: DndDropEvent) => { + if (dndEvent.data.categoryType=="POLICY" || dndEvent.data.categoryType=="GROUP"){ + this.compositionGraphPaletteUtils.addPolicyOrGroupFromPalette(dndEvent); + return; + } this.compositionGraphPaletteUtils.addNodeFromPalette(this._cy, dndEvent); } @@ -600,10 +604,6 @@ export class CompositionGraphComponent implements AfterViewInit { this.notificationService.push(new NotificationSettings('success', 'Policy Updated', 'Success')); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => { - this.compositionGraphPaletteUtils.onComponentHoverIn(leftPaletteComponent, this._cy); - }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, (component: TopologyTemplate, paletteComponent: LeftPaletteComponent, startPosition: Point) => { @@ -620,11 +620,6 @@ export class CompositionGraphComponent implements AfterViewInit { }); }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => { - this._cy.emit('hidehandles'); - this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy); - }); - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, (dragElement, dragComponent) => { this.dragElement = dragElement; this.dragComponent = ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent, this.workspaceService.metadata.categories[0].useServiceSubstitutionForNestedServices); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts index 72780ec0e5..8383c24f26 100644 --- a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts +++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import {Injectable} from "@angular/core"; +import {Component, Injectable} from "@angular/core"; import {CompositionGraphGeneralUtils, RequirementAndCapabilities} from "./composition-graph-general-utils"; import {CommonGraphUtils} from "../common/common-graph-utils"; import {EventListenerService} from "../../../../../services/event-listener-service"; @@ -54,38 +54,6 @@ export class CompositionGraphPaletteUtils { } /** - * - * @param Calculate matching nodes, highlight the matching nodes and fade the non matching nodes - * @param leftPaletteComponent - * @param _cy - * @returns void - * @private - */ - - public onComponentHoverIn = (leftPaletteComponent: LeftPaletteComponent, _cy: Cy.Instance) => { - const nodesData = this.nodesGraphUtils.getAllNodesData(_cy.nodes()); - const nodesLinks = this.generalGraphUtils.getAllCompositionCiLinks(_cy); - - if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) { - const reqAndCap: RequirementAndCapabilities = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId); - const filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodesToComponentInstance( - { uniqueId: leftPaletteComponent.uniqueId, requirements: reqAndCap.requirements, capabilities: reqAndCap.capabilities} as ComponentInstance, nodesData, nodesLinks); - - this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, _cy); - this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, _cy); - } else { - - this.topologyTemplateService.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => { - let reqAndCap: RequirementAndCapabilities = { - capabilities: response.capabilities, - requirements: response.requirements - } - this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, reqAndCap); - }); - } - } - - /** * Calculate the dragged element (html element) position on canvas * @param cy * @param event @@ -228,5 +196,12 @@ export class CompositionGraphPaletteUtils { }); } } + + addPolicyOrGroupFromPalette(dndEvent: DndDropEvent) { + let draggedComponent:LeftPaletteComponent = dndEvent.data; + let dropPosition:Point = dndEvent.event; + let component:Component = dndEvent.data; + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, draggedComponent, component, dropPosition); + } } diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap index 74517e1eb0..e5bd4a9079 100644 --- a/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap +++ b/catalog-ui/src/app/ng2/pages/composition/palette/__snapshots__/palette.component.spec.ts.snap @@ -9,8 +9,6 @@ exports[`palette component should match current snapshot of palette component 1` onDragStart={[Function Function]} onDraggableMoved={[Function Function]} onDrop={[Function Function]} - onMouseOut={[Function Function]} - onMouseOver={[Function Function]} onSearchChanged={[Function Function]} position={[Function Point]} > diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.html b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.html deleted file mode 100644 index 86847eb28a..0000000000 --- a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.html +++ /dev/null @@ -1,30 +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="popup-panel" [ngClass]="{'hide':!isShowPanel}" [style.left]="popupPanelPosition.x + 'px'" [style.top]="popupPanelPosition.y + 'px'" - (mousedown)="addZoneInstance()" - (mouseenter)="onMouseEnter()" - (mouseleave)="onMouseLeave()"> - <div class="popup-panel-group"> - <div class="popup-panel-plus">+</div> - <div class="popup-panel-title">{{panelTitle}}</div> - </div> -</div> -<!--<popup-menu-list [menuItemsData]="getMenuItems()">--> - - - -<!--</popup-menu-list>-->
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.less b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.less deleted file mode 100644 index 24f0485e76..0000000000 --- a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.less +++ /dev/null @@ -1,37 +0,0 @@ -.popup-panel { - position: absolute; - display: inline-block; - background-color: white; - border: solid 1px #d2d2d2; - border-top: solid 3px #13a7df; - left: 208px; top: 0px; - width: 140px; - height: 40px; - z-index: 10000; - - &:hover { - background-color: whitesmoke; - } - - .popup-panel-group { - padding-left: 8px; - padding-top: 8px; - cursor: pointer; - - .popup-panel-plus { - border-radius: 50%; - color: white; - background-color: #13a7df; - width: 20px; - text-align: center; - display: inline-block; - } - - .popup-panel-title { - padding-left: 10px; - display: inline-block; - } - - } - -} diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.ts deleted file mode 100644 index 5d98fc7f78..0000000000 --- a/catalog-ui/src/app/ng2/pages/composition/palette/palette-popup-panel/palette-popup-panel.component.ts +++ /dev/null @@ -1,98 +0,0 @@ -import {Component, OnInit} from '@angular/core'; -import {GRAPH_EVENTS, SdcElementType} from "app/utils"; -import {LeftPaletteComponent, Point} from "app/models"; -import {EventListenerService} from "app/services"; -import {LeftPaletteMetadataTypes} from "app/models/components/displayComponent"; - -@Component({ - selector: 'app-palette-popup-panel', - templateUrl: './palette-popup-panel.component.html', - styleUrls: [ './palette-popup-panel.component.less' ], -}) -export class PalettePopupPanelComponent implements OnInit { - - public panelTitle: string; - public isShowPanel: boolean; - private component: Component; - private displayComponent: LeftPaletteComponent; - private popupPanelPosition:Point = new Point(0,0); - - constructor(private eventListenerService: EventListenerService) { - this.isShowPanel = false; - } - - ngOnInit() { - this.registerObserverCallbacks(); - } - - public onMouseEnter() { - this.isShowPanel = true; - } - - public getMenuItems = () => { - return [{ - text: 'Delete', - iconName: 'trash-o', - iconType: 'common', - iconMode: 'secondary', - iconSize: 'small', - type: '', - action: () => this.addZoneInstance() - }]; - } - - public onMouseLeave() { - this.isShowPanel = false; - } - - public addZoneInstance(): void { - if(this.displayComponent) { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, this.component, this.displayComponent, this.popupPanelPosition); - this.hidePopupPanel(); - } - } - - private registerObserverCallbacks() { - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, - (displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => { - this.showPopupPanel(displayComponent, sectionElem); - }); - - this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL, () => this.hidePopupPanel()); - } - - private getPopupPanelPosition (sectionElem: HTMLElement):Point { - let pos: ClientRect = sectionElem.getBoundingClientRect(); - let offsetX: number = -30; - const offsetY: number = pos.height / 2; - return new Point((pos.right + offsetX), (pos.top - offsetY + window.pageYOffset)); - }; - - private setPopupPanelTitle(component: LeftPaletteComponent): void { - if (component.componentSubType === SdcElementType.GROUP) { - this.panelTitle = "Add Group"; - return; - } - - if (component.componentSubType === SdcElementType.POLICY) { - this.panelTitle = "Add Policy"; - return; - } - } - - private showPopupPanel(displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) { - if(!this.isShowPanel){ - this.displayComponent = displayComponent; - this.setPopupPanelTitle(displayComponent); - this.popupPanelPosition = this.getPopupPanelPosition(sectionElem); - this.isShowPanel = true; - } - }; - - private hidePopupPanel() { - if(this.isShowPanel){ - this.isShowPanel = false; - } - }; -} diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts index efa9cd3370..e96102bd9b 100644 --- a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts +++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.spec.ts @@ -5,10 +5,8 @@ import {EventListenerService} from "../../../../services/event-listener-service" import {PaletteElementComponent} from "./palette-element/palette-element.component"; import {PaletteComponent} from "./palette.component"; import {ConfigureFn, configureTests} from "../../../../../jest/test-config.helper"; -import {GRAPH_EVENTS} from "../../../../utils/constants"; import {KeyValuePipe} from "../../../pipes/key-value.pipe"; import {ResourceNamePipe} from "../../../pipes/resource-name.pipe"; -import {LeftPaletteComponent} from "../../../../models/components/displayComponent"; import {Observable} from "rxjs/Observable"; import {leftPaletteElements} from "../../../../../jest/mocks/left-paeltte-elements.mock"; import {NgxsModule, Select} from '@ngxs/store'; @@ -53,30 +51,6 @@ describe('palette component', () => { expect(fixture).toMatchSnapshot(); }); - it('should call on palette component hover in event', () => { - let paletteObject = <LeftPaletteComponent>{categoryType: 'COMPONENT'}; - fixture.componentInstance.onMouseOver(mockedEvent, paletteObject); - expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, paletteObject); - }); - - it('should call on palette component hover out event', () => { - let paletteObject = <LeftPaletteComponent>{categoryType: 'COMPONENT'}; - fixture.componentInstance.onMouseOut(paletteObject); - expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT); - }); - - it('should call show popup panel event', () => { - let paletteObject = <LeftPaletteComponent>{categoryType: 'GROUP'}; - fixture.componentInstance.onMouseOver(mockedEvent, paletteObject); - expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, paletteObject, mockedEvent.target); - }); - - it('should call hide popup panel event', () => { - let paletteObject = <LeftPaletteComponent>{categoryType: 'GROUP'}; - fixture.componentInstance.onMouseOut(paletteObject); - expect(eventServiceMock.notifyObservers).toHaveBeenCalledWith(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL); - }); - it('should build Palette By Categories without searchText', () => { fixture.componentInstance.buildPaletteByCategories(); expect(fixture.componentInstance.paletteElements["Generic"]["Network"].length).toBe(5); diff --git a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts index e91798ef36..673efa4172 100644 --- a/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/palette/palette.component.ts @@ -106,14 +106,6 @@ export class PaletteComponent { return counter; } - private isGroupOrPolicy(component: LeftPaletteComponent): boolean { - if (component && - (component.categoryType === LeftPaletteMetadataTypes.Group || - component.categoryType === LeftPaletteMetadataTypes.Policy)) { - return true; - } - return false; - } @HostListener('document:dragover', ['$event']) public onDrag(event) { this.position.x = event.clientX; @@ -153,22 +145,4 @@ export class PaletteComponent { } - public onMouseOver = (sectionElem:MouseEvent, displayComponent:LeftPaletteComponent) => { - console.debug("On palette element MOUSE HOVER: ", displayComponent); - if (this.isGroupOrPolicy(displayComponent)) { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, displayComponent, sectionElem.target); - } else { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent); - } - }; - - public onMouseOut = (displayComponent:LeftPaletteComponent) => { - console.debug("On palette element MOUSE OUT: ", displayComponent); - if (this.isGroupOrPolicy(displayComponent)) { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL); - } else { - this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT); - } - }; - } diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts index ab706e7088..af5c23c764 100644 --- a/catalog-ui/src/app/utils/constants.ts +++ b/catalog-ui/src/app/utils/constants.ts @@ -342,13 +342,9 @@ export class GRAPH_EVENTS { static ON_NODE_SELECTED = "onNodeSelected"; static ON_ZONE_INSTANCE_SELECTED = "onZoneInstanceSelected"; static ON_GRAPH_BACKGROUND_CLICKED = "onGraphBackgroundClicked"; - static ON_PALETTE_COMPONENT_HOVER_IN = 'onPaletteComponentHoverIn'; - static ON_PALETTE_COMPONENT_HOVER_OUT = 'onPaletteComponentHoverOut'; static ON_PALETTE_COMPONENT_DRAG_START = 'onPaletteComponentDragStart'; static ON_PALETTE_COMPONENT_DRAG_ACTION = 'onPaletteComponentDragAction'; static ON_PALETTE_COMPONENT_DROP = 'onPaletteComponentDrop'; - static ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL = 'onPaletteComponentShowPopupPanel'; - static ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL = 'onPaletteComponentHidePopupPanel'; static ON_COMPONENT_INSTANCE_NAME_CHANGED = 'onComponentInstanceNameChanged'; static ON_COMPONENT_INSTANCE_REQUIREMENT_EXTERNAL_CHANGED = 'onComponentInstanceRequirementExternalChanged' static ON_COMPONENT_INSTANCE_CAPABILITY_EXTERNAL_CHANGED = 'onComponentInstanceCapabilityExternalChanged' |