diff options
Diffstat (limited to 'usecaseui-portal')
| -rw-r--r-- | usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html | 346 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts | 478 |
2 files changed, 268 insertions, 556 deletions
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html index 9ff2d9a8..d4429c0b 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -13,243 +13,131 @@ 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> diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts index b2b8cbb3..ed6f0d74 100644 --- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -15,11 +15,12 @@ */ 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', @@ -30,27 +31,42 @@ import { filter } from 'rxjs/operators'; 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, @@ -58,28 +74,12 @@ export class OnboardVnfVmComponent implements OnInit { 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, @@ -87,39 +87,37 @@ export class OnboardVnfVmComponent implements OnInit { 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": { @@ -129,239 +127,108 @@ export class OnboardVnfVmComponent implements OnInit { } } - - // 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; @@ -370,29 +237,27 @@ export class OnboardVnfVmComponent implements OnInit { 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; @@ -404,7 +269,7 @@ export class OnboardVnfVmComponent implements OnInit { this.isSpinning = true; this.myhttp.getOnboardTablePnfData() .subscribe((data) => { - this.pnftableData = data; + this.pnfTableData = data; this.isSpinning = false; //loading hide }, (err) => { console.error(err); @@ -412,21 +277,18 @@ export class OnboardVnfVmComponent implements OnInit { }) } - //----------------------------------------------------------------------------------- - - // 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; @@ -434,8 +296,8 @@ export class OnboardVnfVmComponent implements OnInit { 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) => { @@ -445,54 +307,38 @@ export class OnboardVnfVmComponent implements OnInit { }) } - //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 }) @@ -500,70 +346,48 @@ export class OnboardVnfVmComponent implements OnInit { 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); }) } - } |