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 | 219 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts | 430 |
2 files changed, 430 insertions, 219 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 c0e91543..c552ba73 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,18 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. --> -<h3 class="title"> Onboard VNF </h3> -<nz-upload nzType="drag" [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <p class="ant-upload-drag-icon"> - <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> -</nz-upload> -<button nz-button [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0" style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} -</button> + <!-- <button nz-button nzType="primary" (click)="showModal()"> <i class="anticon anticon-plus-circle-o"></i><span> Create </span> </button> @@ -45,12 +34,32 @@ </nz-tabset> --> <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> - <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, url)"> + <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab,nsdInfoId,url)"> <!-- nsList --> <div class="list" *ngIf="tab === 'NS'"> - <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)="searchData()" (nzPageSizeChange)="searchData(true)"> + <h3 class="title"> Onboard {{tabTitle}} </h3> + <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS"> + <p class="ant-upload-drag-icon"> + <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> + </nz-upload> + <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" + style="margin-top: 16px"> + {{ uploading ? 'Uploading' : 'Start Upload' }} + </button> + <!-- tablist --> + <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" + (nzPageSizeChange)="searchNsData(true)"> + <!-- (nzPageIndexChange)="searchNsData()" --> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> <th nzWidth="5%">NO</th> @@ -60,7 +69,7 @@ <th nzWidth="15%">Onboarding State</th> <th nzWidth="20%">Operational State</th> <th nzWidth="20%">Usage State</th> - <th nzWidth="15%"></th> + <th nzWidth="15%">Operation button</th> </tr> </thead> <tbody> @@ -76,61 +85,49 @@ <td *ngIf="item.version">{{ item.version }}</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.nsdOnboardingState}}</span> + 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</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)="updataService(item.id)"></i> - <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i> - <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></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" (click)="deleteNsService(i,item.id)" *ngIf="item.id"></i> + <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> --> </td> </tr> </tbody> </nz-table> </div> <!-- VNFList --> - <!-- <div class="list" *ngIf="tab === 'VNF'"> - <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)="searchData()" (nzPageSizeChange)="searchData(true)"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="5%">NO</th> - <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="20%">Type</th> - <th nzWidth="20%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="20%">Operational State</th> - </tr> - </thead> --> - <!-- <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td>{{item.id}}</td> - <td>{{item.name}}</td> - <td>{{item.type}}</td> - <td>{{item.version}}</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)="updataVnfService(item.id)"></i> - <i class="anticon anticon-download" (click)="downloadVnfService(item.id)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id }}"></i> - </td> - </tr> - </tbody> - </nz-table> - </div> --> <div class="list" *ngIf="tab === 'VNF'"> - <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)="searchData()" (nzPageSizeChange)="searchData(true)"> + <h3 class="title"> Onboard {{tabTitle}} </h3> + <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF"> + <p class="ant-upload-drag-icon"> + <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> + </nz-upload> + <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" + style="margin-top: 16px"> + {{ uploading ? 'Uploading' : 'Start Upload' }} + </button> + <!-- tabList --> + <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" + (nzPageSizeChange)="searchVnfData(true)"> + <!--(nzPageIndexChange)="searchVnfData()" --> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> <th nzWidth="5%">NO</th> @@ -146,23 +143,25 @@ <!-- <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.vnfProductName}}</td> - <td>{{item.vnfdVersion}}</td> + <td *ngIf="item.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> + <td *ngIf="item.version">{{item.version}}</td> <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.status}}</span> - <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> - </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)="updataService(item.id)" - *ngIf="item.uuid"></i> - <i class="anticon anticon-download" (click)="downloadService(item.id)" *ngIf="item.id"></i> - <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></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" (click)="deleteVnfService(i,item.id)" id="{{ item.id}}" *ngIf="item.id"></i> </td> </tr> <!-- </ng-template> --> @@ -170,44 +169,32 @@ </nz-table> </div> <!-- PNFList --> - <!-- <div class="list" *ngIf="tab === 'PNF'"> - <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)="searchData()" (nzPageSizeChange)="searchData(true)"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="5%">NO</th> - <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="20%">Type</th> - <th nzWidth="20%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="20%">Operational State</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td>{{item.id}}</td> - <td>{{item.name}}</td> - <td>{{item.type}}</td> - <td>{{item.version}}</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-upload upicon" #upload_icon (click)="updataPnfService(item.id)"></i> - <i class="anticon anticon-download" (click)="downloadPnfService(item.id)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)" id="{{ item.id }}"></i> - </td> - </tr> - </tbody> - </nz-table> - </div> --> <div class="list" *ngIf="tab === 'PNF'"> - <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)="searchData()" (nzPageSizeChange)="searchData(true)"> + <h3 class="title"> Onboard {{tabTitle}} </h3> + <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF"> + <p class="ant-upload-drag-icon"> + <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> + </nz-upload> + <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" + style="margin-top: 16px"> + {{ uploading ? 'Uploading' : 'Start Upload' }} + </button> + <!-- tabList --> + <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" + (nzPageSizeChange)="searchPnfData(true)"> + <!-- (nzPageIndexChange)="searchPnfData()" --> <thead (nzSortChange)="sort($event)" nzSingleSort> <tr> <th nzWidth="5%">NO</th> @@ -228,16 +215,15 @@ <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> --> + <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.uuid"></i> - <i class="anticon anticon-download" (click)="downloadService(item.id)"></i> - <i class="anticon anticon-delete" (click)="deleteService(i,item.id)" id="{{ item.id }}"></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" (click)="deletePnfService(i,item.id)"></i> </td> </tr> <!-- </ng-template> --> @@ -245,4 +231,5 @@ </nz-table> </div> </nz-tab> -</nz-tabset>
\ No newline at end of file +</nz-tabset> + 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 77befe17..650f2162 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 @@ -5,6 +5,7 @@ import { onboardService } from '../../onboard.service'; import { slideToRight } from '../../animates'; import { NzMessageService, UploadFile } from 'ng-zorro-antd'; import { filter } from 'rxjs/operators'; +import { Title } from '@angular/platform-browser'; @Component({ selector: 'app-onboard-vnf-vm', @@ -14,38 +15,185 @@ import { filter } from 'rxjs/operators'; }) 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/', + }; + nsdInfoId = ''; + vnfPkgId =''; + pnfdInfoId = ''; + tabTitle = "NS"; uploading = false; - fileList: UploadFile[] = []; - constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService) { } + fileListNS: UploadFile[] = []; + fileListVNF: UploadFile[] = []; + fileListPNF: UploadFile[] = []; + constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title) { } + //default 默认调用ns数据 ngOnInit() { + console.log("11111111111111") this.getTableData(); } - beforeUpload = (file: UploadFile): boolean => { - this.fileList.push(file); - console.log('beforeUpload') - // this.myhttp.getCreatensData() - // .subscribe((data) => { - // console.log(33, data); - // }, (err) => { - // console.log(err); - // }) + //表格数据 + tableData:any; + sdcData:any; + vfcData:any; + pageIndex = 1; + pageSize = 10; + total; + loading = false; + sortName = null; + sortValue = null; + tabs = ['NS', 'VNF', 'PNF']; + + isVisible = false; + isOkLoading = false; + showModal(): void { + this.isVisible = true; + } + + handleCancel(): void { + this.isVisible = false; + } + + // 处理tab切换 请求数据 + handleTabChange(tab,nsdInfoId,url) { + this.tabTitle = tab; + console.log(tab); + 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 创建--上传之前将文件拖拽到页面时 + // requestBody = { + // "userDefinedData": { + // "additionalProp1": "string", + // "additionalProp2": "string", + // "additionalProp3": "string" + // } + // } + // requestBody = {}; + // ns beforeUpload + beforeUploadNS = (file: UploadFile): boolean => { + this.fileListNS.push(file); + console.log('beforeUpload'); + // this.myhttp.getCreatensData("createNetworkServiceData",requestBody)//线上 + this.myhttp.getCreatensData("creatensDataNS") //本地 + .subscribe((data) => { + console.log("拖拽文件后返回的数据NS-->", data); + this.nsdInfoId = data["id"]; + console.log("拖拽文件后返回的数据的id-->",this.nsdInfoId); + }, (err) => { + console.log(err); + }) return false; } - handleUpload(): void { + //vnf beforeUpload + beforeUploadVNF = (file: UploadFile,tab): boolean => { + this.fileListVNF.push(file); + console.log('beforeUpload'); + // this.myhttp.getCreatensData("createVnfData",requestBody)//线上 + this.myhttp.getCreatensData("creatensDataVNF") //本地 + .subscribe((data) => { + console.log("拖拽文件后返回的数据VNF-->", data); + this.vnfPkgId = data["id"]; + console.log("拖拽文件后返回的数据的id-->",this.vnfPkgId); + }, (err) => { + console.log(err); + }) + return false; + } + + // //pnf eforeUpload + beforeUploadPNF = (file: UploadFile,tab): boolean => { + this.fileListPNF.push(file); + console.log('beforeUpload'); + // this.myhttp.getCreatensData("createPnfData",requestBody) //线上 + this.myhttp.getCreatensData("creatensDataPNF") //本地 + .subscribe((data) => { + console.log("拖拽文件后返回的数据PNF-->", data); + this.pnfdInfoId = data["id"]; + console.log("拖拽文件后返回的数据的id-->",this.pnfdInfoId); + }, (err) => { + console.log(err); + }) + return false; + } + + + //拖拽后点击上传按钮 + onClick (tab) { + switch (tab) { + case 'NS': + console.log(this.nsdInfoId); + // this.handleUpload('http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content'); + this.handleUpload(this.url.ns,tab); + this.getTableData(); + break + case 'VNF': + console.log(this.vnfPkgId); + // this.handleUpload('http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content'); + this.handleUpload(this.url.vnf,tab); + this.getTableVnfData() + break + case 'PNF': + console.log(this.pnfdInfoId); + // this.handleUpload('http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content'); + this.handleUpload(this.url.pnf,tab); + this.getTablePnfData(); + break + } + } + + //put Upload 上传 + handleUpload(url,tab): void { console.log('startUpload') const formData = new FormData(); // tslint:disable-next-line:no-any - this.fileList.forEach((file: any) => { - formData.append('files[]', file); - }); + switch (tab) { + case 'NS': + this.fileListNS.forEach((file: any) => { + formData.append('files[]', file); + }); + break + case 'VNF': + this.fileListVNF.forEach((file: any) => { + formData.append('files[]', file); + }); + break + case 'PNF': + this.fileListPNF.forEach((file: any) => { + formData.append('files[]', file); + }); + break + } this.uploading = true; // You can use any AJAX library you like - const req = new HttpRequest('POST', 'https://jsonplaceholder.typicode.com/posts/', formData, { + const req = new HttpRequest('POST', url, formData, { reportProgress: true, withCredentials: true }); @@ -55,7 +203,6 @@ export class OnboardVnfVmComponent implements OnInit { .subscribe( (event: {}) => { this.uploading = false; - this.getTableData(); console.log('upload successfully') this.msg.success('upload successfully.'); }, @@ -66,30 +213,9 @@ export class OnboardVnfVmComponent implements OnInit { } ); } - //表格数据 - tableData = []; - sdData = []; - vfcData = []; - pageIndex = 1; - pageSize = 10; - total = 100; - loading = false; - sortName = null; - sortValue = null; - tabs = ['NS', 'VNF', 'PNF']; - - isVisible = false; - isOkLoading = false; - showModal(): void { - this.isVisible = true; - } - handleCancel(): void { - this.isVisible = false; - } - // getCreatensData() { +//---------------------------------------------------------------------------------------------- - // } // 获取NS列表 getTableData() { // 查询参数: 当前页码，每页条数，排序方式 @@ -98,31 +224,31 @@ export class OnboardVnfVmComponent implements OnInit { pageSize: this.pageSize, nameSort: this.sortValue } - + //vfc this.myhttp.getOnboardTableData(paramsObj) - .subscribe((data) => { - console.log(99, data); - this.total = data.body.total; - this.sdData = data.body.tableList; - console.log(this.sdData); - }, (err) => { - console.log(err); - }) - - this.myhttp.getOnboardTablePnfData(paramsObj) - .subscribe((data) => { - console.log(222, data); - this.total = data.body.total; - this.vfcData = data.body.tableList; - console.log(this.vfcData); - this.tableData = this.vfcData.concat(this.sdData) - console.log(99, this.tableData) - }, (err) => { - console.log(err); - }) + .subscribe((data) => { + console.log(data) + this.total = data["body"].length; //body length + console.log( this.total) + // this.sdData = data.body.tableList; + this.vfcData = data.body; + console.log(typeof this.vfcData) + console.log("NSlist-vfc-->",data.body) + }, (err) => { + console.log(err); + }) + // sdc + this.myhttp.getSDC_NSTableData(paramsObj) + .subscribe((data) => { + console.log('NSlist-sdc-->',data) + this.sdcData = data.body; + this.tableData = this.vfcData.concat(this.sdcData) + }, (err) => { + console.log(err); + }) } - // 获取VNF列表 + // 获取vnf列表 getTableVnfData() { // 查询参数: 当前页码，每页条数，排序方式 let paramsObj = { @@ -133,15 +259,28 @@ export class OnboardVnfVmComponent implements OnInit { this.myhttp.getOnboardTableVnfData(paramsObj) .subscribe((data) => { - console.log(222, data); - this.total = data.body.total; - this.tableData = data.body.tableList; + console.log("vnfList-->", data); + // this.total = data["body"].length; //body length + // console.log( this.total) + this.vfcData = data.body; + // this.tableData = data.body; + console.log("vnfList-vfc-->",data.body) + }, (err) => { + console.log(err); + }) + + // sdc + this.myhttp.getSDC_VNFTableData() + .subscribe((data) => { + console.log('vnfList-sdc-->',data) + this.sdcData = data; + this.tableData = this.vfcData.concat(this.sdcData) }, (err) => { console.log(err); }) } - // 获取VNF列表 + // 获取pnf列表 getTablePnfData() { // 查询参数: 当前页码，每页条数，排序方式 let paramsObj = { @@ -152,30 +291,14 @@ export class OnboardVnfVmComponent implements OnInit { this.myhttp.getOnboardTablePnfData(paramsObj) .subscribe((data) => { - console.log(222, data); - this.total = data.body.total; - this.tableData = data.body.tableList; + console.log("pnfList-->", data); + this.total = data["body"]; //body length + this.tableData = data.body; }, (err) => { console.log(err); }) } - // 处理tab切换 - handleTabChange(tab) { - console.log(tab) - switch (tab) { - case 'NS': - // this.tableData = [] - - this.getTableData() - break - case 'VNF': - this.getTableVnfData() - break - case 'PNF': - this.getTablePnfData() - break - } - } + sort(sort: { key: string, value: string }): void { console.log(sort); @@ -183,16 +306,66 @@ export class OnboardVnfVmComponent implements OnInit { this.sortValue = sort.value; this.getTableData(); } - searchData(reset:boolean = false){ - console.log(reset) - this.getTableData(); - } - // onboard - updataService(id) { + +//----------------------------------------------------------------------------------- + + //选择条数 + // searchNsData(reset: boolean = false) { + // console.log('dddd',reset) + // this.getTableData(); + // } + + + /* onboard 上传按钮 */ + // ns onboard + updataNsService(id) { console.log(id); + let requestBody = { + "csarId": id + } + this.myhttp.getNsonboard(requestBody) + .subscribe((data) => { + console.log('onboard ns sdc', data); + }, (err) => { + console.log(err); + }) + + } + + // searchVnfData(reset: boolean = false) { + // console.log('vvvv',reset) + // this.getTableVnfData(); + // } + + // vnf onboard + updataVnfService(id) { + console.log(id) + let requestBody = { + "csarId": id } - //delete - deleteService(index,pkgid) { + this.myhttp.getVnfonboard(requestBody) + .subscribe((data) => { + console.log('onboard vnf sdc', data); + }, (err) => { + console.log(err); + }) + } + + // searchPnfData(reset: boolean = false) { + // console.log('pppp',reset) + // this.getTablePnfData(); + // } + + // pnf onboard ? + updataPnfService(id) { + console.log('pnf',id); + } + + + //-------------------------------------------------------------------------------- + /* delete 删除按钮 */ + //delete nsItem + deleteNsService(index,pkgid) { console.log(pkgid) console.log("deleteService!"); this.myhttp.deleteNsIdData(pkgid) @@ -201,16 +374,67 @@ export class OnboardVnfVmComponent implements OnInit { }, (err) => { console.log(err); }) + console.log(index) + this.tableData.splice(index, 1) + console.log(this.tableData.length) + // this.getTableData() + } + + //delete vnfItem + deleteVnfService(index,pkgid) { + console.log(pkgid) + console.log("deleteVnfService!"); + this.myhttp.deleteVnfIdData(pkgid) + .subscribe((data) => { + console.log(44, data); + }, (err) => { + console.log(err); + }) + console.log(index) this.tableData.splice(index, 1) + console.log(this.tableData.length) + this.getTableVnfData() } - downloadService(id) { - console.log('download') - console.log(id) - this.myhttp.downloadNsData(id) - .subscribe((data) => { - console.log(44, data); - }, (err) => { - console.log(err); - }) + + //delete PnfItem + deletePnfService(index,pkgid) { + console.log(pkgid) + console.log("deletePnfService!"); + this.myhttp.deletePnfIdData(pkgid) + .subscribe((data) => { + console.log(44, data); + }, (err) => { + console.log(err); + }) + console.log(index) + this.tableData.splice(index, 1) + console.log(this.tableData.length) + this.getTablePnfData() } + + +//-------------------------------------------------------------------------------------- + //download 下载 + // downloadNsService(id) { + // console.log('download') + // console.log(id) + // this.myhttp.downloadNsData(id) + // .subscribe((data) => { + // console.log(44, data); + // }, (err) => { + // console.log(err); + // }) + // } + + // downloadVnfService() { + // console.log('downloadVnf') + // this.myhttp.downloadVnfData() + // .subscribe((data) => { + // console.log('downloadVnf pack', data); + // }, (err) => { + // console.log(err); + // }) + // } + + } |