From d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 Mon Sep 17 00:00:00 2001
From: cyuamber <xuranyjy@chinamobile.com>
Date: Thu, 22 Aug 2019 16:55:57 +0800
Subject: feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
---
 .../onboard-vnf-vm/onboard-vnf-vm.component.html   | 333 +++++++++++++++++++++
 1 file changed, 333 insertions(+)
 create mode 100644 usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html

(limited to 'usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html')

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
new file mode 100644
index 00000000..70ee81c0
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -0,0 +1,333 @@
+<!--
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    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> -->
+            <div style="width:100%;height: 30%;margin-bottom: 1%">
+                <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"
+                        style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+                        {{ nsuploading ? 'Uploading' : 'Start Upload' }}
+                    </button>
+                </div>
+                <div class="listlin"></div>
+                <div class="listfile">
+                    <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
+                    <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
+                    <div style="height:80%;overflow: auto">
+                        <div class="listfilebgc" *ngFor="let itemns of nsRightList">
+                            <div>
+                                <i class="anticon anticon-link"></i>
+                            </div>
+                            <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
+                            <div class="color" *ngIf="itemns.status">
+                                <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
+                            </div>
+                            <div class="color" *ngIf="!itemns.status">
+                                <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
+                                <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
+                            </div>
+                            <div *ngIf="!itemns.status">
+                                <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
+                                <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
+                <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%"> {{"i18nTextDefine_NO" | translate}} </th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"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 *ngIf="item.uuid">{{item.uuid}}</td>-->
+
+                            <td *ngIf="item.nsdName">{{item.nsdName}}</td>
+                            <td *ngIf="item.nsdName === null || item.nsdName === ''">&nbsp;</td>
+                            <td *ngIf="item.name">{{item.name}}</td>
+                            <td *ngIf="item.name===null || item.name=== ''">&nbsp;</td>
+                            <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
+                            <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''">&nbsp;</td>
+                            <td *ngIf="item.version">{{item.version}}</td>
+                            <td *ngIf="item.version === null || item.version === ''">&nbsp;</td>
+                            <td>
+                                <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
+                                <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''">&nbsp;</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,notificationModel)"
+                                    *ngIf="item.uuid"></i>
+                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"
+                                    *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 style="width:100%;height: 30%;margin-bottom: 1%">
+            <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"
+                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+                    {{ vnfuploading ? 'Uploading' : 'Start Upload' }}
+                </button>
+            </div>
+            <div class="listlin"></div>
+            <div class="listfile">
+                <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
+                <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
+                <div style="height:80%;overflow: auto">
+                    <div class="listfilebgc" *ngFor="let itemns of vnfRightList">
+                        <div>
+                            <i class="anticon anticon-link"></i>
+                        </div>
+                        <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
+                        <div class="color" *ngIf="itemns.status">
+                            <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div class="color" *ngIf="!itemns.status">
+                            <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
+                            <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
+                        </div>
+                        <div *ngIf="!itemns.status">
+                            <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
+                            <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+            <nz-spin [nzSpinning]="isSpinning"  style="height: 69%">
+                <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%"> {{"i18nTextDefine_NO" | translate}} </th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"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 *ngIf="item.uuid">{{item.uuid}}</td>-->
+                            <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
+                            <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''">&nbsp;</td>
+                            <td *ngIf="item.name">{{item.name}}</td>
+                            <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
+                            <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''">&nbsp;</td>
+                            <td *ngIf="item.version">{{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" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"
+                                    *ngIf="item.id"></i>
+                                <!--<span *ngIf="item.id && item.sameid == undefined">-->
+                                    <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">-->
+                                        <!--&lt;!&ndash; <button nz-button> &ndash;&gt;-->
+                                        <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>-->
+                                        <!--&lt;!&ndash; <span >upload</span> &ndash;&gt;-->
+                                        <!--&lt;!&ndash; </button> &ndash;&gt;-->
+
+                                    <!--</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 style="width:100%;height: 30%;margin-bottom: 1%">
+            <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"
+                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+                    {{ pnfuploading ? 'Uploading' : 'Start Upload' }}
+                </button>
+            </div>
+            <div class="listlin"></div>
+            <div class="listfile">
+                <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
+                <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
+                <div style="height:80%;overflow: auto">
+                    <div class="listfilebgc" *ngFor="let itemns of pnfRightList">
+                        <div>
+                            <i class="anticon anticon-link"></i>
+                        </div>
+                        <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
+                        <div class="color" *ngIf="itemns.status">
+                            <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
+                        </div>
+                        <div class="color" *ngIf="!itemns.status">
+                            <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
+                            <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
+                        </div>
+                        <div *ngIf="!itemns.status">
+                            <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
+                            <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            </div>
+            <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
+                <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%"> {{"i18nTextDefine_NO" | translate}} </th>
+                            <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"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" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"></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>
+    <!--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}}&nbsp;
+                    {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+                </div>
+                <div class="ant-notification-notice-description">
+                    <div class="notificationlist">
+                        <p>{{notificationAttributes.title}} id:&nbsp;</p>
+                        <span>{{ notificationAttributes.id }}</span>
+                    </div>
+                </div>
+                <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
+            </div>
+        </div>
+    </ng-template>
+</nz-tabset>
+
-- 
cgit 1.2.3-korg