feat:HTML formatting code to optimize the comments in the test

Change-Id: I8abcc7b579279b6c45614d72d46e03195e25b51c
Issue-ID: USECASEUI-368
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

7 files changed, 92 insertions, 105 deletions

diff --git a/usecaseui-portal/package-lock.json b/usecaseui-portal/package-lock.json
index b311f2be..c6e4543f 100644
--- a/usecaseui-portal/package-lock.json
+++ b/usecaseui-portal/package-lock.json
@@ -3906,8 +3906,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3928,14 +3927,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3955,8 +3952,7 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
@@ -4104,7 +4100,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4112,8 +4107,7 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
@@ -4224,8 +4218,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
diff --git a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less
index a235b1e6..0d95773f 100644
--- a/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less
+++ b/usecaseui-portal/src/app/views/services/services-list/top-card/top-card.component.less
@@ -3,7 +3,7 @@
   width:100%;
   max-width:400px;
   height:170px;
-  background:url("/assets/images/servicelist-e2e.png") no-repeat;
+  background:url("../../../../../assets/images/servicelist-e2e.png") no-repeat;
   background-size: 100% 100%;
   border-radius:2px;
   .round{
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
index e4a5ef19..3b6debb9 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.html
@@ -1,7 +1,6 @@
 <nz-spin nzTip='Loading...' [nzSpinning]="isSpinning">
-    <nz-modal [(nzVisible)]="showModel" nzTitle="Create Slicing Business Order" (nzOnCancel)="handleCancel()"
-              (nzOnOk)="handleOk()"
-              nzWidth="900px">
+    <nz-modal [(nzVisible)]="showModel" nzTitle="Create Communication Service" (nzOnCancel)="handleCancel()"
+              (nzOnOk)="handleOk()" nzWidth="900px">
         <div class="subnet_params_container">
             <form nz-form>
                 <nz-form-item *ngFor="let item of comunicationFormItems; let i = index">
@@ -9,28 +8,18 @@
                         {{ item.title }}
                     </nz-form-label>
                     <nz-form-control [nzSpan]="15">
-                        <input nz-input nz-tooltip
-                               [id]="item.key"
-                               [name]="item.key"
+                        <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
                                [(ngModel)]="slicing_order_info[item.key]"
                                [ngClass]="{'error-input-border':validateRules[i] === true}"
                                *ngIf=" item.title === 'Slicing Business Name' "
-                               (blur)="validator(item.key,slicing_order_info[item.key],i)"
-                        />
-                        <nz-tooltip
-                                [nzTitle]="tooltipText"
-                                [nzPlacement]="'right'"
-                                [nzTrigger]="'focus'"
-                        >
-                            <input nz-input nz-tooltip
-                                   [id]="item.key"
-                                   [name]="item.key"
+                               (blur)="validator(item,slicing_order_info[item.key],i)"/>
+                        <nz-tooltip [nzTitle]="tooltipText" [nzPlacement]="'right'" [nzTrigger]="'focus'">
+                            <input nz-input nz-tooltip [id]="item.key" [name]="item.key"
                                    [(ngModel)]="slicing_order_info[item.key]"
                                    [ngClass]="{'error-input-border':validateRules[i] === true}"
                                    *ngIf=" item.title !== 'Slicing Business Name' && item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Area' "
-                                   (blur)="validator(item.key,slicing_order_info[item.key],i)"
-                                   (focus)="changeTooltipText(item.title)"
-                            />
+                                   (blur)="validator(item,slicing_order_info[item.key],i)"
+                                   (focus)="changeTooltipText(item.title)"/>
                         </nz-tooltip>
                         <nz-radio-group [name]="item.key" [(ngModel)]="slicing_order_info[item.key]"
                                         *ngIf="item.title === 'Resource Sharing Level'">
@@ -52,8 +41,7 @@
                     <div *ngIf="item.key === 'coverageArea'">
                         <div *ngFor="let area of areaList; let i = index">
                             <nz-form-control [nzSpan]="!ind ? 3 : 4" [nzOffset]="i && !ind ? 6 : 0"
-                                             class="subnet_params_area"
-                                             *ngFor="let item of area; let ind = index">
+                                             class="subnet_params_area" *ngFor="let item of area; let ind = index">
                                 <nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
                                            (nzOpenChange)="handleChange(area, item)"
                                            (ngModelChange)=" handleChangeSelected(area, item) ">
@@ -63,8 +51,7 @@
                             </nz-form-control>
                             <nz-form-control [nzSpan]="1" [nzOffset]="1">
                                 <button nz-button nzType="primary" nzSize="small" class="subnet_params_button"
-                                        *ngIf="!i"
-                                        (click)="creatAreaList()">
+                                        *ngIf="!i" (click)="creatAreaList()">
                                     <i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
                                 </button>
                                 <button nz-button nzType="primary" nzSize="small" class="subnet_params_button" *ngIf="i"
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
index 7db003ff..a07edce2 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts
@@ -179,19 +179,19 @@ export class BusinessOrderComponent implements OnInit {
         return this.rulesText[index] = words + title
     };
 
-    validator(key, val, i) {
+    validator(item, val, i) {
         if (val === null || val.replace(/\s*/g, '').length <= 0) {
             this.validateRules[i] = true;
-            this.getRulesText('Please enter', key, val, i,);
+            this.getRulesText('Please enter ', item.title, val, i,);
             return false
         } else {
             this.validateRules[i] = false;
         }
-        if (key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && isNaN(val)) {
+        if (item.key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Only numbers can be entered', '', '', i);
             return false
-        } else if (key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && !isNaN(val)) {
+        } else if (item.key === 'maxNumberofUEs' && !/^([1-9]\d{0,4}|100000)$/.test(val) && !isNaN(val)) {
             console.log("-----maxNumberofUEs")
             this.validateRules[i] = true;
             this.getRulesText('Scope: 1-100000', '', '', i);
@@ -199,22 +199,22 @@ export class BusinessOrderComponent implements OnInit {
         } else {
             this.validateRules[i] = false;
         }
-        if ((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && isNaN(val)) {
+        if ((item.key === 'expDataRateDL' || item.key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Only numbers can be entered', '', '', i);
             return false
-        } else if ((key === 'expDataRateDL' || key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && !isNaN(val)) {
+        } else if ((item.key === 'expDataRateDL' || item.key === 'expDataRateUL') && !/^([1-9]\d{2}|[1-3]\d{3}|3000)$/.test(val) && !isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Scope: 100-3000', '', '', i);
             return false
         } else {
             this.validateRules[i] = false;
         }
-        if (key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && isNaN(val)) {
+        if (item.key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Only numbers can be entered', '', '', i);
             return false
-        } else if (key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && !isNaN(val)) {
+        } else if (item.key === 'latency' && !/^1[0-9]$|^[2-9]\d$|^1\d{2}$|^200$/.test(val) && !isNaN(val)) {
             this.validateRules[i] = true;
             this.getRulesText('Scope: 10-200', '', '', i);
             return false
@@ -224,9 +224,9 @@ export class BusinessOrderComponent implements OnInit {
     }
 
     handleOk(): void {
-        Object.keys(this.slicing_order_info).forEach((item, index) => {
-            if (item !== 'resourceSharingLevel' && item !== 'uEMobilityLevel' && item !== 'coverageArea') {
-                this.validator(item, this.slicing_order_info[item], index)
+        COMMUNICATION_FORM_ITEMS.forEach((item, index) => {
+            if (item.key !== 'resourceSharingLevel' && item.key !== 'uEMobilityLevel' && item.key !== 'coverageArea') {
+                this.validator(item, this.slicing_order_info[item.key], index)
             }
         });
         if (this.validateRules.indexOf(true) > -1) {
@@ -234,7 +234,7 @@ export class BusinessOrderComponent implements OnInit {
         }
         const coverage_list: string[] = [];
         this.areaList.forEach(item => {
-            let str: string = '';
+            let str = '';
             item.forEach(area => {
                 str += area.selected + ';';
             });
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
index 4d5ab79f..0c3983dd 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
@@ -3,7 +3,7 @@
     <div nz-col nzSpan="12" class="task_status">
       <span>Status : </span>
       <nz-select nzShowSearch nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue"
-                 (ngModelChange)="getListOfProcessingStatus()">
+        (ngModelChange)="getListOfProcessingStatus()">
         <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option>
       </nz-select>
     </div>
@@ -11,60 +11,60 @@
   </div>
   <div class="slicing-resource-table-list">
     <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger
-              [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-              [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+      [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
+      [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
       <thead>
-      <tr>
-        <th width=100>No</th>
-        <th width=280>Service Instance Id</th>
-        <th width=200>Service Instance Name</th>
-        <th width=200>Created Time</th>
-        <!--<th width=110>Service Type</th>-->
-        <th width=110>S-NSSAI</th>
-        <th width=110>Status</th>
-        <th width=120>Activate</th>
-        <th width=130>Terminate</th>
-      </tr>
+        <tr>
+          <th width=100>No</th>
+          <th width=280>Service Instance Id</th>
+          <th width=200>Service Instance Name</th>
+          <th width=200>Created Time</th>
+          <!--<th width=110>Service Type</th>-->
+          <th width=110>S-NSSAI</th>
+          <th width=110>Status</th>
+          <th width=120>Activate</th>
+          <th width=130>Terminate</th>
+        </tr>
       </thead>
       <tbody>
-      <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
-        <tr>
-          <td>{{i+1}}</td>
-          <td>{{ data.order_id }}</td>
-          <td>{{ data.order_name }}</td>
-          <td>{{ data.order_creation_time }}</td>
-          <!--<td>{{ data.service_type?data.service_type:'&#45;&#45;' }}</td>-->
-          <td>{{ data.service_snssai }}</td>
-          <td>
-                            <span class="marginLeft10">
-                                {{data.order_status}}
-                            </span>
-            <br>
-          </td>
-          <td>
-            <div class="action-icon">
-              <nz-switch [ngModel]="data.order_status==='activated'?true:false"
-                         [nzDisabled]="data.order_status === 'processing'|| (data.order_status !== 'processing' && data.last_operation_progress && data.last_operation_progress !== '100')"
-                         (ngModelChange)="switchChange(data,i)"></nz-switch>
-              <nz-progress
-                      *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && data.last_operation_type !== 'DELETE'"
-                      [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
-              </nz-progress>
-            </div>
-          </td>
+        <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
+          <tr>
+            <td>{{i+1}}</td>
+            <td>{{ data.order_id }}</td>
+            <td>{{ data.order_name }}</td>
+            <td>{{ data.order_creation_time }}</td>
+            <!--<td>{{ data.service_type?data.service_type:'&#45;&#45;' }}</td>-->
+            <td>{{ data.service_snssai }}</td>
             <td>
-                <div class="action-icon">
-                    <i [ngClass]="{'cannotclick':data.order_status === 'processing' || ( data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type === 'DELETE' || data.last_operation_type === 'activated'))}"
-                       nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
-                       (click)="terminate(data,i)"></i>
-                    <nz-progress
-                            *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]"
-                            [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
-                    </nz-progress>
-                </div>
+              <span class="marginLeft10">
+                {{data.order_status}}
+              </span>
+              <br>
             </td>
-        </tr>
-      </ng-template>
+            <td>
+              <div class="action-icon">
+                <nz-switch [ngModel]="data.order_status==='activated'?true:false"
+                  [nzDisabled]="data.order_status === 'processing'|| (data.order_status !== 'processing' && data.last_operation_progress && data.last_operation_progress !== '100')"
+                  (ngModelChange)="switchChange(data,i)"></nz-switch>
+                <nz-progress
+                  *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && data.last_operation_type !== 'DELETE'"
+                  [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
+                </nz-progress>
+              </div>
+            </td>
+            <td>
+              <div class="action-icon">
+                <i [ngClass]="{'cannotclick':data.order_status === 'processing' || ( data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type === 'DELETE' || data.last_operation_type === 'activated'))}"
+                  nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
+                  (click)="terminate(data,i)"></i>
+                <nz-progress
+                  *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart[i]"
+                  [nzPercent]="data.last_operation_progress" [nzShowInfo]="true" nzStatus="active">
+                </nz-progress>
+              </div>
+            </td>
+          </tr>
+        </ng-template>
       </tbody>
     </nz-table>
   </div>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less
index f52f4ad2..f66d3ad4 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less
@@ -1,31 +1,38 @@
 nz-select {
   width: 200px;
 }
-.task_status{
+
+.task_status {
   margin-bottom: 20px;
-  span{
+
+  span {
     margin-right: 5%;
   }
 }
-.action-icon{
+
+.action-icon {
   display: inline-block;
   vertical-align: top;
 }
+
 i.anticon {
   cursor: pointer;
   font-size: 18px;
   padding: 2px 15px;
-  vertical-align: inherit!important;
-  &:hover{
+  vertical-align: inherit !important;
+
+  &:hover {
     color: #147dc2;
   }
 }
+
 .cannotclick {
   pointer-events: none;
   color: #aaa;
   opacity: 0.6;
 }
-.buy-button{
+
+.buy-button {
   float: right;
   margin-right: 2%;
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts
index 17e6aa33..57def7b1 100644
--- a/usecaseui-portal/src/constants/constants.ts
+++ b/usecaseui-portal/src/constants/constants.ts
@@ -248,7 +248,7 @@ export const BUSINESS_STATUS = [
 

 export const COMMUNICATION_FORM_ITEMS = [

     {

-        title: 'Slicing Business Name',

+        title: 'Communication Service Name',

         key: 'name'

     },

     {