diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts')
| -rw-r--r-- | usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts | 723 |
1 files changed, 0 insertions, 723 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts deleted file mode 100644 index f4c1f94c..00000000 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ /dev/null @@ -1,723 +0,0 @@ -/* - 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 * as d3 from 'd3'; -import * as $ from 'jquery'; -import { MyhttpService } from '../myhttp.service'; -import { el } from "@angular/platform-browser/testing/src/browser_util"; - -@Component({ - selector: 'app-ccvpn-creation', - templateUrl: './ccvpn-creation.component.html', - styleUrls: ['./ccvpn-creation.component.css'] -}) -export class CcvpnCreationComponent implements OnInit { - - constructor(private myhttp: MyhttpService) { } - @Input() createParams; - @Input() ccvpn_temParametersContent; - @Output() closeCreate = new EventEmitter(); - - ngOnInit() { - this.getccvpnTemParameters(this.ccvpn_temParametersContent); - } - - //tabBarStyle - tabBarStyle = { - "height": "58px", - "width": "694px", - "box-shadow": "none", - "margin": "0", - "border-radius": "4px 4px 0px 0px" - }; - 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&span The status identifier of the label switching display - // Site List - siteTableData = []; - siteBaseData = {}; //sitemodel one sdwansiteresource_list - // cpe - siteSdwanDevice = []; //sitemodel SdwanDevice port Table data - siteCpeData = {}; //sitemodel two sdwandevice_list - tabInputShowDevice = [];//Device port Table input和span The status identifier of the label switching display - // 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和span The status identifier of the label switching display - getKeys(item) { - return Object.keys(item); - } - - getccvpnTemParameters(data) { //Get template parameters - console.log(this.createParams); - if (typeof data["model"] == 'string') { - data = JSON.parse(data["model"]); - } - console.log(data); - let inputss = data["inputs"]; - let inputs = {}; - this.templateParameters.service = { - name: data.metadata["name"], - description: data.metadata.description, - serviceInvariantUuid: data.metadata.invariantUUID, - serviceUuid: data.metadata.UUID - }; - - //Screening separation sotnvpn data - Object.keys(inputss).map((items) => { - if (items.search("vpn") != -1) { - this.bodyTemplateParameter[items] = []; - inputss[items].map((item, index) => { - if (item["required"] != undefined) { - this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item[Object.keys(item)[0]] - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - }); - } - if (items.search("site") != -1) { - this.bodyTemplateParameter[items] = []; - inputss[items].map((item, index) => { - if (item["required"] != undefined) { - this.templateParameters["site"]["sdwansiteresource_list"].push(item); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("device") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["site"]["sdwandevice_list"] = item[Object.keys(item)[0]]; - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["site"]["sdwansitewan_list"] = item[Object.keys(item)[0]]; - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - }); - } - }); - this.showTemParametersSotnVpn(); - this.showTemParametersSite(); - console.log(this.bodyTemplateParameter,this.templateParameters) - } - - //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 (var 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 (var 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 (var 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 (var 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.push( - { - ipMode: "", - description: "" - }, - { - publicIP: "", - description: "" - } - ); - - this.templateParameters.site.sdwansitewan_list.map((item, index) => { - let input = {}; - for (var 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.siteWanData.push(this.siteWanParams); - this.siteWanData.map((item, index) => { - this.tabInputShowDevice[index] = true; - }); - this.siteWanData.map((item, index) => { - this.tabInputShowWanPort[index] = true; - }); - - } - - //add,edit,delete sotnSdwansitelan - addSotnSdwansitelan() { - if (this.tabInputShowSdwansitelan.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited - return false; - } - let addNum = this.sotnSdwansitelanData.length; - let inputsData = Object.assign({}, this.sotnSdwansitelanParams); - Object.keys(inputsData).forEach((item) => {//Add a new line of empty data - if (item != "description") { - inputsData[item] = null; - } - }); - this.sotnSdwansitelanData[addNum] = inputsData; - this.tabInputShowSdwansitelan[addNum] = true; - this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; //Table refresh - } - editSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.tabInputShowSdwansitelan[num - 1] == false) { - this.tabInputShowSdwansitelan[num - 1] = true; - } else { - this.tabInputShowSdwansitelan[num - 1] = false; - } - } - deleteSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.sotnSdwansitelanData.length <= 1) { - return false; - } else { - - } - this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); - } - - //add,edit,delete SdwanDevice - addSdwanDevice() { - if (this.tabInputShowDevice.indexOf(true) > -1) {//当有正在编辑的一行数据时，不允许添加新的行 - return false; - } - let addNum = this.siteSdwanDevice.length; - let inputsData = Object.assign({}, this.siteCpeData); - Object.keys(inputsData).forEach((item) => {//新增一行空数据 - if (item != "description") { - inputsData[item] = null; - } - }); - this.siteSdwanDevice[addNum] = inputsData; - this.tabInputShowDevice[addNum] = true; - this.siteSdwanDevice = [...this.siteSdwanDevice]; //表格刷新 - } - - editDevicePort(num, item, siteSdwanDevice) { - if (this.tabInputShowDevice[num - 1] == false) { - this.tabInputShowDevice[num - 1] = true; - } else { - this.tabInputShowDevice[num - 1] = false; - } - } - - deleteDevicePort(num, item, siteSdwanDevice) { - if (this.siteSdwanDevice.length <= 1) { - return false; - } - this.siteSdwanDevice = this.siteSdwanDevice.filter((d, i) => i !== num - 1); - } - - //add,edit,delete siteWanPort - addSiteWan() { - 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 - } - editWanPort(num, item, siteWanData) { - if (this.tabInputShowWanPort[num - 1] == false) { - this.tabInputShowWanPort[num - 1] = true; - } else { - this.tabInputShowWanPort[num - 1] = false; - } - } - deleteWanPort(num, item, siteWanData) { - if (this.siteWanData.length <= 1) { - return false; - } - this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); - } - - //siteModel,sotnVpnModel Display sign - siteModelShow = false; - sotnVpnModelShow = false; - addSotnvpn() { - this.sotnVpnModelShow = true; - this.isEditSotnVpn = 0; - } - addSite() { - this.siteModelShow = true; - this.isEditSite = 0; - } - - //add sotnVpn model - isEditSotnVpn = 0;//Edit serial number, No value, 0 means increase - addSotnVpn_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) { - // Edit status does not increase - this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; - this.sotnVpnTableData = [...this.sotnVpnTableData]; //Table refresh - } else { - this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; - } - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - 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.sotnVpnModelShow = false; - } - - addSotnVpn_cancel() { - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - 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.sotnVpnModelShow = false; - } - - editSotnVpn(num) { - this.sotnVpnModelShow = true; - this.isEditSotnVpn = num; - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - 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; - }); - } - - deleteSotnVpn(num) { - this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); - } - - // addsite model - isEditSite = 0; //Edit serial number, No value, 0 means increase - addsite_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 = [...this.siteTableData, inputs]; - } - - 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.drawImage(this.siteTableData); - this.siteModelShow = false; - } - - addsite_cancel() { - 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); - } 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.siteModelShow = false; - } - - editSite(num) { //Edit and modify the selected site information - this.siteModelShow = true; - this.isEditSite = num; - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - 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; - }); - } - - deleteSite(num) { - this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); - this.drawImage(this.siteTableData); - } - - // Site node graphic depiction - lines = []; - siteImage = []; - tpImage = []; - imgmap = { - '1': './assets/images/domain1.png', - '2': './assets/images/site.png' - }; - - drawImage(sitelist) { - let cx = 550; - let cy = 40; - let innerx1 = 720; //Left site pattern coordinate position - let innery1 = 40; - let ox = 950; - let oy = 50; - let innerx2 = 780;//Right site pattern coordinate position - let innery2 = 50; - let lateX1 = Math.random() * 30 + 55; - let lateX2 = 10; - let lateY1 = 15; - this.lines = sitelist.map((item, index) => { - let step = index + 1; - let x = cx; - let y = cy; - let innerX = innerx1; - let innerY = innery1; - if (step % 2 != 0) { //Left site pattern coordinate position - x = cx; - y = cy; - innerX = innerx1; - innerY = innery1; - if (step == 1) { - innerX = innerx1; - innerY = innery1; - } else { - x = cx - lateX1 * Math.ceil((step / 2)) >= 0 ? cx - lateX1 * Math.ceil((step / 2)) : -(cx - lateX1 * Math.ceil((step / 2))); - y = cy + lateY1 * Math.floor((step / 2)); - innerX = this.lines[step - 3].innerX - lateX2; - innerY = y; - } - } else { //Right site pattern coordinate position - x = ox; - y = oy; - innerX = innerx2; - innerY = innery2; - if (step / 2 == 1) { - innerX = innerx2; - innerY = innery2; - } else { - x = ox + lateX1 * (step / 2) >= 0 ? ox + lateX1 * (step / 2) : -(ox + lateX1 * (step / 2)); - y = oy + lateY1 * (step / 2 - 1); - innerX = this.lines[step - 3].innerX - lateX2; - innerY = y; - } - } - return { - img: "line", - site: item.sdwandevice_list[0].name, - x1: x, - y1: y, - x2: innerX, - y2: innerY, - innerX: innerX, - innerY: innerY - } - }); - this.render(this.imgmap, this.lines); - } - - render(imgmap, lines) { - - //enter - var svg = d3.select("svg"), - _g_lines = svg.selectAll('line.line') - .data(lines) - .enter() - .append('line') - .style('stroke', '#3fa8eb' - ) - .style('stroke-width', 2) - .attr('class', 'line') - .attr("x1", function (d) { - return d.x1; - }) - .attr("y1", function (d) { - return d.y1; - }) - .attr("x2", function (d) { - return d.x2; - }) - .attr("y2", function (d) { - return d.y2; - }), - _g_site = svg.selectAll('g.g-site') - .data(lines) - .enter() - .append('g') - .style('cursor', 'pointer') - .attr('class', 'g-site'); - _g_site.append('image') - .style("width", "50px") - .attr('xlink:href', function (d) { - return imgmap[2]; - }) - .attr("x", function (d) { - return d.x1 - 25; - }) - .attr("y", function (d) { - return d.y1 - 25; - }) - - //quit - svg.selectAll("g.g-site") - .data(lines) - .exit() //Select a picture without bound data - .remove(); - svg.selectAll("line.line") - .data(lines) - .exit() //Select the connection without binding data - .remove(); - - } - - modifyJosnKey(json, oddkey, newkey) { - - let val = json[oddkey]; - delete json[oddkey]; - json[newkey] = val; - } - - // submit createData - submit() { - let globalCustomerId = this.createParams.commonParams.customer.id; - let globalServiceType = this.createParams.commonParams.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: {} - }, - } - }; - 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 && Object.keys(item)[0].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); - } - }); - console.log(servicebody); - - this.closeCreate.emit(servicebody); - - } - - goback() { - this.closeCreate.emit(); - } -} |