diff options
16 files changed, 586 insertions, 309 deletions
diff --git a/distribution/pom.xml b/distribution/pom.xml index 210daa40..0c0bdf01 100644 --- a/distribution/pom.xml +++ b/distribution/pom.xml @@ -18,7 +18,7 @@ <parent> <groupId>org.onap.usecase-ui</groupId> <artifactId>usecase-ui</artifactId> - <version>1.2.2-SNAPSHOT</version> + <version>1.3.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> @@ -35,7 +35,7 @@ <linux64outputdir>target/assembly/${linux64id}</linux64outputdir> <win64outputdir>target/assembly/${win64id}</win64outputdir> <version.output>target/version</version.output> - <usecaseui.version>1.2.2</usecaseui.version> + <usecaseui.version>1.3.0</usecaseui.version> <maven.build.timestamp.format>yyyyMMdd'T'HHmmss'Z'</maven.build.timestamp.format> </properties> @@ -25,7 +25,7 @@ <modelVersion>4.0.0</modelVersion> <groupId>org.onap.usecase-ui</groupId> <artifactId>usecase-ui</artifactId> - <version>1.2.2-SNAPSHOT</version> + <version>1.3.0-SNAPSHOT</version> <packaging>pom</packaging> <name>usecase-ui</name> diff --git a/usecaseui-portal/pom.xml b/usecaseui-portal/pom.xml index 8064c11c..9f16c135 100644 --- a/usecaseui-portal/pom.xml +++ b/usecaseui-portal/pom.xml @@ -20,7 +20,7 @@ <parent> <groupId>org.onap.usecase-ui</groupId> <artifactId>usecase-ui</artifactId> - <version>1.2.2-SNAPSHOT</version> + <version>1.3.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css index 2ac88d32..a7e19a73 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css @@ -22,15 +22,6 @@ margin: 30px 0; } -.tips{ - margin: 20px auto; - padding:0 5px; - width: 100%; - height: 40px; - line-height: 40px; - border: 1px gainsboro solid; - border-radius: 10px; -} .submit,.delete,.add{ padding:10px 20px; width: 100px; diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html index 4fbe4875..e36fecc2 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html @@ -14,13 +14,10 @@ limitations under the License. --> <div class="model"> - <!--图表--> - <div class="tips"> - 请根据以下操作，来配置您的网络 - </div> + <!--chart--> <button nz-button nzType="primary" style="margin-top: 2px;display: block" (click)="showForm()">Add Link</button> <div id="tpContainer" style="overflow: hidden;"></div> - <!--弹出框--> + <!--Popup--> <div class="creation" id="d3_form" *ngIf="isVisible==true"> <span class="v_color"></span> <h3 class="w_font4">Set Attribtes</h3> diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts index af62c10a..000e0d16 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts @@ -71,13 +71,12 @@ export class CcvpnNetworkComponent implements OnInit { thisNg.delTp2 = $(this).attr('data-tp2'); thisNg.delNode1 = $(this).attr('data-node1'); thisNg.delNode2 = $(this).attr('data-node2'); + thisNg.delVersion = $(this).attr('data-version'); thisNg.delNetwork1 = $(this).attr('data-network'); thisNg.delNetwork2 = $(this).attr('data-cloudnetwork'); thisNg.delcloudUrl = $(this).attr('data-url'); thisNg.delLinkname = $(this).attr('data-link'); thisNg.aaiId = $(this).attr('data-aaiid'); - thisNg.getCloudUrl(thisNg.aaiId, thisNg); - thisNg.getExtAAIIdVersion(thisNg.aaiId, thisNg); }); } @@ -239,7 +238,6 @@ export class CcvpnNetworkComponent implements OnInit { this.chose(textval); } console.log(this.logicalLinks); - console.log(this.dataCloudLink); if (this.dataCloudLink.length > 0) { this.getcloudLine(this.dataCloudLink); } @@ -585,12 +583,17 @@ export class CcvpnNetworkComponent implements OnInit { textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId textval[7] = this.dataCloud[0]['networkId']; console.log(this.dataCloud); - console.log(textval); let dataD3 = this.d3Data; + let arr=[ + textval[0], + textval[1] + ]; for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to - if (dataD3[p]['name'] == textval[0]) { - textval[8] = dataD3[p]['source']['name'];//network1 + for (let pp= 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to + if (dataD3[p]['name'] == arr[pp]) { + textval[8] = dataD3[p]['source']['name'];//network1 } + } } textval[9] = dataCloudLink[0]['link-name']; let lines_json = {}; @@ -601,18 +604,18 @@ export class CcvpnNetworkComponent implements OnInit { } else { width = 800; } + console.log("shuchu01dataCloudLink"+dataCloudLink[0]); + console.log("shuchutextval"+textval); for (let i = 0; i < $(".node").length; i++) { if ($('.node').eq(i).find('text').html() == textval[8]) { //Get the x, y coordinates of the second level var translates = $('.node').eq(i).css('transform'); - console.log("shuchu:translates"+translates); lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); lines_json['x2'] = width - 100; lines_json['y2'] = 100; } } - console.log("shuchu:x1,y1"+lines_json["x1"],lines_json["y1"]); var x1 = lines_json['x1']; var y1 = lines_json['y1']; var x2 = lines_json['x2']; @@ -644,24 +647,32 @@ export class CcvpnNetworkComponent implements OnInit { 'data-link': textval[9], }); svg.html(svg.html()); + this.getCloudUrl(textval[6]); + this.getExtAAIIdVersion(textval[6]); } //Query external cloud host url address - getCloudUrl(aaiId, thisNg) { + getCloudUrl(aaiId) { this.myhttp.queryCloudUrl(aaiId) .subscribe((data) => { - thisNg.delcloudUrl = data['service-url']; + this.delcloudUrl = data['service-url']; + $('.cloudline').attr({ + 'data-url': data['service-url'] + }); }, (err) => { console.log(err); }); } //Query external cloud ext-aai-id resource-version - getExtAAIIdVersion(aaiId, thisNg){ + getExtAAIIdVersion(aaiId){ this.myhttp.queryExtAAIIdVersion(aaiId) .subscribe((data) => { - thisNg.delVersion = data["resource-version"]; + this.delVersion = data["resource-version"]; + $('.cloudline').attr({ + 'data-version':data["resource-version"], + }); }, (err) => { console.log(err); }); @@ -915,7 +926,7 @@ export class CcvpnNetworkComponent implements OnInit { } //After creating an external cloud connection, query the connection immediately - queryOutCloudLink() { + queryOutCloudLink(time) { let networkVal1 = this.networkVal1, selectedNode1 = this.selectedNode1, selecteTpName1 = this.selecteTpName1, @@ -929,13 +940,12 @@ export class CcvpnNetworkComponent implements OnInit { }; this.myhttp.querySpecificLinkInfo(params) .subscribe((data) => { - let version = data['resource-version']; let status = data['operational-status']; let link_name = data['link-name']; this.outCloudShow = true; this.hideForm(); this.outCloud(this.imgmap); - setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name), 0); + setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name,time), 0); }, (err) => { console.log(err); }); @@ -964,7 +974,7 @@ export class CcvpnNetworkComponent implements OnInit { } //Add external cloud connection - cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version, status, link_name) { + cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name,time) { let lines_json = {}; var _this = this, width; @@ -973,10 +983,12 @@ export class CcvpnNetworkComponent implements OnInit { } else { width = 800; } + console.log("shuchuNetworkVal1:"+networkVal1); for (let i = 0; i < $(".node").length; i++) { if ($('.node').eq(i).find('text').html() == networkVal1) { //Get the x, y coordinates of the second level var translates = $('.node').eq(i).css('transform'); + console.log("shuchuTranslates:"+translates); lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); lines_json['x2'] = width - 100; @@ -1004,21 +1016,22 @@ export class CcvpnNetworkComponent implements OnInit { y2: y2, 'data-tp1': selecteTpName1, 'data-tp2': cloudTp, - 'data-version': version, 'data-node1': selectedNode1, 'data-node2': cloudNode, 'data-network': networkVal1, 'data-cloudnetwork': cloudNetWork, 'data-url': cloudUrl, + 'data-aaiid':time, 'data-link': link_name }); svg.html(svg.html()); + this.getExtAAIIdVersion(time); } //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls createCloudNetwork(time) { let _thiss = this; - + console.log("shuchuCloudNetwork:"+time); let params= { "-xmlns": "http://org.onap.aai.inventory/v13", "network-id":this.cloudNetwork, @@ -1046,6 +1059,7 @@ export class CcvpnNetworkComponent implements OnInit { } createPnfs(time) { + console.log("shuchupnf:"+time); let _thiss = this; let params= { "-xmlns": "http://org.onap.aai.inventory/v13", @@ -1087,6 +1101,7 @@ export class CcvpnNetworkComponent implements OnInit { } createCloudTp(time) { + console.log("shuchuTp:"+time); let _thiss = this; let params= { "-xmlns": "http://org.onap.aai.inventory/v13", @@ -1117,6 +1132,7 @@ export class CcvpnNetworkComponent implements OnInit { createCloudLinks(time) { let _thiss = this; + console.log("shuchuCloudLinks:"+time); let params={ "-xmlns": "http://org.onap.aai.inventory/v13", "link-name": this.linkName, @@ -1146,7 +1162,7 @@ export class CcvpnNetworkComponent implements OnInit { .subscribe((data) => { // resolve(data['status']); if(data["status"]=="SUCCESS"){ - _thiss.queryOutCloudLink(); + _thiss.queryOutCloudLink(time); } }, (err) => { // reject(err); @@ -1159,6 +1175,7 @@ export class CcvpnNetworkComponent implements OnInit { createCloudUrls(time) { let _thiss = this; console.log(this.cloudNetwork); + console.log("shuchuUrls:"+time); let params={ "-xmlns": "http://org.onap.aai.inventory/v13", "aai-id":time, @@ -1171,7 +1188,7 @@ export class CcvpnNetworkComponent implements OnInit { } }; console.log(time); - console.log(params["ext-aai-network"]["aai-id"]); + console.log(params["aai-id"]); // var pro = new Promise(function (resolve, reject) { //Do some asynchronous operations _thiss.myhttp.createCloudUrl(params) @@ -1235,13 +1252,14 @@ export class CcvpnNetworkComponent implements OnInit { "aaiId": aaiId, "version": version, }; - this.myhttp.deleteLink(params) + this.myhttp.deleteCloudLink(params) .subscribe((data) => { console.log(data); if (data['status'] == 'SUCCESS') { console.log('delete'); this.delLine(deltp1, deltp2); $('.cloudline').remove(); + $('#out').remove(); } }, (err) => { console.log(err); diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts index 3cbc12ae..8fc9fb60 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts @@ -164,7 +164,7 @@ export class E2eCreationComponent implements OnInit { let location = { vnfProfileId: input.name, locationConstraints:{ - vimId:input.value.id + vimId: input.value.name + "_" + input.value.id, } } nsService.parameters.locationConstraints.push(location); diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts index fda6d0f8..4d28d220 100644 --- a/usecaseui-portal/src/app/myhttp.service.ts +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -90,7 +90,7 @@ export class MyhttpService { ns_healService: this.baseUrl + "/uui-lcm/healNetworkServiceInstance?ns_instance_id=", vnfInfo: this.baseUrl + "/uui-lcm/VnfInfo/", progress: this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/", - nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=", + nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=0&serviceInstanceId=", e2eScale: this.baseUrl + "/services/scaleServices/", e2e_nsdata: this.baseUrl + "/getServiceInstanceById/customerId/", @@ -216,7 +216,7 @@ export class MyhttpService { } getVnfInfo(id) { - return this.http.get<any>(this.url.vnfInfo + id) + return this.http.get<any>(this.url.vnfInfo + id); } healNsService(id, requestBody) { // return this.http.get<any>(this.url.ns_healService); //Local simulation @@ -238,8 +238,8 @@ export class MyhttpService { let url = this.url.progress.replace("*_*", obj.serviceId) + obj.operationId; return this.http.get<any>(url); } - getNsProgress(jobid, responseId) { - let url = this.url.nsProgress.replace("*_*", jobid) + responseId; + getNsProgress(jobid,serviceId){ + let url = this.url.nsProgress.replace("*_*",jobid) + serviceId; return this.http.get<any>(url); } diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts index 83ae6394..6ab1e282 100644 --- a/usecaseui-portal/src/app/onboard.service.ts +++ b/usecaseui-portal/src/app/onboard.service.ts @@ -73,8 +73,12 @@ export class onboardService { // Delete Vnf vfc package deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=", // Delete Pnf package - deletePnfPack: this.baseUrl + "deletePnfPackage?pnfPkgId=", - + deletePnfPack: this.baseUrl + "deletePnfPackage?pnfdInfoId=", + + //进度接口 + progress: this.baseUrl + "jobs/" + "_jobId" + "?responseId=" + + // // download ns package // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX", // //download vnf package @@ -122,13 +126,18 @@ export class onboardService { //------------------------------------------------------------------------------ //onboard sdc ns getNsonboard(requestBody) { - return this.http.get<any>(this.url["onboardNs"], requestBody); + return this.http.post<any>(this.url["onboardNs"], requestBody); } //onboard sdc vnf getVnfonboard(requestBody) { - return this.http.get<any>(this.url["onboardVNF"], requestBody); + return this.http.post<any>(this.url["onboardVNF"], requestBody); } + //onboard progress + getProgress(jobid, responseId) { + let url = this.url.progress.replace("_jobId", jobid) + responseId; + return this.http.get<any>(url); + } //-------------------------------------------------------------------------- // Delete ns vfc package deleteNsIdData(paramsObj) { @@ -150,7 +159,7 @@ export class onboardService { //Local test // return this.http.get<any>(this.url.deletePnfPack); //online test - return this.http.delete<any>(this.url["deletePnfpack"] + paramsObj); + return this.http.delete<any>(this.url.deletePnfPack + paramsObj); } //---------------------------------Function-end------------------------------------------- diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css index f6a13fd0..e5044935 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -57,4 +57,8 @@ hr { .list nz-table tbody td i.anticon:hover { color: #147dc2; } - +.list nz-table tbody td .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html index 105f399f..09281d4b 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -29,45 +29,61 @@ style="margin-top: 16px"> {{ nsuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td *ngIf="item.id">{{item.id}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex' + [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="15%">Operational State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td *ngIf="item.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> - <td *ngIf="item.nsdName">{{item.nsdName}}</td> - <td *ngIf="item.nsdName === null">无</td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> - <td *ngIf="item.nsdVersion === null">无</td> - <td *ngIf="item.version">{{ item.version }}</td> - <td> - <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> - <span *ngIf="item.nsdOnboardingState === null">无</span> - <span *ngIf="item.uuid" data_id="i">{{status}}</span> - </td> - <td>{{item.nsdOperationalState}}</td> - <td>{{item.nsdUsageState}}</td> - <td> - <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - </td> - </tr> - </tbody> - </nz-table> + <td *ngIf="item.nsdName">{{item.nsdName}}</td> + <td *ngIf="item.nsdName === null || item.nsdName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.name===null || item.name=== ''"> </td> + <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> + <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td *ngIf="item.version === null || item.version === ''"> </td> + <td> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''"> </span> + <span *ngIf="item.uuid">{{status}}</span> + + <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding', + 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating', + 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> + <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> --> + </td> + <td>{{item.nsdOperationalState}}</td> + <td>{{item.nsdUsageState}}</td> + <td> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)" *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + <!-- <div style="margin-top:8px;"> + Loading state： + <nz-switch [(ngModel)]="isSpinning"></nz-switch> + </div> --> + </div> <!-- VNFList --> <div class="list" *ngIf="tab === 'VNF'"> @@ -77,46 +93,51 @@ <i nz-icon type="inbox" class="anticon anticon-inbox"></i> </p> <p class="ant-upload-text">Click or drag file to this area to upload</p> - <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> + <p class="ant-upload-hint"></p> </nz-upload> <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" style="margin-top: 16px"> {{ vnfuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td *ngIf="item.id">{{item.id}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> - <td *ngIf="item.vnfProductName === null">无</td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> - <td *ngIf="item.vnfdVersion === null">无</td> - <td *ngIf="item.version">{{item.version}}</td> - <td>{{item.onboardingState}}</td> - <td>{{item.usageState}}</td> - <td>{{item.operationalState}}</td> - <td> - <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex' + [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="15%">Operational State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td *ngIf="item.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> + <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> + <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td>{{item.onboardingState}}</td> + <td>{{item.usageState}}</td> + <td>{{item.operationalState}}</td> + <td> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" *ngIf="item.uuid"></i> <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - </td> - </tr> - </tbody> - </nz-table> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + </div> <!-- PNFList --> <div class="list" *ngIf="tab === 'PNF'"> @@ -126,38 +147,42 @@ <i nz-icon type="inbox" class="anticon anticon-inbox"></i> </p> <p class="ant-upload-text">Click or drag file to this area to upload</p> - <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> + <p class="ant-upload-hint"></p> </nz-upload> <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" style="margin-top: 16px"> {{ pnfuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td>{{item.id}}</td> - <td>{{item.pnfdName}}</td> - <td>{{item.pnfdVersion}}</td> - <td>{{item.pnfdOnboardingState}}</td> - <td>{{item.pnfdUsageState}}</td> - <td> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> - </td> - </tr> - </tbody> - </nz-table> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex' + [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{item.id}}</td> + <td>{{item.pnfdName}}</td> + <td>{{item.pnfdVersion}}</td> + <td>{{item.pnfdOnboardingState}}</td> + <td>{{item.pnfdUsageState}}</td> + <td> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + </div> </nz-tab> </nz-tabset> diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index 099383a2..f5534619 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -76,7 +76,22 @@ hr { color: #147dc2; } } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } } } } +} +.mask { + top: 0; + left: 0; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.1; + background: black; + z-index: 1049; }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts index 4e57fc64..c60ac041 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -6,6 +6,8 @@ import { slideToRight } from '../../animates'; import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; import { filter } from 'rxjs/operators'; import { Title } from '@angular/platform-browser'; +import * as $ from 'jquery'; + @Component({ selector: 'app-onboard-vnf-vm', @@ -30,11 +32,11 @@ export class OnboardVnfVmComponent implements OnInit { fileListPNF: UploadFile[] = []; // onboard initial value status = "Onboard Available"; - + jobId = ''; //url url = { // line up - ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content', + ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content', vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content', pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content' // 本地 @@ -50,9 +52,14 @@ export class OnboardVnfVmComponent implements OnInit { } //表格数据 - tableData:any; - sdcData:any; - vfcData:any; + nstableData:any; + vnftableData:any; + pnftableData:any; + nssdcData:any; + nsvfcData:any; + + vnfsdcData:any; + vnfvfcData:any; nspageIndex = 1; nspageSize = 10; vnfpageIndex = 1; @@ -64,7 +71,7 @@ export class OnboardVnfVmComponent implements OnInit { sortName = null; sortValue = null; tabs = ['NS', 'VNF', 'PNF']; - + isSpinning = false; isVisible = false; isOkLoading = false; showModal(): void { @@ -85,12 +92,15 @@ export class OnboardVnfVmComponent implements OnInit { console.log(this.url); switch (tab) { case 'NS': + this.nstableData = []; this.getTableData(); break case 'VNF': + this.vnftableData = []; this.getTableVnfData() break case 'PNF': + this.pnftableData = []; this.getTablePnfData() break } @@ -146,7 +156,7 @@ export class OnboardVnfVmComponent implements OnInit { beforeUploadPNF = (file: UploadFile): boolean => { this.fileListPNF.push(file); console.log('beforeUpload'); - console.log('fileListPNF--->' + this.fileListPNF); + console.log('fileListPNF--->' + JSON.stringify(this.fileListPNF)); this.myhttp.getCreatensData("createPnfData",this.requestBody) //on-line // this.myhttp.getCreatensData("creatensDataPNF") //local .subscribe((data) => { @@ -190,19 +200,19 @@ export class OnboardVnfVmComponent implements OnInit { switch(tab) { case "NS": this.fileListNS.forEach((file: any) => { - formData.append('files[]', file); + formData.append('file', file); }); this.nsuploading = true; break case "VNF": this.fileListVNF.forEach((file: any) => { - formData.append('files[]', file); + formData.append('file', file); }); this.vnfuploading = true; break case "PNF": this.fileListPNF.forEach((file: any) => { - formData.append('files[]', file); + formData.append('file', file); }); this.pnfloading = true; break @@ -255,128 +265,241 @@ changeUploadingSta(tab) { // 获取NS列表 getTableData() { - //vfc + this.isSpinning = true; + //ns vfc lists this.myhttp.getOnboardTableData() .subscribe((data) => { - console.log(data) - this.vfcData = data; - console.log(typeof this.vfcData) - console.log("NSlist-vfc-->",data) - }, (err) => { + console.log("NSlist-vfc-->",data); + console.log("NSlist-length-vfc-->",data.length); + this.nsvfcData = data; + this.nstableData = this.nsvfcData; + //ns sdc list + this.myhttp.getSDC_NSTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + console.log('NSlist-sdc-->',data); + console.log("NSlist-length-vfc-->",data.length); + this.nssdcData = data; + if (this.nsvfcData.length != 0 && this.nssdcData.length != 0){ + this.nstableData = this.MergeArray(this.nsvfcData, this.nssdcData) //Array deduplication + }else if(this.nsvfcData.length === 0 && this.nssdcData.length != 0){ + this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat + }else if(this.nsvfcData.length != 0 && this.nssdcData.length === 0){ + this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat + } + }, (err) => { console.log(err); - }) - // sdc - this.myhttp.getSDC_NSTableData() - .subscribe((data) => { - console.log('NSlist-sdc-->',data) - this.sdcData = data; - this.tableData = this.MergeArray(this.vfcData, this.sdcData) + }) + }, (err) => { - console.log(err); - }) + console.log(err); + }) + } // 获取vnf列表 getTableVnfData() { + this.isSpinning = true; + //vnf vfc lists this.myhttp.getOnboardTableVnfData() .subscribe((data) => { - console.log("vnfList-->", data); - this.vfcData = data; - console.log("vnfList-vfc-->",data) - }, (err) => { - console.log(err); - }) + console.log("vnfList--vnf>", data); + console.log("vnfList--vnf>", data.length); + this.vnfvfcData = data; + this.vnftableData = this.vnfvfcData; + //vnf sdc lists + this.myhttp.getSDC_VNFTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + console.log('vnfList-sdc-->', data) + console.log('vnfList-sdc-->', data.length) + this.vnfsdcData = data; + if (this.vnfvfcData.length != 0 && this.vnfsdcData.length != 0){ + this.vnftableData = this.MergeArray(this.vnfvfcData, this.vnfsdcData) //Array deduplication + }else if(this.vnfvfcData.length === 0 && this.vnfsdcData.length != 0){ + this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat + }else if(this.vnfvfcData.length != 0 && this.vnfsdcData.length === 0){ + this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat + console.log(this.vnftableData); + } + }, (err) => { + console.log(err); + }) - // sdc - this.myhttp.getSDC_VNFTableData() - .subscribe((data) => { - console.log('vnfList-sdc-->', data) - this.sdcData = data; - this.tableData = this.MergeArray(this.vfcData, this.sdcData) }, (err) => { console.log(err); }) } // 获取pnf列表 - getTablePnfData() { + getTablePnfData() { + this.isSpinning = true; this.myhttp.getOnboardTablePnfData() .subscribe((data) => { console.log("pnfList-->", data); - this.total = data["body"]; - this.tableData = data; + console.log("pnfList-->", data.length); + this.pnftableData = data; + this.isSpinning = false; //loading hide }, (err) => { console.log(err); }) } - /* onboard 上传按钮 */ - // ns onboard - - success(): void { + //合并并去重 + MergeArray(arr1, arr2) { + var _arr = new Array(); + for (var i = 0; i < arr1.length; i++) { + if (arr1[i] != "") { + _arr.push(arr1[i]); + } + } + for (var i = 0; i < arr2.length; i++) { + var flag = true; + for (var j = 0; j < arr1.length; j++) { + // 根据vfc列表arr1的id和sdc列表arr2的uuid去重 + if (arr2[i].uuid == arr1[j].id) { + flag = false; + break; + } + } + if (flag && arr2[i] != "") { + _arr.push(arr2[i]); + } + } + return _arr; + } + +//----------------------------------------------------------------------------------- + /* onboard */ + //成功弹框 + success(tab): void { const modal = this.modalService.success({ nzTitle: 'This is an success message', nzContent: 'Package Onboard Completed.' }); - - window.setTimeout(() => modal.destroy(), 2000); + switch(tab) { + case "NS": + console.log("NS成功弹框") + this.getTableData(); + break + case "VNF": + console.log("VNF成功弹框") + this.getTableVnfData(); + break + } + // window.setTimeout(() => modal.destroy(), 5000); } + //失败弹框 error(): void { this.modalService.error({ nzTitle: 'This is an error message', nzContent: 'Package Onboard Failed!' }); } - updataNsService(id) { - console.log(id); + + //onboard status + onboardData ={ + status:"onboard", + progress: 0, + } + currentIndex = 0; + + // ns onboard 上传按钮 + updataNsService(id,index) { + this.currentIndex = index; + this.onboardData.status = "onboarding"; + this.onboardData.progress = 0; + console.log("NS-onboard-id-->" + id); let requestBody = { "csarId": id } this.myhttp.getNsonboard(requestBody) .subscribe((data) => { - console.log('onboard ns sdc', data); - if(data["status"] == 200) { - this.success(); - - } else { + console.log('onboard ns sdc-->', data); + if(data.status == "failed"){ + console.log("Package Onboard Failed") + this.onboardData.status = "Failed"; this.error(); + return false + }else if(data.status == "success"){ + this.success("NS"); + this.onboardData.status = "onboarded"; } - this.getTableData(); }, (err) => { console.log(err); }) } - // vnf onboard - updataVnfService(id) { - this.status = "Onboarding"; - console.log(id) + // vnf onboard 上传按钮 + updataVnfService(id,index) { + this.currentIndex = index; + this.onboardData.status = "onboarding"; //按钮置灰 + this.onboardData.progress = 0; + + console.log("VNF-onboard-id-->" + id) let requestBody = { "csarId": id } - this.myhttp.getVnfonboard(requestBody) - .subscribe((data) => { - console.log('onboard vnf sdc', data); - if(data["status"] == "200"){ - this.success(); - }else { - this.error(); - } - }, (err) => { - console.log(err); - }) + this.myhttp.getVnfonboard(requestBody) + .subscribe((data) => { + console.log('onboard vnf sdc-->', data); + this.jobId = data.jobId; + console.log('onboard vnf sdc jobId-->'+ data.jobId); + this.queryProgress(this.jobId,0); //vnf需要查询进度接口 + }, (err) => { + console.log(err); + }) } - // pnf onboard ? - updataPnfService(id) { - console.log('pnf',id); - } + // pnf onboard //暂时没有上传功能 + // updataPnfService(id) { + // console.log('pnf',id); + // } + //Progress 进度查询 + queryProgress(jobId,responseId){ + let mypromise = new Promise((res)=>{ + this.myhttp.getProgress(jobId,responseId) + .subscribe((data)=>{ + console.log("progressData-->"); + console.log(data); + if(data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null){ + console.log("progress == undefined"); + this.onboardData.status = "onboarding"; + setTimeout(()=>{ + this.queryProgress(this.jobId,0); + },10000) + return false + } + if(data.responseDescriptor.progress > 100){ + console.log("progress-->",data.responseDescriptor.progress) + console.log("Package Onboard Failed") + this.onboardData.status = "Failed"; + this.error(); + return false + } + if(data.responseDescriptor.progress < 100){ + this.onboardData.status = "onboarding"; + console.log("progress < 100") + setTimeout(()=>{ + this.queryProgress(this.jobId,0); + },5000) + }else if(data.responseDescriptor.progress == 100){ + res(data); + console.log("progress == 100"); + console.log(data); + this.success("VNF"); + this.onboardData.status = "onboarded"; + } + return false + }) + }) + return mypromise; + } //-------------------------------------------------------------------------------- /* delete 删除按钮 */ - // ns showConfirm(index,pkgid,tab): void { this.confirmModal = this.modal.confirm({ nzTitle: 'Do you Want to delete these items?', @@ -387,22 +510,21 @@ changeUploadingSta(tab) { switch (tab) { case 'NS': this.deleteNsService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break case 'VNF': this.deleteVnfService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break case 'PNF': this.deletePnfService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break } }).catch(() => console.log('Oops errors!')) }); } - /* delete 删除按钮 */ //delete nsItem deleteNsService(index,pkgid) { console.log(pkgid) @@ -410,13 +532,11 @@ changeUploadingSta(tab) { this.myhttp.deleteNsIdData(pkgid) .subscribe((data) => { console.log("nsdel--->", data); + //refresh list after successful deletion + this.getTableData(); }, (err) => { console.log(err); }) - console.log(index) - this.tableData.splice(index, 1) - console.log('tableData.length NS--->',this.tableData.length) - this.getTableData() } //delete vnfItem @@ -426,13 +546,11 @@ changeUploadingSta(tab) { this.myhttp.deleteVnfIdData(pkgid) .subscribe((data) => { console.log('vnfdel--->', data); + //refresh list after successful deletion + this.getTableVnfData() }, (err) => { console.log(err); }) - console.log(index) - this.tableData.splice(index, 1) - console.log('tableData.length VNF--->'+ this.tableData.length) - this.getTableVnfData() } //delete PnfItem @@ -442,15 +560,14 @@ changeUploadingSta(tab) { this.myhttp.deletePnfIdData(pkgid) .subscribe((data) => { console.log('pnfdel--->', data); + //refresh list after successful deletion + this.getTablePnfData() }, (err) => { console.log(err); }) - console.log(index) - this.tableData.splice(index, 1) - console.log('tableData.length PNF--->'+this.tableData.length) - this.getTablePnfData() } +//------------------------------------------------------------------------------------ //下载download // downloadNsService(id) { // console.log('download') @@ -484,27 +601,4 @@ changeUploadingSta(tab) { // }) // } - //合并并去重 - MergeArray(arr1, arr2) { - var _arr = new Array(); - for (var i = 0; i < arr1.length; i++) { - if (arr1[i] != "") { - _arr.push(arr1[i]); - } - } - for (var i = 0; i < arr2.length; i++) { - var flag = true; - for (var j = 0; j < arr1.length; j++) { - // 根据vfc列表arr1的id和sdc列表arr2的uuid去重 - if (arr2[i].uuid == arr1[j].id) { - flag = false; - break; - } - } - if (flag && arr2[i] != "") { - _arr.push(arr2[i]); - } - } - return _arr; - } } 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 fa875c0f..e652ff68 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 @@ -116,16 +116,17 @@ <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding', 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating', 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> - <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> + <nz-progress *ngIf="data.status == 'processing' || data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> </td> <td> - <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}" + <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}" *ngIf="data.serviceDomain=='E2E Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i> <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> --> - <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" - *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> - <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i> - <i [ngClass]="{'cannotclick':data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'||data.status=='Scaling'}" class="anticon anticon-delete" (click)="deleteModel(data)"></i> + <!-- <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" + *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> --> + <i [ngClass]="{'cannotclick':data.status == 'error'||data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Scaling'}" + *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i> + <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'||data.status=='Scaling'}" class="anticon anticon-delete" (click)="deleteModel(data)"></i> </td> </tr> <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances"> 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 4e0770a3..24bb45c8 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 @@ -137,7 +137,7 @@ export class ServicesListComponent implements OnInit { } handleCancel(): void { - console.log('Button cancel clicked!'); + // console.log('Button cancel clicked!'); this.isVisible = false; } @@ -168,6 +168,7 @@ export class ServicesListComponent implements OnInit { if(typeof item["childServiceInstances"] == "string"){ item["childServiceInstances"] = JSON.parse(item["childServiceInstances"]); } + item["childServiceInstances"] = item["childServiceInstances"].map((child)=>{ if(typeof child == "string"){ return JSON.parse(child); @@ -175,11 +176,63 @@ export class ServicesListComponent implements OnInit { return child; } }) + if(item["serviceDomain"]=="Network Service"){ - item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{ - vnf["serviceDomain"] = "vnf"; - return vnf; - }); + if(item["vnfInfo"]){ + item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{ + vnf["serviceDomain"] = "vnf"; + return vnf; + }); + }else if(item["relationship-list"] && item["relationship-list"]["relationship"]){ + item["childServiceInstances"] = item["relationship-list"]["relationship"].filter((relate)=>{ + return relate["related-to"]=="generic-vnf"; + }).map((vnf)=>{ + let vnfInfo = {vnfNsInstanceId:"",vnfInstanceId:"",vnfInstanceName:"",serviceDomain:"vnf"}; + vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"]; + vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid)=>{ return vnfid["relationship-key"]=="generic-vnf.vnf-id"})["relationship-value"]; + vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname)=>{ return vnfname["property-key"]=="generic-vnf.vnf-name"})["property-value"]; + return vnfInfo; + }) + } + } + + if(item["serviceStatus"]=="finished"){ + item["status"] = "Active"; + }else if(item["serviceStatus"]=="error"){ + item["status"] = "error"; + }else if(item["serviceStatus"]=="processing"){ + item["status"] = "processing"; + item["rate"] = 0; + if(item["serviceDomain"]=="Network Service"){ + let updata = (prodata)=>{ + item["rate"] = prodata.progress || item["rate"]; + // >100 err + if(item["rate"] > 100){ + item["status"]=prodata.status; + } + } + let id = item["nsInstanceId"] || item["service-instance-id"]; + let jobid = item["jobId"] || item["operationId"]; + this.queryNsProgress(jobid,id,updata).then(()=>{ + item["rate"] = 100; + item["status"] = "completed"; + }) + }else{ + let updata = (prodata)=>{ + item["rate"] = prodata.progress || item["rate"]; + if(item["rate"] > 100){ + item["status"]=prodata.status; + } + } + let obj = { + serviceId:item["service-instance-id"], + operationId:item["operationId"] + } + this.queryProgress(obj,updata).then(()=>{ + item["rate"] = 100; + item["status"] = "completed"; + }) + } } return item; }) @@ -385,7 +438,10 @@ export class ServicesListComponent implements OnInit { } this.tableData = [newData,...this.tableData]; let updata = (prodata)=>{ - newData.rate = Math.floor(prodata.progress/3); + newData.rate = Math.floor(prodata.progress/3); + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; return this.queryProgress(queryParams,updata); @@ -407,6 +463,9 @@ export class ServicesListComponent implements OnInit { allprogress[prodata.operationId] = prodata.progress; let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) newData.rate = Math.floor(average/3) + stageNum; + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; querypros.push(this.queryProgress(queryParams,updata)) @@ -438,6 +497,9 @@ export class ServicesListComponent implements OnInit { allprogress[prodata.operationId] = prodata.progress; let average =((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) newData.rate = Math.floor(average/3) + stageNum; + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; querypros.push(this.queryProgress(queryParams,updata)) @@ -479,7 +541,7 @@ export class ServicesListComponent implements OnInit { console.log(data); newData = { // 'service-instance-id':data["serviceId"], - 'service-instance-name':obj.name, + 'service-instance-name':obj.service.name, serviceDomain:this.templateTypeSelected, childServiceInstances:[], status:"Creating", @@ -489,6 +551,9 @@ export class ServicesListComponent implements OnInit { this.tableData = [newData,...this.tableData]; let updata = (prodata)=>{ newData.rate = prodata.progress; + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; return this.queryProgress(queryParams,updata); @@ -520,10 +585,6 @@ export class ServicesListComponent implements OnInit { this.myhttp.nsCreateInstance(obj.step1) .subscribe((data)=>{ // console.log(data); - if(data.status == "FAILED"){ - console.log("create ns service failed :" + JSON.stringify(data)); - return false; - } newData = { // 'service-instance-id':data.nsInstanceId, 'service-instance-name':obj.step1.nsName, @@ -533,6 +594,11 @@ export class ServicesListComponent implements OnInit { rate:0, } this.tableData = [newData,...this.tableData]; + if(data.status == "FAILED"){ + console.log("create ns service failed :" + JSON.stringify(data)); + newData.status = "failed"; + return false; + } let createParams = "?ns_instance_id=" + data.nsInstanceId + "&customerId="+this.customerSelected.id + "&serviceType="+this.serviceTypeSelected.name + @@ -540,12 +606,18 @@ export class ServicesListComponent implements OnInit { "&parentServiceInstanceId="; // step2 this.createNsService(createParams,obj.step2).then((jobid)=>{ - + if(jobid == "failed"){ + newData.status = "failed"; + return false; + } let updata = (prodata)=>{ - newData.rate = prodata.responseDescriptor.progress; + newData.rate = prodata.progress; + if(newData["rate"] > 100){ + newData["status"]=prodata.status; + } } - return this.queryNsProgress(jobid,updata); + return this.queryNsProgress(jobid,newData["service-instance-id"],updata); }).then((data)=>{ console.log(data); newData.rate = 100; @@ -581,6 +653,7 @@ export class ServicesListComponent implements OnInit { .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("instantiate ns service failed :" + JSON.stringify(data)); + res("failed"); return false; } res(data.jobId); @@ -597,6 +670,7 @@ export class ServicesListComponent implements OnInit { .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("scale E2e service failed :" + JSON.stringify(data)); + service.status = "failed"; return false; } let obj = { @@ -605,10 +679,13 @@ export class ServicesListComponent implements OnInit { } let updata = (prodata)=>{ service.rate = prodata.progress; + if(service["rate"] > 100){ + service["status"]=prodata.status; + } } this.queryProgress(obj,updata).then(()=>{ service.rate = 100; - service.status = "Active"; + service.status = "completed"; }) }) } @@ -617,20 +694,25 @@ export class ServicesListComponent implements OnInit { console.log(service); service.rate = 0; service.status = "Healing"; - this.myhttp.healNsService(service.nsInstanceId,requestBody) + let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"]; + this.myhttp.healNsService(id,requestBody) .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("heal nsvnf service failed :" + JSON.stringify(data)); + service.status = "failed"; return false; } let jobid = data.jobId; let updata = (prodata)=>{ - service.rate = prodata.responseDescriptor.progress; + service.rate = prodata.progress; + if(service["rate"] > 100){ + service["status"]=prodata.status; + } } - this.queryNsProgress(jobid,updata).then((data1)=>{ + this.queryNsProgress(jobid,null,updata).then((data1)=>{ console.log(data1); service.rate = 100; - service.status = "Active"; + service.status = "completed"; }); }) } @@ -653,6 +735,7 @@ export class ServicesListComponent implements OnInit { .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("delete service failed :" + JSON.stringify(data)); + service.status = "failed"; return false; } let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId} @@ -660,6 +743,9 @@ export class ServicesListComponent implements OnInit { allprogress[prodata.operationId] = prodata.progress; let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); service["rate"]=average; + if(service["rate"] > 100){ + service["status"]=prodata.status; + } } querypros.push(this.queryProgress(obj,updata)); res(); @@ -686,26 +772,34 @@ export class ServicesListComponent implements OnInit { deleteNsService(service){ service.rate = 0; service.status = "Deleting"; - let id = service.nsInstanceId; + let id = service.nsInstanceId || service["service-instance-id"]; let requestBody = { terminationType : this.terminationType, gracefulTerminationTimeout : this.gracefulTerminationTimeout } this.stopNsService(id,requestBody).then((jobid)=>{ + if(jobid == "failed"){ + service.status = "failed"; + return false; + } let updata = (prodata)=>{ - service.rate = prodata.responseDescriptor.progress; + service.rate = prodata.progress; + if(service["rate"] > 100){ + service["status"]=prodata.status; + } } - return this.queryNsProgress(jobid,updata); + return this.queryNsProgress(jobid,null,updata); }).then(()=>{ this.myhttp.nsDeleteInstance(id) .subscribe((data)=>{ // console.log(data); + service.rate = 100; + service.status = "completed"; if(data.status == "FAILED"){ console.log("delete ns service failed :" + JSON.stringify(data)); + service.status = "failed"; return false; } - service.rate = 100; - service.status = "completed"; let hasUndone = this.tableData.some((item)=>{ return item.rate < 100; }) @@ -724,6 +818,7 @@ export class ServicesListComponent implements OnInit { .subscribe((data)=>{ if(data.status == "FAILED"){ console.log("stop ns service failed :" + JSON.stringify(data)); + res("failed"); return false; } res(data.jobId); @@ -746,14 +841,28 @@ export class ServicesListComponent implements OnInit { // "finishedAt": "" // } // } + let errorNums = 180; let requery = ()=>{ this.myhttp.getProgress(obj) .subscribe((data)=>{ - if(data.operationStatus.progress==undefined){ - console.log(data); + if(data.status == "FAILED"){ + callback({progress:255,status:"failed"}); + return false; + } + if(data.operationStatus == null || data.operationStatus.progress==undefined){ + // console.log(data); + errorNums--; + if(errorNums==0){ + callback({progress:255,status:"time over"}); + return false; + } setTimeout(()=>{ requery(); - },5000) + },10000) + return false; + } + if(data.operationStatus.progress > 100){ + callback({progress:255,status:"time over"}); return false; } if(data.operationStatus.progress < 100){ @@ -781,7 +890,7 @@ export class ServicesListComponent implements OnInit { }) return mypromise; } - queryNsProgress(jobid,callback){ + queryNsProgress(jobid,id,callback){ let mypromise = new Promise((res,rej)=>{ // let data = { // "jobId": "string", @@ -802,20 +911,34 @@ export class ServicesListComponent implements OnInit { // ] // } // } - let requery = (responseId)=>{ - this.myhttp.getNsProgress(jobid,responseId) + let errorNums = 180; + let requery = ()=>{ + this.myhttp.getNsProgress(jobid,id) .subscribe((data)=>{ - if(data.responseDescriptor.progress==undefined){ - console.log(data); + if(data.status == "FAILED"){ + callback({progress:255,status:"failed"}); + return false; + } + if(data.responseDescriptor == null || data.responseDescriptor.progress==undefined){ + // console.log(data); + errorNums--; + if(errorNums==0){ + callback({progress:255,status:"time over"}); + return false; + } setTimeout(()=>{ - requery(data.responseDescriptor.responseId); - },5000) + requery(); + },10000) + return false; + } + if(data.responseDescriptor.progress > 100){ + callback({progress:255,status:"time over"}); return false; } if(data.responseDescriptor.progress < 100){ - callback(data); + callback(data.responseDescriptor); setTimeout(()=>{ - requery(data.responseDescriptor.responseId); + requery(); },5000) }else { res(data); @@ -825,15 +948,15 @@ export class ServicesListComponent implements OnInit { // console.log(data.responseDescriptor.progress) // data.responseDescriptor.progress++; // if(data.responseDescriptor.progress<100){ - // callback(data); - // requery(data.responseDescriptor.responseId) + // callback(data.responseDescriptor); + // requery() // }else{ // callback(data); // res(data) // } // },100) } - requery(0); + requery(); }) return mypromise; } diff --git a/version.properties b/version.properties index 1f3ede11..a254b216 100644 --- a/version.properties +++ b/version.properties @@ -3,8 +3,8 @@ # because they are used in Jenkins, whose plug-in doesn't support major=1 -minor=2 -patch=2 +minor=3 +patch=0 base_version=${major}.${minor}.${patch} |