From ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 Mon Sep 17 00:00:00 2001 From: "Sonsino, Ofir (os0695)" Date: Tue, 10 Jul 2018 15:57:37 +0300 Subject: New Angular UI from 1806 Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) --- .../network-selector.component.html | 14 ++ .../network-selector.component.scss | 17 ++ .../network-selector/network-selector.component.ts | 66 +++++++ .../app/vlanTagging/vlan-tagging.component.html | 27 +++ .../app/vlanTagging/vlan-tagging.component.scss | 168 +++++++++++++++++ .../src/app/vlanTagging/vlan-tagging.component.ts | 203 +++++++++++++++++++++ .../src/app/vlanTagging/vlan-tagging.module.ts | 33 ++++ 7 files changed, 528 insertions(+) create mode 100644 vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.html create mode 100644 vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.scss create mode 100644 vid-webpack-master/src/app/vlanTagging/network-selector/network-selector.component.ts create mode 100644 vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.html create mode 100644 vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.scss create mode 100644 vid-webpack-master/src/app/vlanTagging/vlan-tagging.component.ts create mode 100644 vid-webpack-master/src/app/vlanTagging/vlan-tagging.module.ts (limited to 'vid-webpack-master/src/app/vlanTagging') 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 @@ +
+
+
+ + +
+
+
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; + networkSelection: any; + groupSelection :any; + @Input() groups: Array; + @Input() cloudOwner : string; + @Input() cloudRegionId : string; + @select(['service', 'networkFunctions']) + readonly networkFunctions: Observable; + + @ViewChild('form') form: NgForm; + + constructor(store: NgRedux) { + 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 { + 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 @@ +
+
+
Collection Resource Consumer VNF
+
+ + +
+
+ +
+
+ + +
+ +
+
META DATA
+
+ +
Collection Resource Consumer VNF
+
+
+ +
+
+
+
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, + 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; + groups: Array>; + 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; + + @select(['service', 'userId']) + readonly userIdObs: Observable; + + + @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 { + 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 { } -- cgit 1.2.3-korg