diff options
Diffstat (limited to 'usecaseui-portal/src/app/services')
4 files changed, 332 insertions, 247 deletions
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css index a1cc6455..f6a13fd0 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -57,3 +57,4 @@ hr { .list nz-table tbody td i.anticon:hover { color: #147dc2; } + diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html index c552ba73..82d0fc51 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -34,202 +34,181 @@ </nz-tabset> --> <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> - <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab,nsdInfoId,url)"> - <!-- nsList --> - <div class="list" *ngIf="tab === 'NS'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> - <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS"> - <p class="ant-upload-drag-icon"> - <i nz-icon type="inbox" class="anticon anticon-inbox"></i> - </p> - <p class="ant-upload-text">Click or drag file to this area to upload</p> - <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> - </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" - style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} - </button> - <!-- tablist --> - <nz-table #nzTable [nzData]="tableData" - nzShowSizeChanger [nzFrontPagination]="true" - [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" - [nzTotal]='total' [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' - [nzLoading]="loading" - nzSize="middle" - (nzPageSizeChange)="searchNsData(true)"> - <!-- (nzPageIndexChange)="searchNsData()" --> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="5%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <!-- <th nzWidth="20%">Type</th> --> - <th nzWidth="10%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="20%">Operational State</th> - <th nzWidth="20%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td *ngIf="item.nsdId">{{item.nsdId}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - - <td *ngIf="item.nsdName">{{item.nsdName}}</td> - <td *ngIf="item.name">{{item.name}}</td> - - <!-- <td>{{item.onboardingFailureDetails.type}}</td> --> - <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> - <td *ngIf="item.version">{{ item.version }}</td> - <td> - <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', - 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span> - <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> --> - </td> - <td>{{item.nsdOperationalState}}</td> - <td>{{item.nsdUsageState}}</td> - <td> - <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> - <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i> - <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> --> - <i class="anticon anticon-delete" (click)="deleteNsService(i,item.id)" *ngIf="item.id"></i> - <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> --> - </td> - </tr> - </tbody> - </nz-table> - </div> - <!-- VNFList --> - <div class="list" *ngIf="tab === 'VNF'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> - <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF"> - <p class="ant-upload-drag-icon"> - <i nz-icon type="inbox" class="anticon anticon-inbox"></i> - </p> - <p class="ant-upload-text">Click or drag file to this area to upload</p> - <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> - </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" - style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} - </button> - <!-- tabList --> - <nz-table #nzTable [nzData]="tableData" - nzShowSizeChanger - [nzFrontPagination]="true" - [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" - [nzTotal]= 'total' - [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' - [nzLoading]="loading" - nzSize="middle" - (nzPageSizeChange)="searchVnfData(true)"> - <!--(nzPageIndexChange)="searchVnfData()" --> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="5%">NO</th> - <th nzWidth="10%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="10%">Version</th> - <th nzWidth="20%">Onboarding State</th> - <th nzWidth="15%">usageState</th> - <th nzWidth="20%">Operational State</th> - <th nzWidth="20%">Operation button</th> - </tr> - </thead> - <tbody> - <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <!-- <td>{{i+1}}</td> --> - <td *ngIf="item.id">{{item.id}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> - <td *ngIf="item.version">{{item.version}}</td> - <td>{{item.onboardingState}}</td> - <td>{{item.usageState}}</td> - <td>{{item.operationalState}}</td> - <!-- <td> - <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', - 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.operationalState}}</span> - <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> - </td> --> - <td> - <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> - <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i> - <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> --> - <i class="anticon anticon-delete" (click)="deleteVnfService(i,item.id)" id="{{ item.id}}" *ngIf="item.id"></i> - </td> - </tr> - <!-- </ng-template> --> - </tbody> - </nz-table> - </div> - <!-- PNFList --> - <div class="list" *ngIf="tab === 'PNF'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> - <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF"> - <p class="ant-upload-drag-icon"> - <i nz-icon type="inbox" class="anticon anticon-inbox"></i> - </p> - <p class="ant-upload-text">Click or drag file to this area to upload</p> - <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> - </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" - style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} - </button> - <!-- tabList --> - <nz-table #nzTable [nzData]="tableData" - nzShowSizeChanger - [nzFrontPagination]="true" - [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" - [nzTotal]= 'total' - [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' - [nzLoading]="loading" - nzSize="middle" - (nzPageSizeChange)="searchPnfData(true)"> - <!-- (nzPageIndexChange)="searchPnfData()" --> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="5%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="20%">Onboarding State</th> - <th nzWidth="20%">usageState</th> - <th nzWidth="25%">Operation button</th> - </tr> - </thead> - <tbody> - <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <!-- <td>{{i+1}}</td> --> - <td>{{item.id}}</td> - <td>{{item.pnfdName}}</td> - <td>{{item.pnfdVersion}}</td> - <td>{{item.pnfdOnboardingState}}</td> - <td>{{item.pnfdUsageState}}</td> - <!-- <td> - <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', - 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span> - <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> - </td> --> - <td> - <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> - <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> --> - <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> --> - <i class="anticon anticon-delete" (click)="deletePnfService(i,item.id)"></i> - </td> - </tr> - <!-- </ng-template> --> - </tbody> - </nz-table> - </div> - </nz-tab> + <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab, id, url)"> + <!-- nsList --> + <div class="list" *ngIf="tab === 'NS'"> + <h3 class="title"> Onboard {{tabTitle}} </h3> + <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS"> + <p class="ant-upload-drag-icon"> + <i nz-icon type="inbox" class="anticon anticon-inbox"></i> + </p> + <p class="ant-upload-text">Click or drag file to this area to upload</p> + <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> + </nz-upload> + <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" + style="margin-top: 16px"> + {{ uploading ? 'Uploading' : 'Start Upload' }} + </button> + <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" nzSize="middle"> + <!-- (nzPageIndexChange)="searchNsData()" (nzPageSizeChange)="searchNsData(true)"--> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <!-- <th nzWidth="20%">Type</th> --> + <th nzWidth="10%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="20%">Operational State</th> + <th nzWidth="20%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td *ngIf="item.nsdId">{{item.nsdId}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + + <td *ngIf="item.nsdName">{{item.nsdName}}</td> + <td *ngIf="item.name">{{item.name}}</td> + + <!-- <td>{{item.onboardingFailureDetails.type}}</td> --> + <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> + <td *ngIf="item.version">{{ item.version }}</td> + <td> + <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', + 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span> + <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> --> + </td> + <td>{{item.nsdOperationalState}}</td> + <td>{{item.nsdUsageState}}</td> + <td> + <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> + <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i> + <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> --> + <i nzType="info" (click)="showConfirm(i, item.id)" class="anticon anticon-delete" *ngIf="item.id" ></i> + <!-- (click)="deleteNsService(i,item.id)" --> + <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> + <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> --> + </td> + </tr> + </tbody> + </nz-table> + </div> + <!-- VNFList --> + <div class="list" *ngIf="tab === 'VNF'"> + <h3 class="title"> Onboard {{tabTitle}} </h3> + <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF"> + <p class="ant-upload-drag-icon"> + <i nz-icon type="inbox" class="anticon anticon-inbox"></i> + </p> + <p class="ant-upload-text">Click or drag file to this area to upload</p> + <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> + </nz-upload> + <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" + style="margin-top: 16px"> + {{ uploading ? 'Uploading' : 'Start Upload' }} + </button> + <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" nzSize="middle"> + <!-- (nzPageIndexChange)="searchVnfData()" (nzPageSizeChange)="searchVnfData(true)"--> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%">NO</th> + <th nzWidth="10%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="10%">Version</th> + <th nzWidth="20%">Onboarding State</th> + <th nzWidth="15%">usageState</th> + <th nzWidth="20%">Operational State</th> + <th nzWidth="20%">Operation button</th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <!-- <td>{{i+1}}</td> --> + <td *ngIf="item.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> + <td *ngIf="item.version">{{item.version}}</td> + <td>{{item.onboardingState}}</td> + <td>{{item.usageState}}</td> + <td>{{item.operationalState}}</td> + <!-- <td> + <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', + 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.operationalState}}</span> + <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> + </td> --> + <td> + <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> + <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i> + <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> --> + <i nzType="info" (click)="showVnfConfirm(i,item.id)" class="anticon anticon-delete" *ngIf="item.id"></i> + <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + <!-- PNFList --> + <div class="list" *ngIf="tab === 'PNF'"> + <h3 class="title"> Onboard {{tabTitle}} </h3> + <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF"> + <p class="ant-upload-drag-icon"> + <i nz-icon type="inbox" class="anticon anticon-inbox"></i> + </p> + <p class="ant-upload-text">Click or drag file to this area to upload</p> + <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> + </nz-upload> + <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" + style="margin-top: 16px"> + {{ uploading ? 'Uploading' : 'Start Upload' }} + </button> + <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" nzSize="middle"> + <!-- (nzPageIndexChange)="searchPnfData()" (nzPageSizeChange)="searchPnfData(true)"--> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="20%">Onboarding State</th> + <th nzWidth="20%">usageState</th> + <th nzWidth="25%">Operation button</th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <!-- <td>{{i+1}}</td> --> + <td>{{item.id}}</td> + <td>{{item.pnfdName}}</td> + <td>{{item.pnfdVersion}}</td> + <td>{{item.pnfdOnboardingState}}</td> + <td>{{item.pnfdUsageState}}</td> + <!-- <td> + <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', + 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span> + <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> + </td> --> + <td> + <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> + <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> --> + <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> --> + <i nzType="info" (click)="showPnfConfirm(i,item.id)" class="anticon anticon-delete"></i> + <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + </nz-tab> </nz-tabset> diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index ab118737..099383a2 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -9,6 +9,38 @@ hr { background-color: #dce1e7; margin-bottom: 20px; } +.switch_btn { + position: absolute; + right: 6%; + top: 18px; + border: 1px solid #3fa8eb; + width: 8%; + border-radius: 10px; + margin-bottom: 18px; + span { + display: block; + float: left; + text-align: center; + width: 50%; + color: #3fa8eb; + font-weight: 700; + cursor: pointer; + } + span:first-child { + border-radius: 10px 0 0 10px; + } + span:last-child { + border-radius: 0 10px 10px 0; + } + span.left_b { + border-left: 1px solid #3fa8eb; + } + span.active { + color: #fff; + background: #3fa8eb; + } +} + .list { background-color: #fff; border-radius: 5px; diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts index 650f2162..794df742 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -3,7 +3,7 @@ import { Component, OnInit, HostBinding } from '@angular/core'; // import { MyhttpService } from '../../myhttp.service'; import { onboardService } from '../../onboard.service'; import { slideToRight } from '../../animates'; -import { NzMessageService, UploadFile } from 'ng-zorro-antd'; +import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; import { filter } from 'rxjs/operators'; import { Title } from '@angular/platform-browser'; @@ -24,6 +24,8 @@ export class OnboardVnfVmComponent implements OnInit { vnf: 'https://jsonplaceholder.typicode.com/posts/', pnf: 'https://jsonplaceholder.typicode.com/posts/', }; + // delete Modal + confirmModal: NzModalRef; nsdInfoId = ''; vnfPkgId =''; pnfdInfoId = ''; @@ -32,7 +34,7 @@ export class OnboardVnfVmComponent implements OnInit { fileListNS: UploadFile[] = []; fileListVNF: UploadFile[] = []; fileListPNF: UploadFile[] = []; - constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title) { } + constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService) { } //default 默认调用ns数据 ngOnInit() { @@ -53,7 +55,7 @@ export class OnboardVnfVmComponent implements OnInit { tabs = ['NS', 'VNF', 'PNF']; isVisible = false; - isOkLoading = false; + isOkLoading = false; showModal(): void { this.isVisible = true; } @@ -66,6 +68,7 @@ export class OnboardVnfVmComponent implements OnInit { handleTabChange(tab,nsdInfoId,url) { this.tabTitle = tab; console.log(tab); + console.log(nsdInfoId); console.log(this.url); switch (tab) { case 'NS': @@ -113,7 +116,7 @@ export class OnboardVnfVmComponent implements OnInit { } //vnf beforeUpload - beforeUploadVNF = (file: UploadFile,tab): boolean => { + beforeUploadVNF = (file: UploadFile): boolean => { this.fileListVNF.push(file); console.log('beforeUpload'); // this.myhttp.getCreatensData("createVnfData",requestBody)//线上 @@ -129,7 +132,7 @@ export class OnboardVnfVmComponent implements OnInit { } // //pnf eforeUpload - beforeUploadPNF = (file: UploadFile,tab): boolean => { + beforeUploadPNF = (file: UploadFile): boolean => { this.fileListPNF.push(file); console.log('beforeUpload'); // this.myhttp.getCreatensData("createPnfData",requestBody) //线上 @@ -143,27 +146,25 @@ export class OnboardVnfVmComponent implements OnInit { }) return false; } - - //拖拽后点击上传按钮 onClick (tab) { switch (tab) { case 'NS': console.log(this.nsdInfoId); // this.handleUpload('http://ip:port/api/nsd/v1/ns_descriptors/{nsdInfoId}/nsd_content'); - this.handleUpload(this.url.ns,tab); + this.handleUpload(this.url.ns, tab); this.getTableData(); break case 'VNF': console.log(this.vnfPkgId); // this.handleUpload('http://ip:port/api/vnfpkgm/v1/vnf_packages/{vnfPkgId}/package_content'); - this.handleUpload(this.url.vnf,tab); + this.handleUpload(this.url.vnf, tab); this.getTableVnfData() break case 'PNF': console.log(this.pnfdInfoId); // this.handleUpload('http://ip:port/api/nsd/v1/pnf_descriptors/{pnfdInfoId}/pnfd_content'); - this.handleUpload(this.url.pnf,tab); + this.handleUpload(this.url.pnf, tab); this.getTablePnfData(); break } @@ -174,26 +175,26 @@ export class OnboardVnfVmComponent implements OnInit { console.log('startUpload') const formData = new FormData(); // tslint:disable-next-line:no-any - switch (tab) { - case 'NS': - this.fileListNS.forEach((file: any) => { - formData.append('files[]', file); - }); - break - case 'VNF': - this.fileListVNF.forEach((file: any) => { - formData.append('files[]', file); - }); - break - case 'PNF': - this.fileListPNF.forEach((file: any) => { - formData.append('files[]', file); - }); - break + switch(tab) { + case "NS": + this.fileListNS.forEach((file: any) => { + formData.append('files[]', file); + }); + break + case "VNF": + this.fileListVNF.forEach((file: any) => { + formData.append('files[]', file); + }); + break + case "PNF": + this.fileListPNF.forEach((file: any) => { + formData.append('files[]', file); + }); + break } this.uploading = true; // You can use any AJAX library you like - const req = new HttpRequest('POST', url, formData, { + const req = new HttpRequest('PUT', url, formData, { reportProgress: true, withCredentials: true }); @@ -242,7 +243,8 @@ export class OnboardVnfVmComponent implements OnInit { .subscribe((data) => { console.log('NSlist-sdc-->',data) this.sdcData = data.body; - this.tableData = this.vfcData.concat(this.sdcData) + this.tableData = this.MergeArray(this.vfcData, this.sdcData) + // this.tableData = this.vfcData.concat(this.sdcData) }, (err) => { console.log(err); }) @@ -254,13 +256,13 @@ export class OnboardVnfVmComponent implements OnInit { let paramsObj = { pageIndex: this.pageIndex, pageSize: this.pageSize, - nameSort: this.sortValue + // nameSort: this.sortValue } this.myhttp.getOnboardTableVnfData(paramsObj) .subscribe((data) => { console.log("vnfList-->", data); - // this.total = data["body"].length; //body length + // this.total = data["body"]; //body length // console.log( this.total) this.vfcData = data.body; // this.tableData = data.body; @@ -272,9 +274,10 @@ export class OnboardVnfVmComponent implements OnInit { // sdc this.myhttp.getSDC_VNFTableData() .subscribe((data) => { - console.log('vnfList-sdc-->',data) + console.log('vnfList-sdc-->', data) this.sdcData = data; - this.tableData = this.vfcData.concat(this.sdcData) + // this.tableData = this.vfcData.concat(this.sdcData) + this.tableData = this.MergeArray(this.vfcData, this.sdcData) }, (err) => { console.log(err); }) @@ -286,9 +289,9 @@ export class OnboardVnfVmComponent implements OnInit { let paramsObj = { pageIndex: this.pageIndex, pageSize: this.pageSize, - nameSort: this.sortValue + // nameSort: this.sortValue } - + this.myhttp.getOnboardTablePnfData(paramsObj) .subscribe((data) => { console.log("pnfList-->", data); @@ -299,16 +302,13 @@ export class OnboardVnfVmComponent implements OnInit { }) } - - sort(sort: { key: string, value: string }): void { - console.log(sort); - this.sortName = sort.key; - this.sortValue = sort.value; - this.getTableData(); - } + // sort(sort: { key: string, value: string }): void { + // console.log(sort); + // this.sortName = sort.key; + // this.sortValue = sort.value; + // this.getTableData(); + // } -//----------------------------------------------------------------------------------- - //选择条数 // searchNsData(reset: boolean = false) { // console.log('dddd',reset) @@ -320,16 +320,17 @@ export class OnboardVnfVmComponent implements OnInit { // ns onboard updataNsService(id) { console.log(id); + let requestBody = { "csarId": id } this.myhttp.getNsonboard(requestBody) .subscribe((data) => { console.log('onboard ns sdc', data); + this.getTableData(); }, (err) => { console.log(err); }) - } // searchVnfData(reset: boolean = false) { @@ -342,10 +343,11 @@ export class OnboardVnfVmComponent implements OnInit { console.log(id) let requestBody = { "csarId": id - } + } this.myhttp.getVnfonboard(requestBody) .subscribe((data) => { console.log('onboard vnf sdc', data); + this.getTableVnfData(); }, (err) => { console.log(err); }) @@ -364,6 +366,46 @@ export class OnboardVnfVmComponent implements OnInit { //-------------------------------------------------------------------------------- /* delete 删除按钮 */ + // ns + showConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deleteNsService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } + + //vnf + showVnfConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deleteVnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } + //vnf + showPnfConfirm(index, pkgid): void { + console.log(index) + console.log(pkgid) + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', + nzOnOk: () => new Promise((resolve, reject) => { + this.deletePnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + }).catch(() => console.log('Oops errors!')) + }); + } //delete nsItem deleteNsService(index,pkgid) { console.log(pkgid) @@ -376,8 +418,8 @@ export class OnboardVnfVmComponent implements OnInit { }) console.log(index) this.tableData.splice(index, 1) - console.log(this.tableData.length) - // this.getTableData() + console.log('数组长度',this.tableData.length) + this.getTableData() } //delete vnfItem @@ -412,9 +454,7 @@ export class OnboardVnfVmComponent implements OnInit { this.getTablePnfData() } - -//-------------------------------------------------------------------------------------- - //download 下载 + //下载download // downloadNsService(id) { // console.log('download') // console.log(id) @@ -436,5 +476,38 @@ export class OnboardVnfVmComponent implements OnInit { // }) // } + // downloadPnfService(id) { + // console.log('downloadPnf') + // console.log(id) + // this.myhttp.downloadNsData(id) + // .subscribe((data) => { + // console.log(44, data); + // }, (err) => { + // console.log(err); + // }) + // } + //合并并去重 + MergeArray(arr1, arr2) { + var _arr = new Array(); + for (var i = 0; i < arr1.length; i++) { + if (arr1[i] != "") { + _arr.push(arr1[i]); + } + } + for (var i = 0; i < arr2.length; i++) { + var flag = true; + for (var j = 0; j < arr1.length; j++) { + // 根据vfc列表arr1的id和sdc列表arr2的uuid去重 + if (arr2[i].uuid == arr1[j].id) { + flag = false; + break; + } + } + if (flag && arr2[i] != "") { + _arr.push(arr2[i]); + } + } + return _arr; + } } |