From 2fd289f8e4e211eb26752d04d8d9b394ab78470f Mon Sep 17 00:00:00 2001 From: cyuamber Date: Thu, 26 Sep 2019 16:53:28 +0800 Subject: feat:adjust the file schema of components related to service instances Change-Id: I18f1674601536a59313528bb1e01fd6b4fffd4fd Issue-ID: USECASEUI-307 Signed-off-by: cyuamber --- .../ccvpn-detail/ccvpn-detail.component.css | 359 ++++++++++ .../ccvpn-detail/ccvpn-detail.component.html | 421 +++++++++++ .../ccvpn-detail/ccvpn-detail.component.spec.ts | 69 ++ .../ccvpn-detail/ccvpn-detail.component.ts | 797 +++++++++++++++++++++ 4 files changed, 1646 insertions(+) create mode 100644 usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.css create mode 100644 usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.html create mode 100644 usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.ts (limited to 'usecaseui-portal/src/app/views/services/services-list/ccvpn-detail') diff --git a/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.css new file mode 100644 index 00000000..8d005d40 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.css @@ -0,0 +1,359 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #F7F8FC; + overflow-y: auto; +} +.creation-model{ + position: relative; + height: 100%; +} +.top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} +.model .submit{ + position: absolute; + width: 90px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background: #0DA9E2; + border-radius: 4px; + border: none!important; + border-color: rgba(0,0,0,0)!important; +} +.model .back,.model .back:hover{ + position: absolute; + top: 10px; + right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:url("../../../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; + border-radius:4px; + color: #D7D7D7; + cursor: pointer; +} +.model .back:hover{ + background: url("../../../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; +} +.top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; +} + + +.model .detaildata { + width: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 15px; +} +.model .detaildata h3.title { + height: 20px; + font: 700 20px/20px "Arial"; + color: #666; +} +.model .detaildata h3 { + height: 20px; + font: 700 16px/20px "Arial"; + margin: 5px 0; + color: #000; +} +.model .detaildata .service-title{ + margin:60px 50px; +} +.model .detaildata .service-title .info-inputs{ + width:400px; + height: 42px; + display: inline-block; +} +.model .detaildata .service-title span{ + height: 42px; + line-height: 42px; + vertical-align: middle; +} +.model .detaildata .service-title .lable{ + display: inline-block; + width: 100px; + font: 700 14px "Arial"; + color: #3C4F8C; + height: 42px; + line-height: 42px; + vertical-align: middle; + margin-left: 5px; +} +.model .detaildata .service-title .service-title-input { + width: 230px; + height: 42px; + border-radius:4px; + margin-right: 30px; + display: inline-block; +} +/* SOTN VPN */ +.model .detaildata .sotnvpn ul li { + display: inline-block; + height: 40px; + width: 24.5%; + margin-bottom: 40px; + float: left; +} +.model .detaildata .sotnvpn ul li span { + display: inline-block; + font-size: 14px; + font-weight: 500; + color:rgba(60,79,140,0.5); + margin-left: 10px; + vertical-align: middle; + float: left; + width: 110px; +} + +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ + width: 42%; + float: right; + margin-right: 2%; +} +.model .sotnnpnmodel .inputs input{ + width: 42%; + float: right; + margin-right: 2%; +} + +/* addsite model */ +.model .sitemodel,.model .sotnnpnmodel{ + position: absolute; + z-index: 1001; + left: 50%; + top: 50%; + background-color: #fff; + width:90%; + min-width: 725px; + border-radius:2px; + overflow:auto; + transform: translate(-50%, -50%); +} +.model .sitemodel h3,.model .sotnnpnmodel h3{ + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + color: #06A7E2; + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; +} +.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { + padding: 10px 20px 0; +} +.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { + display: inline-block; + height: 35px; + line-height: 35px; + width: 24.5%; + margin-bottom: 20px; +} +.model .sotnnpnmodel .inputs ul li{ + width: 31%; +} +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ + width: 42%; + float: right; + margin-right: 2%; +} +.model .sotnnpnmodel .inputs div{ + width: 42%; + float: right; + margin-right: 2%; +} +.model .sitemodel .action,.model .sotnnpnmodel .action { + text-align: center; + margin-top: 30px; + margin-bottom: 20px; + cursor: pointer +} +.model .sotnnpnmodel .action{ + margin-top: 70px; +} +.model .sitemodel .action button,.model .sotnnpnmodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ + background: #0DA9E2; + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ + background:#09C6E2; +} + +.model nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} + +/* site table */ +.sitemodel h3 button,.sotnnpnmodel h3 button{ + color: #D7D7D7; + width:32px; + height:32px; + background:#ffffff; + border-radius:4px; + border:1px solid #D7D7D7; +} +.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ + background:#ffffff; + color: #0DA9E2; + border:1px solid #0DA9E2; +} +.sitemodel h3>button,.sotnnpnmodel h3>button{ + float: right; + width: 30px; + height: 30px; + margin-right: 15px; +} + +/* site Detail */ + +.model .detaildata .site h3 .closeDetail { + cursor: pointer; + padding: 2px 15px; + color: #3fa8eb; +} + +.model .detaildata .sotnvpn,.model .detaildata .site{ + background: #fff; + padding: 30px 30px 0 30px; +} + +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; +} + +/* charts */ +.model .chart { + width: 98%; + padding: 10px; + margin: 0 auto; + color: #06A7E2; + font-size: 16px; + font-weight: 500; + margin-bottom: 30px; + background: #EEF9FF; + border-radius: 4px; +} +.model .chart #detailChart { + width: 100%; + height: 254px; + margin-top: 20px; + position: relative; +} +.model .chart #detailChart .cloudcounty { + cursor: pointer; +} + +.model .chart #detailChart .couldDetail { + position: absolute; + left: 50%; + top: 10px; + width: 80%; + transform: translate(-50%,0); + height: 160px; + background-color: #aaa; + border-radius: 5px; + box-shadow: 0px 0px 20px #000; +} +.siteWanTab{ + width: 96%; + margin: 0 auto; + margin-top: 10px; +} +.siteWanTab th{ + padding: 10px 8px; + color: #3C4F8C; + font-size: 16px; +} +.siteWanTab tr td{ + padding: 10px 5px; +} +.siteWanTab .tr-border{ + border-bottom: 1px solid #EDEDED; +} +.addListBtn{ + margin-right: 30px; + color: #06A7E2; + border: none; + background: rgba(229,238,252,0.8); + cursor: pointer; +} diff --git a/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.html new file mode 100644 index 00000000..e2b5159e --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.html @@ -0,0 +1,421 @@ + + +
+ +
+

{{detailParams['service-instance-name']}} Instance Detail

+
+ + +
+
+ +
+ +
+ + + + + + {{vpns[0].domain}} + + + + + + {{vpns[1].domain}} + + + + + + + {{vpns[0].sitetpname}} + + + + + + {{vpns[0].othertpname}} + + + + + + + {{vpns[1].othertpname}} + + + + + + {{vpns[1].sitetpname}} + + + + + + + SP Partent Network + + + + + + + {{localSite[0] && localSite[0]["service-instance-name"]}} + + + + + + {{ localSite[1] && localSite[1]["service-instance-name"]}} + + + + {{ localSite[1] && localSite[1]["service-instance-name"]}} + + + + + + + {{outerSite[1] && outerSite[1]["service-instance-name"]}} + + + + + + {{outerSite[0] && outerSite[0]["service-instance-name"]}} + + + + + + +
+
+
+ + +
+ name: +
{{templateParameters.service["name"]}}
+ description: +
{{templateParameters.service["description"]}}
+
+ + +
+
+

sdwanVPN List

+ +
+ + + + NO. + Name + topology + Action + + + + + {{i+1}} + {{item.sdwanvpn_name}} + {{item.sdwanvpn_topology}} + + + +   + + + + + +
+ + +
+
+

Site List

+ +
+ + + + NO. + Name + Description + Post Code + Address + VLAN + Action + + + + + + {{i+1}} + {{item.sdwandevice_list[0].name}} + {{item.sdwansite_description}} + {{item.sdwansite_postcode}} + {{item.sdwansite_address}} + {{item.sdwansite_emails}} + + +   + +   + + + + + + +
+ + +
+ +
+

{{"i18nTextDefine_Base" | translate}}

+
+
    +
  • + {{item.lableShow}}: + {{sotnInfo[item.lable]}} +
    • +
+
+
+

Sdwansitelan List

+
+
+
+ + + + + + + + + + + + + +
NO.{{key}}
{{i+1}} + {{item[key]}} +
+
+
+
+ +
+
+ +
+

{{"i18nTextDefine_Base" | translate}}

+
+
    +
  • + {{item.lableShow}}: + {{siteBaseData[item.lable]}} +
    • +
+
+
+

Sdwandevice

+
+ + + + + + + + + + + + + +
NO.{{key}}
{{i+1}} + {{item[key]}} +
+
+

Sdwansitewan List

+
+ + + + + + + + + + + + + +
NO.{{key}}
{{i+1}} + {{item[key]}} +
+
+
+ +
+ +
+
+ +
+

{{"i18nTextDefine_Base" | translate}}

+
+
    +
  • + {{item.lableShow}}: +
    • +
+
+
+

Sdwansitelan List

+
+
+ +
+ + + + + + + + + + + + + + + +
NO.{{key}} Action
{{i+1}} + {{item[key]}} + + + + +
+
+
+ +
+ + +
+
+ +
+

{{"i18nTextDefine_Base" | translate}}

+
+
    +
  • + {{item.lableShow}}: +
    • +
+
+
+

Sdwandevice

+
+
    +
  • + {{item.lable}}: + +
    • +
+
+

Sdwansitewan List

+
+
+ +
+ + + + + + + + + + + + + + + +
NO.{{key}} Action
{{i+1}} + {{item[key]}} + + + + +
+
+
+ +
+ + +
+
+
+
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.spec.ts new file mode 100644 index 00000000..b6f3171f --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.spec.ts @@ -0,0 +1,69 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { HttpClientModule } from '@angular/common/http'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core'; + +import { CcvpnDetailComponent } from './ccvpn-detail.component'; +import { ServiceListService } from '../../core/services/serviceList.service'; + +describe('CcvpnDetailComponent', () => { + let component: CcvpnDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [CcvpnDetailComponent], + imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), + NgZorroAntdModule.forRoot(), HttpClientModule], + providers: [ServiceListService, { provide: NZ_I18N, useValue: en_US }] + }) + .compileComponents(); + })); + + beforeEach(() => { + let detailshow = false; + detailData: Object; + let serviceDetail = (service) => { + service["siteSer"] = []; + service["sdwanSer"] = []; + service["customer"] = this.customerSelected; + service["serviceType"] = this.serviceTypeSelected; + + service.childServiceInstances.forEach((item) => { + if (item.serviceDomain == "SITE") { + service.siteSer.push(item); + } else if (item.serviceDomain == "SDWAN") { + service.sdwanSer.push(item); + } + }) + this.detailshow = true; + this.detailData = service; + component.detailParams = this.detailData + fixture = TestBed.createComponent(CcvpnDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }; + + it('should create', () => { + console.log(component); + expect(component).toBeTruthy(); + }); + }); + +}); diff --git a/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.ts new file mode 100644 index 00000000..a253b044 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-detail/ccvpn-detail.component.ts @@ -0,0 +1,797 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { ServiceListService } from '../../../../core/services/serviceList.service'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-ccvpn-detail', + templateUrl: './ccvpn-detail.component.html', + styleUrls: ['./ccvpn-detail.component.css'] +}) +export class CcvpnDetailComponent implements OnInit { + + constructor(private myhttp: ServiceListService) { } + + ngOnInit() { + this.dataInit(); + this.drawImages(); + } + + @Input() detailParams; + @Input() upDateShow; + @Output() closeDetail = new EventEmitter(); + @Output() closeUpdate = new EventEmitter(); + + tabBarStyle = { + "height": "58px", + "width": "694px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; + input_parameters: any; + templateParameters = { + service: {}, + sotnvpn: { + // info: {}, + sdwanvpnresource_list: [], + sdwansitelan_list: [] + }, + site: { + // info: {}, + sdwansiteresource_list: [], + sdwandevice_list: [], + sdwansitewan_list: [] + } + }; + bodyTemplateParameter = {}; + + // SOTN VPN List + sotnVpnTableData = []; + sotnInfo = {};//sotnmodel The first part of sotnInfo + sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table + sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data + tabInputShowSdwansitelan = [];//sdwansitelan table input and span + // Site List + siteTableData = []; + siteBaseData = {}; //sitemodel one sdwansiteresource_list + // cpe + siteSdwanDevice = []; //sitemodel SdwanDevice port Table data + siteCpeData = {}; //sitemodel two sdwandevice_list + tabInputShowDevice = [];//Device port input and span + // Wan Port + siteWanData = []; //sitemodel three wan port Table data + siteWanParams = {}; //wan port Table Detailed parameters of each line of data + tabInputShowWanPort = [];//wan port table input and span + sitenum = []; + sotnvpnnum = []; + + getKeys(item) { + return Object.keys(item); + } + //tabBarStyle + dataInit() { + // this.input_parameters = JSON.stringify(this.detailParams['input-parameters']) + if (this.detailParams['input-parameters']) { + this.input_parameters = JSON.parse(this.detailParams['input-parameters']); + } else { + return false; + } + this.templateParameters.service = { + name: this.input_parameters.service.name, + description: this.input_parameters.service.description, + serviceInvariantUuid: this.input_parameters.service["serviceInvariantUuid"], + serviceUuid: this.input_parameters.service["serviceUuid"] + }; + let inputs = this.input_parameters.service.parameters.requestInputs; + + Object.keys(inputs).map((items) => { + if (items.search("vpn") != -1) { + this.bodyTemplateParameter[items] = []; + inputs[items].map((item, index) => { + this.sotnVpnTableData.push(item); + this.sotnvpnnum.push(false); + }); + let sdwanvpnresource_list = inputs[items][0]; + Object.keys(sdwanvpnresource_list).forEach((its) => { + let input = {}; + if (its.search("site") != -1 && sdwanvpnresource_list[its] instanceof Array === true) { + Object.keys(sdwanvpnresource_list[its][0]).forEach((i) => { + let input1 = {}; + input1[i] = sdwanvpnresource_list[its][i]; + this.templateParameters["sotnvpn"]["sdwansitelan_list"].push(input1); + }) + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("sitelan") == -1 && sdwanvpnresource_list[its] instanceof Array === false) { + input[its] = sdwanvpnresource_list[its]; + this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(input); + } + }); + } + if (items.search("site") != -1) { + this.bodyTemplateParameter[items] = []; + inputs[items].map((item, index) => { + this.siteTableData.push(item); + this.sitenum.push(false); + }); + let sdwansiteresource_list = inputs[items][0]; + Object.keys(sdwansiteresource_list).forEach((its) => { + let input2 = {}; + if (its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true) { + this.templateParameters["site"]["sdwandevice_list"][0] = sdwansiteresource_list[its][0]; + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("site") != -1 && its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === true) { + this.templateParameters["site"]["sdwansitewan_list"][0] = sdwansiteresource_list[its][0]; + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === false) { + input2[its] = sdwansiteresource_list[its]; + this.templateParameters["site"]["sdwansiteresource_list"].push(input2); + } + }); + + } + }); + + this.showTemParametersSotnVpn(); + this.showTemParametersSite(); + + } + + //sotnVpn data, after combining the structure, rendering the template data to the page + showTemParametersSotnVpn() { + //sotn Data analysis, structure assembly + this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.sotnInfo = Object.assign(this.sotnInfo, input); + } + } + }); + + this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); + } + } + }); + this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); + this.sotnSdwansitelanData.map((item, index) => { + this.tabInputShowSdwansitelan[index] = true; + }); + } + + //Site data, after combining the structure, rendering the template to the page + showTemParametersSite() { + //site Data analysis, structure assembly + this.templateParameters.site.sdwansiteresource_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.siteBaseData = Object.assign(this.siteBaseData, input); + } + } + }); + + this.templateParameters.site.sdwandevice_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteCpeData = Object.assign(this.siteCpeData, input); + } + } + }); + this.templateParameters.site.sdwandevice_list.map((item, index) => { + if (this.getKeys(item).indexOf("lable") == -1) { + this.templateParameters.site.sdwandevice_list.splice(index, 1) + } + }); + this.templateParameters.site.sdwansitewan_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); + } + } + }); + this.siteSdwanDevice.push(this.siteCpeData); + this.siteSdwanDevice.map((item, index) => { + this.tabInputShowDevice[index] = true; + }); + this.siteWanData.push(this.siteWanParams); + this.siteWanData.map((item, index) => { + this.tabInputShowWanPort[index] = true; + }); + } + + //sotnVpn detail show + sotnVpnDetailShow = false; + isEditSotnVpn = 0; + showstonVpnDetail(num) { + this.sotnVpnDetailShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + } + detailSotnVpn_cancel() { + this.sotnVpnDetailShow = false; + } + + // site detail show + siteDetail = false; + isEditSite = 0; + showSiteDetail(num) { + this.siteDetail = true; + this.isEditSite = num; + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, {}, item) + }); + } + detailsite_cancel() { + this.siteDetail = false; + } + deleteUpdateSite(num) { + this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); + this.sitenum.splice(num - 1, 1); + } + + //sotnVpn addModel + sotnVpnAddModelShow = false; + + updateSotnVpn_OK() { + let inputs = { + "sdwansitelan_list": [] + }; + inputs = Object.assign(inputs, this.sotnInfo); + inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSotnVpn) { + + this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; + this.sotnVpnTableData = [...this.sotnVpnTableData]; + } else { + // this.siteTableData.push(inputs); + this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; + this.sotnvpnnum = [...this.sotnvpnnum, true]; + } + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + this.tabInputShowSdwansitelan.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnAddModelShow = false; + } + + updateSotnVpn_cancel() { + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnAddModelShow = false; + } + + editUpdateSotnVpn(num) { + this.sotnVpnAddModelShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.sotnSdwansitelanData.forEach((item, index) => { + this.tabInputShowSdwansitelan[index] = false; + }); + } + + deleteUpdateSotnVpn(num) { + this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); + this.sotnvpnnum.splice(num - 1, 1); + } + updateSotnSdwansitelan() { + if (this.tabInputShowSdwansitelan.indexOf(true) > -1) { + return false; + } + let addNum = this.sotnSdwansitelanData.length; + let inputsData = Object.assign({}, this.sotnSdwansitelanParams); + Object.keys(inputsData).forEach((item) => { + if (item != "description") { + inputsData[item] = null; + } + }); + this.sotnSdwansitelanData[addNum] = inputsData; + this.tabInputShowSdwansitelan[addNum] = true; + this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; + } + editUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.tabInputShowSdwansitelan[num - 1] == false) { + this.tabInputShowSdwansitelan[num - 1] = true; + } else { + this.tabInputShowSdwansitelan[num - 1] = false; + } + } + deleteUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.sotnSdwansitelanData.length <= 1) { + return false; + } else { + + } + this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); + } + + // site addModel + siteAddModelShow = false; + + updateSotnvpn() { + this.sotnVpnAddModelShow = true; + this.isEditSotnVpn = 0; + } + + updateSite() { + this.siteAddModelShow = true; + this.isEditSite = 0; + } + + editUpdateSite(num) { + this.siteAddModelShow = true; + this.isEditSite = num; + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, item) + }); + this.siteSdwanDevice.forEach((item, index) => { + this.tabInputShowDevice[index] = false; + }); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, item) + }); + this.siteWanData.forEach((item, index) => { + this.tabInputShowWanPort[index] = false; + }); + } + + updatesite_cancel() { + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = null; + }) + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + + }); + this.siteAddModelShow = false; + } + + updatesite_OK() { + let inputs = { + "sdwandevice_list": [], + "sdwansitewan_list": [] + }; + inputs = Object.assign(inputs, this.siteBaseData); + inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => { + return Object.assign({}, item); + }); + inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSite) { + // Edit status does not increase + this.siteTableData[this.isEditSite - 1] = inputs; + this.siteTableData = [...this.siteTableData]; //Table refresh + } else { + // this.siteTableData.push(inputs); + this.siteTableData = [...this.siteTableData, inputs]; + this.sitenum = [...this.sitenum, true]; + } + + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = null; + }); + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + this.tabInputShowDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + this.tabInputShowWanPort.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + + }); + console.log(this.siteTableData); + this.siteAddModelShow = false; + } + + //add.edit，detele siteWanPort + updateSiteWan() { + if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited + return false; + } + let addNum = this.siteWanData.length; + let inputsData = Object.assign({}, this.siteWanParams); + Object.keys(inputsData).forEach((item) => {//Add a new line of empty data + if (item != "description") { + inputsData[item] = null; + } + }); + this.siteWanData[addNum] = inputsData; + this.tabInputShowWanPort[addNum] = true; + this.siteWanData = [...this.siteWanData]; //Table refresh + } + + editUpdateWanPort(num, item, siteWanData) { + if (this.tabInputShowWanPort[num - 1] == false) { + this.tabInputShowWanPort[num - 1] = true; + } else { + this.tabInputShowWanPort[num - 1] = false; + } + } + + deleteUpdateWanPort(num, item, siteWanData) { + if (this.siteWanData.length <= 1) { + return false; + } + this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); + } + + // site node graphic depiction + // site sort，Check tp add pnf according to site --> allotted-resource + localSite = [];//local site + outerSite = [];//outer site + + getSiteAResource() { + return new Promise((res, rej) => { + this.detailParams.siteSer.forEach((site) => { + site["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "site-resource" }) ? this.localSite.push(site) : this.outerSite.push(site); + }); + + if (this.localSite[0] && this.localSite[0]["service-instance-name"].startsWith("Dc")) { + this.localSite.reverse(); + } + + if (this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")) { + this.outerSite.reverse(); + } + if (this.localSite.length > 0) { + this.detailLines = [].concat(this.detailLiness); + this.localSite.forEach((site) => { + let obj = { + customerId: this.detailParams.customer.id, + serviceType: this.detailParams.serviceType, + serviceId: site["service-instance-id"] + }; + this.myhttp.getAllottedResource(obj) + .subscribe((data) => { + let resource = data["allotted-resource"].find((item) => { return item["allotted-resource-name"] == "sotn ar" }); + let tps_pnfs = resource["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "p-interface" })["relationship-data"]; + site.tpsitename = tps_pnfs.find((item) => { return item["relationship-key"] == "p-interface.interface-name" })["relationship-value"]; + res("sites-domain"); + }) + }) + } else { + return false; + } + }) + } + + + vpns = [{ name: "", tps: [], domain: "", sitetpname: "", othertpname: "" }]; + + + getSotnAresource() { + return new Promise((res, rej) => { + let connectivityId = this.detailParams["relationship-list"]["relationship"] + .find((item) => { + return item["related-to"] == "connectivity" + })["relationship-data"] + .find((item2) => { + return item2["relationship-key"] == "connectivity.connectivity-id" + })["relationship-value"]; + this.myhttp.getSotnConnectivity(connectivityId) + .subscribe((data) => { + let vpns = data.connectivity[0]["relationship-list"]["relationship"] + .filter((item) => { + return item["related-to"] == "vpn-binding" + }) + .map((item2) => { + return item2["relationship-data"].find((item3) => { + return item3["relationship-key"] == "vpn-binding.vpn-id" + })["relationship-value"] + }); + this.detailParams.vpns = vpns.map((item) => { + return { name: item } + }); + this.detailParams.vpns.forEach((vpn, index) => { + this.myhttp.getVpnBinding(vpn.name) + .subscribe((data2) => { + let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"] + .filter((item) => { + return item["related-to"] == "p-interface" + }) + .map((item2) => { + return item2["relationship-data"] + }); + let pnfname = tps_pnfs.map((item) => { + return item.find((item2) => { + return item2["relationship-key"] == "pnf.pnf-name" + })["relationship-value"] + }); + let tpnames = tps_pnfs.map((item) => { + return item.find((item2) => { + return item2["relationship-key"] == "p-interface.interface-name" + })["relationship-value"] + }); + vpn.tps = tpnames; + this.myhttp.getPnfDetail(pnfname[0]) + .subscribe((data2) => { + let networkRelation = data2["relationship-list"]["relationship"].find((item) => { + return item["related-to"] == "network-resource" + })["relationship-data"]; + vpn.domain = networkRelation.find((item) => { + return item["relationship-key"] == "network-resource.network-id" + })["relationship-value"]; + if (this.localSite[index]) { + vpn.sitetpname = this.localSite.find((site) => { + return tpnames.includes(site.tpsitename) + }).tpsitename; + vpn.othertpname = tpnames.find((name) => { + return name != vpn.sitetpname + }); + } else { + vpn.sitetpname = this.localSite[0].tpsitename; + vpn.othertpname = tpnames.find((name) => { + return name != vpn.sitetpname + }); + } + this.vpns = this.detailParams.vpns; + res(this.detailParams.vpns) + }); + }) + }) + }) + }) + } + + + drawImages() { + + this.getSiteAResource().then((data) => { + return this.getSotnAresource() + }).then((data) => { + this.detailSites = this.detailParams.serviceDomain == "CCVPN" ? false : true; + // When there is only one vpn + if (this.detailParams.serviceDomain == "CCVPN" && this.vpns.length == 1) { + this.detailLines.length = this.detailLines.length - 3; + // this.detailLines.push(line); + // when local site have 2 + if (this.localSite.length == 2) { + let line = { + "x1": "30%", "y1": "55%", "x2": "42%", "y2": "55%"//tp2--tp3 + }; + this.detailLines.push(line); + } + // when cloud site have 2 + if (this.outerSite.length == 2) { + let line = { + "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 + }; + this.detailLines.push(line); + } + } + }); + let allnodes = [this.getSiteAResource(), this.getSotnAresource()]; + Promise.all(allnodes).then((data) => { + }) + } + + detailSites = false; + detailLines = []; + detailLiness = [ //Details of the topology map connection coordinates + { + "x1": "9%", "y1": "40%", "x2": "21%", "y2": "40%"//site1--tp1 + }, + + { + "x1": "83%", "y1": "51%", "x2": "91%", "y2": "51%"//out-domain--site4 + }, + + { + "x1": "52%", "y1": "81%", "x2": "63%", "y2": "81%"//site2--tp4 + }, + { + "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 + }, + { + "x1": "30%", "y1": "55%", "x2": "44%", "y2": "55%"//tp2--tp3 + } + ]; + + modifyJosnKey(json, oddkey, newkey) { + + let val = json[oddkey]; + delete json[oddkey]; + json[newkey] = val; + } + + // ccvpn update + submitUpdate() { + let globalCustomerId = this.detailParams.customer.id; + let globalServiceType = this.detailParams.serviceType.name; + let servicebody = { + service: { + name: this.templateParameters.service["name"], + description: this.templateParameters.service["description"], + serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], + serviceUuid: this.templateParameters.service["serviceUuid"], + globalSubscriberId: globalCustomerId, //customer.id + serviceType: globalServiceType, //serviceType.value + parameters: { + locationConstraints: [], + resources: [], + requestInputs: { + sdwanvpnresource_list: [], + sdwansiteresource_list: [] + } + } + } + }; + let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + siteresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { + sitewan = Object.keys(items)[0] + } + if (Object.keys(items)[0].search("device") != -1) { + device = Object.keys(items)[0] + } + }); + } + if (item.search("vpn") != -1) { + vpnresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1) { + sitelan = Object.keys(items)[0] + } + }); + } + }); + this.sotnVpnTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitelan) + } + }); + }); + this.siteTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && items.search("device") == -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitewan) + } + if (items.search("device") != -1) { + this.modifyJosnKey(item, items, device) + } + }); + }); + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); + } + if (item.search("vpn") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); + } + }); + this.closeUpdate.emit(servicebody); + } + + goback() { + this.closeDetail.emit(); + } + + hiddenModel() { + this.sotnVpnDetailShow = false; + this.siteDetail = false; + } + +} -- cgit 1.2.3-korg