feat: change the project structure and add mock data function

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

40 files changed, 3786 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html
new file mode 100644
index 00000000..7c1eee6b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.html
@@ -0,0 +1,22 @@
+<!--
+    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.
+-->
+<div echarts 
+[initOpts]="initOpts"
+[options]="barOption" 
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+  Bar Chart
+</div>
diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.less
diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts
new file mode 100644
index 00000000..d979ffb6
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarComponent } from './bar.component';
+
+describe('BarComponent', () => {
+  let component: BarComponent;
+  let fixture: ComponentFixture<BarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts
new file mode 100644
index 00000000..609ce3ee
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/bar/bar.component.ts
@@ -0,0 +1,71 @@
+/*
+    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.
+*/
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+  selector: 'app-bar',
+  templateUrl: './bar.component.html',
+  styleUrls: ['./bar.component.less']
+})
+export class BarComponent implements OnInit {
+
+  // chart Data
+  @Input() chartData;
+  // init Data
+  @Input() initData;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.initOpts = {
+      renderer: 'canvas',
+      height: this.initData.height,
+      width: this.initData.width,
+
+    };
+    this.barOption = {
+      tooltip: this.initData.option.tooltip,
+      grid: this.initData.option.grid,
+      xAxis: this.initData.option.xAxis,
+      yAxis: this.initData.option.yAxis,
+      series: this.initData.option.series
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Execute when there is an instance, which is equivalent to not executing the following method for the first time.
+    if (this.chartIntance) {
+      this.chartDataChange()
+    }
+  }
+  // Initialize the height of the graphic
+  initOpts: any;
+  // Line chart configuration
+  barOption: any;
+  // Instance object
+  chartIntance: any;
+  // Data change
+  updateOption: any;
+  chartDataChange() {
+    this.updateOption = this.chartData;
+    console.log(this.initData.customer)
+  }
+  chartInit(chart) {
+    this.chartIntance = chart;
+  }
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.html b/usecaseui-portal/src/app/shared/components/charts/line/line.component.html
new file mode 100644
index 00000000..e032eb27
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.html
@@ -0,0 +1,22 @@
+<!--
+    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.
+-->
+<div echarts 
+[initOpts]="initOpts"
+[options]="lineOption" 
+[merge]="updateOption"
+(chartInit)="chartInit($event)">
+  Line Chart
+</div>
diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.less b/usecaseui-portal/src/app/shared/components/charts/line/line.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.less
diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts
new file mode 100644
index 00000000..afe70654
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineComponent } from './line.component';
+
+describe('LineComponent', () => {
+  let component: LineComponent;
+  let fixture: ComponentFixture<LineComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LineComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts b/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts
new file mode 100644
index 00000000..25881699
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/line/line.component.ts
@@ -0,0 +1,105 @@
+/*
+    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.
+*/
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+  selector: 'app-line',
+  templateUrl: './line.component.html',
+  styleUrls: ['./line.component.less']
+})
+export class LineComponent implements OnInit {
+  // chart Data
+  @Input() chartData;
+  // init Data
+  @Input() initData;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.initOpts = {
+      renderer: 'canvas',
+      height: this.initData.height,
+      width: this.initData.width
+    };
+    this.lineOption ={
+      tooltip : this.initData.option.tooltip,
+      icon:'circle',
+      legend: this.initData.option.legend,
+      dataZoom: this.initData.option.dataZoom,
+      grid: {
+          left: '0%',
+          right: '3%',
+          top: '10%',
+          bottom: '18%',
+          containLabel: true
+      },
+      xAxis: {
+        axisTick: {
+          show: false,
+        },
+        axisLine:{
+          show: false
+        },
+        axisLabel:{
+          color:"#3C4F8C"
+        },
+        data: this.initData.option.xAxis.data
+      },
+      yAxis: {
+        axisTick: {
+          show: false,
+        },
+        axisLine:{
+          show: false
+        },
+        axisLabel:{
+          color:"#3C4F8C"
+        },
+        splitLine:{
+          lineStyle:{
+            type:"dashed",
+          }
+        }
+      },
+      series : this.initData.option.series
+    }
+  }
+
+  ngOnChanges(changes:SimpleChanges){
+    // Execute when there is an instance, which is equivalent to not executing the following method for the first time.
+    if(this.chartIntance){
+      this.chartDataChange()
+    }
+  }
+  // Initialize the height of the graphic
+  initOpts:any;
+  // Line chart configuration
+  lineOption:any;
+  // Instance object
+  chartIntance:any;
+  // Data change
+  updateOption:any;
+  chartDataChange(){
+    this.updateOption = this.chartData;
+  }
+  chartInit(chart){
+    this.chartIntance = chart;
+  }
+
+
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html
new file mode 100644
index 00000000..d063f22a
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.html
@@ -0,0 +1,24 @@
+<!--
+    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.
+-->
+<div echarts 
+[initOpts]="initOpts"
+[options]="pieOption" 
+[merge]="updateOption"
+(chartInit)="chartInit($event)"
+(chartMouseOver)="pieMouseOver($event)"
+(chartMouseOut)="pieMouseOut($event)">
+  Pie Chart
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.less
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts
new file mode 100644
index 00000000..528da25c
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PieComponent } from './pie.component';
+
+describe('PieComponent', () => {
+  let component: PieComponent;
+  let fixture: ComponentFixture<PieComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PieComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PieComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts
new file mode 100644
index 00000000..dc5c80a0
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/charts/pie/pie.component.ts
@@ -0,0 +1,114 @@
+/*
+    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.
+*/
+import { Component, OnInit, Input } from '@angular/core';
+import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
+
+@Component({
+  selector: 'app-pie',
+  templateUrl: './pie.component.html',
+  styleUrls: ['./pie.component.less']
+})
+export class PieComponent implements OnInit {
+  // chart Data
+  @Input() chartData;
+  // init Data
+  @Input() initData;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.initOpts = {
+      renderer: 'canvas',
+      height: this.initData.height
+    };
+    this.pieOption = {
+      backgroundColor:this.initData.option.backgroundColor,
+      legend: this.initData.option.legend,
+      color:this.initData.option.color,
+      tooltip: this.initData.option.tooltip || '',
+      series : [
+          {
+              name: this.initData.option.series[0].name,
+              type: 'pie',
+              radius : this.initData.option.series[0].radius,
+              center:this.initData.option.series[0].center,
+              legendHoverLink: false,
+              hoverOffset: 3,
+              avoidLabelOverlap: false,
+              // minAngle:1,
+              label: this.initData.option.series[0].label,
+              data:[],
+              itemStyle: this.initData.option.series[0].itemStyle
+          }
+      ]
+    }
+  }
+
+  ngOnChanges(changes:SimpleChanges){
+
+    // Execute when there is an instance, which is equivalent to not executing the following method for the first time.
+    if(this.chartIntance){
+      this.chartDataChange()
+    }
+  }
+
+  // Initialize the height of the graphic
+  initOpts:any;
+  // Alarm pie chart
+  pieOption:any;
+  // Instance object
+  chartIntance:any;
+  // Data change
+  updateOption:any;
+  chartDataChange(){
+    this.updateOption = this.chartData;
+    // Wait until the updateOption is finished and then execute
+    this.chartIntance.on('finished',()=>{
+      this.chartIntance.dispatchAction({
+        type:'highlight',
+        seriesIndex: 0,
+        dataIndex:0        
+      })
+      //Since all view changes are rendered, this event is logged out after the update
+      this.chartIntance.off('finished')
+    })
+  }
+
+  chartInit(chart){
+    this.chartIntance = chart;
+  }
+  
+  pieMouseOver(e){
+    this.chartIntance.dispatchAction({
+      type:'downplay'
+    })
+    this.chartIntance.dispatchAction({
+      type:'highlight',
+      seriesIndex: 0,
+      dataIndex:e.dataIndex
+    })
+  }
+
+  pieMouseOut(e){
+    this.chartIntance.dispatchAction({
+      type:'highlight',
+      seriesIndex: 0,
+      dataIndex:e.dataIndex
+    })
+  }
+
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.html b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
new file mode 100644
index 00000000..08a23935
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.html
@@ -0,0 +1,144 @@
+<!--
+    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.
+-->
+<div class="content">
+  <div class="chearts">
+    <div class="Cu">
+      <p> {{"i18nTextDefine_Instance_Count_of_Customer" | translate}} </p>
+      <app-pie [initData]="CUChartInit" [chartData]="CUChartData" *ngIf="serviceChart"></app-pie>
+      <div *ngIf="!serviceChart"
+        style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No
+        Service Instances </div>
+      <!-- <div class="legend"></div><span> {{"i18nTextDefine_users" | translate}} </span> -->
+    </div>
+    <div class="type">
+      <p> {{"i18nTextDefine_Instance_Count_of_ServiceType" | translate}} </p>
+      <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar>
+      <div class="footname" style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: #3C4F8C;">
+        <img src="../../../../assets/images/customerBarUser.png" alt="customerName"
+          style="margin-right: 5px;margin-bottom: 3px;">
+        {{this.serviceInit["customer"]}}
+      </div>
+    </div>
+  </div>
+  <div class="customer">
+    <div class="customer_title">
+      <div class="customers">
+        <span> {{"i18nTextDefine_Customer" | translate}} </span>
+        <img src="../../../../assets/images/customer04.png" alt="" (click)="this.customeradd  = !this.customeradd"
+          style="cursor: pointer">
+      </div>
+    </div>
+    <div class="customer_detail">
+      <div class="customer_add" *ngIf="customeradd">
+        <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " class="customer_name"
+          nzSize="default" [(ngModel)]="addNewCustomer">
+        <button nz-button nzType="primary" class="customer_addbut"
+          (click)="createNewCustomer(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+      </div>
+      <div class="customer_list">
+        <ul>
+          <li *ngFor="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}"
+            (click)="choseCustomer(i,item)">
+            <img src="../../../../assets/images/customer05.png" alt="">
+            <span>{{item.name}}</span>
+            <i class="anticon anticon-delete" nzType="info" (click)="deleteCustomerModel(item)"></i>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="services_type">
+    <div class="services_type_title">
+      <div class="servicess">
+        <span> {{"i18nTextDefine_ServiceType" | translate}} </span>
+        <img src="../../../../assets/images/customer03.png" alt="" (click)="this.servicesadd  = !this.servicesadd "
+          style="cursor: pointer">
+      </div>
+    </div>
+    <div class="services_type_detail">
+      <div class="services_add" *ngIf="servicesadd">
+        <input nz-input placeholder=" {{'i18nTextDefine_Input_ServicesType' | translate}} " class="services_name"
+          nzSize="default" [(ngModel)]="addNewServiceType">
+        <button nz-button nzType="primary" class="services_addbut"
+          (click)="createNewServiceType(notificationModel)">{{"i18nTextDefine_Add" | translate}}</button>
+      </div>
+      <div class="services_list">
+        <div class="border_size"></div>
+        <div style="padding:0 20px;">
+          <ul>
+            <li *ngFor="let item of AllServiceTypes">
+              <span>{{item.type}}</span>
+              <i class="anticon anticon-delete" nzType="info" (click)="deleteServiceTypeModel(item)"></i>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteCustomerModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
+    (nzOnCancel)="deleteCustomerCancel()" (nzOnOk)="deleteCustomerOk(notificationModel)" nzClassName="deleteModel"
+    nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+    <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteCustomer" | translate}} </h3>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteCustomer["name"]}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerID" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteCustomer["id"]}}</div>
+    </div>
+  </nz-modal>
+  <nz-modal nzWidth="428" [(nzVisible)]="deleteServiceTypeModelVisible"
+    nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteServiceTypeCancel()"
+    (nzOnOk)="deleteServiceTypeOk(notificationModel)" nzClassName="deleteModel deleteServiceTypeModel"
+    nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+    <h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_Input_Sure_deleteServiceType" | translate}} </h3>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerName" | translate}} :</h4>
+      <div class="deleteModelContent">{{selectCustomer.name}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_CustomerID" | translate}} :</h4>
+      <div class="deleteModelContent">{{selectCustomer.id}}</div>
+    </div>
+    <div class="question">
+      <h4> {{"i18nTextDefine_ServiceType" | translate}} :</h4>
+      <div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div>
+    </div>
+  </nz-modal>
+  <!--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="{{this.notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
+        </span>
+        <div class="ant-notification-notice-message" *ngIf="notificationAttributes.title == 'Customer'">
+          {{"i18nTextDefine_"+notificationAttributes.title | translate}}&nbsp;
+          {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
+        </div>
+        <div class="ant-notification-notice-description">
+          <div class="notificationlist">
+            <p>{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p>
+            <span>{{ notificationAttributes.name }}</span>
+          </div>
+        </div>
+        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
+      </div>
+    </div>
+  </ng-template>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.less b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
new file mode 100644
index 00000000..7d329230
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.less
@@ -0,0 +1,254 @@
+/*
+    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.
+*/
+.content {
+    display: flex;
+    
+    width: 100%;
+    height: 100%;
+    i.anticon {
+        cursor: pointer;
+        font-size: 18px;
+        padding: 2px;
+        &:hover{
+            color: #0DA9E2;
+        }
+    }
+    li.active{
+        &:hover{
+            cursor: pointer;
+            color: #3C4F8C;
+            // background:linear-gradient(to right, #E5F6FF, #CFEEFA)
+            background-color: #e6f7ff;
+        }
+    }
+    .customer {
+        height: 100%;
+        overflow: hidden;
+        width: 32%;
+        margin-right: 1.5%;
+        border-radius: 5px;
+        background-color: #fff;
+        box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+        display: inline-block;
+        vertical-align: top;
+        .customer_title {
+            line-height: 3.5em;
+            //height: 5%;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .customers {
+                padding: 0 20px;
+                span {
+                    color: #0DA9E2;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 30px;
+                    height: 30px;
+                    float: right;
+                    margin-top: 7px;
+                }
+            }
+        }
+        .customer_detail {
+            height: 95%;
+            width: 100%;
+            overflow: auto;
+            border-top: 1px #07A9E1 solid;
+            .customer_add {
+                line-height: 3.5;
+                height: 50px;
+                width: 100%;
+                padding: 0 20px;
+                background-color: #F4F5F8;
+                .customer_name {
+                    width: 52%;
+                    font-size: 12px;
+                    color: #CCCCCC;
+                    font-family: ArialMT;
+                    border-color: #3F9CFF;
+                }
+                .customer_addbut {
+                    float: right;
+                    margin-top: 9px;
+                    width: 28%;
+                    background-color: #0DA9E2;
+                }
+            }
+            .customer_list {
+                .active {
+                    background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                    color: #3C4F8C;
+                }
+                li {
+                    display:flex; 
+                    align-items: center;                 
+                    padding: 0 20px;
+                    height: 50px;
+                    line-height: 3.5;
+                    width: 100%;
+                    cursor: pointer;
+                    color: rgba(60,79,140,0.5);
+                    img {
+                        width: 30px;
+                        height: 30px;
+                    }
+                    span {
+                        width: 70%;
+                        padding-left: 10%;
+                        display: inline-block;
+                    }
+                }
+            }
+        }
+        
+    }
+    .services_type {
+        overflow: hidden;
+        height: 100%;
+        border-radius: 5px;
+        width: 32%;
+        background-color: #fff;
+        box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+        display: inline-block;
+        vertical-align: top;
+        .services_type_title {
+            line-height: 3.5em;
+            //height: 5%;
+            width: 100%;
+            border-bottom: 1px #07A9E1 solid;
+            .servicess {
+                padding: 0 20px;
+                span {
+                    color: #0DA9E2;
+                    font-family:"ArialMT";
+                }
+                img {
+                    width: 40px;
+                    height:40px;
+                    float: right;
+                    margin-right: -10px;
+                    margin-top: 5px;
+                }
+            }
+        }
+        .services_type_detail {
+            height: 95%;
+            width: 100%;
+            overflow: auto;
+            border-top: 1px #07A9E1 solid;
+            .services_add {
+                line-height: 3.5;
+                height: 50px;
+                width: 100%;
+                padding: 0 20px;
+                background-color: #F4F5F8;
+                .services_name {
+                    width: 52%;
+                    font-size: 12px;
+                    color: #CCCCCC;
+                    font-family: ArialMT;
+                    border-color: #3F9CFF;
+                }
+                .services_addbut {
+                    float: right;
+                    margin-top: 5px;
+                    width: 28%;
+                    clear: both;
+                    background-color: #0DA9E2;
+                }
+            }
+
+            .services_list {
+                background:linear-gradient(to right, #E5F6FF, #CFEEFA);
+                height: 100%;
+                .border_size{
+                    position: absolute;
+                    margin-left: -8px;
+                    width: 0;
+                    height: 0;
+                    border-top: 24px solid transparent;
+                    border-bottom: 24px solid transparent;
+                    border-right: 10px solid #E5F6FF;
+                }
+                    li {
+                        height: 50px;
+                        line-height: 50px;
+                        width: 100%;
+                        vertical-align: middle;
+                        border-bottom: 2px #FFFFFF dashed;
+                        position: relative;
+                        color: #3C4F8C;
+                        i {
+                            display: inline-block;
+                            vertical-align: middle;
+                            position: absolute;
+                            width: 48px;
+                            height: 48px;
+                            top: 0;
+                            right: -16px;
+                            line-height: 46px;
+                        }
+                    }
+                }
+            
+        }
+    }
+    .chearts {
+        display: inline-block;
+        width: 32%;
+        margin-right: 1.5%;  
+        vertical-align: top;
+        height: 100%;
+        >div{
+            padding: 20px 20px;
+        }
+        .Cu {
+            height: 48%;
+            width: 100%;
+            margin-bottom: 7%;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+            p {
+                color :#0DA9E2;
+                font-family:"ArialMT";
+            }
+            .legend {
+                height: 10px;
+                width: 10px;
+                display: inline-block;
+                background: linear-gradient(to right,#7DCEFB, #0DA9E2);
+                border-radius: 50%;
+                margin: 15px 4px 0 43%;
+            }
+        }
+        .type {
+            height: 48%;
+            width: 100%;
+            margin-right: 2.5%;
+            border-radius: 5px;
+            background-color: #fff;
+            box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06);
+            p {
+                color :#0DA9E2;
+                font-family:"ArialMT";
+                
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts
new file mode 100644
index 00000000..f185e7a7
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerComponent } from './customer.component';
+
+describe('CustomerComponent', () => {
+  let component: CustomerComponent;
+  let fixture: ComponentFixture<CustomerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/customer/customer.component.ts b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
new file mode 100644
index 00000000..a0cf8338
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/customer/customer.component.ts
@@ -0,0 +1,552 @@
+/*
+    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.
+*/
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { ManagemencsService } from '../../../core/services/managemencs.service';
+import { NzNotificationService } from 'ng-zorro-antd';
+@Component({
+    selector: 'app-customer',
+    templateUrl: './customer.component.html',
+    styleUrls: ['./customer.component.less']
+})
+export class CustomerComponent implements OnInit {
+    public chose = '';
+
+    constructor(
+        private managemencs: ManagemencsService,
+        private notification: NzNotificationService
+    ) {
+    }
+
+    ngOnInit() {
+        this.getAllCustomers();
+    }
+
+    AllCustomersdata = [];
+    AllServiceTypes = [];
+    customerber = [];
+    // Get all customers
+    active;
+    selectCustomer = {
+        name: null,
+        id: null
+    };
+    addNewCustomer = null;
+    addNewServiceType = null;
+    deleteCustomerModelVisible = false;
+    deleteServiceTypeModelVisible = false;
+    //2019.08.14 add
+    notificationAttributes = {
+        "title": "Customer",
+        "imgPath": "../../../../assets/images/execute-inproess.png",
+        "action": "Create",
+        "status": "InProgress",
+        "name": ""
+    };
+    notificationModelShow(template: TemplateRef<{}>): void {
+        console.log(this.notificationAttributes, "notificationModelShow show");
+        this.notification.template(template);
+    }
+    notificationSuccess(notificationModel) {
+        this.notificationAttributes.imgPath = "../../../../assets/images/execute-success.png";
+        this.notificationAttributes.status = "Success";
+        this.notificationModelShow(notificationModel);
+    }
+    notificationFailed(notificationModel) {
+        this.notificationAttributes.imgPath = "../../../../assets/images/execute-faild.png";
+        this.notificationAttributes.status = "Failed";
+        this.notificationModelShow(notificationModel);
+    }
+    getAllCustomers() {
+        this.managemencs.getAllCustomers().subscribe((data) => {
+            this.AllCustomersdata = data.map((item) => {
+                return { name: item["subscriber-name"], id: item["global-customer-id"] }
+            });
+            this.active = this.selectCustomer = this.AllCustomersdata[0];
+            this.serviceInit["customer"] = this.AllCustomersdata[0].name;
+            this.getCustomersPie();
+            this.getServiceTypes(this.active);
+            this.getCustomersColumn(this.active);
+        })
+
+    }
+
+    // Get all servicetype
+    getServiceTypes(item) {
+        this.managemencs.getServiceTypes(item).subscribe((data) => {
+            this.AllServiceTypes = data.map((item) => {
+                return { type: item["service-type"], id: item["global-customer-id"] }
+            });
+        })
+    }
+
+    // Switch user data
+    choseCustomer(index, item) {
+        this.chose = index;
+        this.selectCustomer = item;
+        this.serviceInit["customer"] = this.selectCustomer.name;
+        this.getServiceTypes(item);
+        this.getCustomersColumn(item);
+    }
+
+    customeradd = false;
+    servicesadd = false;
+    //Customer pie
+    CUChartData: Object;
+    CUChartInit: Object = {
+        height: 200,
+        option: {
+            color: ["#F2F6FD"],
+            series: [{
+                type: 'pie',
+                name: "customer",
+                radius: '90%',
+                center: ['50%', '50%'],
+                data: [],
+                label: {
+                    normal: {
+                        position: 'center',
+                        show: false,
+                        formatter: '   {b|{b}：{c}}  ',
+                        backgroundColor: 'rgba(51,51,51,0.9)',
+                        borderColor: 'rgba(51,51,51,0.9)',
+                        borderWidth: 1,
+                        borderRadius: 4,
+                        rich: {
+                            b: {
+                                fontSize: 16,
+                                color: '#fff',
+                                lineHeight: 33
+                            }
+                        }
+                    },
+                    emphasis: {
+                        show: true,
+
+                    }
+                },
+                labelLine: {
+                    normal: {
+                        show: false
+                    }
+                },
+                itemStyle: {
+                    normal: {
+                        borderWidth: 3,
+                        borderColor: '#ffffff',
+                    },
+                    emphasis: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#7DCEFB'
+                            }, {
+                                offset: 1, color: '#0DA9E2'
+                            }],
+                            global: false
+                        },
+                        borderWidth: 0,
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 10, 5, 0)'
+                    }
+                }
+            }]
+        }
+    };
+
+    // get customers chart pie
+    Pie_name = [];
+    Pie_value = [];
+    serviceChart = true;
+    serviceNumber;
+    getCustomersPie() {
+        this.managemencs.getCustomersPie().subscribe((data) => {
+            this.serviceNumber = data.serviceTotalNum;
+            if (this.serviceNumber > 0) {
+                this.serviceChart = true;
+            } else {
+                this.serviceChart = false;
+            }
+            this.CUChartData = {
+                series: [{
+                    data: data.customerServiceList
+                }]
+            }
+            console.log(this.CUChartData)
+        }, (err) => {
+            console.log(err);
+        });
+    }
+
+    // service bar
+    serviceData: Object;
+    serviceInit: Object = {
+        customer: '',
+        width: 280,
+        height: 190,
+        option: {
+            tooltip: {
+                show: true,
+                trigger: 'item',
+                formatter: "{c}"
+            },
+            grid: {
+                top: '5%',
+                left: '5%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: [
+                {
+                    type: 'value',
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#EDEDED"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#3C4F8C"
+                    }
+                }
+
+            ],
+            yAxis: [
+                {
+                    type: 'category',
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#EDEDED"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#3C4F8C"
+                    },
+                    data: [],
+                },
+
+            ],
+            series: [
+                {
+                    name: '',
+                    barWidth: '40%',
+                    type: 'bar',
+                    data: [],
+                    itemStyle: {
+                        normal: {
+                            color: function (params) {
+                                // build a color map as your need.
+                                var colorList = [
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#FCCE2B'
+                                        }, {
+                                            offset: 1,
+                                            color: '#FEE956'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#F43A59'
+                                        }, {
+                                            offset: 1,
+                                            color: '#FA6C92'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#4F5B60'
+                                        }, {
+                                            offset: 1,
+                                            color: '#879499'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#31DAC3'
+                                        }, {
+                                            offset: 1,
+                                            color: '#5FEFE3'
+                                        }],
+                                        globalCoord: false,
+                                    },
+                                    {
+                                        type: 'bar',
+                                        colorStops: [{
+                                            offset: 0,
+                                            color: '#999999'
+                                        }, {
+                                            offset: 1,
+                                            color: '#C9C9C9'
+                                        }],
+                                        globalCoord: false,
+                                    }
+                                ];
+                                return colorList[params.dataIndex]
+                            },
+                        }
+                    }
+                },
+                {
+                    name: 'Type4',
+                    type: 'bar',
+                    stack: '',
+                    data: '',
+
+                },
+                {
+                    name: 'Type1',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Type2',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Type3',
+                    type: 'bar',
+                    stack: '',
+                    data: ''
+                },
+                {
+                    name: 'Other',
+                    type: 'bar',
+                    stack: '',
+                    data: '',
+
+                }
+            ]
+        }
+    };
+    name_s = [];
+    value_s = [];
+
+    getCustomersColumn(item) {
+        this.name_s = [];
+        this.value_s = [];
+        this.managemencs.getCustomersColumn(item).subscribe((data) => {
+            data.list.forEach((item) => {
+                this.name_s.push(item.name);
+                this.value_s.push(item.value);
+            })
+            this.serviceData = {
+                yAxis: [{
+                    data: this.name_s
+                }],
+                series: [{
+                    data: this.value_s
+                }]
+            }
+            console.log(this.serviceData)
+        })
+    }
+
+    createNewCustomer(notificationModel) {
+        let createParams = {
+            customerId: this.addNewCustomer,
+            'global-customer-id': this.addNewCustomer,
+            'subscriber-name': this.addNewCustomer,
+            'subscriber-type': 'INFRA'
+        };
+        this.notificationAttributes = {
+            "title": "Customer",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "Create",
+            "status": "InProgress",
+            "name": this.addNewCustomer
+        };
+        this.notificationModelShow(notificationModel);
+        this.managemencs.createCustomer(this.addNewCustomer, createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                this.notificationFailed(notificationModel);
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+    // Customer delete model
+    thisdeleteCustomer = {
+        name: null,
+        id: null
+    };
+    deleteCustomerModel(itemCustomer) {
+        this.thisdeleteCustomer = itemCustomer;
+        this.deleteCustomerModelVisible = true;
+    }
+    deleteCustomerCancel() {
+        this.deleteCustomerModelVisible = false;
+    }
+    deleteCustomerOk(notificationModel) {
+        this.deleteCustomerModelVisible = false;
+        this.getCustomerVersion(this.thisdeleteCustomer, notificationModel);
+        this.notificationAttributes = {
+            "title": "Customer",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "delete",
+            "status": "InProgress",
+            "name": this.thisdeleteCustomer.name
+        };
+        this.notificationModelShow(notificationModel);
+    }
+    getCustomerVersion(thisdeleteCustomer, notificationModel) {
+        this.managemencs.getdeleteCustomerVersion(thisdeleteCustomer).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                let params = {
+                    customerId: thisdeleteCustomer.id,
+                    version: data["result"]["resource-version"]
+                };
+                this.deleteCustomer(params, notificationModel);
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+    deleteCustomer(params, notificationModel) {
+        this.managemencs.deleteSelectCustomer(params).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                this.notificationFailed(notificationModel);
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+    createNewServiceType(notificationModel) {
+        let createParams = {
+            customer: this.selectCustomer,
+            ServiceType: this.addNewServiceType,
+            "service-type": this.addNewServiceType,
+            "temp-ub-sub-account-id": "sotnaccount"
+        };
+        this.notificationAttributes = {
+            "title": "ServiceType",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "Create",
+            "status": "InProgress",
+            "name": this.addNewServiceType
+        };
+        this.notificationModelShow(notificationModel);
+        this.managemencs.createServiceType(createParams).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
+                this.getCustomersColumn(this.selectCustomer);
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                this.notificationFailed(notificationModel);
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+    // ServiceType delete model
+    thisdeleteServiceType = {
+        type: null
+    };
+    deleteServiceTypeModel(itemServiceType) {
+        this.thisdeleteServiceType = itemServiceType;
+        this.deleteServiceTypeModelVisible = true;
+    }
+    deleteServiceTypeCancel() {
+        this.deleteServiceTypeModelVisible = false;
+    }
+    deleteServiceTypeOk(notificationModel) {
+        this.deleteServiceTypeModelVisible = false;
+        this.getServiceTypeVersion(notificationModel);
+    }
+    getServiceTypeVersion(notificationModel) {
+        let paramss = {
+            customerId: this.selectCustomer,
+            ServiceType: this.thisdeleteServiceType["type"]
+        };
+        this.notificationAttributes = {
+            "title": "ServiceType",
+            "imgPath": "../../../../assets/images/execute-inproess.png",
+            "action": "delete",
+            "status": "InProgress",
+            "name": this.thisdeleteServiceType["type"]
+        };
+        this.notificationModelShow(notificationModel);
+        this.managemencs.getdeleteServiceTypeVersion(paramss).subscribe((data) => {
+            console.log(data)
+            if (data["status"] == 'SUCCESS') {
+                let params = {
+                    customerId: this.selectCustomer,
+                    ServiceType: this.thisdeleteServiceType["type"],
+                    version: data["result"]["resource-version"]
+                };
+                this.deleteServiceType(params, notificationModel);
+                console.log(data, "Interface returned success")
+            } else {
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+    deleteServiceType(params, notificationModel) {
+        this.managemencs.deleteSelectServiceType(params).subscribe((data) => {
+            if (data["status"] == 'SUCCESS') {
+                this.notificationSuccess(notificationModel);
+                this.getServiceTypes(params.customerId);
+                this.getCustomersColumn(params.customerId);
+                this.getAllCustomers();
+                console.log(data, "Interface returned success")
+            } else {
+                this.notificationFailed(notificationModel);
+                console.log(data, "Interface returned error")
+            }
+        })
+    }
+
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.css b/usecaseui-portal/src/app/shared/components/details/details.component.css
new file mode 100644
index 00000000..ec6bd37f
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.css
@@ -0,0 +1,104 @@
+/*
+    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.
+*/
+.content .header {
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 30px 28px 0;
+  position: relative;
+  margin-bottom: 30px;
+  border: 1px solid #e4e4e4;
+}
+.content .header hr {
+  margin: 0;
+  border: none;
+  height: 1px;
+  background-color: #e4e4e4;
+}
+.content .header h2 {
+  font: 700 24px/18px 'Times New Roman';
+  color: #3fa8eb;
+  text-align: center;
+  margin-bottom: 27px;
+}
+.content .header span.tildeimg {
+  position: absolute;
+  left: 50%;
+  top: 71px;
+  width: 60px;
+  height: 10px;
+  transform: translate(-30px, 0);
+  background: url(../../../../assets/images/tildeimg.png) no-repeat center center;
+  background-color: #fff;
+}
+.content .header .headerlist {
+  display: flex;
+}
+.content .header .headerlist div {
+  width: 100%;
+}
+.content .header .headerlist div p {
+  font: 400 14px 'Arial';
+  color: #323437;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 18px 0 15px;
+}
+.content .header .headerlist div p span {
+  display: inline-block;
+  width: 50%;
+  text-align: right;
+  font: 700 14px 'Arial';
+  color: #3fa8eb;
+}
+.content hr {
+  margin: 0;
+  border: none;
+  height: 1px;
+  background-color: #e4e4e4;
+}
+.content button {
+  width: 88px;
+  height: 22px;
+  position: absolute;
+  left: 50%;
+  transform: translate(-44px, 0);
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #fff;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -22px;
+}
+.content button:hover {
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -66px;
+}
+.content .buttonActive {
+  transform: translate(-44px, -22px);
+  background: url(../../../../assets/images/open-close2.png) no-repeat center 0px;
+}
+.content .buttonActive:hover {
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -44px;
+}
+.content h2.detailtitle {
+  font: 700 24px/18px 'Times New Roman';
+  color: #3fa8eb;
+  text-align: center;
+  margin-bottom: 15px;
+  padding-top: 25px;
+}
+.content .detailInformatioin {
+  overflow: hidden;
+}
diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.html b/usecaseui-portal/src/app/shared/components/details/details.component.html
new file mode 100644
index 00000000..62770b60
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.html
@@ -0,0 +1,68 @@
+<!--
+    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.
+-->
+<div class="content">
+    <div class="header">
+        <h2>HEADER INFORMATION</h2>
+        <hr> <span class="tildeimg"></span>
+        <div class="headerlist">
+            <div class="leftlist">
+                <p> <span>Version :</span>{{datailheaderdata.version}}</p>
+                <p> <span>Domain :</span>{{datailheaderdata.domain}}</p>
+                <p> <span>Event Name :</span>{{datailheaderdata.eventName}}</p>
+                <p> <span>Event Id :</span>{{datailheaderdata.eventId}}</p>
+                <p> <span>EventType :</span>{{datailheaderdata.eventType}}</p>
+                <p> <span>NfcNamingCode :</span>{{datailheaderdata.nfcNamingCode}}</p>
+                <p> <span>NfNamingCode :</span>{{datailheaderdata.nfNamingCode}}</p>
+                <p> <span>SourceName :</span>{{datailheaderdata.sourceName}}</p>
+                <p> <span>SourceId :</span>{{datailheaderdata.sourceId}}</p>
+                <p> <span>ReportingEntityName :</span>{{datailheaderdata.reportingEntityName}}</p>
+                <p> <span>ReportingEntityId :</span>{{datailheaderdata.reportingEntityId}}</p>
+            </div>
+            <div class="rightlist">
+                <p> <span>Priority :</span>{{datailheaderdata.priority}}</p>
+                <p> <span>ReportTime :</span>{{datailheaderdata.reportTime}}</p>
+                <p> <span>ClearTime :</span>{{datailheaderdata.clearTime}}</p>
+                <p> <span>FaultFieldsVersion :</span>{{datailheaderdata.faultFieldsVersion}}</p>
+                <p> <span>Event Servrity :</span>{{datailheaderdata.eventServrity}}</p>
+                <p> <span>EventSourceType :</span>{{datailheaderdata.eventSourceType}}</p>
+                <p> <span>EventCategory :</span>{{datailheaderdata.eventCategory}}</p>
+                <p> <span>AlarmCondition :</span>{{datailheaderdata.alarmCondition}}</p>
+                <p> <span>SpecificProblem :</span>{{datailheaderdata.specificProblem}}</p>
+                <p> <span>Status :</span> {{datailheaderdata.status}}</p>
+                <p> <span>AlarmInterfaceA :</span>{{datailheaderdata.alarmInterfaceA}}</p>
+            </div>
+        </div>
+    </div>
+    <hr> 
+    <button [ngClass]="{'buttonActive':moredetailShow}" (click)="slideUpDown()"></button>
+    <h2 class="detailtitle">DETAIL INFORMATION</h2>
+    <div class="detailInformatioin" [@slideUpDown]='state'>
+        <nz-table #detailTable [nzData]="dataillistdata" [nzShowPagination]="false" nzSize="small" [nzBordered]="true">
+            <thead>
+                <tr>
+                    <th nzWidth="18%">Item Name</th>
+                    <th >Item Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of dataillistdata">
+                    <td>{{data.name}}</td>
+                    <td>{{data.value}}</td>
+                </tr>
+            </tbody>
+        </nz-table>
+    </div>
+</div>
diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.less b/usecaseui-portal/src/app/shared/components/details/details.component.less
new file mode 100644
index 00000000..c27bfd01
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.less
@@ -0,0 +1,108 @@
+
+/*
+    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.
+*/
+.content {
+    .header {
+        background-color: #fff;
+        border-radius: 5px;
+        padding: 30px 28px 0;
+        position: relative;
+        margin-bottom: 30px;
+        border: 1px solid #e4e4e4;
+        hr {
+            margin: 0;
+            border: none;
+            height: 1px;
+            background-color: #e4e4e4;
+        }
+        h2 {
+            font: 700 24px/18px 'Times New Roman';
+            color: #3fa8eb;
+            text-align: center;
+            margin-bottom: 27px;
+        }
+        span.tildeimg {
+            position: absolute;
+            left: 50%;
+            top: 71px;
+            width: 60px;
+            height: 10px;
+            transform: translate(-30px,0);
+            background: url(../../../../assets/images/tildeimg.png) no-repeat center center;
+            background-color: #fff;
+        }
+        .headerlist {
+            display: flex;
+            div {
+                width: 100%;
+                p {
+                    font: 400 14px 'Arial';
+                    color: #323437;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin: 18px 0 15px;
+                    span {
+                        display: inline-block;
+                        width: 50%;
+                        text-align: right;
+                        font: 700 14px 'Arial';
+                        color: #3fa8eb;
+                    }
+                }
+            }
+        }
+    }
+    hr {
+        margin: 0;
+        border: none;
+        height: 1px;
+        background-color: #e4e4e4;
+    }
+    button {
+        width: 88px;
+        height: 22px;
+        position: absolute;
+        left: 50%;
+        transform: translate(-44px,0);
+        border: none;
+        outline: none;
+        cursor: pointer;
+        background-color: #fff;
+        background: url(../../../../assets/images/open-close2.png) no-repeat center -22px;
+        &:hover {
+            background: url(../../../../assets/images/open-close2.png) no-repeat center -66px;
+        }
+    }
+    .buttonActive {
+        transform: translate(-44px,-22px);
+        background: url(../../../../assets/images/open-close2.png) no-repeat center -0px;
+        &:hover {
+            background: url(../../../../assets/images/open-close2.png) no-repeat center -44px;
+        }
+    }
+    h2.detailtitle {
+        font: 700 24px/18px 'Times New Roman';
+        color: #3fa8eb;
+        text-align: center;
+        margin-bottom: 15px;
+        padding-top: 25px; 
+    }
+    .detailInformatioin {
+        // transition: all 0.3s linear;
+        overflow: hidden;
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts b/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts
new file mode 100644
index 00000000..1d5cbeb8
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/details/details.component.ts b/usecaseui-portal/src/app/shared/components/details/details.component.ts
new file mode 100644
index 00000000..dea6caaa
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/details/details.component.ts
@@ -0,0 +1,59 @@
+/*
+    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.
+*/
+import { Component, OnInit, Input } from '@angular/core';
+import { slideUpDown } from '../../../animates';
+import { HomesService } from '../../../core/services/homes.service';
+
+@Component({
+  selector: 'app-details',
+  templateUrl: './details.component.html',
+  styleUrls: ['./details.component.less'],
+  animations: [ slideUpDown ]
+})
+export class DetailsComponent implements OnInit {
+
+  constructor(private myhttp:HomesService) { }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes){
+    this.getAlarmDetailData(this.detailId);
+  }
+
+  datailheaderdata: any = {
+
+  };
+  dataillistdata: any = [];
+  getAlarmDetailData(id){
+    if(id){
+      this.myhttp.getAlarmDetailData(id).subscribe((data)=>{
+        this.datailheaderdata = data.alarmsHeader;
+        this.dataillistdata = data.list;
+      })
+    }
+
+  }
+  // detail Show
+  moredetailShow = false;
+  @Input() detailId;
+  
+  state = 'up'
+  slideUpDown(){
+    this.moredetailShow = !this.moredetailShow;
+    this.state = this.state === 'up' ? 'down' : 'up';
+  }
+}
diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css
new file mode 100644
index 00000000..5dce6c92
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.css
@@ -0,0 +1,77 @@
+/*
+    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.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 10px;
+}
+.model {
+  background-color: #fff;
+  height: 90%;
+  overflow-y: auto;
+}
+.model .back {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+}
+.model .creation {
+  position: relative;
+  width: 60%;
+  height: 100%;
+  overflow-y: auto;
+  border-radius: 5px;
+  padding: 20px;
+}
+.model .creation .baseparms h3 {
+  color: #3fa8eb;
+  font: 700 16px "Arial";
+}
+.model .creation .baseparms h4 {
+  font: 700 16px "Arial";
+}
+.model .creation .baseparms ul li {
+  margin: 3px 0;
+}
+.model .creation .baseparms ul li span {
+  display: inline-block;
+  width: 40%;
+  font: 700 14px "Arial";
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: right;
+}
+.model .creation .baseparms ul li input {
+  width: 165px;
+}
+.model .creation .submit {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+}
+.model .chart {
+  width: 40%;
+  padding: 10px;
+  height: 100%;
+  border-left: 10px solid #f3f3f3;
+}
diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html
new file mode 100644
index 00000000..da673bf0
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.html
@@ -0,0 +1,139 @@
+<!--
+    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.
+-->
+<!--<h3 class="title"> Services List </h3>-->
+<div class="model creation-model">
+    <!-- Create data -->
+    <div class="top-title">
+        <h3 class="title fl">{{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}} </h3>
+        <div class="fl" style="width: 20%">
+            <button class="submit" nz-button (click)="submit()">
+                <span> {{"i18nTextDefine_Create" | translate}} </span>
+            </button>
+            <button class="back" nz-button (click)="goback()"></button>
+        </div>
+    </div>
+    <div class="e2ecreate-content">
+        <div class="creation fl">
+            <div *ngIf="createParams.commonParams.templateType=='E2E Service'" class="baseparms clearfix">
+                <div class="vnf-box">
+                    <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+                    <ul class="clearfix">
+                        <li>
+                            <span>Name:</span>
+                            <input nz-input [(ngModel)]="service.name">
+                        </li>
+                        <li>
+                            <span>Description:</span>
+                            <input nz-input [(ngModel)]="service.description">
+                        </li>
+                        <li>
+                            <span>COS:</span>
+                            <input nz-input [(ngModel)]="service.COS">
+                        </li>
+                        <li>
+                            <span>EBS:</span>
+                            <input nz-input [(ngModel)]="service.EBS">
+                        </li>
+                    </ul>
+                </div>
+                <div class="vnf-box" *ngIf="templateParameters.inputs.length>0">
+                    <h3>{{"i18nTextDefine_templateInputs" | translate}}</h3>
+                    <ul>
+                        <li *ngFor="let parameter of templateParameters.inputs; let i = index;">
+                            <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" title="{{parameter.name}}">{{parameter.name}}:</span>
+                            <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value">
+
+                            <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}
+                            </h5>
+                            <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span>
+                            <nz-select *ngIf="parameter.type === 'vf_location'" [(ngModel)]="parameter.value" nzAllowClear>
+                                <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+                            </nz-select>
+                        </li>
+                    </ul>
+                </div>
+                <div class="vnf-box" *ngFor="let template of templateParameters.nestedTemplates;">
+                    <h3>{{template.name}}</h3>
+                    <ul>
+                        <li *ngFor="let input of template.inputs; let i = index;">
+                            <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" title="{{input.name}}"> {{input.name}}: </span>
+                            <input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input [(ngModel)]="input.value">
+
+                            <h5 *ngIf="input.type === 'vf_location'" style="padding-left:10px;">id: {{input.name}}</h5>
+                            <span *ngIf="input.type === 'vf_location'"> vf_location: </span>
+                            <nz-select *ngIf="input.type === 'vf_location'" [(ngModel)]="input.value" nzAllowClear>
+                                <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+                            </nz-select>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div *ngIf="createParams.commonParams.templateType=='Network Service'" class="baseparms clearfix">
+                <div class="vnf-box">
+                    <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+                    <ul class="clearfix">
+                        <li>
+                            <span>Name:</span>
+                            <input nz-input [(ngModel)]="ns_service.nsName">
+                        </li>
+                        <li>
+                            <span>Description:</span>
+                            <input nz-input [(ngModel)]="ns_service.description">
+                        </li>
+                    </ul>
+                </div>
+                <div class="vnf-box" *ngIf="nsTemplateParameters.inputs2.length>0">
+                    <h4>{{"i18nTextDefine_templateInputs" | translate}}</h4>
+                    <ul>
+                        <li *ngFor="let parameter of nsTemplateParameters.inputs2; let i = index;">
+                            <span *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" title="{{parameter.name}}">{{parameter.name}}:</span>
+                            <input *ngIf="parameter.type !== 'vf_location' && parameter.type !== 'sdn_controller'" nz-input [(ngModel)]="parameter.value">
+
+                            <h5 *ngIf="parameter.type === 'vf_location'" style="padding-left:10px;">id: {{parameter.name}}
+                            </h5>
+                            <span *ngIf="parameter.type === 'vf_location'"> vf_location: </span>
+                            <nz-select *ngIf="parameter.type === 'vf_location'" [(ngModel)]="parameter.value" nzAllowClear>
+                                <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+                            </nz-select>
+                        </li>
+                    </ul>
+                </div>
+                <div class="vnf-box">
+                    <h4 *ngIf="nsTemplateParameters.vnfs.length>0">vnfs Inputs</h4>
+                    <ul>
+                        <li *ngFor="let vnf of nsTemplateParameters.vnfs;">
+                            <h5 style="padding-left:10px;">id: {{vnf.vnf_id}}</h5>
+                            <span> vf_location: </span>
+                            <nz-select [(ngModel)]="vnf.value" nzAllowClear>
+                                <nz-option *ngFor="let vim of vimInfos" [nzValue]="vim" [nzLabel]="vim.name"></nz-option>
+                            </nz-select>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="dividing-line fl"></div>
+        <!-- chart -->
+        <div class="chart fr">
+            <div id="createChart">
+                <svg width="100%" height="100%">
+                </svg>
+            </div>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less
new file mode 100644
index 00000000..edbd2db0
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.less
@@ -0,0 +1,159 @@
+/*
+    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.
+*/
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px;
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 10px;
+}
+.model {
+    background-color: #F7F8FC;
+    height: 100%;
+    overflow-y: auto;
+    position: relative;
+    .top-title{ 
+        width: 100%;
+        padding: 20px;
+        position: relative;
+        display: inline-block;
+    }
+    .submit{
+        position: absolute;
+        width:84px;
+        height: 35px;
+        top: 10px;
+        right: 85px;
+        color: #fff;
+        font-size: 18px;
+        background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important;
+        border-radius:4px;
+        border: none!important;
+        border-color:rgba(0,0,0,0)!important;
+    }
+    .submit:hover{
+        background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+        border: none;
+    }
+    .back,.back:hover{
+        position: absolute;
+        top: 10px;
+        right: 20px;
+        display: inline-block;
+        width: 35px;
+        height: 35px;
+        background:url("../../../../assets/images/Return-icon.png") no-repeat!important;
+        background-size: 100%!important;
+        border-radius:4px;
+        color: #D7D7D7;
+        cursor: pointer;
+    }
+    .back:hover{
+        background: url("../../../../assets/images/Return-icon-active.png")!important;
+        background-size: 100%!important;
+    }
+    .top-title h3.title {
+        height: 35px;
+        width: 80%;
+        font-size:16px;
+        font-family:ArialMT;
+        color:#3C4F8C;
+        line-height:35px;
+        display: inline-block;
+    }
+    .e2ecreate-content{
+        position: relative;
+        width: 98%;
+        height: 100%;
+        margin-left: 30px;
+        box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5);
+        background: #fff;
+        border-radius:2px;
+    }
+    .creation{
+        position: relative;
+        width: 58%;
+        height: 100%;
+        overflow-y: auto;
+        padding: 20px;
+        background: #fff;
+        .baseparms {
+            h3,h4{
+                color: #06A7E2;
+                width: 96%;
+                height: 40px;
+                line-height: 35px;
+                font-size: 18px;
+                font-weight: 500;
+                margin: 10px auto;
+                border-bottom: 2px solid;
+                border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100;
+                border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100;
+                border-image: linear-gradient(#07A9E1,#30D9C4) 100 100;
+                border-radius:2px;
+            }
+            h4 {
+                font: 700 16px "Arial";
+                margin-left: 25px;
+            }
+            .vnf-box{
+                clear: both;
+            }
+            ul{
+                margin-left: 30px;
+            }
+            ul li {
+                margin: 10px 0;
+                width: 42%;
+                margin-right: 5%;
+                float: left;
+                text-align: left;
+                span {
+                    display: inline-block;
+                    width: 30%;
+                    font: 700 14px "Arial";
+                    vertical-align: middle;
+                    overflow: hidden;
+                    text-align: left;		   
+                }
+                input,nz-select{
+                    width: 65%;
+		     margin-left:3%
+                }
+            }
+        }
+    }
+    .dividing-line{
+        width: 0;
+        height: 85%;
+        margin: 4% 0;
+        border-left: 1px #cccccc dashed;
+    }
+    .chart {
+        width: 38%;
+        padding: 10px;
+        height: 95%;
+        margin-right: 40px;
+        #createChart{
+            height: 100%;
+            width: 100%;
+        }
+    }
+}
diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts
new file mode 100644
index 00000000..de00c43f
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { E2eCreationComponent } from './e2e-creation.component';
+
+describe('E2eCreationComponent', () => {
+  let component: E2eCreationComponent;
+  let fixture: ComponentFixture<E2eCreationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ E2eCreationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(E2eCreationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts
new file mode 100644
index 00000000..068fb039
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-creation/e2e-creation.component.ts
@@ -0,0 +1,357 @@
+/*
+    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.
+*/
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../../../core/services/myhttp.service';
+import * as d3 from 'd3';
+
+@Component({
+  selector: 'app-e2e-creation',
+  templateUrl: './e2e-creation.component.html',
+  styleUrls: ['./e2e-creation.component.less']
+})
+export class E2eCreationComponent implements OnInit {
+
+  constructor(private myhttp: MyhttpService) { }
+
+  ngOnInit() {
+    this.gete2eTemParameters(this.e2e_ns_temParametersContent);
+    this.getVimInfo();
+    this.getSdnControllers();
+    console.log(this.createParams);
+  }
+
+  @Output() e2eCloseCreate = new EventEmitter();
+  @Output() nsCloseCreate = new EventEmitter();
+  @Input() createParams;
+  @Input() e2e_ns_temParametersContent;
+
+
+  // e2e serviceTemplateParameters
+  templateParameters = {
+    invariantUUID: "",
+    uuid: "",
+    name: "",
+    type: "",
+    version: "",
+    description: "",
+    category: "",
+    subcategory: "",
+    customizationUuid: "",
+    inputs: [],
+    nestedTemplates: []
+  };
+  // ns serviceTemplateParameters
+  nsTemplateParameters = {
+    inputs: {},
+    inputs2: [],
+    vnfs: []
+  }
+  roote2e = {
+    "name": "e2e",
+    "type": "e2e",
+    "children": []
+  };
+
+  rootns = {
+    "name": "ns",
+    "type": "ns",
+    "children": []
+  };
+
+  imgmap = {
+    '1': '../../../../assets/images/create-e2e.png',
+    '2': '../../../../assets/images/create-ns.png',
+    '3': '../../../../assets/images/create-vnf.png',
+  };
+  gete2eTemParameters(data) { //Get template parameters
+    let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+    console.log(this.createParams);
+    console.log(data);
+    if (type == "e2e") {
+      this.templateParameters = data;
+      this.templateParameters.nestedTemplates.forEach((item) => {
+        item.inputs = item.inputs.filter((input) => { return input.type !== "sdn_controller" });
+      })
+      this.templateParameters.nestedTemplates.map((item, index) => {
+        let nsIndex = {
+          "name": "ns",
+          "type": "ns",
+          "children": []
+        };
+        nsIndex.children = item.nestedTemplates.map((item, index) => {
+          return {
+            "name": "vnf",
+            "type": "vnf",
+          }
+        });
+        this.roote2e.children.push(nsIndex);
+      });
+      console.log(this.templateParameters);
+      console.log(this.roote2e)
+    } else if (type == "ns") {
+      if (data["model"] != undefined && typeof data["model"] == 'string') {
+        this.nsTemplateParameters = JSON.parse(data["model"]);
+        console.log(data["model"]);
+      } else {
+        this.nsTemplateParameters = data;
+      }
+      console.log(this.nsTemplateParameters);
+      this.nsTemplateParameters["inputs2"] = [];
+      let inputs = this.nsTemplateParameters.inputs;
+      for (let key in inputs) {
+        this.nsTemplateParameters["inputs2"].push({ name: key, type: inputs[key].type, value: inputs[key].value })
+      }
+      this.rootns.children = this.nsTemplateParameters.vnfs.map((item, index) => {
+        return {
+          "name": "vnf",
+          "type": "vnf",
+        }
+      });
+      console.log(this.nsTemplateParameters);
+    }
+
+    this.drawImage(type)
+
+  }
+  vimInfos = [];
+  getVimInfo() {
+    this.myhttp.getVimInfo()
+      .subscribe((data) => {
+        this.vimInfos = data.map((item) => { return { name: item['cloud-owner'], id: item['cloud-region-id'] } });
+      })
+  };
+  sdnControllers = [];
+  getSdnControllers() {
+    this.myhttp.getSdnControllers()
+      .subscribe((data) => {
+        this.sdnControllers = data.map((item) => { return { name: item['thirdparty-sdnc-id'], id: item['thirdparty-sdnc-id'] } });
+      })
+  }
+
+  // e2e requstbody
+  service = {
+    name: "",
+    description: "",
+    COS: "",
+    EBS: "",
+    serviceInvariantUuid: "",
+    serviceUuid: "", // uuid ??
+    globalSubscriberId: "",   // "customer.id",
+    serviceType: "",    // "serviceType.value",
+    parameters: {
+      locationConstraints: [
+
+      ],
+      resources: [],
+      requestInputs: {},
+    }
+
+  }
+
+  // ns requstbody
+  ns_service = {
+    csarId: "",
+    nsName: "",
+    description: "",
+    context: {
+      globalCustomerId: "",
+      serviceType: ""
+    }
+  }
+  ns_service2 = {
+    locationConstraints: [
+
+    ],
+    additionalParamForNs: {
+    }
+  }
+  submit() {
+    let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns";
+    if (type == "e2e") {
+      this.service.serviceInvariantUuid = this.templateParameters.invariantUUID;
+      this.service.serviceUuid = this.templateParameters.uuid;
+      this.service.globalSubscriberId = this.createParams.commonParams.customer.id;
+      this.service.serviceType = this.createParams.commonParams.serviceType.name;
+
+      this.templateParameters.inputs.forEach((ipnut) => {
+        this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value;
+      })
+
+      this.templateParameters.nestedTemplates.forEach((item) => {
+        let nsService = {
+          resourceName: item.name,
+          resourceInvariantUuid: item.invariantUUID,
+          resourceUuid: item.uuid,
+          resourceCustomizationUuid: item.customizationUuid,
+          parameters: {
+            locationConstraints: [],
+            resources: [],
+            requestInputs: {}
+          }
+        }
+        item.inputs.forEach((input) => {
+          if (input.type == "vf_location") {
+            let location = {
+              vnfProfileId: input.name,
+              locationConstraints: {
+                cloudOwner: input.value.name,
+                cloudRegionId: input.value.id
+              }
+            }
+            nsService.parameters.locationConstraints.push(location);
+          } else {
+            nsService.parameters.requestInputs[input.name] = input.value == undefined ? input.defaultValue : input.value;
+          }
+        })
+        this.service.parameters.resources.push(nsService);
+      })
+      console.log(this.service)
+      this.service.parameters.requestInputs['orchestrator'] = this.createParams.orchestrator.name;
+      if (this.createParams.isSol005Interface) {
+        this.service.parameters.requestInputs['isSol005Interface'] = this.createParams.isSol005Interface;
+      }
+      this.e2eCloseCreate.emit({ service: this.service });
+
+    } else if (type == "ns") {
+      //create ns instance
+      this.ns_service.csarId = this.createParams.template.id;
+      this.ns_service.context.globalCustomerId = this.createParams.commonParams.customer.id;
+      this.ns_service.context.serviceType = this.createParams.commonParams.serviceType.name;
+
+      this.nsTemplateParameters.inputs2.forEach((input) => {
+        this.ns_service2.additionalParamForNs[input.name] = input.value == undefined ? input.defaultValue : input.value;
+      })
+      this.nsTemplateParameters.vnfs.forEach((vnf) => {
+        let vnfparams = {
+          vnfProfileId: vnf.properties.id,
+          locationConstraints: {
+            cloudOwner: vnf.value.name,
+            cloudRegionId: vnf.value.id
+          }
+        }
+        this.ns_service2.locationConstraints.push(vnfparams);
+      })
+      console.log(this.ns_service2);
+
+      let requstbody = {
+        step1: this.ns_service,
+        step2: this.ns_service2
+      }
+      this.nsCloseCreate.emit(requstbody);
+    }
+
+  }
+  goback() {
+    this.e2eCloseCreate.emit();
+  }
+
+
+
+  drawImage(type) {
+    if (type == "e2e") {
+      this.render(this.roote2e, this.imgmap)
+    } else if (type == "ns") {
+      this.render(this.rootns, this.imgmap)
+    }
+
+
+  }
+
+  render(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();
+    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);
+
+
+  }
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html
new file mode 100644
index 00000000..c0953a90
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html
@@ -0,0 +1,104 @@
+<!--
+    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.
+-->
+<!--<h3 class="title"> Services List </h3>-->
+<div class="model creation-model">
+
+  <div class="top-title">
+    <h3 class="title fl">{{serviceInstanceName}} Instance Detail</h3>
+    <div class="fl" style="width: 20%">
+      <button class="back" nz-button (click)="goback()"></button>
+    </div>
+  </div>
+  <div class="detaildata fl">
+    <div *ngIf="detailParams.serviceDomain == 'E2E Service'" class="baseparms clearfix">
+      <div class="vnf-box">
+        <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+        <ul class="clearfix">
+          <li>
+            <span style="width:15%">Name:</span>
+            <span class="input-content">{{service.name}}</span>
+          </li>
+          <li>
+            <span style="width:25%">Description:</span>
+            <span class="input-content">{{service.description}}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="vnf-box" *ngIf="getKeys(e2e_requestInputs).length>0">
+        <h3>{{"i18nTextDefine_templateInputs" | translate}}</h3>
+        <ul class="clearfix">
+          <li *ngFor="let key of getKeys(e2e_requestInputs);">
+            <span title="{{key}}">{{key}}:</span>
+            <span class="input-content">{{e2e_requestInputs[key]}}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="vnf-box" *ngFor="let template of e2e_nestedTemplates;">
+        <h3>{{template.name}}</h3>
+        <ul class="clearfix">
+          <li *ngFor="let input of template.vnfs; let i = index;">
+            <span style="width: 26%"> vf_location: </span>
+            <span class="input-content">{{input["vf_location"]}}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div *ngIf="detailParams.serviceDomain=='Network Service'" class="baseparms clearfix">
+      <div class="vnf-box">
+        <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+        <ul class="clearfix">
+          <li>
+            <span style="width:15%">Name:</span>
+            <span class="input-content">{{ns_service.name}}</span>
+          </li>
+          <li>
+            <span style="width:25%">Description:</span>
+            <span class="input-content">{{ns_service.description}}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="vnf-box" *ngIf="getKeys(ns_requestInputs).length>0">
+        <h4>{{"i18nTextDefine_templateInputs" | translate}}</h4>
+        <ul>
+          <li *ngFor="let key of getKeys(ns_requestInputs);">
+            <span title="{{key}}">{{key}}:</span>
+            <span class="input-content">{{ns_requestInputs[key]}}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="vnf-box" *ngIf="ns_nestedTemplates.length>0">
+        <h4>vnfs Inputs</h4>
+        <ul>
+          <li *ngFor="let vnf of ns_nestedTemplates;">
+            <h5>id: {{vnf.vnfInstanceId}}</h5>
+            <span style="width: 26%"> vf_location: </span>
+            <span class="input-content">{{vnf["vnfInstanceName"]}}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <!-- chart -->
+  <div class="chart fr">
+    <div id="createChart">
+      <svg width="100%" height="100%">
+      </svg>
+    </div>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less
new file mode 100644
index 00000000..e560cd9b
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less
@@ -0,0 +1,139 @@
+/*
+    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.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 10px;
+}
+.creation-model{
+  position: relative;
+}
+.model {
+  background-color: #F7F8FC;
+  height: 100%;
+  overflow-y: auto;
+  position: relative;
+  .top-title{ 
+    width: 100%;
+    padding: 20px;
+    position: relative;
+    display: inline-block;
+  }
+  .back,.back:hover{
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    display: inline-block;
+    width: 35px;
+    height: 35px;
+    background:url("../../../../assets/images/Return-icon.png") no-repeat!important;
+    background-size: 100%!important;
+    border-radius:4px;
+    color: #D7D7D7;
+    cursor: pointer;
+  }
+  .back:hover{
+    background: url("../../../../assets/images/Return-icon-active.png")!important;
+    background-size: 100%!important;
+  }
+  .top-title h3.title {
+    height: 35px;
+    width: 80%;
+    font-size:16px;
+    font-family:ArialMT;
+    color:#3C4F8C;
+    line-height:35px;
+    display: inline-block;
+  }
+  .detaildata{
+    position: relative;
+    width: 58%;
+    height: 100%;
+    overflow-y: auto;
+    border-radius: 5px;
+    padding: 20px;
+    background: #fff;
+    margin-left: 30px;
+    box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5);
+    .baseparms {
+      h3,h4{
+        color: #06A7E2;
+        width: 96%;
+        height: 40px;
+        line-height: 35px;
+        font-size: 18px;
+        font-weight: 500;
+        margin: 10px auto;
+        border-bottom: 2px solid;
+        border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100;
+        border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100;
+        border-image: linear-gradient(#07A9E1,#30D9C4) 100 100;
+        border-radius:2px;
+      }
+      h4 {
+        font: 700 16px "Arial";
+        margin-left: 25px;
+      }
+      .vnf-box{
+        clear: both;
+      }
+      ul{
+        margin-left: 30px;
+      }
+      ul li {
+        margin: 10px 0;
+        width: 49%;
+        float: left;
+        text-align: left;
+        color:rgba(60,79,140,1);
+        font-size: 14px;
+        span {
+          display: inline-block;
+          width: 50%;
+          font: 700 14px "Arial";
+          vertical-align: middle;
+          overflow: hidden;
+          text-align: left;
+          color:rgba(60,79,140,0.5);
+        }
+        span.input-content{
+          width: 42%;
+          color: #3C4F8C;
+          margin-left: 5%;
+        }
+      }
+    }
+  }
+  .chart {
+    width: 35%;
+    padding: 10px;
+    height: 95%;
+    box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5);
+    margin-right: 40px;
+    background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%);
+    border-radius: 4px;
+    #createChart{
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts
new file mode 100644
index 00000000..ad24a477
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { E2eDetailComponent } from './e2e-detail.component';
+
+describe('E2eDetailComponent', () => {
+  let component: E2eDetailComponent;
+  let fixture: ComponentFixture<E2eDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ E2eDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(E2eDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts
new file mode 100644
index 00000000..7618c98c
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.ts
@@ -0,0 +1,246 @@
+/*
+    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.
+*/
+
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MyhttpService } from '../../../core/services/myhttp.service';
+import * as d3 from 'd3';
+
+@Component({
+  selector: 'app-e2e-detail',
+  templateUrl: './e2e-detail.component.html',
+  styleUrls: ['./e2e-detail.component.less']
+})
+export class E2eDetailComponent implements OnInit {
+
+  constructor(private myhttp: MyhttpService) {
+  }
+
+  ngOnInit() {
+    // this.getDetails();
+    this.dataInit();
+  }
+
+  @Input() detailParams;
+
+  @Output() closeDetail = new EventEmitter();
+  serviceInstanceName: any;
+  serviceType: any;
+  input_parameters: any;
+  nsinput_parameters: any;
+
+  // e2e
+  service = {
+    name: "",
+    description: "",
+  };
+  e2e_nestedTemplates = [];
+  e2e_requestInputs: any;
+
+  ns_service = {
+    name: "",
+    description: ""
+  }
+  ns_nestedTemplates = [];
+  ns_requestInputs = {};
+  roote2e = {
+    "name": "e2e",
+    "type": "e2e",
+    "children": []
+  };
+
+  rootns = {
+    "name": "ns",
+    "type": "ns",
+    "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);
+  }
+
+  dataInit() {
+    console.log(this.detailParams);
+    this.serviceInstanceName = this.detailParams['service-instance-name'] || this.detailParams["nsName"];
+    if (this.detailParams.serviceDomain == 'E2E Service') {
+      this.input_parameters = JSON.stringify(this.detailParams['input-parameters']);
+      this.input_parameters = JSON.parse(this.input_parameters);
+      console.log(this.input_parameters);
+      this.service = {
+        name: this.input_parameters.service.name,
+        description: this.input_parameters.service.description,
+      };
+      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.input_parameters.service.parameters.resources != undefined && this.input_parameters.service.parameters.resources.length > 0) {
+        this.input_parameters.service.parameters.resources.map((item, i) => {
+          let nestedTemplates = {
+            name: null,
+            vnfs: []
+          };
+          nestedTemplates.name = item.resourceName;
+          item.parameters.locationConstraints.map((its, k) => {
+            nestedTemplates.vnfs.push({
+              "vf_location": its.locationConstraints.cloudOwner
+            })
+          });
+          this.e2e_nestedTemplates.push(nestedTemplates);
+
+          let nsIndex = {
+            "name": "ns",
+            "type": "ns",
+            "children": []
+          };
+          nsIndex.children = item.parameters.locationConstraints.map((itemits, index) => {
+            return {
+              "name": "vnf",
+              "type": "vnf",
+            }
+          });
+          this.roote2e.children.push(nsIndex);
+        });
+        console.log(this.e2e_nestedTemplates);
+        console.log(this.e2e_requestInputs);
+        console.log(this.roote2e)
+      }
+    } else if (this.detailParams.serviceDomain == 'Network Service') {
+      this.ns_service = {
+        name: this.detailParams.name || this.detailParams['service-instance-name'],
+        description: this.detailParams.description || null
+      };
+      if (this.detailParams.requestInputs != undefined && Object.keys(this.detailParams.requestInputs).length > 0) {
+        this.ns_requestInputs = this.detailParams.requestInputs;
+      }
+      this.ns_nestedTemplates = this.detailParams.childServiceInstances;
+      this.rootns.children = this.ns_nestedTemplates.map((item, index) => {
+        return {
+          "name": "vnf",
+          "type": "vnf"
+        }
+      });
+      console.log(this.ns_nestedTemplates);
+      console.log(this.ns_requestInputs);
+      console.log(this.rootns)
+    }
+    this.drawImage(this.detailParams.serviceDomain)
+  }
+
+  goback() {
+    this.closeDetail.emit();
+  }
+
+  drawImage(type) {
+    if (type == "E2E Service") {
+      this.render(this.roote2e, this.imgmap)
+    } else if (type == "Network Service") {
+      this.render(this.rootns, this.imgmap)
+    }
+
+
+  }
+
+  render(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();
+    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);
+
+
+  }
+
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css
new file mode 100644
index 00000000..9830c9e8
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.css
@@ -0,0 +1,91 @@
+/*
+    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.
+*/
+.content .title {
+  border-radius: 5px 5px 0 0;
+  background-color: #fff;
+  height: 106px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 0;
+}
+.content .title ul {
+  display: flex;
+  display: -webkit-flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+.content .title ul li {
+  list-style: none;
+  padding-left: 32px;
+  width: 100%;
+  border-left: 1px solid #eceff4;
+}
+.content .title ul li h5 {
+  font: 500 14px "Arial";
+  color: #3d4d65;
+}
+.content .title ul li p {
+  font: 500 24px "Arial";
+  color: #3fa8eb;
+  margin-bottom: 0;
+}
+.content .title ul li:nth-child(1) {
+  border: none;
+}
+.content .chart {
+  position: relative;
+  border-radius: 5px;
+  margin-bottom: 20px;
+  height: 70px;
+}
+.content .chart .select {
+  padding: 20px  20px 20px 0px;
+  width: 70%;
+  float: left;
+}
+.content .chart .select span {
+  display: inline-block;
+  font: 700 14px "Arial";
+  color: #4c5e70;
+}
+.content .chart .select .search {
+  margin-left: 20px;
+  height: 30px;
+  padding: 0 10px;
+}
+.content .chart .select .search span {
+  color: #fff;
+  font-weight: 400;
+}
+.content .tablelist {
+  background-color: #fff;
+  padding: 24px 10px 0px;
+  border-radius: 0 0 5px 5px;
+}
+.content .tablelist .action {
+  padding: 10px 0 0 20px;
+}
+.content .tablelist .action .details {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: url(../../../../assets/images/icon.png) center -113px;
+}
+.content .tablelist .action .details:hover {
+  background: url(../../../../assets/images/icon.png) no-repeat center -128px;
+}
diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html
new file mode 100644
index 00000000..317d48b0
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.html
@@ -0,0 +1,55 @@
+<!--
+    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.
+-->
+<div class="content">
+    <!-- <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
+          <app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line>
+      </nz-modal> -->
+    <div class="chart">
+        <div class="select">
+            <span>Report Time: </span>
+            <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
+
+            <button class="search" nz-button [nzType]="'primary'" (click) = "getPerformanceFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
+        </div>
+    </div>
+    <div class="tablelist">
+        <nz-table #nzTable [nzData]="list" [nzPageSize]="10" nzShowSizeChanger [nzPageSizeOptions]="[5,10,15,20]"
+            nzSize="middle">
+            <thead (nzSortChange)="sort($event)" nzSingleSort>
+                <tr>
+                    <th nzWidth="5%">NO</th>
+                    <th nzWidth="20%">Source Name</th>
+                    <th nzWidth="20%">Event Name</th>
+                    <th nzWidth="20%">ReportingEntityName</th>
+                    <th nzWidth="15%">Report Time</th>
+                    <th nzWidth="5%">Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+                <tr *ngFor="let item of nzTable.data; let i = index; ">
+                    <td>{{i+1}}</td>
+                    <td>{{item.sourceName}}</td>
+                    <td>{{item.eventName}}</td>
+                    <td>{{item.reportingEntityName}}</td>
+                    <td>{{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}}</td>
+                    <td><a class="action" (click)="detailShow(item)"><i class="details"></i></a></td>
+                </tr>
+                <!-- </ng-template> -->
+            </tbody>
+        </nz-table>
+    </div>
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less
new file mode 100644
index 00000000..e302c7fd
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.less
@@ -0,0 +1,137 @@
+/*
+    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.
+*/
+.content {
+    .title {
+        border-radius: 5px 5px 0 0;
+        background-color: #fff;
+        height: 106px;
+        border-bottom: 1px solid #f0f0f0;
+        margin-bottom: 0;
+        ul {
+            display: flex;
+            display: -webkit-flex; 
+            justify-content: space-around;
+            align-items: center;
+            padding: 0;
+            margin: 0;
+            height: 100%;
+            li {
+                list-style: none;
+                padding-left: 32px;
+                width: 100%;
+                border-left: 1px solid #eceff4;
+                h5 {
+                    font: 500 14px "Arial";
+                    color: #3d4d65;
+                }
+                p {
+                    font: 500 24px "Arial";
+                    color: #3fa8eb;
+                    margin-bottom: 0;
+                }
+            }
+            li:nth-child(1){
+                border: none;
+            }
+        }
+    }
+    .chart {
+        // background-color: #fff;
+        position: relative;
+        border-radius: 5px;
+        margin-bottom: 20px;
+        height: 70px;
+        .select {
+            padding: 20px  20px 20px 0px;
+            width: 70%;
+            float: left;
+            span {
+                display: inline-block;
+                font: 700 14px "Arial";
+                color: #4c5e70;
+            }
+            .search {
+                margin-left: 20px;       
+                height: 30px;
+                padding: 0 10px;
+                span {
+                    color: #fff;
+                    font-weight: 400;
+                }
+            }
+            // nz-dropdown {
+            //     margin-right: 20px;
+            //     a {
+            //         font: 700 12px "Arial";
+            //         color: #3d4d65;
+            //         &:hover {
+            //             color: #3fa8eb;
+            //         }
+            //     }
+            // }
+        }
+        // .AlarmChart {
+        //     // height: 0px;
+        //     // border-bottom: 1px solid #f5f5f5;
+        //     // transition: all 0.3s linear;
+        //     width: 25%;
+        //     padding-top: 7px;
+        //     float: left;
+        // }
+        // .alarmChart-active {
+        //     height: 386px;
+        // }
+        // .open-close {
+        //     width: 50px;
+        //     height: 25px;
+        //     position: absolute;
+        //     left: 50%;
+        //     bottom: 0px;
+        //     transform: translate(-25px,0);
+        //     border: none;
+        //     outline: none;
+        //     cursor: pointer;
+        //     background-color: #fff;
+        //     background: url(../../../assets/images/open-close.png) no-repeat center -27px;
+        //     &:hover {
+        //         background: url(../../../assets/images/open-close.png) no-repeat center -79px;
+        //     }
+        // }
+        // .open-close-active {
+        //     background: url(../../../assets/images/open-close.png) center -1px;
+        //     &:hover {
+        //         background: url(../../../assets/images/open-close.png) no-repeat center -53px;
+        //     }
+        // }
+    }
+    .tablelist {
+        background-color: #fff;
+        padding: 24px 10px 0px;
+        border-radius: 0 0 5px 5px;
+        .action{
+            padding: 10px 0 0 20px;
+            .details{
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+                background: url(../../../../assets/images/icon.png) center -113px;
+                &:hover {
+                    background: url(../../../../assets/images/icon.png) no-repeat center -128px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts
new file mode 100644
index 00000000..013db38a
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GraphiclistComponent } from './graphiclist.component';
+
+describe('GraphiclistComponent', () => {
+  let component: GraphiclistComponent;
+  let fixture: ComponentFixture<GraphiclistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GraphiclistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GraphiclistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts
new file mode 100644
index 00000000..c05d3b7c
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/graphiclist/graphiclist.component.ts
@@ -0,0 +1,78 @@
+/*
+    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.
+*/
+import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import { HomesService } from '../../../core/services/homes.service';
+import * as addDays from 'date-fns/add_days';
+import { DatePipe } from "@angular/common"
+
+@Component({
+  selector: 'app-graphiclist',
+  templateUrl: './graphiclist.component.html',
+  styleUrls: ['./graphiclist.component.less'],
+  providers: [DatePipe]
+})
+export class GraphiclistComponent implements OnInit {
+  public startTime: string ='';
+  public endTime: string = '';
+  public currentPage: number = 1;
+  public pageSize: number = 10;
+  list: any;
+  constructor( private datePipe: DatePipe,
+    private myhttp: HomesService) { }
+  isVisibleMiddle = false;
+
+  showModalMiddle(): void {
+    this.isVisibleMiddle = true;
+  }
+  handleOkMiddle(): void {
+    // console.log('click ok');
+    this.isVisibleMiddle = false;
+  }
+  handleCancelMiddle(): void {
+    this.isVisibleMiddle = false;
+  }
+
+  ngOnInit() {
+  }
+  ngOnChanges(changes){
+    this.getPerformanceFormData();
+  }
+  getPerformanceFormData() {
+    this.myhttp.getPerformanceFormData(this.currentPage, this.pageSize, this.vnfname, this.startTime, this.endTime).subscribe((data) => {
+      this.list = data.performances;
+    })
+  }
+ // Date screening
+ dateRange =  [ addDays(new Date(), -30), new Date() ];
+
+ onChange(result: Date): void {
+  this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd HH:mm:ss');
+  this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd HH:mm:ss');
+}
+  sort(e){
+  }
+  @Input () vnfname;
+  @Output() detailData = new EventEmitter();
+  detailShow(id){
+    let prems = {
+      id:id,
+      detailShow: true
+    }
+    this.detailData.emit(prems);
+
+  }
+
+}
diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css
new file mode 100644
index 00000000..ec6bd37f
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.css
@@ -0,0 +1,104 @@
+/*
+    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.
+*/
+.content .header {
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 30px 28px 0;
+  position: relative;
+  margin-bottom: 30px;
+  border: 1px solid #e4e4e4;
+}
+.content .header hr {
+  margin: 0;
+  border: none;
+  height: 1px;
+  background-color: #e4e4e4;
+}
+.content .header h2 {
+  font: 700 24px/18px 'Times New Roman';
+  color: #3fa8eb;
+  text-align: center;
+  margin-bottom: 27px;
+}
+.content .header span.tildeimg {
+  position: absolute;
+  left: 50%;
+  top: 71px;
+  width: 60px;
+  height: 10px;
+  transform: translate(-30px, 0);
+  background: url(../../../../assets/images/tildeimg.png) no-repeat center center;
+  background-color: #fff;
+}
+.content .header .headerlist {
+  display: flex;
+}
+.content .header .headerlist div {
+  width: 100%;
+}
+.content .header .headerlist div p {
+  font: 400 14px 'Arial';
+  color: #323437;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 18px 0 15px;
+}
+.content .header .headerlist div p span {
+  display: inline-block;
+  width: 50%;
+  text-align: right;
+  font: 700 14px 'Arial';
+  color: #3fa8eb;
+}
+.content hr {
+  margin: 0;
+  border: none;
+  height: 1px;
+  background-color: #e4e4e4;
+}
+.content button {
+  width: 88px;
+  height: 22px;
+  position: absolute;
+  left: 50%;
+  transform: translate(-44px, 0);
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #fff;
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -22px;
+}
+.content button:hover {
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -66px;
+}
+.content .buttonActive {
+  transform: translate(-44px, -22px);
+  background: url(../../../../assets/images/open-close2.png) no-repeat center 0px;
+}
+.content .buttonActive:hover {
+  background: url(../../../../assets/images/open-close2.png) no-repeat center -44px;
+}
+.content h2.detailtitle {
+  font: 700 24px/18px 'Times New Roman';
+  color: #3fa8eb;
+  text-align: center;
+  margin-bottom: 15px;
+  padding-top: 25px;
+}
+.content .detailInformatioin {
+  overflow: hidden;
+}
diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html
new file mode 100644
index 00000000..a5d44a7f
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.html
@@ -0,0 +1,61 @@
+<!--
+    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.
+-->
+<div class="content">
+    <div class="header">
+        <h2>HEADER INFORMATION</h2>
+        <hr> <span class="tildeimg"></span>
+        <div class="headerlist">
+            <div class="leftlist">
+                <p> <span>Version :</span>{{datailheaderdata.version}}</p>
+                <p> <span>Domain :</span>{{datailheaderdata.domain}}</p>
+                <p> <span>EventType :</span>{{datailheaderdata.eventType}}</p>
+                <p> <span>Event Name :</span>{{datailheaderdata.eventName}}</p>
+                <p> <span>Event Id :</span>{{datailheaderdata.eventId}}</p>
+                <p> <span>NfcNamingCode :</span>{{datailheaderdata.nfcNamingCode}}</p>
+  
+                
+            </div>
+            <div class="rightlist">
+                  <p> <span>NfNamingCode :</span>{{datailheaderdata.nfNamingCode}}</p>
+                  <p> <span>SourceName :</span>{{datailheaderdata.sourceName}}</p>
+                  <p> <span>SourceId :</span>{{datailheaderdata.sourceId}}</p>
+                  <p> <span>ReportingEntityName :</span>{{datailheaderdata.reportingEntityName}}</p>
+                  <p> <span>ReportingEntityId :</span>{{datailheaderdata.reportingEntityId}}</p>
+                  <p> <span>ReportTime :</span>{{datailheaderdata.reportTime}}</p>
+            </div>
+        </div>
+    </div>
+    <hr> 
+    <button [ngClass]="{'buttonActive':moredetailShow}" (click)="slideUpDown()"></button>
+    <h2 class="detailtitle">DETAIL INFORMATION</h2>
+    <div class="detailInformatioin" [@slideUpDown]='state'>
+        <nz-table #detailTable [nzData]="dataillistdata" [nzShowPagination]="false" nzSize="small" [nzBordered]="true">
+            <thead>
+                <tr>
+                    <th nzWidth="18%">Item Name</th>
+                    <th >Item Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of dataillistdata">
+                    <td>{{data.name}}</td>
+                    <td>{{data.value}}</td>
+                </tr>
+            </tbody>
+        </nz-table>
+    </div>
+  </div>
+  
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less
new file mode 100644
index 00000000..dd94af84
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.less
@@ -0,0 +1,110 @@
+/*
+    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.
+*/
+.content {
+    .header {
+        background-color: #fff;
+        border-radius: 5px;
+        padding: 30px 28px 0;
+        position: relative;
+        margin-bottom: 30px;
+        border: 1px solid #e4e4e4;
+        hr {
+            margin: 0;
+            border: none;
+            height: 1px;
+            background-color: #e4e4e4;
+        }
+        h2 {
+            font: 700 24px/18px 'Times New Roman';
+            color: #3fa8eb;
+            text-align: center;
+            margin-bottom: 27px;
+        }
+        span.tildeimg {
+            position: absolute;
+            left: 50%;
+            top: 71px;
+            width: 60px;
+            height: 10px;
+            transform: translate(-30px,0);
+            background: url(../../../../assets/images/tildeimg.png) no-repeat center center;
+            background-color: #fff;
+        }
+        .headerlist {
+            display: flex;
+            div {
+                width: 100%;
+                p {
+                    font: 400 14px 'Arial';
+                    color: #323437;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin: 18px 0 15px;
+                    span {
+                        display: inline-block;
+                        width: 50%;
+                        text-align: right;
+                        font: 700 14px 'Arial';
+                        color: #3fa8eb;
+                    }
+                }
+            }
+        }
+    }
+    hr {
+        margin: 0;
+        border: none;
+        height: 1px;
+        background-color: #e4e4e4;
+    }
+    button {
+        width: 88px;
+        height: 22px;
+        position: absolute;
+        left: 50%;
+        transform: translate(-44px,0);
+        border: none;
+        outline: none;
+        cursor: pointer;
+        background-color: #fff;
+        background: url(../../../../assets/images/open-close2.png) no-repeat center -22px;
+        &:hover {
+            background: url(../../../../assets/images/open-close2.png) no-repeat center -66px;
+        }
+    }
+    .buttonActive {
+        transform: translate(-44px,-22px);
+        background: url(../../../../assets/images/open-close2.png) no-repeat center -0px;
+        &:hover {
+            background: url(../../../../assets/images/open-close2.png) no-repeat center -44px;
+        }
+    }
+    h2.detailtitle {
+        font: 700 24px/18px 'Times New Roman';
+        color: #3fa8eb;
+        text-align: center;
+        margin-bottom: 15px;
+        padding-top: 25px; 
+    }
+    .detailInformatioin {
+        // transition: all 0.3s linear;
+        overflow: hidden;
+    }
+    .detailshow {
+
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts
new file mode 100644
index 00000000..11f4abd2
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceDetailsComponent } from './performance-details.component';
+
+describe('PerformanceDetailsComponent', () => {
+  let component: PerformanceDetailsComponent;
+  let fixture: ComponentFixture<PerformanceDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PerformanceDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformanceDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts
new file mode 100644
index 00000000..9a601485
--- /dev/null
+++ b/usecaseui-portal/src/app/shared/components/performance-details/performance-details.component.ts
@@ -0,0 +1,57 @@
+/*
+    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.
+*/
+import { Component, OnInit, Input } from '@angular/core';
+import { slideUpDown } from '../../../animates';
+import { HomesService } from '../../../core/services/homes.service';
+
+@Component({
+  selector: 'app-performance-details',
+  templateUrl: './performance-details.component.html',
+  styleUrls: ['./performance-details.component.less'],
+  animations: [ slideUpDown ]
+})
+export class PerformanceDetailsComponent implements OnInit {
+
+ 
+  constructor(private myhttp:HomesService) { }
+
+  ngOnInit() {
+    
+  }
+
+  ngOnChanges(changes){
+    console.log(this.detailId)
+    this.getPerformanceHeaderDetail(this.detailId);
+  }
+  datailheaderdata: any = {};
+  dataillistdata: any = [];
+  getPerformanceHeaderDetail(id){
+    if(id){
+      this.myhttp.getPerformanceHeaderDetail(id).subscribe((data)=>{
+        console.log(data)
+        this.datailheaderdata = data.performanceHeader;
+        this.dataillistdata = data.list;
+      })
+    }
+  }
+  moredetailShow = false;
+  @Input() detailId;
+  state = 'up'
+  slideUpDown(){
+    this.moredetailShow = !this.moredetailShow;
+    this.state = this.state === 'up' ? 'down' : 'up';
+  }
+}