diff options
Diffstat (limited to 'usecaseui-portal/src/app/services/onboard-vnf-vm')
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html | 87 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts | 75 |
2 files changed, 51 insertions, 111 deletions
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 44b4adec..6a605bfa 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 @@ -13,26 +13,6 @@ See the License for the specific language governing permissions and limitations under the License. --> - -<!-- <button nz-button nzType="primary" (click)="showModal()"> - <i class="anticon anticon-plus-circle-o"></i><span> Create </span> -</button> -<nz-modal [(nzVisible)]="isVisible" nzTitle="Modal Title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" - [nzOkLoading]="isOkLoading"> - <p> - <input nz-input placeholder="请输入key" [(ngModel)]="value1"> - </p> - <p> - <input nz-input placeholder="请输入value" [(ngModel)]="value2"> - </p> -</nz-modal> --> - -<!-- <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> - <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab"> - Content of Tab Pane {{ tab }} - </nz-tab> -</nz-tabset> --> - <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, id, url)"> <!-- nsList --> @@ -52,16 +32,14 @@ <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' [nzLoading]="loading" nzSize="middle"> - <!-- (nzPageIndexChange)="searchNsData()" (nzPageSizeChange)="searchNsData(true)"--> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> - <th nzWidth="5%">NO</th> + <th nzWidth="15%">NO</th> <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <!-- <th nzWidth="20%">Type</th> --> - <th nzWidth="10%">Version</th> + <th nzWidth="15%">Version</th> <th nzWidth="15%">Onboarding State</th> - <th nzWidth="20%">Operational State</th> - <th nzWidth="20%">Usage State</th> + <th nzWidth="15%">Operational State</th> + <th nzWidth="10%">Usage State</th> <th nzWidth="15%">Operation button</th> </tr> </thead> @@ -71,26 +49,19 @@ <td *ngIf="item.uuid">{{item.uuid}}</td> <td *ngIf="item.nsdName">{{item.nsdName}}</td> + <td *ngIf="item.nsdName===''">无</td> <td *ngIf="item.name">{{item.name}}</td> - - <!-- <td>{{item.onboardingFailureDetails.type}}</td> --> <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> <td *ngIf="item.version">{{ item.version }}</td> <td> - <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> <span *ngIf="item.uuid" data_id="i">{{status}}</span> - <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> --> </td> <td>{{item.nsdOperationalState}}</td> <td>{{item.nsdUsageState}}</td> <td> - <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i> - <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> --> <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - <!-- (click)="deleteNsService(i,item.id)" --> - <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> - <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> --> </td> </tr> </tbody> @@ -113,22 +84,19 @@ <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' [nzLoading]="loading" nzSize="middle"> - <!-- (nzPageIndexChange)="searchVnfData()" (nzPageSizeChange)="searchVnfData(true)"--> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> - <th nzWidth="5%">NO</th> - <th nzWidth="10%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="10%">Version</th> - <th nzWidth="20%">Onboarding State</th> - <th nzWidth="15%">usageState</th> - <th nzWidth="20%">Operational State</th> - <th nzWidth="20%">Operation button</th> + <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> - <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> <tr *ngFor="let item of nzTable.data; let i = index; "> - <!-- <td>{{i+1}}</td> --> <td *ngIf="item.id">{{item.id}}</td> <td *ngIf="item.uuid">{{item.uuid}}</td> <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> @@ -138,20 +106,11 @@ <td>{{item.onboardingState}}</td> <td>{{item.usageState}}</td> <td>{{item.operationalState}}</td> - <!-- <td> - <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', - 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.operationalState}}</span> - <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> - </td> --> <td> - <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i> - <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> --> <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" id="{{ item.id}}" *ngIf="item.id"></i> - <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> </td> </tr> - <!-- </ng-template> --> </tbody> </nz-table> </div> @@ -172,39 +131,27 @@ <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' [nzLoading]="loading" nzSize="middle"> - <!-- (nzPageIndexChange)="searchPnfData()" (nzPageSizeChange)="searchPnfData(true)"--> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> - <th nzWidth="5%">NO</th> + <th nzWidth="15%">NO</th> <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> <th nzWidth="15%">Version</th> - <th nzWidth="20%">Onboarding State</th> - <th nzWidth="20%">usageState</th> - <th nzWidth="25%">Operation button</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> </tr> </thead> <tbody> - <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> <tr *ngFor="let item of nzTable.data; let i = index; "> - <!-- <td>{{i+1}}</td> --> <td>{{item.id}}</td> <td>{{item.pnfdName}}</td> <td>{{item.pnfdVersion}}</td> <td>{{item.pnfdOnboardingState}}</td> <td>{{item.pnfdUsageState}}</td> - <!-- <td> - <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', - 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span> - <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> - </td> --> <td> - <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> - <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> --> - <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> --> <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> </td> </tr> - <!-- </ng-template> --> </tbody> </nz-table> </div> 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 27d1c17c..5e5495e2 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 @@ -15,15 +15,7 @@ import { Title } from '@angular/platform-browser'; }) export class OnboardVnfVmComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; - //url - url = { - // ns: 'http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content', - // vnf: 'http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content', - // pnf: 'http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content' - ns: 'https://jsonplaceholder.typicode.com/posts/', - vnf: 'https://jsonplaceholder.typicode.com/posts/', - pnf: 'https://jsonplaceholder.typicode.com/posts/', - }; + // delete Modal confirmModal: NzModalRef; nsdInfoId = ''; @@ -38,6 +30,18 @@ export class OnboardVnfVmComponent implements OnInit { fileListPNF: UploadFile[] = []; // onboard initial value status = "Onboard Available"; + + //url + url = { + // line up + ns: 'http://172.30.3.100:30280/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content', + vnf: 'http://172.30.3.100:30280/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content', + pnf: 'http://172.30.3.100:30280/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content' + // 本地 + // ns: 'https://jsonplaceholder.typicode.com/posts/', + // vnf: 'https://jsonplaceholder.typicode.com/posts/', + // pnf: 'https://jsonplaceholder.typicode.com/posts/', + }; constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService, private modalService: NzModalService) { } //default 默认调用ns数据 @@ -75,26 +79,20 @@ export class OnboardVnfVmComponent implements OnInit { console.log(this.url); switch (tab) { case 'NS': - // this.pageIndex = 1; - // this.pageSize = 10; this.getTableData(); break case 'VNF': - // this.pageIndex = 1; - // this.pageSize = 10; this.getTableVnfData() break case 'PNF': - // this.pageIndex = 1; - // this.pageSize = 10; this.getTablePnfData() break } } - //before put create--Drag and drop files to the page before uploading - requestBody = { + //before put 创建--上传之前将文件拖拽到页面时 + requestBody = { "userDefinedData": { "additionalProp1": "string", "additionalProp2": "string", @@ -106,12 +104,12 @@ export class OnboardVnfVmComponent implements OnInit { beforeUploadNS = (file: UploadFile): boolean => { this.fileListNS.push(file); console.log('beforeUpload'); - this.myhttp.getCreatensData("createNetworkServiceData",this.requestBody)//on-line - // this.myhttp.getCreatensData("creatensDataNS") //local + // this.myhttp.getCreatensData("createNetworkServiceData",requestBody)//线上 + this.myhttp.getCreatensData("creatensDataNS",this.requestBody) //本地 .subscribe((data) => { - console.log("Data returned after dragging a file NS-->", data); + console.log("拖拽文件后返回的数据NS-->", data); this.nsdInfoId = data["id"]; - console.log("Data returned after dragging a fileid-->",this.nsdInfoId); + console.log("拖拽文件后返回的数据的id-->",this.nsdInfoId); }, (err) => { console.log(err); }) @@ -122,12 +120,12 @@ export class OnboardVnfVmComponent implements OnInit { beforeUploadVNF = (file: UploadFile): boolean => { this.fileListVNF.push(file); console.log('beforeUpload'); - this.myhttp.getCreatensData("createVnfData",this.requestBody)//on-line - // this.myhttp.getCreatensData("creatensDataVNF") //local + // this.myhttp.getCreatensData("createVnfData",requestBody)//线上 + this.myhttp.getCreatensData("creatensDataVNF",this.requestBody) //本地 .subscribe((data) => { - console.log("Data returned after dragging a fileVNF-->", data); + console.log("拖拽文件后返回的数据VNF-->", data); this.vnfPkgId = data["id"]; - console.log("Data returned after dragging a file id-->",this.vnfPkgId); + console.log("拖拽文件后返回的数据的id-->",this.vnfPkgId); }, (err) => { console.log(err); }) @@ -138,12 +136,12 @@ export class OnboardVnfVmComponent implements OnInit { beforeUploadPNF = (file: UploadFile): boolean => { this.fileListPNF.push(file); console.log('beforeUpload'); - this.myhttp.getCreatensData("createPnfData",this.requestBody) //on-line - // this.myhttp.getCreatensData("creatensDataPNF") //local + // this.myhttp.getCreatensData("createPnfData",requestBody) //线上 + this.myhttp.getCreatensData("creatensDataPNF",this.requestBody) //本地 .subscribe((data) => { - console.log("Data returned after dragging a file PNF-->", data); + console.log("拖拽文件后返回的数据PNF-->", data); this.pnfdInfoId = data["id"]; - console.log("Data returned after dragging a file id-->",this.pnfdInfoId); + console.log("拖拽文件后返回的数据的id-->",this.pnfdInfoId); }, (err) => { console.log(err); }) @@ -201,7 +199,12 @@ export class OnboardVnfVmComponent implements OnInit { // this.nsuploading = true; // You can use any AJAX library you like - const req = new HttpRequest('POST', url, formData, { + // const req = new HttpRequest('POST', url, formData, { + // reportProgress: true, + // withCredentials: true + // }); + // line PUT + const req = new HttpRequest('PUT', url, formData, { reportProgress: true, withCredentials: true }); @@ -243,9 +246,6 @@ changeUploadingSta(tab) { this.myhttp.getOnboardTableData() .subscribe((data) => { console.log(data) - // this.total = data["body"].length; //body length - console.log( this.total) - // this.sdData = data.body.tableList; this.vfcData = data; console.log(typeof this.vfcData) console.log("NSlist-vfc-->",data) @@ -258,7 +258,6 @@ changeUploadingSta(tab) { console.log('NSlist-sdc-->',data) this.sdcData = data; this.tableData = this.MergeArray(this.vfcData, this.sdcData) - // this.tableData = this.vfcData.concat(this.sdcData) }, (err) => { console.log(err); }) @@ -266,12 +265,9 @@ changeUploadingSta(tab) { // 获取vnf列表 getTableVnfData() { - this.myhttp.getOnboardTableVnfData() .subscribe((data) => { console.log("vnfList-->", data); - // this.total = data["body"]; //body length - // console.log( this.total) this.vfcData = data; console.log("vnfList-vfc-->",data) }, (err) => { @@ -283,7 +279,6 @@ changeUploadingSta(tab) { .subscribe((data) => { console.log('vnfList-sdc-->', data) this.sdcData = data; - // this.tableData = this.vfcData.concat(this.sdcData) this.tableData = this.MergeArray(this.vfcData, this.sdcData) }, (err) => { console.log(err); @@ -292,7 +287,6 @@ changeUploadingSta(tab) { // 获取pnf列表 getTablePnfData() { - this.myhttp.getOnboardTablePnfData() .subscribe((data) => { console.log("pnfList-->", data); @@ -302,6 +296,7 @@ changeUploadingSta(tab) { console.log(err); }) } + /* onboard 上传按钮 */ // ns onboard @@ -320,7 +315,6 @@ changeUploadingSta(tab) { nzContent: 'Package Onboard Failed!' }); } - updataNsService(id) { console.log(id); let requestBody = { @@ -361,7 +355,6 @@ changeUploadingSta(tab) { }) } - // pnf onboard ? updataPnfService(id) { console.log('pnf',id); |