diff options
Diffstat (limited to 'vid-webpack-master/src/app/drawingBoard/drawing-board-tree')
3 files changed, 0 insertions, 449 deletions
diff --git a/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.component.ts deleted file mode 100644 index 6b717a930..000000000 --- a/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.component.ts +++ /dev/null @@ -1,133 +0,0 @@ -import {AfterViewInit, Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core'; -import { ContextMenuService } from 'ngx-contextmenu'; -import { Constants } from '../../shared/utils/constants'; -import {ServicePlanningService} from "../../services/service-planning.service"; -import {ITreeNode} from "angular-tree-component/dist/defs/api"; -import {ITreeOptions, TreeComponent} from "angular-tree-component"; -import {VnfPopupComponent} from "../../components/vnf-popup/vnf-popup.components"; -import {DialogService} from "ng2-bootstrap-modal"; -import {ActivatedRoute} from "@angular/router"; -import {NgRedux} from "@angular-redux/store"; -import {AppState} from "../../store/reducers"; -import { MessageBoxData, ModalSize, ModalType } from '../../shared/components/messageBox/messageBox.data'; -import { MessageBoxService } from '../../shared/components/messageBox/messageBox.service'; -import { deleteVnfInstance, deleteVfModuleInstance } from '../../service.actions'; -import { isNullOrUndefined } from 'util'; -import {IframeService} from "../../shared/utils/iframe.service"; - - -@Component({ - selector: 'drawing-board-tree', - templateUrl: './drawing-board-tree.html', - styleUrls : ['./drawing-board-tree.scss'] -}) - - -export class DrawingBoardTreeComponent implements OnInit, AfterViewInit { - constructor(private _contextMenuService: ContextMenuService, - private _servicePlanningService: ServicePlanningService, - private _iframeService : IframeService, - private dialogService: DialogService, - private store: NgRedux<AppState>, - private route: ActivatedRoute) { - this.route - .queryParams - .subscribe(params => { - this.serviceModelId = params['serviceModelId']; - }); - } - - @Output() - highlightNode : EventEmitter<number> = new EventEmitter<number>(); - - @ViewChild('tree') tree: TreeComponent; - missingDataTooltip: string = Constants.Error.MISSING_VNF_DETAILS; - currentNode: ITreeNode = null; // - nodes = []; - serviceModelId: string; - options: ITreeOptions = { - nodeHeight: 45, - dropSlotHeight: 1 - }; - parentElementClassName = 'content'; - - ngOnInit(): void { - this.store.subscribe(() => {this.updateTree()}); - this.updateTree() - } - - updateTree() { - const serviceInstance = this.store.getState().service.serviceInstance[this.serviceModelId]; - this.nodes = this._servicePlanningService.convertServiceInstanceToTreeData(serviceInstance, this.serviceModelId); - } - - ngAfterViewInit():void { - // Expand drawing tree on init. - this.tree.treeModel.expandAll(); - } - - public onContextMenu($event: MouseEvent, node: ITreeNode): void { - this.currentNode = node; - node.focus(); - node.setActiveAndVisible(false); - this.selectNode(node); - this._contextMenuService.show.next({ - event: <any>$event, - item: node, - }); - $event.preventDefault(); - $event.stopPropagation(); - } - - public editItem(node: ITreeNode): void { - node = this.currentNode; - this._iframeService.addClassOpenModal(this.parentElementClassName); - this.dialogService.addDialog(VnfPopupComponent, { - serviceModelId: this.serviceModelId, - modelName: node.data.modelName, - modelType: node.data.type, - parentModelName: node.parent.data.modelName, - isNewVfModule : false - }) - } - - public deleteItem(node: ITreeNode): void { - if(this.currentNode.data.type === 'VF'){ - if(!isNullOrUndefined(this.currentNode.data.children) && this.currentNode.data.children.length === 0){ - this.store.dispatch(deleteVnfInstance(this.currentNode.data.modelName, this.serviceModelId)); - }else { - let messageBoxData : MessageBoxData = new MessageBoxData( - "Remove VNF", // modal title - "You are about to remove this VNF and all its children from this service. Are you sure you want to remove it?", - - ModalType.alert, - ModalSize.medium, - [ - {text:"Remove VNF", size:"large", callback: this.removeVnf.bind(this), closeModal:true}, - {text:"Don’t Remove", size:"medium", closeModal:true} - ]); - - MessageBoxService.openModal.next(messageBoxData); - } - }else { - this.store.dispatch(deleteVfModuleInstance(this.currentNode.data.modelName, this.serviceModelId, node.parent.data.modelName)); - } - } - - removeVnf() { - this.store.dispatch(deleteVnfInstance(this.currentNode.data.modelName, this.serviceModelId)); - } - - public selectNode(node: ITreeNode): void { - node.expand(); - this.highlightNode.emit(node.data.modelId); - } - - isDataMissing(node: ITreeNode) { - //todo: currently not showing the alert icon. will be implemented in upcoming story. - return false; - } - -} - - diff --git a/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.html b/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.html deleted file mode 100644 index c4061db9e..000000000 --- a/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.html +++ /dev/null @@ -1,42 +0,0 @@ -<div class="drawing-board-tree"> - <div *ngIf="nodes?.length == 0" style="text-align: center; margin-top: 50px;"> - <no-content-message-and-icon class="span-over" - data-title="Please add objects (VNFs, network, modules etc.) from the left tree to design the service instance" - subtitle="Once done, click Deploy to start instantiation" - iconPath="./assets/img/UPLOAD.svg" - iconClass="upload-icon-service-planing"></no-content-message-and-icon> - </div> - <tree-root [attr.data-tests-id]="'drawing-board-tree'" #tree [nodes]="nodes" [options]="options" id="drawing-board-tree"> - <ng-template #treeNodeTemplate let-node let-index="index"> - <div [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName" (click)="selectNode(node)"> - <div class="model-info"> - <span> - <span class="property-name">{{node.data.type}}{{node.data.name ? ': ': ''}}<span class="auto-name">{{node.data.name? node.data.name: ''}}</span></span> - </span> - </div> - <div class="model-actions"> - <span class="icon-browse" [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-menu-btn'" (click)="onContextMenu($event, node)" > - <context-menu> - <ng-template contextMenuItem (execute)="editItem(node)"> - <div [attr.data-tests-id]="'context-menu-item'"> - <span class="icon-edit"></span> - Edit - </div> - </ng-template> - <ng-template contextMenuItem (execute)="deleteItem(node)"> - <div> - <span class="icon-trash"></span> - Remove - </div> - </ng-template> - </context-menu> - </span> - <span *ngIf="isDataMissing(node)" class="icon-alert" tooltip="{{ missingDataTooltip }}" tooltipPlacement="left" [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"></span> - </div> - </div> - - </ng-template> - </tree-root> -</div> - - diff --git a/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.scss b/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.scss deleted file mode 100644 index fed9ead10..000000000 --- a/vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.scss +++ /dev/null @@ -1,274 +0,0 @@ -@mixin highlight($background-color, $color) { - background: none; - padding: 0; - background-color: $background-color; - border: $color 1px solid; - color: $color; -} -@mixin highlight-toggle-children { - tree-node-expander { - .toggle-children-wrapper { - span.toggle-children { - @include highlight(white, #009FDB); - border-right: none; - } - } - } -} - -@mixin highlight-tree-node-content { - tree-node-content { - > div { - .model-actions { - .icon-browse:before { - display: inline-block; - } - } - } - } -} - -drawing-board-tree { - - .toggle-children-wrapper.toggle-children-wrapper-expanded { - .toggle-children:before { - color: #009FDB; - } - } - - overflow: auto; - flex: 1; - color: #5A5A5A; - line-height: 14px; - .drawing-board-tree { - width: 100%; - } - tree-viewport { - padding: 50px 3.5% 1% 6%; - tree-node { - tree-node-drop-slot { - .node-drop-slot { - display: none; - } - } - & .tree-node-focused, - & .tree-node-active { - & > tree-node-wrapper { - .node-wrapper { - @include highlight-toggle-children; - .node-content-wrapper-focused, - .node-content-wrapper-active - { - @include highlight(#E6F6FB, #009FDB); - .property-name { - color: #009FDB; - } - .auto-name { - font-family: OpenSans-Regular !important; - } - .icon-browse:before { - color: #5A5A5A; - } - @include highlight-tree-node-content; - } - } - } - } - & .tree-node-expanded { - > tree-node-wrapper .node-wrapper { - box-shadow: 0 0px 2px rgba(90,90,90,0.24); - } - } - - .tree-node-active .tree-children { - border: 1px solid #009FDB; - padding: 20px; - } - - - - .tree-node.tree-node-active.tree-node-expanded { - border: 1px solid #009FDB; - } - - .tree-node-leaf .node-wrapper{ - margin-left: -45px; - } - - tree-node-wrapper { - .node-wrapper { - height: 45px; - &:hover { - @include highlight-toggle-children; - .node-content-wrapper { - @include highlight(#E6F6FB, #009FDB); - .property-name { - color: #009FDB; - } - .icon-browse:before { - color: #5A5A5A; - } - @include highlight-tree-node-content; - } - } - tree-node-expander { - font-family: 'icomoon' !important; - height: 100%; - .toggle-children-wrapper { - padding: 0; - display: block; - height: 100%; - span.toggle-children { - display: flex; - width: 45px; - padding: 0; - top: 0; - height: inherit; - background-image: none; - background-color: white; - border: 1px solid #D2D2D2; - border-right: none; - &:before { - content: "\e900"; - font-size: 20px; - font-weight: 600; - text-align: center; - display: inline-block; - flex: auto; - align-self: center; - } - } - } - .toggle-children-wrapper-expanded { - span.toggle-children { - transform: none; - &:before { - content: "\e930"; - } - } - } - .toggle-children-placeholder { - width:45px; - } - } - .node-content-wrapper { - padding: 0; - background: none; - box-shadow: none; - border-radius: 0; - border: 1px solid #D2D2D2; - height: 100%; - flex: 1; - tree-node-content { - > div { - height: 100%; - display: flex; - align-items: center; - justify-content: space-between; - .model-info { - flex: 1; - display: flex; - justify-content: space-between; - align-items: center; - padding-left: 8px; - > span { - flex: 1; - padding: 0 8px; - span:nth-child(2) { - display: block; - } - } - } - .model-actions { - display: flex; - align-items: center; - padding-right: 12px; - .icon-browse { - padding: 0; - width: 30px; - &:before { - content: "\e924"; - font-size: 24px; - display: none; - } - &:hover:before { - color: #009FDB; - } - &:focus:before, - &:active:before { - color: #009FDB; - } - } - - .icon-alert { - padding-left: 10px; - &:before { - content: "\e904"; - font-size: 16px; - color: #ffb81c; - } - } - } - } - } - .property-name { - font-family: OpenSans-Semibold; - font-size: 12px; - line-height: 12px; - color: #191919; - text-transform: capitalize; - } - } - - - } - } - tree-node-children { - .tree-children { - padding: 20px; - .model-info span:first-child { - flex: 1.1 !important; - } - } - } - } - } -} -.cdk-overlay-pane.ngx-contextmenu { - ul.dropdown-menu { - width: 200px; - box-shadow: none; - padding: 0; - padding-top: 10px; - margin: 0; - border: 1px solid #D2D2D2; - border-top: 3px solid #009FDB; - box-shadow: 0 0px 2px rgba(90,90,90,0.24); - border-radius: 2px; - li { - height: 40px; - a { - font-family: OpenSans-Regular; - display: flex; - align-items: center; - height: 100%; - padding: 12px; - color: #5A5A5A; - &:hover { - background: #E6F6FB; - color: #009FDB; - } - span { - padding-right: 12px; - &.icon-edit:before { - content: '\e917'; - } - &.icon-trash:before { - content: '\e937'; - } - } - } - } - } -} - |