diff options
Diffstat (limited to 'usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html')
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html | 373 |
1 files changed, 176 insertions, 197 deletions
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> |