See the License for the specific language governing permissions and
limitations under the License.
-->
+
+<!-- tab -->
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
- <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
- <!-- nsList -->
- <div class="list" *ngIf="tab === 'NS'">
- <div class="listUploadContainer">
- <div class="listupload">
- <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"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
- <p class="ant-upload-hint"></p>
- </nz-upload>
- <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length === 0" class="upload">
- {{ nsuploading ? 'Uploading' : 'Start Upload' }}
- </button>
+ <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"></nz-tab>
+</nz-tabset>
+<div class="list">
+ <!-- upload -->
+ <div class="listUploadContainer">
+ <div class="listupload">
+ <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"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
+ <p class="ant-upload-hint"></p>
+ </nz-upload>
+ <button nz-button [nzLoading]="uploading" (click)="onClick()" [disabled]="fileList.length == 0" class="upload">
+ {{ uploading ? 'Uploading' : 'Start Upload' }}
+ </button>
+ </div>
+ <div class="listlin"></div>
+ <div class="listfile">
+ <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
+ <div class="nouploadfile" [style.display]="display">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
+ <div class="listfilebgc" *ngIf="file">
+ <i class="anticon anticon-link icon"></i>
+ <div class="color" [ngClass]="{'progress':file.status}">{{file.name}}</div>
+ <div class="color" *ngIf="file.status">
+ <nz-progress [nzPercent]="file.progress" [nzShowInfo]="false"></nz-progress>
</div>
- <div class="listlin"></div>
- <div class="listfile">
- <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
- <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
- <div class="listfilebgc" *ngIf="nsfile">
- <i class="anticon anticon-link icon"></i>
- <div class="color" [ngClass]="{'progress':nsfile.status}">{{nsfile.name}}</div>
- <div class="color" *ngIf="nsfile.status">
- <nz-progress [nzPercent]="nsfile.progress" [nzShowInfo]="false"></nz-progress>
- </div>
- <div class="color" *ngIf="!nsfile.status">
- <span *ngIf="nsfile.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
- <span *ngIf="nsfile.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
- </div>
- <div *ngIf="!nsfile.status">
- <i class="anticon anticon-check-circle success" *ngIf="nsfile.success === 0"></i>
- <i class="anticon anticon-exclamation-circle fail" *ngIf="nsfile.success === 1"></i>
- </div>
- </div>
+ <div class="color" *ngIf="!file.status">
+ <span *ngIf="file.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
+ <span *ngIf="file.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
</div>
- </div>
- <nz-spin [nzSpinning]="isSpinning" class="listContainer">
- <div class="mask" *ngIf="isSpinning"></div>
- <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true"
- [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="nspageSize"
- [(nzPageIndex)]='nspageIndex' nzSize="middle">
- <thead>
- <tr class="theadColor">
- <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th>
- <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td>{{i+1}}</td>
- <td>{{item.nsdName || item.name }}</td>
- <td>{{item.nsdVersion || item.version}}</td>
- <td>{{item.nsdOnboardingState ? item.nsdOnboardingState : status}}</td>
- <td>{{item.nsdOperationalState}}</td>
- <td>{{item.nsdUsageState}}</td>
- <td>
- <i [ngClass]="{'cannotclick':onboardData.status === 'onboarding' && i === currentIndex}"
- class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i,notificationModel)"
- *ngIf="item.uuid"></i>
- <i class="anticon anticon-delete" nzType="info" (click)="showDeleteConfirm(i,item.id,tab,notificationModel)"
- *ngIf="item.id"></i>
-
- </td>
- </tr>
- </tbody>
- </nz-table>
- </nz-spin>
-
- </div>
- <!-- VNFList -->
- <div class="list" *ngIf="tab === 'VNF'">
- <div class="listUploadContainer">
- <div class="listupload">
- <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 CSAR File here</p>
- <p class="ant-upload-hint"></p>
- </nz-upload>
- <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length === 0" class="upload">
- {{ vnfuploading ? 'Uploading' : 'Start Upload' }}
- </button>
- </div>
- <div class="listlin"></div>
- <div class="listfile">
- <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
- <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
- <div class="listfilebgc" *ngIf="vnffile">
- <i class="anticon anticon-link"></i>
- <div class="color" [ngClass]="{'progress':vnffile.status === true}">{{vnffile.name}}</div>
- <div class="color" *ngIf="vnffile.status">
- <nz-progress [nzPercent]="vnffile.progress" [nzShowInfo]="false"></nz-progress>
- </div>
- <div class="color" *ngIf="!vnffile.status">
- <span *ngIf="vnffile.success === 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
- <span *ngIf="vnffile.success === 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
- </div>
- <div *ngIf="!vnffile.status">
- <i class="anticon anticon-check-circle success" *ngIf="vnffile.success === 0"></i>
- <i class="anticon anticon-exclamation-circle fail" *ngIf="vnffile.success === 1"></i>
- </div>
+ <div *ngIf="!file.status">
+ <i class="anticon anticon-check-circle success" *ngIf="file.success === 0"></i>
+ <i class="anticon anticon-exclamation-circle fail" *ngIf="file.success === 1"></i>
</div>
</div>
- </div>
- <nz-spin [nzSpinning]="isSpinning" class="listContainer">
- <div class="mask" *ngIf="isSpinning"></div>
- <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true"
- [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="vnfpageSize"
- [(nzPageIndex)]='vnfpageIndex' nzSize="middle">
- <thead>
- <tr>
- <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th>
- <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let item of nzTable.data; let i = index;">
- <td>{{i+1}}</td>
- <td>{{item.vnfProductName || item.name }}</td>
- <td>{{item.vnfdVersion || item.version}}</td>
- <td>{{item.onboardingState}}</td>
- <td>{{item.operationalState}}</td>
- <td>{{item.usageState}}</td>
- <td>
- <i [ngClass]="{'cannotclick':onboardData.status === 'onboarding' && i === currentIndex}"
- class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i,notificationModel)"
- *ngIf="item.uuid"></i>
- <i class="anticon anticon-delete" (click)="showDeleteConfirm(i,item.id,tab,notificationModel)"
- *ngIf="item.id"></i>
- </td>
- </tr>
- </tbody>
- </nz-table>
- </nz-spin>
-
</div>
- <!-- PNFList -->
- <div class="list" *ngIf="tab === 'PNF'">
- <div class="listUploadContainer">
- <div class="listupload">
- <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 CSAR File here</p>
- <p class="ant-upload-hint"></p>
- </nz-upload>
- <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length === 0" class="upload">
- {{ pnfuploading ? 'Uploading' : 'Start Upload' }}
- </button>
- </div>
- <div class="listlin"></div>
- <div class="listfile">
- <div class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
- <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
- <div class="listfilebgc" *ngIf="pnffile">
- <i class="anticon anticon-link"></i>
- <div class="color" [ngClass]="{'progress':pnffile.status == true}">{{pnffile.name}}</div>
- <div class="color" *ngIf="pnffile.status">
- <nz-progress [nzPercent]="pnffile.progress" [nzShowInfo]="false"></nz-progress>
- </div>
- <div class="color" *ngIf="!pnffile.status">
- <span *ngIf="pnffile.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
- <span *ngIf="pnffile.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
- </div>
- <div *ngIf="!pnffile.status">
- <i class="anticon anticon-check-circle success" *ngIf="pnffile.success == 0"></i>
- <i class="anticon anticon-exclamation-circle fail" *ngIf="pnffile.success == 1"></i>
- </div>
- </div>
- </div>
+ </div>
+ <!-- table -->
+ <nz-spin [nzSpinning]="isSpinning" class="listContainer">
+ <div class="mask" *ngIf="isSpinning"></div>
+ <nz-table #nzTable [nzData]="currentTab === 'NS'? nsTableData: (currentTab === 'VNF'? vnfTableData : pnfTableData)" nzShowSizeChanger [nzFrontPagination]="true"
+ [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="pageSize"
+ [(nzPageIndex)]='pageIndex' nzSize="middle">
+ <thead>
+ <tr class="theadColor">
+ <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
+ <th nzWidth="15%" *ngIf="currentTab !== 'PNF'"> {{"i18nTextDefine_OperationalState" | translate}} </th>
+ <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
+ <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
+ </tr>
+ </thead>
+ <tbody *ngIf="currentTab === 'NS'">
+ <tr *ngFor="let item of nzTable.data;let i = index;">
+ <td>{{i+1}}</td>
+ <td>{{item.nsdName || item.name }}</td>
+ <td>{{item.nsdVersion || item.version}}</td>
+ <td>{{item.nsdOnboardingState ? item.nsdOnboardingState : status}}</td>
+ <td>{{item.nsdOperationalState}}</td>
+ <td>{{item.nsdUsageState}}</td>
+ <td>
+ <i [ngClass]="{'cannotclick': isUpdate}"
+ class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid,notificationModel)"
+ *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,notificationModel)"
+ *ngIf="item.id"></i>
+ </td>
+ </tr>
+ </tbody>
+ <tbody *ngIf="currentTab === 'VNF'">
+ <tr *ngFor="let item of nzTable.data;let i = index;">
+ <td>{{i+1}}</td>
+ <td>{{item.vnfProductName || item.name }}</td>
+ <td>{{item.vnfdVersion || item.version}}</td>
+ <td>{{item.onboardingState}}</td>
+ <td>{{item.operationalState}}</td>
+ <td>{{item.usageState}}</td>
+ <td>
+ <i [ngClass]="{'cannotclick': isUpdate}"
+ class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.uuid,notificationModel)"
+ *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,notificationModel)"
+ *ngIf="item.id"></i>
+ </td>
+ </tr>
+ </tbody>
+ <tbody *ngIf="currentTab === 'PNF'" >
+ <tr *ngFor="let item of nzTable.data; let i = index;">
+ <td>{{i+1}}</td>
+ <td>{{item.pnfdName}}</td>
+ <td>{{item.pnfdVersion}}</td>
+ <td>{{item.pnfdOnboardingState}}</td>
+ <td>{{item.pnfdUsageState}}</td>
+ <td>
+ <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,notificationModel)"></i>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </nz-spin>
+</div>
+<ng-template #notificationModel >
+ <div class="ant-notification-notice-content">
+ <div class="ant-notification-notice-with-icon">
+ <span class="ant-notification-notice-icon">
+ <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
+ </span>
+ <div class="ant-notification-notice-message">
+ {{notificationAttributes.title}}
+ {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"i18nTextDefine_"+notificationAttributes.status | translate}}
</div>
- <nz-spin [nzSpinning]="isSpinning" class="listContainer">
- <div class="mask" *ngIf="isSpinning"></div>
- <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true"
- [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [(nzPageSize)]="pnfpageSize"
- [(nzPageIndex)]='pnfpageIndex' nzSize="middle">
- <thead>
- <tr>
- <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
- <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
- <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td>{{i+1}}</td>
- <td>{{item.pnfdName}}</td>
- <td>{{item.pnfdVersion}}</td>
- <td>{{item.pnfdOnboardingState}}</td>
- <td>{{item.pnfdUsageState}}</td>
- <td>
- <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id,tab,notificationModel)"></i>
- </td>
- </tr>
- </tbody>
- </nz-table>
- </nz-spin>
-
- </div>
- </nz-tab>
- <!--2019.08.14 add notification-->
- <ng-template #notificationModel >
- <div class="ant-notification-notice-content">
- <div class="ant-notification-notice-with-icon">
- <span class="ant-notification-notice-icon">
- <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
- </span>
- <div class="ant-notification-notice-message">
- {{notificationAttributes.title}}
- {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"i18nTextDefine_"+notificationAttributes.status | translate}}
+ <div class="ant-notification-notice-description">
+ <div class="notificationlist">
+ <p>{{notificationAttributes.title}} id: </p>
+ <span>{{ notificationAttributes.id }}</span>
</div>
- <div class="ant-notification-notice-description">
- <div class="notificationlist">
- <p>{{notificationAttributes.title}} id: </p>
- <span>{{ notificationAttributes.id }}</span>
- </div>
- </div>
- <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
</div>
+ <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
</div>
- </ng-template>
-</nz-tabset>
+ </div>
+</ng-template>
*/
import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
-import { NzNotificationService, NzCollapseModule } from 'ng-zorro-antd';
+import { NzNotificationService } from 'ng-zorro-antd';
import { onboardService } from '../../../core/services/onboard.service';
import { slideToRight } from '../../../shared/utils/animates';
import { NzMessageService, UploadFile, NzModalRef, NzModalService } 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;
- // delete Modal
- confirmModal: NzModalRef;
- nsdInfoId: string;
- vnfPkgId: string;
- pnfdInfoId: string;
- nsuploading:boolean = false;
- vnfuploading:boolean = false;
- pnfloading: boolean = false;
- fileListNS: UploadFile[] = [];
- fileListVNF: UploadFile[] = [];
- fileListPNF: UploadFile[] = [];
- // onboard initial value
+ // upload
+ tabs: string[] = ['NS', 'VNF', 'PNF'];
+ currentTab: string = 'NS'
+ fileList: UploadFile[] = [];
+ uploading:boolean = false;
+ infoId: string;
+ display: string = 'block';
+
+ // table
+ isSpinning: boolean = false;
+ nsTableData: any[];
+ vnfTableData: any[];
+ pnfTableData: any[];
status: string = "Onboard Available";
+ pageIndex: number = 1;
+ pageSize: number = 10;
+
+ // update or delete
+ isUpdate: boolean = false;
jobId: string;
+
//url
url = {
- // line up
ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content',
vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content',
pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content'
};
+
+ file: {
+ name: string,
+ uid: string,
+ progress: number,
+ status: boolean,
+ success: number
+ };
+
constructor(
private myhttp: onboardService,
private http: HttpClient,
private modalService: NzModalService,
private notification: NzNotificationService
) { }
+
//default Call ns data by default
ngOnInit() {
this.getTableData();
}
- //Tabular data
- nstableData: any;
- vnftableData: any;
- pnftableData: any;
- nspageIndex: number = 1;
- nspageSize: number = 10;
- vnfpageIndex: number = 1;
- vnfpageSize: number = 10;
- pnfpageIndex: number = 1;
- pnfpageSize: number = 10;
-
- nsloading: boolean = false;
- tabs: string[] = ['NS', 'VNF', 'PNF'];
- isSpinning: boolean = false;
- isNone: string = 'block';
-
- //2019.08.14 add
notificationAttributes: {
title: string,
imgPath: string,
status: string,
id: string
}
- setNotification({ title, imgPath, action, status, id }):void{
- this.notificationAttributes = { title, imgPath, action, status, id }
+ setNotification({ imgPath, action, status, id }):void{
+ this.notificationAttributes = { title: this.currentTab, imgPath, action, status, id }
}
- notificationSuccess(notificationModel,title,action,id) {
- this.setNotification({ title, imgPath:"assets/images/execute-success.png", action, status:"Success", id })
+ notificationSuccess(notificationModel: TemplateRef<{}>, action: string, id: string): void {
+ this.setNotification({ imgPath:"assets/images/execute-success.png", action, status:"Success", id })
this.notification.template(notificationModel);
}
- notificationFailed(notificationModel,title,action,id) {
- this.setNotification({ title, imgPath:"assets/images/execute-faild.png", action, status:"Failed", id })
+ notificationFailed(notificationModel: TemplateRef<{}>, action: string ,id: string): void{
+ this.setNotification({ imgPath:"assets/images/execute-faild.png", action, status:"Failed", id })
this.notification.template(notificationModel);
}
-
// Handling tab switching request data
- handleTabChange(tab) {
+ handleTabChange(tab: string): void {
+ this.currentTab = tab;
+ this.fileList = [];
+ delete this.file;
switch (tab) {
case 'NS':
- this.nstableData = [];
this.getTableData();
break
case 'VNF':
- this.vnftableData = [];
this.getTableVnfData()
break
case 'PNF':
- this.pnftableData = [];
this.getTablePnfData()
break
}
}
-
//before put create--Drag and drop files to the page before uploading
requestBody = {
"userDefinedData": {
}
}
-
- // ns beforeUpload
- beforeUploadNS = (file: UploadFile): boolean => {
- this.fileListNS.splice(0,1,file);
- this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line
- .subscribe((data) => {
- console.log(data)
- this.nsdInfoId = data["id"];
- }, (err) => {
- console.log(err);
- })
- return false;
- }
-
- //vnf beforeUpload
- beforeUploadVNF = (file: UploadFile): boolean => {
- this.fileListVNF.splice(0,1,file);
- this.myhttp.getCreatensData("createVnfData", this.requestBody)//on-line
- .subscribe((data) => {
- this.vnfPkgId = data["id"];
- }, (err) => {
- console.log(err);
- })
- return false;
- }
-
- // //pnf eforeUpload
- beforeUploadPNF = (file: UploadFile): boolean => {
- this.fileListPNF.splice(0,1,file)
- this.myhttp.getCreatensData("createPnfData", this.requestBody) //on-line
+ beforeUpload = (file: UploadFile): boolean => {
+ this.fileList.splice(0,1,file);
+ let API: string;
+ if(this.currentTab === 'NS'){
+ API = 'createNetworkServiceData';
+ }else if(this.currentTab === 'VNF'){
+ API = 'createVnfData';
+ }else {
+ API = 'createPnfData';
+ }
+ this.myhttp.getCreatensData(API, this.requestBody)//on-line
.subscribe((data) => {
- this.pnfdInfoId = data["id"];
+ this.infoId = data["id"];
}, (err) => {
console.log(err);
})
return false;
}
- //Drag and drop and click the upload button
- onClick(tab) {
- this.isNone = 'none';
- switch (tab) {
+ // Drag and drop and click the upload button
+ onClick(): void {
+ this.display = 'none';
+ switch (this.currentTab) {
case 'NS':
- this.handleUpload(this.url.ns.replace("*_*", this.nsdInfoId), tab);
+ this.handleUpload(this.url.ns.replace("*_*", this.infoId));
this.getTableData();
break
case 'VNF':
- this.handleUpload(this.url.vnf.replace("*_*", this.vnfPkgId), tab);
+ this.handleUpload(this.url.vnf.replace("*_*", this.infoId));
this.getTableVnfData()
break
case 'PNF':
- this.handleUpload(this.url.pnf.replace("*_*", this.pnfdInfoId), tab);
+ this.handleUpload(this.url.pnf.replace("*_*", this.infoId));
this.getTablePnfData();
break
}
}
- nsfile: {
- name: string,
- uid: string,
- progress: number,
- status: boolean,
- success: number
- };
- vnffile: {
- name: string,
- uid: string,
- progress: number,
- status: boolean,
- success: number
- };
- pnffile:{
- name: string,
- uid: string,
- progress: number,
- status: boolean,
- success: number
- }
- //put Upload Upload
- handleUpload(url, tab): void {
+ handleUpload(url: string): void {
const formData = new FormData();
// tslint:disable-next-line:no-any
- switch (tab) {
- case "NS":
- this.fileListNS.forEach((file: any) => {
- formData.set('file', file);
- });
- this.nsuploading = true;
- this.nsfile = {
- name: this.fileListNS[0].name,
- uid: this.fileListNS[0].uid,
- progress: 0,
- status: true,
- success: 0
- };
- let requeryNS = (nsfile) => {
- nsfile.progress += 3;
- setTimeout(() => {
- if (nsfile.progress < 100) {
- requeryNS(nsfile)
- }
- }, 100)
- };
- requeryNS(this.nsfile);
- break
- case "VNF":
- this.fileListVNF.forEach((file: any) => {
- formData.set('file', file);
- });
- this.vnfuploading = true;
- this.vnffile = {
- name: this.fileListVNF[0].name,
- uid: this.fileListVNF[0].uid,
- progress: 0,
- status: true,
- success: 0
- };
- let requeryVnf = (vnffile) => {
- setTimeout(() => {
- vnffile.progress += 3;
- if (vnffile.progress < 100) {
- requeryVnf(vnffile)
- }
- }, 100)
- };
- requeryVnf(this.vnffile);
- break
- case "PNF":
- this.fileListPNF.forEach((file: any) => {
- formData.set('file', file);
- });
- this.pnfloading = true;
- this.pnffile = {
- name: this.fileListPNF[0].name,
- uid: this.fileListPNF[0].uid,
- progress: 0,
- status: true,
- success: 0
- };
- let requeryPnf = (pnffile) => {
- setTimeout(() => {
- pnffile.progress += 3;
- if (pnffile.progress < 100) {
- requeryPnf(pnffile)
- }
- }, 100)
- };
- requeryPnf(this.pnffile);
- break
- }
- // line PUT
+ this.fileList.forEach((file: any) => {
+ formData.set('file', file);
+ });
+ this.uploading = true;
+ this.file = {
+ name: this.fileList[0].name,
+ uid: this.fileList[0].uid,
+ progress: 0,
+ status: true,
+ success: 0
+ };
+ let requery = (file) => {
+ file.progress += 3;
+ setTimeout(() => {
+ if (file.progress < 100) {
+ requery(file)
+ }
+ }, 100)
+ };
+ requery(this.file);
const req = new HttpRequest('PUT', url, formData, {
reportProgress: true,
withCredentials: true
});
//Upload pre-empty array
- this.fileListNS = [];
- this.fileListVNF = [];
- this.fileListPNF = [];
+ this.fileList = [];
this.http.request(req)
.pipe(filter(e => e instanceof HttpResponse))
.subscribe(
(event: {}) => {
- if (tab == "NS") {
- this.nsfile.progress = 100;
- this.nsfile.status = false;
- }
- if (tab == "VNF") {
- this.vnffile.progress = 100;
- this.vnffile.status = false;
- }
- if (tab == "PNF") {
- this.pnffile.progress = 100;
- this.pnffile.status = false;
- }
- this.changeUploadingSta(tab);
- this.isNone = 'block';
+ this.file.progress = 100;
+ this.file.status = false;
+ this.display = 'block';
+ this.uploading = false;
this.msg.success('upload successfully.');
},
err => {
- if (tab == "NS") {
- this.nsfile.progress = 100;
- this.nsfile.status = false;
- this.nsfile.success = 1;
- }
- if (tab == "VNF") {
- this.vnffile.progress = 100;
- this.vnffile.status = false;
- this.vnffile.success = 1;
- }
- if (tab == "PNF") {
- this.pnffile.progress = 100;
- this.pnffile.status = false;
- this.pnffile.success = 1;
- }
- this.changeUploadingSta(tab);
- this.isNone = 'block';
+ this.file.progress = 100;
+ this.file.status = false;
+ this.file.success = 1;
+ this.uploading = false;
this.msg.error('upload failed.');
}
);
}
- // Control the status of uploading
- changeUploadingSta(tab) {
- switch (tab) {
- case "NS":
- this.nsuploading = false;
- break
- case "VNF":
- this.vnfuploading = false;
- break
- case "PNF":
- this.pnfloading = false;
- }
- }
-
- //----------------------------------------------------------------------------------------------
-
// Get the NS list
- getTableData() {
+ getTableData(): void{
this.isSpinning = true;
//ns vfc lists
this.myhttp.getOnboardTableData()
.subscribe((data) => {
- this.nstableData = data;
+ this.nsTableData = data;
//ns sdc list
this.myhttp.getSDC_NSTableData()
.subscribe((data) => {
this.isSpinning = false; //loading hide
- let nssdcData = data;
- this.nstableData.map((nsvfc) => { nsvfc.sameid = nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
- let sameData = nssdcData.filter((nssdc) => { return !this.nstableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
- this.nstableData = this.nstableData.concat(sameData);
+ let nsData = data;
+ // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
+ let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
+ this.nsTableData = this.nsTableData.concat(sameData);
}, (err) => {
console.error(err);
this.isSpinning = false;
console.error(err);
this.isSpinning = false;
})
-
}
// Get the vnf list
- getTableVnfData() {
+ getTableVnfData(): void{
this.isSpinning = true;
//vnf vfc lists
this.myhttp.getOnboardTableVnfData()
.subscribe((data) => {
- this.vnftableData = data;
+ this.vnfTableData = data;
//vnf sdc lists
this.myhttp.getSDC_VNFTableData()
.subscribe((data) => {
this.isSpinning = false; //loading hide
- let vnfsdcData = data;
- this.vnftableData.map((vnfvfc) => { vnfvfc.sameid = vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; });
- let sameData = vnfsdcData.filter((vnfsdc) => { return !this.vnftableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) });
- this.vnftableData = this.vnftableData.concat(sameData);
+ let vnfData = data;
+ // this.VNFTableData.map((vnfvfc) => { vnfvfc.sameid = this.vnfData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; });
+ let sameData = vnfData.filter((vnfsdc) => { return !this.vnfTableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) });
+ this.vnfTableData = this.vnfTableData.concat(sameData);
}, (err) => {
console.error(err);
this.isSpinning = false;
})
-
}, (err) => {
console.error(err);
this.isSpinning = false;
this.isSpinning = true;
this.myhttp.getOnboardTablePnfData()
.subscribe((data) => {
- this.pnftableData = data;
+ this.pnfTableData = data;
this.isSpinning = false; //loading hide
}, (err) => {
console.error(err);
})
}
- //-----------------------------------------------------------------------------------
-
- // modal
- showConfirm(requestBody, notificationModel, id, type): void{
- let API = type === 'NS'? 'getNsonboard' : 'getVnfonboard';
+ // confirm
+ showConfirm(requestBody: object, notificationModel: TemplateRef<{}>, id: string): void{
+ let API = this.currentTab === 'NS'? 'getNsonboard' : 'getVnfonboard';
this.modalService.confirm({
nzTitle: '<p>Are you sure you want to do this?</p>',
- nzContent: '<b>Some descriptions</b>',
nzOnOk: () => {
this.myhttp[API](requestBody)
.subscribe((data) => {
if (data.status == "success") {
- if(type === 'NS'){
- this.onboardData.status = "onboarded";
- this.notificationSuccess(notificationModel, this.tabs[0],"OnboardingState",id);
+ if(this.currentTab === 'NS'){
+ this.isUpdate = false;
+ this.notificationSuccess(notificationModel, "OnboardingState", id);
this.getTableData();
}else{
this.jobId = data.jobId;
this.getTableVnfData();
}
} else {
- this.onboardData.status = "Failed";
- this.notificationFailed(notificationModel,this.tabs[0],"OnboardingState",id);
+ this.isUpdate = false;
+ this.notificationFailed(notificationModel, "OnboardingState", id);
return false
}
}, (err) => {
})
}
- //onboard status
- onboardData = {
- status: "onboard",
- progress: 0,
- }
- currentIndex = 0;
- // ns onboard Upload button
- updataNsService(id, index, notificationModel) {
- this.currentIndex = index;
- this.onboardData.status = "onboarding"; //Disabled
- this.onboardData.progress = 0;
- let requestBody = { "csarId": id };
- this.showConfirm(requestBody,notificationModel,id,'NS')
- }
- // vnf onboard Upload button
- updataVnfService(id, index, notificationModel) {
- this.currentIndex = index;
- this.onboardData.status = "onboarding"; //Disabled button
- this.onboardData.progress = 0;
+ // ns onboard Upload button
+ updataService(id: string, notificationModel: TemplateRef<{}>) {
+ this.isUpdate = true;
let requestBody = { "csarId": id };
- this.showConfirm(requestBody,notificationModel,id,'VNF')
- }
+ this.showConfirm(requestBody, notificationModel, id)
+ }
//Progress Progress inquiry
- queryProgress(jobId, notificationModel,id) {
+ queryProgress(jobId: string, notificationModel: TemplateRef<{}>, id: string): any{
let mypromise = new Promise((res) => {
this.myhttp.getProgress(jobId, 0)
.subscribe((data) => {
- if (data.responseDescriptor === null ||data.responseDescriptor === "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress === null) {
- this.onboardData.status = "onboarding";
+ if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) {
+ this.isUpdate = true;
setTimeout(() => {
- this.queryProgress(this.jobId, notificationModel,id);
+ this.queryProgress(this.jobId, notificationModel, id);
}, 10000)
return false
}
if (data.responseDescriptor.progress > 100) {
- this.onboardData.status = "Failed";
- this.notificationFailed(notificationModel,'VNS','OnboardingState',id);
+ this.isUpdate = false;
+ this.notificationFailed(notificationModel, 'OnboardingState', id);
}else if (data.responseDescriptor.progress < 100) {
- this.onboardData.status = "onboarding";
+ this.isUpdate = true;
setTimeout(() => {
this.queryProgress(this.jobId, notificationModel,id);
}, 5000)
} else {
res(data);
- this.onboardData.status = "onboarded";
- this.notificationSuccess(notificationModel,'VNS','OnboardingState',id);
+ this.isUpdate = false;
+ this.notificationSuccess(notificationModel, 'OnboardingState', id);
}
return false
})
return mypromise;
}
- //--------------------------------------------------------------------------------
/* delete button */
- showDeleteConfirm(pkgid, tab, notificationModel): void {
- this.confirmModal = this.modalService.confirm({
+ showDeleteConfirm(pkgid: string, notificationModel: TemplateRef<{}>): void {
+ this.modalService.confirm({
nzTitle: 'Do you Want to delete these items?',
nzContent: 'Do you Want to delete these items?',
nzOkText: 'Yes',
nzCancelText: 'No',
nzOnOk: () => new Promise((resolve) => {
- switch (tab) {
- case 'NS':
- this.deleteNsService(pkgid, notificationModel,resolve);
- break
- case 'VNF':
- this.deleteVnfService(pkgid, notificationModel,resolve);
- break
- case 'PNF':
- this.deletePnfService(pkgid, notificationModel,resolve);
- break
- }
+ this.deleteService(pkgid, notificationModel,resolve);
}).catch(() => console.log('Oops errors!'))
});
}
//delete nsItem
- deleteNsService(pkgid, notificationModel,resolve) {
- this.myhttp.deleteNsIdData(pkgid)
- .subscribe((data) => {
- this.notificationSuccess(notificationModel,'NS','OnboardingState',pkgid);
- resolve()
- //refresh list after successful deletion
- this.getTableData();
- }, (err) => {
- console.log(err);
- this.notificationFailed(notificationModel,'NS','OnboardingState',pkgid);
- })
- }
-
- //delete vnfItem
- deleteVnfService(pkgid, notificationModel,resolve) {
- this.myhttp.deleteVnfIdData(pkgid)
- .subscribe((data) => {
- this.notificationSuccess(notificationModel,'VNF','OnboardingState',pkgid);
- resolve()
- //refresh list after successful deletion
- this.getTableVnfData()
- }, (err) => {
- console.log(err);
- this.notificationFailed(notificationModel,'VNF','OnboardingState',pkgid);
- })
- }
-
- //delete PnfItem
- deletePnfService(pkgid, notificationModel,resolve) {
- this.myhttp.deletePnfIdData(pkgid)
+ deleteService(pkgid, notificationModel,resolve) {
+ let API: string;
+ if(this.currentTab === 'NS'){
+ API = 'deleteNsIdData';
+ }else if(this.currentTab === 'VNF'){
+ API = 'deleteVnfIdData';
+ }else{
+ API = 'deletePnfIdData';
+ }
+ this.myhttp[API](pkgid)
.subscribe((data) => {
- this.notificationSuccess(notificationModel,'PNF','OnboardingState',pkgid);
+ this.notificationSuccess(notificationModel, 'OnboardingState', pkgid);
resolve()
//refresh list after successful deletion
- this.getTablePnfData()
+ switch(this.currentTab){
+ case 'NS':
+ this.getTableData();
+ break
+ case 'VNF':
+ this.getTableVnfData();
+ break
+ case 'PNF':
+ this.getTablePnfData();
+ break
+ }
}, (err) => {
console.log(err);
- this.notificationFailed(notificationModel,'PNF','OnboardingState',pkgid);
+ this.notificationFailed(notificationModel, 'OnboardingState', pkgid);
})
}
-
}
Code Review / usecase-ui.git / commitdiff