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