aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree
diff options
context:
space:
mode:
authorIttay Stern <ittay.stern@att.com>2019-07-07 19:23:03 +0300
committerIttay Stern <ittay.stern@att.com>2019-07-08 16:13:43 +0300
commitf792671ae247a931f34d902e9276202b5016ef9a (patch)
tree6104971e8074c9a3d720836276ff18619719ec02 /vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree
parentfc62274e8d15964d63c62bf0e2f4abc040252ee9 (diff)
Merge from ecomp 718fd196 - Modern UI
Issue-ID: VID-378 Change-Id: I2736b98426e324ec3aa233b034229ba84d99839f Signed-off-by: Ittay Stern <ittay.stern@att.com>
Diffstat (limited to 'vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree')
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts24
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts30
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html95
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss146
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts139
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts3
6 files changed, 301 insertions, 136 deletions
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts
index 1221cef5f..8b7f1a4f5 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/dragAndDrop/dragAndDrop.service.spec.ts
@@ -83,11 +83,11 @@ describe('Drag and drop service', () => {
"action": "Create",
"inMaint": false,
"name": "yoav2_001",
- "modelName": "VF_vMee 0",
+ "modelName": "VF_vGeraldine 0",
"type": "VF",
"isEcompGeneratedNaming": true,
- "networkStoreKey": "VF_vMee 0:0001",
- "vnfStoreKey": "VF_vMee 0:0001",
+ "networkStoreKey": "VF_vGeraldine 0:0001",
+ "vnfStoreKey": "VF_vGeraldine 0:0001",
"typeName": "VNF",
"menuActions": {"edit": {}, "showAuditInfo": {}, "duplicate": {}, "remove": {}, "delete": {}, "undoDelete": {}},
"isFailed": false,
@@ -106,11 +106,11 @@ describe('Drag and drop service', () => {
"id": 6654971919519,
"action": "Create",
"name": "VFModule1",
- "modelName": "vf_vmee0..VfVmee..base_vmme..module-0",
+ "modelName": "vf_vgeraldine0..VfVgeraldine..base_vflorence..module-0",
"type": "VFmodule",
"isEcompGeneratedNaming": true,
"dynamicInputs": [],
- "dynamicModelName": "vf_vmee0..VfVmee..base_vmme..module-0bykqx",
+ "dynamicModelName": "vf_vgeraldine0..VfVgeraldine..base_vflorence..module-0bykqx",
"typeName": "M",
"menuActions": {"edit": {}, "showAuditInfo": {}, "remove": {}, "delete": {}, "undoDelete": {}},
"isFailed": false,
@@ -130,11 +130,11 @@ describe('Drag and drop service', () => {
"id": 987761655742,
"action": "Create",
"name": "VNFModule3",
- "modelName": "vf_vmee0..VfVmee..vmme_gpb..module-2",
+ "modelName": "vf_vgeraldine0..VfVgeraldine..vflorence_gpb..module-2",
"type": "VFmodule",
"isEcompGeneratedNaming": true,
"dynamicInputs": [],
- "dynamicModelName": "vf_vmee0..VfVmee..vmme_gpb..module-2fjrrc",
+ "dynamicModelName": "vf_vgeraldine0..VfVgeraldine..vflorence_gpb..module-2fjrrc",
"typeName": "M",
"menuActions": {"edit": {}, "showAuditInfo": {}, "remove": {}, "delete": {}, "undoDelete": {}},
"isFailed": false,
@@ -154,11 +154,11 @@ describe('Drag and drop service', () => {
"id": 873798901625,
"action": "Create",
"name": "VFModule2",
- "modelName": "vf_vmee0..VfVmee..vmme_vlc..module-1",
+ "modelName": "vf_vgeraldine0..VfVgeraldine..vflorence_vlc..module-1",
"type": "VFmodule",
"isEcompGeneratedNaming": true,
"dynamicInputs": [],
- "dynamicModelName": "vf_vmee0..VfVmee..vmme_vlc..module-1djjni",
+ "dynamicModelName": "vf_vgeraldine0..VfVgeraldine..vflorence_vlc..module-1djjni",
"typeName": "M",
"menuActions": {"edit": {}, "showAuditInfo": {}, "remove": {}, "delete": {}, "undoDelete": {}},
"isFailed": false,
@@ -181,11 +181,11 @@ describe('Drag and drop service', () => {
"action": "Create",
"inMaint": false,
"name": "yoav2",
- "modelName": "VF_vMee 0",
+ "modelName": "VF_vGeraldine 0",
"type": "VF",
"isEcompGeneratedNaming": true,
- "networkStoreKey": "VF_vMee 0",
- "vnfStoreKey": "VF_vMee 0",
+ "networkStoreKey": "VF_vGeraldine 0",
+ "vnfStoreKey": "VF_vGeraldine 0",
"typeName": "VNF",
"menuActions": {"edit": {}, "showAuditInfo": {}, "duplicate": {}, "remove": {}, "delete": {}, "undoDelete": {}},
"isFailed": false,
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
index d0715982c..6be5036b2 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, EventEmitter, OnInit, Output, ViewChild,} from '@angular/core';
+import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild,} from '@angular/core';
import {ContextMenuComponent, ContextMenuService} from 'ngx-contextmenu';
import {Constants} from '../../../shared/utils/constants';
import {IDType, ITreeNode} from "angular-tree-component/dist/defs/api";
@@ -24,7 +24,10 @@ import * as _ from 'lodash';
import {ErrorMsgService} from "../../../shared/components/error-msg/error-msg.service";
import {DragAndDropService} from "./dragAndDrop/dragAndDrop.service";
import {FeatureFlagsService, Features} from "../../../shared/services/featureFlag/feature-flags.service";
-import {PopoverPlacement} from "../../../shared/components/popover/popover.component";
+import {ComponentInfoService} from "../component-info/component-info.service";
+import {ComponentInfoModel} from "../component-info/component-info-model";
+import {ObjectToModelTreeService} from "../objectsToTree/objectToModelTree/objectToModelTree.service";
+import {DrawingBoardModes} from "../drawing-board.modes";
@Component({
selector: 'drawing-board-tree',
@@ -37,10 +40,14 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
_store: NgRedux<AppState>;
duplicateService: DuplicateService;
drawingBoardTreeService: DrawingBoardTreeService;
+ objectToModelTreeService : ObjectToModelTreeService;
+ objectToInstanceTreeService : ObjectToInstanceTreeService;
errorMsgService: ErrorMsgService;
isFilterEnabled: boolean = false;
filterValue: string = '';
contextMenuOptions: TreeNodeContextMenuModel[];
+
+ @Input() pageMode : DrawingBoardModes;
static triggerDeleteActionService: Subject<string> = new Subject<string>();
static triggerUndoDeleteActionService: Subject<string> = new Subject<string>();
static triggerreCalculateIsDirty: Subject<string> = new Subject<string>();
@@ -62,13 +69,16 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
private _highlightPipe: HighlightPipe,
private _objectToInstanceTreeService: ObjectToInstanceTreeService,
private _sharedTreeService: SharedTreeService,
- private _dragAndDropService : DragAndDropService) {
+ private _dragAndDropService : DragAndDropService,
+ private _objectToModelTreeService : ObjectToModelTreeService,
+ private _componentInfoService: ComponentInfoService) {
this.errorMsgService = _errorMsgService;
this.duplicateService = _duplicateService;
this.drawingBoardTreeService = _drawingBoardTreeService;
this.contextMenuOptions = _drawingBoardTreeService.generateContextMenuOptions();
-
+ this.objectToModelTreeService = _objectToModelTreeService;
+ this.objectToInstanceTreeService = _objectToInstanceTreeService;
DrawingBoardTreeComponent.triggerDeleteActionService.subscribe((serviceModelId) => {
this._sharedTreeService.shouldShowDeleteInstanceWithChildrenModal(this.nodes, serviceModelId, (node, serviceModelId)=>{
this.drawingBoardTreeService.deleteActionService(this.nodes, serviceModelId);
@@ -102,6 +112,10 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
this.filterValue = updateData.filterValue;
}
+ isLinkedInstance = (node) : boolean => {
+ return !_.isNil(node) && node.parentType === "VRF" || node.parentType === "VnfGroup";
+ };
+
@Output()
highlightNode: EventEmitter<number> = new EventEmitter<number>();
@@ -138,7 +152,7 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
updateTree() {
const serviceInstance = this.store.getState().service.serviceInstance[this.serviceModelId];
- this.nodes = this._objectToInstanceTreeService.convertServiceInstanceToTreeData(serviceInstance, this.store.getState().service.serviceHierarchy[this.serviceModelId]);
+ this.nodes = this._objectToInstanceTreeService.convertServiceInstanceToTreeData(serviceInstance, this.store.getState().service.serviceHierarchy[this.serviceModelId]).filter((item) => item !== null);
console.log('right nodes', this.nodes);
}
@@ -194,7 +208,11 @@ export class DrawingBoardTreeComponent implements OnInit, AfterViewInit {
this._sharedTreeService.setSelectedVNF(node);
this.highlightNode.emit(node.data.modelUniqueId);
if (FeatureFlagsService.getFlagState(Features.FLAG_1906_COMPONENT_INFO, this.store)) {
- node.data.onSelectedNode(node);
+ const serviceHierarchy = this._store.getState().service.serviceHierarchy[this.serviceModelId];
+ const model = node.data.getModel(node.data.modelName, node.data, serviceHierarchy);
+ const modelInfoItems = node.data.getInfo(model, node.data);
+ const componentInfoModel: ComponentInfoModel = this._sharedTreeService.addGeneralInfoItems(modelInfoItems, node.data.componentInfoType, model, node.data);
+ ComponentInfoService.triggerComponentInfoChange.next(componentInfoModel);
}
}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
index 8af909ffc..e1d88a696 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.html
@@ -1,33 +1,54 @@
<error-msg></error-msg>
<div class="drawing-board-tree" style="height: calc(100vh - 55px);">
<div *ngIf="nodes?.length == 0" style="text-align: center; margin-top: 50px;">
- <no-content-message-and-icon class="span-over"
+
+ <no-content-message-and-icon *ngIf="objectToModelTreeService.numberOfPlusButton != 0" class="span-over"
data-title="Please add objects (VNFs, network, modules etc.)"
title2="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>
+
+ <no-content-message-and-icon *ngIf="objectToModelTreeService.numberOfPlusButton == 0" class="span-over"
+ data-title="No objects to add in this service instance."
+ title2=""
+ subtitle="Click Deploy to start instantiation"
+ iconPath="./assets/img/UPLOAD.svg"
+ iconClass="upload-icon-service-planing"></no-content-message-and-icon>
</div>
<div class="tree-header" *ngIf="nodes?.length > 0">
<div class="title-tree">Instance:</div>
<search-component (updateNodes)="updateNodes($event)"
- [nodes]="nodes" [tree]="tree"
- [inputTestId]="'search-right-tree'"
- *ngIf="drawingBoardTreeService.isViewEditFlagTrue()"></search-component>
+ [nodes]="nodes" [tree]="tree"
+ [inputTestId]="'search-right-tree'"
+ *ngIf="drawingBoardTreeService.isViewEditFlagTrue()"></search-component>
</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.id]="getNodeId(node)" [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName" (click)="selectNode(node)" >
- <custom-popover class="failed-popover-wrap" *ngIf= "node?.data?.isFailed" [value]= "node?.data?.statusMessage" [placement]="'left'" [popoverType]="'error'">
- <div class="failed-msg" [attr.data-tests-id]="'failed-error-message'" *ngIf= "node?.data?.isFailed">Failed</div>
- </custom-popover>
- <div class="instance-type" style="position: relative;">
- <div *ngIf="node?.data?.action == 'Create'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
- <div><span title="{{node.data.type}}" [attr.data-tests-id]="'node-type-indicator'">{{node?.data?.typeName}}</span></div>
+ <ng-template #treeNodeTemplate let-node let-index="index">
+ <div class="main-row" [attr.id]="getNodeId(node)" [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName"
+ (click)="selectNode(node)"
+ [ngClass]="{'isLinked' : isLinkedInstance(node?.data)}">
+ <custom-popover class="failed-popover-wrap" *ngIf="node?.data?.isFailed" [value]="node?.data?.statusMessage"
+ [placement]="'left'" [popoverType]="'error'">
+ <div class="failed-msg" [attr.data-tests-id]="'failed-error-message'" *ngIf="node?.data?.isFailed">Failed
+ </div>
+ </custom-popover>
+ <div class="instance-type" style="position: relative;border: 1px solid #D2D2CD;">
+ <div *ngIf="node?.data?.action == 'Create'" class="notShowOnViewMode notShowOnCreateMode newIcon"></div>
+ <div><span title="{{node.data.type}}"
+ [attr.data-tests-id]="'node-type-indicator'">{{node?.data?.typeName}}</span></div>
+ <div *ngIf="isLinkedInstance(node?.data)">
+ <svg-icon
+ [ngClass]="'link'"
+ class="icon-link"
+ [size]="'small'"
+ [name]="'link'">
+ </svg-icon>
</div>
- <div class="model-info">
+ </div>
+ <div class="model-info" [ngClass]="{'rightBorder' : pageMode === 'VIEW'}">
<span class="header-info">
<span class="property-name">
<span class="auto-name"
@@ -37,15 +58,16 @@
></span>
</span>
</span>
- <tree-node-header-properties
- *ngIf="(node?.data?.action !== 'Create' || node?.data?.parentType === 'VnfGroup') && !node?.data?.isFailed"
- [properties]="node.data.statusProperties"></tree-node-header-properties>
- </div>
- <div class="scaling invalid" *ngIf="node?.data?.errors?.scalingError" [attr.data-tests-id]="'scaling-policy'">
- <span>Limit</span><span>{{node?.data?.limitMembers}}</span>
- </div>
- <div class="model-actions notShowOnViewMode">
+ <tree-node-header-properties
+ *ngIf="(node?.data?.action !== 'Create' || node?.data?.parentType === 'VnfGroup') && !node?.data?.isFailed"
+ [properties]="node.data.statusProperties"></tree-node-header-properties>
+ </div>
+ <div class="scaling invalid" *ngIf="node?.data?.errors?.scalingError" [attr.data-tests-id]="'scaling-policy'">
+ <span>Limit</span><span>{{node?.data?.limitMembers}}</span>
+ </div>
+ <div class="model-actions notShowOnViewMode ">
<span class="icon-browse"
+ [ngClass]="{'isLinked' : isLinkedInstance(node?.data)}"
[attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-menu-btn'"
(click)="onContextMenu($event, node)">
<context-menu>
@@ -66,12 +88,12 @@
</ng-template>
</context-menu>
</span>
- <span
- *ngIf="drawingBoardTreeService.isVNFMissingData(node, serviceModelId)"
- tooltip="{{ missingDataTooltip }}"
- tooltipPlacement="left"
- [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"
- class="icon-alert" >
+ <span
+ *ngIf="drawingBoardTreeService.isVNFMissingData(node, serviceModelId)"
+ tooltip="{{ missingDataTooltip }}"
+ tooltipPlacement="left"
+ [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"
+ class="icon-alert">
<svg-icon
[mode]="'warning'"
[testId]="'icon-alert'"
@@ -79,16 +101,17 @@
[name]="'alert-triangle-o'">
</svg-icon>
</span>
+ <span *ngIf="drawingBoardTreeService.isVFModuleMissingData(node, serviceModelId)" class="icon-alert"
+ tooltip="{{ missingDataTooltip }}" tooltipPlacement="left"
+ [attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"></span>
+ </div>
- <!--<span *ngIf="drawingBoardTreeService.isVNFMissingData(node, serviceModelId)" class="icon-alert"-->
- <!--tooltip="{{ missingDataTooltip }}" tooltipPlacement="left"-->
- <!--[attr.data-tests-id]="'node-'+node.data.modelId +'-' +node.data.modelName+'-alert-icon'"></span>-->
- <span *ngIf="drawingBoardTreeService.isVFModuleMissingData(node, serviceModelId)" 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>
+ <div class="action-status">
+ <span class="action-status-type delete" [attr.data-tests-id]="'delete-status-type'" [ngStyle]="{ 'opacity': node.data.action.split('_').pop() !== 'Delete' ? '0' : '1'}">Delete</span>
+ </div>
+
+ </div>
+ </ng-template>
</tree-root>
</div>
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
index be9f9f2d4..e08e69e2e 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.scss
@@ -36,6 +36,11 @@
}
}
+
+.icon-browse.isLinked {
+ display: none !important;
+}
+
#RETRY_EDIT drawing-board-tree tree-node-collection > div,
#RETRY drawing-board-tree tree-node-collection > div {
margin-top: 0px;
@@ -98,11 +103,54 @@ drawing-board-tree {
@include highlight-toggle-children;
.node-content-wrapper-focused,
.node-content-wrapper-active {
+ background: transparent !important;
+ .main-row {
+ //background-color: #E6F6FB;
+ //color: #009FDB;
+ //border-right: none !important;
+ //border: #009FDB 1px solid;
+ }
+ .instance-type {
+ background-color: #E6F6FB;
+ color: #009FDB;
+ border-right: none !important;
+ border: #009FDB 1px solid !important;
+ }
+
+ .isLinked {
+ .model-info {
+ border-top: 1px #009FDB dashed !important;
+ border-bottom: 1px #009FDB dashed !important;
+ }
+ .model-info.rightBorder {
+ border-right: 1px #009FDB dashed !important ;
+ }
+ }
+ .model-info {
+ background-color: #E6F6FB;
+ color: #009FDB;
+ border-right: none !important;
+ border: #009FDB 1px solid;
+ }
+
+ .model-info.rightBorder {
+ border-right: #009FDB 1px solid !important;
+ }
+
+ .model-actions {
+ background-color: #E6F6FB;
+ color: #009FDB;
+ color: #009FDB;
+ border-left: none !important;
+ border: #009FDB 1px solid;
+ }
+
@include highlight-toggle-children;
- @include highlight(#E6F6FB, #009FDB);
.property-name,.instance-type {
color: #009FDB !important;
position: relative;
+ background-color: #E6F6FB;
+ color: #009FDB !important;
}
.status-properties {
.status-property-value,.status-property-name {
@@ -119,7 +167,7 @@ drawing-board-tree {
}
& .tree-node-expanded {
> tree-node-wrapper .node-wrapper {
- box-shadow: 0 0px 2px rgba(90,90,90,0.24);
+
}
}
@@ -136,7 +184,7 @@ drawing-board-tree {
}
.tree-node.tree-node-expanded > tree-node-wrapper{
- box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
+
position: relative;
z-index: 1;
display: block;
@@ -146,7 +194,11 @@ drawing-board-tree {
height: 45px;
&:hover {
.node-content-wrapper:not(.node-content-wrapper-focused) {
- background: #F2F2F2;
+ .instance-type ,
+ .model-info ,
+ .model-actions {
+ background: #F2F2F2;
+ }
.icon-browse:before {
color: #5A5A5A;
}
@@ -164,11 +216,12 @@ drawing-board-tree {
display: block;
height: 100%;
span.toggle-children {
+ height: 43px;
display: flex;
width: 45px;
+ margin-top: 1px;
padding: 0;
top: 0;
- height: inherit;
background-image: none;
background-color: white;
border: 1px solid #D2D2D2;
@@ -196,18 +249,44 @@ drawing-board-tree {
width:45px;
}
}
+ .node-content-wrapper-active,
+ .node-content-wrapper.node-content-wrapper-active:hover,
+ .node-content-wrapper-active.node-content-wrapper-focused {
+ background: white !important;
+ }
+ .node-content-wrapper-active.node-content-wrapper-focused {
+ background: white !important;
+ }
.node-content-wrapper {
+
padding: 0;
background: none;
box-shadow: none;
border-radius: 0;
- border: 1px solid #D2D2D2;
+ border: 1px solid white;
height: 100%;
flex: 1;
.resourceGroup {
border: 1px dashed #D2D2D2 !important;
}
+
+ .isLinked {
+ .instance-type {
+ border-style: dashed !important;
+ }
+
+ .model-info {
+ border: 1px #D2D2CD dashed !important;
+ border-right: none !important;
+ }
+
+ .model-actions {
+ border-style: dashed !important;
+ border-left-style: none !important;
+ }
+ }
+
tree-node-content {
> div {
height: 100%;
@@ -217,14 +296,18 @@ drawing-board-tree {
.instance-type {
width: 40px;
height: 100%;
- padding-top: 16px;
text-transform: uppercase;
- text-align: center;
border-right: 1px solid #D2D2D2;
word-break: break-all;
color: #959595;
font-size: 13px;
font-family: OpenSans-SemiBold;
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
.newIcon {
background: #45B16D;
position: absolute;
@@ -247,9 +330,42 @@ drawing-board-tree {
display: block;
}
}
+ .node-content-wrapper-active {
+ .action-status {
+ background-color: white !important;
+ }
+ }
+ .action-status {
+ padding-left: 10px;
+ background-color: white !important;
+ line-height: 42px;
+ width: 95px;
+ min-width: 95px;
+ .action-status-type.delete {
+ background: transparent;
+ font-family: OpenSans-SemiBold;
+ font-size: 12px;
+ color: red;
+ border-radius: 50px;
+ border: 1px solid gray;
+ padding: 5px 20px;
+ }
+ }
+
+ .model-info.rightBorder {
+ border-right: 1px solid #D2D2CD !important;
+ }
.model-info {
+ border: 1px solid #D2D2CD;
+ line-height: normal;
padding-left: 16px;
width: 100%;
+ height: 100%;
+ flex-direction: column;
+ display: flex;
+ justify-content: center;
+ border-right: none;
+
.property-name {
font-family: OpenSans-SemiBold;
font-size: 13px;
@@ -285,9 +401,17 @@ drawing-board-tree {
margin-right: 3px;
}
}
+
.model-actions {
+ :hover {
+ background: transparent !important;
+ }
display: flex;
align-items: center;
+ border: 1px solid #D2D2CD;
+ line-height: normal;
+ height: 100%;
+ border-left: none;
.icon-browse {
padding: 0;
width: 30px;
@@ -298,11 +422,11 @@ drawing-board-tree {
display: none;
}
&:hover:before {
- color: #009FDB;
+ //color: #009FDB;
}
&:focus:before,
&:active:before {
- color: #009FDB;
+ //color: #009FDB;
}
}
@@ -319,7 +443,7 @@ drawing-board-tree {
.tree-children {
padding-left: 45px;
.model-info span:first-child {
- flex: 1.1 !important;
+ //flex: 1.1 !important;
}
}
}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
index 1b913cfe9..b804342c6 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.spec.ts
@@ -7,39 +7,39 @@ import {NgRedux} from "@angular-redux/store";
import {DrawingBoardTreeService, TreeNodeContextMenuModel} from "./drawing-board-tree.service";
import {ITreeNode} from "angular-tree-component/dist/defs/api";
- class MockAppStore<T>{
- getState() {
+class MockAppStore<T> {
+ getState() {
return {
- service : {
- serviceInstance : {
- "serviceInstanceId" : {
- vnfs : {
- "vnfStoreKey" : {
- isMissingData : true,
- vfModules : {
- "vfModulesName" : {
- "vfModulesName" : {
- isMissingData : true
- }
- }
- }
- },
-
- "vnfStoreKey1" : {
- isMissingData : false,
- vfModules : {
- "vfModulesName" : {
- "vfModulesName" : {
- isMissingData : false
- }
- }
- }
- }
- }
- }
- }
- }
- }
+ service: {
+ serviceInstance: {
+ "serviceInstanceId": {
+ vnfs: {
+ "vnfStoreKey": {
+ isMissingData: true,
+ vfModules: {
+ "vfModulesName": {
+ "vfModulesName": {
+ isMissingData: true
+ }
+ }
+ }
+ },
+
+ "vnfStoreKey1": {
+ isMissingData: false,
+ vfModules: {
+ "vfModulesName": {
+ "vfModulesName": {
+ isMissingData: false
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
}
@@ -65,82 +65,81 @@ describe('Drawing board tree Service', () => {
})().then(done).catch(done.fail));
-
-
test('generateContextMenuOptions should return list of optional context menu', () => {
- const options : TreeNodeContextMenuModel[] = service.generateContextMenuOptions();
- const expected : TreeNodeContextMenuModel[] = [
+ const options: TreeNodeContextMenuModel[] = service.generateContextMenuOptions();
+ const expected: TreeNodeContextMenuModel[] = [
new TreeNodeContextMenuModel('edit', 'context-menu-edit', 'Edit', 'edit-file-o'),
new TreeNodeContextMenuModel('duplicate', 'context-menu-duplicate', 'Duplicate', 'copy-o'),
new TreeNodeContextMenuModel('showAuditInfo', 'context-menu-showAuditInfo', 'Show audit info', 'eye-o'),
new TreeNodeContextMenuModel('addGroupMember', 'context-menu-addGroupMember', 'Add group members', 'plus'),
new TreeNodeContextMenuModel('delete', 'context-menu-delete', 'Delete', 'trash-o'),
new TreeNodeContextMenuModel('remove', 'context-menu-remove', 'Remove', 'trash-o'),
- new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete')
+ new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete'),
+ new TreeNodeContextMenuModel('changeAssociations', 'context-menu-changeAssociations', 'Change Associations', 'edit-file-o')
];
- expect(options.length).toEqual(7);
+ expect(options.length).toEqual(8);
expect(options).toEqual(expected);
});
test('isVNFMissingData should return true if vnf isMissingData = true', () => {
- let node : ITreeNode = <any>{
- data : {
- type : 'VF',
- vnfStoreKey : "vnfStoreKey"
+ let node: ITreeNode = <any>{
+ data: {
+ type: 'VF',
+ vnfStoreKey: "vnfStoreKey"
}
};
- let result : boolean = service.isVNFMissingData(node, "serviceInstanceId");
+ let result: boolean = service.isVNFMissingData(node, "serviceInstanceId");
expect(result).toBeTruthy();
});
test('isVNFMissingData should return false if vnf has isMissingData = false', () => {
- let node : ITreeNode = <any>{
- data : {
- type : 'VFModule',
- modelName : "vfModulesName",
- dynamicModelName : "vfModulesName",
- parent : {
- vnfStoreKey : "vnfStoreKey1",
- type : 'VF'
+ let node: ITreeNode = <any>{
+ data: {
+ type: 'VFModule',
+ modelName: "vfModulesName",
+ dynamicModelName: "vfModulesName",
+ parent: {
+ vnfStoreKey: "vnfStoreKey1",
+ type: 'VF'
}
}
};
- let result : boolean = service.isVNFMissingData(node, "serviceInstanceId");
+ let result: boolean = service.isVNFMissingData(node, "serviceInstanceId");
expect(result).toBeFalsy();
});
test('isVFModuleMissingData should return true if vnfModule has isMissingData = true', () => {
- let node : ITreeNode = <any>{
- data : {
- type : 'VFModule',
- modelName : "vfModulesName",
- dynamicModelName : "vfModulesName",
- parent : {
- vnfStoreKey : "vnfStoreKey",
- type : 'VF'
+ let node: ITreeNode = <any>{
+ data: {
+ type: 'VFModule',
+ modelName: "vfModulesName",
+ dynamicModelName: "vfModulesName",
+ parent: {
+ vnfStoreKey: "vnfStoreKey",
+ type: 'VF'
}
}
};
- let result : boolean = service.isVFModuleMissingData(node, "serviceInstanceId");
+ let result: boolean = service.isVFModuleMissingData(node, "serviceInstanceId");
expect(result).toBeFalsy();
});
test('isVFModuleMissingData should return false if vnfModule has isMissingData = false', () => {
- let node : ITreeNode = <any>{
- data : {
- type : 'VFModule',
- modelName : "vfModulesName",
- dynamicModelName : "vfModulesName",
- parent : {
- vnfStoreKey : "vnfStoreKey1",
- type : 'VF'
+ let node: ITreeNode = <any>{
+ data: {
+ type: 'VFModule',
+ modelName: "vfModulesName",
+ dynamicModelName: "vfModulesName",
+ parent: {
+ vnfStoreKey: "vnfStoreKey1",
+ type: 'VF'
}
}
};
- let result : boolean = service.isVFModuleMissingData(node, "serviceInstanceId");
+ let result: boolean = service.isVFModuleMissingData(node, "serviceInstanceId");
expect(result).toBeFalsy();
});
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
index 17f761c41..acf622463 100644
--- a/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/drawing-board-tree/drawing-board-tree.service.ts
@@ -42,7 +42,8 @@ export class DrawingBoardTreeService {
new TreeNodeContextMenuModel('addGroupMember', 'context-menu-addGroupMember', 'Add group members', 'plus'),
new TreeNodeContextMenuModel('delete', 'context-menu-delete', 'Delete', 'trash-o'),
new TreeNodeContextMenuModel('remove', 'context-menu-remove', 'Remove', 'trash-o'),
- new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete')
+ new TreeNodeContextMenuModel('undoDelete', 'context-menu-undoDelete', 'Undo Delete', 'undo-delete'),
+ new TreeNodeContextMenuModel('changeAssociations', 'context-menu-changeAssociations', 'Change Associations', 'edit-file-o')
];
}