diff options
Diffstat (limited to 'usecaseui-portal/src/app/shared')
41 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">* </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">* </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}} + {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"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'; + } +} diff --git a/usecaseui-portal/src/app/shared/utils/utils.js b/usecaseui-portal/src/app/shared/utils/utils.js new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/shared/utils/utils.js |