diff options
5 files changed, 456 insertions, 347 deletions
diff --git a/usecaseui-portal/src/app/onboard.service.ts b/usecaseui-portal/src/app/onboard.service.ts index 5738256e..71b2f97c 100644 --- a/usecaseui-portal/src/app/onboard.service.ts +++ b/usecaseui-portal/src/app/onboard.service.ts @@ -7,104 +7,82 @@ import { onboardTableData, onboardDataVNF, onboardDataPNF } from './dataInterfac 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" - - } - -//--------------------------------------------------------------------------------------- - /* line up 线上*/ - // baseUrl = "/api/usecaseui/server/v1/uui-lcm/"; - // baseUrlUp = "/api/usecaseui/server/v1/"; + // baseUrl = "./assets/json"; // url = { - // // 数据列表Data - // onboardTableData: this.baseUrl + "ns-packages", - // onboardDataVNF: this.baseUrl + "vnf-packages", - // onboardDataPNF: this.baseUrl + "pnf-packages", + // // 数据列表 + // 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 + "sdc-ns-packages", - // //vnf sdc - // sdc_vnfListData: this.baseUrl + "sdc-vf-packages", + // sdc_nsListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_NS.json", + // // vnf sdc + // sdc_vnfListData: this.baseUrl + "/onboard-vnf-mf/listData/SDC_VNF.json", + - // //创建 creatensData - // creatensData: this.baseUrl + "_jsonData", //本地 + // //创建nspackages + // creatensData: this.baseUrl + "/onboard-vnf-mf/_jsonData.json", - // //onboard // //onboard ns sdc data - // onboardNs: this.baseUrl + "ns-packages", + // onboardNs: this.baseUrl + "/onboard-vnf-mf/listData/onboardNs.json", // //onboard VNF sdc data - // onboardVNF: this.baseUrl + "vf-packages", + // onboardVNF: this.baseUrl + "/onboard-vnf-mf/listData/onboardVNF.json", // // Delete ns package - // deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=XXXXX", - // // Delete Vnf vfc package - // deleteVnfPack: this.baseUrl + "deleteVnfPackage?vnfPkgId=XXXXX", + // deleteNspack: this.baseUrl + "/onboard-vnf-mf/listData/deleteNspack.json", + // // Delete ns sdc package + // // deleteNssdcData: this.baseUrl + "/onboard-vnf-mf/listData/deleteNssdcData.json", + + // // Delete Vnf vfc package + // deleteVnfPack: this.baseUrl + "/onboard-vnf-mf/listData/deleteVnfPack.json", + // // Delete Vnf sdc package + // // deleteVnfsdcData: this.baseUrl + "/onboard-vnf-mf/listData/deleteVnfsdcData.json", + // // Delete Pnf package - // deletePnfPack: this.baseUrl + "", + // deletePnfPack: this.baseUrl + "/onboard-vnf-mf/listData/deletePnfPack.json", // // // download ns package - // // downloadNsData: this.baseUrl + "downLoadNsPackage?nsdInfoId=XXXXX", + // // downloadNsData: this.baseUrl + "/downloadData.json", // // //download vnf package - // // downloadVnfData: this.baseUrl + "downLoadVnfPackage?vnfPkgId=XXXXX" - - // } + // // downloadVnfData: this.baseUrl + "/listData/downloadVnfData.json" - //------------------------------------------------------------------------------------- - // 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", - - // // 数据列表 - // 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", - - // // deleteService: this.baseUrl + "/deleteService.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", // GET + // vnf sdc + sdc_vnfListData: this.baseUrl + "sdc-vf-packages", // GET + + // createnspackages ? TODO + creatensData: this.baseUrl + "createNetworkServiceData", //POST + + // onboard ns sdc data + onboardNs: this.baseUrl + "ns-packages", //POST + //onboard VNF sdc data + onboardVNF: this.baseUrl + "vf-packages", //POST + + //Delete ns package + deleteNspack: this.baseUrl + "deleteNsdPackage?nsdInfoId=", + // Delete Vnf vfc package + 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 + // downloadVnfData: this.baseUrl + "downLoadVnfPackage?vnfPkgId=XXXXX" - // // Delete ns package - // deleteNspack: this.baseUrl + "/uui-lcm/deleteNsdPackage", - // // download ns package - // downloadNsData: this.baseUrl + "/downloadData.json/uui-lcm/downLoadNsPackage", - // } + } -//-----------------------------------Function-start------------------------------------------------------ + //-----------------------------------Function-start------------------------------------------------------ /* 查询数据列表 */ // NS Data getOnboardTableData(paramsObj): Observable<HttpResponse<any>> { @@ -119,14 +97,14 @@ export class onboardService { return this.http.get<onboardTableData>(this.url.sdc_nsListData, { observe: 'response', params }); // return this.http.get<any>(this.url["onboardTableData"]); } - - // VNF Data + + // VNF Data getOnboardTableVnfData(paramsObj): Observable<HttpResponse<onboardDataVNF>> { let params = new HttpParams({ fromObject: paramsObj }); return this.http.get<any>(this.url.onboardDataVNF, { observe: 'response', params }); } - // onboard VNF sdc Data - getSDC_VNFTableData(){ + // onboard VNF sdc Data + getSDC_VNFTableData() { return this.http.get<any>(this.url["sdc_vnfListData"]); } @@ -135,53 +113,68 @@ export class onboardService { let params = new HttpParams({ fromObject: paramsObj }); return this.http.get<any>(this.url.onboardDataPNF, { observe: 'response', params }); } -//------------------------------------------------------------------------------------- + //------------------------------------------------------------------------------------- //创建--上传前拖拽文件后，获取到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)); + //创建--上传前拖拽文件后，获取到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); + return this.http.get<any>(this.url["onboardNs"], requestBody); } //onboard sdc vnf getVnfonboard(requestBody) { - return this.http.post<any>(this.url["onboardVNF"], requestBody); + return this.http.get<any>(this.url["onboardVNF"], requestBody); } //-------------------------------------------------------------------------- // Delete ns vfc package deleteNsIdData(paramsObj): Observable<HttpResponse<any>> { + // local test let params = new HttpParams({ fromObject: paramsObj }); - console.log(11111,params) + 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 }); + + // Online test + // 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) + 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 }); + //online test + // 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) + 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 }); + //online test + // return this.http.delete<any>(this.url["deletePnfpack"] + paramsObj); } -//------------------------------------------------------------------------------ + //------------------------------------------------------------------------------ // download nspak // downloadNsData(paramsObj): Observable<HttpResponse<any>> { // console.log(66,paramsObj) @@ -192,6 +185,37 @@ export class onboardService { // downloadVnfData(){ // return this.http.get<any>(this.url.downloadVnfData) // } -//---------------------------------Function-end------------------------------------------- + + // 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.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css index a1cc6455..f6a13fd0 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -57,3 +57,4 @@ hr { .list nz-table tbody td i.anticon:hover { color: #147dc2; } + 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 c552ba73..82d0fc51 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 @@ -34,202 +34,181 @@ </nz-tabset> --> <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> - <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab,nsdInfoId,url)"> - <!-- nsList --> - <div class="list" *ngIf="tab === 'NS'"> - <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> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <!-- <th nzWidth="20%">Type</th> --> - <th nzWidth="10%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="20%">Operational State</th> - <th nzWidth="20%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td *ngIf="item.nsdId">{{item.nsdId}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - - <td *ngIf="item.nsdName">{{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 [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', - '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)="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'"> - <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> - <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> - </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 *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.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" (click)="deleteVnfService(i,item.id)" id="{{ item.id}}" *ngIf="item.id"></i> - </td> - </tr> - <!-- </ng-template> --> - </tbody> - </nz-table> - </div> - <!-- PNFList --> - <div class="list" *ngIf="tab === 'PNF'"> - <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> - <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> - </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" (click)="deletePnfService(i,item.id)"></i> - </td> - </tr> - <!-- </ng-template> --> - </tbody> - </nz-table> - </div> - </nz-tab> + <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, id, url)"> + <!-- nsList --> + <div class="list" *ngIf="tab === 'NS'"> + <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> + <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%" nzShowSort nzSortKey="name"> Name </th> + <!-- <th nzWidth="20%">Type</th> --> + <th nzWidth="10%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="20%">Operational State</th> + <th nzWidth="20%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td *ngIf="item.nsdId">{{item.nsdId}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + + <td *ngIf="item.nsdName">{{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 [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', + '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)="updataNsService(item.uuid)" *ngIf="item.uuid"></i> + <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> --> + <i nzType="info" (click)="showConfirm(i, item.id)" class="anticon anticon-delete" *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> + </div> + <!-- VNFList --> + <div class="list" *ngIf="tab === 'VNF'"> + <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> + <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> + </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 *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.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 nzType="info" (click)="showVnfConfirm(i,item.id)" class="anticon anticon-delete" *ngIf="item.id"></i> + <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + <!-- PNFList --> + <div class="list" *ngIf="tab === 'PNF'"> + <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> + <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%" 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> + </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 nzType="info" (click)="showPnfConfirm(i,item.id)" class="anticon anticon-delete"></i> + <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + </nz-tab> </nz-tabset> diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index ab118737..099383a2 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -9,6 +9,38 @@ hr { background-color: #dce1e7; margin-bottom: 20px; } +.switch_btn { + position: absolute; + right: 6%; + top: 18px; + border: 1px solid #3fa8eb; + width: 8%; + border-radius: 10px; + margin-bottom: 18px; + span { + display: block; + float: left; + text-align: center; + width: 50%; + color: #3fa8eb; + font-weight: 700; + cursor: pointer; + } + span:first-child { + border-radius: 10px 0 0 10px; + } + span:last-child { + border-radius: 0 10px 10px 0; + } + span.left_b { + border-left: 1px solid #3fa8eb; + } + span.active { + color: #fff; + background: #3fa8eb; + } +} + .list { background-color: #fff; border-radius: 5px; 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 650f2162..794df742 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 @@ -3,7 +3,7 @@ import { Component, OnInit, HostBinding } from '@angular/core'; // import { MyhttpService } from '../../myhttp.service'; import { onboardService } from '../../onboard.service'; import { slideToRight } from '../../animates'; -import { NzMessageService, UploadFile } from 'ng-zorro-antd'; +import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; import { filter } from 'rxjs/operators'; import { Title } from '@angular/platform-browser'; @@ -24,6 +24,8 @@ export class OnboardVnfVmComponent implements OnInit { vnf: 'https://jsonplaceholder.typicode.com/posts/', pnf: 'https://jsonplaceholder.typicode.com/posts/', }; + // delete Modal + confirmModal: NzModalRef; nsdInfoId = ''; vnfPkgId =''; pnfdInfoId = ''; @@ -32,7 +34,7 @@ export class OnboardVnfVmComponent implements OnInit { fileListNS: UploadFile[] = []; fileListVNF: UploadFile[] = []; fileListPNF: UploadFile[] = []; - constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title) { } + constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService) { } //default 默认调用ns数据 ngOnInit() { @@ -53,7 +55,7 @@ export class OnboardVnfVmComponent implements OnInit { tabs = ['NS', 'VNF', 'PNF']; isVisible = false; - isOkLoading = false; + isOkLoading = false; showModal(): void { this.isVisible = true; } @@ -66,6 +68,7 @@ export class OnboardVnfVmComponent implements OnInit { handleTabChange(tab,nsdInfoId,url) { this.tabTitle = tab; console.log(tab); + console.log(nsdInfoId); console.log(this.url); switch (tab) { case 'NS': @@ -113,7 +116,7 @@ export class OnboardVnfVmComponent implements OnInit { } //vnf beforeUpload - beforeUploadVNF = (file: UploadFile,tab): boolean => { + beforeUploadVNF = (file: UploadFile): boolean => { this.fileListVNF.push(file); console.log('beforeUpload'); // this.myhttp.getCreatensData("createVnfData",requestBody)//线上 @@ -129,7 +132,7 @@ export class OnboardVnfVmComponent implements OnInit { } // //pnf eforeUpload - beforeUploadPNF = (file: UploadFile,tab): boolean => { + beforeUploadPNF = (file: UploadFile): boolean => { this.fileListPNF.push(file); console.log('beforeUpload'); // this.myhttp.getCreatensData("createPnfData",requestBody) //线上 @@ -143,27 +146,25 @@ export class OnboardVnfVmComponent implements OnInit { }) 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.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.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.handleUpload(this.url.pnf, tab); this.getTablePnfData(); break } @@ -174,26 +175,26 @@ export class OnboardVnfVmComponent implements OnInit { console.log('startUpload') const formData = new FormData(); // tslint:disable-next-line:no-any - 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 + 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', url, formData, { + const req = new HttpRequest('PUT', url, formData, { reportProgress: true, withCredentials: true }); @@ -242,7 +243,8 @@ export class OnboardVnfVmComponent implements OnInit { .subscribe((data) => { console.log('NSlist-sdc-->',data) this.sdcData = data.body; - this.tableData = this.vfcData.concat(this.sdcData) + this.tableData = this.MergeArray(this.vfcData, this.sdcData) + // this.tableData = this.vfcData.concat(this.sdcData) }, (err) => { console.log(err); }) @@ -254,13 +256,13 @@ export class OnboardVnfVmComponent implements OnInit { let paramsObj = { pageIndex: this.pageIndex, pageSize: this.pageSize, - nameSort: this.sortValue + // nameSort: this.sortValue } this.myhttp.getOnboardTableVnfData(paramsObj) .subscribe((data) => { console.log("vnfList-->", data); - // this.total = data["body"].length; //body length + // this.total = data["body"]; //body length // console.log( this.total) this.vfcData = data.body; // this.tableData = data.body; @@ -272,9 +274,10 @@ export class OnboardVnfVmComponent implements OnInit { // sdc this.myhttp.getSDC_VNFTableData() .subscribe((data) => { - console.log('vnfList-sdc-->',data) + console.log('vnfList-sdc-->', data) this.sdcData = data; - this.tableData = this.vfcData.concat(this.sdcData) + // this.tableData = this.vfcData.concat(this.sdcData) + this.tableData = this.MergeArray(this.vfcData, this.sdcData) }, (err) => { console.log(err); }) @@ -286,9 +289,9 @@ export class OnboardVnfVmComponent implements OnInit { let paramsObj = { pageIndex: this.pageIndex, pageSize: this.pageSize, - nameSort: this.sortValue + // nameSort: this.sortValue } - + this.myhttp.getOnboardTablePnfData(paramsObj) .subscribe((data) => { console.log("pnfList-->", data); @@ -299,16 +302,13 @@ export class OnboardVnfVmComponent implements OnInit { }) } - - sort(sort: { key: string, value: string }): void { - console.log(sort); - this.sortName = sort.key; - this.sortValue = sort.value; - this.getTableData(); - } + // sort(sort: { key: string, value: string }): void { + // console.log(sort); + // this.sortName = sort.key; + // this.sortValue = sort.value; + // this.getTableData(); + // } -//----------------------------------------------------------------------------------- - //选择条数 // searchNsData(reset: boolean = false) { // console.log('dddd',reset) @@ -320,16 +320,17 @@ export class OnboardVnfVmComponent implements OnInit { // ns onboard updataNsService(id) { console.log(id); + let requestBody = { "csarId": id } this.myhttp.getNsonboard(requestBody) .subscribe((data) => { console.log('onboard ns sdc', data); + this.getTableData(); }, (err) => { console.log(err); }) - } // searchVnfData(reset: boolean = false) { @@ -342,10 +343,11 @@ export class OnboardVnfVmComponent implements OnInit { console.log(id) let requestBody = { "csarId": id - } + } this.myhttp.getVnfonboard(requestBody) .subscribe((data) => { console.log('onboard vnf sdc', data); + this.getTableVnfData(); }, (err) => { console.log(err); }) @@ -364,6 +366,46 @@ export class OnboardVnfVmComponent implements OnInit { //-------------------------------------------------------------------------------- /* delete 删除按钮 */ + // ns + showConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deleteNsService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } + + //vnf + showVnfConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deleteVnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } + //vnf + showPnfConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deletePnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } //delete nsItem deleteNsService(index,pkgid) { console.log(pkgid) @@ -376,8 +418,8 @@ export class OnboardVnfVmComponent implements OnInit { }) console.log(index) this.tableData.splice(index, 1) - console.log(this.tableData.length) - // this.getTableData() + console.log('数组长度',this.tableData.length) + this.getTableData() } //delete vnfItem @@ -412,9 +454,7 @@ export class OnboardVnfVmComponent implements OnInit { this.getTablePnfData() } - -//-------------------------------------------------------------------------------------- - //download 下载 + //下载download // downloadNsService(id) { // console.log('download') // console.log(id) @@ -436,5 +476,38 @@ export class OnboardVnfVmComponent implements OnInit { // }) // } + // downloadPnfService(id) { + // console.log('downloadPnf') + // console.log(id) + // this.myhttp.downloadNsData(id) + // .subscribe((data) => { + // console.log(44, data); + // }, (err) => { + // console.log(err); + // }) + // } + //合并并去重 + MergeArray(arr1, arr2) { + var _arr = new Array(); + for (var i = 0; i < arr1.length; i++) { + if (arr1[i] != "") { + _arr.push(arr1[i]); + } + } + for (var i = 0; i < arr2.length; i++) { + var flag = true; + for (var j = 0; j < arr1.length; j++) { + // 根据vfc列表arr1的id和sdc列表arr2的uuid去重 + if (arr2[i].uuid == arr1[j].id) { + flag = false; + break; + } + } + if (flag && arr2[i] != "") { + _arr.push(arr2[i]); + } + } + return _arr; + } } |