diff options
Diffstat (limited to 'usecaseui-portal/src/app/services/onboard-vnf-vm')
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html | 469 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less | 53 |
2 files changed, 358 insertions, 164 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 c90920c3..605c455f 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 @@ -14,197 +14,342 @@ limitations under the License. --> <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'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> + <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"> + <!-- nsList --> + <div class="list" *ngIf="tab === 'NS'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <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">Click or drag file to this area to upload</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]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" - style="margin-top: 16px"> + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> {{ nsuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-spin [nzSpinning]="isSpinning"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" [(nzPageIndex)]='nspageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">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.id">{{item.id}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - - <td *ngIf="item.nsdName">{{item.nsdName}}</td> - <td *ngIf="item.nsdName === null || item.nsdName === ''"> </td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.name===null || item.name=== ''"> </td> - <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> - <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''"> </td> - <td *ngIf="item.version">{{item.version}}</td> - <td *ngIf="item.version === null || item.version === ''"> </td> - <td> - <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> - <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''"> </span> - <span *ngIf="item.uuid">{{status}}</span> - - <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding', - 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating', - 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> - <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> --> - </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)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - - <span *ngIf="item.id && item.sameid == undefined"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==nsdInfoId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> - - </td> - </tr> - </tbody> - </nz-table> - </nz-spin> </div> - <!-- VNFList --> - <div class="list" *ngIf="tab === 'VNF'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> + <div class="listlin"></div> + <div class="listfile"> + <div> + <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div> + <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div class="color"> + <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div>File upload completed</div> + <div>456</div> + </div> + </div> + + </div> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" + [(nzPageIndex)]='nspageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="15%">Operational State</th> + <th nzWidth="10%">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.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + + <td *ngIf="item.nsdName">{{item.nsdName}}</td> + <td *ngIf="item.nsdName === null || item.nsdName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.name===null || item.name=== ''"> </td> + <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> + <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td *ngIf="item.version === null || item.version === ''"> </td> + <td> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''"> </span> + <span *ngIf="item.uuid">{{status}}</span> + + <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding', + 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating', + 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> + <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> --> + </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)" + *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" + *ngIf="item.id"></i> + <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">--> + <span *ngIf="item.id && item.sameid == undefined"> + <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> + <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> + </nz-upload> + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" + style="margin-top: 16px" *ngIf="item.id==nsdInfoId"> + {{ nsuploading ? 'Uploading' : 'Start Upload' }} + </button> + </span> + + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + <!-- <div style="margin-top:8px;"> + Loading state£º + <nz-switch [(ngModel)]="isSpinning"></nz-switch> + </div> --> + + </div> + <!-- VNFList --> + <div class="list" *ngIf="tab === 'VNF'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <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 file to this area to upload</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" - style="margin-top: 16px"> + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> {{ vnfuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-spin [nzSpinning]="isSpinning"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" [(nzPageIndex)]='vnfpageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="15%">Operational State</th> - <th nzWidth="10%">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.id">{{item.id}}</td> - <td *ngIf="item.uuid">{{item.uuid}}</td> - <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> - <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''"> </td> - <td *ngIf="item.name">{{item.name}}</td> - <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> - <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''"> </td> - <td *ngIf="item.version">{{item.version}}</td> - <td>{{item.onboardingState}}</td> - <td>{{item.usageState}}</td> - <td>{{item.operationalState}}</td> - <td> - <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" - class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> - <span *ngIf="item.id && item.sameid == undefined"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==vnfPkgId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> - </td> - </tr> - </tbody> - </nz-table> - </nz-spin> - </div> - <!-- PNFList --> - <div class="list" *ngIf="tab === 'PNF'"> - <h3 class="title"> Onboard {{tabTitle}} </h3> + <div class="listlin"></div> + <div class="listfile"> + <div> + <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div> + <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div class="color"> + <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div>File upload completed</div> + <div>456</div> + </div> + </div> + </div> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" + [(nzPageIndex)]='vnfpageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="15%">Operational State</th> + <th nzWidth="10%">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.id">{{item.id}}</td> + <td *ngIf="item.uuid">{{item.uuid}}</td> + <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> + <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> + <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td>{{item.onboardingState}}</td> + <td>{{item.usageState}}</td> + <td>{{item.operationalState}}</td> + <td> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" + *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" + *ngIf="item.id"></i> + <span *ngIf="item.id && item.sameid == undefined"> + <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> + <!-- <button nz-button> --> + <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> + <!-- <span >upload</span> --> + <!-- </button> --> + + </nz-upload> + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;" + *ngIf="item.id==vnfPkgId"> + {{ nsuploading ? 'Uploading' : 'Start Upload' }} + </button> + </span> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + + </div> + <!-- PNFList --> + <div class="list" *ngIf="tab === 'PNF'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <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 file to this area to upload</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" - style="margin-top: 16px"> + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> {{ pnfuploading ? 'Uploading' : 'Start Upload' }} </button> - <nz-spin [nzSpinning]="isSpinning"> - <div class="mask" *ngIf="isSpinning"></div> - <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" [(nzPageIndex)]='pnfpageIndex' - [nzLoading]="loading" nzSize="middle"> - <thead (nzSortChange)="sort($event)" nzSingleSort> - <tr> - <th nzWidth="15%">NO</th> - <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> - <th nzWidth="15%">Version</th> - <th nzWidth="15%">Onboarding State</th> - <th nzWidth="10%">Usage State</th> - <th nzWidth="15%">Operation button</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let item of nzTable.data; let i = index; "> - <td>{{item.id}}</td> - <td>{{item.pnfdName}}</td> - <td>{{item.pnfdVersion}}</td> - <td>{{item.pnfdOnboardingState}}</td> - <td>{{item.pnfdUsageState}}</td> - <td> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> - <span *ngIf="item.id"> - <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> - <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> - </nz-upload> - <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" style="margin-top: 16px" *ngIf="item.id==vnfPkgId"> - {{ nsuploading ? 'Uploading' : 'Start Upload' }} - </button> - </span> - </td> - </tr> - </tbody> - </nz-table> - </nz-spin> - </div> - </nz-tab> + <div class="listlin"></div> + <div class="listfile"> + <div> + <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div> + <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div class="color"> + <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + </div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div>pnf-test.csar</div> + <div class="color">File upload completed</div> + <div>456</div> + </div> + <div class="listfilebgc"> + <div>111</div> + <div class="color">pnf-test.csar</div> + <div>File upload completed</div> + <div>456</div> + </div> + </div> + </div> + <nz-spin [nzSpinning]="isSpinning"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" + [(nzPageIndex)]='pnfpageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%">NO</th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="15%">Version</th> + <th nzWidth="15%">Onboarding State</th> + <th nzWidth="10%">Usage State</th> + <th nzWidth="15%">Operation button</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{item.id}}</td> + <td>{{item.pnfdName}}</td> + <td>{{item.pnfdVersion}}</td> + <td>{{item.pnfdOnboardingState}}</td> + <td>{{item.pnfdUsageState}}</td> + <td> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> + <span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}"> + <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload"> + <i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i> + </nz-upload> + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0" + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;" + *ngIf="item.id==vnfPkgId"> + {{ nsuploading ? 'Uploading' : 'Start Upload' }} + </button> + </span> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + + </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 aca14585..b4d92fde 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 @@ -42,9 +42,58 @@ hr { } .list { - background-color: #fff; + // background-color: #fff; border-radius: 5px; - padding: 10px; + // padding: 10px; + .listupload { + width: 22%; + float: left; + margin-left: 13%; + } + .listlin { + float: left; + width: 1%; + margin-left: 10%; + height: 177px; + margin-bottom: 30px; + border-right: 2px solid #EEEEEE; + } + .listfile { + float: left; + width: 44%; + margin-left: 10%; + .listfilebgc { + background-color: #fff; + border-bottom: 8px solid #F7F8FC; + } + .listfilebgc { + background-color: #fff; + height: 30px; + border-radius: 2px; + line-height: 2; + color: #42548F; + border-bottom: 4px solid #F7F8FC; + >div { + float: left; + } + :first-child { + width: 6%; + } + :nth-child(2){ + width:20%; + } + :nth-child(3){ + width: 60%; + text-align: center; + } + :nth-child(4){ + padding-left: 4%; + } + .color { + color:rgba(66,84,143,0.5); + } + } + } nz-table { tbody { td { |