Service instance lifecycle management

Change-Id: Id3ff60ffa3062cdbe569603debc0d79b2ab6cb5d
Issue-ID: USECASEUI-218
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

2 files changed, 54 insertions, 55 deletions

diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index 9fa6b5c8..2839e5b8 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -15,7 +15,7 @@
 -->
 <div class="action ant-tabs-bar">
 
-    <span><i style="margin-right: 10px"><img src="../../../assets/images/customer.png" alt=""></i>Customer: </span>
+    <span><i style="margin-right: 10px"><img src="../../../assets/images/customer.png" alt=""></i> {{"i18nTextDefine_Customer" | translate}} : </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
@@ -26,7 +26,7 @@
         </ul>
     </nz-dropdown>
 
-    <span style="margin-left:40px"><i style="margin-right: 10px"><img src="../../../assets/images/service-type.png" alt=""></i>Service Type: </span>
+    <span style="margin-left:40px"><i style="margin-right: 10px"><img src="../../../assets/images/service-type.png" alt=""></i> {{"i18nTextDefine_ServiceType" | translate}} : </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
@@ -38,26 +38,24 @@
     </nz-dropdown>
 
     <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i
-            class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> Create </span>
+            class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> {{"i18nTextDefine_Create" | translate}} </span>
     </button>
-    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="Service Creation" (nzOnCancel)="handleCancel()"
-              (nzOnOk)="handleOk()" nzClassName="serviceCreationModel">
+    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} " (nzOnCancel)="handleCancel()"
+              (nzOnOk)="handleOk()" nzClassName="serviceCreationModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
         <div class="select-list">
-            <span style="display:inline-block;">CUSTOMER: </span>
-
-
+            <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear (ngModelChange)="customerChange()">
                 <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option>
             </nz-select>
         </div>
-       <div class="select-list">
-            <span style="display:inline-block;">SERVICE TYPE: </span>
+        <div class="select-list">
+            <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear>
                 <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name" ></nz-option>
             </nz-select>
         </div>
-		<div class="select-list">
-            <span style="display:inline-block;">Use Case: </span>
+        <div class="select-list">
+            <span style="display:inline-block;"> {{"i18nTextDefine_UseCase" | translate}} : </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear
                        (ngModelChange)="choseTemplateType()">
                 <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> -->
@@ -67,8 +65,9 @@
                 <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option>
             </nz-select>
         </div>
-  		<div class="select-list">
-            <span style="display:inline-block;width:70px;">TEMPLATE: </span>
+
+        <div class="select-list">
+            <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </span>
             <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear>
                 <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
             </nz-select>
@@ -96,17 +95,17 @@
             <div class="top-list-text">
                     <p>
                         <span>{{item.failed}}</span>
-                        <span>failed</span>
+                        <span> {{"i18nTextDefine_Failed" | translate}} </span>
                     </p>
                     <p>
                         <span>{{item.Success}}</span>
-                        <span>Success</span>
+                        <span> {{"i18nTextDefine_Success" | translate}} </span>
                     </p>
                     <p>
                         <span>{{item.InProgress}}</span>
-                        <span>In Progress</span>
+                        <span> {{"i18nTextDefine_InProgress" | translate}} </span>
                     </p>
-                <p class="service-description">{{item.detailName}}</p>
+                <p class="service-description"> {{item.detailName | translate}} </p>
             </div>
         </li>
     </ul>
@@ -127,13 +126,13 @@
                   (nzPageSizeChange)="searchData(true)">
             <thead>
             <tr>
-                <th nzWidth="5%">NO</th>
+                <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th>
                 <th nzWidth="5%"></th>
-                <th nzWidth="20%">Name</th>
-                <th nzWidth="20%">Description</th>
-                <th nzWidth="15%">Use Case</th>
-                <th nzWidth="20%">Status</th>
-                <th nzWidth="15%">Action</th>
+                <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}} </th>
+                <th nzWidth="20%"> {{"i18nTextDefine_Description" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}} </th>
+                <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}} </th>
+                <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}} </th>
             </tr>
             </thead>
             <tbody>
@@ -203,34 +202,34 @@
             </tbody>
         </nz-table>
 
-        <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()"
-                  (nzOnOk)="scaleOk()" nzClassName="scaleModel">
-            <h3><span style="color: red">*&nbsp;</span>Are you sure Scale this instance?</h3>
+        <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} " (nzOnCancel)="scaleCancel()"
+                  (nzOnOk)="scaleOk()" nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+            <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureScale" | translate}} </h3>
             <div class="question">
-                <h4>Instance ID:</h4>
+                <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
                 <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
                     thisService["vnfInstanceId"]}}</div>
             </div>
             <div *ngFor="let item of e2e_nsData" style="margin-top: 20px">
                 <h3>{{ item.netWorkServiceName }}</h3>
                 <div class="e2eScaleContent">
-                    <span class="e2eScaleLable">Scale Type:</span>
+                    <span class="e2eScaleLable"> {{"i18nTextDefine_ScaleType" | translate}} :</span>
                     <nz-select style="width: 165px;" [(ngModel)]="item.scaleType">
                         <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option>
                         <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option>
                     </nz-select>
                 </div>
                <div class="e2eScaleContent">
-                   <span class="e2eScaleLable">AspectId:</span>
+                   <span class="e2eScaleLable"> {{"i18nTextDefine_AspectId" | translate}} :</span>
                    <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
                </div>
                 <div class="e2eScaleContent">
-                    <span class="e2eScaleLable">Number Of Steps:</span>
+                    <span class="e2eScaleLable"> {{"i18nTextDefine_Number_Of_Steps" | translate}} :</span>
                     <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100"
                                      nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
                 </div>
                 <div class="e2eScaleContent">
-                    <span class="e2eScaleLable" >Scaling Direction:</span>
+                    <span class="e2eScaleLable" > {{"i18nTextDefine_ScalingDirection" | translate}} :</span>
                     <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection">
                         <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option>
                         <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option>
@@ -239,40 +238,40 @@
             </div>
         </nz-modal>
 
-        <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()"
-                  (nzOnOk)="deleteOk()"  nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}">
-            <h3><span style="color: red">*&nbsp;</span>Are you sure delete this instance?</h3>
+        <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteCancel()"
+                  (nzOnOk)="deleteOk()"  nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+            <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureDelete" | translate}} </h3>
             <div class="question">
-                <h4>Instance Name:</h4>
+                <h4> {{"i18nTextDefine_InstanceName" | translate}} :</h4>
                 <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
                     thisService["nsInstanceId"] }}</div>
             </div>
             <div class="question">
-                <h4>Instance ID:</h4>
+                <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
                 <div class="deleteModelContent">{{ thisService["service-instance-name"] ||
                     thisService["nsInstanceName"] }}</div>
             </div>
             <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
                 <div class="question">
-                    <h4>terminationType:</h4>
+                    <h4> {{"i18nTextDefine_terminationType" | translate}} :</h4>
                     <nz-select style="width: 306px;" [(ngModel)]="terminationType">
-                        <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
-                        <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
+                        <nz-option nzValue="graceful" nzLabel=" {{'i18nTextDefine_graceful' | translate}} "></nz-option>
+                        <nz-option nzValue="forceful" nzLabel=" {{'i18nTextDefine_forceful' | translate}} "></nz-option>
                     </nz-select>
                 </div>
                 <div class="question">
-                    <h4 *ngIf="terminationType=='graceful'">gracefulTerminationTimeout:</h4>
+                    <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}} :</h4>
                     <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input
                            [(ngModel)]="gracefulTerminationTimeout">
                 </div>
             </div>
         </nz-modal>
 
-        <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()"
-                  (nzOnOk)="healOk()" nzClassName="healModel">
-            <h3><span style="color: red">*&nbsp;</span>Are you sure heal this instance?</h3>
+        <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} " (nzOnCancel)="healCancel()"
+                  (nzOnOk)="healOk()" nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+            <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureHeal" | translate}} </h3>
             <div class="heal-question">
-                <p class="heal-label">Instance ID: </p>
+                <p class="heal-label"> {{"i18nTextDefine_InstanceID" | translate}} : </p>
                 <div class="healModelContent" title="{{ thisService['service-instance-id'] || thisService['nsInstanceId'] ||
                     thisService['vnfInstanceId']}}"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
                     thisService["vnfInstanceId"]}}</div>
@@ -280,7 +279,7 @@
             <!-- NS -->
             <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
                 <div class="question">
-                    <p class="heal-label">degreeHealing:</p>
+                    <p class="heal-label"> {{"i18nTextDefine_degreeHealing" | translate}} :</p>
                     <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px" [(ngModel)]="nsParams.degreeHealing">
                         <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option>
                         <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option>
@@ -289,7 +288,7 @@
                     </nz-select>
                 </div>
                 <div>
-                    <span style="display:inline-block;">actionsHealing:</span>
+                    <span style="display:inline-block;"> {{"i18nTextDefine_actionsHealing" | translate}} :</span>
                     <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i
                             class="anticon anticon-plus-circle-o"></i></button>
                     <br>
@@ -300,10 +299,10 @@
                         &nbsp;
                     </div>
                 </div>
-                <span style="display:inline-block;width:50%;">healScript:</span>
+                <span style="display:inline-block;width:50%;"> {{"i18nTextDefine_healScript" | translate}} :</span>
                 <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript">
                 <div>
-                    <span style="display:inline-block;">additionalParamsforNs:</span>
+                    <span style="display:inline-block;"> {{"i18nTextDefine_additionalParamsforNs" | translate}} :</span>
                     <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i
                             class="anticon anticon-plus-circle-o"></i></button>
                     <br>
@@ -318,15 +317,15 @@
             <!-- vnf -->
             <div *ngIf="thisService['serviceDomain'] == 'vnf'"  style="clear: both">
                 <div class="heal-question">
-                    <p class="heal-label">cause:</p>
+                    <p class="heal-label"> {{"i18nTextDefine_cause" | translate}} :</p>
                     <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input">
                 </div>
                 <div class="heal-question">
-                    <p class="heal-label">action:</p>
+                    <p class="heal-label"> {{"i18nTextDefine_action" | translate}} :</p>
                     <input nz-input [(ngModel)]="vnfParams.additionalParams.action" class="heal-input">
                 </div>
                 <div class="heal-question">
-                    <p class="heal-label">actionvminfo:</p>
+                    <p class="heal-label"> {{"i18nTextDefine_actionvminfo" | translate}}:</p>
                     <nz-select style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px" [(ngModel)]="vmSelected">
                         <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
                     </nz-select>
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 38fa7e23..85ebb8fb 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -57,21 +57,21 @@ export class ServicesListComponent implements OnInit {
             "Success": 16,
             "failed": 4,
             "InProgress": 11,
-            "detailName":"End To End service"
+            "detailName":"i18nTextDefine_End_To_End_Service"
         },
         {
             "serviceDomain": "NS",
             "Success": 21,
             "failed": 2,
             "InProgress": 17,
-            "detailName":"Network Service"
+            "detailName":"i18nTextDefine_Network_Service"
         },
         {
             "serviceDomain": "CCVPN",
             "Success": 36,
             "failed": 15,
             "InProgress": 6,
-            "detailName":"Cross Domain and Cross Layer VPN"
+            "detailName":"i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN"
         }
     ];