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