USECASEUI-388 fixed and with additional changes

Fixed i18Resource, subtittle wrap and directive folder Path. Alos added few changes for adapting multiple templates.

Change-Id: Ie64485d24d11bcfd59be6c3c119dbccbc6c9b499
Issue-ID: USECASEUI-388
Signed-off-by: root <preethamshyam.sathiyaseelan@us.fujitsu.com>

9 files changed, 297 insertions, 148 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index 9d14d8f9..5fa37be6 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -24,7 +24,7 @@ import { NZ_I18N, en_US } from 'ng-zorro-antd';
 import { NgxEchartsModule } from 'ngx-echarts';
 
 //Custom Directive
-import { DisableControlDirective } from './Directives/disable-control.directive';
+import { DisableControlDirective } from './core/Directives/disable-control.directive';
 
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
diff --git a/usecaseui-portal/src/app/Directives/disable-control.directive.ts b/usecaseui-portal/src/app/core/Directives/disable-control.directive.ts
index 85495401..85495401 100644
--- a/usecaseui-portal/src/app/Directives/disable-control.directive.ts
+++ b/usecaseui-portal/src/app/core/Directives/disable-control.directive.ts
diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html
index 47e22fe9..a3dec5aa 100644
--- a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html
+++ b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html
@@ -19,21 +19,26 @@
                             <li *ngFor="let parameter of templateParameters.inputs; let i = index;">
                                 <span *ngIf="parameter.isRequired.includes('true')" style="color: red;width:10px;min-width:1px;">*</span>
                                 <span title="{{parameter.name}}">{{parameter.name}}:</span>
-                                <input *ngIf="!(parameter.name.includes('uni_id') || parameter.name.includes('enni_id') || parameter.name.includes('date'))" formControlName="{{parameter.name}}" nz-input [(ngModel)]="parameter.value" style="margin-left: auto;">
+                                <input *ngIf="!(((parameter.name.includes('uni') || parameter.name.includes('enni') || parameter.name.includes('nni')) && parameter.name.includes('id')) || parameter.name.includes('date'))" formControlName="{{parameter.name}}" nz-input [(ngModel)]="parameter.value" style="margin-left: auto;">
                                 <!--<pre>{{mdons_creation_form.get(parameter.name).valid}}</pre>-->
                                 <input style="margin-left: 2px;" *ngIf="parameter.name.includes('date')" type="date" formControlName="{{parameter.name}}" nz-input [(ngModel)]="parameter.value" placeholder="yyyy-MM-dd"/>
                                 <span style="color: red;width:10px;" *ngIf="mdons_creation_form.controls[parameter.name].errors?.required && (mdons_creation_form.controls[parameter.name].dirty || mdons_creation_form.controls[parameter.name].touched)">Required</span>
-                                <nz-dropdown class = "customclass" [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'" *ngIf="(parameter.name.includes('uni_id') || parameter.name.includes('enni_id'))">
-                                    <button style="width: 300px;" nz-button nz-dropdown><span *ngIf="parameter.name.includes('uni_id')">{{uniIdSelected.id}}</span><span *ngIf="parameter.name.includes('enni_id')">{{enniIdSelected.id}}</span> <i class="anticon anticon-down"></i>
+                                <nz-dropdown class = "customclass" [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'" *ngIf="(parameter.name.includes('uni') || parameter.name.includes('enni') || parameter.name.includes('nni')) && parameter.name.includes('id')">
+                                    <button style="width: 300px;" nz-button nz-dropdown><span *ngIf="(parameter.name.includes('uni') && parameter.name.includes('id'))">{{nniMap.get(parameter.name) == undefined ? uniIdSelected.id : nniMap.get(parameter.name).id}}</span><span *ngIf="(parameter.name.includes('enni')&& parameter.name.includes('id'))">{{nniMap.get(parameter.name) == undefined ? enniIdSelected.id : nniMap.get(parameter.name).id}}</span><span *ngIf="(parameter.name.includes('nni') && parameter.name.includes('id') && !parameter.name.includes('e'))">{{nniMap.get(parameter.name) == undefined ? nniIdSelected.id : nniMap.get(parameter.name).id}}</span> <i class="anticon anticon-down"></i>
                                     </button>
-                                    <ul nz-menu  *ngIf="parameter.name.includes('uni_id')" class="dropDownScroller">
-                                        <li nz-menu-item (click)="chooseUni(item)" *ngFor="let item of uniList" > 
+                                    <ul nz-menu  *ngIf="(parameter.name.includes('uni') && parameter.name.includes('id'))" class="dropDownScroller">
+                                        <li nz-menu-item (click)="chooseUni(parameter.name,item)" *ngFor="let item of uniList" > 
                                             <a title="{{item.id}}">{{item.id}}</a>
                                         </li>
                                     </ul>
-                                    <ul nz-menu *ngIf="parameter.name.includes('enni_id')" class="dropDownScroller" >
-                                        <li nz-menu-item (click)="chooseEnni(item)" *ngFor="let item of enniList" > 
-                                            <a title="{{item.id}}">{{item.id}}</a> 
+                                    <ul nz-menu *ngIf="(parameter.name.includes('enni') && parameter.name.includes('id'))" class="dropDownScroller" >
+                                        <li nz-menu-item (click)="chooseEnni(parameter.name,item)" *ngFor="let item of enniList" > 
+                                            <a title="{{nniMap.get(parameter.name) == undefined ? item.id : nniMap.get(parameter.name)}}">{{nniMap.get(parameter.name) == undefined ? item.id : nniMap.get(parameter.name)}}</a> 
+                                        </li>
+                                    </ul>
+                                    <ul nz-menu  *ngIf="(parameter.name.includes('nni') && parameter.name.includes('id') && !parameter.name.includes('e'))" class="dropDownScroller">
+                                        <li nz-menu-item (click)="chooseNni(parameter.name,item)" *ngFor="let item of nniList" > 
+                                            <a title="{{item.id}}">{{item.id}}</a>
                                         </li>
                                     </ul>
                                 </nz-dropdown>
diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts
index 3123bfc8..232de474 100644
--- a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts
@@ -16,6 +16,11 @@ export class MdonsCreationComponent implements OnInit {
   uniIdSelected = { id: null };
   enniList= [];
   enniIdSelected = { id: null };
+  nniList= [];
+  nniIdSelected = { id: null };
+  
+  nniMap : Map<any, any> = new Map<any, any>();
+
   templateParameters = {
     invariantUUID: "",
     uuid: "",
@@ -67,6 +72,7 @@ export class MdonsCreationComponent implements OnInit {
   ngOnInit() {
     this.getalluni();
     this.getallenni();
+    this.getallnni();
     this.templateParameters=this.mdons_temParametersContent;
     this.mdonsModelShow = true;
     this.mdons_creation_form = this.fb.group({});
@@ -76,7 +82,7 @@ export class MdonsCreationComponent implements OnInit {
 
   buildFormArrayOfGroupsFromArr() {
     for(let i of this.templateParameters.inputs){
-      if(i.isRequired === "true" && !(i.name.includes('uni_id') || i.name.includes('enni_id'))){
+      if(i.isRequired === "true" && !(i.name.includes('_id'))){
       this.mdons_creation_form.addControl(i.name, this.fb.control('', [Validators.required]))
       } else {
         this.mdons_creation_form.addControl(i.name, this.fb.control('')) 
@@ -95,7 +101,7 @@ export class MdonsCreationComponent implements OnInit {
 }
 
 getallenni() {
-  this.myhttp.getAllNI("NNI")
+  this.myhttp.getAllNI("ENNI")
       .subscribe((data) => {
           this.enniList = data.map(item => ({id: item }) );
           if(data.length !== 0){
@@ -104,12 +110,29 @@ getallenni() {
       })
 }
 
-chooseUni(item = this.uniIdSelected){
-  if(this.uniIdSelected !== item) this.uniIdSelected = item;
+getallnni() {
+  this.myhttp.getAllNI("NNI")
+      .subscribe((data) => {
+          this.nniList = data.map(item => ({id: item }) );
+          if(data.length !== 0){
+              this.nniIdSelected = this.nniList[0];
+          }
+      })
 }
 
-chooseEnni(item = this.enniIdSelected){
-  if(this.enniIdSelected !== item) this.enniIdSelected = item;
+chooseUni(parameterName, item){
+  //if(this.uniIdSelected !== item) this.uniIdSelected = item;
+  this.nniMap.set(parameterName,item);
+}
+
+chooseEnni(parameterName, item){
+  //if(this.enniIdSelected !== item) this.enniIdSelected = item;
+  this.nniMap.set(parameterName,item);
+}
+
+chooseNni(parameterName, item){
+  //if(this.nniIdSelected !== item) this.nniIdSelected = item;
+  this.nniMap.set(parameterName,item);
 }
 
   goback() {
@@ -131,11 +154,14 @@ chooseEnni(item = this.enniIdSelected){
 
       this.templateParameters.inputs.forEach((ipnut) => {
         this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value;
-        if(ipnut.name.includes('uni_id')) {
-          this.service.parameters.requestInputs[ipnut.name] = this.uniIdSelected.id == undefined ? ipnut.defaultValue : this.uniIdSelected.id;
+        if(ipnut.name.includes('uni') && ipnut.name.includes('id')) {
+          this.service.parameters.requestInputs[ipnut.name] = this.nniMap.get(ipnut.name) == undefined ? this.uniIdSelected.id : this.nniMap.get(ipnut.name).id;
+        }
+        if(ipnut.name.includes('enni') && ipnut.name.includes('id')) {
+          this.service.parameters.requestInputs[ipnut.name] = this.nniMap.get(ipnut.name) == undefined ? this.enniIdSelected.id : this.nniMap.get(ipnut.name).id;
         }
-        if(ipnut.name.includes('enni_id')) {
-          this.service.parameters.requestInputs[ipnut.name] = this.enniIdSelected.id == undefined ? ipnut.defaultValue : this.enniIdSelected.id;
+        if(ipnut.name.includes('nni') && ipnut.name.includes('id')) {
+          this.service.parameters.requestInputs[ipnut.name] = this.nniMap.get(ipnut.name) == undefined ? this.nniIdSelected.id : this.nniMap.get(ipnut.name).id;
         }
         if(ipnut.name==='name') {
           this.service.name = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value;
@@ -157,4 +183,4 @@ chooseEnni(item = this.enniIdSelected){
 
 
 
-}
\ No newline at end of file
+}
diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts
index ee4c71df..1b0d3565 100644
--- a/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/mdons-detail/mdons-detail.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
 import { ServiceListService } from '../../../../core/services/serviceList.service';
+import * as d3 from 'd3';
 
 @Component({
   selector: 'app-mdons-detail',
@@ -22,6 +23,18 @@ export class MdonsDetailComponent implements OnInit {
     description: "",
   };
 
+  roote2e = {
+    "name": "e2e",
+    "type": "e2e",
+    "children": []
+  };
+
+  imgmap = {
+    '1': '../../../../assets/images/create-e2e.png',
+    '2': '../../../../assets/images/create-ns.png',
+    '3': '../../../../assets/images/create-vnf.png',
+  };
+
   getKeys(item) {
     return Object.keys(item);
   }
@@ -39,12 +52,116 @@ export class MdonsDetailComponent implements OnInit {
     if (this.input_parameters.service.parameters.requestInputs != undefined && Object.keys(this.input_parameters.service.parameters.requestInputs).length > 0) {
       this.e2e_requestInputs = this.input_parameters.service.parameters.requestInputs;
     }
+    if (this.e2e_requestInputs != undefined) {
+      for(let item of this.e2e_requestInputs) {
+        console.log("outside "+item);
+        if((item.includes("enni_id") || item.includes("uni_id"))){
+          console.log("inside "+item);
+          let nsIndex = {
+            "name": "ns",
+            "type": "ns",
+            "children": []
+          };
+          
+          this.roote2e.children.push(nsIndex);
+        }
+
+        
+      }
+      console.log(this.e2e_requestInputs);
+      console.log(this.roote2e)
+    }
+
+    this.drawImage(this.roote2e,this.imgmap);
   }
 
   goback() {
     this.closeDetail.emit();
   }
 
-  
+  drawImage(data, imgmap) {
+    var width = document.getElementById("createChart").clientWidth,
+      height = document.getElementById("createChart").clientHeight;
+    var cluster = d3.layout.tree()
+      .size([width, height]);
+    var diagonal = d3.svg.diagonal()
+      .projection(function (d) {
+        return [d.x - 18, d.y + 40];
+      });
+    var svg = d3.select("svg");
+
+    //marker
+    var marker =
+      svg.append("marker")
+        .attr("id", "resolved")
+        .attr("markerUnits", "strokeWidth")
+        .attr("markerUnits", "userSpaceOnUse")
+        .attr("viewBox", "0 -5 10 10")
+        .attr("refX", 22)
+        .attr("refY", 0)
+        .attr("markerWidth", 20)
+        .attr("markerHeight", 20)
+        .attr("orient", "auto")
+        .attr("stroke-width", 1)
+        .append("circle")
+        .attr("cx", 5)
+        .attr("cy", 0)
+        .attr("r", 2)
+        .attr("stroke-width", 1)
+        .style("stroke", "#2F8BF7")
+        .attr('fill', 'white');
+    var i = 0;
+    var nodes = cluster.nodes(data).reverse();
+    console.log(nodes);
+    nodes.forEach(function (d) {
+      d.y = d.depth * 200 + 100;
+
+    });
+
+    var links = cluster.links(nodes);
+
+    var linkEnter = svg.selectAll("path.link")
+      .data(links);
+
+    linkEnter.enter().append("path")
+      .attr("class", "link")
+      .attr("d", diagonal)
+      .style("stroke", "#2F8BF7")
+      .style('stroke-width', '1px')
+      .attr("marker-end", "url(#resolved)")
+      .style("fill", "none")
+      // .style("fill-opacity", 1)
+      .attr("id", function (d, i) {
+        return "mypath" + i;
+      });
+
+    var node = svg.selectAll(".node")
+      .data(nodes)
+      .enter()
+      .append("g")
+      .attr("class", "node")
+      .attr("transform", function (d) {
+        return "translate(" + (d.x + -50) + "," + (d.y) + ")";
+      });
+
+    node.append('image')
+      .attr('xlink:href', function (d) {
+        if (d.type == "e2e") {
+          return imgmap[1];
+        } else if (d.type == "ns") {
+          return imgmap[2];
+        } else if (d.type == "vnf") {
+          return imgmap[3];
+        }
+
+      })
+      .style('width', '12%')
+      .style("cursor", "pointer")
+      .attr("x", 0)
+      .attr("y", 0)
+      .attr("rx", 3);
+
+
+  }
 
-}
\ No newline at end of file
+}
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
index 454e3bc8..388e4c6c 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
@@ -203,8 +203,8 @@ hr {
 nz-layout{
     padding: 20px 32px;
     .top-num{
-
-        width: 100%;
+        white-space: normal;
+        width: 100%; 
         display: flex;
         justify-content: space-around;
         app-top-card{
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..000d68d2 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
@@ -32,6 +32,7 @@
     p{
       height: 28px;
       margin-bottom: 0;
+      line-height: 15px;
       padding-left: 5px;
       font-size: 14px;
       clear: both;
@@ -51,11 +52,10 @@
       }
     }
     p:nth-child(1){
-      margin-top: 25px;
+      margin-top: 20px;
     }
     .service-description{
 
-      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       color: #3C4F8C;
diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json
index e2938833..5a49d3d2 100644
--- a/usecaseui-portal/src/assets/i18n/cn.json
+++ b/usecaseui-portal/src/assets/i18n/cn.json
@@ -24,66 +24,67 @@
   "i18nTextDefine_VM_Alarm": "VM告警",
   "i18nTextDefine_VM_Performance": "VM性能",
 
-  "services-list-component": "--:",
-  "i18nTextDefine_ServiceType": "服务类型",
-  "i18nTextDefine_Create": "创建",
-  "i18nTextDefine_Failed": "失败",
-  "i18nTextDefine_Success": "成功",
-  "i18nTextDefine_InProgress": "执行中",
-  "i18nTextDefine_End_To_End_Service": "端到端服务",
-  "i18nTextDefine_Network_Service": "NS服务",
-  "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN": "CCVPN服务",
-  "i18nTextDefine_NO": "序号",
-  "i18nTextDefine_Name": "名称",
-  "i18nTextDefine_Description": "描述",
-  "i18nTextDefine_UseCase": "场景用例",
-  "i18nTextDefine_Status": "状态",
-  "i18nTextDefine_Action": "动作",
-  "i18nTextDefine_Template": "模板",
-  "i18nTextDefine_Orchestrator": "编排器",
-  "i18nTextDefine_ServiceCreation": "服务创建",
-  "i18nTextDefine_Cancel": "取消",
-  "i18nTextDefine_modelOk": "确认",
-  "i18nTextDefine_Scale": "缩扩容",
-  "i18nTextDefine_SureScale": "您确定缩扩容此实例吗？",
-  "i18nTextDefine_InstanceName": "实例名称",
-  "i18nTextDefine_InstanceID": "实例ID",
-  "i18nTextDefine_ScaleType": "缩扩容类型",
-  "i18nTextDefine_AspectId": "详情Id",
-  "i18nTextDefine_Number_Of_Steps": "级数",
-  "i18nTextDefine_ScalingDirection": "缩扩容方向",
-  "i18nTextDefine_delete": "删除",
-  "i18nTextDefine_SureDelete": "您确定删除此实例吗？",
-  "i18nTextDefine_terminationType": "终止类型",
-  "i18nTextDefine_graceful": "优雅",
-  "i18nTextDefine_forceful": "强制",
-  "i18nTextDefine_gracefulTerminationTimeout": "优雅终止超时时间",
-  "i18nTextDefine_Heal": "自愈",
-  "i18nTextDefine_SureHeal": "您确定自愈此实例吗？",
-  "i18nTextDefine_degreeHealing": "自愈程度",
-  "i18nTextDefine_actionsHealing": "自愈行为",
-  "i18nTextDefine_healScript": "自愈脚本",
-  "i18nTextDefine_additionalParamsforNs": "NS附加参数",
-  "i18nTextDefine_cause": "原因",
-  "i18nTextDefine_action": "动作",
-  "i18nTextDefine_actionvminfo": "操作虚拟机信息",
-  "i18nTextDefine_Update": "更新",
-  "i18nTextDefine_InstanceCreationStarting": "创建开始",
-  "i18nTextDefine_InstanceCreatedSuccessfully": "创建成功",
-  "i18nTextDefine_InstanceCreationFailed": "创建失败！",
-  "i18nTextDefine_InstanceTeminationStarting": "删除开始",
-  "i18nTextDefine_InstanceTeminatedSuccessfully": "删除成功",
-  "i18nTextDefine_InstanceTeminationFailed": " 删除失败",
-  "i18nTextDefine_InstanceScaleStarting": "缩扩容开始",
-  "i18nTextDefine_InstanceScaledSuccessfully": "缩扩容成功",
-  "i18nTextDefine_InstanceScaleFailed": "缩扩容失败",
-  "i18nTextDefine_InstanceHealingStarting": "自愈开始",
-  "i18nTextDefine_InstanceHealedSuccessfully": "自愈成功",
-  "i18nTextDefine_InstanceHealingFailed": "自愈失败",
-  "i18nTextDefine_InstanceUpdateStarting": "更新开始",
-  "i18nTextDefine_InstanceUpdatedSuccessfully": "更新成功",
-  "i18nTextDefine_InstanceUpdateFailed": "更新失败",
-  "i18nTextDefine_Close": "关闭",
+  "services-list-component":"--:",
+  "i18nTextDefine_ServiceType":"服务类型",
+  "i18nTextDefine_Create":"创建",
+  "i18nTextDefine_Failed":"失败",
+  "i18nTextDefine_Success":"成功",
+  "i18nTextDefine_InProgress":"执行中",
+  "i18nTextDefine_End_To_End_Service":"端到端服务",
+  "i18nTextDefine_Network_Service":"NS服务",
+  "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN":"CCVPN服务",
+  "i18nTextDefine_MDONS":"MDONS 多域业务网络服务",
+  "i18nTextDefine_NO":"序号",
+  "i18nTextDefine_Name":"名称",
+  "i18nTextDefine_Description":"描述",
+  "i18nTextDefine_UseCase":"场景用例",
+  "i18nTextDefine_Status":"状态",
+  "i18nTextDefine_Action":"动作",
+  "i18nTextDefine_Template":"模板",
+  "i18nTextDefine_Orchestrator":"编排器",
+  "i18nTextDefine_ServiceCreation":"服务创建",
+  "i18nTextDefine_Cancel":"取消",
+  "i18nTextDefine_modelOk":"确认",
+  "i18nTextDefine_Scale":"缩扩容",
+  "i18nTextDefine_SureScale":"您确定缩扩容此实例吗？",
+  "i18nTextDefine_InstanceName":"实例名称",
+  "i18nTextDefine_InstanceID":"实例ID",
+  "i18nTextDefine_ScaleType":"缩扩容类型",
+  "i18nTextDefine_AspectId":"详情Id",
+  "i18nTextDefine_Number_Of_Steps":"级数",
+  "i18nTextDefine_ScalingDirection":"缩扩容方向",
+  "i18nTextDefine_delete":"删除",
+  "i18nTextDefine_SureDelete":"您确定删除此实例吗？",
+  "i18nTextDefine_terminationType":"终止类型",
+  "i18nTextDefine_graceful":"优雅",
+  "i18nTextDefine_forceful":"强制",
+  "i18nTextDefine_gracefulTerminationTimeout":"优雅终止超时时间",
+  "i18nTextDefine_Heal":"自愈",
+  "i18nTextDefine_SureHeal":"您确定自愈此实例吗？",
+  "i18nTextDefine_degreeHealing":"自愈程度",
+  "i18nTextDefine_actionsHealing":"自愈行为",
+  "i18nTextDefine_healScript":"自愈脚本",
+  "i18nTextDefine_additionalParamsforNs":"NS附加参数",
+  "i18nTextDefine_cause":"原因",
+  "i18nTextDefine_action":"动作",
+  "i18nTextDefine_actionvminfo":"操作虚拟机信息",
+  "i18nTextDefine_Update":"更新",
+  "i18nTextDefine_InstanceCreationStarting":"创建开始",
+  "i18nTextDefine_InstanceCreatedSuccessfully":"创建成功",
+  "i18nTextDefine_InstanceCreationFailed":"创建失败！",
+  "i18nTextDefine_InstanceTeminationStarting":"删除开始",
+  "i18nTextDefine_InstanceTeminatedSuccessfully":"删除成功",
+  "i18nTextDefine_InstanceTeminationFailed":" 删除失败",
+  "i18nTextDefine_InstanceScaleStarting":"缩扩容开始",
+  "i18nTextDefine_InstanceScaledSuccessfully":"缩扩容成功",
+  "i18nTextDefine_InstanceScaleFailed":"缩扩容失败",
+  "i18nTextDefine_InstanceHealingStarting":"自愈开始",
+  "i18nTextDefine_InstanceHealedSuccessfully":"自愈成功",
+  "i18nTextDefine_InstanceHealingFailed":"自愈失败",
+  "i18nTextDefine_InstanceUpdateStarting":"更新开始",
+  "i18nTextDefine_InstanceUpdatedSuccessfully":"更新成功",
+  "i18nTextDefine_InstanceUpdateFailed":"更新失败",
+  "i18nTextDefine_Close":"关闭",
   "i18nTextDefine_Templateparsingfailed": "模板解析失败",
 
   "ccvpn-creation-component": "--:",
@@ -138,4 +139,4 @@
   "i18nTextDefine_PartnerNetwork": "伙伴网络",
   "i18nTextDefine_HostUrl": "主机网址",
   "i18nTextDefine_deleteLink": "删除链接"
-}
\ No newline at end of file
+}
diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json
index 9691bc68..b25413e4 100644
--- a/usecaseui-portal/src/assets/i18n/en.json
+++ b/usecaseui-portal/src/assets/i18n/en.json
@@ -23,67 +23,67 @@
   "i18nTextDefine_VNF_Alarm": "VNF Alarm",
   "i18nTextDefine_VM_Alarm": "VM Alarm",
   "i18nTextDefine_VM_Performance": "VM PERFORMANCE",
-
-  "services-list-component": "--:",
-  "i18nTextDefine_ServiceType": "Service Type",
-  "i18nTextDefine_Create": "Create",
-  "i18nTextDefine_Failed": "Failed",
-  "i18nTextDefine_Success": "Success",
-  "i18nTextDefine_InProgress": "In Progress",
-  "i18nTextDefine_End_To_End_Service": "End To End Service",
-  "i18nTextDefine_Network_Service": "Network Service",
-  "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN": "Cross Domain and Cross Layer VPN",
-  "i18nTextDefine_NO": "NO",
-  "i18nTextDefine_Name": "Name",
-  "i18nTextDefine_Description": "Description",
-  "i18nTextDefine_UseCase": "Use Case",
-  "i18nTextDefine_Status": "Status",
-  "i18nTextDefine_Action": "Action",
-  "i18nTextDefine_Template": "Template",
-  "i18nTextDefine_Orchestrator": "Orchestrator",
-  "i18nTextDefine_ServiceCreation": "Service Creation",
-  "i18nTextDefine_Cancel": "Cancel",
-  "i18nTextDefine_modelOk": "OK",
-  "i18nTextDefine_Scale": "Scale",
-  "i18nTextDefine_SureScale": "Are you sure scale this instance?",
-  "i18nTextDefine_InstanceName": "Instance Name",
-  "i18nTextDefine_InstanceID": "Instance ID",
-  "i18nTextDefine_ScaleType": "Scale Type",
-  "i18nTextDefine_AspectId": "AspectId",
-  "i18nTextDefine_Number_Of_Steps": "Number Of Steps",
-  "i18nTextDefine_ScalingDirection": "Scaling Direction",
-  "i18nTextDefine_delete": "Delete",
-  "i18nTextDefine_SureDelete": "Are you sure delete this instance?",
-  "i18nTextDefine_terminationType": "Termination Type",
-  "i18nTextDefine_graceful": "graceful",
-  "i18nTextDefine_forceful": "forceful",
-  "i18nTextDefine_gracefulTerminationTimeout": "graceful Termination Timeout",
-  "i18nTextDefine_Heal": "Heal",
-  "i18nTextDefine_SureHeal": "Are you sure heal this instance?",
-  "i18nTextDefine_degreeHealing": "degreeHealing",
-  "i18nTextDefine_actionsHealing": "actionsHealing",
-  "i18nTextDefine_healScript": "healScript",
-  "i18nTextDefine_additionalParamsforNs": "additional Params for NS",
-  "i18nTextDefine_cause": "cause",
-  "i18nTextDefine_action": "action",
-  "i18nTextDefine_actionvminfo": "actionvminfo",
-  "i18nTextDefine_Update": "Update",
-  "i18nTextDefine_InstanceCreationStarting": "instance creation is starting.",
-  "i18nTextDefine_InstanceCreatedSuccessfully": "instance was created successfully.",
-  "i18nTextDefine_InstanceCreationFailed": "instance creation failed!!!",
-  "i18nTextDefine_InstanceTeminationStarting": "instance temination is starting.",
-  "i18nTextDefine_InstanceTeminatedSuccessfully": "instance was teminated successfully.",
-  "i18nTextDefine_InstanceTeminationFailed": " instance temination failed!!!",
-  "i18nTextDefine_InstanceScaleStarting": "instance scale is starting.",
-  "i18nTextDefine_InstanceScaledSuccessfully": "instance was scaled successfully.",
-  "i18nTextDefine_InstanceScaleFailed": "instance scale failed!!!",
-  "i18nTextDefine_InstanceHealingStarting": " instance healing is starting.",
-  "i18nTextDefine_InstanceHealedSuccessfully": "instance was healed successfully.",
-  "i18nTextDefine_InstanceHealingFailed": "instance healing failed!!!",
-  "i18nTextDefine_InstanceUpdateStarting": "instance update is starting.",
-  "i18nTextDefine_InstanceUpdatedSuccessfully": "instance was updated successfully.",
-  "i18nTextDefine_InstanceUpdateFailed": "instance update failed!!!",
-  "i18nTextDefine_Close": "close",
+  "services-list-component":"--:",
+  "i18nTextDefine_ServiceType":"Service Type",
+  "i18nTextDefine_Create":"Create",
+  "i18nTextDefine_Failed":"Failed",
+  "i18nTextDefine_Success":"Success",
+  "i18nTextDefine_InProgress":"In Progress",
+  "i18nTextDefine_End_To_End_Service":"End To End Service",
+  "i18nTextDefine_Network_Service":"Network Service",
+  "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN":"Cross Domain and Cross Layer VPN",
+  "i18nTextDefine_MDONS":"Multi Domain Orchaestrational Network Service",
+  "i18nTextDefine_NO":"NO",
+  "i18nTextDefine_Name":"Name",
+  "i18nTextDefine_Description":"Description",
+  "i18nTextDefine_UseCase":"Use Case",
+  "i18nTextDefine_Status":"Status",
+  "i18nTextDefine_Action":"Action",
+  "i18nTextDefine_Template":"Template",
+  "i18nTextDefine_Orchestrator":"Orchestrator",
+  "i18nTextDefine_ServiceCreation":"Service Creation",
+  "i18nTextDefine_Cancel":"Cancel",
+  "i18nTextDefine_modelOk":"OK",
+  "i18nTextDefine_Scale":"Scale",
+  "i18nTextDefine_SureScale":"Are you sure scale this instance?",
+  "i18nTextDefine_InstanceName":"Instance Name",
+  "i18nTextDefine_InstanceID":"Instance ID",
+  "i18nTextDefine_ScaleType":"Scale Type",
+  "i18nTextDefine_AspectId":"AspectId",
+  "i18nTextDefine_Number_Of_Steps":"Number Of Steps",
+  "i18nTextDefine_ScalingDirection":"Scaling Direction",
+  "i18nTextDefine_delete":"Delete",
+  "i18nTextDefine_SureDelete":"Are you sure delete this instance?",
+  "i18nTextDefine_terminationType":"Termination Type",
+  "i18nTextDefine_graceful":"graceful",
+  "i18nTextDefine_forceful":"forceful",
+  "i18nTextDefine_gracefulTerminationTimeout":"graceful Termination Timeout",
+  "i18nTextDefine_Heal":"Heal",
+  "i18nTextDefine_SureHeal":"Are you sure heal this instance?",
+  "i18nTextDefine_degreeHealing":"degreeHealing",
+  "i18nTextDefine_actionsHealing":"actionsHealing",
+  "i18nTextDefine_healScript":"healScript",
+  "i18nTextDefine_additionalParamsforNs":"additional Params for NS",
+  "i18nTextDefine_cause":"cause",
+  "i18nTextDefine_action":"action",
+  "i18nTextDefine_actionvminfo":"actionvminfo",
+  "i18nTextDefine_Update":"Update",
+  "i18nTextDefine_InstanceCreationStarting":"instance creation is starting.",
+  "i18nTextDefine_InstanceCreatedSuccessfully":"instance was created successfully.",
+  "i18nTextDefine_InstanceCreationFailed":"instance creation failed!!!",
+  "i18nTextDefine_InstanceTeminationStarting":"instance temination is starting.",
+  "i18nTextDefine_InstanceTeminatedSuccessfully":"instance was teminated successfully.",
+  "i18nTextDefine_InstanceTeminationFailed":" instance temination failed!!!",
+  "i18nTextDefine_InstanceScaleStarting":"instance scale is starting.",
+  "i18nTextDefine_InstanceScaledSuccessfully":"instance was scaled successfully.",
+  "i18nTextDefine_InstanceScaleFailed":"instance scale failed!!!",
+  "i18nTextDefine_InstanceHealingStarting":" instance healing is starting.",
+  "i18nTextDefine_InstanceHealedSuccessfully":"instance was healed successfully.",
+  "i18nTextDefine_InstanceHealingFailed":"instance healing failed!!!",
+  "i18nTextDefine_InstanceUpdateStarting":"instance update is starting.",
+  "i18nTextDefine_InstanceUpdatedSuccessfully":"instance was updated successfully.",
+  "i18nTextDefine_InstanceUpdateFailed":"instance update failed!!!",
+  "i18nTextDefine_Close":"close",
   "i18nTextDefine_Templateparsingfailed": "Template parsing failed",
 
   "ccvpn-creation-component": "--:",