summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/services/onboard-vnf-vm
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-11-07 18:44:26 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-11-07 18:44:51 +0800
commit5068ef4e733342d03d30ad895e5dcbeb4b6390b1 (patch)
tree55d73f8d76485adfad8f28cc95abae1f892dcbc7 /usecaseui-portal/src/app/services/onboard-vnf-vm
parent3cc445834dd33209256b32f5643ec6c7e20ad2a4 (diff)
Support NS Package Upload for VF-C
Change-Id: Id5818d125ca7ed54079ae05df93100df9d43da13 Issue-ID: USECASEUI-156 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
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.html219
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts430
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);
+ // })
+ // }
+
+
}