@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-------------------------------------------
+
}
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>
</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>
<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>
<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>
<!-- <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> -->
</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>
<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> -->
</nz-table>
</div>
</nz-tab>
-</nz-tabset>
\ No newline at end of file
+</nz-tabset>
+
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',
})
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
});
.subscribe(
(event: {}) => {
this.uploading = false;
- this.getTableData();
console.log('upload successfully')
this.msg.success('upload successfully.');
},
}
);
}
- //表格数据
- 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() {
// 查询参数: 当前页码，每页条数，排序方式
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 = {
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 = {
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);
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)
}, (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);
+ // })
+ // }
+
+
}
Code Review / usecase-ui.git / commitdiff