summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
diff options
context:
space:
mode:
authorliuwh7 <liuwh7@asiainfo.com>2021-03-08 18:34:19 +0800
committerliu wenhao <liuwh7@asiainfo.com>2021-03-09 03:14:04 +0000
commitfe0373c48edc239b3c69a923be17d1d4dc34143f (patch)
tree256e446b9742f250ab5dccd37586eaff2d9e3b83 /usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
parent081feab4ae091216a274052ffe0c7f8dbe2f80e2 (diff)
feat:commit UUI front end code
Change-Id: I4cf28e3b9e6f3ea44b52f028f5dfd70fbf650853 Signed-off-by: liuwh7 <liuwh7@asiainfo.com> Issue-ID: USECASEUI-525
Diffstat (limited to 'usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html')
-rw-r--r--usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html245
1 files changed, 144 insertions, 101 deletions
diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
index c48d68f9..34e78e60 100644
--- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -16,108 +16,151 @@
<!-- tab -->
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
- <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"></nz-tab>
+ <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="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 *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>
- </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)"
- *ngIf="item.uuid"></i>
- <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"
- *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)"
- *ngIf="item.uuid"></i>
- <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"
- *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)"></i>
- </td>
- </tr>
- </tbody>
- </nz-table>
- </nz-spin>
+ <!-- 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="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 *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>
+ </div>
+ <!-- table -->
+ <nz-spin [nzSpinning]="isSpinning" class="listContainer">
+ <div class="mask" *ngIf="isSpinning"></div>
+ <nz-table
+ #nzTable
+ [nzData]="currentTab === 'NS'
+ ? nsTableData
+ : (currentTab === 'VNF'
+ ? vnfTableData
+ : (currentTab === 'PNF'
+ ? pnfTableData
+ : modelTableData
+ )
+ )"
+ nzShowSizeChanger
+ [nzFrontPagination]="true"
+ [nzShowQuickJumper]="true"
+ [nzPageSizeOptions]="[5,10,15,20]"
+ [(nzPageSize)]="pageSize"
+ [(nzPageIndex)]='pageIndex'
+ nzSize="middle"
+ >
+ <thead *ngIf="currentTab !== 'NLP Model Reource'">
+ <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>
+ <thead *ngIf="currentTab === 'NLP Model Reource'">
+ <tr class="theadColor">
+ <th nzWidth="8%"> {{"i18nTextDefine_NO" | translate}} </th>
+ <th nzWidth="18%"> {{"i18nTextDefine_Name" | translate}} </th>
+ <th nzWidth="18%"> {{"i18nTextDefine_Size" | translate}} </th>
+ <th nzWidth="18%"> {{"i18nTextDefine_CreateTime" | translate}} </th>
+ <th nzWidth="18%"> {{"i18nTextDefine_Status" | translate}} </th>
+ <th nzWidth="20%"> {{"i18nTextDefine_Operation" | 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)"
+ *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"
+ *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)"
+ *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" (click)="showDeleteConfirm(item.id)"
+ *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)"></i>
+ </td>
+ </tr>
+ </tbody>
+ <tbody *ngIf="currentTab === 'NLP Model Reource'">
+ <tr *ngFor="let item of nzTable.data;let i = index;">
+ <td>{{i+1}}</td>
+ <td>{{item.modelName}}</td>
+ <td>{{item.size}}</td>
+ <td>{{item.createTime}}</td>
+ <td>{{item.active ? 'Active' : 'Inactive'}}</td>
+ <td>
+ <button nz-button nzType="primary" class="buy-button" (click)="showDeleteConfirm(item.id)">
+ Delete
+ </button>
+ <button nz-button nzType="primary" class="buy-button" (click)="activedModelFile(item)">
+ Actived
+ </button>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </nz-spin>
</div>
<app-notification #notification [isServicesList]="false"></app-notification> \ No newline at end of file