//---------------------------------------------------------------------------------------
/* line up 线上*/
baseUrl = "/api/usecaseui-server/v1/uui-lcm/";
+ // baseUrlUp = "/api/usecaseui/server/v1/";
url = {
// 数据列表Data
onboardTableData: this.baseUrl + "ns-packages",
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
}
- //-----------------------------------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);
}
//-------------------------------------------------------------------------------------
//--------------------------------------------------------------------------
// 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-------------------------------------------
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 -->
<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>
<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>
<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>
<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>
<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>
})
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 = '';
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数据
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",
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);
})
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);
})
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);
})
// 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
});
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)
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);
})
// 获取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) => {
.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);
// 获取pnf列表
getTablePnfData() {
-
this.myhttp.getOnboardTablePnfData()
.subscribe((data) => {
console.log("pnfList-->", data);
console.log(err);
})
}
+
/* onboard 上传按钮 */
// ns onboard
nzContent: 'Package Onboard Failed!'
});
}
-
updataNsService(id) {
console.log(id);
let requestBody = {
})
}
-
// pnf onboard ?
updataPnfService(id) {
console.log('pnf',id);
Code Review / usecase-ui.git / commitdiff