feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
author: cyuamber <xuranyjy@chinamobile.com> 2019-08-22 16:55:57 +0800
committer: cyuamber <xuranyjy@chinamobile.com> 2019-08-22 16:56:09 +0800
commit: d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
tree: b3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/components
parent: 56923755c761897cc86ca2457667fcc3e6a0e43f (diff)
40 files changed, 0 insertions, 3770 deletions
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html
deleted file mode 100644
index 7c1eee6b..00000000
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
-    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/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/components/charts/bar/bar.component.less
deleted file mode 100644
index e69de29b..00000000
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.less
+++ /dev/null
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts
deleted file mode 100644
index d979ffb6..00000000
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
deleted file mode 100644
index 609ce3ee..00000000
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
-    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/components/charts/line/line.component.html b/usecaseui-portal/src/app/components/charts/line/line.component.html
deleted file mode 100644
index e032eb27..00000000
--- a/usecaseui-portal/src/app/components/charts/line/line.component.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
-    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/components/charts/line/line.component.less b/usecaseui-portal/src/app/components/charts/line/line.component.less
deleted file mode 100644
index e69de29b..00000000
--- a/usecaseui-portal/src/app/components/charts/line/line.component.less
+++ /dev/null
diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts
deleted file mode 100644
index afe70654..00000000
--- a/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts
deleted file mode 100644
index 25881699..00000000
--- a/usecaseui-portal/src/app/components/charts/line/line.component.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
-    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/components/charts/pie/pie.component.html b/usecaseui-portal/src/app/components/charts/pie/pie.component.html
deleted file mode 100644
index d063f22a..00000000
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
-    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/components/charts/pie/pie.component.less b/usecaseui-portal/src/app/components/charts/pie/pie.component.less
deleted file mode 100644
index e69de29b..00000000
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.less
+++ /dev/null
diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts
deleted file mode 100644
index 528da25c..00000000
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
deleted file mode 100644
index dc5c80a0..00000000
--- a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
-    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/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html
deleted file mode 100644
index 04975e41..00000000
--- a/usecaseui-portal/src/app/components/customer/customer.component.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!--
-    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/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less
deleted file mode 100644
index 7d329230..00000000
--- a/usecaseui-portal/src/app/components/customer/customer.component.less
+++ /dev/null
@@ -1,254 +0,0 @@
-/*
-    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/components/customer/customer.component.spec.ts b/usecaseui-portal/src/app/components/customer/customer.component.spec.ts
deleted file mode 100644
index f185e7a7..00000000
--- a/usecaseui-portal/src/app/components/customer/customer.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts
deleted file mode 100644
index d4d843ff..00000000
--- a/usecaseui-portal/src/app/components/customer/customer.component.ts
+++ /dev/null
@@ -1,552 +0,0 @@
-/*
-    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 '../../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/components/details/details.component.css b/usecaseui-portal/src/app/components/details/details.component.css
deleted file mode 100644
index 0b5493d7..00000000
--- a/usecaseui-portal/src/app/components/details/details.component.css
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
-    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/components/details/details.component.html b/usecaseui-portal/src/app/components/details/details.component.html
deleted file mode 100644
index 62770b60..00000000
--- a/usecaseui-portal/src/app/components/details/details.component.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!--
-    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/components/details/details.component.less b/usecaseui-portal/src/app/components/details/details.component.less
deleted file mode 100644
index a27357ef..00000000
--- a/usecaseui-portal/src/app/components/details/details.component.less
+++ /dev/null
@@ -1,111 +0,0 @@
-
-/*
-    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/components/details/details.component.spec.ts b/usecaseui-portal/src/app/components/details/details.component.spec.ts
deleted file mode 100644
index 1d5cbeb8..00000000
--- a/usecaseui-portal/src/app/components/details/details.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/details/details.component.ts b/usecaseui-portal/src/app/components/details/details.component.ts
deleted file mode 100644
index 5eed3daf..00000000
--- a/usecaseui-portal/src/app/components/details/details.component.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
-    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 '../../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/components/e2e-creation/e2e-creation.component.css b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css
deleted file mode 100644
index 5dce6c92..00000000
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.css
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-    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/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
deleted file mode 100644
index 49cba838..00000000
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html
+++ /dev/null
@@ -1,138 +0,0 @@
-<!--
-    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="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/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
deleted file mode 100644
index 35b91799..00000000
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
-    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/components/e2e-creation/e2e-creation.component.spec.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts
deleted file mode 100644
index de00c43f..00000000
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
deleted file mode 100644
index 5446dc5f..00000000
--- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-/*
-    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 '../../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();
-  }
-
-  @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);
-      }else if(type == "ns"){
-        if(data["model"]!=undefined && typeof data["model"]=='string'){
-          this.nsTemplateParameters = JSON.parse(data["model"]);
-        }else{
-          this.nsTemplateParameters = data;
-        }
-        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)
-        }
-
-
-    }
-
-    // e2e or NS draw d3 topo
-    render(data, imgmap) {
-        let width = document.getElementById("createChart").clientWidth,
-            height = document.getElementById("createChart").clientHeight;
-        let cluster = d3.layout.tree()
-            .size([width, height]);
-        let diagonal = d3.svg.diagonal()
-            .projection(function (d) {
-                return [d.x-18, d.y+40];
-            });
-        let svg = d3.select("svg");
-
-        //marker
-        let 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');
-        let i = 0;
-        let nodes = cluster.nodes(data).reverse();
-        nodes.forEach(function (d) {
-            d.y = d.depth * 200+100;
-
-        });
-
-        let links = cluster.links(nodes);
-
-        let 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;
-            });
-
-        let 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/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html
deleted file mode 100644
index 0a753a30..00000000
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html
+++ /dev/null
@@ -1,105 +0,0 @@
-<!--
-    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="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">
-      <!--e2e detail data demonstration-->
-    <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>
-      <!--e2e detail data demonstration-->
-    <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>
-
-  <!--topo 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/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less
deleted file mode 100644
index 3f03af34..00000000
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less
+++ /dev/null
@@ -1,139 +0,0 @@
-/*
-    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/components/e2e-detail/e2e-detail.component.spec.ts b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.spec.ts
deleted file mode 100644
index ad24a477..00000000
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/e2e-detail/e2e-detail.component.ts b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts
deleted file mode 100644
index 5affeb97..00000000
--- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-/*
-    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 '../../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.dataInit();
-    }
-
-    @Input() detailParams;
-
-    @Output() closeDetail = new EventEmitter();
-    serviceInstanceName: any;
-    serviceType: any;
-    input_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);
-            }
-        }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);
-        }
-        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)
-    }
-
-
-  }
-
-  // draw d3 charts
-  render(data, imgmap) {
-    let width = document.getElementById("createChart").clientWidth,
-      height = document.getElementById("createChart").clientHeight;
-    let cluster = d3.layout.tree()
-      .size([width, height]);
-    let diagonal = d3.svg.diagonal()
-      .projection(function (d) {
-        return [d.x-18, d.y+40];
-      });
-    let svg = d3.select("svg");
-
-    //marker
-    let 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');
-    let i = 0;
-    let nodes = cluster.nodes(data).reverse();
-    nodes.forEach(function (d) {
-      d.y = d.depth * 200+100;
-
-    });
-
-    let links = cluster.links(nodes);
-
-    let 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;
-      });
-
-    let 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/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css
deleted file mode 100644
index 2f6519c4..00000000
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
-    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/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
deleted file mode 100644
index 317d48b0..00000000
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!--
-    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/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less
deleted file mode 100644
index 24e92fbd..00000000
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
-    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/components/graphiclist/graphiclist.component.spec.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts
deleted file mode 100644
index 013db38a..00000000
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
deleted file mode 100644
index ccffac08..00000000
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
-    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 '../../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/components/performance-details/performance-details.component.css b/usecaseui-portal/src/app/components/performance-details/performance-details.component.css
deleted file mode 100644
index 0b5493d7..00000000
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.css
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
-    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/components/performance-details/performance-details.component.html b/usecaseui-portal/src/app/components/performance-details/performance-details.component.html
deleted file mode 100644
index a5d44a7f..00000000
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-    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/components/performance-details/performance-details.component.less b/usecaseui-portal/src/app/components/performance-details/performance-details.component.less
deleted file mode 100644
index c1ca74f5..00000000
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.less
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
-    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/components/performance-details/performance-details.component.spec.ts b/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts
deleted file mode 100644
index 11f4abd2..00000000
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
deleted file mode 100644
index b8835739..00000000
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-    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 '../../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';
-  }
-}
author	cyuamber <xuranyjy@chinamobile.com>	2019-08-22 16:55:57 +0800
committer	cyuamber <xuranyjy@chinamobile.com>	2019-08-22 16:56:09 +0800
commit	d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
tree	b3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/components
parent	56923755c761897cc86ca2457667fcc3e6a0e43f (diff)