diff options
Diffstat (limited to 'usecaseui-portal/src/app')
85 files changed, 9046 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.css b/usecaseui-portal/src/app/alarm/alarm.component.css new file mode 100644 index 00000000..757a55b6 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.css @@ -0,0 +1,138 @@ +/* + Copyright (C) 2018 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: 20px; +} +.select .query_criteria span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select .query_criteria nz-dropdown { + vertical-align: middle; +} +.select .query_criteria nz-dropdown :hover { + border-color: #147dc2; +} +.select .query_criteria nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select .query_criteria nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select .query_criteria nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .query_criteria .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; +} +.select .query_criteria .search span { + color: #fff; + font-weight: 400; +} +::ng-deep .vertical-center-modal { + display: flex; + align-items: center; + justify-content: center; +} +::ng-deep .vertical-center-modal .ant-modal { + top: 0; +} +.content { + clear: both; + padding-top: 20px; +} +.content .title { + border-radius: 5px 5px 5px 5px; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 20px; + clear: both; +} +.content .title ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + width: 70%; + float: left; +} +.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 .title .thumbnail { + width: 25%; + height: 90px; + float: left; + margin-top: 8px; +} +.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/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html new file mode 100644 index 00000000..8f95de37 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.html @@ -0,0 +1,113 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer;">Alarm</span> <span *ngIf="detailshow">> + Details</span> </h3> +<hr> +<div class="select" [@showHideAnimate]="state"> + <div class="query_criteria"> + <span>Source Name: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList"> + <a>{{item.name}}</a> + </li> + </ul> + </nz-dropdown> + + <span>Priority: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{prioritySelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="chosePriority(item)" *ngFor="let item of priorityList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + + <span>Status: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{statusSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseStatus(item)" *ngFor="let item of statusList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + <br> <br> + <span>Report Time: </span> + <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> + + <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> + </div> +</div> +<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="content" [@showHideAnimate]="state"> + <div class="title"> + <ul> + <li> + <h5>All</h5> + <p>{{alarmList.all }}</p> + </li> + <li> + <h5>Closed</h5> + <p>{{alarmList.closed }}</p> + </li> + <li> + <h5>Action</h5> + <p>{{alarmList.Action }}</p> + </li> + </ul> + <div class="thumbnail" (click)="showModalMiddle()"> + <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + </div> + </div> + <div class="tablelist"> + <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [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="10%">Priority</th> + <th nzWidth="20%">SpecificProblem</th> + <th nzWidth="20%">Report Time</th> + <th nzWidth="15%">Status</th> + <th nzWidth="10%">Action</th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> --> + <tr *ngFor="let item of list; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.name}}</td> + <td>{{item.age}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td class="action"><a (click)="detailShow()"><i class="details"></i></a></td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> +</div> +<div [@showHideAnimate]="state2"> + <app-details></app-details> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/alarm/alarm.component.less b/usecaseui-portal/src/app/alarm/alarm.component.less new file mode 100644 index 00000000..2d05c703 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.less @@ -0,0 +1,132 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + .query_criteria { + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } + } + +} +// model style + +::ng-deep .vertical-center-modal { + display: flex; + align-items: center; + justify-content: center; +} +::ng-deep .vertical-center-modal .ant-modal { + top: 0; +} + +.content { + clear: both; + padding-top: 20px; + .title { + border-radius: 5px 5px 5px 5px; + background-color: #fff; + height: 106px; + border-bottom: 1px solid #f0f0f0; + margin-bottom: 20px; + clear: both; + ul { + display: flex; + display: -webkit-flex; + justify-content: space-around; + align-items: center; + padding: 0; + margin: 0; + height: 100%; + width: 70%; + float: left; + 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; + } + } + .thumbnail { + width: 25%; + height: 90px; + float: left; + margin-top: 8px; + } + } + .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; + } + } + } + } +} diff --git a/usecaseui-portal/src/app/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts new file mode 100644 index 00000000..c7f5a738 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AlarmComponent } from './alarm.component'; + +describe('AlarmComponent', () => { + let component: AlarmComponent; + let fixture: ComponentFixture<AlarmComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AlarmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlarmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts new file mode 100644 index 00000000..72dd5181 --- /dev/null +++ b/usecaseui-portal/src/app/alarm/alarm.component.ts @@ -0,0 +1,380 @@ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; +import * as addDays from 'date-fns/add_days'; +import { showHideAnimate, slideToRight } from '../animates'; + +@Component({ + selector: 'app-alarm', + templateUrl: './alarm.component.html', + styleUrls: ['./alarm.component.less'], + animations: [ + showHideAnimate, slideToRight + ] +}) +export class AlarmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; //路由动画 + public pageNumber:number=1; + public pageSize:number=5; + public name:string=''; + public Priority:string =''; + public Status:string =''; + public Report:string =''; + list: any; + + + constructor( + private myhttp:MyhttpService) { } + isVisibleMiddle = false; + + showModalMiddle(): void { + this.isVisibleMiddle = true; + } + handleOkMiddle(): void { + console.log('click ok'); + this.isVisibleMiddle = false; + } + handleCancelMiddle(): void { + this.isVisibleMiddle = false; + } + ngOnInit() { + this.getAlarmFormData(); + } + + // 筛选框（下拉框） + // sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD']; + sourceNameList=[ + {key:null,name:'请选择'}, + {key:1,name:'aaaa'}, + {key:2,name:'bbbb'}, + {key:3,name:'cccc'}, + {key:4,name:'dddddDDDDDDDDDDDDDDD'} + ] + sourceNameSelected = this.sourceNameList[0].name; + priorityList = ['aaaa','bbbb','cccc','ddddd']; + prioritySelected = this.priorityList[0]; + statusList = ['aaaa','bbbb','cccc','ddddd']; + statusSelected = this.statusList[0]; + choseSourceName(item){ + console.log(item,'item1'); + this.sourceNameSelected = item; + } + chosePriority(item){ + console.log(item); + this.prioritySelected = item; + } + choseStatus(item){ + console.log(item); + this.statusSelected = item; + } + + // 日期筛选 + dateRange = [ addDays(new Date(), -30), new Date() ]; + + onChange(result: Date): void { + console.log('onChange: ', result); + } + // search(){ + // this.myhttp.getAlarmFormData().subscribe + + // } + sort(e){ + + } + // 数量统计 + alarmList = { + all:22439, + closed:37923, + Action: 12342 + } + + //折线图縮略圖 + alarmChartData:Object; + alarmChartInit:Object = { + height:100, + width:290, + option:{ + tooltip : { + show : false, + trigger: 'axis', + }, + legend: { + show :false, + bottom: '0px', + data: ['All', 'Active', 'Closed'] + }, + series: [ + { + name: 'All', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65], + itemStyle: { + color: "#526b75" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + }, + { + name: 'Active', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12], + itemStyle: { + color: "#fb6e6e" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + }, + { + name: 'Closed', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5], + itemStyle: { + color: "#3fa8eb" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + } + ] + } + }; + getAlarmChartData(){ + let paramsObj = { + alarmSourceName:this.sourceNameSelected + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data)=>{ + this.alarmChartData = { + series:[ + {data:data.CPU}, + {data:data.CPU}, + {data:data.Memory} + ] + } + },(err)=>{ + console.log(err); + }) + } + //折线图放大圖 + alarmChartDataBig:Object; + alarmChartInitBig:Object = { + height:240, + width:500, + option:{ + tooltip : { + show : true, + trigger: 'axis', + }, + legend: { + show :true, + bottom: '0px', + data: ['All', 'Active', 'Closed'] + }, + series: [ + { + name: 'All', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65], + itemStyle: { + color: "#526b75" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + }, + { + name: 'Active', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12], + itemStyle: { + color: "#fb6e6e" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + }, + { + name: 'Closed', + type: 'line', + smooth: true,//将图变得平缓 + showSymbol: false, + areaStyle: { + opacity: 0.8 + }, + //timeframe_two + data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5], + itemStyle: { + color: "#3fa8eb" + }, + lineStyle: { + width: 1, + opacity: 0.5 + } + } + ] + } + }; + //表格数据 + dataSet = [ + { + name : 'John Brown', + age : 32, + expand : false, + address : 'New York No. 1', + description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' + }, + { + name : 'Aim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Xim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'aoe Black', + age : 32, + expand : false, + address : 'Sidney No. 1', + description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' + } + ]; + + //详情页标题显示 + detailshow = false; + // 显示隐藏动画 + state = "show"; + state2 = "hide"; + detailShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.detailshow = true; + } + detailHide() { + this.state = 'show'; + this.state2 = 'hide'; + this.detailshow = false; + } + getSelects:Object = { + countAll:0, + countClose:0, + countActive:0, + eventNameList:[], + sourceIdList:[], + reportingEntityNameList:[], + sourceNameList:[], +}; + getAlarmFormData(){ + this.myhttp.getAlarmFormData(this.pageNumber,this.pageSize,this.name,this.Priority,this.Status,this.Report).subscribe((data)=>{ + if(data.retCode ==200){ + this.list = data.list; + } + console.log(data,'data'); + }) + } +} diff --git a/usecaseui-portal/src/app/animates.ts b/usecaseui-portal/src/app/animates.ts new file mode 100644 index 00000000..cde7e568 --- /dev/null +++ b/usecaseui-portal/src/app/animates.ts @@ -0,0 +1,42 @@ +import { trigger, state, style, animate, transition } from '@angular/animations'; + +// 路由动画 +export const slideToRight = trigger('routerAnimate', [ + // 定义void表示空状态下 + state('void', style({ position:'fixed', zIndex:'-1' })), //不明白为啥要加定位出场动画才生效 + // * 表示任何状态 + state('*', style({ })), + // 进场动画 + transition(':enter', [ + style({transform: 'translateX(-100%)'}), + animate('.5s ease-in-out') + ]), + // 出场动画 + transition(':leave', [ + animate('.5s ease-in-out', style({transform: 'translateX(100%)'}) ) + ]) +]); +// 详情页显示隐藏动画 +export const showHideAnimate = trigger('showHideAnimate', [ + state('show', style({ + transform: 'scale(1)', + display:'block', + })), + state('hide', style({ + transform: 'scale(0)', + display:'none' + })), + transition('show => hide', animate('300ms ease-in')), + transition('hide => show', animate('300ms ease-out')) +]); +// 详情页显示隐藏动画 +export const slideUpDown = trigger('slideUpDown', [ + state('down', style({ + height: "*" + })), + state('up', style({ + height: "0" + })), + transition('down => up', animate('300ms ease-in')), + transition('up => down', animate('300ms ease-out')) +]);
\ No newline at end of file diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts new file mode 100644 index 00000000..7fe7361c --- /dev/null +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -0,0 +1,41 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + + +import { HomeComponent } from './home/home.component'; +import { ServicesComponent } from './services/services.component'; +import { ServicesListComponent } from './services/services-list/services-list.component'; +import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component'; +import { AlarmComponent } from './alarm/alarm.component'; +import { PerformanceComponent } from './performance/performance.component'; +import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component'; +import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component'; + +import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component'; + +// import { DetailsComponent } from './details/details.component'; + +const ServicesChildRoutes: Routes = [ + { path: 'services-list', component: ServicesListComponent}, + { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent}, + { path: '**', redirectTo: 'services-list' } +] + +const routes: Routes = [ + { path: 'home', component: HomeComponent}, + // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //暂时不是子路由结构 + { path: 'services/services-list', component: ServicesListComponent}, + { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent}, + { path: 'alarm', component: AlarmComponent}, + { path: 'performance', component: PerformanceComponent}, + { path: 'performance/performance-vnf', component: PerformanceVnfComponent}, + { path: 'performance/performance-vm', component: PerformanceVmComponent}, + { path: 'network', component: CcvpnNetworkComponent }, + { path: '**', redirectTo: 'home', pathMatch: 'full'} +]; + +@NgModule({ + imports: [ RouterModule.forRoot(routes) ], + exports: [ RouterModule ] +}) +export class AppRoutingModule {} diff --git a/usecaseui-portal/src/app/app.component.css b/usecaseui-portal/src/app/app.component.css new file mode 100644 index 00000000..f25d3262 --- /dev/null +++ b/usecaseui-portal/src/app/app.component.css @@ -0,0 +1,39 @@ +/* + Copyright (C) 2018 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. +*/ +nz-layout nz-sider ul li { + margin: 0; + font-size: 16px; +} +nz-layout nz-sider ul li span { + font-size: 16px; +} +nz-layout nz-sider ul li i { + width: 16px; + height: 16px; +} +nz-layout nz-sider ul li .icon-services { + background: url(../assets/images/icon.png) no-repeat 0px -16px; +} +nz-layout nz-sider ul li ul li { + font-size: 12px; +} +nz-layout nz-sider ul hr { + margin: 0 auto; + background-color: #39434f; + height: 1px; + border: none; + width: 80%; +} diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html new file mode 100644 index 00000000..8e189e73 --- /dev/null +++ b/usecaseui-portal/src/app/app.component.html @@ -0,0 +1,80 @@ +<!-- + Copyright (C) 2018 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. +--> +<nz-layout> + <nz-sider nzWidth='260' style="overflow: auto; height: 100vh; position: fixed; left: 0"> + <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" style="width: 260px;"> + <li nz-menu-item nzSelected> + <a routerLink="home"> + <span title> + <i class="anticon anticon-home"></i> + <span> {{"Home" | translate}} </span> + </span> + </a> + </li> + <hr> + <li nz-submenu> + <span title><i class="anticon anticon-home"></i> {{"Services" | translate}} </span> + <ul> + <li nz-menu-item><a routerLink='services/services-list'> {{"Services List" | translate}}</a></li> + <li nz-menu-item><a routerLink='services/onboard-vnf-vm'> Onboard VNF/VM </a></li> + </ul> + </li> + <!-- <hr> + <li nz-menu-item> + <a routerLink="alarm"> + <span title> + <i class="anticon anticon-mail"></i> + <span> {{"Alarm" | translate}} </span> + </span> + </a> + </li> + <hr> --> + <li nz-submenu> + <span title><i class="anticon anticon-setting"></i> {{"Monitor" | translate}} </span> + <ul> + <li nz-menu-item><a routerLink='alarm'> {{"Alarm" | translate}} </a></li> + <li nz-menu-item><a routerLink='performance/performance-vnf'> {{"Performance" | translate}}</a></li> + </ul> + </li> + <hr> + <li nz-menu-item> + <a routerLink="network"> + <span title> + <i class="anticon anticon-share-alt"></i> + <span> {{"Network" | translate}} </span> + </span> + </a> + </li> + </ul> + <button (click)="changeLanguage('zh')" >{{"zh" | translate}}</button> + <button (click)="changeLanguage('en')" >{{"en" | translate}}</button> + <select name="Language" id="" [(ngModel)]="selectLanguage" (change)="changeLanguage1()"> + <option *ngFor="let item of Language" value="{{item}}">{{item | translate}}</option> + </select> + + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'"> + <button nz-button nz-dropdown><span>{{selectLanguage | translate}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="changeLanguage2(item)" *ngFor="let item of Language"> + <a>{{item | translate}}</a> + </li> + </ul> + </nz-dropdown> + </nz-sider> + <nz-layout style="margin-left: 260px; padding: 20px 32px; height:100vh; position:relative;"> + <router-outlet></router-outlet> + </nz-layout> +</nz-layout> diff --git a/usecaseui-portal/src/app/app.component.less b/usecaseui-portal/src/app/app.component.less new file mode 100644 index 00000000..a805166e --- /dev/null +++ b/usecaseui-portal/src/app/app.component.less @@ -0,0 +1,32 @@ +nz-layout { + nz-sider { + ul { + li { + margin: 0; + font-size: 16px; + span { + font-size: 16px; + } + i { + width: 16px; + height: 16px; + } + .icon-services { + background: url(../assets/images/icon.png) no-repeat 0px -16px; + } + ul { + li{ + font-size: 12px; + } + } + } + hr { + margin: 0 auto; + background-color: #39434f; + height: 1px; + border: none; + width: 80%; + } + } + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/app.component.spec.ts b/usecaseui-portal/src/app/app.component.spec.ts new file mode 100644 index 00000000..bcbdf36b --- /dev/null +++ b/usecaseui-portal/src/app/app.component.spec.ts @@ -0,0 +1,27 @@ +import { TestBed, async } from '@angular/core/testing'; +import { AppComponent } from './app.component'; +describe('AppComponent', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + })); + it('should create the app', async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app).toBeTruthy(); + })); + it(`should have as title 'app'`, async(() => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.debugElement.componentInstance; + expect(app.title).toEqual('app'); + })); + it('should render title in a h1 tag', async(() => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.debugElement.nativeElement; + expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); + })); +}); diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts new file mode 100644 index 00000000..be13c1a1 --- /dev/null +++ b/usecaseui-portal/src/app/app.component.ts @@ -0,0 +1,34 @@ +import { Component } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; + + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.less'] +}) +export class AppComponent { + constructor(private translate:TranslateService){ + translate.addLangs(['en', 'zh']); + translate.setDefaultLang('en'); + // translate.use('en'); + } + changeLanguage(Language): void { + switch(Language){ + case 'en': + this.translate.use('en'); + break; + case 'zh': + this.translate.use('zh'); + } + } + // 多语言 + Language:String[] = ["zh","en"]; + selectLanguage = "en"; + changeLanguage1(){ + this.translate.use(this.selectLanguage); + } + changeLanguage2(item){ + this.translate.use(item); + } +} diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts new file mode 100644 index 00000000..7c24f110 --- /dev/null +++ b/usecaseui-portal/src/app/app.module.ts @@ -0,0 +1,98 @@ +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; +import { HttpClient } from '@angular/common/http'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; +import { NgxEchartsModule } from 'ngx-echarts'; + +import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; +import {TranslateHttpLoader} from '@ngx-translate/http-loader'; +export function HttpLoaderFactory(httpClient: HttpClient) { + return new TranslateHttpLoader(httpClient, '../assets/i18n/', '.json'); +} + +import { AppRoutingModule } from './app-routing.module'; + +//注册语言包 +import { registerLocaleData } from '@angular/common'; +import en from '@angular/common/locales/en'; +registerLocaleData(en); + +//自定义组件 +import { AppComponent } from './app.component'; +import { HomeComponent } from './home/home.component'; +import { ServicesComponent } from './services/services.component'; +import { ServicesListComponent } from './services/services-list/services-list.component'; +import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component'; +import { AlarmComponent } from './alarm/alarm.component'; +import { PerformanceComponent } from './performance/performance.component'; +import { PerformanceVnfComponent } from './performance/performance-vnf/performance-vnf.component'; +import { PerformanceVmComponent } from './performance/performance-vm/performance-vm.component'; +import { CcvpnNetworkComponent } from './ccvpn-network/ccvpn-network.component'; +import { CcvpnDetailComponent } from './ccvpn-detail/ccvpn-detail.component'; +import { CcvpnCreationComponent } from './ccvpn-creation/ccvpn-creation.component'; + +import { DetailsComponent } from './components/details/details.component'; +import { GraphiclistComponent } from './components/graphiclist/graphiclist.component'; + +import { BarComponent } from './components/charts/bar/bar.component'; +import { LineComponent } from './components/charts/line/line.component'; +import { PieComponent } from './components/charts/pie/pie.component'; + +import {PathLocationStrategy, LocationStrategy, HashLocationStrategy} from '@angular/common'; +// 自定义服务 +import { MyhttpService } from './myhttp.service'; +import { networkHttpservice } from './networkHttpservice.service'; + +@NgModule({ + providers : [ + { provide: LocationStrategy, useClass: HashLocationStrategy }, + { provide: NZ_I18N, useValue: en_US }, + MyhttpService, + networkHttpservice + ], + declarations: [ + AppComponent, + HomeComponent, + + ServicesComponent, + ServicesListComponent, + OnboardVnfVmComponent, + + AlarmComponent, + + PerformanceComponent, + PerformanceVnfComponent, + PerformanceVmComponent, + DetailsComponent, + PieComponent, + LineComponent, + BarComponent, + GraphiclistComponent, + + CcvpnNetworkComponent, + CcvpnDetailComponent, + CcvpnCreationComponent, + ], + imports: [ + BrowserModule, + FormsModule, + HttpClientModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [HttpClient] + } + }), + BrowserAnimationsModule, + NgZorroAntdModule.forRoot(), + NgxEchartsModule, + AppRoutingModule + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { }
\ No newline at end of file diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css new file mode 100644 index 00000000..35fdbef5 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -0,0 +1,195 @@ +/* + Copyright (C) 2018 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: 15px; +} +.model .creation h3.title { + height: 20px; + font: 700 20px/20px "Arial"; + color: #666; +} +.model .creation h3 { + height: 20px; + font: 700 16px/20px "Arial"; + margin: 5px 0px; + color: #000; +} +.model .creation .submit { + position: absolute; + top: 10px; + right: 20px; +} +/* SOTN VPN */ +.model .creation .sotnvpn ul li { + display: inline-block; + height: 35px; + width: 49.5%; +} +.model .creation .sotnvpn ul li span { + display: inline-block; + width: 110px; + font: 700 14px "Arial"; + color: #3fa8eb; + vertical-align: middle; +} +.model .creation .sotnvpn ul li input { + width: 165px; +} +/* Site List */ +/* addsite model */ +.model .sitemodel { + position: absolute; + z-index: 10; + left: 10px; + top: 60px; + background-color: #fff; + box-shadow: 0px 0px 20px #000; + width: 60%; + max-height: 90%; + border-radius: 5px; + overflow-y: auto; +} +.model .sitemodel h3 { + height: 30px; + font: 700 16px/30px "Arial"; + border-bottom: 1px solid #aaa; + padding-left: 10px; +} +.model .sitemodel h4 { + height: 30px; + font: 700 16px/30px "Arial"; + padding-left: 10px; + background-color: #ddd; +} +.model .sitemodel .inputs { + padding: 10px 20px 0; +} +.model .sitemodel .inputs ul li { + display: inline-block; + height: 35px; + width: 49.5%; +} +.model .sitemodel .inputs ul li span { + display: inline-block; + width: 110px; + font: 700 14px "Arial"; + color: #3fa8eb; + vertical-align: middle; +} +.model .sitemodel .inputs input { + width: 165px; +} +.model .sitemodel .action { + float: left; + padding: 10px; +} + +.model nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} + +/* site table */ +.model .site nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} +/* WAN Port */ + +/* Site Group List */ +.model .sitegroup .sitegroupmodal { + position: absolute; + z-index: 10; + left: 200px; + top: 300px; + background-color: #fff; + box-shadow: 0px 0px 20px #000; + width: 330px; + border-radius: 5px; +} +.model .sitegroup .sitegroupmodal h3 { + height: 30px; + font: 700 16px/30px "Arial"; + border-bottom: 1px solid #aaa; + padding-left: 10px; +} +.model .sitegroup .sitegroupmodal .inputs { + padding: 10px 20px 0; +} +.model .sitegroup .sitegroupmodal span { + display: inline-block; + width: 100px; + margin-bottom: 10px; +} +.model .sitegroup .sitegroupmodal .inputs input { + width: 165px; +} +.model .sitegroup .sitegroupmodal .action { + float: right; + padding: 10px; +} + + +/* 图 */ +.model .chart { + width: 40%; + padding: 10px; + height: 100%; + border-left: 10px solid #f3f3f3; +} +.model .chart #createChart { + width: 100%; + height: 80%; + margin-top: 20px; + position: relative; +} +.model .chart #createChart .siteNameP { + position: fixed; + border: 5px; + padding: 3px 5px; + color: #fff; + background: #999; + box-shadow: 0px 0px 20px #000; + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html new file mode 100644 index 00000000..15486238 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -0,0 +1,313 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> Services List </h3> +<hr> +<div class="model"> + <!-- 创建数据 --> + <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button> + <div class="creation fl"> + <h3 class="title">{{createParams.commonParams.templateType}} Instance Creation</h3> + <div class="sotnvpn clearfix"> + <h3>SOTN VPN Info</h3> + <ul> + <li><span>Name:</span> <input nz-input [(ngModel)]="sotnInfo.name"></li> + <li><span>Description:</span> <input nz-input [(ngModel)]="sotnInfo.description"></li> + <li><span>Start Time:</span> + <nz-date-picker [(ngModel)]="sotnInfo.startTime" + (ngModelChange)="startTimeChange($event)" + nzPlaceHolder="start time" + nzShowTime> + </nz-date-picker> + </li> + <li><span>End Time:</span> + <nz-date-picker [(ngModel)]="sotnInfo.endTime" + (ngModelChange)="endTimeChange($event)" + nzPlaceHolder="end time" + nzShowTime> + </nz-date-picker> + </li> + <li><span>COS:</span> + <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.COS" nzAllowClear nzPlaceHolder="Choose"> + <nz-option nzValue="premium" nzLabel="premium"></nz-option> + <nz-option nzValue="standard" nzLabel="standard"></nz-option> + </nz-select> + </li> + <li><span>Reroute Enabled:</span> <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch> </li> + <li><span>Service Level Specification:</span> <input nz-input [(ngModel)]="sotnInfo.SLS"></li> + <li><span>Dual Link:</span> + <nz-select style="width: 165px;" [(ngModel)]="sotnInfo.dualLink" nzAllowClear nzPlaceHolder="Choose"> + <nz-option nzValue="no_protection" nzLabel="no_protection"></nz-option> + <nz-option nzValue="static_1+1" nzLabel="static_1+1"></nz-option> + <nz-option nzValue="permanent_1+1" nzLabel="permanent_1+1"></nz-option> + </nz-select> + </li> + <li><span>CIR:</span> <input nz-input [(ngModel)]="sotnInfo.CIR"></li> + <li><span>EIR:</span> <input nz-input [(ngModel)]="sotnInfo.EIR"></li> + <li><span>CBS:</span> <input nz-input [(ngModel)]="sotnInfo.CBS"></li> + <li><span>EBS:</span> <input nz-input [(ngModel)]="sotnInfo.EBS"></li> + <li><span>Color Aware:</span> <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch> </li> + <li><span>Coupling Flag:</span> <nz-switch [(ngModel)]="sotnInfo.couplingFlag"></nz-switch> </li> + </ul> + </div> + + <div class="site"> + <h3>Site List</h3> + <button nz-button (click)="addSite()">Add Site</button> + <nz-table #siteTable [nzData]="siteTableData" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="15%"> Name </th> + <th nzWidth="15%"> Description </th> + <th nzWidth="15%"> Post Code </th> + <th nzWidth="15%"> Address </th> + <th nzWidth="15%"> VLAN </th> + <th nzWidth="15%"> Action </th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="siteTable.data" let-i="index"> --> + <tr *ngFor="let item of siteTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.baseData.name}}</td> + <td>{{item.baseData.description}}</td> + <td>{{item.baseData.postcode}}</td> + <td>{{item.baseData.address}}</td> + <td>{{item.baseData.vlan}}</td> + <td> + <span class="action" (click)="editSite(i+1)"><i class="anticon anticon-edit"></i></span> + <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + + <div class="sitegroup" *ngIf="createParams.commonParams.templateType == 'CCVPN'"> + <h3>Site_Group List</h3> + <button nz-button (click)="addSiteGroup()">Add Group</button> + <div class="sitegroupmodal" *ngIf="siteGroupModelShow"> + <h3>Site_Group</h3> + <div class="inputs"> + <span>Group Name:</span> <input nz-input [(ngModel)]="siteGroupModelData.name"> <br> + <span>Topology:</span> + <nz-select style="width: 165px;" [(ngModel)]="siteGroupModelData.topology" nzAllowClear nzPlaceHolder="Choose"> + <nz-option nzValue="full-mesh" nzLabel="full-mesh"></nz-option> + <nz-option nzValue="hub-spoke" nzLabel="hub-spoke"></nz-option> + </nz-select> + <nz-table #groupModalTable [nzData]="siteGroupModalTableData" [nzLoading]="loading" [nzShowPagination]="false" nzSize="small"> + <thead> + <tr> + <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="groupModal_checkAll($event)"></th> + <th> Site Name</th> + <th> Role</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of groupModalTable.data; let i = index;"> + <td nzShowCheckbox [nzDisabled]="item.disabled" [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus($event)"></td> + <td>{{ item.siteName }}</td> + <td> + <nz-select style="width: 80px;" [(ngModel)]="item.role" + nzAllowClear nzPlaceHolder="Choose" + [nzDisabled]="siteGroupModelData.topology != 'hub-spoke'"> + <nz-option nzValue="hub" nzLabel="hub"></nz-option> + <nz-option nzValue="spoke" nzLabel="spoke"></nz-option> + </nz-select> + </td> + </tr> + </tbody> + </nz-table> + </div> + <div class="action"> + <button nz-button nzType="primary" (click)="addsitegroup_OK()">OK</button> + <button nz-button nzType="primary" (click)="addsitegroup_cancel()">Cancel</button> + </div> + </div> + <nz-table #siteGroupTable [nzData]="siteGroupTableData" + [nzLoading]="loading" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="20%"> Group Name </th> + <th nzWidth="20%"> Topology </th> + <th nzWidth="20%"> Sites </th> + <th nzWidth="15%"> Role </th> + <th nzWidth="15%"> Action </th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="siteGroupTable.data" let-i="index"> --> + <tr *ngFor="let item of siteGroupTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.name}}</td> + <td>{{item.topology}}</td> + <td>{{item.sites}}</td> + <td>{{item.role}}</td> + <td> + <span class="action" (click)="editGroupSite(i+1)"><i class="anticon anticon-edit"></i></span> + <span class="action" (click)="deleteGroupSite(i+1)"><i class="anticon anticon-delete"></i></span> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + + <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><span>Create</span></button> + </div> + <!-- site模态框 --> + <div class="sitemodel" *ngIf="siteModelShow"> + <h3>Site_Enterprise Service</h3> + <div class="inputs"> + <ul> + <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li> + <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li> + <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span> + <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.type" nzAllowClear nzPlaceHolder="Choose"> + <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option> + <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option> + </nz-select> + </li> + <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span> + <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.role" nzAllowClear nzPlaceHolder="Choose"> + <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option> + <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option> + </nz-select> + </li> + <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li> + <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li> + <li><span>Address:</span> + <nz-select style="width: 165px;" [(ngModel)]="siteBaseData.address" nzAllowClear nzPlaceHolder="Choose"> + <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}" nzLabel="{{item}}"></nz-option> + </nz-select> + </li> + </ul> + </div> + <div *ngIf="createParams.commonParams.templateType == 'CCVPN'"> + <h4>CPE</h4> + <div class="inputs"> + <ul> + <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li> + <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li> + <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li> + <li><span>Class:</span> + <nz-select style="width: 165px;" [(ngModel)]="siteCpeData.device_class" nzAllowClear nzPlaceHolder="Choose"> + <nz-option nzValue="VNF" nzLabel="VNF"></nz-option> + <nz-option nzValue="PNF" nzLabel="PNF"></nz-option> + </nz-select> + </li> + <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li> + <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li> + <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li> + </ul> + </div> + <h4>WAN Port</h4> + <div> + <nz-table #siteModalTable [nzData]="siteWanData" + [nzLoading]="loading" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="15%"> Name </th> + <th nzWidth="15%"> Description </th> + <th nzWidth="15%"> PortType </th> + <th nzWidth="18%"> PortNumber </th> + <th nzWidth="17%"> IPAddress </th> + <th nzWidth="10%"> Action </th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> --> + <tr *ngFor="let item of siteModalTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.sitewanport_name}}</td> + <td>{{item.sitewanport_description}}</td> + <td>{{item.sitewanport_portType}}</td> + <td>{{item.sitewanport_portNumber}}</td> + <td>{{item.sitewanport_ipAddress}}</td> + <td> + <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit" (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()"> + <ul class="wanPortModalList"> + <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li> + <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> --> + <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description"></li> + <li><span>Port Type:</span> + <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear nzPlaceHolder="Choose"> + <nz-option nzValue="GE" nzLabel="GE"></nz-option> + <nz-option nzValue="FE" nzLabel="FE"></nz-option> + <nz-option nzValue="XGE" nzLabel="XGE"></nz-option> + <nz-option nzValue="LTE" nzLabel="LTE"></nz-option> + <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option> + <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option> + </nz-select> + </li> + <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber"></li> + <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li> + <li><span>Provider IP Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_providerIpAddress"></li> + <li><span>Transport Nerwork:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_transportNetworkName"></li> + <li><span>Input Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_inputBandwidth"></li> + <li><span>Output Bandwidth:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_outputBandwidth"></li> + </ul> + </nz-modal> + </div> + + <div class="action"> + <button nz-button nzType="primary" (click)="addsite_OK()">OK</button> + <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button> + </div> + </div> + <!-- 图 --> + <div class="chart fr"> + Create Service + {{createParams.commonParams.templateType}} + <div id="createChart"> + <svg width="100%" height="100%"> + <line *ngFor="let item of lines" x1=50% y1="45%" [attr.x2]="item.x2" y2="72%" style="stroke:#3fa8eb;stroke-width:2"/> + <image xlink:href="./assets/images/cloud-site.png" + x="25%" y="30%" width="50%"/> + <!-- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> --> + <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text> + <g *ngFor="let item of siteImage" + (mouseover)="showSite($event,item)" + (mousemove)="moveSite($event,item)" + (mouseout)="hideSite($event)"> + <image + xlink:href="./assets/images/site.png" + [attr.x]="item.x" y="65%" width="80px"/> + <text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}</text> + </g> + + </svg> + <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> --> + </div> + </div> + +</div> diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts new file mode 100644 index 00000000..922bd9ea --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CcvpnCreationComponent } from './ccvpn-creation.component'; + +describe('CcvpnCreationComponent', () => { + let component: CcvpnCreationComponent; + let fixture: ComponentFixture<CcvpnCreationComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CcvpnCreationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CcvpnCreationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts new file mode 100644 index 00000000..ffc354c7 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -0,0 +1,548 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; + +@Component({ + selector: 'app-ccvpn-creation', + templateUrl: './ccvpn-creation.component.html', + styleUrls: ['./ccvpn-creation.component.css'] +}) +export class CcvpnCreationComponent implements OnInit { + + constructor(private myhttp:MyhttpService) { } + + ngOnInit() { + this.getSiteAddressList(); + this.getTemParameters(); + } + + @Input() createParams; + @Input() namesTranslate; //输入项参数名字转换 + @Output() closeCreate = new EventEmitter(); + + templateParameters = {}; + getTemParameters(){ //获取模板参数 + let chosedtemplates = Object.values(this.createParams.templates); + // console.log(this.createParams); + console.log(chosedtemplates); //模板id数组 + let types = ["sotnvpn","site","sdwanvpn"]; + chosedtemplates.forEach((item,index)=>{ + this.myhttp.getTemplateParameters(types[index],item) + .subscribe((data)=>{ + if(index === 0){ + this.templateParameters["sotnvpn"] = data; + this.sotnNames = data.inputs.map((item)=>{return item.name}); //云的真实名字 + }else if(index === 1){ + this.templateParameters["site"] = data; + let wanportnames = {}; + this.siteNames = data.inputs.map((item)=>{return item.name}); //site中所有真实名字,没有分组，放在一起了 + this.siteNames.forEach((item)=>{ + if(item.includes("_device_")){ + this.siteCpeNames.push(item); + }else if(item.includes("_sitewanport_")){ + let firstName = item.split("_")[0]; + wanportnames[firstName]?wanportnames[firstName].push(item):wanportnames[firstName]=[item]; + }else { + this.siteBaseNames.push(item); + } + }) + this.siteWanNames = Object.values(wanportnames); + this.siteWanNames.forEach((item)=>{ + this.siteWanData.push(this.siteWanParams); //根据wanport组添加表格中 + }) + // console.log(this.sotnNames) + // console.log(this.siteNames) + // console.log(this.siteBaseNames) + // console.log(this.siteCpeNames) + // console.log(this.siteWanNames) + // console.log(this.siteWanData) + }else if(index === 2){ + this.templateParameters["sdwan"] = data; + this.siteGroupNames = data.inputs.map((item)=>{return item.name}); //sdwanvpn真实名字 + // console.log(this.siteGroupNames); + } + + },(err)=>{ + + }) + }) + + } + // SOTN VPN Info 输入参数 + sotnInfo = { + name:null,description:null, + startTime:null,endTime:null, + COS:"premium",reroute:false, + SLS:null,dualLink:false, + CIR:null,EIR:null, + CBS:null,EBS:null, + colorAware:false,couplingFlag:false + } + sotnNames = [] //真实名字 + + startTimeChange(event){ + console.log(event) + } + endTimeChange(event){ + console.log(event) + } + + + // Site List + siteTableData = [ + + ] + siteModeAddress = [];//site地址，筛选框数据,本地配置文件 + siteNames = [];//site中所有真实名字，未分组，模拟真实请求情况； + + siteBaseData = { //模态框数据，输入参数，绑定数据 + name:null, + description:null, + type:null, + role:null, + postcode:null, + address:null, + vlan:null, + sotnVpnName:null, //SOTN VPN Info中name + controlPoint:null, //site group里面site的Role设置为spoke时，传递site group里面Role设置为hub的site name；否则传递空白 + groupRole:null, //site group的role + groupName:null, //site group的name + emails:null,// 不显示传空 + latitude:null,// + longitude:null,// + clientSignal:null// + }; + siteBaseNames = [] //真实名字 + // cpe 编辑 + siteCpeData = { + device_name:null, + device_version:null, + device_esn:null, + device_class:null, + device_systemIp:null, + device_vendor:null, + device_type:null + }; + siteCpeNames = [] //真实名字 + // Wan Port 编辑 + siteWanData = []; //wan port 表格绑定数据 + siteWanParams = { //每一行数据详细参数，模态框 + sitewanport_name:null, + sitewanport_deviceName:null, + sitewanport_description:null, + sitewanport_portType:null, + sitewanport_portNumber:null, + sitewanport_ipAddress:null, + sitewanport_providerIpAddress:null, + sitewanport_transportNetworkName:null, + sitewanport_inputBandwidth:null, + sitewanport_outputBandwidth:null + }; + siteWanNames = [] //真实名字 + wanPortModal = false; //模态框显示隐藏 + wanPortEditNum = 0;//编辑哪行 + editWanPort(num){ + this.wanPortModal = true; + this.wanPortEditNum = num; + this.siteWanParams = Object.assign({},this.siteWanData[num-1]); + } + wanPortModal_Ok(){ + let inputsData = Object.assign({},this.siteWanParams); //新建对象，断开原引用，因为后面要清空模态框 + inputsData.sitewanport_deviceName = this.siteCpeData.device_name; + this.siteWanData[this.wanPortEditNum-1] = inputsData; + this.siteWanData = [...this.siteWanData]; //表格刷新 + Object.keys(this.siteWanParams).forEach((item)=>{ //清空模态框 + this.siteWanParams[item] = null; + }) + this.wanPortModal = false; + console.log(this.siteWanData) + } + wanPortModal_Cancel(){ + this.wanPortModal = false; + } + + + // 获取site地址，手动文件 + getSiteAddressList(){ + this.myhttp.getSiteAddress() + .subscribe((data)=>{ + console.log(data); + this.siteModeAddress = data.map((item)=>{ return item.location}); + },(err)=>{ + console.log(err); + }) + } + siteModelShow = false; + addSite(){ + this.siteModelShow = true; + this.isEdit = 0; + } + // addsite模态框按钮 + isEdit = 0; //编辑序号，No值，0表示增加 + addsite_OK(){ + this.siteBaseData.sotnVpnName = this.sotnInfo.name; + // let inputsData = Object.assign({},this.siteBaseData,this.siteCpeData,this.siteWanData); //新建对象，断开原引用，因为后面要清空模态框 + let inputs = {}; + inputs["baseData"] = Object.assign({},this.siteBaseData); + inputs["cpeData"] = Object.assign({},this.siteCpeData); + inputs["wanportData"] = this.siteWanData.map((item)=>{ + return Object.assign({},item); + }) + console.log(inputs); + if(this.isEdit){ + // 编辑状态不增加 + this.siteTableData[this.isEdit-1] = inputs; + this.siteTableData = [...this.siteTableData]; //表格刷新 + this.siteGroupTableData.forEach((item)=>{ //site修改名字后，更新组中sites值 + if(item.sites.split(";").filter((d)=>{return d!=""}).includes(this.lastSiteName)){ + item.sites = item.sites.replace(this.lastSiteName,this.siteBaseData.name); + } + }) + }else{ + // this.siteTableData.push(inputs);//使用 push 或者 splice 修改 nzData 失效 当加上[nzFrontPagination]="false" 时，生效 + this.siteTableData = [...this.siteTableData,inputs]; + } + + Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框 + this.siteBaseData[item] = null; + }) + Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框 + this.siteCpeData[item] = null; + }) + this.siteWanData.forEach((item)=>{ + Object.keys(item).forEach((item2)=>{ + item[item2] = null; + }) + }) + // console.log(this.siteTableData); + this.lastSiteName = null; + this.drawImage(this.siteTableData); + this.siteModelShow = false; + } + addsite_cancel(){ + Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框 + this.siteBaseData[item] = null; + }) + Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框 + this.siteCpeData[item] = null; + }) + this.siteWanData.forEach((item)=>{ + Object.keys(item).forEach((item2)=>{ + item[item2] = null; + }) + }) + this.lastSiteName = null; + this.siteModelShow = false; + } + lastSiteName = null; //当site修改之后，若修改了名字，则需要更新group中sites的名字 + editSite(num){ //编辑修改选中site信息 + this.siteModelShow = true; + this.isEdit=num; + this.siteBaseData = Object.assign({},this.siteTableData[num-1].baseData); + this.siteCpeData = Object.assign({},this.siteTableData[num-1].cpeData); + this.siteWanData = this.siteTableData[num-1].wanportData.map((item)=>{return Object.assign({},item)}); + this.lastSiteName = this.siteBaseData.name; + } + deleteSite(num){ + let deleteSiteName = this.siteTableData[num-1].baseData.name; //删除的site中name + let groupSites = []; + this.siteGroupTableData.forEach((item)=>{ groupSites.push(...item.sites.split(";").filter((d)=>{return d!=""})) }); + if(groupSites.includes(deleteSiteName)){ + alert("this site has in grouplist；can't delete！") + return false; + } + this.siteTableData = this.siteTableData.filter((d,i) => i !== num-1); + // this.siteTableData.splice(num-1,1); //模板中加上[nzFrontPagination]="false" 时，生效 + this.drawImage(this.siteTableData); + + // let groupIndex = this.siteGroupTableData.findIndex((item)=>{return item.sites.split(";").includes(deleteSiteName)}); + // console.log(groupIndex) + // this.deleteGroupSite(groupIndex + 1); //删除时首行编号为1 + } + + // site节点图形描绘 + lines=[]; + siteImage=[]; + drawImage(sitelist){ + let cx = 200; + let cy = 200; + let r = 180; + let startAngle = -210 * (Math.PI/180); + let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1; + + this.lines = sitelist.map((item,index)=>{ + let x = cx + Math.cos(startAngle - step*index)*r; + let y = cy + Math.sin(startAngle - step*index)*r; + return {img:"line",site:item.baseData.name,x1:cx,y1:cy,x2:x,y2:y} + }) + this.siteImage = this.lines.map((item)=>{ + return {img:"site",name:item.site,x:item.x2 - 40,y:item.y2 - 40} + }) + } + + siteName=null; + siteNameStyle = { + 'display':'none', + 'left':'0', + 'top':'0' + } + showSite($event,item){ + this.siteName = item.name; + this.siteNameStyle.display = 'block'; + } + moveSite($event,item){ + this.siteNameStyle.left = $event.clientX + "px"; + this.siteNameStyle.top = $event.clientY - 35 + "px"; + } + hideSite($event){ + this.siteNameStyle.display = 'none'; + } + // siteGroup List + siteGroupTableData = [ + + ] + siteGroupModelData = { + name:null, + topology:null, + sites:null, + role:null + } + siteGroupModelShow = false; + siteGroupModalTableData = [];// ==> siteTableData? + siteGroupNames=[]; //sdwanvpn真实名字 + + // 勾选框 + allChecked = false; + indeterminate = false; + groupModal_checkAll(value){ + this.siteGroupModalTableData.forEach(data => { + if (!data.disabled) { + data.checked = value; + } + }); + this.refreshStatus(); + } + refreshStatus(){ + const allChecked = this.siteGroupModalTableData.filter(item => !item.disabled).every(item => item.checked === true); + const allUnChecked = this.siteGroupModalTableData.filter(item => !item.disabled).every(item => !item.checked); + this.allChecked = allChecked; + this.indeterminate = (!allChecked) && (!allUnChecked); + } + + addSiteGroup(){ + this.isGroupEdit = 0; + this.siteGroupModelShow = true; + let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site，若存在 则新组不可选 + // console.log(checkedSite); + this.siteTableData.forEach((item,index)=>{ + if(checkedSite.includes(item.baseData.name)){ + this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:true}) + }else { + this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:false}) + } + }) + } + // addsiteGroup模态框按钮 + addsitegroup_OK(){ //将模态框中的值赋给表中对应项--->将选中的site中的groupRole、groupName、controlPoint更新---> + //拷贝数据判断是增加或编辑，更新表中数据---> 清除模态框中数据,便于下次添加，关闭模态框 + console.log(this.siteGroupModalTableData); + this.siteGroupModelData.sites=""; //置空组成员名字，写成""方便+= ,若为null +=时会转成 "null" + this.siteGroupModelData.role=""; // + let site_controlPoint = this.siteGroupModalTableData.map((item)=>{ if(item.checked&&item.role=="hub"){ return item.siteName}}).filter((item)=>{return item!=undefined}); + // console.log(site_controlPoint); + this.siteGroupModalTableData.forEach((item,index)=>{ //模态框中site顺序和 表中site顺序一致 + if(item.checked){ + this.siteGroupModelData.sites += item.siteName+";"; + this.siteGroupModelData.role += item.role+";"; + this.siteTableData[index].baseData.groupRole = item.role; //site group的role + this.siteTableData[index].baseData.groupName = this.siteGroupModelData.name; //site group的name + if(item.role == "spoke"){ + this.siteTableData[index].baseData.controlPoint = site_controlPoint.join(); //site group里面site的Role设置为spoke时，传递site group里面Role设置为hub的site name；否则传递空白 + } + } + }) + + let inputsData = {}; + Object.assign(inputsData,this.siteGroupModelData); + if(this.isGroupEdit){ + // 编辑状态不增加 + this.siteGroupTableData[this.isGroupEdit-1] = inputsData; + this.siteGroupTableData = [...this.siteGroupTableData]; //表格刷新 + }else{ + // this.siteTableData.push(inputsData);//使用 push 或者 splice 修改 nzData 失效 + this.siteGroupTableData = [...this.siteGroupTableData,inputsData]; + } + + Object.keys(this.siteGroupModelData).forEach((item)=>{ + this.siteGroupModelData[item] = null; + }) + this.siteGroupModalTableData = []; + this.siteGroupModelShow = false; + } + addsitegroup_cancel(){ + this.siteGroupModalTableData = []; + this.siteGroupModelShow = false; + } + isGroupEdit = 0; //编辑序号，No值，0表示增加 + editGroupSite(num){ //将当前编辑的行数据填入模态框--->获取当前编辑项sites名--->判断更新模态框中site项状态 + this.siteGroupModelShow = true; + this.isGroupEdit=num; + this.siteGroupModelData = Object.assign({},this.siteGroupTableData[num-1]); + console.log(this.siteGroupModelData) + let editSites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //获取组中的site名 + // console.log(editSites); + let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site，若存在 则新组不可选 + // console.log(checkedSite); + this.siteTableData.forEach((item,index)=>{ + if(editSites.includes(item.baseData.name)){//先将编辑组中的site 中这三个值还原，否则减少某个site时 不会更新不选中的 + item.baseData.groupRole = null; //site group的role + item.baseData.groupName = null; //site group的name + item.baseData.controlPoint = null; + this.siteGroupModalTableData.push({siteName:item.baseData.name,role:item.baseData.groupRole,checked:true,disabled:false}) + }else + if(checkedSite.includes(item.baseData.name)){ + this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:true}) + }else { + this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:false}) + } + }) + + } + deleteGroupSite(num){ + let deleteSiteGroupsites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //删除的site中name + this.siteGroupTableData = this.siteGroupTableData.filter((d,i) => i !== num-1); + this.siteTableData.forEach((item,index)=>{ + if(deleteSiteGroupsites.includes(item.baseData.name)){ + item.baseData.groupRole = null; //site group的role + item.baseData.groupName = null; //site group的name + item.baseData.controlPoint = null; + } + }) + } + + + + // 提交创建数据 + submit(){ + let globalCustomerId = this.createParams.commonParams.customer.id; + let globalServiceType = this.createParams.commonParams.serviceType; + let sotnInputs = {}; + // 由于请求模板不一样，所以外层需要循环请求回来的真实名字，内层循环本地参数，将当前值赋给真实名字 + this.sotnNames.forEach((name)=>{ + for(let key in this.sotnInfo){ + let nameParts = this.namesTranslate.sotnNameTranslate[key].split("_"); + if(name.startsWith(nameParts[0])&&name.endsWith(nameParts[1])){ + sotnInputs[name] = this.sotnInfo[key]; + break; + } + } + }) + console.log(sotnInputs); + let vpnbody = { + service:{ + name:this.sotnInfo.name, + description:this.sotnInfo.description, + serviceInvariantUuid:this.templateParameters["sotnvpn"].invariantUUID, //template.invariantUUID, //serviceDefId + serviceUuid:this.templateParameters["sotnvpn"].uuid, //template.uuid, // uuid ?? templateId + globalSubscriberId:globalCustomerId, //customer.id + serviceType:globalServiceType, //serviceType.value + parameters:{ + locationConstraints:[], + resources:[], + requestInputs:sotnInputs + } + } + } + + let sitebody = this.siteTableData.map((site)=>{ + let siteInputs = {}; + this.siteBaseNames.forEach((basename)=>{ + for(let key in site.baseData){ + let namePart = this.namesTranslate.siteNameTranslate.baseNames[key]; + if(basename.endsWith(namePart)){ + siteInputs[basename] = site.baseData[key]; + break; + } + } + }) + this.siteCpeNames.forEach((cpename)=>{ + for(let key in site.cpeData){ + let namePart = this.namesTranslate.siteNameTranslate.cpeNames[key]; + if(cpename.endsWith(namePart)){ + siteInputs[cpename] = site.cpeData[key]; + break; + } + } + }) + this.siteWanNames.forEach((item,index)=>{ + item.forEach((wanportname)=>{ + for(let key in site.wanportData[index]){ + let namePart = this.namesTranslate.siteNameTranslate.wanportNames[key]; + if(wanportname.endsWith(namePart)){ + siteInputs[wanportname] = site.wanportData[index][key]; + break; + } + } + }) + }) + + return { + service:{ + name:site.baseData.name, + description:site.baseData.description, + serviceInvariantUuid:this.templateParameters["site"].invariantUUID, + serviceUuid:this.templateParameters["site"].uuid, + globalSubscriberId:globalCustomerId, + serviceType:globalServiceType, + parameters:{ + locationConstraints:[], + resources:[], + requestInputs:siteInputs + } + } + } + }); + console.log(sitebody); + + let groupbody = this.siteGroupTableData.map((item)=>{ + let siteGroupInputs = {}; + this.siteGroupNames.forEach((name)=>{ + for(let key in item){ + let nameParts = this.namesTranslate.siteGroupNameTranslate[key].split("_"); + if(name.startsWith(nameParts[0])&&name.endsWith(nameParts[1])){ + siteGroupInputs[name] = item[key]; + break; + } + } + }) + return { + service:{ + name:item.name, + description:item.topology, + serviceInvariantUuid:this.templateParameters["sdwan"].invariantUUID, + serviceUuid:this.templateParameters["sdwan"].uuid, + globalSubscriberId:globalCustomerId, + serviceType:globalServiceType, + parameters:{ + locationConstraints:[], + resources:[], + requestInputs:siteGroupInputs + } + } + } + }) + console.log(groupbody); + + let createObj = { + vpnbody:vpnbody, + sitebody:sitebody, + groupbody:groupbody + } + + this.closeCreate.emit(createObj); + + } + + goback(){ + this.closeCreate.emit(); + } +} diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css new file mode 100644 index 00000000..710bd104 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css @@ -0,0 +1,138 @@ +/* + Copyright (C) 2018 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 .detaildata { + position: relative; + width: 60%; + height: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 15px; +} +.model .detaildata h3.title { + height: 20px; + font: 700 20px/20px "Arial"; + color: #666; +} +.model .detaildata h3 { + height: 20px; + font: 700 16px/20px "Arial"; + margin: 5px 0px; + color: #000; +} +/* SOTN VPN */ +.model .detaildata .sotnvpn ul li { + display: inline-block; + height: 35px; + width: 49.5%; +} +.model .detaildata .sotnvpn ul li span { + display: inline-block; + width: 110px; + font: 700 14px "Arial"; + color: #3fa8eb; + vertical-align: middle; +} +/* site Detail */ +.model .detaildata .site .siteDetail { + position: fixed; + z-index: 10; + left: 260px; + top: 50px; + background-color: #fff; + box-shadow: 0px 0px 20px #000; + width: 50%; + max-height: 85%; + border-radius: 5px; + overflow-y: auto; +} +.model .detaildata .site h3 { + margin: 0; + height: 30px; + font: 700 16px/30px "Arial"; + padding-left: 10px; + background-color: #ddd; +} +.model .detaildata .site h3 .closeDetail { + cursor: pointer; + padding: 2px 15px; + color: #3fa8eb; +} +.model .detaildata .site ul li { + padding-left: 5px; + display: inline-block; + height: 35px; + width: 32%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.model .detaildata .site ul li span { + display: inline-block; + width: 95px; + font: 700 14px "Arial"; + color: #3fa8eb; + vertical-align: middle; +} + +/* 图 */ +.model .chart { + width: 40%; + padding: 10px; + height: 100%; + border-left: 10px solid #f3f3f3; +} +.model .chart #detailChart { + position: relative; + width: 100%; + height: 80%; + margin-top: 20px; +} +.model .chart #detailChart .cloudcounty { + cursor: pointer; +} + +.model .chart #detailChart .couldDetail { + position: absolute; + left: 50%; + top: 10px; + width: 80%; + transform: translate(-50%,0); + height: 160px; + background-color: #aaa; + border-radius: 5px; + box-shadow: 0px 0px 20px #000; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html new file mode 100644 index 00000000..33d56eb9 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html @@ -0,0 +1,336 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> Services List </h3> +<hr> +<div class="model"> + <!-- 详情数据 --> + <button class="back" nz-button (click)="goback()"><span><i class="anticon anticon-rollback"></i></span></button> + <div class="detaildata fl"> + <h3 class="title">{{detailParams.sotnvpnSer['service-instance-name']}} Instance Detail</h3> + <div class="sotnvpn clearfix"> + <h3>SOTN VPN Info</h3> + <ul> + <li><span>Name:</span> {{sotnVpnInfo.name}}</li> + <li><span>Description:</span> {{sotnVpnInfo.description}} </li> + <li><span>Start Time:</span> {{sotnVpnInfo.startTime}}</li> + <li><span>End Time:</span> {{sotnVpnInfo.endTime}} </li> + <li><span>COS:</span> {{sotnVpnInfo.COS}}</li> + <li><span>Reroute Enable:</span> {{sotnVpnInfo.reroute}} </li> + <li><span>Service Level Specification:</span> {{sotnVpnInfo.SLS}}</li> + <li><span>DualLink:</span> {{sotnVpnInfo.dualLink}} </li> + <li><span>CIR:</span> {{sotnVpnInfo.CIR}}</li> + <li><span>EIR:</span> {{sotnVpnInfo.EIR}} </li> + <li><span>CBS:</span> {{sotnVpnInfo.CBS}}</li> + <li><span>EBS:</span> {{sotnVpnInfo.EBS}} </li> + <li><span>Color Aware:</span> {{sotnVpnInfo.colorAware}}</li> + <li><span>Coupling Flag:</span> {{sotnVpnInfo.couplingFlag}} </li> + </ul> + </div> + + <div class="site"> + <h3>Site List</h3> + <nz-table #nzTable [nzData]="siteList" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="15%"> Name </th> + <th nzWidth="20%"> Description </th> + <th nzWidth="15%"> Post Code </th> + <th nzWidth="15%"> Address </th> + <th nzWidth="15%"> VLAN </th> + <th nzWidth="10%"> 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.baseNames.name}}</td> + <td>{{item.baseNames.description}}</td> + <td>{{item.baseNames.postcode}}</td> + <td>{{item.baseNames.address}}</td> + <td>{{item.baseNames.vlan}}</td> + <td (click)="showSiteDetail(item)"> <a href="javascript:;">Detail</a> </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + <div class="siteDetail" *ngIf="siteDetail"> + <h3>Site_Enterprise Service <span class="closeDetail fr" (click)="siteDetail=false">X</span></h3> + <ul> + <li><span>Name:</span> {{ siteDetailData.baseNames.name}}</li> + <li><span>Description:</span> {{ siteDetailData.baseNames.description }} </li> + <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Type:</span> {{ siteDetailData.baseNames.type }} </li> + <li *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"><span>Role:</span> {{ siteDetailData.baseNames.role }} </li> + <li><span>PostCode:</span> {{ siteDetailData.baseNames.postcode }} </li> + <li><span>VLAN:</span> {{ siteDetailData.baseNames.vlan }}</li> + <li><span>Address:</span> {{ siteDetailData.baseNames.address }}</li> + <li><span>ClientSignal:</span> {{ siteDetailData.baseNames.clientSignal }}</li> + <li><span>ControlPoint:</span> {{ siteDetailData.baseNames.controlPoint }}</li> + <li><span>Emails:</span> {{ siteDetailData.baseNames.emails }}</li> + <li><span>GroupName:</span> {{ siteDetailData.baseNames.groupName }}</li> + <li><span>GroupRole:</span> {{ siteDetailData.baseNames.groupRole }}</li> + <li><span>Latitude:</span> {{ siteDetailData.baseNames.latitude }}</li> + <li><span>Longitude:</span> {{ siteDetailData.baseNames.longitude }}</li> + <li><span>SotnVpnName:</span> {{ siteDetailData.baseNames.sotnVpnName }}</li> + </ul> + <div *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"> + <h3>CPE</h3> + <ul> + <li><span>Name:</span> {{siteDetailData.cpeNames.device_name}}</li> + <li><span>Version:</span> {{ siteDetailData.cpeNames.device_version }} </li> + <li><span>ESN:</span> {{ siteDetailData.cpeNames.device_esn }} </li> + <li><span>Class:</span> {{ siteDetailData.cpeNames.device_class }} </li> + <li><span>System IP:</span> {{ siteDetailData.cpeNames.device_systemIp }} </li> + <li><span>Vendor:</span> {{ siteDetailData.cpeNames.device_vendor }}</li> + <li><span>Type:</span> {{ siteDetailData.cpeNames.device_type }}</li> + </ul> + <h3>WAN Port</h3> + <nz-table #nzTable [nzData]="siteDetailData.wanportNames" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="15%"> Name </th> + <th nzWidth="20%"> Description </th> + <th nzWidth="15%"> PortType </th> + <th nzWidth="15%"> PortNumber </th> + <th nzWidth="15%"> IPAddress </th> + <th nzWidth="10%"> 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.sitewanport_name}}</td> + <td>{{item.sitewanport_description}}</td> + <td>{{item.sitewanport_portType}}</td> + <td>{{item.sitewanport_portNumber}}</td> + <td>{{item.sitewanport_ipAddress}}</td> + <td (click)="showWanportDetail(item)"> <a href="javascript:;">Detail</a> </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + <nz-modal [(nzVisible)]="wanPortModal" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()"> + <ng-template #modalTitle> + WAN Port Detail + </ng-template> + + <ng-template #modalContent> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Name </span> {{wanPortDetail.sitewanport_name}}</p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Description: </span> {{wanPortDetail.sitewanport_description}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Type: </span> {{wanPortDetail.sitewanport_portType}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Port Number: </span> {{wanPortDetail.sitewanport_portNumber}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Ip Address: </span> {{wanPortDetail.sitewanport_ipAddress}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Provider IP Address: </span> {{wanPortDetail.sitewanport_providerIpAddress}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Transport Nerwork: </span> {{wanPortDetail.sitewanport_transportNetworkName}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Input Bandwidth: </span> {{wanPortDetail.sitewanport_inputBandwidth}} </p> + <p> <span style="color:#3fa8eb;font:700 14px 'Arial';display:inline-block;width:200px;"> Output Bandwidth: </span> {{wanPortDetail.sitewanport_outputBandwidth}} </p> + </ng-template> + + <ng-template #modalFooter> + <!-- <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button> --> + </ng-template> + </nz-modal> + </div> + + </div> + </div> + + <div class="sitegroup" *ngIf="detailParams.sotnvpnSer.Type == 'CCVPN'"> + <h3>Site_Group List</h3> + <nz-table #nzTable [nzData]="siteGroupList" + [nzLoading]="loading" + [nzShowPagination]="false" + nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO. </th> + <th nzWidth="20%"> Group Name </th> + <th nzWidth="20%"> Topology </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.name}}</td> + <td>{{item.topology}}</td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> + </div> + <!-- 图 --> + <div class="chart fr"> + + <div id="detailChart"> + <!-- <svg width="100%" height="100%"> + <line *ngFor="let item of lines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#3fa8eb;stroke-width:2"/> + <image xlink:href="./assets/images/cloud-county.png" + class="cloudcounty" + (click)="toggleClick()" + (mouseover)="hoverShowcould()" + (mouseout)="hoverHidecould()" + x="175" y="175" height="50px" width="50px"/> + <image *ngFor="let item of siteImage" + xlink:href="./assets/images/cloud-city.png" + [attr.x]="item.x" [attr.y]="item.y" height="50px" width="50px"/> + </svg> + <div class="couldDetail" *ngIf="hoverShow || clickShow"> + + </div> --> + <svg width="100%" height="100%" style="position: relative"> + <!--背景大图--> + <image xlink:href="./assets/images/bigcloud.png" + class="backgroundcloud" + width="100%" + style="position: absolute;z-index:-1"> + </image> + <!--tp,site，domain之间的连线--> + <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#FFC000; stroke-width:2"></line> + <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line> + <!--本地domain--> + <g class="clouds"> + <image xlink:href="./assets/images/domain.png" + id="domain1" + width="20%" + x="10%" y="10%" + ></image> + <text dx="12%" dy="16%" style="font-size: 14px; fill:#666;width: 20px;"> + {{vpns[0].domain}} + </text> + </g> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/domain.png" + id="domain2" + width="20%" + x="40%" y="13%" + ></image> + <text dx="43%" dy="19%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].domain}} + </text> + </g> + <!--domain1下连接的tp--> + <g class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp1" + height="16" width="20" + x="15%" y="25%" + ></image> + <text dx="18%" dy="27%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[0].sitetpname}} + </text> + </g> + <g class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp2" + height="16" width="20" + x="30%" y="10%" + ></image> + <text dx="30%" dy="6%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[0].othertpname}} + </text> + </g> + <!--domain2下连接的tp--> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp3" + height="16" width="20" + x="40%" y="10%" + ></image> + <text dx="40%" dy="9%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].othertpname}} + </text> + </g> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="./assets/images/tp.png" + class="tp" + id="tp4" + height="16" width="20" + x="43%" y="28%" + ></image> + <text dx="46%" dy="30%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].sitetpname}} + </text> + </g> + <!--外部云--> + <g class="clouds"> + <image xlink:href="./assets/images/out-domain.png" + id="extent-cloud" + height="70.8" width="120" + x="66%" y="12%" + ></image> + <text dx="68%" dy="18%" style="font-size: 14px; fill: #666;width: 20px;"> + SP Partent Network + </text> + </g> + <!--本地的2个site--> + <g class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site1" + height="59" width="100" + x="0%" y="48%" + ></image> + <text dx="2%" dy="53%" style="font-size: 14px; fill: #666;width: 20px;"> + {{localSite[0]["service-instance-name"]}} + </text> + </g> + <g *ngIf="!detailSites" class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site2" + height="59" width="100" + x="25%" y="48%" + ></image> + <text dx="26%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;"> + {{localSite[1]["service-instance-name"]}} + </text> + </g> + <!--外部的2个site--> + <g *ngIf="!detailSites" class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site3" + height="59" width="100" + x="50%" y="48%" + ></image> + <text dx="52%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;"> + {{outerSite[1]["service-instance-name"]}} + </text> + </g> + <g class="clouds"> + <image xlink:href="./assets/images/site.png" + id="site4" + height="59" width="100" + x="75%" y="48%" + ></image> + <text dx="80%" dy="54%" style="font-size: 14px; fill: #666;width: 20px;"> + {{outerSite[0]["service-instance-name"]}} + </text> + </g> + </svg> + </div> + </div> + +</div> diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts new file mode 100644 index 00000000..dc5d34d9 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CcvpnDetailComponent } from './ccvpn-detail.component'; + +describe('CcvpnDetailComponent', () => { + let component: CcvpnDetailComponent; + let fixture: ComponentFixture<CcvpnDetailComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CcvpnDetailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CcvpnDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts new file mode 100644 index 00000000..c9d60ef8 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts @@ -0,0 +1,368 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-ccvpn-detail', + templateUrl: './ccvpn-detail.component.html', + styleUrls: ['./ccvpn-detail.component.css'] +}) +export class CcvpnDetailComponent implements OnInit { + + constructor(private myhttp:MyhttpService) { } + + ngOnInit() { + // this.getDetails(); + this.dataInit(); + this.drawImages(); + } + + @Input() detailParams; + @Input() namesTranslate; + @Output() closeDetail = new EventEmitter(); + + sotnVpnInfo:any; + siteList=[]; + siteGroupList=[]; + dataInit(){ + // 循环真实参数，对比名字转换配置文件，将真实参数名字改成通用名字 + this.sotnVpnInfo = JSON.parse(this.detailParams.sotnvpnSer['input-parameters']).service.parameters.requestInputs; + for(let key in this.sotnVpnInfo){ + for(let key2 in this.namesTranslate.sotnNameTranslate){ + let partnames = this.namesTranslate.sotnNameTranslate[key2].split("_"); + if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){ + this.sotnVpnInfo[key2] = this.sotnVpnInfo[key]; + break; + } + } + } + + this.siteList = this.detailParams.siteSer.map((item)=>{ + return JSON.parse(item['input-parameters']).service.parameters.requestInputs; + }) + this.siteList.forEach((oneSite,idex)=>{ + oneSite["baseNames"]={};oneSite["cpeNames"]={};oneSite["wanportNames"]=[]; + for(let key in oneSite){ + let hasfind = false; + if(key == "baseNames" || key == "cpeNames" || key == "wanportNames"){ continue }; + for(let key2 in this.namesTranslate.siteNameTranslate.baseNames){ + if(key.endsWith(this.namesTranslate.siteNameTranslate.baseNames[key2])){ + oneSite["baseNames"][key2] = oneSite[key]; + hasfind = true; + break; + } + } + if(hasfind){ continue }; + for(let key3 in this.namesTranslate.siteNameTranslate.cpeNames){ + if(key.endsWith(this.namesTranslate.siteNameTranslate.cpeNames[key3])){ + oneSite["cpeNames"][key3] = oneSite[key]; + hasfind = true; + break; + } + } + if(hasfind){ continue }; + let wanportStartName = key.split("_")[0]; + // 先分组，后面再变换名字 + let theItem = oneSite["wanportNames"].find((item,index)=>{ + if(item){ + return Object.keys(item)[0].startsWith(wanportStartName) + } + }) + theItem?theItem[key]=oneSite[key]:oneSite["wanportNames"].push({[key]:oneSite[key]}) + } + let wanportTs = Object.values(this.namesTranslate.siteNameTranslate.wanportNames); + oneSite["wanportNames"].forEach((item)=>{ + for(let key in item){ + let newName = wanportTs.find((name)=>{ + return key.endsWith(name); + }) + newName?item[newName]=item[key]:null; + } + }) + + }) + + this.siteGroupList = this.detailParams.sdwanSer.map((item)=>{ + return JSON.parse(item['input-parameters']).service.parameters.requestInputs; + }) + this.siteGroupList.forEach((oneSiteGroup)=>{ + for(let key in oneSiteGroup){ + for(let key2 in this.namesTranslate.siteGroupNameTranslate){ + let partnames = this.namesTranslate.siteGroupNameTranslate[key2].split("_"); + if(key.startsWith(partnames[0])&&key.endsWith(partnames[1])){ + oneSiteGroup[key2] = oneSiteGroup[key]; + break; + } + } + } + }) + console.log(this.siteList) + this.drawImage(this.siteList); + } + + // site详情 + siteDetailData={baseNames:{},cpeNames:{},wanportNames:[]}; + siteDetail = false; + showSiteDetail(item){ + this.siteDetail = true; + this.siteDetailData = item; + } + + wanPortModal = false; + wanPortDetail = {}; + showWanportDetail(item){ + this.wanPortModal = true; + this.wanPortDetail = item; + } + handleCancel(){ + this.wanPortModal = false; + } + + // sitegroup详情 + + // site节点图形描绘 + // site分类，根据site查tp pnf --> allotted-resource + localSite = [];//本地site + outerSite = [];//外部site + + getSiteAResource(){ + return new Promise((res,rej)=>{ + this.detailParams.siteSer.forEach((site)=>{ + site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site); + }) + + if(this.localSite[0]["service-instance-name"].startsWith("Dc")){ + this.localSite.reverse(); + } + + if(this.outerSite[0]["service-instance-name"].startsWith("Dc")){ + this.outerSite.reverse(); + } + + // 本地site获取tp pnf + this.localSite.forEach((site)=>{ + let obj = { + customerId: this.detailParams.customer.id, + serviceType: this.detailParams.serviceType, + serviceId: site["service-instance-id"] + } + this.myhttp.getAllottedResource(obj) + .subscribe((data)=>{ + // console.log(data); + let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"}); + // console.log(resource); + let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"]; + // console.log(tps_pnfs); + // site.pnfname = tps_pnfs.find((item)=>{return item["relationship-key"]=="pnf.pnf-name"})["relationship-value"]; + site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"]; + // // 通过pnfname获取domain（network-resource）; + // this.myhttp.getPnfDetail(site.pnfname) + // .subscribe((data2)=>{ + // // console.log(data2); + // let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"]; + // site.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"]; + // res("sites-domain"); + // }) + res("sites-domain"); + }) + }) + }) + } + //通过sotn 查vpn-id --> tp pnf --> allotted-resource + relation = {sotn:{ + name:"sotn1", + vpns:[ + { + name:"vpn1", + domain:"domain1", + site:"site1", + tps:[ + {name:"tp1",lineto:"site1"}, + {name:"tp2",lineto:"domain1"} + ] + }, + { + name:"vpn2", + domain:"domain2", + site:"site2", + tps:[ + {name:"tp3",lineto:"site2"}, + {name:"tp4",lineto:"domain2"} + ] + } + ] + }}; + + vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}]; + getSotnAresource(){ + return new Promise((res,rej)=>{ + let connectivityId = this.detailParams.sotnvpnSer["relationship-list"]["relationship"] + .find((item)=>{return item["related-to"]=="connectivity"})["relationship-data"] + .find((item2)=>{return item2["relationship-key"]=="connectivity.connectivity-id"})["relationship-value"]; + this.myhttp.getSotnConnectivity(connectivityId) + .subscribe((data)=>{ + // console.log(data); //默认一个connectivityId只能查到一个connectivity + let vpns = data.connectivity[0]["relationship-list"]["relationship"] + .filter((item)=>{ return item["related-to"]=="vpn-binding"}) + .map((item2)=>{return item2["relationship-data"].find((item3)=>{return item3["relationship-key"]=="vpn-binding.vpn-id"})["relationship-value"]}); + console.log(vpns); + this.detailParams.sotnvpnSer.vpns = vpns.map((item)=>{return {name:item}}); + this.detailParams.sotnvpnSer.vpns.forEach((vpn,index)=>{ + this.myhttp.getVpnBinding(vpn.name) + .subscribe((data2)=>{ + // console.log(data2); //默认一个vpnid只能查到一个vpnbinding + let tps_pnfs = data2["vpn-binding"][0]["relationship-list"]["relationship"] + .filter((item)=>{ return item["related-to"]=="p-interface"}) + .map((item2)=>{return item2["relationship-data"]}); + let pnfname = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="pnf.pnf-name"})["relationship-value"]}); + let tpnames = tps_pnfs.map((item)=>{return item.find((item2)=>{return item2["relationship-key"]=="p-interface.interface-name"})["relationship-value"]}); + // console.log(pnfname) + // console.log(tpnames) + vpn.tps = tpnames; + // let thissite = this.localSite.find((item)=>{return item.pnfname == pnfname[0]}); //查找site上pnfname相同的项，即同domain + // console.log(thissite); + // thissite.tpsotnname = tpsotnnames.find((item)=>{return item!=thissite.tpsitename}); + // 通过pnfname获取domain（network-resource）; + this.myhttp.getPnfDetail(pnfname[0]) + .subscribe((data2)=>{ + // console.log(data2); + let networkRelation = data2["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="network-resource"})["relationship-data"]; + vpn.domain = networkRelation.find((item)=>{return item["relationship-key"]=="network-resource.network-id"})["relationship-value"]; + if(this.localSite[index]){ + vpn.sitetpname = this.localSite.find((site)=>{return tpnames.includes(site.tpsitename)}).tpsitename; + console.log(tpnames) + console.log(vpn.sitetpname) + vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname}); + }else{ + vpn.sitetpname = this.localSite[0].tpsitename; + vpn.othertpname = tpnames.find((name)=>{return name != vpn.sitetpname}); + } + + this.vpns = this.detailParams.sotnvpnSer.vpns; + res("sotn-domain"); + // console.log(vpn); + }) + + }) + }) + }) + }) + } + + drawImages(){ + + this.getSiteAResource().then((data)=>{ + console.log(data); + return this.getSotnAresource() + }).then((data)=>{ + console.log(data); + console.log(this.localSite); + this.detailSites = this.detailParams.sotnvpnSer.Type == "CCVPN"?false:true; + this.detailParams.sotnvpnSer.Type == "CCVPN"?null:this.detailLines.length = this.detailLines.length-3; + // 当只有一个vpn的时候 + if(this.detailParams.sotnvpnSer.Type == "CCVPN" && this.vpns.length == 1){ + let line = { + "x1":"32%","y1":"12%","x2":"32%","y2":"50%"//t2--site2 当本地云只有一朵的时候，tp2与本地site2相连 + } + this.detailLines.length = this.detailLines.length-6; + this.detailLines.push(line); + // 当本地site有两个的时候 + if(this.localSite.length==2){ + let line = { + "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3 + } + this.detailLines.push(line); + } + // 当外部site有两个的时候 + if(this.outerSite.length==2){ + let line = { + "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3 + } + this.detailLines.push(line); + } + } + }) + // let allnodes = [this.getSiteAResource(),this.getSotnAresource()]; + // Promise.all(allnodes).then((data)=>{ + // console.log(data) + // console.log(this.localSite); + + + // }) + } + + detailSites=false; + detailLines=[ //详情拓扑图连线的坐标 + { + "x1":"5%","y1":"50%","x2":"17%","y2":"25%"//site1--tp1 + }, + { + "x1":"22%","y1":"20%","x2":"17%","y2":"25%"//tp1--domian1 + } + , + { + "x1":"26%","y1":"15%","x2":"30%","y2":"12%"//domian1--tp2 + }, + + { + "x1":"80%","y1":"20%","x2":"85%","y2":"50%"//out-domain--site4 + }, + + { + "x1":"50%","y1":"22%","x2":"45%","y2":"28%"//tp4--domian2 + }, + { + "x1":"40%","y1":"11%","x2":"50%","y2":"15%"//domian2--tp3 + }, + { + "x1":"32%","y1":"11%","x2":"41%","y2":"11%"//tp2--tp3 + }, + + { + "x1":"45%","y1":"30%","x2":"35%","y2":"50%"//site2--tp4 + }, + { + "x1":"75%","y1":"20%","x2":"60%","y2":"50%"//out-domain--site3 + }, + { + "x1":"40%","y1":"52%","x2":"52%","y2":"52%"//site2--site3 + } + ]; + lines=[]; + siteImage=[]; + drawImage(sitelist){ + let cx = 200; + let cy = 200; + let r = 150; + let startAngle = -210 * (Math.PI/180); + let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1; + + this.lines = sitelist.map((item,index)=>{ + let x = cx + Math.cos(startAngle - step*index)*r; + let y = cy + Math.sin(startAngle - step*index)*r; + return {img:"line",x1:cx,y1:cy,x2:x,y2:y} + }) + this.siteImage = this.lines.map((item)=>{ + return {img:"site",x:item.x2 - 25,y:item.y2 - 25} + }) + console.log(this.siteImage,this.lines) + } + clickShow = false; + hoverShow = false; + toggleClick(){ + this.clickShow = !this.clickShow; + } + hoverShowcould(){ + this.hoverShow = true; + } + hoverHidecould(){ + this.hoverShow = false; + } + + + + goback(){ + this.closeDetail.emit(); + } + +} diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css new file mode 100644 index 00000000..2ac88d32 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.css @@ -0,0 +1,97 @@ +/* + Copyright (C) 2018 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. +*/ +.outer{ + width: 20%; + float: left; +} +.content{ + width: 100px; + margin: 30px 0; +} + +.tips{ + margin: 20px auto; + padding:0 5px; + width: 100%; + height: 40px; + line-height: 40px; + border: 1px gainsboro solid; + border-radius: 10px; +} +.submit,.delete,.add{ + padding:10px 20px; + width: 100px; + margin: 0 auto; + background: dodgerblue; + border: none; + border-radius: 10px; + color: #fff; + cursor: pointer; +} +/*.line-click{*/ + /*cursor: pointer !important;*/ +/*}*/ + + +#tpContainer{ + width:100%; + /*height: 80%;*/ + float: left; +} +.model { + padding: 15px; + height: 100%; + width: 100%; +} +.model .creation { + /*margin-top:-4%;*/ + background-color: #fff; + /*float: left;*/ + width: 20%; + position: absolute; + right: 1%; + border-radius: 5px; + box-shadow: 0 0 10px #9e9e9e; + padding: 10px; + height: 80vh; + overflow: auto; +} +.model .creation .v_color{ + height: 17px; + float: left; + margin-left: -11px; + margin-top: 5px; + border-left: 4px #3fa8eb solid; +} +.w_font4{ + font-weight: 400; +} +.title-span{ + margin-left: 10%; + font-size: 12px; +} +.red-span{ + color: red; + margin-right: 3px; +} +.choose li nz-select,.choose li input{ + display: block !important; + margin: 5px 10% 15px; + width: 80%; +} + + + diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html new file mode 100644 index 00000000..4fbe4875 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.html @@ -0,0 +1,135 @@ +<!-- + Copyright (C) 2018 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"> + <!--图表--> + <div class="tips"> + 请根据以下操作，来配置您的网络 + </div> + <button nz-button nzType="primary" style="margin-top: 2px;display: block" (click)="showForm()">Add Link</button> + <div id="tpContainer" style="overflow: hidden;"></div> + <!--弹出框--> + <div class="creation" id="d3_form" *ngIf="isVisible==true"> + <span class="v_color"></span> + <h3 class="w_font4">Set Attribtes</h3> + <ul class="choose"> + <li> + <span class="title-span"><span class="red-span">*</span>Link Name </span> + <input nz-input [(ngModel)]="linkName" maxlength="20"> + </li> + </ul> + <h4>Left Port</h4> + <ul class="choose"> + <li> + <span class="title-span"><span class="red-span">*</span>Network </span> + <nz-select [(ngModel)]="networkVal1" nzShowSearch nzAllowClear (ngModelChange)="network1Change($event)"> + <nz-option *ngFor="let option of networkOption" [nzLabel]="option.network" [nzValue]="option.network"></nz-option> + </nz-select> + </li> + <li> + <span class="title-span"> <span class="red-span">*</span>Node </span> + <nz-select [(ngModel)]="selectedNode1" nzShowSearch nzAllowClear (ngModelChange)="node1Change($event)"> + <nz-option *ngFor="let node of nodeOption1[networkVal1]" [nzValue]="node" [nzLabel]="node"></nz-option> + </nz-select> + </li> + <li> + <span class="title-span"><span class="red-span">*</span>Terminal Point </span> + <!-- <input nz-input id="city-one" value=""> --> + <nz-select [(ngModel)]="selecteTpName1" nzShowSearch nzAllowClear> + <nz-option *ngFor="let tp of tpOption1" [nzValue]="tp" [nzLabel]="tp"></nz-option> + </nz-select> + </li> + </ul> + <h4>Right Port</h4> + <label nz-checkbox [(ngModel)]="inputshow">Partner Network</label> + <ul class="choose"> + <li> + <span class="title-span"><span *ngIf="inputshow" class="red-span">*</span>Host Url</span> + <input nz-input [(ngModel)]="cloudUrl" [disabled]='!inputshow' [attr.disabled] ='!inputshow?true:undefined'> + </li> + <li> + <span class="title-span"><span class="red-span">*</span>Network </span> + <input nz-input *ngIf="inputshow" [(ngModel)]="cloudNetwork"> + <nz-select *ngIf="!inputshow" [(ngModel)]="networkVal2" nzShowSearch nzAllowClear (ngModelChange)="network2Change($event)"> + <nz-option *ngFor="let option of networkOption" [nzLabel]="option.network" [nzValue]="option.network"> </nz-option> + </nz-select> + </li> + <li> + <span class="title-span"><span class="red-span">*</span>Node </span> + <input nz-input *ngIf="inputshow" [(ngModel)]="cloudNode"> + <nz-select *ngIf="!inputshow" [(ngModel)]="selectedNode2" nzShowSearch nzAllowClear (ngModelChange)="node2Change($event)"> + <nz-option *ngFor="let node of nodeOption1[networkVal2]" [nzValue]="node" [nzLabel]="node"></nz-option> + </nz-select> + </li> + <li> + <span class="title-span"><span class="red-span">*</span>Terminal Point </span> + <input nz-input *ngIf="inputshow" [(ngModel)]="cloudTp"> + <nz-select *ngIf="!inputshow" [(ngModel)]="selecteTpName2" nzShowSearch nzAllowClear> + <nz-option *ngFor="let tp of tpOption2" [nzValue]="tp" [nzLabel]="tp"></nz-option> + </nz-select> + </li> + </ul> + <button nz-button nzType="primary" nzSize="small" style="width: 60px;" (click)="submitForm()">OK</button> + <button nz-button nzType="default" nzSize="small" style="width: 60px;" (click)="hideForm()">Cancel</button> + </div> + <div class="creation" id="delbox" *ngIf="delBoxisVisible==true"> + <span class="v_color"></span> + <h3 class="w_font4">Set Attribtes</h3> + <ul class="choose"> + <li> + <span class="title-span">Link Name </span> + <input nz-input [(ngModel)]="delLinkname" disabled="disabled"> + </li> + </ul> + <h4>Left Port</h4> + <ul class="choose"> + <li> + <span class="title-span">Network </span> + <input nz-input [(ngModel)]="delNetwork1" disabled="disabled"> + </li> + <li> + <span class="title-span">Node </span> + <input nz-input [(ngModel)]="delNode1" disabled="disabled"> + </li> + <li> + <span class="title-span">Terminal Point </span> + <input nz-input [(ngModel)]="delTp1" disabled="disabled"> + </li> + </ul> + <h4>Right Port</h4> + <ul class="choose"> + <li *ngIf="delcloud"> + <span class="title-span">Host Url</span> + <input nz-input [(ngModel)]="delcloudUrl" disabled="disabled"> + </li> + <li> + <span class="title-span">Network </span> + <input nz-input [(ngModel)]="delNetwork2" disabled="disabled"> + </li> + <li> + <span class="title-span">Node </span> + <input nz-input [(ngModel)]="delNode2" disabled="disabled"> + </li> + <li> + <span class="title-span">Terminal Point </span> + <input nz-input [(ngModel)]="delTp2" disabled="disabled"> + </li> + </ul> + <button nz-button nzType="primary" nzSize="small" class="del-button" style="width: 90px;" (click)="delLink()" *ngIf="!delcloud">delete Link</button> + <button nz-button nzType="primary" nzSize="small" class="del-button" style="width: 90px;" (click)="delCloudLink()" *ngIf="delcloud">delete Link</button> + <button nz-button nzType="default" nzSize="small" class="del-button" style="width: 60px;" (click)="hideForm()">Cancel</button> + </div> +</div> + diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts new file mode 100644 index 00000000..03cc5065 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.spec.ts @@ -0,0 +1,40 @@ +/* + Copyright (C) 2018 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 { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CcvpnNetworkComponent } from './ccvpn-network.component'; + +describe('CcvpnNetworkComponent', () => { + let component: CcvpnNetworkComponent; + let fixture: ComponentFixture<CcvpnNetworkComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CcvpnNetworkComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CcvpnNetworkComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts new file mode 100644 index 00000000..0174aa77 --- /dev/null +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts @@ -0,0 +1,1195 @@ +/* + Copyright (C) 2018 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, EventEmitter, OnInit, Output} from '@angular/core'; +import * as d3 from 'd3'; +import * as $ from 'jquery'; +import {networkHttpservice} from '../networkHttpservice.service'; + +@Component({ + selector: 'app-ccvpn-network', + templateUrl: './ccvpn-network.component.html', + styleUrls: ['./ccvpn-network.component.css'] +}) +export class CcvpnNetworkComponent implements OnInit { + + constructor(private myhttp: networkHttpservice) { + } + + ngOnInit() { + var thisNg = this; + thisNg.getD3Data(); + + + //本地云TP端口断开连线 ，直接点击线可删除连线 + $('#tpContainer').on('click', '.line-local', function () { + thisNg.isVisible = false; + thisNg.delBoxisVisible = true; + thisNg.delcloud = false; + + thisNg.delTp1 = $(this).attr('data-tp1'); + thisNg.delTp2 = $(this).attr('data-tp2'); + thisNg.delNode1 = $(this).attr('data-node1'); + thisNg.delNode2 = $(this).attr('data-node2'); + thisNg.delVersion = $(this).attr('data-version'); + thisNg.delLinkname = $(this).attr('data-link'); + + thisNg.delLinkIndex = $(this); + let dataD3 = thisNg.d3Data; + for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network + if (dataD3[p]['name'] == thisNg.delTp1) { + thisNg.network.push(dataD3[p]['source']['name']); + } + if (dataD3[p]['name'] == thisNg.delTp2) { + thisNg.network.push(dataD3[p]['source']['name']); + } + } + thisNg.delNetwork1 = thisNg.network[0]; + thisNg.delNetwork2 = thisNg.network[1]; + }); + + //外部云 断开连线 ，直接点击线可删除连线 + $('#tpContainer').on('click', '.cloudline', function () { + thisNg.isVisible = false; + thisNg.delBoxisVisible = true; + thisNg.delcloud = true; + + thisNg.delTp1 = $(this).attr('data-tp1'); + thisNg.delTp2 = $(this).attr('data-tp2'); + thisNg.delNode1 = $(this).attr('data-node1'); + thisNg.delNode2 = $(this).attr('data-node2'); + thisNg.delVersion = $(this).attr('data-version'); + thisNg.delNetwork1 = $(this).attr('data-network'); + thisNg.delNetwork2 =$(this).attr('data-cloudnetwork'); + thisNg.delcloudUrl =$(this).attr('data-url'); + thisNg.delLinkname = $(this).attr('data-link'); + thisNg.aaiId =$(this).attr('data-aaiid'); + thisNg.getCloudUrl(thisNg.aaiId,thisNg); + }); + } + + addLinkDisabled = true; + isVisible = false; + outCloudShow = false; + inputshow = false; + delBoxisVisible = false; + + d3Data = [];//D3渲染需要的数据 + logicalLinks = [];//logicalLinks接口返回的已有的连线数据 + linkName=null;//连线的名字link-name + networkOption = [];//表单network下拉选框填充的数据 + nodeOption1 = {};//node下拉选框填充的数据 + tpOption1 = [];//node下拉选框填充的数据 + tpOption2 = [];//node下拉选框填充的数据 + networkVal1 = null;//network1下拉框默认数据 + networkVal2 = null;//network2下拉框默认数据 + selectedNode1 = null;//node1下拉框默认数据 + selectedNode2 = null;//node2下拉框默认数据 + selecteTpName1 = null;//TP1下拉框默认数据 + selecteTpName2 = null;//TP2下拉框默认数据 + cloudUrl = null;//外部云URL地址 + cloudNetwork = null;//外部云network名称 + cloudNode = null;//外部云Node名称 + cloudTp = null;//外部云Tp名称 + dataCloud=[];//外部云的信息 + dataCloudLink=[]; + aaiId=""; + charge=-200; + + //删除连线时 右侧框显示的数据 + delLinkname=null; + delNetwork1 = null; + delNode1 = null; + delTp1 = null; + delcloudUrl = null; + delNetwork2 = null; + delNode2 = null; + delTp2 = null; + delVersion = null; + delLinkIndex = null; + network = []; + delcloud = false; + + winWidth = $('.content').width(); + winHeight = $('.content').height(); + + + imgmap = { + '1': '../assets/images/cloud-county1.png', + '2': '../assets/images/cloud-city1.png', + '3': '../assets/images/cloud-out.png', + }; + tpoption = { + container: '#tpContainer', + data: '', + width: 1000, + height: this.winHeight + }; + + showForm(): void { + if (this.addLinkDisabled == false) { + this.isVisible = true; + this.delBoxisVisible = false; + } + } + + hideForm(): void { + this.isVisible = false; + this.delBoxisVisible = false; + this.linkName=null; + this.networkVal1 = null;//初始化network1下拉框默认数据 + this.networkVal2 = null;//初始化network2下拉框默认数据 + this.selectedNode1 = null;//初始化node1下拉框默认数据 + this.selectedNode2 = null;//初始化node2下拉框默认数据 + this.selecteTpName1 = null;//初始化TP1下拉框默认数据 + this.selecteTpName2 = null;//初始化TP2下拉框默认数据 + // this.localUrl=null;//本地云URL地址 + this.cloudUrl = null;//外部云URL地址 + this.cloudNetwork = null;//外部云network名称 + this.cloudNode = null;//外部云Node名称 + this.cloudTp = null;//外部云Tp名称 + } + + + tpName=null; + tpNameStyle = { + 'display':'none', + 'left':'0', + 'top':'0' + }; + showtp($event,item){ + console.log(111111111) + this.tpName = item; + this.tpNameStyle.display = 'block'; + } + movetp($event,item){ + this.tpNameStyle.left = $event.clientX + "px"; + this.tpNameStyle.top = $event.clientY - 35 + "px"; + } + hidetp($event){ + this.tpNameStyle.display = 'none'; + } + + //获取云图数据 + getD3Data() { + this.myhttp.getNetworkD3Data() + .subscribe((data) => { + if(data.length==0){ + this.addLinkDisabled = false; + return; + }; + for(let ii=0;ii<data.length;ii++){ + if(data[ii]["aaiId"]!=""){ + this.dataCloud=data.splice(ii,1) + } + } + for (var i = 0; i < data.length; i++) { + let name1 = {}, name2 = {}; + let nodess = []; + name1['name'] = name2['network'] = data[i]['networkId']; + name1['type'] = '1'; + name1['source'] = i; + this.d3Data.push(name1); + for (let c = 0; c < data[i]["pnfs"].length; c++) { + nodess.push(data[i]['pnfs'][c]['pnfName']); + this.nodeOption1[name2['network']] = nodess; + } + this.networkOption.push(name2); + } + console.log(this.networkOption) + for (var i = 0; i < data.length; i++) { + let tp_length = data[i]['tps'].length; + for (var h = 0; h < tp_length; h++) { + let name2 = {}; + let interface_name = data[i]['tps'][h]['interface-name']; + name2['name'] = interface_name; + name2['type'] = '2'; + name2['source'] = i; + this.d3Data.push(name2); + } + } + for (let b = 0; b < this.d3Data.length; b++) { + this.d3Data[b]['target'] = b; + } + this.initPosition(this.d3Data); + setTimeout(this.render(this.d3Data, this.imgmap,this.dataCloud,this.charge,data),0) + }, (err) => { + console.log(err); + }); + + } + + //获取云图初始的连线状态 getlogicalLinksData + getLinksData() { + this.myhttp.getLogicalLinksData() + .subscribe((data) => { + console.log(data["status"]) + if (data["status"]=="FAILED") { + return; + } + for (let i = 0; i < data["logical-link"].length; i++) { + if(data["logical-link"][i]["relationship-list"]["relationship"].length>2){ + this.dataCloudLink=data["logical-link"].splice(i,1); + } + } + console.log(this.dataCloudLink) + for (let i = 0; i < data["logical-link"].length; i++) { + let textval = []; + textval[0] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1 + textval[1] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2 + textval[2] = data['logical-link'][i]['resource-version'];//version + textval[3] = data['logical-link'][i]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1 + textval[4] = data['logical-link'][i]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2 + textval[5] = data['logical-link'][i]['operational-status']; + textval[6] = data['logical-link'][i]['link-name']; + this.logicalLinks.push(textval); + this.chose(textval); + } + if(this.dataCloudLink.length>0){ + this.getcloudLine(this.dataCloudLink) + } + }, (err) => { + console.log(err); + }); + } + + //D3云图渲染 + render(nodes, imgmap,dataCloud,charge,dataD3) { + var thiss = this; + var _this = this.tpoption, + width = null, + height = _this.height; + if (_this.width > 800) { + width = _this.width; + } else { + width = 800; + } + + var str=""; + for(var i=0;i<10;i++){ + str+="<div>这是div"+i+"</div>" + } + + if(dataD3.length<=4){ + charge=-850; + }else if(dataD3.length>4 && dataD3.length<=6) { + charge=-700; + }else if(dataD3.length>6 && dataD3.length<=10) { + charge=-600; + }else { + charge=-150; + } + var svg = d3.select(_this.container).append('svg') + .attr('width', width) + .attr('height', height) + .attr('id', 'content-svg') + .style('pointer-events', 'all'), + graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'), + + _g_nodes = graph.selectAll('g.node') + .data(nodes) + .enter() + .append('g') + .style('display', function (d) { + var display = 'block'; + switch (d.type) { + case '1': + display = 'none'; + break; + case '2': + display = 'none'; + break; + default: + break; + } + return display; + }) + .style('cursor', 'pointer') + .attr('class', 'node'), + + _g_lines = graph.selectAll('line.line') + .data(nodes) + .enter() + .append('g') + .style('display', 'none') + .attr('class', 'line'); + + + _g_lines.append('line') + .style('stroke', '#93c62d' + ) + .style('stroke-width', 2); + + _g_nodes.append('image') + .attr('width', function (d) { + var width = 40; + switch (d.type) { + case '1': + width = 4.4 * width; + break; + case '2': + width = 0.12 * width; + break; + default: + break; + } + return width; + }) + .attr('height', function (d) { + var height = 20; + switch (d.type) { + case '1': + height = 3.5 * height; + break; + case '2': + height = 0.2 * height; + break; + default: + break; + } + return height; + }) + .attr('xlink:href', function (d) { + return imgmap[d.type]; + }); + + _g_nodes.append('text') + .text(function (d) { + return d.name; + }) + .style('transform', function (d) { + var x = null; + var y = null; + switch (d.type) { + case '1': + x = 7; + y = -7; + break; + case '2': + x = 1; + y = -2; + break; + default: + break; + } + return 'translate(' + x + '%,' + y + '%)'; + }) + .style('font-size', function (d) { + var size = 14; + switch (d.type) { + case '1': + size = 14; + break; + case '2': + size = 12; + break; + default: + break; + } + return size; + }) + .style('fill', function (d) { + var color = '#666'; + switch (d.type) { + case '1': + color = '#666'; + break; + case '2': + color = '#666'; + break; + default: + break; + } + return color; + }) + .style('font-weight', '500'); + + + //线上添加自定义属性 + _g_lines.each(function (d, i) { + var _this = d3.select(this); + if (d.name) { + _this.attr('data-text', d.name); + } + }); + var force = d3.layout.force() + .size([1000,this.winHeight]) + .linkDistance(5) + // .theta(0) + .charge(charge) + .nodes(nodes) + .links(nodes) + .start(); + // let distanceMax2=1; + // force.distanceMax = function(_) { + // return arguments.length ? (distanceMax2 = _ * _, force) : Math.sqrt(distanceMax2); + // }; + //添加拖拽行为 + // _g_nodes.call(this.getDragBehavior(force)); + + + force.on('tick', function (d) { + nodes.forEach(function(d,i){ + + d.x = d.x - 25 < 0 ? 25 : d.x ; + d.x = d.x + 25 > width ? width - 25 : d.x ; + d.y = d.y - 15 < 0 ? 15 : d.y ; + d.y = d.y + 15> height ? height - 15 : d.y ; + }); + if(force.alpha()<=0.1){ + + + _g_nodes.style('display', function (d) { + + + var display = 'block'; + switch (d.type) { + case '1': + display = 'block'; + break; + case '2': + display = 'none'; + break; + default: + break; + } + return display; + }); + + _g_lines.select('line') + .attr('x1', function (d) { + return d.source.x; + }) + .attr('y1', function (d) { + return d.source.y; + }) + .attr('x2', function (d) { + return d.target.x; + }) + .attr('y2', function (d) { + return d.target.y; + }); + + _g_nodes.attr('transform', function (d) { + // console.log(d) + // if(d["type"]==1){ + // d["x"]=400; + // d["y"]=400; + // }else { + // d["x"]=d["x"]; + // d["y"]=d["y"] + // } + var image = d3.select(this).select('image')[0][0], + halfWidth = parseFloat(image.attributes[0]['value']) / 2, + halfHeight = parseFloat(image.attributes[1]['value']) / 2; + + + return 'translate(' + (d.x - halfWidth) + ',' + (d.y - halfHeight) + ')'; + }); + + _g_nodes.select('text').attr('dy', function (d) { + var image = this.previousSibling, + height = parseFloat(image.attributes[1]['value']), + fontSize = 12; + return height + 1.5 * fontSize; + }); + + + } + + }); + + force.on('end', function () { + + force.stop(); + if(dataCloud.length>0){ + thiss.getoutCloud(dataCloud,imgmap); + } + thiss.getLinksData(); + thiss.addLinkDisabled = false; + }); + + }; + + //拓扑图拖拽效果 + getDragBehavior(force) { + + return d3.behavior.drag() + .origin(function (d) { + return d; + }) + .on('dragstart', dragstart) + .on('drag', dragging) + .on('dragend', dragend); + + function dragstart(d) { + d3.event.sourceEvent.stopPropagation(); + d3.select(this).classed('dragging', true); + force.start(); + } + + function dragging(d) { + d.x = d3.event.x; + d.y = d3.event.y; + } + + function dragend(d) { + d3.select(this).classed('dragging', false); + } + + } + + //初始化节点位置 + initPosition(datas) { + let origin = [this.tpoption.width / 2, this.tpoption.height / 2]; + let points = this.getVertices(origin, Math.min(this.tpoption.width/2, this.tpoption.height/2), datas.length); + datas.forEach((item, i) => { + item.x = points[i].x; + item.y = points[i].y; + }); + } + + //根据多边形获取定位点 + getVertices(origin, r, n) { + if (typeof n !== 'number') return; + var ox = origin[0]; + var oy = origin[1]; + var angle = 30 * n / n; + var i = 0; + var points = []; + var tempAngle = 0; + while (i < n) { + tempAngle = (i * angle * Math.PI) / 180; + points.push({ + x: ox - r * Math.sin(tempAngle), + y: oy - r * Math.cos(tempAngle), + }); + i++; + } + return points; + } + + //渲染外部云 + getoutCloud(dataCloud,imgmap) { + var _this = this, + width; + let networkId=dataCloud[0]["networkId"]; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + var svg = d3.select('#content-svg'); + svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)'); + var out = d3.select('#out'); + out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']); + out.append('text').text(networkId) + .style('transform', 'translate(0，0)') + .style('font-size', '16') + .style('font-weight', '400') + .attr('dx', '40') + .attr('dy', '70') + .style('fill', '#666'); + } + + //外部云连接 + getcloudLine(dataCloudLink) { + let textval = []; + textval[0] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][1]['relationship-value'];//tp1 + textval[1] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][1]['relationship-value'];//tp2 + textval[2] = dataCloudLink[0]['resource-version'];//version + textval[3] = dataCloudLink[0]['relationship-list']['relationship'][0]['relationship-data'][0]['relationship-value'];//node1 + textval[4] = dataCloudLink[0]['relationship-list']['relationship'][1]['relationship-data'][0]['relationship-value'];//node2 + textval[5] = dataCloudLink[0]['operational-status'];//status + textval[6] = dataCloudLink[0]['relationship-list']['relationship'][2]['relationship-data'][0]['relationship-value'];//aaiId + textval[7] =this.dataCloud[0]["networkId"]; + console.log(this.dataCloud); + let dataD3=this.d3Data; + for (let p = 0; p < dataD3.length; p++) {//判断两个tp端口分别属于哪个Domain network + if (dataD3[p]['name'] == textval[0]) { + textval[8] =dataD3[p]['source']['name'];//network1 + } + } + textval[9] =dataCloudLink[0]["link-name"]; + + let lines_json = {}; + var _this = this, + width; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + for (let i = 0; i < $(".node").length; i++) { + if ($('.node').eq(i).find('text').html() == textval[0]) { + //获取二级的x,y坐标 + $('.node').eq(i).show(); + var translates = $('.node').eq(i).css('transform'); + lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); + lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); + lines_json['x2'] = width - 100; + lines_json['y2'] = 100; + } + } + var x1 = lines_json['x1']; + var y1 = lines_json['y1']; + var x2 = lines_json['x2']; + var y2 = lines_json['y2']; + var color='#14bb58'; + if(textval[5]=="up"){ + color='#14bb58'; + }else { + color='red'; + } + var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>"; + var svg = d3.select('#graph'); + $(".cloudline").remove(); + $('#graph').prepend(line); + $('.cloudline').attr({ + x1: x1 + 100, + y1: y1 + 10, + x2: x2, + y2: y2, + 'data-tp1': textval[0], + 'data-tp2': textval[1], + 'data-version': textval[2], + 'data-node1':textval[3], + 'data-node2':textval[4], + 'data-network':textval[8], + 'data-cloudnetwork':textval[7], + 'data-url':"", + 'data-aaiid':textval[6], + "data-link":textval[9] + }); + svg.html(svg.html()); + } + + //查询外部云host url地址 + getCloudUrl(aaiId,thisNg){ + this.myhttp.queryCloudUrl(aaiId) + .subscribe((data) => { + thisNg.delcloudUrl=data["service-url"]; + }, (err) => { + console.log(err); + }); + } + + + //右侧表单下拉选框数据填充 三级联动 + //Left Port + network1Change(value: string): void { + this.selectedNode1 = this.nodeOption1[value][0]; + this.getPInterfaces1(); + } + + node1Change(): void { + this.getPInterfaces1(); + } + + //获取指定node下的TP数据 + getPInterfaces1() { + let params = { + pnfName: this.selectedNode1, + }; + this.myhttp.getPInterfacesData1(params) + .subscribe((data) => { + this.tpOption1 = []; + for (let i = 0; i < data.length; i++) { + let tpName = data[i]['interface-name']; + this.tpOption1.push(tpName); + } + this.selecteTpName1 = this.tpOption1[0]; + }, (err) => { + // console.log(err); + }); + } + + //Right Port + network2Change(value: string): void { + this.selectedNode2 = this.nodeOption1[value][0]; + this.getPInterfaces2(); + } + + node2Change(): void { + this.getPInterfaces2(); + } + + //获取指定node下的TP数据 + getPInterfaces2() { + let params = { + pnfName: this.selectedNode2, + }; + this.myhttp.getPInterfacesData2(params) + .subscribe((data) => { + this.tpOption2 = []; + for (let i = 0; i < data.length; i++) { + let tpName = data[i]['interface-name']; + this.tpOption2.push(tpName); + } + this.selecteTpName2 = this.tpOption2[0]; + }, (err) => { + // console.log(err); + }); + } + + //提交表单，连线 + submitForm(): void { + //当页面ONAP未选中，即本地云端TP连线 + var _thiss = this; + if (this.inputshow == false) { + if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.networkVal2 == null || this.selectedNode2 == null || this.selecteTpName2 == null) { + alert('服务端口不能为空，请选择端口信息'); + return; + } else if (this.networkVal1 == this.networkVal2) { + alert('同一云服务下的TP端口不能相连！'); + return; + } + let tp_links = [], + tp1 = this.selecteTpName1, + tp2 = this.selecteTpName2; + for (let i = 0; i < $(".line-local").length; i++) { + let data_text1 = $('.line-local').eq(i).attr('data-tp1'); + let data_text2 = $('.line-local').eq(i).attr('data-tp2'); + tp_links.push(data_text1); + tp_links.push(data_text2); + } + if (tp_links.indexOf(tp1) != -1 || tp_links.indexOf(tp2) != -1) { + alert('此端口号连线已存在！'); + return; + } + this.createTpLinks(); + + } else { + //当页面ONAP选中，即创建外部云，连线 + if (this.linkName == null || this.networkVal1 == null || this.selectedNode1 == null || this.selecteTpName1 == null || this.cloudUrl == null || this.cloudNetwork == null || this.cloudNode == null || this.cloudTp == null) { + alert('服务端口信息不能为空，请填写完整的端口信息'); + return; + } + let tp_links = [], + tp1 = this.selecteTpName1; + for (let i = 0; i < $(".line-local").length; i++) { + let data_text1 = $('.line-local').eq(i).attr('data-tp1'); + tp_links.push(data_text1); + } + if (tp_links.indexOf(tp1) != -1) { + alert('此端口号连线已存在！'); + return; + } + Promise + .all([this.createCloudNetwork(), this.createPnfs(), this.createCloudTp(), this.createCloudLinks()]) + .then(function (results) { + console.log(results); + if (results.indexOf('FAIL') == -1) { + // _thiss.queryOutCloudLink(); + _thiss.outCloudShow = true; + _thiss.outCloud(_thiss.imgmap); + setTimeout(_thiss.cloudLine(_thiss.networkVal1, _thiss.selectedNode1, _thiss.selecteTpName1, _thiss.cloudUrl, _thiss.cloudNetwork, _thiss.cloudNode, _thiss.cloudTp, 121211,"up",_thiss.linkName), 0); + _thiss.hideForm(); + } else { + console.log('失败'); + } + }); + + } + } + + //创建tp连线 调用接口createLink + createTpLinks() { + let params = { + 'link-name': this.linkName, + 'in-maint': false, + 'link-type': 'cross-link', + 'speed-value': '10000', + 'operational-status': 'up', + 'relationship-list': { + 'relationship': [ + { + 'related-to': this.selecteTpName1, + 'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1 + }, + { + 'related-to': this.selecteTpName2, + 'related-link': '/aai/v13/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2 + } + ] + } + }; + this.myhttp.createLink(params) + .subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.queryAddLink(); + } + }, (err) => { + // console.log(err); + alert('系统忙，连接失败！'); + }); + } + + //创建tp连接线后马上查询新增的连线 + queryAddLink() { + let linkName=this.linkName, + selecteTpName1 = this.selecteTpName1, + selecteTpName2 = this.selecteTpName2, + selectedNode1 = this.selectedNode1, + selectedNode2 = this.selectedNode2; + let params = { + 'link-name': selecteTpName1 + '_' + selecteTpName2, + }; + this.myhttp.querySpecificLinkInfo(params) + .subscribe((data) => { + let version = data['resource-version'], + operational_status = data['operational-status']; + let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status,linkName]; + this.hideForm(); + this.chose(textval); + }, (err) => { + // console.log(err); + alert('系统忙，连接失败！'); + }); + } + + //两个TP之间的连线 坐标获取 + chose(textval) { + var lines_json = {}; + lines_json['tp1'] = textval[0]; + lines_json['tp2'] = textval[1]; + lines_json['version'] = textval[2]; + lines_json['node1'] = textval[3]; + lines_json['node2'] = textval[4]; + lines_json['status'] = textval[5]; + lines_json['linkname'] = textval[6]; + for (let i = 0; i < $(".node").length; i++) { + if ($('.node').eq(i).find('text').html() == textval[0]) { + $('.node').eq(i).show(); + //获取二级的x,y坐标 + var translates = $('.node').eq(i).css('transform'); + lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); + lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); + } + if ($('.node').eq(i).find('text').html() == textval[1]) { + $('.node').eq(i).show(); + var translates = $('.node').eq(i).css('transform'); + lines_json['x2'] = parseFloat(translates.substring(7).split(',')[4]); + lines_json['y2'] = parseFloat(translates.substring(7).split(',')[5]); + } + } + + this.addLine(lines_json); + } + + //两个TP之间的连线 连线渲染 + addLine(lines) { + let tp1 = lines.tp1; + let tp2 = lines.tp2; + let version = lines.version; + let node1 = lines.node1; + let node2 = lines.node2; + let status = lines.status; + let linkname = lines.linkname; + let x1 = lines.x1; + let y1 = lines.y1 + 5; + let x2 = lines.x2; + let y2 = lines.y2 + 5; + let color = '#14bb58'; + if (status == 'up') { + color = '#14bb58'; + } else { + color = 'red'; + } + let line = '<line class=\'line line-local \' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>'; + let svg = d3.select('#graph'); + $('#graph').prepend(line); + $('.line').first().attr({ + x1: x1, + y1: y1, + x2: x2, + y2: y2, + 'data-tp1': tp1, + 'data-tp2': tp2, + 'data-version': version, + 'data-node1': node1, + 'data-node2': node2, + "data-link":linkname + }); + svg.html(svg.html()); + } + + //创建外部云连线后，马上查询连线 + queryOutCloudLink() { + let networkVal1 = this.networkVal1, + selectedNode1 = this.selectedNode1, + selecteTpName1 = this.selecteTpName1, + cloudUrl = this.cloudUrl, + cloudNetWork = this.cloudNetwork, + cloudNode = this.cloudNode, + cloudTp = this.cloudTp, + linkname=this.linkName; + let params = { + 'link-name': linkname, + }; + this.myhttp.querySpecificLinkInfo(params) + .subscribe((data) => { + let version = data['resource-version']; + let status = data['operational-status']; + let link_name = data['link-name']; + this.outCloudShow = true; + this.outCloud(this.imgmap); + setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name), 0); + }, (err) => { + // console.log(err); + alert('系统忙，连接失败！'); + }); + } + + //新增外部云 + outCloud(imgmap) { + var _this = this, + width; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + var svg = d3.select('#content-svg'); + svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)'); + var out = d3.select('#out'); + out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']); + out.append('text').text('Partner Network') + .style('transform', 'translate(0，0)') + .style('font-size', '16') + .style('font-weight', 'bold') + .attr('dx', '40') + .attr('dy', '70') + .style('fill', '#fff'); + } + + //新增 外部云连接 + cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, version,status,link_name) { + let lines_json = {}; + var _this = this, + width; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + for (let i = 0; i < $(".node").length; i++) { + if ($('.node').eq(i).find('text').html() == networkVal1) { + //获取二级的x,y坐标 + var translates = $('.node').eq(i).css('transform'); + lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]); + lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]); + lines_json['x2'] = width - 100; + lines_json['y2'] = 100; + } + } + var x1 = lines_json['x1']; + var y1 = lines_json['y1']; + var x2 = lines_json['x2']; + var y2 = lines_json['y2']; + var color='#14bb58'; + if(status=="up"){ + color='#14bb58'; + }else { + color='red'; + } + var line = "<line class='line cloudline ' stroke='"+color+"' stroke-width='2' style='cursor:pointer'></line>"; + var svg = d3.select('#graph'); + $(".cloudline").remove(); + $('#graph').prepend(line); + $('.cloudline').attr({ + x1: x1 + 100, + y1: y1 + 10, + x2: x2, + y2: y2, + 'data-tp1': selecteTpName1, + 'data-tp2': cloudTp, + 'data-version': version, + 'data-node1':selectedNode1, + 'data-node2':cloudNode, + 'data-network':networkVal1, + 'data-cloudnetwork':cloudNetWork, + 'data-url':cloudUrl, + "data-link":link_name + }); + svg.html(svg.html()); + } + + //创建外部云，连线时调用以下4个接口:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks + createCloudNetwork() { + let _thiss = this; + let params = { + 'selflink': this.cloudUrl, + 'network-id': this.cloudNetwork, + 'provider-id': '', + 'client-id': '', + 'te-topo-id': '' + }; + var pro = new Promise(function (resolve, reject) { + //做一些异步操作 + _thiss.myhttp.createNetwrok(params) + .subscribe((data) => { + resolve(data["status"]); + }, (err) => { + console.log(err); + }); + }); + return pro; + } + + createPnfs() { + let _thiss = this; + let params= { + "pnf-name": this.cloudNode, + "pnf-id": "", + "in-maint": "", + "admin-status": "up", + "operational-status": "up", + "relationship-list": { + "relationship": { + "related-to": "network-resource", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v13/network/network-resources/network-resource/"+this.cloudNetwork, + "relationship-data": { + "relationship-key": "network-resource.network-id", + "relationship-value": this.cloudNetwork + } + } + } + }; + var pro = new Promise(function (resolve, reject) { + //做一些异步操作 + _thiss.myhttp.createNetwrok(params) + .subscribe((data) => { + resolve(data["status"]); + }, (err) => { + console.log(err); + }); + }); + return pro; + } + + createCloudTp() { + let _thiss = this; + let params= { + "interface-name": this.cloudTp, + "speed-value": "100000", + "in-maint": "true", + "network-ref": "", + "transparent": "", + "operational-status": "up", + }; + let cloudNodeName=this.cloudNode; + + var pro = new Promise(function (resolve, reject) { + //做一些异步操作 + _thiss.myhttp.createTp(params,cloudNodeName) + .subscribe((data) => { + resolve(data["status"]); + }, (err) => { + // console.log(err); + }); + }); + return pro; + } + + createCloudLinks() { + let _thiss = this; + let params={ + "link-name": this.linkName, + "in-maint": "", + "link-type": "", + "speed-value": "", + "relationship-list": { + "relationship" : [ + { + "related-to": this.selecteTpName1, + "related-link": "/aai/v13/network/pnfs/pnf/"+this.selectedNode1+"/p-interfaces/p-interface/"+this.selecteTpName1 + }, + { + "related-to": this.cloudTp, + "related-link": "/aai/v13/network/pnfs/pnf/"+this.cloudNode+"/p-interfaces/p-interface/"+this.cloudTp + } + ] + } + }; + var pro = new Promise(function (resolve, reject) { + //做一些异步操作 + _thiss.myhttp.createCloudLink(params) + .subscribe((data) => { + resolve(data["status"]); + }, (err) => { + // console.log(err); + }); + }); + return pro; + } + + //本地云TP端口 删除连线 调用接口deleteLink + delLink(): void { + let deltp1 = this.delTp1, + deltp2 = this.delTp2, + version = this.delVersion, + delLinkIndex = this.delLinkIndex; + let params = { + 'logical-link': this.delLinkname, + 'resource-version': version, + }; + this.myhttp.deleteLink(params) + .subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.delLine(deltp1, deltp2); + console.log(delLinkIndex) + delLinkIndex.remove(); + } + }, (err) => { + console.log(err); + }); + } + + delLine(val1, val2) { + for (let i = 0; i < $(".node").length; i++) { + if ($('.node').eq(i).find('text').html() == val1) { + $('.node').eq(i).hide(); + } + if ($('.node').eq(i).find('text').html() == val2) { + $('.node').eq(i).hide(); + } + } + this.delBoxisVisible = false; + } + + //外部云 删除连线 调用接口deleteCloudLine + delCloudLink() : void { + let deltp1 = this.delTp1, + deltp2 = this.delTp2, + version = this.delVersion; + let params = { + 'logical-link': this.delLinkname, + 'resource-version': version, + }; + this.myhttp.deleteLink(params) + .subscribe((data) => { + console.log(data) + if (data["status"] == 'SUCCESS') { + this.delLine(deltp1, deltp2); + $('.cloudline').remove(); + } + }, (err) => { + console.log(err); + }); + } + +} diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.html b/usecaseui-portal/src/app/components/charts/bar/bar.component.html new file mode 100644 index 00000000..a7cd0677 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.html @@ -0,0 +1,18 @@ +<!-- + Copyright (C) 2018 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. +--> +<p> + bar works! +</p> diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.less b/usecaseui-portal/src/app/components/charts/bar/bar.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.less 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 new file mode 100644 index 00000000..d979ffb6 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BarComponent } from './bar.component'; + +describe('BarComponent', () => { + let component: BarComponent; + let fixture: ComponentFixture<BarComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts new file mode 100644 index 00000000..fa9ecbbd --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-bar', + templateUrl: './bar.component.html', + styleUrls: ['./bar.component.less'] +}) +export class BarComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.html b/usecaseui-portal/src/app/components/charts/line/line.component.html new file mode 100644 index 00000000..9a43e28c --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/line/line.component.html @@ -0,0 +1,22 @@ +<!-- + Copyright (C) 2018 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 new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/line/line.component.less 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 new file mode 100644 index 00000000..afe70654 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/line/line.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LineComponent } from './line.component'; + +describe('LineComponent', () => { + let component: LineComponent; + let fixture: ComponentFixture<LineComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LineComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/charts/line/line.component.ts b/usecaseui-portal/src/app/components/charts/line/line.component.ts new file mode 100644 index 00000000..8bc8ebd8 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/line/line.component.ts @@ -0,0 +1,79 @@ +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 { + // 图形数据 + @Input() chartData; + // 初始化数据 + @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, + grid: { + left: '1%', + right: '3%', + top: '10%', + bottom: '10%', + containLabel: true + }, + xAxis: { + axisTick: { + show: false, + }, + axisLine:{ + show: false + }, + data: ['01','02','04','06','08','10','12','14','16','18','20','22','24'] + }, + yAxis: { + axisTick: { + show: false, + }, + axisLine:{ + show: false + } + }, + series : this.initData.option.series + } + } + + ngOnChanges(changes:SimpleChanges){ + + // 当有实例的时候再执行，相当于第一次不执行下面方法 + if(this.chartIntance){ + this.chartDataChange() + } + } + // 初始化图形高度 + initOpts:any; + // 折线图配置 + lineOption:any; + // 实例对象 + chartIntance:any; + // 数据变化 + 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 new file mode 100644 index 00000000..5f1e94ce --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.html @@ -0,0 +1,24 @@ +<!-- + Copyright (C) 2018 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 new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.less 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 new file mode 100644 index 00000000..528da25c --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PieComponent } from './pie.component'; + +describe('PieComponent', () => { + let component: PieComponent; + let fixture: ComponentFixture<PieComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PieComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PieComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/charts/pie/pie.component.ts b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts new file mode 100644 index 00000000..8a5e2100 --- /dev/null +++ b/usecaseui-portal/src/app/components/charts/pie/pie.component.ts @@ -0,0 +1,104 @@ +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 { + // 图形数据 + @Input() chartData; + // 初始化数据 + @Input() initData; + + constructor() { } + + ngOnInit() { + this.initOpts = { + renderer: 'canvas', + height: this.initData.height + }; + this.pieOption = { + legend: this.initData.option.legend, + color:this.initData.option.color, + series : [ + { + name: this.initData.option.series[0].name, + type: 'pie', + radius : this.initData.option.series[0].radius, + center: ['50%', '45%'], + legendHoverLink: false, + hoverOffset: 5, + avoidLabelOverlap: false, + label: this.initData.option.series[0].label, + data:[ + {value:1, name:'11'} + ], + itemStyle: { + emphasis: { + shadowBlur: 5, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + } + } + } + ] + } + } + + ngOnChanges(changes:SimpleChanges){ + + // 当有实例的时候再执行，相当于第一次不执行下面方法 + if(this.chartIntance){ + this.chartDataChange() + } + } + + // 初始化图形高度 + initOpts:any; + // alarm饼图 + pieOption:any; + // 实例对象 + chartIntance:any; + // 数据变化 + updateOption:any; + chartDataChange(){ + this.updateOption = this.chartData; + // 要等到updateOption渲染完再执行 + this.chartIntance.on('finished',()=>{ + this.chartIntance.dispatchAction({ + type:'highlight', + seriesIndex: 0, + dataIndex:0 + }) + // 由于所有视图变化渲染都会执行，更新完注销此事件 + 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/details/details.component.css b/usecaseui-portal/src/app/components/details/details.component.css new file mode 100644 index 00000000..0d450d28 --- /dev/null +++ b/usecaseui-portal/src/app/components/details/details.component.css @@ -0,0 +1,104 @@ +/* + Copyright (C) 2018 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 new file mode 100644 index 00000000..b5c576c7 --- /dev/null +++ b/usecaseui-portal/src/app/components/details/details.component.html @@ -0,0 +1,68 @@ +<!-- + Copyright (C) 2018 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> </p> + <p> <span>Domain :</span> </p> + <p> <span>Event Name :</span> Fault_IMSSBC_Backup MPU is down </p> + <p> <span>Event Id :</span> 15105642034 </p> + <p> <span>EventType :</span> </p> + <p> <span>NfcNamingCode :</span> </p> + <p> <span>NfNamingCode :</span> </p> + <p> <span>SourceName :</span> </p> + <p> <span>SourceId :</span> </p> + <p> <span>ReportingEntityName :</span> </p> + <p> <span>ReportingEntityId :</span> </p> + </div> + <div class="rightlist"> + <p> <span>Priority :</span> Normal </p> + <p> <span>ReportTime :</span> </p> + <p> <span>ClearTime :</span> </p> + <p> <span>FaultFieldsVersion :</span> </p> + <p> <span>Event Servrity :</span> </p> + <p> <span>EventSourceType :</span> </p> + <p> <span>EventCategory :</span> </p> + <p> <span>AlarmCondition :</span> </p> + <p> <span>SpecificProblem :</span> </p> + <p> <span>Status :</span> </p> + <p> <span>AlarmInterfaceA :</span> </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]="detailData" [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 detailTable.data"> + <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 new file mode 100644 index 00000000..ad81d8a6 --- /dev/null +++ b/usecaseui-portal/src/app/components/details/details.component.less @@ -0,0 +1,96 @@ + +.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 new file mode 100644 index 00000000..1d5cbeb8 --- /dev/null +++ b/usecaseui-portal/src/app/components/details/details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailsComponent } from './details.component'; + +describe('DetailsComponent', () => { + let component: DetailsComponent; + let fixture: ComponentFixture<DetailsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/details/details.component.ts b/usecaseui-portal/src/app/components/details/details.component.ts new file mode 100644 index 00000000..f9e6474b --- /dev/null +++ b/usecaseui-portal/src/app/components/details/details.component.ts @@ -0,0 +1,36 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { slideUpDown } from '../../animates'; + +@Component({ + selector: 'app-details', + templateUrl: './details.component.html', + styleUrls: ['./details.component.less'], + animations: [ slideUpDown ] +}) +export class DetailsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + + ngOnChanges(changes){ + console.log(changes); + } + // 详情显示 + moredetailShow = false; + @Input() detailId; + detailData = [ + {name:"DNS.AttDnsQuery",value:"0"}, + {name:"DNS.SuccDnsQuery",value:"0"}, + {name:"DNS.SuccDnsQuery",value:"0"}, + {name:"DNS.SuccDnsQuery",value:"0"}, + {name:"DNS.SuccDnsQuery",value:"0"}, + {name:"sssssss",value:"1111"}, + ] + state = 'up' + slideUpDown(){ + this.moredetailShow = !this.moredetailShow; + this.state = this.state === 'up' ? 'down' : 'up'; + } +} diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css new file mode 100644 index 00000000..7268b5dc --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.css @@ -0,0 +1,93 @@ +/* + Copyright (C) 2018 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 { + background-color: #fff; + position: relative; + border-radius: 5px; + margin-bottom: 20px; + height: 106px; +} +.content .chart .select { + padding: 20px 50px; + width: 70%; + float: left; +} +.content .chart .select nz-dropdown { + margin-right: 20px; +} +.content .chart .select nz-dropdown a { + font: 700 12px "Arial"; + color: #3d4d65; +} +.content .chart .select nz-dropdown a:hover { + color: #3fa8eb; +} +.content .chart .AlarmChart { + width: 25%; + padding-top: 7px; + float: left; +} +.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 new file mode 100644 index 00000000..19c7d853 --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html @@ -0,0 +1,79 @@ +<!-- + Copyright (C) 2018 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="title"> + <ul> + <li><h5>CPU</h5> <p>{{alarmList.all }}</p></li> + <li><h5>Memory</h5> <p>{{alarmList.closed }}</p></li> + <li><h5>Disk</h5> <p>{{alarmList.alarm }}</p></li> + </ul> + </div> --> + <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"> + <nz-dropdown [nzTrigger]="'click'"> + <a nz-dropdown> + {{MeasurementSelected}} <i class="anticon anticon-down"></i> + </a> + <ul nz-menu> + <li nz-menu-item (click)="choseMeasurement(item)" *ngFor="let item of MeasurementList">{{item}}</li> + </ul> + </nz-dropdown> + <nz-dropdown [nzTrigger]="'click'"> + <a nz-dropdown> + {{ReportTimeSelected}} <i class="anticon anticon-down"></i> + </a> + <ul nz-menu> + <li nz-menu-item (click)="choseReportTime(item)" *ngFor="let item of ReportTimeList">{{item}}</li> + </ul> + </nz-dropdown> + </div> + <div class="AlarmChart" (click)="showModalMiddle()"> + <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + </div> + <!-- <button class="open-close" [ngClass]="{'open-close-active':alarmShow}" (click)="alarmShow=!alarmShow"></button> --> + </div> + <div class="tablelist"> + <nz-table #nzTable [nzData]="dataSet" [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="10%">Priority</th> + <th nzWidth="20%">SpecificProblem</th> + <th nzWidth="20%">Report Time</th> + <th nzWidth="15%">Status</th> + <th nzWidth="10%">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.name}}</td> + <td>{{item.age}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td>{{item.address}}</td> + <td><a class="action" (click)="detailShow(i+1)"><i class="details"></i></a></td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> + </div> +</div> diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less new file mode 100644 index 00000000..30fea328 --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.less @@ -0,0 +1,108 @@ +.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: 106px; + .select { + padding: 20px 50px; + width: 70%; + float: left; + 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 new file mode 100644 index 00000000..013db38a --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GraphiclistComponent } from './graphiclist.component'; + +describe('GraphiclistComponent', () => { + let component: GraphiclistComponent; + let fixture: ComponentFixture<GraphiclistComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GraphiclistComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GraphiclistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts new file mode 100644 index 00000000..fc86ee0d --- /dev/null +++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts @@ -0,0 +1,213 @@ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; + +@Component({ + selector: 'app-graphiclist', + templateUrl: './graphiclist.component.html', + styleUrls: ['./graphiclist.component.less'] +}) +export class GraphiclistComponent implements OnInit { + + constructor() { } + isVisibleMiddle = false; + + showModalMiddle(): void { + this.isVisibleMiddle = true; + } + handleOkMiddle(): void { + console.log('click ok'); + this.isVisibleMiddle = false; + } + handleCancelMiddle(): void { + this.isVisibleMiddle = false; + } + + ngOnInit() { + } + + // 筛选框（下拉框） + MeasurementList = ['aaaa','bbbb','cccc','dddddDDDD']; + MeasurementSelected = "Measurement"; + ReportTimeList = ['aaaa','bbbb','cccc','ddddd']; + ReportTimeSelected = "ReportTime"; + choseMeasurement(item){ + console.log(item); + this.MeasurementSelected = item; + } + choseReportTime(item){ + console.log(item); + this.ReportTimeSelected = item; + } + + sort(e){ + + } + // 数量统计 + alarmList = { + all:22439, + closed:37923, + alarm: 12342 + } + + //折线图 + alarmChartData:Object; + alarmChartInit:Object = { + height:100, + width:290, + option:{ + tooltip : { + show : false, + }, + legend: { + show :false, + }, + series: [ + { + name: 'Memory', + type: 'bar', + legendHoverLink: true, + barWidth: "25%", + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45], + itemStyle: { + color: "#3fa8eb" + }, + } + ] + } + }; + //折线图 + alarmChartDataBig:Object; + alarmChartInitBig:Object = { + height:240, + width:500, + option:{ + tooltip : { + show : true, + trigger: 'axis', + }, + legend: { + bottom: 'bottom', + data: ['Memory'] + }, + series: [ + { + name: 'Memory', + type: 'bar', + legendHoverLink: true, + barWidth: "25%", + //timeframe_one + data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45], + itemStyle: { + color: "#3fa8eb" + }, + } + ] + } + }; + + //表格数据 + dataSet = [ + { + name : 'John Brown', + age : 32, + expand : false, + address : 'New York No. 1', + description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' + }, + { + name : 'Aim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Xim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'aoe Black', + age : 32, + expand : false, + address : 'Sidney No. 1', + description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' + } + ]; + + @Output() detailData = new EventEmitter(); + detailShow(id){ + let prems = { + id:id, + detailShow: true + } + this.detailData.emit(prems); + + } + +} diff --git a/usecaseui-portal/src/app/dataInterface.ts b/usecaseui-portal/src/app/dataInterface.ts new file mode 100644 index 00000000..fe42594e --- /dev/null +++ b/usecaseui-portal/src/app/dataInterface.ts @@ -0,0 +1,38 @@ + +interface homeData { + services:{ + number:number, + chartdata:Object[] + }, + performance:{ + per_Vnf:number, + per_VmPm:number + }, + alarm:{ + chartdata:Object[] + }, + Vm_performance:{ + names:string[] + } +}; + +interface homeVmLineData { + CPU:number[], + Memory:number[] +} + +interface servicesSelectData { + customer:string[], + serviceType:string[] +} + +interface servicesTableData { + total:number, + tableList:string[] +} + +interface onboardTableData { + total:number, + tableList:string[] +} +export {homeData, homeVmLineData, servicesSelectData, servicesTableData, onboardTableData} diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css new file mode 100644 index 00000000..d2e51e40 --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.css @@ -0,0 +1,157 @@ +/* + Copyright (C) 2018 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: 20px; +} +.content .services { + float: left; + background-color: #fff; + width: 30%; + height: 628px; + border-radius: 5px; + padding: 28px 22px; +} +.content .services h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 58px; +} +.content .services h3 { + font: 400 48px/48px "Arial"; + color: #3fa8eb; + text-align: center; +} +.content .services h3 span { + font-size: 14px; +} +.content .services p { + font: 400 14px/14px "Arial"; + color: #54657e; + text-align: center; + margin-bottom: 48px; +} +.content .services .tip { + background-color: #eceff4; + color: #3d4d65; + font-size: 16px; + margin: 0 20px; + height: 35px; + line-height: 35px; + border-radius: 5px; +} +.content .rightcontent { + float: left; + padding-left: 15px; + width: 70%; +} +.content .rightcontent .rt-content { + height: 220px; + margin-bottom: 18px; +} +.content .rightcontent .rt-content .poerformance { + float: left; + background-color: #fff; + height: 100%; + width: 50%; + border-radius: 5px; + padding: 28px 26px; +} +.content .rightcontent .rt-content .poerformance h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 34px; +} +.content .rightcontent .rt-content .poerformance div { + height: 57px; + position: relative; + margin-bottom: 10px; +} +.content .rightcontent .rt-content .poerformance div h3 { + font: 600 25px/25px "Arial"; + color: #3d4d65; + margin-bottom: 10px; +} +.content .rightcontent .rt-content .poerformance div p { + font: 400 12px/12px "Arial"; + color: #54657e; +} +.content .rightcontent .rt-content .poerformance div img { + position: absolute; + top: 0; + right: 0; +} +.content .rightcontent .rt-content .alarm { + float: left; + background-color: #fff; + height: 100%; + width: 48%; + margin-left: 2%; + border-radius: 5px; + position: relative; + padding: 28px 26px; +} +.content .rightcontent .rt-content .alarm h4 { + position: absolute; + font: 600 16px/16px "Arial"; + color: #3d4d65; +} +.content .rightcontent .rb-content { + height: 390px; + background-color: #fff; + border-radius: 5px; + padding: 24px 30px; + position: relative; +} +.content .rightcontent .rb-content h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; +} +.content .rightcontent .rb-content nz-dropdown { + position: absolute; + top: 24px; + right: 30px; +} +.content .rightcontent .rb-content nz-dropdown button { + width: 170px; + height: 35px; + background-color: #eceff4; + text-align: left; + border-color: #cad3df; +} +.content .rightcontent .rb-content nz-dropdown button span { + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; +} +.content .rightcontent .rb-content nz-dropdown button i { + position: absolute; + top: 12px; + right: 12px; +} +.content .rightcontent .rb-content #pfVmChartLine { + width: 100%; + height: 318px; +} diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html new file mode 100644 index 00000000..b2fa5eb4 --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.html @@ -0,0 +1,63 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> {{"Overall trend" | translate}}</h3> +<hr> +<div class="content"> + <div class="services"> + <h4>{{"SERVICES" | translate}}</h4> + <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3> + <p>{{serviceNumber}} {{"services has been created" | translate}}</p> + <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie> + <p class="tip">View the details</p> + </div> + + <div class="rightcontent"> + <div class="rt-content"> + <div class="poerformance"> + <h4>{{"PERFORMANCE" | translate}}</h4> + <div class="pfVnf"> + <h3 class="pfVnfNum">126</h3> + <p>Performance VNF</p> + <img src="../../assets/images/VNF.png" alt="VNF"> + </div> + <div class="pfVmPm"> + <h3 class="pfVmPmNum">286</h3> + <p>Performance VM/PM</p> + <img src="../../assets/images/VM.png" alt="VM/PM"> + </div> + </div> + <div class="alarm"> + <h4>{{"Alarm" | translate}}</h4> + <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie> + </div> + </div> + + <div class="rb-content"> + <h4>{{"VM Performance" | translate}}</h4> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'"> + <button nz-button nz-dropdown><span>{{vmPerformanceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="vmPerformanceNameSelect(item)" *ngFor="let item of vmPerformanceNames"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + <app-line [initData]="performanceChartInit" [chartData]="performanceChartData"></app-line> + </div> + </div> + +</div> + diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less new file mode 100644 index 00000000..89abafa6 --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.less @@ -0,0 +1,145 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.content { + .services { + float: left; + background-color: #fff; + width: 30%; + height: 628px; + border-radius: 5px; + padding: 28px 22px; + h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 58px; + } + h3 { + font: 400 48px/48px "Arial"; + color: #3fa8eb; + text-align: center; + span { + font-size: 14px; + } + } + p { + font: 400 14px/14px "Arial"; + color: #54657e; + text-align: center; + margin-bottom: 48px; + } + .tip { + background-color: #eceff4; + color: #3d4d65; + font-size: 16px; + margin: 0 20px; + height: 35px; + line-height: 35px; + border-radius: 5px; + } + } + .rightcontent { + float: left; + padding-left: 15px; + width: 70%; + .rt-content { + height: 220px; + margin-bottom: 18px; + .poerformance { + float: left; + background-color: #fff; + height: 100%; + width: 50%; + border-radius: 5px; + padding: 28px 26px; + h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + margin-bottom: 34px; + } + div { + height: 57px; + position: relative; + margin-bottom: 10px; + h3 { + font: 600 25px/25px "Arial"; + color: #3d4d65; + margin-bottom: 10px; + } + p { + font: 400 12px/12px "Arial"; + color: #54657e + } + img { + position: absolute; + top: 0; + right: 0; + } + } + } + .alarm { + float: left; + background-color: #fff; + height: 100%; + width: 48%; + margin-left: 2%; + border-radius: 5px; + position: relative; + padding: 28px 26px; + h4 { + position: absolute; + font: 600 16px/16px "Arial"; + color: #3d4d65; + } + } + } + .rb-content { + height: 390px; + background-color: #fff; + border-radius: 5px; + padding: 24px 30px; + position: relative; + h4 { + font: 600 16px/16px "Arial"; + color: #3d4d65; + } + nz-dropdown { + position: absolute; + top: 24px; + right: 30px; + button { + width: 170px; + height: 35px; + background-color: #eceff4; + text-align: left; + border-color: #cad3df; + span { + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; + } + i { + position: absolute; + top: 12px; + right: 12px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + #pfVmChartLine { + width: 100%; + height: 318px; + } + } + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/home/home.component.spec.ts b/usecaseui-portal/src/app/home/home.component.spec.ts new file mode 100644 index 00000000..490e81bd --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture<HomeComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts new file mode 100644 index 00000000..39fab25d --- /dev/null +++ b/usecaseui-portal/src/app/home/home.component.ts @@ -0,0 +1,166 @@ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { MyhttpService } from '../myhttp.service'; +import { slideToRight } from '../animates'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.less'], + animations: [ slideToRight ] +}) +export class HomeComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + + constructor(private myhttp: MyhttpService) { } + + ngOnInit() { + this.getHomeAllData(); + } + + // alarm饼图 + alarmChartData:Object; + alarmChartInit:Object = { + height: 164, + option:{ + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + data: ['Active','Closed'] + }, + color:["#fb6e6e","#526b75"], + series:[{ + name:"告警信息", + radius : '55%', + label:{ + normal:{ + show: false, + }, + emphasis: { + show: true, + formatter:'{b}\n{c},{d}%', + } + } + }] + } + }; + + // services饼图 + serviceNumber:number = 0; + serviceChartData:Object; + serviceChartInit:Object = { + height: 300, + option:{ + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + data: ['Active','Closed'] + }, + color:["#3fa8eb","#1abb9b","#a4ead7"], + series:[{ + name:"服务信息", + radius : ['45%','65%'], + avoidLabelOverlap: false, + label:{ + normal:{ + show: false, + position: 'center' + }, + emphasis: { + show: true, + formatter:'{b}\n{c}', + textStyle: { + fontSize: '20', + fontWeight: 'bold' + } + } + }, + labelLine: { + normal: { + show: false + } + }, + }] + } + }; + + // Performance线图 + performanceChartData:Object; + performanceChartInit:Object = { + height:320, + option:{ + legend: { + bottom: '0px', + data: ['CPU','Memory'] + }, + series : [ + { + name: 'CPU', + type: 'line', + data:[20,23,14,12,34,25,22,42,52,35,34,13,13] + }, + { + name: 'Memory', + type: 'line', + data:[10,23,24,22,14,15,32,12,12,32,14,23,23] + } + ] + } + }; + getPerformanceChartData(){ + let paramsObj = { + vmPerformanceName:this.vmPerformanceNameSelected + } + this.myhttp.getHomePerformanceChartData(paramsObj) + .subscribe((data)=>{ + this.performanceChartData = { + series:[ + {data:data.CPU}, + {data:data.Memory} + ] + } + },(err)=>{ + console.log(err); + }) + } + + // vm筛选框 + vmPerformanceNames = ['performanceNameOne']; + vmPerformanceNameSelected = this.vmPerformanceNames[0]; + vmPerformanceNameSelect(item){ + if(this.vmPerformanceNameSelected != item){ + console.log(item); + this.vmPerformanceNameSelected = item; + this.getPerformanceChartData() + } + } + + // 获取数据 + getHomeAllData(){ + this.myhttp.getAllHomeData() + .subscribe( + (data)=>{ + console.log(data); + this.alarmChartData ={ + series:[{ + data:data.alarm.chartdata + }] + }; + this.serviceNumber = data.services.number; + this.serviceChartData ={ + series:[{ + data:data.services.chartdata + }] + }; + this.vmPerformanceNames = data.Vm_performance.names; + this.vmPerformanceNameSelected = this.vmPerformanceNames[0]; + this.getPerformanceChartData(); + }, + (err)=>{ + console.log(err); + } + ) + } + +} diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts new file mode 100644 index 00000000..09f13a49 --- /dev/null +++ b/usecaseui-portal/src/app/myhttp.service.ts @@ -0,0 +1,266 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { homeData, homeVmLineData, servicesSelectData, servicesTableData, onboardTableData} from './dataInterface'; + + + +@Injectable() +export class MyhttpService { + + constructor(private http: HttpClient) { } + + baseUrl = "./assets/json"; + url={ + allhome:this.baseUrl + "/homeAllData.json", + homeLineData:this.baseUrl + "/homePerformanceChartData.json", + serviceSelectList:this.baseUrl + "/servicesList.json", //customer、serviceType + servicesTableData:this.baseUrl + "/servicesTableData.json", + onboardTableData:this.baseUrl + "/onboardTableData.json", + + customers:this.baseUrl + "/customers.json?", + serviceType:this.baseUrl + "/serviceTypes.json?*_*", + servicesCategory:this.baseUrl + "/configuration_files/servicesCategory.json?", + serviceInstanceList:this.baseUrl + "/instanceTableData4.json?", + serviceTemplates:this.baseUrl + "/serviceTemplates2.json?", + templateCategory:this.baseUrl + "/configuration_files/templateCategory.json?", + templateParameters:this.baseUrl + "/*_*" + "ServiceTemplateParameters.json?", + addressData: this.baseUrl + "/siteAddressData.json?", + createService:this.baseUrl + "/createService.json?", + inputNamesTransform: this.baseUrl + "/configuration_files/inputNamesTranslate.json?", + deleteService: this.baseUrl + "/deleteService.json?", + progress:this.baseUrl + "/progress.json?", + + allottedResource:this.baseUrl + "/allotted-resources2.json?", + pnfDetail:this.baseUrl + "/pnfdetail-domain.json?", + connectivity:this.baseUrl + "/sotn-connectivity2.json?", + vpnBinding:this.baseUrl + "/vpnbinding.json?", + alarmFormData:this.baseUrl + "/alarmFormData.json?" + } + + // baseUrl = 'http://172.19.44.223/api/usecaseui-server/v1'; + // baseUrl = '/api/usecaseui-server/v1'; + // url={ + // allhome:this.baseUrl + "/alarm/getAlarmDataByStatus/0", + // homeLineData:this.baseUrl + "/...........", + // serviceSelectList:this.baseUrl + "/xxxxxxxxxxxxx", + // servicesTableData:this.baseUrl + "/xxxxxxxx.json", + // onboardTableData:this.baseUrl + "/xxxxxxx.json", + + + // customers:this.baseUrl + "/uui-lcm/customers", + // serviceType:this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions", + // servicesCategory: "./assets/json/configuration_files/servicesCategory.json", + // serviceInstanceList:this.baseUrl + '/uui-sotn/getServiceInstanceList', + // serviceTemplates:this.baseUrl + "/uui-lcm/service-templates", + // templateCategory: "./assets/json/configuration_files/templateCategory.json", + // templateParameters:this.baseUrl + "/uui-lcm/service-templates/" + "*_*" +"?toscaModelPath=", + // addressData: this.baseUrl + "/uui-sotn/getOssInvenory", + // createService:this.baseUrl + "/uui-lcm/services", + // inputNamesTransform: "./assets/json/configuration_files/inputNamesTranslate.json?", + // deleteService: this.baseUrl + "/uui-lcm/services/", + // progress:this.baseUrl + "/uui-lcm/services/" + "*_*" + "/operations/", + + // allottedResource:this.baseUrl + "/uui-sotn/getAllottedResources", + // pnfDetail:this.baseUrl + "/uui-sotn/getPnfInfo/", + // connectivity:this.baseUrl + "/uui-sotn/getConnectivityInfo/", + // vpnBinding:this.baseUrl + "/uui-sotn/getPinterfaceByVpnId/" + // } + + // home页数据 + getAllHomeData() { + return this.http.get<homeData>(this.url.allhome); + } + //home页折线图数据 + getHomePerformanceChartData(paramsObj){ + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<homeVmLineData>(this.url.homeLineData,{params}); + } + + // servicesList数据 + // getServicesSelectData():Observable<HttpResponse<servicesSelectData>>{ + // return this.http.get<servicesSelectData>(this.url.serviceSelectList,{observe:'response'}); + // } + getServicesTableData(paramsObj):Observable<HttpResponse<servicesTableData>>{ + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<servicesTableData>(this.url.servicesTableData,{observe:'response',params}); + } + + // onboard数据 + getOnboardTableData(paramsObj):Observable<HttpResponse<onboardTableData>>{ + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<onboardTableData>(this.url.onboardTableData,{observe:'response',params}); + } + + + + + + testObservable(){ + let myObservable = new Observable((observer)=>{ + observer.next(1); + observer.next((n)=>{ + console.log(3+n); + }) + setTimeout(()=>{ + observer.next(66666) + },100) + observer.next(()=>{ + setTimeout((n)=>{ + console.log("9999---" + n); + },10) + }) + // observer.error(2); + // observer.complete(); + }); + + myObservable.subscribe((e)=>{ + if(typeof e == "function"){ + e(5) + } + console.log(e); + },(err)=>{ + console.log(err); + },()=>{ + console.log(555); + }) + } + + //--------------------------------------------------------------------------------- + + // 获取所有customers + getAllCustomers(){ + return this.http.get<any>(this.url.customers); + // return this.http.jsonp<Object[]>('http://127.0.0.1:5500/customers.json',"callback");// 测试用 ：请求数据需要用回调函数包裹 + } + + // 获取相应的serviceType + getServiceTypes(customer){ + let url = this.url.serviceType.replace("*_*",customer.id); + return this.http.get<any>(url); + } + // 获取服务分类信息，本地配置文件 + getServicesCategory(){ + return this.http.get<any>(this.url.servicesCategory); + } + // list表格数据 + getInstanceTableData(paramsObj){ + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(this.url.serviceInstanceList,{params}); + } + + // // 服务详情数据 + // getInstanceDetails(id){ + // let url = this.baseUrl + "/detailsData.json?id=" + id; + // return this.http.get<instanceDetail>(url); + // } + + // 获取所有模板类型 + getAllServiceTemplates(){ + return this.http.get<any>(this.url.serviceTemplates); + } + + // 获取模板分类信息，本地配置文件 + getTemplateCategory(){ + return this.http.get<any>(this.url.servicesCategory); + } + // 获取模板输入项参数 + getTemplateParameters(type,template){ + let url = this.url.templateParameters.replace("*_*",type) + template.toscaModelURL; //本地模拟 + // let url = this.url.templateParameters.replace("*_*",template.uuid) + template.toscaModelURL; + return this.http.get<any>(url); + } + // siteAddress 地址 + getSiteAddress(){ + return this.http.get<any>(this.url.addressData); + } + + // 创建接口 + createInstance(requestBody){ + return this.http.get<any>(this.url.createService); //本地模拟 + // return this.http.post<any>(this.url.createService,requestBody); + } + + // 输入参数名字转换 + inputNamesTransform(){ + return this.http.get(this.url.inputNamesTransform); + } + + // 删除接口 + deleteInstance(obj){ + let httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + 'Accept':'application/json', + 'Authorization':'Basic SW5mcmFQb3J0YWxDbGllbnQ6cGFzc3dvcmQxJA==' + }), + body:{ + 'globalSubscriberId': obj.globalSubscriberId, + 'serviceType': obj.serviceType + } + }; + return this.http.get<any>(this.url.deleteService); //本地模拟 + // return this.http.delete<any>(this.url.deleteService + obj.serviceInstanceId, httpOptions); + } + + // 查询进度接口 + getProgress(obj){ + let url = this.url.progress.replace("*_*",obj.serviceId) + obj.operationId; + return this.http.get<any>(url); + } + + // 获取allotted-resource 能获取tp和pnf值 + getAllottedResource(obj){ + let params = new HttpParams({fromObject:obj}); + let url = this.url.allottedResource; + return this.http.get<any>(url,{params}); + } + //通过pnf值获取对应的domain （network-resource） + getPnfDetail(name){ + let url = this.url.pnfDetail + name; + return this.http.get<any>(url); + } + //通过sotn 获取connectivity ，查找vpn-id + getSotnConnectivity(id){ + let url = this.url.connectivity + id; + return this.http.get<any>(url); + } + //通过vpn-id 查找tp和pnf + getVpnBinding(id){ + let url = this.url.vpnBinding + id; + return this.http.get<any>(url); + } + // 时间格式化 毫秒转正常值 + dateformater(vmstime){ + if(!vmstime){ + return '' + } + let mstime = Number((vmstime + '').slice(0,13)); + let time = new Date(mstime); + let year = time.getFullYear(); + let month = time.getMonth() + 1; + let day = time.getDate(); + let hours = time.getHours(); + let minutes = time.getMinutes(); + let seconds = time.getSeconds(); + let formattime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds; + return formattime; + } + + // alarm表格数据 + // getAlarmFormData(pageNumber:number,pageSaze:number,name?:string,Priority?:string,Status?:string,Report?:string){ + // return this.http.post<any>(this.url.alarmFormData,{ + // pageNumber:pageNumber, + // pageSaze:pageSaze, + // name:name, + // Priority:Priority, + // Status:Status, + // Report:Report + // }); + // } + + + getAlarmFormData(pageNumber:number,pageSaze:number,name?:string,Priority?:string,Status?:string,Report?:string){ + return this.http.get<any>(this.url.alarmFormData+'?pageNumber='+pageNumber+'?pageSaze'+pageSaze+'?name'+name+'?Priority'+Priority+'?Status'+Status+'?Report'+Report); + } +} diff --git a/usecaseui-portal/src/app/networkHttpservice.service.ts b/usecaseui-portal/src/app/networkHttpservice.service.ts new file mode 100644 index 00000000..5e713d7f --- /dev/null +++ b/usecaseui-portal/src/app/networkHttpservice.service.ts @@ -0,0 +1,99 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; + +interface tablelist { + total:number, + list:Object[] +} +interface d3list { + total:number, + list:Object[] +} + +@Injectable() +export class networkHttpservice { + + constructor(private http:HttpClient) { } + + baseUrl = "./assets/json/"; + // list表格数据 + getInstanceTableData(paramsObj){ + let url = this.baseUrl + "instanceTableData.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<tablelist>(url,{params}); + } + //d3数据 + getNetworkD3Data(){ + let url = this.baseUrl + "netWorkD3Data.json"; + // let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url); + } + //初始化连线 logical-links + getLogicalLinksData(){ + let url = this.baseUrl + "LogicalLinksData.json"; + // let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url); + } + //查询指定的node对应的tp数据 + getPInterfacesData1(paramsObj){ + let url = this.baseUrl + "p_interfaces1.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + getPInterfacesData2(paramsObj){ + let url = this.baseUrl + "p_interfaces2.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + //创建连线接口 + createLink(paramsObj){ + let url = this.baseUrl+ "status.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + //查询指定的单个连接线 接口 + querySpecificLinkInfo(paramsObj){ + let url = this.baseUrl+ "specific_link _nfo.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + + //查询 外部云host this.url地址 接口 + queryCloudUrl(paramsObj){ + let url = this.baseUrl+ "url.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + + //创建外部云newwork接口 + createNetwrok(paramsObj){ + let url = this.baseUrl+ "status.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + //创建外部云pnf接口 + createPnf(paramsObj){ + let url = this.baseUrl+ "status.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + //创建外部云Tp接口 + createTp(paramsObj,cloudNodeName){ + console.log(cloudNodeName) + let url = this.baseUrl+ "status.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + //创建外部云link接口 + createCloudLink(paramsObj){ + let url = this.baseUrl+ "status.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } + //删除连线 + deleteLink(paramsObj){ + let url = this.baseUrl+ "status.json"; + let params = new HttpParams({fromObject:paramsObj}); + return this.http.get<any>(url,{params}); + } +} diff --git a/usecaseui-portal/src/app/networkHttpservice.service1.ts b/usecaseui-portal/src/app/networkHttpservice.service1.ts new file mode 100644 index 00000000..edb4df7c --- /dev/null +++ b/usecaseui-portal/src/app/networkHttpservice.service1.ts @@ -0,0 +1,97 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; + + +@Injectable() +export class networkHttpservice { + + constructor(private http:HttpClient) { } + + // baseUrl = "./assets/json/";//本地环境 + // url={ + // "getNetworkD3Data":this.baseUrl + "netWorkD3Data.json", + // "getLogicalLinksData":this.baseUrl + "LogicalLinksData.json", + // "getPInterfacesData1":this.baseUrl + "netWorkD3Data.json", + // "getPInterfacesData2":this.baseUrl + "p_interfaces1.json", + // "createLink":this.baseUrl + "status.json", + // "querySpecificLinkInfo":this.baseUrl + "specific_link _nfo.json", + // "queryCloudUrl":this.baseUrl + "url.json", + // "createNetwrok":this.baseUrl + "status.json", + // "createPnf":this.baseUrl + "status.json", + // "createTp":this.baseUrl + "status.json", + // "createCloudLink":this.baseUrl + "status.json", + // "createCloudUrl":this.baseUrl + "status.json", + // "deleteLink":this.baseUrl + "status.json", + // }; + // baseUrl = "http://10.73.242.244:8082/uui-sotn/";//线上环境 + // baseUrl = "http://172.19.44.223/api/usecaseui-server/v1/uui-sotn/";//线上环境 + baseUrl = "/api/usecaseui-server/v1/uui-sotn/";//线上环境 + url={ + "getNetworkD3Data":this.baseUrl + "getNetWorkResources", + "getLogicalLinksData":this.baseUrl + "getLogicalLinks", + "getPInterfacesData1":this.baseUrl + "getPinterfaceByPnfName/", + "getPInterfacesData2":this.baseUrl + "getPinterfaceByPnfName/", + "createLink":this.baseUrl + "createLink/", + "querySpecificLinkInfo":this.baseUrl + "getSpecificLogicalLink/", + "queryCloudUrl":this.baseUrl + "getHostUrl/", + "createNetwrok":this.baseUrl + "createTopoNetwork/", + "createPnf":this.baseUrl + "createPnf/", + "createTp":this.baseUrl + "pnf/", + "createCloudLink":this.baseUrl + "createLink/", + "createCloudUrl":this.baseUrl + "createHostUrl/", + "deleteLink":this.baseUrl + "deleteLink/", + }; + //d3数据 + getNetworkD3Data(){ + return this.http.get<any>(this.url["getNetworkD3Data"]); + } + //初始化连线 logical-links + getLogicalLinksData(){ + return this.http.get<any>(this.url["getLogicalLinksData"]); + } + //查询指定的node对应的tp数据 + getPInterfacesData1(paramsObj){ + return this.http.get<any>(this.url['getPInterfacesData1']+paramsObj["pnfName"]); + } + getPInterfacesData2(paramsObj){ + return this.http.get<any>(this.url["getPInterfacesData2"]+paramsObj["pnfName"]); + } + //创建连线接口 + createLink(paramsObj){ + return this.http.put<any>(this.url["createLink"]+paramsObj["link-name"],paramsObj); + } + //查询指定的单个连接线 接口 + querySpecificLinkInfo(paramsObj){ + return this.http.get<any>(this.url["querySpecificLinkInfo"]+paramsObj["link-name"]); + } + //查询 外部云host this.url地址 接口 + queryCloudUrl(aaiId){ + return this.http.get<any>(this.url["queryCloudUrl"]+aaiId); + } + //创建外部云newwork接口 + createNetwrok(paramsObj){ + return this.http.put<any>(this.url["createNetwrok"]+paramsObj["network-id"],paramsObj); + } + //创建外部云pnf接口 + createPnf(paramsObj){ + return this.http.put<any>(this.url["createPnf"]+paramsObj["pnf-name"],paramsObj); + } + //创建外部云Tp接口 + createTp(paramsObj,cloudNodeName){ + let str=cloudNodeName+"/p-interfaces/p-interface/"+paramsObj["interface-name"]+"/createTerminationPoint"; + return this.http.put<any>(this.url["createTp"]+str,paramsObj); + } + //创建外部云link接口 + createCloudLink(paramsObj){ + return this.http.put<any>(this.url["createCloudLink"]+paramsObj["link-name"],paramsObj); + } + //创建外部云host url接口 + createCloudUrl(paramsObj){ + return this.http.put<any>(this.url["createCloudUrl"]+paramsObj["aai-id"],paramsObj); + } + //删除连线 + deleteLink(paramsObj){ + let str=paramsObj["logical-link"]+"/"+paramsObj["resource-version"]; + return this.http.delete<any>((this.url["deleteLink"]+str)); + } +} diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css new file mode 100644 index 00000000..079a409c --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.css @@ -0,0 +1,75 @@ +/* + Copyright (C) 2018 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: 20px; +} +.select { + margin-bottom: 20px; +} +.select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select nz-dropdown { + vertical-align: middle; +} +.select nz-dropdown :hover { + border-color: #147dc2; +} +.select nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .submit { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; +} +.select .submit span { + color: #fff; + font-weight: 400; +} +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; +} diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html new file mode 100644 index 00000000..76d2485e --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.html @@ -0,0 +1,79 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<!-- <h3 class="title"> + <span (click)="performanceShow()" style="cursor:pointer;">Performance VM</span> + <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> + <span *ngIf="detailshow">> Details </span> +</h3> +<hr> +<div class="select" [@showHideAnimate]="state"> + <span>Source Name: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + + <span>ReportingEntityName: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{ReportingEntityNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseReportingEntityName(item)" *ngFor="let item of ReportingEntityNameList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button> +</div> +<div class="content" [@showHideAnimate]="state"> + <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger nzShowQuickJumper [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%">ReportingEntityName</th> + <th nzWidth="10%">Type</th> + <th nzWidth="15%">CPU</th> + <th nzWidth="10%">Memory</th> + <th nzWidth="10%">Disk</th> + <th nzWidth="10%">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.name}}</td> + <td>{{item.address}}</td> + <td>{{item.age}}</td> + <td>{{item.address}}</td> + <td>{{item.age}}</td> + <td>{{item.age}}</td> + <td><a (click)="graphicShow()">Delete</a></td> + </tr> --> + <!-- </ng-template> --> + <!-- </tbody> + </nz-table> +</div> +<div [@showHideAnimate]="state2"> + <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist> +</div> +<div [@showHideAnimate]="state3"> + <app-details [detailId]="detailId"></app-details> +</div> --> diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less new file mode 100644 index 00000000..8a9005c5 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.less @@ -0,0 +1,61 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 20px; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .submit { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } +} +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts new file mode 100644 index 00000000..fd441da3 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PerformanceVmComponent } from './performance-vm.component'; + +describe('PerformanceVmComponent', () => { + let component: PerformanceVmComponent; + let fixture: ComponentFixture<PerformanceVmComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceVmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceVmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts new file mode 100644 index 00000000..1fb099c9 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vm/performance-vm.component.ts @@ -0,0 +1,159 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { slideToRight, showHideAnimate } from '../../animates'; + +@Component({ + selector: 'app-performance-vm', + templateUrl: './performance-vm.component.html', + styleUrls: ['./performance-vm.component.less'], + animations: [ slideToRight, showHideAnimate ] +}) +export class PerformanceVmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + constructor() { } + + ngOnInit() { + } + + // 筛选框（下拉框） + sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD']; + sourceNameSelected = this.sourceNameList[0]; + ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd']; + ReportingEntityNameSelected = this.ReportingEntityNameList[0]; + choseSourceName(item){ + console.log(item); + this.sourceNameSelected = item; + } + choseReportingEntityName(item){ + console.log(item); + this.ReportingEntityNameSelected = item; + } + + //表格数据 + dataSet = [ + { + name : 'John Brown', + age : 32, + expand : false, + address : 'New York No. 1', + description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' + }, + { + name : 'Aim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Xim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'Jim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'cim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'bim Green', + age : 42, + expand : false, + address : 'London No. 1', + description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' + }, + { + name : 'aoe Black', + age : 32, + expand : false, + address : 'Sidney No. 1', + description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' + } + ]; + + //详情页标题显示 + graphicshow = false; + detailshow = false; + // 显示隐藏动画 + state = "show"; + state2 = "hide"; + state3 = "hide"; + performanceShow() { + this.state = 'show'; + this.state2 = 'hide'; + this.state3 = 'hide'; + this.graphicshow = false; + this.detailshow = false; + } + graphicShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + } + // 选中id + detailId:number; + detailShow(prems) { + this.state = 'hide'; + this.state2 = 'hide'; + this.state3 = 'show'; + this.graphicshow = true; + this.detailshow = true; + console.log(prems); + this.detailId = prems.id; + } + +} diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css new file mode 100644 index 00000000..4ed015fe --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css @@ -0,0 +1,126 @@ +/* + Copyright (C) 2018 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: 20px; +} +.select { + margin-bottom: 20px; +} +.select span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.select nz-dropdown { + vertical-align: middle; +} +.select nz-dropdown :hover { + border-color: #147dc2; +} +.select nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.select nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.select nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.select .submit { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; +} +.select .submit span { + color: #fff; + font-weight: 400; +} +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; +} +.content .vnfs { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +.content .vnfs .vnf { + width: 18%; + height: 200px; + margin: 5px; + padding: 20px; + border-radius: 2px; + text-align: center; + cursor: pointer; + transition: all 0.3s linear; +} +.content .vnfs .vnf:hover { + background-color: #f5f5f5; + transform: scale(1.02); +} +.content .vnfs .vnf h3 { + font-size: 14px; + color: #3fa8eb; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; +} +.content .vnfs .vnf .intro { + text-align: left; + font-size: 12px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + word-wrap: break-word; + word-break: break-all; +} +.content .vnfs .empty { + width: 18%; + height: 200px; + margin: 5px; + border-radius: 2px; +} +.content .pages { + height: 25px; + margin: 20px 10px; + position: relative; +} +.content .pages nz-pagination { + float: right; +} diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html new file mode 100644 index 00000000..0b398703 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html @@ -0,0 +1,64 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> + <span (click)="performanceShow()" style="cursor:pointer;">Performance VNF</span> + <span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span> + <span *ngIf="detailshow">> Details </span> +</h3> +<hr> +<div class="select" [@showHideAnimate]="state"> + <span>Source Name: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseSourceName(item)" *ngFor="let item of sourceNameList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + + <span>ReportingEntityName: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{ReportingEntityNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="choseReportingEntityName(item)" *ngFor="let item of ReportingEntityNameList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button> +</div> +<div class="content" [@showHideAnimate]="state"> + <div class="vnfs"> + <div class="vnf" *ngFor="let item of vnfsData" (click)="graphicShow()"> + <img src="../../../assets/images/VNF3.png" alt="VNF3"> + <h3>Mfvs_MMEManaxxdeafsfdf</h3> + <div class="intro"> + Mfvs_MMEMa naxxdfdafa fafad a afeaf sfdff doafe oghaiod aaafeageageagfdavzvdagewag + </div> + </div> + <div class="empty" *ngFor="let empty of emptys"></div> + </div> + <div class="pages"> + <nz-pagination [(nzPageIndex)]="current" [nzTotal]="500" [nzSize]="'small'" [nzPageSize]="10" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination> + </div> +</div> +<div [@showHideAnimate]="state2"> + <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist> +</div> +<div [@showHideAnimate]="state3"> + <app-details [detailId]="detailId"></app-details> +</div> diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less new file mode 100644 index 00000000..977ef5c0 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less @@ -0,0 +1,115 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 20px; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .submit { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } +} + +.content { + background-color: #fff; + border-radius: 5px; + padding: 12px; + .vnfs { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + .vnf { + // width: 180px; + width: 18%; + height: 200px; + margin: 5px; + padding: 20px; + border-radius: 2px; + text-align: center; + cursor: pointer; + transition: all 0.3s linear; + &:hover { + background-color: #f5f5f5; + transform: scale(1.02); + } + h3 { + font-size: 14px; + color: #3fa8eb; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; + } + .intro { + text-align: left; + font-size: 12px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + word-wrap:break-word; + word-break:break-all; + } + } + .empty { + // width: 180px; + width: 18%; + height: 200px; + margin: 5px; + border-radius: 2px; + } + } + .pages { + height: 25px; + margin: 20px 10px; + position: relative; + nz-pagination { + float: right; + } + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts new file mode 100644 index 00000000..c535b737 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PerformanceVnfComponent } from './performance-vnf.component'; + +describe('PerformanceVnfComponent', () => { + let component: PerformanceVnfComponent; + let fixture: ComponentFixture<PerformanceVnfComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceVnfComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceVnfComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts new file mode 100644 index 00000000..d2e8d991 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts @@ -0,0 +1,92 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { slideToRight, showHideAnimate } from '../../animates'; + +@Component({ + selector: 'app-performance-vnf', + templateUrl: './performance-vnf.component.html', + styleUrls: ['./performance-vnf.component.less'], + animations: [ slideToRight, showHideAnimate ] +}) +export class PerformanceVnfComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + constructor() { } + + ngOnInit() { + let _this = this; + setTimeout(function(){ + // 在路由切换时加载图片造成动画卡顿，先完成动画再加载图片 + _this.vnfsData = [ + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"}, + {name:"aaa",text:"oahgieango"} + ]; + _this.emptys = new Array(15-_this.vnfsData.length); + },300) + } + + // 筛选框（下拉框） + sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD']; + sourceNameSelected = this.sourceNameList[0]; + ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd']; + ReportingEntityNameSelected = this.ReportingEntityNameList[0]; + choseSourceName(item){ + console.log(item); + this.sourceNameSelected = item; + } + choseReportingEntityName(item){ + console.log(item); + this.ReportingEntityNameSelected = item; + } + + submit(){ + + } + // vnfs数据 + vnfsData = []; + emptys = []; //补空盒子用 + // 分页 + current = 1; //当前页码 + + //详情页标题显示 + graphicshow = false; + detailshow = false; + // 显示隐藏动画 + state = "show"; + state2 = "hide"; + state3 = "hide"; + performanceShow() { + this.state = 'show'; + this.state2 = 'hide'; + this.state3 = 'hide'; + this.graphicshow = false; + this.detailshow = false; + } + graphicShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + } + // 选中id + detailId:number; + detailShow(prems) { + this.state = 'hide'; + this.state2 = 'hide'; + this.state3 = 'show'; + this.graphicshow = true; + this.detailshow = true; + console.log(prems); + this.detailId = prems.id; + } + + +} diff --git a/usecaseui-portal/src/app/performance/performance.component.css b/usecaseui-portal/src/app/performance/performance.component.css new file mode 100644 index 00000000..cf63a829 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance.component.css @@ -0,0 +1,26 @@ +/* + Copyright (C) 2018 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: 20px; +} diff --git a/usecaseui-portal/src/app/performance/performance.component.html b/usecaseui-portal/src/app/performance/performance.component.html new file mode 100644 index 00000000..c092e876 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance.component.html @@ -0,0 +1,17 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> Performance </h3> +<hr> diff --git a/usecaseui-portal/src/app/performance/performance.component.less b/usecaseui-portal/src/app/performance/performance.component.less new file mode 100644 index 00000000..2b1949a5 --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance.component.less @@ -0,0 +1,11 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} diff --git a/usecaseui-portal/src/app/performance/performance.component.spec.ts b/usecaseui-portal/src/app/performance/performance.component.spec.ts new file mode 100644 index 00000000..1bdc919d --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PerformanceComponent } from './performance.component'; + +describe('PerformanceComponent', () => { + let component: PerformanceComponent; + let fixture: ComponentFixture<PerformanceComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/performance/performance.component.ts b/usecaseui-portal/src/app/performance/performance.component.ts new file mode 100644 index 00000000..12405e9e --- /dev/null +++ b/usecaseui-portal/src/app/performance/performance.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-performance', + templateUrl: './performance.component.html', + styleUrls: ['./performance.component.less'] +}) +export class PerformanceComponent implements OnInit { + + constructor() { } + + ngOnInit() { + + } + +} diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css new file mode 100644 index 00000000..a1cc6455 --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -0,0 +1,59 @@ +/* + Copyright (C) 2018 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: 20px; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; +} +.list nz-table tbody td span.onboarding { + font-size: 12px; + color: #147dc2; +} +.list nz-table tbody td span.onboarded { + font-size: 14px; + color: #147dc2; +} +.list nz-table tbody td span.updating { + font-size: 12px; + color: blue; +} +.list nz-table tbody td span.deleting { + font-size: 12px; + color: red; +} +.list nz-table tbody td span.invalid { + font-size: 14px; + color: purple; +} +.list nz-table tbody td i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; +} +.list nz-table tbody td i.anticon:hover { + color: #147dc2; +} diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html new file mode 100644 index 00000000..d5286a3a --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -0,0 +1,61 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> Onboard VNF </h3> +<hr> +<div class="list"> + <nz-table #nzTable [nzData]="tableData" + nzShowSizeChanger + [nzFrontPagination]="false" + [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" + [nzTotal]= 'total' + [(nzPageSize)]="pageSize" + [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" + nzSize="middle" + (nzPageIndexChange)="searchData()" + (nzPageSizeChange)="searchData(true)"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%">NO</th> + <th nzWidth="20%" nzShowSort nzSortKey="name"> Name </th> + <th nzWidth="20%">Type</th> + <th nzWidth="15%">Version</th> + <th nzWidth="20%">Status</th> + <th nzWidth="15%">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.name}}</td> + <td>{{item.type}}</td> + <td>{{item.version}}</td> + <td> + <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', + 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.status}}</span> + <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> + </td> + <td> + <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> + <i class="anticon anticon-delete" (click)="deleteService()"></i> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less new file mode 100644 index 00000000..ab118737 --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -0,0 +1,50 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; + nz-table { + tbody { + td { + span.onboarding { + font-size: 12px; + color: #147dc2; + } + span.onboarded { + font-size: 14px; + color: #147dc2; + } + span.updating { + font-size: 12px; + color: blue; + } + span.deleting { + font-size: 12px; + color: red; + } + span.invalid { + font-size: 14px; + color: purple; + } + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + } + } + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts new file mode 100644 index 00000000..0e49f656 --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OnboardVnfVmComponent } from './onboard-vnf-vm.component'; + +describe('OnboardVnfVmComponent', () => { + let component: OnboardVnfVmComponent; + let fixture: ComponentFixture<OnboardVnfVmComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OnboardVnfVmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OnboardVnfVmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts new file mode 100644 index 00000000..c42b3ce3 --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { MyhttpService } from '../../myhttp.service'; +import { slideToRight } from '../../animates'; + +@Component({ + selector: 'app-onboard-vnf-vm', + templateUrl: './onboard-vnf-vm.component.html', + styleUrls: ['./onboard-vnf-vm.component.less'], + animations: [ slideToRight ] +}) +export class OnboardVnfVmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + constructor(private myhttp: MyhttpService) { } + + ngOnInit() { + this.getTableData(); + } + + + //表格数据 + tableData = []; + pageIndex = 1; + pageSize = 10; + total = 100; + loading = false; + sortName = null; + sortValue = null; + getTableData(){ + // 查询参数: 当前页码，每页条数，排序方式 + let paramsObj = { + pageIndex:this.pageIndex, + pageSize:this.pageSize, + nameSort:this.sortValue + } + this.myhttp.getOnboardTableData(paramsObj) + .subscribe((data)=>{ + console.log(data); + this.total = data.body.total; + this.tableData = data.body.tableList; + },(err)=>{ + console.log(err); + }) + } + sort(sort: { key: string, value: string }): void { + console.log(sort); + this.sortName = sort.key; + this.sortValue = sort.value; + this.getTableData(); + } + searchData(reset:boolean = false){ + console.log(reset) + this.getTableData(); + } + updataService(){ + console.log("updataService!"); + } + deleteService(){ + console.log("deleteService!"); + } + +} diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css new file mode 100644 index 00000000..eaf8fddb --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css @@ -0,0 +1,132 @@ +/* + Copyright (C) 2018 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: 20px; +} +.action { + margin-bottom: 20px; +} +.action span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.action nz-dropdown { + vertical-align: middle; +} +.action nz-dropdown :hover { + border-color: #147dc2; +} +.action nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.action nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.action nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.action .create { + float: right; + height: 30px; + padding: 0 10px; +} +.action .create span { + color: #fff; + font-weight: 400; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; +} +.list nz-table tbody td span.active { + font-size: 14px; + color: #147dc2; +} +.list nz-table tbody td span.closed { + font-size: 14px; + color: red; +} +.list nz-table tbody td span.onboarding { + font-size: 12px; + color: #147dc2; +} +.list nz-table tbody td span.updating { + font-size: 12px; + color: blue; +} +.list nz-table tbody td span.deleting { + font-size: 12px; + color: red; +} +.list nz-table tbody td span.creating { + font-size: 12px; + color: green; +} +.list nz-table tbody td i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; +} +.list nz-table tbody td i.anticon:hover { + color: #147dc2; +} +.list nz-table tbody tr.childtr td { + font-size: 12px; + color: #147dc2; +} +.detailComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} +.createComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html new file mode 100644 index 00000000..e0866524 --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -0,0 +1,185 @@ +<!-- + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> Services List </h3> +<hr> +<div class="action"> + <span>Customer: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu style="max-height: 200px; overflow: auto;"> + <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList"> + <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a> + </li> + </ul> + </nz-dropdown> + + + <span>Service Type: </span> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> + <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu style="max-height: 200px; overflow: auto;"> + <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList"> + <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a> + </li> + </ul> + </nz-dropdown> + + <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button> + <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> + <p>Content one</p> + <p>Content two</p> + <p>Content three</p> + </nz-modal> + <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button> + <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()"> + <span style="display:inline-block;width:70px;">Service: </span> + <nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()"> + <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> --> + <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option> + <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option> + </nz-select> + + <hr> + <span>SOTN VPN: </span> + <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + + <span> SITE: </span> + <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + + <div *ngIf="templateTypeSelected == 'CCVPN'"> + <br> + <span style="display:inline-block;width:70px;">SD-WAN: </span> + <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + </nz-modal> +</div> +<div class="list"> + <nz-table *ngIf="1" + #nzTable [nzData]="tableData" + nzShowSizeChanger + [nzFrontPagination]="false" + [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" + [nzTotal]= 'total' + [(nzPageSize)]="pageSize" + [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" + [nzSize]="'middle'" + [nzScroll]="{ y: '58vh' }" + (nzPageIndexChange)="searchData()" + (nzPageSizeChange)="searchData(true)"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%">NO</th> + <th nzWidth="5%"></th> + <th nzWidth="20%" nzShowSort nzSortKey="name">Service Instance Id</th> + <th nzWidth="20%">Name</th> + <th nzWidth="15%">Type</th> + <th nzWidth="20%">Status</th> + <th nzWidth="15%">Action</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> + <tr> + <td>{{i+1}}</td> + <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td> + <td>{{data.serviceId}}</td> + <td>{{data.name}}</td> + <td>{{data.type}}</td> + <td> + <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding', + 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status}}</span> + <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress> + </td> + <td> + <i class="anticon anticon-setting" (click)="scaleService()"></i> + <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> + <i class="anticon anticon-delete" (click)="deleteService()"></i> + </td> + </tr> + <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children"> + <td></td> + <td></td> + <td>{{item.serviceId}}</td> + <td>{{item.name}}</td> + <td colspan="3">{{item.type}}</td> + </tr> + </ng-template> + </tbody> + </nz-table> + <nz-table *ngIf="1" + #nzTable2 [nzData]="tableData2" + nzShowSizeChanger + [nzFrontPagination]="true" + [nzShowQuickJumper]="true" + [nzPageSizeOptions]="[5,10,15,20]" + [(nzPageSize)]="pageSize" + [(nzPageIndex)]='pageIndex' + nzSize="middle" + [nzScroll]="{ y: '58vh' }"> + <thead nzSingleSort> + <tr> + <th nzWidth="5%">NO.</th> + <th nzWidth="20%"> Instance ID </th> + <th nzWidth="20%">Instance Name</th> + <!-- <th nzWidth="10%">Type</th> --> + <th nzWidth="25%">Description</th> + <th nzWidth="15%">Status</th> + <th nzWidth="10%">Action</th> + </tr> + </thead> + <tbody> + <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> --> + <tr *ngFor="let item of nzTable2.data; let i = index; "> + <td>{{pageSize*(pageIndex-1) + i+1}}</td> + <td>{{item.sotnvpnSer['service-instance-id']}}</td> + <td>{{item.sotnvpnSer['service-instance-name']}}</td> + <!-- <td>{{item.type}}</td> --> + <td>{{item.sotnvpnSer.description}}</td> + <td> + <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span> + <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span> + <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> + </td> + <td> + <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" + (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span> + <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" + (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> + </td> + </tr> + <!-- </ng-template> --> + </tbody> + </nz-table> +</div> + +<div class="detailComponent" *ngIf="detailshow"> + <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData" (closeDetail)="detailshow = false;"></app-ccvpn-detail> +</div> +<div class="createComponent" *ngIf="createshow"> + <app-ccvpn-creation + [createParams]="createData" + [namesTranslate]="namesTranslate" + (closeCreate)="closeCreate($event)"> + </app-ccvpn-creation> +</div> diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less new file mode 100644 index 00000000..7e8ff80e --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -0,0 +1,127 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.action { + margin-bottom: 20px; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .create { + float: right; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; + nz-table { + tbody { + td { + span.active { + font-size: 14px; + color: #147dc2; + } + span.closed { + font-size: 14px; + color: red; + } + span.onboarding{ + font-size: 12px; + color: #147dc2; + } + span.updating{ + font-size: 12px; + color: blue; + } + span.deleting { + font-size: 12px; + color: red; + } + span.creating { + font-size: 12px; + color: green; + } + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + } + tr.childtr { + td { + font-size: 12px; + color: #147dc2; + } + } + } + } +} + +.detailComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} +.createComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts new file mode 100644 index 00000000..61440dc3 --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServicesListComponent } from './services-list.component'; + +describe('ServicesListComponent', () => { + let component: ServicesListComponent; + let fixture: ComponentFixture<ServicesListComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ServicesListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ServicesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts new file mode 100644 index 00000000..d893070d --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -0,0 +1,511 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { MyhttpService } from '../../myhttp.service'; +import { slideToRight } from '../../animates'; +import { NzModalService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-services-list', + templateUrl: './services-list.component.html', + styleUrls: ['./services-list.component.less'], + animations: [ slideToRight ] +}) +export class ServicesListComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + constructor(private myhttp: MyhttpService, private modalService: NzModalService) { } + + ngOnInit() { + this.getallCustomers(); + this.getTemplateSubTypes(); + this.inputNamests(); + } + // 筛选框（下拉框）customer servicetype + customerList = []; + customerSelected = {name:null,id:null}; + serviceTypeList = []; + serviceTypeSelected = {name:null,id:null}; + + // 获取所有customer + getallCustomers(){ + this.myhttp.getAllCustomers() + .subscribe((data)=>{ + this.customerList = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}}); + this.customerSelected = this.customerList[0]; + this.choseCustomer(this.customerSelected); + // console.log(this.customers) + }) + } + + choseCustomer(item){ + this.customerSelected = item; + this.myhttp.getServiceTypes(this.customerSelected) + .subscribe((data)=>{ + this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}}); + this.serviceTypeSelected = this.serviceTypeList[0]; + this.choseServiceType(this.serviceTypeSelected); + // console.log(this.listServiceTypes); + }) + } + choseServiceType(item){ + this.serviceTypeSelected = item; + this.getTableData(); + } + + // 模态框（对话框） create + isVisible = false; + showModal(): void { + this.isVisible = true; + } + handleOk(): void { + console.log('Button ok clicked!'); + this.isVisible = false; + } + handleCancel(): void { + console.log('Button cancel clicked!'); + this.isVisible = false; + this.isVisible2 = false; + } + + // 创建模态框2（对话框） create ------------------------------- + isVisible2 = false; + showModal2(): void { + this.isVisible2 = true; + this.templates1 = []; //多次创建会push累积名字，从新置空 + this.templates2 = []; + this.templates3 = []; + this.getAlltemplates(); + } + // 服务 + templateTypeSelected = "SOTN"; + choseTemplateType(){ + // this.filterTemplates();//分类 + } + // 模板 + templates = []; templates1;templates2;templates3; + template1={name:null}; + template2={name:null}; + template3={name:null}; + // 模板分类数据,创建、获取实例分类共用 + templateSubTypes = {}; //子类，sotnvpn、site、sdwan + getTemplateSubTypes(){ + this.myhttp.getServicesCategory() + .subscribe((data)=>{ + this.templateSubTypes = data; + },(err)=>{ + console.log("getTemplateTypes err") + }) + } + + getAlltemplates(){ //获取所有模板类型 + this.myhttp.getAllServiceTemplates() + .subscribe((data)=>{ + console.log(data) + this.templates = data; + this.template1 = data[0]; + this.template2 = data[1]; + this.template3 = data[2]; + // this.filterTemplates();//分类 + },(err)=>{ + + }) + } + // filterTemplates(){ //模板类型分类，本地配置文件 + // this.templates1 = []; + // this.templates2 = []; + // this.templates3 = []; + // this.templates.forEach((item)=>{ + // this.templateSubTypes[this.templateTypeSelected].sotnvpn.find((d)=>{ + // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID + // })?this.templates1.push(item):null; + // this.templateSubTypes[this.templateTypeSelected].site.find((d)=>{ + // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID + // })?this.templates2.push(item):null; + // if(this.templateTypeSelected=="CCVPN"){ + // this.templateSubTypes[this.templateTypeSelected].sdwan.find((d)=>{ + // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID + // })?this.templates3.push(item):null; + // } + // }) + // this.template1 = this.templates1[0]; + // this.template2 = this.templates2[0]; + // if(this.templates3[0]){ + // this.template3 = this.templates3[0]; + // } + // } + + + // 确定、取消 + createshow = false; + createData:Object={}; + handleOk2(): void { + console.log('Button ok clicked!'); + this.isVisible2 = false; + let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}}; + let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}}; + + this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2; + this.createshow = true; + } + // handleCancel(): void { + // console.log('Button cancel clicked!'); + // this.isVisible2 = false; + // } + + + //表格数据 + tableData = []; + pageIndex = 1; + pageSize = 10; + total = 100; + loading = false; + sortName = null; + sortValue = null; + getTableData(){ + // 查询参数: customer serviceType 当前页码，每页条数，排序方式 + let paramsObj = { + customer:this.customerSelected, + serviceType:this.serviceTypeSelected, + pageIndex:this.pageIndex, + pageSize:this.pageSize, + serviceIdSort:this.sortValue + } + this.myhttp.getServicesTableData(paramsObj) + .subscribe((data)=>{ + console.log(data); + this.total = data.body.total; + this.tableData = data.body.tableList; + },(err)=>{ + console.log(err); + }) + } + sort(sort: { key: string, value: string }): void { + console.log(sort); + this.sortName = sort.key; + this.sortValue = sort.value; + this.getTableData(); + } + searchData(reset:boolean = false){ + console.log(reset) + this.getTableData(); + } + + scaleService(){ + console.log("scaleService!"); + } + updataService(){ + console.log("updataService!"); + } + deleteService(){ + console.log("deleteService!"); + } + + //表格数据 + tableData2 = []; + getTableData2(){ + let params = { + customerId:this.customerSelected.id, + serviceType:this.serviceTypeSelected + } + this.myhttp.getInstanceTableData(params) + .subscribe((data)=>{ + this.pageIndex = 1; + this.tableData2 = []; + console.log(data) + // data.results.forEach((item)=>{ + // item["sotnvpnSer"] = item["service-subscription"]["service-instances"]["service-instance"].find((d)=>{ + // return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{ + // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"] + // })?item["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{ + // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"] + // })?item["Type"]="CCVPN":null + // }) + + // if(item["sotnvpnSer"]){ + // this.tableData2.push(item); + // } + // }) + + //---------数据结构有问题，模拟只有一组数据情况---------// + data["sotnvpnSer"] = data["service-instance"].find((d)=>{ + return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{ + return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"] + })?d["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{ + return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"] + })?d["Type"]="CCVPN":null + }) + let inputParams = JSON.parse(data["sotnvpnSer"]["input-parameters"]).service.parameters.requestInputs; + let descriptionName = Object.keys(inputParams).find((item)=>{ return item.endsWith("_description")}); + data["sotnvpnSer"]["description"] = inputParams[descriptionName]; + data["sotnvpnSer"]["status"] = "Active"; + this.tableData2.push(data); + + console.log(this.tableData2) + },(err)=>{ + console.log(err); + }) + } + + // 显示详情 + detailshow = false; + detailData:Object; + showDetail(service){ + service["siteSer"]=[]; + service["sdwanSer"]=[]; + service["customer"]=this.customerSelected; + service["serviceType"] = this.serviceTypeSelected; + // service["service-subscription"]["service-instances"]["service-instance"].forEach((item)=>{ + // this.templateSubTypes[service.Type].site.find((d)=>{ + // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] + // })?service["siteSer"].push(item):null; + // if(service.Type=="CCVPN"){ + // this.templateSubTypes[service.Type].sdwan.find((d)=>{ + // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] + // })?service["sdwanSer"].push(item):null; + // } + // }) + service["service-instance"].forEach((item)=>{ + this.templateSubTypes[service.sotnvpnSer.Type].site.find((d)=>{ + return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] + })?service["siteSer"].push(item):null; + if(service.sotnvpnSer.Type=="CCVPN"){ + this.templateSubTypes[service.sotnvpnSer.Type].sdwan.find((d)=>{ + return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] + })?service["sdwanSer"].push(item):null; + } + }) + this.detailshow = true; + this.detailData = service; + console.log(service); + } + // 删除 确认模态框 + deleteInstace(service){ + // 创建确认框 + this.modalService.confirm({ + nzTitle : 'Are you sure delete this instance?', + nzContent : `Instance ID: <b class="deleteModelContent"> ${service.sotnvpnSer["service-instance-id"]}</b>`, + nzOkText : 'Yes', + nzOkType : 'danger', + nzOnOk : () => { + console.log(service); + let allprogress = {}; //所有进度值，以operationId为键 + let querypros = []; //所有查询 + service.sotnvpnSer.rate = 0; + service.sotnvpnSer.status = "deleting"; + // let deletePros = service["service-subscription"]["service-instances"]["service-instance"].map((item)=>{ + // let id = item["service-instance-id"]; + // return new Promise((res,rej)=>{ + // this.myhttp.deleteInstance(id) + // .subscribe((data)=>{ + // let obj = {serviceId:id,operationId:data.operationId} + // let updata = (prodata)=>{ + // allprogress[prodata.operationId] = prodata.progress; + // let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); + // service.sotnvpnSer["rate"]=average; + // } + // querypros.push(this.queryProgress(obj,updata)); + // res(); + // }) + // }) + // }) + let deletePros = service["service-instance"].map((item)=>{ + let params = { + globalSubscriberId:this.customerSelected.id, + serviceType:this.serviceTypeSelected, + serviceInstanceId:item["service-instance-id"] + } + return new Promise((res,rej)=>{ + this.myhttp.deleteInstance(params) + .subscribe((data)=>{ + let obj = {serviceId:params.serviceInstanceId,operationId:data.operationId} + let updata = (prodata)=>{ + allprogress[prodata.operationId] = prodata.progress; + let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); + service.sotnvpnSer["rate"]=average; + } + querypros.push(this.queryProgress(obj,updata)); + res(); + }) + }) + }) + console.log(deletePros) + Promise.all(deletePros).then(()=>{ + Promise.all(querypros).then((data)=>{ + console.log(data); + service.sotnvpnSer.rate = 100; + service.sotnvpnSer.status = "deleted"; + setTimeout(()=>{ + this.getTableData(); + },1000) + }) + }) + + }, + nzCancelText: 'No', + nzOnCancel : () => console.log('Cancel') + }); + } + + + closeCreate(obj){ + if(!obj){ + this.createshow = false; //关闭创建窗口 + return false; + } + this.createshow = false; //关闭创建窗口 + console.log(obj); + let newData; //主表格中新创建的服务数据 + let stageNum = 0; //不同阶段进度，用于后续服务进度相加； + // -------------------------------------------------------------------------- + // obj.groupbody.map((group)=>{ //所有创建 + // return this.createService(group) + // }) + // obj.sitebody.map((group)=>{ //所有创建 + // console.log(group) + // return this.createService(group) + // }) + // ----------------------------------------------------------------------------- + this.createService(obj.vpnbody).then((data)=>{ + console.log(data) + newData = { //主表格中新创建的服务数据 + 'service-instance-id':data["serviceId"], + 'service-instance-name':obj.vpnbody.service.name, + description:obj.vpnbody.service.description, + status:"creating", + rate:0, + } + this.tableData2 = [{sotnvpnSer:newData},...this.tableData2]; + let updata = (prodata)=>{ + newData.rate = Math.floor(prodata.progress/3); + } + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + return this.queryProgress(queryParams,updata); + }).then((data)=>{ + console.log(data); + stageNum = newData.rate; //阶段进度值更新； + let allprogress = {}; //所有进度值，以operationId为键 + let querypros = []; //所有查询 + let createPros = obj.groupbody.map((group)=>{ //所有创建 + return this.createService(group).then((data)=>{ + console.log(data); + let updata = (prodata)=>{ + allprogress[prodata.operationId] = prodata.progress; + let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) + newData.rate = Math.floor(average/3) + stageNum; + } + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + querypros.push(this.queryProgress(queryParams,updata)) + }) + }) + + return new Promise((res)=>{ + Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕 + Promise.all(querypros).then((data)=>{ + console.log(data); + res("site--begin"); + }) + }) + }) + }).then((data)=>{ + console.log(data); + stageNum = newData.rate; //阶段进度值更新； + let allprogress = {}; + let querypros = []; //所有查询 + let createPros = obj.sitebody.map((group)=>{ //所有创建 + return this.createService(group).then((data)=>{ + console.log(data); + let updata = (prodata)=>{ + allprogress[prodata.operationId] = prodata.progress; + let average =((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) + newData.rate = Math.floor(average/3) + stageNum; + } + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + querypros.push(this.queryProgress(queryParams,updata)) + }) + }) + console.log(createPros); + Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕 + Promise.all(querypros).then((data)=>{ + console.log(data); + newData.rate = 100; + newData.status = "completed"; + setTimeout(()=>{ + this.getTableData(); + },1000) + }) + }) + }) + + } + + createService(params){ + let mypromise = new Promise((res,rej)=>{ + this.myhttp.createInstance(params) + .subscribe((data)=>{ + + res(data.service); + }) + }) + return mypromise; + } + + queryProgress(obj,callback){ + let mypromise = new Promise((res,rej)=>{ + // let data = { + // operationStatus:{ + // "operationId": "XXXXXX", + // "operation": "create|delete|update|scale", + // "result": "finished|error|processing", + // "reason": "", + // "userId": "", + // "operationContent": "Be creating pop.", + // "progress": 0, + // "operateAt": "", + // "finishedAt": "" + // } + // } + let requery = ()=>{ + this.myhttp.getProgress(obj) + .subscribe((data)=>{ + if(data.operationStatus.progress==undefined){ + console.log(data); + setTimeout(()=>{ + requery(); + },5000) + return false; + } + if(data.operationStatus.progress < 100){ + callback(data.operationStatus); + setTimeout(()=>{ + requery(); + },5000) + }else { + res(data.operationStatus); + } + }) + // setTimeout(()=>{ + // console.log(data.operationStatus.progress) + // data.operationStatus.progress++; + // if(data.operationStatus.progress<100){ + // callback(data.operationStatus); + // requery() + // }else{ + // callback(data.operationStatus); + // res(data.operationStatus) + // } + // },100) + } + requery(); + }) + return mypromise; + } + + + // 名字转换参数匹配 --> 传给子组件用 + namesTranslate:Object; + inputNamests(){ + this.myhttp.inputNamesTransform() + .subscribe((data)=>{ + this.namesTranslate = data; + }) + } + +} diff --git a/usecaseui-portal/src/app/services/services.component.html b/usecaseui-portal/src/app/services/services.component.html new file mode 100644 index 00000000..c4fddfc0 --- /dev/null +++ b/usecaseui-portal/src/app/services/services.component.html @@ -0,0 +1,18 @@ +<!-- + Copyright (C) 2018 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. +--> +<p> + services works! +</p> diff --git a/usecaseui-portal/src/app/services/services.component.less b/usecaseui-portal/src/app/services/services.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/services/services.component.less diff --git a/usecaseui-portal/src/app/services/services.component.spec.ts b/usecaseui-portal/src/app/services/services.component.spec.ts new file mode 100644 index 00000000..2e76b9f9 --- /dev/null +++ b/usecaseui-portal/src/app/services/services.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServicesComponent } from './services.component'; + +describe('ServicesComponent', () => { + let component: ServicesComponent; + let fixture: ComponentFixture<ServicesComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ServicesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ServicesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/services/services.component.ts b/usecaseui-portal/src/app/services/services.component.ts new file mode 100644 index 00000000..eec235b4 --- /dev/null +++ b/usecaseui-portal/src/app/services/services.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-services', + templateUrl: './services.component.html', + styleUrls: ['./services.component.less'] +}) +export class ServicesComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} |