aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/vlanTagging
diff options
context:
space:
mode:
authorSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
committerSonsino, Ofir (os0695) <os0695@intl.att.com>2018-07-10 15:57:37 +0300
commitff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 (patch)
treeaae42404a93fdffdd16ff050eaa28129959f7577 /vid-webpack-master/src/app/vlanTagging
parentc72d565bb58226b20625b2bce5f0019046bee649 (diff)
New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/vlanTagging')
-rw-r--r--vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html14
-rw-r--r--vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss17
-rw-r--r--vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts66
-rw-r--r--vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html27
-rw-r--r--vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss168
-rw-r--r--vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts203
-rw-r--r--vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts33
7 files changed, 528 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html
new file mode 100644
index 000000000..fbb16949a
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html
@@ -0,0 +1,14 @@
+<div class="form-wrapper">
+ <form #form="ngForm">
+ <div class="network" *ngFor="let group of groups">
+ <label class="placeholder" [attr.data-tests-id]="'groupLabel'">{{getValueOfLabelInGroup(group,'Group Name')}}</label>
+ <select [(ngModel)]="groupSelection[getValueOfLabelInGroup(group,'Group Name')]" class="form-control input-text"
+ [attr.data-tests-id]="'groupTestId'"
+ id="{{getGroupName(group)}}" name="{{getGroupName(group)}}" required>
+ <option class="placeholder" [value]="undefined" disabled>Select Network</option>
+ <option *ngFor="let singleGroup of getNetworksByNetworkFunctionRole(group) | async"
+ [ngValue]="singleGroup">{{singleGroup["instance-group"]["instance-group-name"]}}</option>
+ </select>
+ </div>
+ </form>
+</div>
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss
new file mode 100644
index 000000000..aa45b34f3
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss
@@ -0,0 +1,17 @@
+.form-wrapper{
+ width:640px;
+ padding-left: 50px;
+ padding-top: 50px;
+ .network{
+ padding-bottom: 30px;
+ }
+ .network {
+ select {
+ font-family: OpenSans-Italic;
+ font-size: 14px;
+ color: #959595 !important;
+ }
+ }
+}
+
+
diff --git a/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
new file mode 100644
index 000000000..46a176984
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts
@@ -0,0 +1,66 @@
+import {Component, Input, OnInit, ViewChild} from "@angular/core";
+import {NgRedux, select} from "@angular-redux/store";
+import {AppState} from "../../store/reducers";
+import {ModelInformationItem} from "../../shared/components/model-information/model-information.component";
+import {Observable} from "rxjs/Observable";
+import {NgForm} from "@angular/forms";
+import * as _ from 'lodash';
+
+@Component({
+ selector: "app-network-selector",
+ templateUrl: "./network-selector.component.html",
+ styleUrls: ["./network-selector.component.scss"]
+})
+export class NetworkSelectorComponent implements OnInit {
+ private localStore: NgRedux<AppState>;
+ networkSelection: any;
+ groupSelection :any;
+ @Input() groups: Array<string>;
+ @Input() cloudOwner : string;
+ @Input() cloudRegionId : string;
+ @select(['service', 'networkFunctions'])
+ readonly networkFunctions: Observable<any>;
+
+ @ViewChild('form') form: NgForm;
+
+ constructor(store: NgRedux<AppState>) {
+ this.localStore = store;
+ this.groupSelection = {};
+ console.log(store);
+ }
+
+ getValueOfLabelInGroup(group: any, label: string){
+ let item = _.find(group, {"label": label});
+ if (item) {
+ return item["values"][0];
+ }
+ }
+
+ getNetworksByNetworkFunctionRole(group: any): Observable<string[]> {
+ let filteredItem = this.getValueOfLabelInGroup(group,"Network Collection Function");
+ return this.networkFunctions.map(data => {
+ return (data && data[filteredItem]) || [];
+ });
+ }
+
+ getGroupName(group: ModelInformationItem[]) {
+ return this.getValueOfLabelInGroup(group,"Group Name");
+ }
+
+ /**
+ * [ncf=>aaiResonse]
+ * groups => groupsModel
+ */
+
+ ngOnInit() {
+ let store = this.localStore;
+ this.networkSelection = {};
+
+ }
+}
+
+
+//
+/*
+Info inside redux = {ncfNetworkMap }
+*/
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html
new file mode 100644
index 000000000..f474f4bd1
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html
@@ -0,0 +1,27 @@
+<div class="vlan-wrapper-config">
+ <div class="head">
+ <div class="title">Collection Resource Consumer VNF</div>
+ <div class="btn-wrapper">
+ <button class="cancel-btn grey" data-tests-id="cancelButton" (click)="cancel()">{{cancelButtonText}}</button>
+ <button class="next-btn blue" data-tests-id="nextButton" [disabled]="isNextButtonDisabled()" (click)="nextStep()">{{nextButtonText}}</button>
+ </div>
+ </div>
+ <span (serviceInstamce)="onServiceInstanceChange($event)"></span>
+ <div class="content-wrapper">
+ <div class="left-side">
+ <formasync [hidden]="currentStep === wizardSteps.two" [model]="model" class="form"></formasync>
+ <app-network-selector [hidden]="currentStep === wizardSteps.one" class="form-wrapper" [groups]="groups"></app-network-selector>
+ </div>
+
+ <div style="padding-left: 30px;padding-right: 30px" class="sidebar-right">
+ <div class="headline">META DATA</div>
+ <div class="seperator"></div>
+ <model-information [modelInformationItems]="modelInfoItems"></model-information>
+ <div class="headline">Collection Resource Consumer VNF</div>
+ <div *ngFor="let group of groups">
+ <div class="seperator"></div>
+ <model-information [modelInformationItems]="group"></model-information>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss
new file mode 100644
index 000000000..af4a7e212
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss
@@ -0,0 +1,168 @@
+$popupHeaderHeight: 59px;
+
+.vlan-wrapper-config * {
+ font-family: OpenSans-Regular, sans-serif;
+}
+
+.body-content-jsp {
+ margin-top: 35px;
+ margin-left: 201px;
+ margin-right: 0px;
+ background-color: white;
+}
+
+:host {
+ height: 100%;
+}
+.form-wrapper{
+ min-width: 75%;
+ overflow: auto;
+}
+button {
+ border-radius: 2px;
+ font-size: 14px;
+ line-height: 28px;
+ height: 30px;
+ &.blue {
+ border: #0091c8 1px solid;
+ background-color: #009fdb;
+ color: white;
+ &:hover {
+ background-color: #1ec2ff;
+ border-color: #0091c8;
+ }
+ &:active {
+ background-color: #0091c7;
+ border-color: #006186;
+ }
+ &[disabled] {
+ background-color: rgba(5, 104, 174, 0.3);
+ border-color: rgba(4, 113, 168, 0.3);
+ }
+ }
+ &.grey {
+ color: #009FDB;
+ background-color: #ffffff;
+ border: 1px solid #009FDB;
+ &:hover {
+ background-color: #f8f8f8;
+ border-color: #009fdb;
+ }
+ &:active {
+ background-color: #d8d8d8;
+ border-color: #5a5a5a;
+ }
+ &[disabled] {
+ background-color: #f8f8f8;
+ border-color: #d8d8d8;
+ color: #cdcdcd;
+ }
+ }
+ &.white {
+ border: #009fdb 1px solid;
+ background-color: white;
+ color: #009fdb;
+ }
+}
+
+.vlan-wrapper-config {
+ /*todo: remove. this a temporary fix for the sub-interface popup not showing as a page beside the sidebar. currently showing it in full screen.*/
+ /*it is necessary inside the iframe (and not just in the angularjs - old app) angular app because in Firefox the iframe content isn't effected by the iframe size */
+ width: 100vw;
+ height: 100vh;
+ position: fixed;
+ /********************/
+ .head {
+ line-height: $popupHeaderHeight;
+ height: $popupHeaderHeight;
+ display: flex;
+ background-color: #F8F8F8;
+ border-bottom: 1px solid #D8D8D8;
+ .title {
+ font-size: 18px;
+ margin-left: 56px;
+ color: #5A5A5A;
+ }
+ .btn-wrapper {
+ flex: 1;
+ text-align: right;
+ margin-right: 15px;
+ button {
+ width: 120px;
+ &.delete-btn {
+ margin-left: 13px;
+ }
+ }
+ }
+ }
+ .content-wrapper {
+ display: flex;
+ .form {
+ overflow-y: auto;
+ }
+ height: calc(100% - #{$popupHeaderHeight});
+ .form {
+ margin-top: 48px;
+
+ }
+ .content {
+ .form-wrapper {
+
+ margin: 0 auto;
+ }
+ }
+
+ }
+
+ span.error {
+ color: #cf2a2a;
+ }
+ .content-wrapper .content .form-wrapper .instance-field {
+ .ng-invalid-pattern {
+ border-color: #cf2a2a;
+ color: #cf2a2a;
+ }
+ margin-bottom: 25px;
+ label {
+ color: #191919;
+ font-size: 13px;
+ }
+ input,
+ select {
+ border-color: #D2D2D2;
+ }
+ &.lcpRegionText,
+ &.productFamily {
+ display: none;
+ }
+ }
+
+}
+
+.sidebar-right {
+ min-width: 25%;
+ background-color: #F8F8F8;
+ overflow-y: auto;
+ .headline {
+ font-family: OpenSans-Semibold;
+ font-size: 12px;
+ color: #009FDB;
+ padding-bottom: 6px;
+ padding-top: 20px
+ }
+ .seperator{
+ background: #D2D2D2;
+ height: 1px;
+ margin-bottom: 10px;
+ }
+}
+
+.left-side{
+ min-width: 75%;
+ overflow:auto;
+
+}
+
+.sidebar-right service-metadata .metadata-content {
+ padding-bottom: 20px;
+}
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
new file mode 100644
index 000000000..f3f63e1e9
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts
@@ -0,0 +1,203 @@
+import {formasync} from './../components/form-async/form-async.component';
+import {Component, OnInit, ViewChild} from "@angular/core";
+import {NetworkSelectorComponent} from "./network-selector/network-selector.component";
+import {NgRedux, select} from "@angular-redux/store";
+import {AppState} from "../store/reducers";
+import {ActivatedRoute} from "@angular/router";
+import {
+ loadServiceAccordingToUuid, loadAaiNetworkAccordingToNetworkCF,
+ loadUserId
+} from "../services/aaiService/aai.actions";
+import {createRequest} from "../factories/mso.factory";
+import {Observable} from "rxjs/Observable";
+import {VNFModel} from "../shared/models/vnfModel";
+import {VfcInstanceGroupProperties} from "../shared/models/vfcInstanceGroupProperties";
+import * as _ from "lodash";
+import {ModelInformationItem} from "../shared/components/model-information/model-information.component";
+
+enum WizardSteps {
+ one,
+ two
+}
+
+const buttonTextNext = "Next";
+const buttonTextBack = "Back";
+const buttonTextConfirm = "Confirm";
+const buttonTextCancel = "Cancel";
+
+@Component({
+ selector: "vlan-tagging",
+ templateUrl: "./vlan-tagging.component.html",
+ styleUrls: ["./vlan-tagging.component.scss"]
+})
+
+export class VlanTaggingComponent implements OnInit {
+ constructor(private store: NgRedux<AppState>,
+ private route: ActivatedRoute) {
+ this.nextButtonText = buttonTextNext;
+ this.cancelButtonText = buttonTextCancel;
+ this.currentStep = WizardSteps.one;
+ }
+
+ subscriberName: string;
+ serviceKey: string;
+ serviceType: string;
+ vnfKey: string;
+ serviceInstanceName: string;
+ serviceModelId: string;
+ modelInfoItems: Array<ModelInformationItem>;
+ groups: Array<Array<ModelInformationItem>>;
+ currentStep: WizardSteps;
+ nextButtonText: string;
+ cancelButtonText: string;
+ wizardSteps = WizardSteps;
+ cloudOwner: string;
+ cloudRegionId: string;
+ serviceInstanceId : string;
+ model: VNFModel;
+ userId: string;
+ modelCustomizationId : string;
+ onServiceInstanceChange(event) {
+ console.log(event);
+ }
+
+ private serviceHirarchy: any;
+
+ @select(['service', 'serviceHierarchy'])
+ readonly serviceHierarchyObserable: Observable<any>;
+
+ @select(['service', 'userId'])
+ readonly userIdObs: Observable<any>;
+
+
+ @ViewChild(NetworkSelectorComponent)
+ public networkSelectorComponent: NetworkSelectorComponent;
+ @ViewChild(formasync)
+ public formAsync: formasync;
+
+
+ deploySubInterface() {
+
+ const requestDetails = createRequest(
+ this.userId,
+ this.formAsync.serviceInstance,
+ this.serviceHirarchy[this.serviceModelId],
+ this.serviceKey,
+ this.networkSelectorComponent.groupSelection,
+ this.vnfKey,
+ this.modelCustomizationId
+ );
+
+ // this.msoService.createVnf(requestDetails, this.serviceKey).subscribe();
+
+ window.parent.postMessage({
+ eventId: 'submitIframe',
+ data: requestDetails
+ }, "*");
+ }
+
+ ngOnInit() {
+ this.cloudRegionId = "";
+ this.store.dispatch(loadUserId());
+ this.userIdObs.subscribe(res => this.userId = res);
+ this.route.queryParams.subscribe(params => {
+ this.serviceModelId = params["serviceModelId"];
+ this.subscriberName = params["subscriberName"];
+ this.serviceType = params["serviceType"];
+ this.serviceKey = params["serviceInstanceID"];
+ this.vnfKey = params["modelCustomizationName"];
+ this.serviceInstanceId = params["serviceInstanceID"];
+ this.serviceInstanceName = params["serviceInstanceName"];
+ this.modelCustomizationId = params["modelCustomizationId"];
+ this.cloudOwner = params["globalCustomerId"];
+ this.store.dispatch(loadServiceAccordingToUuid(this.serviceModelId));
+ this.serviceHierarchyObserable.subscribe(data => {
+ this.serviceHirarchy = data;
+ if (data && data[this.serviceModelId]) {
+ this.model = new VNFModel(data[this.serviceModelId].vnfs[this.vnfKey]);
+ this.updateModelInfo(this.model);
+ }
+ });
+ });
+ }
+
+ private updateModelInfo(vnfModel: VNFModel) {
+ this.modelInfoItems = [
+ new ModelInformationItem("Service Instance Name", "serviceInstanceName", [this.serviceInstanceName], "", true),
+ new ModelInformationItem("Model Invariant UUID", "modelInvariantUUID", [vnfModel.invariantUuid], "", true),
+ new ModelInformationItem("Model Version", "modelVersion", [vnfModel.version], "", true),
+ new ModelInformationItem("Model UUID", "modelUuid", [vnfModel.uuid], "", true),
+ new ModelInformationItem("Model Customization UUID", "modelCustomizationUuid", [vnfModel.customizationUuid], "", true),
+ ];
+
+ this.groups = [];
+ _.forOwn(vnfModel.vfcInstanceGroups, (vfcInstanceGroup, key) => {
+ const properties: VfcInstanceGroupProperties = vfcInstanceGroup.vfcInstanceGroupProperties;
+ this.groups.push(this.createGroupsInformation(vfcInstanceGroup.name, properties));
+ });
+ }
+
+ nextStep() {
+ switch (this.currentStep) {
+ case WizardSteps.one:
+ this.groups.map(group => {
+ let networkName = _.find(group, (groupElements: ModelInformationItem) => groupElements.testsId === "networkCollectionFunction");
+ this.store.dispatch(
+ loadAaiNetworkAccordingToNetworkCF(networkName["values"][0], this.cloudOwner, this.formAsync.serviceInstance.lcpRegion)
+ );
+ });
+ this.currentStep = WizardSteps.two;
+ this.updateNavigationButtonText(this.currentStep);
+ break;
+ case WizardSteps.two:
+ this.deploySubInterface();
+ break;
+ }
+ }
+
+ cancel() {
+ switch (this.currentStep) {
+ case WizardSteps.one:
+ window.parent.postMessage({
+ eventId: 'closeIframe'
+ }, "*");
+ break;
+ case WizardSteps.two:
+ this.currentStep = WizardSteps.one;
+ this.updateNavigationButtonText(this.currentStep);
+ break;
+ }
+ }
+
+ updateNavigationButtonText(step: WizardSteps) {
+ switch (step) {
+ case WizardSteps.one:
+ this.nextButtonText = buttonTextNext;
+ this.cancelButtonText = buttonTextCancel;
+ break;
+ case WizardSteps.two:
+ this.nextButtonText = buttonTextConfirm;
+ this.cancelButtonText = buttonTextBack;
+ break;
+ }
+ }
+
+ isNextButtonDisabled() {
+ switch (this.currentStep) {
+ case WizardSteps.one:
+ return !this.formAsync.form.valid;
+ case WizardSteps.two:
+ return !this.networkSelectorComponent.form.valid;
+ }
+ }
+
+ createGroupsInformation(name: string, properties: VfcInstanceGroupProperties): Array<ModelInformationItem> {
+ let modelInfoItems = [];
+ modelInfoItems.push(new ModelInformationItem("Group Name", "groupName", [name], "", true));
+ modelInfoItems.push(new ModelInformationItem("Network Collection Function", "networkCollectionFunction", [properties.networkCollectionFunction], "", true));
+ modelInfoItems.push(new ModelInformationItem("VFC Instance Group Function", "instanceGroupFunction", [properties.vfcInstanceGroupFunction], "", true));
+ modelInfoItems.push(new ModelInformationItem("Parent Port Role", "parentPortRole", [properties.vfcParentPortRole], "", true));
+ modelInfoItems.push(new ModelInformationItem("Sub Interface Role", "subInterfaceRole", [properties.subinterfaceRole], "", true));
+ return modelInfoItems;
+ }
+}
diff --git a/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts
new file mode 100644
index 000000000..3227542c6
--- /dev/null
+++ b/vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts
@@ -0,0 +1,33 @@
+
+import { formasync } from './../components/form-async/form-async.component';
+import {NgModule,} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { VlanTaggingComponent } from './vlan-tagging.component';
+import {CommonModule} from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgReduxModule } from '@angular-redux/store';
+import { SharedModule } from '../shared/shared.module';
+import { NetworkSelectorComponent } from './network-selector/network-selector.component';
+import { TooltipModule } from 'ngx-tooltip';
+
+
+
+@NgModule({
+
+imports: [
+ CommonModule,
+ NgReduxModule,
+ FormsModule,
+ BrowserModule,
+ TooltipModule,
+ SharedModule.forRoot()
+
+ ],
+ providers: [ ],
+ declarations: [VlanTaggingComponent,formasync,NetworkSelectorComponent],
+ entryComponents: [],
+ exports: [formasync]
+
+})
+
+export class VlanTaggingModule { }