diff options
Diffstat (limited to 'usecaseui-portal/src/app')
3 files changed, 592 insertions, 357 deletions
diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts index 1cf1e359..5738256e 100644 --- a/usecaseui-portal/src/app/onboard.service.ts +++ b/usecaseui-portal/src/app/onboard.service.ts @@ -5,169 +5,193 @@ import { onboardTableData, onboardDataVNF, onboardDataPNF } from './dataInterfac @Injectable() export class onboardService { - constructor(private http: HttpClient) { } + /* location */ + baseUrl = "./assets/json"; + url = { + // 数据列表 + onboardTableData: this.baseUrl + "/onboard-vnf-mf/onboardTableData.json", + onboardDataVNF: this.baseUrl + "/onboard-vnf-mf/onboardDataVNF.json", + onboardDataPNF: this.baseUrl + "/onboard-vnf-mf/onboardDataPNF.json", + //ns sdc + sdc_nsListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_NS.json", + // vnf sdc + sdc_vnfListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_VNF.json", + + //创建nspackages + creatensData: this.baseUrl + "/onboard-vnf-mf/_jsonData.json", + + //onboard ns sdc data + onboardNs: this.baseUrl + "/onboard-vnf-mf//listData/onboardNs.json", + //onboard VNF sdc data + onboardVNF: this.baseUrl + "/onboard-vnf-mf/listData/onboardVNF.json", + + // Delete ns package + deleteNspack: this.baseUrl + "/onboard-vnf-mf/deleteNspack.json", + // Delete Vnf vfc package + deleteVnfPack: this.baseUrl + "/deleteVnfPack.json", + // Delete Pnf package + deletePnfPack: this.baseUrl + "/deletePnfPack.json", + + // // download ns package + // downloadNsData: this.baseUrl + "/downloadData.json", + // //download vnf package + // downloadVnfData: this.baseUrl + "/listData/downloadVnfData.json" -// baseUrl = "./assets/json"; -// url = { - -// // 数据列表 -// onboardTableData: this.baseUrl + "/onboardTableData.json", -// onboardDataVNF: this.baseUrl + "/onboardDataVNF.json", -// onboardDataPNF: this.baseUrl + "/onboardDataPNF.json", - -// //创建nspackages -// creatensData: this.baseUrl + "/creatensData.json", - -// deleteService: this.baseUrl + "/deleteService.json?", + } -// // Delete ns package -// deleteNspack: this.baseUrl + "/deleteNspack.json", -// // download ns package -// downloadNsData: this.baseUrl + "/downloadData.json", -// } +//--------------------------------------------------------------------------------------- + /* line up 线上*/ + // baseUrl = "/api/usecaseui/server/v1/uui-lcm/"; + // baseUrlUp = "/api/usecaseui/server/v1/"; + // url = { + // // 数据列表Data + // onboardTableData: this.baseUrl + "ns-packages", + // onboardDataVNF: this.baseUrl + "vnf-packages", + // onboardDataPNF: this.baseUrl + "pnf-packages", + // //ns sdc + // sdc_nsListData: this.baseUrl + "sdc-ns-packages", + // //vnf sdc + // sdc_vnfListData: this.baseUrl + "sdc-vf-packages", + + // //创建 creatensData + // creatensData: this.baseUrl + "_jsonData", //本地 + + // //onboard + // //onboard ns sdc data + // onboardNs: this.baseUrl + "ns-packages", + // //onboard VNF sdc data + // onboardVNF: this.baseUrl + "vf-packages", + + // // Delete ns package + // deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=XXXXX", + // // Delete Vnf vfc package + // deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=XXXXX", + // // Delete Pnf package + // deletePnfPack: this.baseUrl + "", + + // // // download ns package + // // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX", + // // //download vnf package + // // downloadVnfData: this.baseUrl + "downLoadVnfPackage?vnfPkgId=XXXXX" + + // } + //------------------------------------------------------------------------------------- // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1'; - baseUrl = '/api/usecaseui/server/v1'; - url={ - // allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0", - // homeLineData:this.baseUrl + "/...........", - // serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx", - // servicesTableData:this.baseUrl + "/xxxxxxxx.json", - // onboardTableData:this.baseUrl + "/xxxxxxx.json", + // baseUrl = '/api/usecaseui/server/v1'; + // url={ + // // allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0", + // // homeLineData:this.baseUrl + "/...........", + // // serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx", + // // servicesTableData:this.baseUrl + "/xxxxxxxx.json", + // // onboardTableData:this.baseUrl + "/xxxxxxx.json", - // 数据列表 - onboardTableData: this.baseUrl + "/uui-lcm/ns-packages", - onboardDataVNF: this.baseUrl + "/uui-lcm/vnf-packages", - onboardDataPNF: this.baseUrl + "/uui-lcm/pnf-packages", + // // 数据列表 + // onboardTableData: this.baseUrl + "/uui-lcm/ns-packages", + // onboardDataVNF: this.baseUrl + "/uui-lcm/vnf-packages", + // onboardDataPNF: this.baseUrl + "/uui-lcm/pnf-packages", - //创建nspackages - // creatensData: this.baseUrl + "/creatensData.json", + // //创建nspackages + // // creatensData: this.baseUrl + "/creatensData.json", - // deleteService: this.baseUrl + "/deleteService.json?", + // // deleteService: this.baseUrl + "/deleteService.json?", - // Delete ns package - deleteNspack: this.baseUrl + "/uui-lcm/deleteNsdPackage", - // download ns package - downloadNsData: this.baseUrl + "/downloadData.json/uui-lcm/downLoadNsPackage", - } + // // Delete ns package + // deleteNspack: this.baseUrl + "/uui-lcm/deleteNsdPackage", + // // download ns package + // downloadNsData: this.baseUrl + "/downloadData.json/uui-lcm/downLoadNsPackage", + // } -// 创建ns数据 -// getCreatensData(paramsObj):Observable<HttpResponse<creatensData>>{ -// let params = new HttpParams({fromObject:paramsObj}); -// return this.http.get<creatensData>(this.url.creatensData,{observe:'response',params}); -// // return this.http.post<any>(this.url.createService,requestBody); -// } - -// getCreatensData() { -// return this.http.get(this.url.creatensData); -// } - // onboard NS Data - getOnboardTableData(paramsObj): Observable<HttpResponse<onboardTableData>> { - // let params = new HttpParams({ fromObject: paramsObj }); - // return this.http.get<onboardTableData>(this.url.onboardTableData, { observe: 'response', params }); - return this.http.get<any>(this.url["onboardTableData"]); - } - // Ns Id - getNsIdData(paramsObj): Observable<HttpResponse<onboardDataVNF>> { - // let params = new HttpParams({ fromObject: paramsObj }); - // return this.http.get<onboardDataVNF>(this.url.onboardDataVNF, { observe: 'response', params }); - return this.http.post<any>(this.url["onboardDataVNF"],{}); +//-----------------------------------Function-start------------------------------------------------------ + /* 查询数据列表 */ + // NS Data + getOnboardTableData(paramsObj): Observable<HttpResponse<any>> { + let params = new HttpParams({ fromObject: paramsObj }); + return this.http.get<any>(this.url.onboardTableData, { observe: 'response', params }); + // return this.http.get<any>(this.url["onboardTableData"]); } - // Delete ns package - deleteNsIdData(paramsObj): Observable<HttpResponse<any>> { + // NS SDC Data + getSDC_NSTableData(paramsObj): Observable<HttpResponse<onboardTableData>> { let params = new HttpParams({ fromObject: paramsObj }); - // return this.http.get<any>(this.url.deleteNspack, { observe: 'response', params }); - return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params }); + return this.http.get<onboardTableData>(this.url.sdc_nsListData, { observe: 'response', params }); + // return this.http.get<any>(this.url["onboardTableData"]); } - // download - downloadNsData(paramsObj): Observable<HttpResponse<any>> { - console.log(66,paramsObj) + + // VNF Data + getOnboardTableVnfData(paramsObj): Observable<HttpResponse<onboardDataVNF>> { let params = new HttpParams({ fromObject: paramsObj }); - return this.http.get<any>(this.url.downloadNsData, { observe: 'response', params }); + return this.http.get<any>(this.url.onboardDataVNF, { observe: 'response', params }); } - // onboard VNF Data - getOnboardTableVnfData(paramsObj): Observable<HttpResponse<onboardDataVNF>> { - // let params = new HttpParams({ fromObject: paramsObj }); - return this.http.post<any>(this.url.onboardDataVNF, paramsObj); + // onboard VNF sdc Data + getSDC_VNFTableData(){ + return this.http.get<any>(this.url["sdc_vnfListData"]); } - // onboard PNF Data + // PNF Data getOnboardTablePnfData(paramsObj): Observable<HttpResponse<onboardDataPNF>> { let params = new HttpParams({ fromObject: paramsObj }); - return this.http.post<any>(this.url.onboardDataPNF, paramsObj); + return this.http.get<any>(this.url.onboardDataPNF, { observe: 'response', params }); } - 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); - }) +//------------------------------------------------------------------------------------- + + //创建--上传前拖拽文件后，获取到id //线上接口 post + // getCreatensData(url_upId,requestBody) { + // return this.http.post<any>(this.url.creatensData.replace("_jsonData",url_upId),requestBody); //线上 + // } + + //创建--上传前拖拽文件后，获取到id //本地json get + getCreatensData(url_upId) { + return this.http.get<any>(this.url.creatensData.replace("_jsonData",url_upId)); } - //--------------------------------------------------------------------------------- + //------------------------------------------------------------------------------ + //onboard sdc ns + getNsonboard(requestBody) { + return this.http.post<any>(this.url["onboardNs"], requestBody); + } + //onboard sdc vnf + getVnfonboard(requestBody) { + return this.http.post<any>(this.url["onboardVNF"], requestBody); + } - // // 服务详情数据 - // getInstanceDetails(id){ - // let url = this.baseUrl + "/detailsData.json?id=" + id; - // return this.http.get<instanceDetail>(url); - // } + //-------------------------------------------------------------------------- + // Delete ns vfc package + deleteNsIdData(paramsObj): Observable<HttpResponse<any>> { + let params = new HttpParams({ fromObject: paramsObj }); + console.log(11111,params) + return this.http.get<any>(this.url.deleteNspack, { observe: 'response', params }); + // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params }); + } - // 删除接口 -// deleteInstance(obj) { -// let httpOptions = { -// headers: new HttpHeaders({ -// 'Content-Type': 'application/json', -// 'Accept': 'application/json', -// 'Authorization': 'Basic SW5mcmFQb3J0YWxDbGllbnQ6cGFzc3dvcmQxJA==' -// }), -// body: { -// 'globalSubscriberId': obj.globalSubscriberId, -// 'serviceType': obj.serviceType -// } -// }; -// return this.http.get<any>(this.url.deleteService); //本地模拟 -// // return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions); -// } - - // 时间格式化 毫秒转正常值 - dateformater(vmstime) { - if (!vmstime) { - return '' - } - let mstime = Number((vmstime + '').slice(0, 13)); - let time = new Date(mstime); - let year = time.getFullYear(); - let month = time.getMonth() + 1; - let day = time.getDate(); - let hours = time.getHours(); - let minutes = time.getMinutes(); - let seconds = time.getSeconds(); - let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; - return formattime; + // 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 }); + // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params }); } + + // 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 }); + // return this.http.delete<any>(this.url["deleteNspack"], { observe: 'response', params }); + } +//------------------------------------------------------------------------------ + // 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) + // } +//---------------------------------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 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); + // }) + // } + + } |