From 8c1ae160f8f495c4ce0679203972112735faeccf Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Wed, 22 May 2019 10:17:10 +0800 Subject: Fix instance detail for CCVPN Change-Id: I8f1bbbfa80d48ec91d3929069771638c9f5dbb8a Issue-ID: USECASEUI-222 Signed-off-by: guochuyicmri --- .../app/ccvpn-detail/ccvpn-detail.component.css | 13 ++ .../app/ccvpn-detail/ccvpn-detail.component.html | 75 ++++++++- .../src/app/ccvpn-detail/ccvpn-detail.component.ts | 167 ++++++++++++++++++++- usecaseui-portal/src/app/myhttp.service.ts | 7 + .../services-list/services-list.component.html | 1 + .../services-list/services-list.component.ts | 63 ++++++++ usecaseui-portal/src/styles.less | 2 +- 7 files changed, 315 insertions(+), 13 deletions(-) diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css index 272e0b8f..d0479145 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css @@ -39,6 +39,19 @@ hr { 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; diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html index 96d5dcb5..cf87ff16 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html @@ -19,6 +19,8 @@

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

+
@@ -164,7 +166,7 @@
- +
name: @@ -206,7 +208,7 @@

Site List

- @@ -236,7 +238,10 @@ {{item.sdwansite_emails}} - +   + +   + @@ -329,5 +334,67 @@
-
+ +
+

{{"i18nTextDefine_Base" | translate}}

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

Sdwandevice

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

Sdwansitewan List

+
+
+ +
+ + + + + + + + + + + + + + + + + +
NO.{{key}} Action
{{i+1}} + {{item[key]}} + + + + +
+
+
+ +
+ + +
+
+
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts index aff3ef9e..484a6d93 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts @@ -35,6 +35,7 @@ export class CcvpnDetailComponent implements OnInit { @Input() detailParams; @Input() upDateShow; @Output() closeDetail = new EventEmitter(); + @Output() closeUpdate = new EventEmitter(); tabBarStyle = { "height": "58px", @@ -63,7 +64,7 @@ export class CcvpnDetailComponent implements OnInit { 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 @@ -72,6 +73,8 @@ export class CcvpnDetailComponent implements OnInit { // 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 = []; getKeys(item) { return Object.keys(item); } @@ -84,7 +87,9 @@ export class CcvpnDetailComponent implements OnInit { console.log(this.input_parameters); this.templateParameters.service = { name: this.input_parameters.service.name, - description: this.input_parameters.service.description + 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; //筛选 分离 sotnvpn数据 @@ -109,6 +114,7 @@ export class CcvpnDetailComponent implements OnInit { //筛选 分离 site数据 inputs["sdwansiteresource_list"].map((item, index) => { this.siteTableData.push(item); + this.sitenum.push(false); }); let sdwansiteresource_list = inputs["sdwansiteresource_list"][0]; @@ -188,6 +194,11 @@ export class CcvpnDetailComponent implements OnInit { } } }); + 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 (var keys in item) { @@ -199,6 +210,9 @@ export class CcvpnDetailComponent implements OnInit { } }); this.siteWanData.push(this.siteWanParams); + this.siteWanData.map((item, index) => { + this.tabInputShowWanPort[index] = true; + }); } //sotnVpn detail show @@ -226,7 +240,7 @@ export class CcvpnDetailComponent implements OnInit { this.isEditSite = num; console.log(this.siteTableData[num - 1]); console.log(this.siteCpeData); - console.log(this.templateParameters.site.sdwandevice_list); + console.log(this.templateParameters); Object.keys(this.siteBaseData).forEach((item) => { this.siteBaseData[item] = this.siteTableData[num - 1][item]; }); @@ -239,20 +253,130 @@ export class CcvpnDetailComponent implements OnInit { detailsite_cancel(){ this.siteDetail = false; } - deleteSite(num){ + deleteUpdateSite(num) { this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); + this.sitenum.splice(num - 1, 1); console.log(this.siteTableData) + console.log(this.sitenum) } - addSite(){ + // site addModel + siteAddModelShow = false; + + addSite() { + this.siteAddModelShow = true; + this.isEditSite = 0; + console.log(this.siteWanParams); + console.log(this.templateParameters); + } + + updatesite_cancel() { + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = null; + }) + Object.keys(this.siteCpeData).forEach((item) => { + this.siteCpeData[item] = null; + }) + 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"][0] = Object.assign({}, this.siteCpeData); + inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { + return Object.assign({}, item); + }); + console.log(inputs); + 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; + }); + Object.keys(this.siteCpeData).forEach((item) => { //Clear modal box + this.siteCpeData[item] = null; + }); + 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() { + console.log(this.tabInputShowWanPort) + 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 + console.log(this.siteWanData) + } + editUpdateWanPort(num, item, siteWanData) { + console.log(item) + if (this.tabInputShowWanPort[num - 1] == false) { + this.tabInputShowWanPort[num - 1] = true; + } else { + this.tabInputShowWanPort[num - 1] = false; + } + console.log(siteWanData); + } + deleteUpdateWanPort(num, item, siteWanData) { + if (this.siteWanData.length <= 1) { + console.log("num>=1", "siteWanData"); + return false; + } + this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); + console.log(this.siteWanData) + } - localSite = []; - outerSite = []; + // site节点图形描绘 + // site分类，根据site查tp pnf --> allotted-resource + localSite = [];//本地site + outerSite = [];//外部site getSiteAResource(){ return new Promise((res,rej)=>{ @@ -440,7 +564,34 @@ export class CcvpnDetailComponent implements OnInit { } ]; - goback(){ + 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: [] + } + } + }; + servicebody.service.requestInputs.sdwanvpnresource_list = servicebody.service.requestInputs.sdwanvpnresource_list.concat(this.sotnVpnTableData); + servicebody.service.requestInputs.sdwansiteresource_list = servicebody.service.requestInputs.sdwansiteresource_list.concat(this.siteTableData); + console.log(servicebody); + this.closeUpdate.emit(servicebody); + } + + goback() { this.closeDetail.emit(); } diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index 7426f441..aff92d12 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -48,6 +48,7 @@ export class MyhttpService { nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=0&serviceInstanceId=", e2eScale: this.baseUrl + "/services/scaleServices/", e2e_nsdata: this.baseUrl + "/getServiceInstanceById/customerId/", + updateccvpn:this.baseUrl + "/uui-lcm/services/updateService/", allottedResource: this.baseUrl + "/uui-sotn/getAllottedResources", pnfDetail: this.baseUrl + "/uui-sotn/getPnfInfo/", @@ -135,6 +136,12 @@ export class MyhttpService { return this.http.post(this.url.ns_createService2 + params, requestBody); } + updateccvpn(id,requestBody){ + console.log(id); + console.log(requestBody); + //return this.http.get(this.url.updateccvpn + id); //local + return this.http.put(this.url.updateccvpn + id,requestBody);// online + } // Delete interface deleteInstance(obj) { let httpOptions = { diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index b0efa5f4..35504ae0 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -629,6 +629,7 @@
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 45652529..22ea733c 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -1003,6 +1003,69 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { }) } + updateCcvpnNotification(template: TemplateRef<{}>): void { + console.log(template,"updateCcvpnNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } + updateCcvpnSuccessNotification(template: TemplateRef<{}>): void { + console.log(template,"updateCcvpnSuccessNotification show"); + this.notification.template(template); + // this.notification.template(template,{ nzDuration: 0 }); + } + + closeCCVPNUpdate(obj,templateUpdateSuccessFaild){ + console.log(obj); + this.detailshow = false; + this.listDisplay = false; + this.upDateShow = false; + this.detailData["rate"] = 0; + this.detailData["status"] = "In Progress"; + this.detailData['tips'] = ""; + this.detailData["statusClass"] = "1005"; + let id = this.detailData["service-instance-id"]; + this.myhttp.updateccvpn(id, obj) + .subscribe((data) => { + if (data.status == "FAILED") { + console.log("scale E2e service Failed :" + JSON.stringify(data)); + this.detailData["status"] = "Failed"; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); + return false; + } + let obj = { + serviceId: id, + operationId: data.operationId + } + let updata = (prodata) => { + this.detailData["rate"] = prodata.progress; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' +this.detailData["rate"]+"%"; + if (this.detailData["rate"] > 100) { + this.detailData["status"] = prodata.status; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"]+ '\xa0\xa0\xa0' + this.detailData["status"]; + } + }; + this.queryProgress(obj, updata).then(() => { + this.detailData["rate"] = 100; + this.detailData["status"] = "Successful"; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"]+ '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); + }) + }) + } + deleteService(service,templateDeleteSuccessFaild) { let allprogress = {}; // let querypros = []; // diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less index 3cdc7112..c78d7fcb 100644 --- a/usecaseui-portal/src/styles.less +++ b/usecaseui-portal/src/styles.less @@ -73,7 +73,7 @@ nz-table { } } -// ����ҳ��������ʽ + .detailInformatioin { nz-table { .ant-table-small { -- cgit 1.2.3-korg