diff options
author | zhangab <zhanganbing@chinamobile.com> | 2018-11-14 15:20:05 +0800 |
---|---|---|
committer | zhangab <zhanganbing@chinamobile.com> | 2018-11-14 15:20:20 +0800 |
commit | 53266fd0f2709e2f1a3d87b073d317e0579fa1f0 (patch) | |
tree | 937b1d736e47bf94d1af2db3a1b83d043d9bb020 /usecaseui-portal/src | |
parent | 5ac64c3efb45812c5277d1c3728d55418d60e6ca (diff) |
Modify the display of the list
Change-Id: Idd8fd9f4bc4f6c972690e3a8c99200afb1c259e0
Issue-ID: USECASEUI-159
Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src')
3 files changed, 72 insertions, 191 deletions
diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts index 017bf9fb..dfcd12f8 100644 --- a/usecaseui-portal/src/app/onboard.service.ts +++ b/usecaseui-portal/src/app/onboard.service.ts @@ -50,6 +50,7 @@ export class onboardService { //--------------------------------------------------------------------------------------- /* line up 线上*/ baseUrl = "/api/usecaseui-server/v1/uui-lcm/"; + // baseUrlUp = "/api/usecaseui/server/v1/"; url = { // 数据列表Data onboardTableData: this.baseUrl + "ns-packages", @@ -74,7 +75,6 @@ export class onboardService { deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=", // Delete Pnf package deletePnfPack: this.baseUrl + "deletePnfPackage?pnfPkgId=", - // // download ns package // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX", // //download vnf package @@ -82,30 +82,30 @@ export class onboardService { } - //-----------------------------------Function-local-start------------------------------------------------------ - /* Query data list */ + //-----------------------------------Function-start------------------------------------------------------ + /* 查询数据列表 */ // NS Data getOnboardTableData() { - return this.http.get<any>(this.url.onboardTableData); - // return this.http.get<any>(this.url["onboardTableData"]); + // return this.http.get<any>(this.url.onboardTableData); + return this.http.get<any>(this.url["onboardTableData"]); } // NS SDC Data getSDC_NSTableData(){ - return this.http.get<any>(this.url.sdc_nsListData); - // return this.http.get<any>(this.url["onboardTableData"]); + // return this.http.get<any>(this.url.sdc_nsListData); + return this.http.get<any>(this.url["sdc_nsListData"]); } // VNF Data getOnboardTableVnfData() { - return this.http.get<any>(this.url.onboardDataVNF); + return this.http.get<any>(this.url.onboardDataVNF); } // onboard VNF sdc Data getSDC_VNFTableData() { - return this.http.get<any>(this.url["sdc_vnfListData"]); + return this.http.get<any>(this.url["sdc_vnfListData"]); } - + // PNF Data getOnboardTablePnfData() { - return this.http.get<any>(this.url.onboardDataPNF); + return this.http.get<any>(this.url.onboardDataPNF); } //------------------------------------------------------------------------------------- @@ -131,86 +131,27 @@ export class onboardService { //-------------------------------------------------------------------------- // Delete ns vfc package - deleteNsIdData(paramsObj): Observable<HttpResponse<any>> { + deleteNsIdData(paramsObj) { // local test - let params = new HttpParams({ fromObject: paramsObj }); - console.log(11111, params) - return this.http.get<any>(this.url.deleteNspack, { observe: 'response', params }); - + // return this.http.get<any>(this.url.deleteNspack); // Online test - // return this.http.delete<any>(this.url["deleteNspack"] + paramsObj); + return this.http.delete<any>(this.url["deleteNspack"] + paramsObj); } - // delete ns sdc package - // deleteNssdcData(){ - // return this.http.get<any>(this.url.deleteNssdcData); //Local simulation - // // return this.http.delete<any>(this.url.deleteNssdcData + id); - // } // Delete Vnf vfc package - deleteVnfIdData(paramsObj): Observable<HttpResponse<any>> { - let params = new HttpParams({ fromObject: paramsObj }); - console.log(11111, params) - return this.http.get<any>(this.url.deleteVnfPack, { observe: 'response', params }); + deleteVnfIdData(paramsObj) { + // return this.http.get<any>(this.url.deleteVnfPack); //online test - // return this.http.delete<any>(this.url["deleteVnfpack"] + paramsObj); + return this.http.delete<any>(this.url["deleteVnfpack"] + paramsObj); } - // Delete Vnf sdc package - // deleteVnfsdcData(){ - // return this.http.get<any>(this.url.deleteVnfsdcData); - // } - // Delete Pnf package - deletePnfIdData(paramsObj): Observable<HttpResponse<any>> { - let params = new HttpParams({ fromObject: paramsObj }); - console.log(11111, params) - return this.http.get<any>(this.url.deletePnfPack, { observe: 'response', params }); + deletePnfIdData(paramsObj){ + //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-local-end------------------------------------- - - - // download nspak - // downloadNsData(paramsObj): Observable<HttpResponse<any>> { - // console.log(66,paramsObj) - // let params = new HttpParams({ fromObject: paramsObj }); - // return this.http.get<any>(this.url.downloadNsData, { observe: 'response', params }); - // } - // // download Vnfpak - // downloadVnfData(){ - // return this.http.get<any>(this.url.downloadVnfData) - // } - - // testObservable() { - // let myObservable = new Observable((observer) => { - // observer.next(1); - // observer.next((n) => { - // console.log(3 + n); - // }) - // setTimeout(() => { - // observer.next(66666) - // }, 100) - // observer.next(() => { - // setTimeout((n) => { - // console.log("9999---" + n); - // }, 10) - // }) - // // observer.error(2); - // // observer.complete(); - // }); - - // myObservable.subscribe((e) => { - // if (typeof e == "function") { - // e(5) - // } - // console.log(e); - // }, (err) => { - // console.log(err); - // }, () => { - // console.log(555); - // }) - // } //---------------------------------Function-end------------------------------------------- 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); |