merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

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';
-          }
-        }
-      }
-    }
-  }
-}
-