"ng-zorro-antd": "^0.7.1",
"ngx-echarts": "^2.2.0",
"rxjs": "^5.5.12",
+ "vis": "^4.21.0",
"zone.js": "^0.8.19"
},
"devDependencies": {
import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component';
import { CcvpnNetworkComponent } from './views/ccvpn-network/ccvpn-network.component';
+import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component';
+import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
+import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component';
+import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component';
import { TestComponent } from './test/test.component';
{ path: 'fcaps/5gslicing', component: Monitor5gComponent },
{ path: 'services/services-list', component: ServicesListComponent },
{ path: 'services/slicing-management', component: SlicingManagementComponent },
- // { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent },
+ { path: 'services/sotn-management', component: SotnManagementComponent },
+ { path: 'services/order-service', component: OrderServiceComponent },
+ { path: 'services/manage-service', component: ManageServiceComponent },
+ { path: 'services/monitor-service', component: MonitorServiceComponent },
{ path: 'onboard-vnf-vm', component: OnboardVnfVmComponent },
{ path: 'alarm', component: AlarmComponent },
{ path: 'performance', component: PerformanceComponent },
<li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/services-list'}">
<a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a>
</li>
+ <!-- SOTN ELine -->
+ <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/sotn-management'}">
+ <a routerLink='services/sotn-management'> {{"i18nTextDefine_SotnEline" | translate}} </a>
+ </li>
<!-- 5g slicing management -->
<li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/slicing-management'}">
<a routerLink='services/slicing-management'> {{"i18nTextDefine_Mangement_5g" | translate}} </a>
import { NssiModelComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component';
import { CsmfSlicingBusinessManagementComponent } from './views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component';
import { BusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component';
+import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component';
+import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component';
+import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component';
+import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component';
@NgModule({
providers: [
BusinessOrderComponent,
MdonsCreationComponent,
MdonsDetailComponent,
- DisableControlDirective
+ DisableControlDirective,
+ SotnManagementComponent,
+ OrderServiceComponent,
+ ManageServiceComponent,
+ MonitorServiceComponent
],
imports: [
BrowserModule,
--- /dev/null
+<div class="main">
+ <div class="divCls">
+ <table>
+ <tr>
+ <td>
+ <nz-form-label class="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">{{"i18nTextDefine_subscriptionType" | translate}}</nz-form-label>
+ </td>
+ <td>
+ <nz-select class="colm-s-2" id="subscriptionType" [(ngModel)]="selectedSubscriptionType" (ngModelChange)="getServiceInstanceList($event)" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option *ngFor="let option of serviceSubscriptionList" [nzValue]="option.serviceType" [nzLabel]="option.serviceType"></nz-option>
+ </nz-select>
+ </td>
+ <td style="width: 5%"></td>
+ <td>
+ <nz-form-label class="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">{{"i18nTextDefine_serviceInstance" | translate}}</nz-form-label>
+ </td>
+ <td>
+ <nz-select class="colm-s-2" id="serviceInstance" [(ngModel)]="selectedServiceInstance" (ngModelChange)="getSubscribedSites($event)" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option *ngFor="let option of serviceInstanceList" [nzValue]="option.serviceInstance" [nzLabel]="option.serviceInstancename"></nz-option>
+ </nz-select>
+ </td>
+ <td style="width: 5%"></td>
+ <td>
+ <button *ngIf="((selectedSubscriptionType|lowercase) == 'sotn' && selectedServiceInstance !='' )" nz-button nzType="primary"
+ (click)="deleteSelectedService()">{{"i18nTextDefine_delete" | translate}}</button>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="desktop view">
+ <nz-table #nzExpandTable [nzData]="expandDataSet" [nzShowPagination]=false>
+ <tbody>
+ <ng-template ngFor let-data [ngForOf]="nzExpandTable.data">
+ <tr>
+ <td width="4%" class="tdCls" nzShowExpand [(nzExpand)]="data.expand"></td>
+ <td width="96%" class="tdCls">{{data.name | translate}}</td>
+ </tr>
+ <tr [nzExpand]="data.expand">
+ <td class="noPadding" colspan="2">
+ <ng-template [ngIf]="data.rowIdx == 1">
+ <div style="display: flex; justify-content: center; padding: 1%;">
+ <div style="width: 45%" class="">
+ <div style="padding: 1%">
+ <span>
+ <b>Name: </b>
+ </span>
+ <span>{{summaryInfo.name}}</span>
+ </div>
+ </div>
+ <div style="width: 45%" class="">
+ <div style="padding: 1%">
+ <span>
+ <b>Description: </b>
+ </span>
+ <span>{{summaryInfo.description}}</span>
+ </div>
+ </div>
+ </div>
+ </ng-template>
+ <ng-template [ngIf]="data.rowIdx == 2">
+ <div style="display: flex; justify-content: center; padding: 1%;">
+ <div style="width: 45%" class="">
+ <div style="padding: 1%">
+ <span>
+ <b>Name: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_name}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>Description: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_description}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>COS: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_COS}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>Dual Link: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_dualLink}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>Tenant ID: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_tenantId}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>VPN Type: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_vpnType}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>CBC: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_cbs}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>EBC: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_ebs}}</span>
+ </div>
+ </div>
+ <div style="width: 45%" class="">
+ <div style="padding: 1%">
+ <span>
+ <b>Color Aware: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_colorAware}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>Re-route: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_reroute}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>Coupling Flag: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_couplingFlag}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>CIR: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_cir}}</span>
+ </div>
+
+ <div style="padding: 1%">
+ <span>
+ <b>Start Time: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_startTime}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>End Time: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_endTime}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>EIR: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_eir}}</span>
+ </div>
+ <div style="padding: 1%">
+ <span>
+ <b>SLS: </b>
+ </span>
+ <span>{{vpnInfo.l2vpn_SLS}}</span>
+ </div>
+
+ </div>
+ </div>
+ </ng-template>
+ <ng-template [ngIf]="data.rowIdx == 3">
+ <div style="display: flex; justify-content: center; padding: 1%;">
+ <div style="width: 90%" class="">
+ <nz-table #basicTable [nzData]="uniInfo" [nzShowPagination]="false">
+ <thead>
+ <tr>
+ <th>UNI</th>
+ <th>TP Id</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let data of basicTable.data">
+ <td>{{ data.sotnuni_cVLAN }}</td>
+ <td>{{ data.sotnuni_tpId }}</td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ </div>
+ </ng-template>
+ </td>
+ </tr>
+ </ng-template>
+ </tbody>
+ </nz-table>
+ </div>
+ <!-- <app-sotn-order-service *ngIf="((selectedSubscriptionType|lowercase) == 'sotn' && selectedServiceInstance !='' )" [subscriptionType]="selectedSubscriptionType"
+ [serviceInstanceId]="selectedServiceInstance"></app-sotn-order-service>
+ <app-ordered-service *ngIf="((selectedSubscriptionType|lowercase) == 'sdwan' && selectedServiceInstance !='' )"></app-ordered-service> -->
+</div>
\ No newline at end of file
--- /dev/null
+.main {
+ min-height: calc(~"100vh - 165px");
+}
+.paddingLeft{
+ padding-left: 40px;
+ }
+ nz-table{
+
+
+
+ td{
+ border-bottom: 1px solid #F7F8FC;
+ background-color:var(--primary) ;
+ color: var(--on-primary) ;
+ }
+ .tdCls{
+ font-weight:bold;
+ color: var(--on-primary) ;
+ background-color:var(--primary) ;
+ }
+ .Clscol
+ {
+ color: var(--on-primary) ;
+ }
+
+ .thCls{
+ font-weight:bold;
+ color: var(--on-primary) ;
+ background-color: var(--th-background);
+
+ border-bottom: 1px solid #F7F8FC;
+ border-top: 1px solid #F7F8FC;
+ }
+ .noPadding
+ {
+ padding-left:0px;
+ padding-right:0px;
+ }
+ .costCls{
+ margin-left: 40%;
+ // padding-left: 20px;
+ color: red;
+ }
+ .costCls_mob{
+ color: red;
+ }
+ .divCls{
+ display: inline-block;
+ width: 40%;
+ padding-left: 3%;
+ padding-bottom: 10px;
+ color : var(--on-lables) ;
+ }
+ .spanCls
+ {
+ color:#999999;
+ }
+
+ .textAlignLeft
+ {
+ text-align: left;
+ }
+ .paddingZero{
+ padding:0px;
+ }
+ }
+
+ .container
+ {
+ height: calc(~"100vh - 120px");
+ overflow: auto;
+ }
+
+ :host ::ng-deep .ant-table-row-expand-icon
+ { background: var(--primary);
+
+ }
+ .divCls
+ {
+ .spanCls {
+ color : var(--on-lables) ;
+ }}
+
+ .inner_data
+ {
+ padding-left: 52px;
+ }
+
+.paddingLeft{
+ padding-left: 40px;
+}
+nz-table{
+ td{
+ border-bottom: 1px solid #F7F8FC;
+ background-color:var(--primary) ;
+ color: var(--on-primary) ;
+ }
+ .tdCls{
+ font-weight:bold;
+ color: var(--on-primary) ;
+ background-color:var(--primary) ;
+ overflow: hidden;
+ height:21px;
+ }
+ .clscol
+ {
+ color: var(--on-primary) ;
+ }
+
+ .thCls{
+ font-weight:bold;
+ color: var(--on-primary) ;
+ background-color: var(--th-background);
+
+ border-bottom: 1px solid #F7F8FC;
+ border-top: 1px solid #F7F8FC;
+ height:21px;
+ }
+ .noPadding
+ {
+ padding-left:0px;
+ padding-right:0px;
+ }
+
+ .divCls{
+ display: inline-block;
+ width: 40%;
+ padding-left: 3%;
+ padding-bottom: 10px;
+ color : var(--on-lables) ;
+ }
+ .spanCls
+ {
+ color:#999999;
+ }
+ .costCls
+ {
+ color:red;
+ text-align: center;
+ font-size: 16px;
+ font-weight:400;
+ border:0px;
+ }
+ .textAlignLeft
+ {
+ text-align: left;
+ }
+ .paddingZero{
+ padding:0px;
+ }
+}
+
+.container1
+{
+ height: calc(~"100vh - 210px");
+ overflow: auto;
+}
+
+:host ::ng-deep .ant-table-row-expand-icon
+{ background: var(--primary);
+
+}
+.divCls
+{
+.spanCls {
+ color : var(--on-lables) ;
+}}
+
+@media (max-width: 575px) {
+
+
+ .xs-clr-blue{
+ color: var(--on-primary) ;
+ }
+ .xs-clr-red{
+ color: red!important;
+ }
+ .xs-flex-col{
+ display: flex!important;
+ flex-direction: column!important;
+ }
+
+ .text-align-center{
+ text-align: center!important
+ }
+ .min-hight{
+ min-height: calc(~"50vh - 50px")!important;
+ }
+
+}
+
+.divCls{
+ display: inline-block;
+ width: 100%;
+ padding-bottom: 10px;
+ color : var(--on-lables) ;
+ }
+
+ .main {
+ padding-left:80px
+ }
+ .ant-col-sm-6 {
+ width:100%;
+ }
+
+ #subscriptionType, #serviceInstance {
+ width: 250px;
+ }
\ No newline at end of file
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManageServiceComponent } from './manage-service.component';
+
+describe('ManageServiceComponent', () => {
+ let component: ManageServiceComponent;
+ let fixture: ComponentFixture<ManageServiceComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ManageServiceComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ManageServiceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit, SimpleChanges } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+
+@Component({
+ selector: 'app-manage-service',
+ templateUrl: './manage-service.component.html',
+ styleUrls: ['./manage-service.component.less']
+})
+export class ManageServiceComponent implements OnInit {
+
+ selectedSubscriptionType:string = "SOTN";
+ serviceSubscriptionList:any = [{
+ serviceType:"SOTN"
+ }];
+ selectedServiceInstance:string = "";
+ serviceInstanceList:any = [
+ {
+ serviceInstance: "SiteService-5011",
+ serviceInstancename: "SiteService-5011"
+ },
+ {
+ serviceInstance: "ISAAC-IS0333",
+ serviceInstancename: "ISAAC-IS0333"
+ }
+ ];
+ graphData: boolean = true;
+ expandDataSet = [
+ { rowIdx: 1, name: 'Service',cost: '', expand: true , mobileExpand:false},
+ { rowIdx: 2, name: 'VPN',cost: '', expand: true,mobileExpand:false },
+ { rowIdx: 3, name: 'UNI',cost: '', expand: true,mobileExpand:false }
+ ];
+
+ summaryInfo:object = {};
+ serviceList:object = {};
+ vpnInfo = [];
+ uniInfo = [];
+ mapped: any;
+ myKeys = [] as Array<any>;
+ baseUrl:string = '/api/usecaseui-server/v1'
+ constructor(private http: HttpClient) { }
+
+ ngOnInit() {
+ this.getSubscribeTypes();
+ }
+
+ //Get SubscriptionType
+ getSubscribeTypes() {
+ let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions";
+ // this.http.get<any>(url, {}).subscribe((data) => {
+ // this.serviceSubscriptionList = data.subscriptions;
+ // this.selectedSubscriptionType = this.serviceSubscriptionList[0].serviceType;
+ // this.getServiceInstanceList(this.selectedSubscriptionType);
+ // }, (err) => {
+ // console.log(err);
+ // });
+ let data = {
+ "subscriptions": [
+ {
+ "serviceType": "SOTN",
+ }]
+ }
+ this.serviceSubscriptionList = data.subscriptions;
+ this.selectedSubscriptionType = this.serviceSubscriptionList[0].serviceType;
+ this.getServiceInstanceList(this.selectedSubscriptionType);
+ }
+
+ //Get subscription instanceID by calling With Subscription Type
+ getServiceInstanceList(subscriptionType) {
+ this.serviceInstanceList = [];
+ this.selectedServiceInstance="";
+ let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/"+subscriptionType;
+ // this.http.get<any>(url,{}).subscribe((data) => {
+ // this.serviceInstanceList = data.serviceInstanceList;
+ // this.selectedServiceInstance = data.serviceInstanceList[0].serviceInstance;
+ // this.getSubscribedSites(data.serviceInstanceList[0]);
+ // this.graphData = false;
+ // }, (err) => {
+ // console.log(err);
+ // });
+ let data = {
+ "serviceInstanceList": [
+ {
+ "serviceInstance": "ISAAC-IS02",
+ "serviceInstancename":"SiteService-5011"
+ },
+ {
+ "serviceInstance": "ISAAC-IS03",
+ "serviceInstancename":"ISAAC-IS0333"
+ }
+ ]
+ }
+ this.serviceInstanceList = data.serviceInstanceList;
+ this.selectedServiceInstance = data.serviceInstanceList[0].serviceInstance;
+ this.getSubscribedSites(data.serviceInstanceList[0]);
+
+ // var datas= {
+ // "ethtSvcName":"vpn022",
+ // "colorAware":"true",
+ // "cbs":"100",
+ // "couplingFlag":"true",
+ // "ebs":"EVPL",
+ // "cir":"98900",
+ // "eir":"1000",
+ // "vpnInformations":[{
+ // "vpnThreshold":"1000",
+ // "vpnBandwidth":"100",
+ // "vpnType":"Hub-Spoke",
+ // "vpnId":"a8529dee-523e-4c6b-bc83-e26d68a9911c",
+ // "vpnName":"vpn022",
+ // "sites":[
+ // {
+ // "zipCode":"100008",
+ // "address":"beijing",
+ // "siteId":"d5b530fe-2271-4ed6-8c09-b7ce368a1f59",
+ // "siteName":"ISAAC01-hub1",
+ // "description":"desc"
+ // }
+ // ]
+ // }]
+ // };
+ // this.assignData(datas, false);
+ var datas = {
+ "service":{
+ "name":"CCVPNServiceV2-36",
+ "description":"CCVPNServiceV2",
+ "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6",
+ "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad",
+ "globalSubscriberId": "{{customer}}",
+ "serviceType": "{{service-subscription}}",
+ "parameters":{
+ "locationConstraints":[],
+ "resources":[],
+ "requestInputs":{
+ "sotnUnderlay":[
+ {
+ l2vpn:[
+ {
+ "l2vpn_COS": "123",
+ "l2vpn_dualLink": "Yes",
+ "l2vpn_description": "VPN Description",
+ "l2vpn_name": "VPN2",
+ "l2vpn_tenantId": "989933",
+ "l2vpn_vpnType": "SOTN",
+ "l2vpn_cbs": "123",
+ "l2vpn_ebs": "23",
+ "l2vpn_colorAware": "true",
+ "l2vpn_reroute": "Yes",
+ "l2vpn_couplingFlag": "true",
+ "l2vpn_cir": "100",
+ "l2vpn_startTime": "28-02-2020",
+ "l2vpn_endTime": "21-02-2020",
+ "l2vpn_eir": "1000",
+ "l2vpn_SLS": "1234"
+ }
+ ],
+ "sotnUni":[
+ {
+ "sotnuni_cVLAN": "Huawei",
+ "sotnuni_tpId": "Huawei-112233"
+ },
+ {
+ "sotnuni_cVLAN": "Huawei-1",
+ "sotnuni_tpId": "Huawei1-554433"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+ }
+ this.assignData(datas, false);
+ }
+
+ getSubscribedSites(selectedServiceInstance) {}
+
+ deleteSelectedService()
+ {
+
+ let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
+
+ // this.http.delete<any>(url,{}).subscribe((data) => {
+ // this.serviceInstanceList = [];
+ // this.selectedServiceInstance = "";
+ // this.getServiceInstanceList(this.selectedSubscriptionType);
+ // }, (err) => {
+ // console.log(err);
+ // });
+ }
+
+
+ ngOnChanges(changes: SimpleChanges) {
+ console.log("on change");
+ if (this.selectedServiceInstance) {
+ // let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance;
+ // this.http.get<any>(url, {}).subscribe((data) => {
+ // this.assignData(data, false);
+ // }, (err) => {
+ // console.log(err);
+ // });
+ // var data= {
+ // "ethtSvcName":"vpn022",
+ // "colorAware":"true",
+ // "cbs":"100",
+ // "couplingFlag":"true",
+ // "ebs":"EVPL",
+ // "cir":"98900",
+ // "eir":"1000",
+ // "vpnInformations":[{
+ // "vpnThreshold":"1000",
+ // "vpnBandwidth":"100",
+ // "vpnType":"Hub-Spoke",
+ // "vpnId":"a8529dee-523e-4c6b-bc83-e26d68a9911c",
+ // "vpnName":"vpn022",
+ // "sites":[
+ // {
+ // "zipCode":"100008",
+ // "address":"beijing",
+ // "siteId":"d5b530fe-2271-4ed6-8c09-b7ce368a1f59",
+ // "siteName":"ISAAC01-hub1",
+ // "description":"desc"
+ // }
+ // ]
+ // }]
+ // };
+ var datas = {
+ "service":{
+ "name":"CCVPNServiceV2-36",
+ "description":"CCVPNServiceV2",
+ "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6",
+ "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad",
+ "globalSubscriberId": "{{customer}}",
+ "serviceType": "{{service-subscription}}",
+ "parameters":{
+ "locationConstraints":[],
+ "resources":[],
+ "requestInputs":{
+ "sotnUnderlay":[
+ {
+ l2vpn:[
+ {
+ "l2vpn_COS": "123",
+ "l2vpn_dualLink": "Yes",
+ "l2vpn_description": "VPN Description",
+ "l2vpn_name": "VPN2",
+ "l2vpn_tenantId": "989933",
+ "l2vpn_vpnType": "SOTN",
+ "l2vpn_cbs": "123",
+ "l2vpn_ebs": "23",
+ "l2vpn_colorAware": "true",
+ "l2vpn_reroute": "Yes",
+ "l2vpn_couplingFlag": "true",
+ "l2vpn_cir": "100",
+ "l2vpn_startTime": "28-02-2020",
+ "l2vpn_endTime": "21-02-2020",
+ "l2vpn_eir": "1000",
+ "l2vpn_SLS": "1234"
+ }
+ ],
+ "sotnUni":[
+ {
+ "sotnuni_cVLAN": "Huawei",
+ "sotnuni_tpId": "Huawei-112233"
+ },
+ {
+ "sotnuni_cVLAN": "Huawei-1",
+ "sotnuni_tpId": "Huawei1-554433"
+ }
+ ]
+ }
+ ]
+ }
+ }
+ }
+ }
+ this.assignData(datas, false);
+ }
+ else {
+ // const httpOptions = {
+ // headers: new HttpHeaders({
+ // 'Content-Type': 'application/json',
+ // })
+ // };
+ // let body = JSON.stringify({}); //this.orderServiceData
+
+ // let url = this.baseUrl + "/uui-lcm/Sotnservices/cost";
+ // return this.http.post<any>(url,body,httpOptions).subscribe((data) => {
+ // this.assignData(data, true);
+ // }, (err) => {
+ // console.log(err);
+ // });
+ }
+ }
+
+ assignData(data,isCost) {
+ this.summaryInfo = data.service;
+ this.mapped = JSON.parse(JSON.stringify(this.summaryInfo));
+ // delete this.mapped.vpninformations;
+ // delete this.mapped.vpnInformations;
+ // if(isCost)
+ // {
+ // delete this.mapped.cost;
+ // this.expandDataSet[0].cost = this.summaryInfo["cost"]["serviceCost"];
+ // this.expandDataSet[1].cost = this.summaryInfo["cost"]["vpnCost"];
+ // }
+ this.myKeys = Object.keys(this.mapped);
+ this.vpnInfo = this.summaryInfo["parameters"]["requestInputs"]["sotnUnderlay"][0].l2vpn[0];
+ this.uniInfo = this.summaryInfo["parameters"]["requestInputs"]["sotnUnderlay"][0].sotnUni;
+ }
+}
--- /dev/null
+<div class="main">
+ <div class="divCls">
+ <table>
+ <tr>
+ <td>
+ <nz-form-label class= "colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">{{"i18nTextDefine_subscriptionType" | translate}}</nz-form-label>
+ </td>
+ <td>
+ <nz-select id="subscriptionType" class= "colm-s-2" [(ngModel)]="selectedSubscriptionType" (ngModelChange)="getServiceInstanceList($event)" nzAllowClear
+ nzPlaceHolder="Choose">
+ <nz-option *ngFor="let option of serviceSubscriptionList" [nzValue]="option.serviceType" [nzLabel]="option.serviceType"></nz-option>
+
+ </nz-select>
+ </td>
+ <td style="width: 5%"></td>
+ <td>
+ <nz-form-label class ="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">{{"i18nTextDefine_serviceInstance" | translate}}</nz-form-label>
+ </td>
+ <td>
+ <nz-select id="serviceInstance" class= "colm-s-2 " [(ngModel)]="selectedServiceInstance" (ngModelChange)="getSelectedsubscriptionInfo($event)"
+ nzAllowClear nzPlaceHolder="Choose">
+ <nz-option *ngFor="let option of serviceInstanceList" [nzValue]="option.serviceInstance" [nzLabel]="option.serviceInstancename"></nz-option>
+ </nz-select>
+ </td>
+ <td style="width: 5%"></td>
+ <td>
+ <nz-form-label class ="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">Topology</nz-form-label>
+ </td>
+ <td>
+ <nz-select id="serviceInstance" class= "colm-s-2 " [(ngModel)]="selectedTopology" (ngModelChange)="getTopologyInfo($event)"
+ nzAllowClear nzPlaceHolder="Choose">
+ <nz-option *ngFor="let option of serviceTopologyList" [nzValue]="option.topologyType" [nzLabel]="option.topologyType"></nz-option>
+ </nz-select>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="flexDiv">
+ <div id="mynetwork" class="colm-s-3"></div>
+ <div class="colm-s-4"><div id="nodeDetails"></div></div>
+ </div>
+</div>
\ No newline at end of file
--- /dev/null
+#mynetwork {
+ width: 100%;
+ height: calc(~"100vh - 300px");
+ border: 1px solid lightgray;
+ margin-right: 40px;
+ background-color: #333333;
+}
+
+
+:host ::ng-deep .ant-form-item-label label {
+ color: var(--on-primary) ;
+ background-color:var(--primary);
+}
+
+:host ::ng-deep .ant-select-dropdown-menu-item{
+ color: var(--on-primary) ;
+ background-color:var(--primary);
+
+}
+:host ::ng-deep .ant-select-selection__rendered {
+ background-color:var(--primary);
+
+}
+:host ::ng-deep .ant-select-selection--single {
+ background-color:var(--primary);
+
+}
+
+:host ::ng-deep .ant-select-selection-selected-value {
+
+ color: var(--on-primary) !important ;
+
+}
+
+@media only screen and (min-width: 600px) {
+.flexDiv {
+ display: flex!important;
+}
+}
+@media only screen and (min-width: 768px) {
+.flexDiv {
+ display: flex!important;
+}
+}
+
+.font-size{
+ font-size: 17px;
+}
+.font-weight{
+ font-weight:bold;
+}
+
+.refreshBtn{
+ right: 580px;
+ position: absolute;
+ top: 35px;
+ z-index: 1
+}
+
+:host ::ng-deep .ant-form-item-label label {
+ color: var(--on-primary) ;
+}
+
+:host ::ng-deep .ant-select-selection__placeholder
+{
+ color: var(--on-primary);
+}
+
+:host ::ng-deep .ant-select-arrow {
+
+
+ color: var(--on-primary);
+ font-size: 12px;
+}
+
+
+.popup-table-row
+{
+ color: aqua;
+}
+
+.divCls{
+ display: inline-block;
+ width: 100%;
+ padding-bottom: 10px;
+ color : var(--on-lables) ;
+ }
+
+ .main {
+ padding-left:80px
+ }
+ .ant-col-sm-6 {
+ width:100%;
+ }
+
+ #subscriptionType, #serviceInstance {
+ width: 250px;
+ }
\ No newline at end of file
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonitorServiceComponent } from './monitor-service.component';
+
+describe('MonitorServiceComponent', () => {
+ let component: MonitorServiceComponent;
+ let fixture: ComponentFixture<MonitorServiceComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MonitorServiceComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MonitorServiceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit } from '@angular/core';
+import { Network, DataSet, Node, Edge, IdType } from 'vis';
+
+@Component({
+ selector: 'app-monitor-service',
+ templateUrl: './monitor-service.component.html',
+ styleUrls: ['./monitor-service.component.less']
+})
+export class MonitorServiceComponent implements OnInit {
+
+ selectedSubscriptionType:string = "SOTN";
+ serviceSubscriptionList:any = [{
+ serviceType:"SOTN"
+ }];
+ selectedServiceInstance:string = "SiteService-5011";
+ serviceInstanceList:any = [
+ {
+ serviceInstance: "SiteService-5011",
+ serviceInstancename: "SiteService-5011"
+ },
+ {
+ serviceInstance: "ISAAC-IS0333",
+ serviceInstancename: "ISAAC-IS0333"
+ }
+ ];
+ selectedTopology:string = 'Network Topology';
+ serviceTopologyList:any = [
+ {
+ topologyType:"Network Topology"
+ },
+ {
+ topologyType:"Resource Topology"
+ }
+ ];
+
+ title = 'Network';
+ public nodes: Node;
+ public edges: Edge;
+ public network: Network;
+ public serviceList: any;
+ public tempNode: any;
+ public tempEdge: any;
+ public selectedNode: any;
+ public selectedNodeIds: any;
+ public x: any;
+ public abc = [];
+ container: any;
+ networkOptions = {
+ layout: {
+ randomSeed: 15
+ },
+ nodes: {
+ borderWidth: 13,
+ size: 30,
+ color: {
+ border: '#54bd55',
+ background: '#666666'
+ },
+ font: { color: '#eeeeee' }
+ },
+ edges: {
+ color: 'lightgray'
+ },
+
+ interaction: {
+ tooltipDelay: 200,
+ hideEdgesOnDrag: true,
+ navigationButtons: false,
+ keyboard: true,
+ hover: true
+ },
+ };
+
+ node1:any = {
+ "nodes": [
+ {
+ "id": "1",
+ "shape": "circularImage",
+ "image": "./assets/images/edge.png",
+ "label": "Node",
+ "color": "Green",
+ "dataNode": {
+ "ethtSvcName": "sotn-021-VS-monitored",
+ "colorAware": "true",
+ "cbs": "100",
+ "couplingFlag": "true",
+ "ebs": "evpl",
+ "cir": "200000",
+ "eir": "0"
+ }
+ },
+ {
+ "id": "2",
+ "shape": "circularImage",
+ "image": "./assets/images/logicallink.png",
+ "label": "Logical Link",
+ "color": "Green",
+ "dataNode": {
+ "ethtSvcName": "sotn-021-VS-monitored",
+ "colorAware": "true",
+ "cbs": "100",
+ "couplingFlag": "true",
+ "ebs": "evpl",
+ "cir": "200000",
+ "eir": "0"
+ }
+ },
+ {
+ "id": "3",
+ "shape": "circularImage",
+ "image": "./assets/images/edge.png",
+ "label": "Node",
+ "color": "Green",
+ "dataNode": {
+ "zipcode": "100095",
+ "siteName": "hubtravel",
+ "description": "desc",
+ "location": "laptop-5",
+ "cvlan": "100"
+ }
+ }
+ ],
+ "edges": [
+ {
+ "from": "1",
+ "to": "2"
+ },
+ {
+ "from": "2",
+ "to": "3"
+ }
+ ]
+ }
+
+ node2:any = {
+ "nodes": [
+ {
+ "id": "1",
+ "shape": "circularImage",
+ "image": "./assets/images/tpoint.png",
+ "label": "Termination Point",
+ "color": "Green",
+ "dataNode": {}
+ },
+ {
+ "id": "2",
+ "shape": "circularImage",
+ "image": "./assets/images/edge.png",
+ "label": "Node",
+ "color": "Green",
+ "dataNode": {
+ "ethtSvcName": "sotn-021-VS-monitored",
+ "colorAware": "true",
+ "cbs": "100",
+ "couplingFlag": "true",
+ "ebs": "evpl",
+ "cir": "200000",
+ "eir": "0"
+ }
+ },
+ {
+ "id": "3",
+ "shape": "circularImage",
+ "image": "./assets/images/logicallink.png",
+ "label": "Logical Link",
+ "color": "Green",
+ "dataNode": {
+ "ethtSvcName": "sotn-021-VS-monitored",
+ "colorAware": "true",
+ "cbs": "100",
+ "couplingFlag": "true",
+ "ebs": "evpl",
+ "cir": "200000",
+ "eir": "0"
+ }
+ },
+ {
+ "id": "4",
+ "shape": "circularImage",
+ "image": "./assets/images/edge.png",
+ "label": "Node",
+ "color": "Green",
+ "dataNode": {
+ "zipcode": "100095",
+ "siteName": "hubtravel",
+ "description": "desc",
+ "location": "laptop-5",
+ "cvlan": "100"
+ }
+ },
+ {
+ "id": "5",
+ "shape": "circularImage",
+ "image": "./assets/images/tpoint.png",
+ "label": "Termination Point",
+ "color": "Green",
+ "dataNode": {
+ "accessltpid": "155",
+ "siteName": "hubtravel",
+ "description": "desc",
+ "accessnodeid": "10.10.10.10",
+ "cvlan": "100"
+ }
+ }
+ ],
+ "edges": [
+ {
+ "from": "1",
+ "to": "2"
+ },
+ {
+ "from": "2",
+ "to": "3"
+ },
+ {
+ "from": "3",
+ "to": "4"
+ },
+ {
+ "from": "4",
+ "to": "5"
+ }
+ ]
+ }
+
+ constructor() { }
+
+ intervalData: any;
+ returnResponse: boolean = true;
+
+ //Get SubscriptionType
+ getSubscribeTypes() {
+ this.getTopologyInfo('Network Topology');
+ }
+
+ getTopologyInfo (topo) {
+ this.selectedTopology = topo;
+ this.getData();
+ this.refreshData();
+ }
+
+ //Get subscription instanceID by calling With Subscription Type
+ getServiceInstanceList(subscriptionType) {
+ this.getSelectedsubscriptionInfo(subscriptionType);
+ }
+ ngOnInit() {
+ this.container = document.getElementById('mynetwork');
+ this.getSubscribeTypes();
+ }
+
+ refreshData() {
+
+ var data1 = {
+ nodes: this.serviceList.nodes,
+ edges: this.serviceList.edges
+ };
+
+ var network = new Network(this.container, data1, this.networkOptions);
+
+
+ network.on('select', function (selection) {
+ this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids
+ var filteredNode = data1.nodes.filter(item => (
+ item.id == this.selectedNodeIds
+ ));
+ var t1 = '<div class="tblDiv">\
+ <nz-form-label class="lblCls">Node Information</nz-form-label>\
+ <table class="table table-striped table-bordered">\
+ <thead>\
+ <tr>\
+ <th class="clr-primary padding-2p">Specification</th>\
+ <th class="clr-primary padding-2p">Value</th>\
+ </tr>\
+ </thead>\
+ <tbody>\
+ ';
+ Object.entries(filteredNode[0].dataNode).forEach(entry => {
+ if( entry[1] !== "null")
+ {
+ t1 += '<tr class="popup-table-row">\
+ <td class="popup-table-header clr-primary padding-2p">'+ entry[0] + ':</td>\
+ <td class="popup-table-data clr-primary padding-2p">'+ entry[1] + '</td>\
+ </tr>\
+ ';
+ }
+ });
+ t1 += '</tbody>\
+ </table>\
+ </div>\
+ ';
+ document.getElementById('nodeDetails').innerHTML = t1;
+ });
+ network.on("afterDrawing", function (this) {
+ network.fit();
+ });
+ }
+
+ getData ()
+ {
+ if (this.selectedTopology == 'Network Topology') {
+ this.serviceList = this.node1;
+ } else {
+ this.serviceList = this.node2;
+ }
+ }
+ // Getting sitedata Based On Type and ID
+ getSelectedsubscriptionInfo(s) {
+ this.getData();
+ this.refreshData();
+ if (this.intervalData) {
+ clearInterval(this.intervalData);
+ }
+ }
+
+ ngOnDestroy() {
+ console.log('clear interval');
+ if (this.intervalData) {
+ clearInterval(this.intervalData);
+ }
+
+ }
+
+ ngOnDelete() {
+ console.log('clear interval');
+ if (this.intervalData) {
+ clearInterval(this.intervalData);
+ }
+ }
+
+}
--- /dev/null
+<div theme class="main">
+ <nz-table #nzExpandTable [nzData]="expandDataSet" [nzShowPagination]=false>
+ <tbody>
+ <tr>
+ <td width="4%"></td>
+ <td width="96%">
+ <button style="float:right" (click)="selectOrderSiteData()" nz-button nzType="primary">Create Service</button>
+ </td>
+ </tr>
+ <ng-template ngFor let-data [ngForOf]="nzExpandTable.data">
+ <tr>
+ <td width="4%" class="tdCls" nzShowExpand [(nzExpand)]="data.expand"></td>
+ <td width="96%" class="tdCls">{{data.name | translate}}</td>
+ </tr>
+ <tr [nzExpand]="data.expand">
+ <td class="noPadding" colspan="2">
+ <form autocomplete="off" [formGroup]="validateForm">
+ <ng-template [ngIf]="data.rowIdx == 1">
+ <div style="display: flex; justify-content: center; padding: 1%;">
+ <div style="width: 100%" class="">
+ <div style="display: flex; justify-content: space-around;">
+ <div class="sotn-form">
+ <nz-form-item class="mar-0x">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name" ><span class="form-lable-font"> {{ "i18nTextDefine_Name" | translate}}</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="name" id="name" [(ngModel)]="siteData.name">
+ </nz-form-control>
+ </nz-form-item>
+ </div>
+ <div class="sotn-form ">
+ <nz-form-item class="mar-0x">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="description"><span class="form-lable-font">{{ "i18nTextDefine_Description" | translate}}</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="description" id="description" [(ngModel)]="siteData.description">
+ </nz-form-control>
+ </nz-form-item>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ng-template>
+ <ng-template [ngIf]="data.rowIdx == 2">
+ <div style="display: flex; justify-content: center; padding: 1%;">
+ <div style="width: 100%" class="">
+ <div style="display: flex; justify-content: space-around;">
+ <div class="sotn-form">
+ <nz-form-item class="mar-0x">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_name" ><span class="form-lable-font"> {{ "i18nTextDefine_Name" | translate}}</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_name" id="l2vpn_name" [(ngModel)]="l2vpn.l2vpn_name">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_description"><span class="form-lable-font">{{ "i18nTextDefine_Description" | translate}}</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_description" id="l2vpn_description" [(ngModel)]="l2vpn.l2vpn_description">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_COS"><span class="form-lable-font">COS</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_COS" id="l2vpn_COS" [(ngModel)]="l2vpn.l2vpn_COS" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_dualLink"><span class="form-lable-font">Dual Link</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_dualLink" id="l2vpn_dualLink" [(ngModel)]="l2vpn.l2vpn_dualLink" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_tenantId"><span class="form-lable-font">Tenant ID</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_tenantId" id="l2vpn_tenantId" [(ngModel)]="l2vpn.l2vpn_tenantId" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_vpnType"><span class="form-lable-font">VPN Type</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_vpnType" id="l2vpn_vpnType" [(ngModel)]="l2vpn.l2vpn_vpnType" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_cbs"><span class="form-lable-font">CBS</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_cbs" id="l2vpn_cbs" [(ngModel)]="l2vpn.l2vpn_cbs" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_ebs"><span class="form-lable-font">EBS</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_ebs" id="l2vpn_ebs" [(ngModel)]="l2vpn.l2vpn_ebs" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ </div>
+ <div class="sotn-form ">
+ <nz-form-item class="mar-0x">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_colorAware" ><span class="form-lable-font">Color Aware</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_colorAware" id="l2vpn_colorAware" [(ngModel)]="l2vpn.l2vpn_colorAware">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_reroute"><span class="form-lable-font">Re-route</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_reroute" id="l2vpn_reroute" [(ngModel)]="l2vpn.l2vpn_reroute">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_couplingFlag"><span class="form-lable-font">Coupling Flag</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_couplingFlag" id="l2vpn_couplingFlag" [(ngModel)]="l2vpn.l2vpn_couplingFlag" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_cir"><span class="form-lable-font">CIR</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_cir" id="l2vpn_cir" [(ngModel)]="l2vpn.l2vpn_cir" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_startTime"><span class="form-lable-font">Strat Time</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <nz-date-picker formControlName="l2vpn_startTime" id="l2vpn_startTime" [(ngModel)]="l2vpn.l2vpn_startTime"></nz-date-picker>
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_endTime"><span class="form-lable-font">End Time</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <nz-date-picker formControlName="l2vpn_endTime" id="l2vpn_endTime" [(ngModel)]="l2vpn.l2vpn_endTime"></nz-date-picker>
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_eir"><span class="form-lable-font">EIR</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_eir" id="l2vpn_eir" [(ngModel)]="l2vpn.l2vpn_eir" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ <nz-form-item class="mar-0x child">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_SLS"><span class="form-lable-font">SLS</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="l2vpn_SLS" id="l2vpn_SLS" [(ngModel)]="l2vpn.l2vpn_SLS" (keypress)="numberOnly($event)">
+ </nz-form-control>
+ </nz-form-item>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ng-template>
+ <ng-template [ngIf]="data.rowIdx == 3">
+ <div style="display: flex; justify-content: center; padding: 1%;">
+ <div style="width: 100%" class="">
+ <div style="display: flex; justify-content: space-around;">
+ <div class="sotn-form">
+ <nz-form-item class="mar-0x">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_cVLAN" ><span class="form-lable-font">VLAN</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="sotnuni_cVLAN" id="sotnuni_cVLAN" [(ngModel)]="uni.sotnuni_cVLAN">
+ </nz-form-control>
+ </nz-form-item>
+ </div>
+ <div class="sotn-form ">
+ <nz-form-item class="mar-0x">
+ <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_tpId" ><span class="form-lable-font">TP ID</span></nz-form-label>
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <input nz-input formControlName="sotnuni_tpId" id="sotnuni_tpId" [(ngModel)]="uni.sotnuni_tpId">
+ </nz-form-control>
+ </nz-form-item>
+ </div>
+ <div class="sotn-form ">
+ <nz-form-item class="mar-0x">
+ <nz-form-control [nzSm]="14" [nzXs]="24">
+ <button (click)="addUNI($event)" nz-button nzType="primary">Add</button>
+ </nz-form-control>
+ </nz-form-item>
+ </div>
+ </div>
+ <nz-table #basicTable [nzData]="sotnUni" [nzShowPagination]="false">
+ <thead>
+ <tr>
+ <th>VLAN</th>
+ <th>TP Id</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let data of basicTable.data">
+ <td>{{ data.sotnuni_cVLAN }}</td>
+ <td>{{ data.sotnuni_tpId }}</td>
+ <td>
+ <a>Delete</a>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </div>
+ </div>
+ </ng-template>
+ </form>
+ </td>
+ </tr>
+ </ng-template>
+ </tbody>
+ </nz-table>
+</div>
\ No newline at end of file
--- /dev/null
+
+.main {
+ min-height: calc(~"100vh - 165px");
+}
+nz-table
+{
+ th,tr,td,nz-spin,div,span
+ {
+ background: var(--primary);
+ color: var(--on-primary) ;
+ .action
+ {
+ margin-left:10px;
+ }
+ }
+ td{
+ border-bottom: 1px solid #F7F8FC;
+ padding:5px;
+ }
+ th{
+ padding:5px;
+ font-weight:bold;
+ color: var(--on-primary) ;
+ }
+ tr{
+ border-left-color: var(--primary);
+ }
+
+
+}
+.tdCls{
+ font-weight:bold;
+ color: var(--on-primary) ;
+ background-color:var(--primary) ;
+ overflow: hidden;
+ height:21px;
+ }
+.sotn-form{
+ display: flex;
+ flex-direction: column;
+ width: 45%;
+}
+.crt-btn{
+
+ display: flex;
+ justify-content: flex-end;
+}
+.form-lable-font{
+ font-weight: bold;
+ color: deepskyblue;
+}
+.mar-0x{
+ margin:0;
+}
+
+.labelcls{
+ color: var(--on-primary);
+}
+
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderServiceComponent } from './order-service.component';
+
+describe('OrderServiceComponent', () => {
+ let component: OrderServiceComponent;
+ let fixture: ComponentFixture<OrderServiceComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ OrderServiceComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(OrderServiceComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit } from '@angular/core';
+import {
+ FormBuilder,
+ FormGroup,
+ Validators
+} from '@angular/forms';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { NzMessageService } from 'ng-zorro-antd';
+
+@Component({
+ selector: 'app-order-service',
+ templateUrl: './order-service.component.html',
+ styleUrls: ['./order-service.component.less']
+})
+export class OrderServiceComponent implements OnInit {
+
+ validateForm: FormGroup;
+ validateForm1: FormGroup;
+ validateForm2: FormGroup;
+ l2vpn:object = {};
+ siteData:object = {};
+ tipMsg: String = "serviceCreationInitiated";
+ displayMsg:boolean = false;
+ displayMsg2:boolean = false;
+ buttonDisabled:boolean = false;
+ intervalData:any;
+ baseUrl:string = '/api/usecaseui-server/v1';
+ expandDataSet = [
+ { rowIdx: 1, name: 'Service', expand: true },
+ { rowIdx: 2, name: 'VPN', expand: true },
+ { rowIdx: 3, name: 'UNI', expand: true }
+ ];
+ uni = {
+ sotnuni_cVLAN:"asdf",
+ sotnuni_tpId:"asdf"
+ };
+ sotnUni = [
+ {
+ sotnuni_cVLAN:"asdf",
+ sotnuni_tpId:"saf"
+ }
+ ];
+
+ constructor(private fb: FormBuilder, private http: HttpClient, private message: NzMessageService) { }
+
+ ngOnInit() {
+ this.validateForm = this.fb.group({
+ name:[null, [Validators.required]],
+ description:[null, [Validators.required]],
+ l2vpn_name:[null, [Validators.required]],
+ l2vpn_dualLink:[null, [Validators.required]],
+ l2vpn_description:[null, [Validators.required]],
+ l2vpn_SLS:[null, [Validators.required]],
+ l2vpn_COS:[null, [Validators.required]],
+ l2vpn_tenantId:[null, [Validators.required]],
+ l2vpn_vpnType:[null, [Validators.required]],
+ l2vpn_cbs:[null, [Validators.required]],
+ l2vpn_ebs:[null, [Validators.required]],
+ l2vpn_colorAware:[null, [Validators.required]],
+ l2vpn_reroute:[null, [Validators.required]],
+ l2vpn_couplingFlag:[null, [Validators.required]],
+ l2vpn_cir:[null, [Validators.required]],
+ l2vpn_eir:[null, [Validators.required]],
+ l2vpn_startTime:[null, [Validators.required]],
+ l2vpn_endTime:[null, [Validators.required]],
+ sotnuni_cVLAN:[null, [Validators.required]],
+ sotnuni_tpId:[null, [Validators.required]],
+ });
+ // this.validateForm1 = this.fb.group({
+ // l2vpn_name:[null, [Validators.required]],
+ // l2vpn_dualLink:[null, [Validators.required]],
+ // l2vpn_description:[null, [Validators.required]],
+ // l2vpn_SLS:[null, [Validators.required]],
+ // l2vpn_COS:[null, [Validators.required]],
+ // l2vpn_tenantId:[null, [Validators.required]],
+ // l2vpn_vpnType:[null, [Validators.required]],
+ // l2vpn_cbs:[null, [Validators.required]],
+ // l2vpn_ebs:[null, [Validators.required]],
+ // l2vpn_colorAware:[null, [Validators.required]],
+ // l2vpn_reroute:[null, [Validators.required]],
+ // l2vpn_couplingFlag:[null, [Validators.required]],
+ // l2vpn_cir:[null, [Validators.required]],
+ // l2vpn_eir:[null, [Validators.required]],
+ // l2vpn_startTime:[null, [Validators.required]],
+ // l2vpn_endTime:[null, [Validators.required]],
+ // });
+ // this.validateForm2 = this.fb.group({
+ // sotnuni_cVLAN:[null, [Validators.required]],
+ // sotnuni_tpId:[null, [Validators.required]],
+ // });
+ }
+
+ numberOnly(event): boolean {
+ const charCode = (event.which) ? event.which : event.keyCode;
+ if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+ }
+ return true;
+ }
+
+ addUNI () {
+ this.sotnUni.push(this.uni);
+ // this.uni = {};
+ }
+
+ selectOrderSiteData(): void {
+ if (!this.validateVpnAndUni() ||
+ !this.validateServices() ) {
+ this.displayMsg = true;
+ this.message.error("Please fill all mandatory fields");
+ var comp = this;
+ setTimeout(function () {
+ comp.displayMsg = false;
+ }, 5000);
+ } else {
+ this.putnewSotnSiteData()
+ }
+ }
+
+ validateServices (): boolean {
+ if (this.siteData["name"] == null ||
+ this.siteData["description"] == null) {
+ return false;
+ }
+ return true;
+ }
+
+ validateVpnAndUni (): boolean {
+ if (this.l2vpn["l2vpn_COS"] == null ||
+ this.l2vpn["l2vpn_dualLink"] == null ||
+ this.l2vpn["l2vpn_description"] == null ||
+ this.l2vpn["l2vpn_name"] == null ||
+ this.l2vpn["l2vpn_tenantId"] == null ||
+ this.l2vpn["l2vpn_vpnType"] == null ||
+ this.l2vpn["l2vpn_cbs"] == null ||
+ this.l2vpn["l2vpn_ebs"] == null ||
+ this.l2vpn["l2vpn_colorAware"] == null ||
+ this.l2vpn["l2vpn_cir"] == null ||
+ this.l2vpn["l2vpn_startTime"] == null ||
+ this.l2vpn["l2vpn_endTime"] == null ||
+ this.l2vpn["l2vpn_eir"] == null ||
+ this.l2vpn["l2vpn_SLS"] == null ||
+ this.sotnUni.length == 0 ||
+ this.l2vpn["l2vpn_reroute"] == null) {
+ return false;
+ }
+ return true;
+ }
+
+ putnewSotnSiteData() {
+ console.log("order service data===>", this.siteData)
+ let comp = this;
+ this.message.info('Instantiation In Progress');
+ this.buttonDisabled = true;
+ let body = JSON.stringify(this.siteData);
+ const httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type': 'application/json',
+ })
+ };
+ let url1 = this.baseUrl + '/uui-lcm/Sotnservices';
+ // this.http.post<any>(url1, body, httpOptions).subscribe((data) => {
+ // let comp = this;
+ // this.message.info('Instantiation In Progress');
+ // comp.displayMsg2 = true;
+ // this.intervalData = setInterval(() => {
+ // let url2 = this.baseUrl + "/uui-lcm/Sotnservices/serviceStatus/service-instance/" + data.service.serviceId;
+ // this.http.get<any>(url2, {}).subscribe((data) => {
+ // if (data.status == "1") {
+ // clearInterval(comp.intervalData);
+ // comp.displayMsg2 = true;
+ // comp.message.success('Service Created');
+ // comp.goToPage();
+ // }
+ // else {
+ // comp.message.info('Instantiation In Progress');
+ // comp.displayMsg2 = true;
+ // }
+ // }, (err) => {
+ // console.log(err);
+ // });
+ // }, 1000);
+ // }, (err) => {
+ // console.log(err);
+ // });
+ setTimeout(() => {
+ comp.message.success("Service Created");
+ comp.goToPage();
+ }, 3000);
+ }
+
+ goToPage(): void {
+ setTimeout(function () {
+ // document.getElementById('manageService').click();
+ }, 1000);
+ }
+
+}
--- /dev/null
+<nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing">
+ <nz-tab nzTitle="Order Service">
+ <app-order-service
+ *ngIf="currentTab ==='Order Service'"
+ ></app-order-service>
+ </nz-tab>
+ <nz-tab nzTitle="Manage Service" >
+ <app-manage-service
+ *ngIf="currentTab ==='Manage Service'"
+ ></app-manage-service>
+ </nz-tab>
+ <nz-tab nzTitle="Monitor Service">
+ <app-monitor-service
+ *ngIf="currentTab ==='Monitor Service'"
+ ></app-monitor-service>
+ </nz-tab>
+</nz-tabset>
\ No newline at end of file
--- /dev/null
+.slicing-content{
+ padding: 20px;
+ }
\ No newline at end of file
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SotnManagementComponent } from './sotn-management.component';
+
+describe('SotnManagementComponent', () => {
+ let component: SotnManagementComponent;
+ let fixture: ComponentFixture<SotnManagementComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SotnManagementComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SotnManagementComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { slideToRight } from '../../../shared/utils/animates';
+
+@Component({
+ selector: 'app-sotn-management',
+ templateUrl: './sotn-management.component.html',
+ styleUrls: ['./sotn-management.component.less'],
+ animations: [slideToRight]
+})
+export class SotnManagementComponent implements OnInit {
+
+ @HostBinding('@routerAnimate') routerAnimateState;
+
+ currentTab = 'Order Service';
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+ handleTabChange($event): void {
+ console.log($event,"$event");
+ this.currentTab = $event.tab._title;
+ }
+}
"i18nTextDefine_Monitor_5g": "5G 切片",
"i18nTextDefine_Services": "服务",
"i18nTextDefine_ServicesList": "服务列表",
+ "i18nTextDefine_SotnEline": "SOTN Eline",
"i18nTextDefine_Mangement_5g": "5G切片管理",
"i18nTextDefine_PackageManagement": "包管理",
"i18nTextDefine_Alarm": "告警",
"i18nTextDefine_RightPort": "右侧端口",
"i18nTextDefine_PartnerNetwork": "伙伴网络",
"i18nTextDefine_HostUrl": "主机网址",
- "i18nTextDefine_deleteLink": "删除链接"
+ "i18nTextDefine_deleteLink": "删除链接",
+
+ "sotn-component": "--:",
+ "i18nTextDefine_subscriptionType": "Service Type",
+ "i18nTextDefine_serviceInstance": "Service Instance",
+ "i18nTextDefine_serviceInformation": "Service Information",
+ "i18nTextDefine_vpnInformation": "VPN Information",
+ "i18nTextDefine_vpnName": "VPN Name",
+ "i18nTextDefine_siteInformation": "Site Information",
+ "i18nTextDefine_siteName": "Site Name",
+ "i18nTextDefine_city": "City",
+ "i18nTextDefine_postalCode": "Postal Code"
}
"i18nTextDefine_Monitor_5g": "5G Slicing",
"i18nTextDefine_Services": "Services",
"i18nTextDefine_ServicesList": "Lifecycle Management",
+ "i18nTextDefine_SotnEline": "SOTN Eline",
"i18nTextDefine_Mangement_5g": "5G Slicing Management",
"i18nTextDefine_PackageManagement": "Package Management",
"i18nTextDefine_Alarm": "Alarm",
"i18nTextDefine_RightPort": "Right Port",
"i18nTextDefine_PartnerNetwork": "Partner Network",
"i18nTextDefine_HostUrl": "Host Url",
- "i18nTextDefine_DeleteLink": "Delete Link"
+ "i18nTextDefine_DeleteLink": "Delete Link",
+
+ "sotn-component": "--:",
+ "i18nTextDefine_subscriptionType": "Service Type",
+ "i18nTextDefine_serviceInstance": "Service Instance",
+ "i18nTextDefine_serviceInformation": "Service Information",
+ "i18nTextDefine_vpnInformation": "VPN Information",
+ "i18nTextDefine_vpnName": "VPN Name",
+ "i18nTextDefine_siteInformation": "Site Information",
+ "i18nTextDefine_siteName": "Site Name",
+ "i18nTextDefine_city": "City",
+ "i18nTextDefine_postalCode": "Postal Code"
}
Code Review / usecase-ui.git / commitdiff
