diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
59 files changed, 11964 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.css b/usecaseui-portal/src/app/views/alarm/alarm.component.css new file mode 100644 index 00000000..25bf187e --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.css @@ -0,0 +1,164 @@ +/* + 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 .search { + margin-left: 20px; + height: 30px; + padding: 0 10px; +} +.select .search span { + color: #fff; + font-weight: 400; +} +.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; + padding-bottom: 24px; +} +.content .chart h3 { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + padding: 20px 15px; + margin: 0; + width: 12%; + display: inline-block; +} +.content .chart .AlarmChart { + height: 0px; + overflow: hidden; + border-bottom: 1px solid #f5f5f5; + transition: all 0.3s linear; +} +.content .chart .alarmChart-active { + height: 386px; +} +.content .chart .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; +} +.content .chart .open-close:hover { + background: url(../../../assets/images/open-close.png) no-repeat center -79px; +} +.content .chart .open-close-active { + background: url(../../../assets/images/open-close.png) center -1px; +} +.content .chart .open-close-active:hover { + background: url(../../../assets/images/open-close.png) no-repeat center -53px; +} +.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/views/alarm/alarm.component.html b/usecaseui-portal/src/app/views/alarm/alarm.component.html new file mode 100644 index 00000000..312ec236 --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.html @@ -0,0 +1,138 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> <span (click)="detailHide()" style="cursor:pointer; float:right;" *ngIf="detailshow">Alarm</span> <span *ngIf="detailshow">Device Alarm Details</span> </h3> +<div style="padding:0px 20px 20px 20px;"> + <div class="charts" [@showHideAnimate]="state"> + <div class="chartsleft"> + <div class="active sctive_closed"> + <div>Active</div> + <div>13,980</div> + <div><nz-progress [nzPercent]="30" [nzShowInfo]="false"></nz-progress></div> + <div>There are 13980 faults waiting to be solved</div> + </div> + <div class="closed sctive_closed"> + <div>Closed</div> + <div>23,980</div> + <div><nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress></div> + <div>23,980 faults have been fixed</div> + </div> + </div> + <div class="chartsright"> + <span>Daily Total</span> + <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + </div> + </div> + <div class="select" [@showHideAnimate]="state"> + <div class="query_criteria"> + <div class="query_item"> + <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> + </div> + <div class="query_item" style="margin-left: 1.5%;"> + <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> + </div> + <div class="query_item" style="margin-left:-2%;"> + <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> + </div> + <div class="query_time" style="margin-left: -3%;"> + <span>Report Time: </span> + <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" + ></nz-range-picker> + <!-- <nz-range-picker [nzFormat]="dateFormat"></nz-range-picker> --> + </div> + <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> + </div> + </div> + <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>Active</h5> + <p>{{alarmList.activeNum }}</p> + </li> + </ul> + </div> --> + <!-- <div class="chart"> + <h3>Alarm Chart</h3> + <div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}"> + <app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line> + </div> + </div> --> + <div class="tablelist"> + <nz-table #nzTable [nzData]="list" [(nzPageSize)]="pageSize" nzShowSizeChanger nzShowQuickJumper + [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="5%" style="padding-left:20px;">NO</th> + <th nzWidth="12%">Source Name</th> + <th nzWidth="7%">Priority</th> + <th nzWidth="18%">SpecificProblem</th> + <th nzWidth="15%">Report Time</th> + <th nzWidth="15%">Clear Time</th> + <th nzWidth="8%">Status</th> + <th nzWidth="10%">Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index;"> + <td style="padding-left: 20px;">{{i+1}}</td> + <td>{{item.sourceName}}</td> + <td>{{item.priority}}</td> + <td>{{item.specificProblem}}</td> + <td>{{item.startEpochMicrosec | date:'yyyy-MM-dd HH:mm:ss'}}</td> + <td>{{item.startEpochMicrosecCleared | date:'yyyy-MM-dd HH:mm:ss'}}</td> + <td>{{item.status}}</td> + <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td> + </tr> + </tbody> + </nz-table> + </div> + </div> + <div [@showHideAnimate]="state2"> + <app-details [detailId]="detailId"></app-details> + </div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.less b/usecaseui-portal/src/app/views/alarm/alarm.component.less new file mode 100644 index 00000000..92c9b7a4 --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.less @@ -0,0 +1,244 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 500 16px/16px "ArialMT"; + color: #3C4F8C; + margin: 20px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.select { + margin-bottom: 15px; + width: 100%; + .query_criteria { + width: 100%; + .query_item { + width: 20%; + display: inline-block; + span { + display: inline-block; + font: 500 13px "ArialMT"; + color: #3C4F8C; + } + nz-dropdown { + vertical-align: middle; + width: 55%; + :hover{ + border-color: #48C6EF; + } + button { + width: 100%; + height: 30px; + background-color: #fff; + text-align: left; + border-color: #EEEEEE ; + border-radius: 2px; + span { + font-weight: 400; + color:rgba(60,79,140,0.5); + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + } + } + + .query_time{ + display: inline-block; + span { + font: 500 13px "ArialMT"; + color: #3C4F8C; + } + } + .search { + margin-left: 0.8%; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } + } +} +.charts{ + width: 100%; + height: 250px; + margin-bottom: 25px; + .chartsleft { + width: 30%; + height: 100%; + float: left; + margin-right: 2%; + color: #fff; + font-family:"ArialMT"; + .sctive_closed { + height: 48.75%; + padding: 12px; + width: 100%; + :first-child{ + font-size: 14px; + } + :nth-child(2) { + font-size: 18px; + } + :nth-child(3) { + font-size: 12px; + } + } + .active { + margin-bottom: 5px; + background: -webkit-linear-gradient(left, #FB7788 , #FB93C2); /* Safari 5.1 - 6.0 */ + background: -o-linear-gradient(right, #FB7788, #FB93C2); /* Opera 11.1 - 12.0 */ + background: -moz-linear-gradient(right, #FB7788, #FB93C2); /* Firefox 3.6 - 15 */ + background: linear-gradient(to right, #FB7788 , #FB93C2); /* 标准的语法（必须放在最后） */ + } + .closed { + margin-top: 2px; + background: -webkit-linear-gradient(left, #7A8BAE , #A6BFE4); /* Safari 5.1 - 6.0 */ + background: -o-linear-gradient(right, #7A8BAE , #A6BFE4); /* Opera 11.1 - 12.0 */ + background: -moz-linear-gradient(right, #7A8BAE , #A6BFE4); /* Firefox 3.6 - 15 */ + background: linear-gradient(to right, #7A8BAE , #A6BFE4); /* 标准的语法（必须放在最后） */ + } + + } + .chartsright { + background-color: #fff; + width: 68%; + padding: 20px; + float: left; + height: 100%; + .picker { + float: right; margin-right: 3%; + } + .datapicker { + padding-left: 700px; + } + } +} +.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; + padding-bottom: 24px; + h3 { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + padding: 20px 15px; + margin: 0; + width: 12%; + display: inline-block; + } + .AlarmChart { + height: 0px; + overflow: hidden; + border-bottom: 1px solid #f5f5f5; + transition: all 0.3s linear; + } + .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; + } + } + } + } +} + + + + + diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts b/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts new file mode 100644 index 00000000..9f01597e --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.spec.ts @@ -0,0 +1,66 @@ +import { async, ComponentFixture, TestBed, inject, fakeAsync } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { NgxEchartsModule } from 'ngx-echarts'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core'; +import { HttpClientModule } from '@angular/common/http'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; + +import { AlarmComponent } from './alarm.component'; +import { DetailsComponent } from '../../shared/components/details/details.component'; +import { LineComponent } from '../../shared/components/charts/line/line.component'; +import { HomesService } from '../../core/services/homes.service'; + +fdescribe('AlarmComponent', () => { + let component: AlarmComponent; + let fixture: ComponentFixture<AlarmComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [AlarmComponent, DetailsComponent, LineComponent], + imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), + NgZorroAntdModule.forRoot(), + NgxEchartsModule, + HttpClientModule, + BrowserAnimationsModule, + HttpClientTestingModule], + providers: [TranslateService, HomesService, + { provide: NZ_I18N, useValue: en_US }], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA, + NO_ERRORS_SCHEMA + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlarmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', inject([HttpTestingController, HomesService], + (httpMock: HttpTestingController, service: HomesService) => { + expect(component).toBeTruthy(); + })); + + it('expects service to fetch data with proper sorting', + inject([HttpTestingController, HomesService], + (httpMock: HttpTestingController, service: HomesService) => { + // We call the service + service.getqueryAllSourceNames().subscribe(data => { + expect(data.pageInfo.totalRecordCount).toBe(21); + expect(data.pageInfo.pageNumber).toBe(0); + expect(data.data.length).toBe(7); + }); + // We set the expectations for the HttpClient mock + const req = httpMock.expectOne('http://.../data/contacts'); + expect(req.request.method).toEqual('GET'); + // Then we set the fake data to be returned by the mock + req.flush({ data: ...}); + }) + ); +}); diff --git a/usecaseui-portal/src/app/views/alarm/alarm.component.ts b/usecaseui-portal/src/app/views/alarm/alarm.component.ts new file mode 100644 index 00000000..32e3456f --- /dev/null +++ b/usecaseui-portal/src/app/views/alarm/alarm.component.ts @@ -0,0 +1,301 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core'; +import { HomesService } from '../../core/services/homes.service'; +import { showHideAnimate, slideToRight } from '../../animates'; +import { DatePipe } from '@angular/common'; +@Component({ + selector: 'app-alarm', + templateUrl: './alarm.component.html', + styleUrls: ['./alarm.component.less'], + animations: [ + showHideAnimate, slideToRight + ], + providers: [DatePipe] +}) +export class AlarmComponent implements OnInit { + size = 'day'; + @HostBinding('@routerAnimate') routerAnimateState; //Routing animation + public currentPage: number = 1; + public pageSize: number = 10; + public sourceName: string = ''; + public priority: string = ''; + public startTime: string = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000); + public endTime: string = this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss'); + public vfStatus: string = ''; + public sourceNameList: Array<any> = ['---auto---']; + list: any; + sourcenames: any; + constructor( + private datePipe: DatePipe, + private myhttp: HomesService) { } + ngOnInit() { + this.getAlarmFormData(); + this.getSourceNames(); + + // this.getstatuscount(); + } + + // Filter box + sourceNameSelected = this.sourceNameList[0]; + + priorityList = ['---auto---', 'Critical', 'Major', 'Minor', 'Warning']; + prioritySelected = this.priorityList[0]; + + + statusList = ['---auto---', 'active', 'Close']; + statusSelected = this.statusList[0]; + + choseSourceName(item) { + if (item == "---auto---") { + this.sourceName = ''; + } else { + this.sourceName = item; + } + this.sourceNameSelected = item; + + } + chosePriority(item) { + this.prioritySelected = item; + if (item == "---auto---") { + this.priority = ''; + } else { + this.priority = item; + } + } + choseStatus(item) { + this.statusSelected = item; + if (item == "---auto---") { + this.vfStatus = ''; + } else { + this.vfStatus = item; + } + } + getSourceNames() { + this.myhttp.getSourceNames().subscribe((data) => { + for (let i = 0; i < data.length; i++) { + this.sourceNameList.push(data[i]); + } + this.sourceNameSelected = this.sourceNameList[0]; + }) + } + + // Date screening + dateRange = [(new Date(), -30), new Date()]; + onChange(result: Date): void { + this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd'); + this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd'); + } + dateRange2 = [(new Date(), -30), new Date()]; + onChange2(result: Date): void { + this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd'); + this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd'); + } + + // total + alarmList = { + all: 0, + closed: 0, + activeNum: 0 + } + // total data + // getstatuscount() { + // this.myhttp.getstatuscount().subscribe((data) => { + // this.alarmList.activeNum = data[0]; + // this.alarmList.closed = data[1]; + // this.alarmList.all = (data[0] - 0) + (data[1] - 0); + + // }) + // } + getAlarmFormData() { + this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => { + this.list = data.alarms; + }) + // this.getAlarmChartData(event); + } + getAlarmChartData() { + let paramsObj = { + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: 'day' + } + this.myhttp.getHomeAlarmChartData(paramsObj) + .subscribe((data) => { + this.alarmChartData = { + xAxis: { + data: data.dateList + }, + series: [ + { data: data.allList }, + { data: data.ActiveList }, + ] + } + }, (err) => { + console.log(err); + }) + } + // day alarmchartdata + // day() { + // let paramsObj = { + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: "day" + // } + // this.myhttp.getHomeAlarmChartData(paramsObj) + // .subscribe((data) => { + // this.alarmChartData = { + // xAxis: { + // data: data.dateList + // }, + // series: [ + // { data: data.allList }, + // { data: data.ActiveList }, + // { data: data.closedList } + // ] + // } + // }, (err) => { + // console.log(err); + // }) + // } + // month() { + // let paramsObj = { + // sourceName: this.sourceName, + // startTime: this.startTime, + // endTime: this.endTime, + // format: "month" + // } + // this.myhttp.getHomeAlarmChartData(paramsObj) + // .subscribe((data) => { + // this.alarmChartData = { + // xAxis: { + // data: data.dateList + // }, + // series: [ + // { data: data.allList }, + // { data: data.ActiveList }, + // { data: data.closedList } + // ] + // } + // }, (err) => { + // console.log(err); + // }) + // } + //Line chart + alarmShow = false; + alarmChartData: Object; + alarmChartInit: Object = { + height: 200, + option: { + legend: { + icon: "circle", + itemWidth: 10, + itemHeight: 10, + bottom: '-5px', + data: ['Active', 'Fixed'] + }, + tooltip: { + trigger: 'axis', + }, + dataZoom: [ + { + type: 'slider', + show: true, + start: 1, + height: 10, + end: 60, + bottom: '9%' + } + ], + xAxis: { + data: [] + }, + series: [ + { + name: 'Active', + type: 'bar', + data: [], + barWidth: 10, + barGap: 1, + itemStyle: { + normal: { + barBorderRadius: [5], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB7788' + }, { + offset: 1, color: '#FB93C2' + }], + }, + opacity: 1, + } + } + }, + { + name: 'Fixed', + type: 'bar', + data: [], + barWidth: 10, + barGap: 1, + itemStyle: { + normal: { + barBorderRadius: [5], + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#7A8BAE' + }, { + offset: 1, color: '#A6BFE4' + }], + }, + opacity: 1, + } + } + }, + ] + } + }; + sort(e) { + + } + //Detail page title display + detailshow = false; + // Show hidden animation + state = "show"; + state2 = "hide"; + detailId: string; + detailShow(item) { + this.state = 'hide'; + this.state2 = 'show'; + this.detailshow = true; + this.detailId = item.id; + } + detailHide() { + this.state = 'show'; + this.state2 = 'hide'; + this.detailshow = false; + } +} diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css new file mode 100644 index 00000000..efeec683 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.css @@ -0,0 +1,321 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #F7F8FC; + overflow-y: auto; +} +.creation-model{ + position: relative; +} +.top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} +.model .back,.model .back:hover{ + position: absolute; + top: 10px; + right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:url("../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; + border-radius:4px; + color: #D7D7D7; + cursor: pointer; +} +.model .back:hover{ + background: url("../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; +} +.top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; + +} +.model .submit{ + position: absolute; + width:90px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background:#0DA9E2; + border-radius:4px; + border: none!important; + border-color:rgba(0,0,0,0)!important; +} +.model .submit:hover{ + background:#09C6E2; + border: none; +} +.model .creation { + width: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 15px; +} +.model .creation h3 { + height: 20px; + font: 700 16px/20px "Arial"; + margin: 5px 0px; + color: #000; +} +/* SOTN VPN */ +.model .creation .service-title{ + margin:60px 50px; +} +.model .creation .service-title .info-inputs{ + width:400px; + height: 42px; + display: inline-block; +} +.model .creation .service-title span{ + height: 42px; + line-height: 42px; + vertical-align: middle; +} +.model .creation .service-title .lable{ + display: inline-block; + width: 100px; + font: 700 14px "Arial"; + color: #3C4F8C; + height: 42px; + line-height: 42px; + vertical-align: middle; + margin-left: 5px; +} +.model .creation .service-title input { + width: 230px; + height: 42px; + border-radius:4px; + outline: none; + margin-right: 50px; +} +/* Site List */ +/* addsite model */ +.model .sitemodel,.model .sotnnpnmodel{ + position: absolute; + z-index: 1001; + left: 50px; + top: 60px; + background-color: #fff; + width:1500px; + height: 81%; + border-radius:2px; + overflow:auto; +} +.model .sotnnpnmodel{ + width: 1000px; + height: 53%; + top:200px; + left: 50%; + margin-left: -500px; +} +.model .sitemodel h3,.model .sotnnpnmodel h3{ + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + color: #06A7E2; + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; +} +.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { + padding: 10px 20px 0; +} +.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { + display: inline-block; + height: 35px; + line-height: 35px; + width: 24.5%; + margin-bottom: 20px; +} +.model .sotnnpnmodel .inputs ul li{ + width: 31%; +} +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select { + width: 186px; + float: right; + margin-right: 60px; +} +.model .sotnnpnmodel .inputs input{ + width: 186px; + float: left; + margin-left: 20px; +} +.model .sitemodel .action,.model .sotnnpnmodel .action { + text-align: center; + margin-top: 30px; + margin-bottom: 20px; + cursor: pointer +} +.model .sotnnpnmodel .action{ + margin-top: 70px; +} +.model .sitemodel .action button,.model .sotnnpnmodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ + background: #0DA9E2; + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ + background:#09C6E2; +} + +.model nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} + +/* site table */ +.sitemodel h3 button,.sotnnpnmodel h3 button{ + color: #D7D7D7; + width:32px; + height:32px; + background:#ffffff; + border-radius:4px; + border:1px solid #D7D7D7; +} +.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ + background:#ffffff; + color: #0DA9E2; + border:1px solid #0DA9E2; +} +.sitemodel h3>button,.sotnnpnmodel h3>button{ + float: right; + width: 30px; + height: 30px; + margin-right: 15px; +} +.model nz-table tbody th{ + color:rgba(60,79,140,0.5); + font-size: 16px; +} +.model .site nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} +/* WAN Port */ + +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; +} + + +/* chart */ +.model .chart { + width: 98%; + padding: 10px; + margin: 0 auto; + color: #06A7E2; + font-size: 16px; + font-weight: 500; + margin-bottom: 30px; + background: #EEF9FF; + border-radius:4px; +} +.model .chart #createChart { + width: 100%; + height: 220px; + 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; +} +.model .creation .sotnvpn,.model .creation .site{ + background: #fff; + padding: 30px 30px 0 30px; +} +.siteWanTab{ + width: 96%; + margin: 0 auto; + margin-top: 10px; +} +.siteWanTab th{ + padding: 10px 8px; + color: #3C4F8C; + font-size: 16px; +} +.siteWanTab tr td{ + padding: 10px 5px; +} +.siteWanTab .tr-border{ + border-bottom: 1px solid #EDEDED; +} +.addListBtn{ + margin-right: 30px; + color: #06A7E2; + border: none; + background: rgba(229,238,252,0.8); + cursor: pointer; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html new file mode 100644 index 00000000..1fc9a500 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html @@ -0,0 +1,275 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="model creation-model"> + + <div class="top-title"> + <h3 class="title fl">{{createParams.commonParams.templateType}} + {{"i18nTextDefine_InstanceCreation" | translate}} </h3> + <div class="fl" style="width: 20%"> + <button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span> + </button> + <button class="back" nz-button (click)="goback()"></button> + </div> + </div> + <!-- chart --> + <div class="chart"> + <span style="padding: 25px;display: inline-block;"> + {{"i18nTextDefine_InstanceTopology" | translate}} + </span> + <div id="createChart"> + <svg width="100%" height="100%"> + <image id="domain" xlink:href="assets/images/domain1.png" style="width: 15%" x="40%" y="0" /> + </svg> + </div> + </div> + <!--Template resolution : Three major items--> + <div class="creation"> + <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle> + <nz-tab nzTitle="Service Info"> + <div class="service-title" style="clear: both"> + <span style="color: red;">*</span><span class="lable" style="width: 60px">name:</span> + <input nz-input [(ngModel)]="this.templateParameters.service['name']" required="required"> + <span style="color: red;">*</span><span class="lable">description:</span> + <input nz-input [(ngModel)]="this.templateParameters.service['description']"> + </div> + </nz-tab> + <nz-tab nzTitle="Sdwanvpnresource List"> + <div class="sotnvpn clearfix"> + <div style="clear: both;height: 10px"> + <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3> + <button nz-button (click)="addSotnvpn()" class="addListBtn" + style="float: right;margin-right: 10px"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}} + </button> + </div> + <nz-table #sotnVpnTable [nzData]="sotnVpnTableData" [nzShowPagination]="false" nzSize="small"> + <thead> + <tr> + <th width="30%"> NO.</th> + <th *ngFor="let key of getKeys(this.sotnInfo)">{{key.split("_")[1] || key}}</th> + <th width="10%"> Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of sotnVpnTable.data; let i = index; "> + <td>{{i+1}}</td> + <td *ngFor="let keys of getKeys(this.sotnInfo);let a = index;"> + {{item[keys]}} + </td> + <td> + <span class="action" (click)="editSotnVpn(i+1)"><i + class="anticon anticon-edit"></i></span> + + <span class="action" (click)="deleteSotnVpn(i+1)"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + </tbody> + </nz-table> + </div> + </nz-tab> + <nz-tab nzTitle="Sdwansiteresource List"> + <div class="site"> + <div style="height: 10px"> + <h3 style="float: left;color: #3C4F8C">Site List</h3> + <button nz-button (click)="addSite()" class="addListBtn" + style="float: right;margin-right: 10px"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <nz-table #siteTable [nzData]="siteTableData" [nzShowPagination]="false" nzSize="small"> + <thead> + <tr> + <th nzWidth="10%"> NO.</th> + <th *ngFor="let key of getKeys(this.siteBaseData)">{{key.split("_")[1] || key}}</th> + <th nzWidth="20%" style="text-align: center"> Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of siteTable.data; let i = index; "> + <td>{{i+1}}</td> + <td *ngFor="let keys of getKeys(this.siteBaseData);let a = index;"> + {{item[keys]}} + </td> + <td style="text-align: center"> + <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> + </tbody> + </nz-table> + </div> + </nz-tab> + </nz-tabset> + </div> + <!-- sotnVpnmodel --> + <div class="sotnnpnmodel" *ngIf="sotnVpnModelShow"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list"> + <span *ngIf="item.required" + style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lableShow}}:</span> + <input nz-input [(ngModel)]="sotnInfo[item.lable]" + title="{{item.description ? item.description:null }}" + required="{{item.required==true ? 'required':null}}"></li> + </ul> + </div> + <div> + <h3>Sdwansitelan List</h3> + <div> + <div style="width: 100%;text-align: right"> + <button nz-button (click)="addSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th> + <th width="7%"> Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" + [ngClass]="{'tr-border':item.tabInputShowSdwansitelan ==false}"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="!tabInputShowSdwansitelan[i]" + title="{{this.templateParameters.sotnvpn.sdwansitelan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}">{{item[key]}}</span> + <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] " + title="{{this.templateParameters.sotnvpn.sdwansitelan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}" + required="{{item.required==true ? 'required':null}}"> + </td> + <td> + <span class="action" (click)="editSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i + class="anticon anticon-edit" style="margin: 0 5px;"></i></span> + <span class="action" (click)="deleteSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="action"> + <button nz-button nzType="primary" + (click)="addSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + <button nz-button nzType="primary" (click)="addSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button> + </div> + </div> + <!-- sitemodel --> + <div class="sitemodel" *ngIf="siteModelShow"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list"> + <span *ngIf="item.required" + style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lableShow}}:</span> + <input nz-input [(ngModel)]="siteBaseData[item.lable]" title="{{item.description}}" + required="{{item.required==true ? 'required':null}}"></li> + </ul> + </div> + <div> + <h3>Sdwandevice</h3> + <div> + <div style="width: 100%;text-align: right"> + <button nz-button (click)="addSdwanDevice()" class="addListBtn"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.siteCpeData)">{{key}}</th> + <th width="7%"> Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of siteSdwanDevice; let i = index;" + [ngClass]="{'tr-border':item.tabInputShowDevice ==false}"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="!tabInputShowDevice[i]" + title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}">{{item[key]}}</span> + <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowDevice[i] " + title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}" + required="{{item.required==true ? 'required':null}}"> + </td> + <td> + <span class="action" (click)="editDevicePort(i+1,item,siteSdwanDevice)"><i + class="anticon anticon-edit" style="margin: 0 5px;"></i></span> + <span class="action" (click)="deleteDevicePort(i+1,item,siteSdwanDevice)"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + </tbody> + </table> + </div> + + + <h3>Sdwansitewan List</h3> + <div> + <div style="width: 100%;text-align: right"> + <button nz-button (click)="addSiteWan()" class="addListBtn"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th> + <th width="7%"> Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of siteWanData; let i = index;" + [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="!tabInputShowWanPort[i]" + title="{{this.templateParameters.site.sdwansitewan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}">{{item[key]}}</span> + <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] " + title="{{this.templateParameters.site.sdwansitewan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}" + required="{{item.required==true ? 'required':null}}"> + </td> + <td> + <span class="action" (click)="editWanPort(i+1,item,siteWanData)"><i + class="anticon anticon-edit" style="margin: 0 5px;"></i></span> + <span class="action" (click)="deleteWanPort(i+1,item,siteWanData)"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="action"> + <button nz-button nzType="primary" + (click)="addsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + <button nz-button nzType="primary" (click)="addsite_OK()">{{"i18nTextDefine_Add" | translate}}</button> + </div> + </div> + <div class="mask" *ngIf="siteModelShow || sotnVpnModelShow"></div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts new file mode 100644 index 00000000..30402412 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.spec.ts @@ -0,0 +1,24 @@ +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/views/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts new file mode 100644 index 00000000..214afbb7 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts @@ -0,0 +1,723 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import * as d3 from 'd3'; +import * as $ from 'jquery'; +import { MyhttpService } from '../../core/services/myhttp.service'; +import { el } from "@angular/platform-browser/testing/src/browser_util"; + +@Component({ + selector: 'app-ccvpn-creation', + templateUrl: './ccvpn-creation.component.html', + styleUrls: ['./ccvpn-creation.component.css'] +}) +export class CcvpnCreationComponent implements OnInit { + + constructor(private myhttp: MyhttpService) { } + @Input() createParams; + @Input() ccvpn_temParametersContent; + @Output() closeCreate = new EventEmitter(); + + ngOnInit() { + this.getccvpnTemParameters(this.ccvpn_temParametersContent); + } + + //tabBarStyle + tabBarStyle = { + "height": "58px", + "width": "694px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; + templateParameters = { + service: {}, + sotnvpn: { + info: {}, + sdwanvpnresource_list: [], + sdwansitelan_list: [] + }, + site: { + info: {}, + sdwansiteresource_list: [], + sdwandevice_list: [], + sdwansitewan_list: [] + } + }; + + bodyTemplateParameter = {}; + + // SOTN VPN List + sotnVpnTableData = []; + sotnInfo = {};//sotnmodel The first part of sotnInfo + sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table + sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data + tabInputShowSdwansitelan = [];//sdwansitelan Table input&span The status identifier of the label switching display + // Site List + siteTableData = []; + siteBaseData = {}; //sitemodel one sdwansiteresource_list + // cpe + siteSdwanDevice = []; //sitemodel SdwanDevice port Table data + siteCpeData = {}; //sitemodel two sdwandevice_list + tabInputShowDevice = [];//Device port Table input和span The status identifier of the label switching display + // Wan Port + siteWanData = []; //sitemodel three wan port Table data + siteWanParams = {}; //wan port Table Detailed parameters of each line of data + tabInputShowWanPort = [];//wan port Table input和span The status identifier of the label switching display + getKeys(item) { + return Object.keys(item); + } + + getccvpnTemParameters(data) { //Get template parameters + console.log(this.createParams); + if (typeof data["model"] == 'string') { + data = JSON.parse(data["model"]); + } + console.log(data); + let inputss = data["inputs"]; + let inputs = {}; + this.templateParameters.service = { + name: data.metadata["name"], + description: data.metadata.description, + serviceInvariantUuid: data.metadata.invariantUUID, + serviceUuid: data.metadata.UUID + }; + + //Screening separation sotnvpn data + Object.keys(inputss).map((items) => { + if (items.search("vpn") != -1) { + this.bodyTemplateParameter[items] = []; + inputss[items].map((item, index) => { + if (item["required"] != undefined) { + this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item); + } + if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { + this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item[Object.keys(item)[0]] + let sitelanKey = {}; + sitelanKey[Object.keys(item)[0]] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + }); + } + if (items.search("site") != -1) { + this.bodyTemplateParameter[items] = []; + inputss[items].map((item, index) => { + if (item["required"] != undefined) { + this.templateParameters["site"]["sdwansiteresource_list"].push(item); + } + if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("device") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { + this.templateParameters["site"]["sdwandevice_list"] = item[Object.keys(item)[0]]; + let sitelanKey = {}; + sitelanKey[Object.keys(item)[0]] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[Object.keys(item)[0]] instanceof Array === true) { + this.templateParameters["site"]["sdwansitewan_list"] = item[Object.keys(item)[0]]; + let sitelanKey = {}; + sitelanKey[Object.keys(item)[0]] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + }); + } + }); + this.showTemParametersSotnVpn(); + this.showTemParametersSite(); + console.log(this.bodyTemplateParameter, this.templateParameters) + } + + //sotnVpn data, after combining the structure, rendering the template data to the page + showTemParametersSotnVpn() { + //sotn Data analysis, structure assembly + this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.sotnInfo = Object.assign(this.sotnInfo, input); + } + } + }); + + this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); + } + } + }); + this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); + this.sotnSdwansitelanData.map((item, index) => { + this.tabInputShowSdwansitelan[index] = true; + }); + } + + //Site data, after combining the structure, rendering the template to the page + showTemParametersSite() { + //site Data analysis, structure assembly + this.templateParameters.site.sdwansiteresource_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.siteBaseData = Object.assign(this.siteBaseData, input); + } + } + }); + + this.templateParameters.site.sdwandevice_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteCpeData = Object.assign(this.siteCpeData, input); + } + } + }); + this.templateParameters.site.sdwandevice_list.map((item, index) => { + if (this.getKeys(item).indexOf("lable") == -1) { + this.templateParameters.site.sdwandevice_list.splice(index, 1) + } + }); + this.templateParameters.site.sdwansitewan_list.push( + { + ipMode: "", + description: "" + }, + { + publicIP: "", + description: "" + } + ); + + this.templateParameters.site.sdwansitewan_list.map((item, index) => { + let input = {}; + for (var keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); + } + } + }); + this.siteSdwanDevice.push(this.siteCpeData); + this.siteWanData.push(this.siteWanParams); + this.siteWanData.map((item, index) => { + this.tabInputShowDevice[index] = true; + }); + this.siteWanData.map((item, index) => { + this.tabInputShowWanPort[index] = true; + }); + + } + + //add,edit,delete sotnSdwansitelan + addSotnSdwansitelan() { + if (this.tabInputShowSdwansitelan.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited + return false; + } + let addNum = this.sotnSdwansitelanData.length; + let inputsData = Object.assign({}, this.sotnSdwansitelanParams); + Object.keys(inputsData).forEach((item) => {//Add a new line of empty data + if (item != "description") { + inputsData[item] = null; + } + }); + this.sotnSdwansitelanData[addNum] = inputsData; + this.tabInputShowSdwansitelan[addNum] = true; + this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; //Table refresh + } + editSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.tabInputShowSdwansitelan[num - 1] == false) { + this.tabInputShowSdwansitelan[num - 1] = true; + } else { + this.tabInputShowSdwansitelan[num - 1] = false; + } + } + deleteSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.sotnSdwansitelanData.length <= 1) { + return false; + } else { + + } + this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); + } + + //add,edit,delete SdwanDevice + addSdwanDevice() { + if (this.tabInputShowDevice.indexOf(true) > -1) {//当有正在编辑的一行数据时，不允许添加新的行 + return false; + } + let addNum = this.siteSdwanDevice.length; + let inputsData = Object.assign({}, this.siteCpeData); + Object.keys(inputsData).forEach((item) => {//新增一行空数据 + if (item != "description") { + inputsData[item] = null; + } + }); + this.siteSdwanDevice[addNum] = inputsData; + this.tabInputShowDevice[addNum] = true; + this.siteSdwanDevice = [...this.siteSdwanDevice]; //表格刷新 + } + + editDevicePort(num, item, siteSdwanDevice) { + if (this.tabInputShowDevice[num - 1] == false) { + this.tabInputShowDevice[num - 1] = true; + } else { + this.tabInputShowDevice[num - 1] = false; + } + } + + deleteDevicePort(num, item, siteSdwanDevice) { + if (this.siteSdwanDevice.length <= 1) { + return false; + } + this.siteSdwanDevice = this.siteSdwanDevice.filter((d, i) => i !== num - 1); + } + + //add,edit,delete siteWanPort + addSiteWan() { + if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited + return false; + } + let addNum = this.siteWanData.length; + let inputsData = Object.assign({}, this.siteWanParams); + Object.keys(inputsData).forEach((item) => {//Add a new line of empty data + if (item != "description") { + inputsData[item] = null; + } + }); + this.siteWanData[addNum] = inputsData; + this.tabInputShowWanPort[addNum] = true; + this.siteWanData = [...this.siteWanData]; //Table refresh + } + editWanPort(num, item, siteWanData) { + if (this.tabInputShowWanPort[num - 1] == false) { + this.tabInputShowWanPort[num - 1] = true; + } else { + this.tabInputShowWanPort[num - 1] = false; + } + } + deleteWanPort(num, item, siteWanData) { + if (this.siteWanData.length <= 1) { + return false; + } + this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); + } + + //siteModel,sotnVpnModel Display sign + siteModelShow = false; + sotnVpnModelShow = false; + addSotnvpn() { + this.sotnVpnModelShow = true; + this.isEditSotnVpn = 0; + } + addSite() { + this.siteModelShow = true; + this.isEditSite = 0; + } + + //add sotnVpn model + isEditSotnVpn = 0;//Edit serial number, No value, 0 means increase + addSotnVpn_OK() { + let inputs = { + "sdwansitelan_list": [] + }; + inputs = Object.assign(inputs, this.sotnInfo); + inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSotnVpn) { + // Edit status does not increase + this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; + this.sotnVpnTableData = [...this.sotnVpnTableData]; //Table refresh + } else { + this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; + } + Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + this.tabInputShowSdwansitelan.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnModelShow = false; + } + + addSotnVpn_cancel() { + Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnModelShow = false; + } + + editSotnVpn(num) { + this.sotnVpnModelShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.sotnSdwansitelanData.forEach((item, index) => { + this.tabInputShowSdwansitelan[index] = false; + }); + } + + deleteSotnVpn(num) { + this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); + } + + // addsite model + isEditSite = 0; //Edit serial number, No value, 0 means increase + addsite_OK() { + let inputs = { + "sdwandevice_list": [], + "sdwansitewan_list": [] + }; + inputs = Object.assign(inputs, this.siteBaseData); + inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => { + return Object.assign({}, item); + }); + inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSite) { + // Edit status does not increase + this.siteTableData[this.isEditSite - 1] = inputs; + this.siteTableData = [...this.siteTableData]; //Table refresh + } else { + this.siteTableData = [...this.siteTableData, inputs]; + } + + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = null; + }); + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + this.tabInputShowDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + this.tabInputShowWanPort.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + }); + console.log(this.siteTableData); + this.drawImage(this.siteTableData); + this.siteModelShow = false; + } + + addsite_cancel() { + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = null; + }) + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + + }); + this.siteModelShow = false; + } + + editSite(num) { //Edit and modify the selected site information + this.siteModelShow = true; + this.isEditSite = num; + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, item) + }); + this.siteSdwanDevice.forEach((item, index) => { + this.tabInputShowDevice[index] = false; + }); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, item) + }); + this.siteWanData.forEach((item, index) => { + this.tabInputShowWanPort[index] = false; + }); + } + + deleteSite(num) { + this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); + this.drawImage(this.siteTableData); + } + + // Site node graphic depiction + lines = []; + siteImage = []; + tpImage = []; + imgmap = { + '1': '../../../assets/images/domain1.png', + '2': '../../../assets/images/site.png' + }; + + drawImage(sitelist) { + let cx = 550; + let cy = 40; + let innerx1 = 720; //Left site pattern coordinate position + let innery1 = 40; + let ox = 950; + let oy = 50; + let innerx2 = 780;//Right site pattern coordinate position + let innery2 = 50; + let lateX1 = Math.random() * 30 + 55; + let lateX2 = 10; + let lateY1 = 15; + this.lines = sitelist.map((item, index) => { + let step = index + 1; + let x = cx; + let y = cy; + let innerX = innerx1; + let innerY = innery1; + if (step % 2 != 0) { //Left site pattern coordinate position + x = cx; + y = cy; + innerX = innerx1; + innerY = innery1; + if (step == 1) { + innerX = innerx1; + innerY = innery1; + } else { + x = cx - lateX1 * Math.ceil((step / 2)) >= 0 ? cx - lateX1 * Math.ceil((step / 2)) : -(cx - lateX1 * Math.ceil((step / 2))); + y = cy + lateY1 * Math.floor((step / 2)); + innerX = this.lines[step - 3].innerX - lateX2; + innerY = y; + } + } else { //Right site pattern coordinate position + x = ox; + y = oy; + innerX = innerx2; + innerY = innery2; + if (step / 2 == 1) { + innerX = innerx2; + innerY = innery2; + } else { + x = ox + lateX1 * (step / 2) >= 0 ? ox + lateX1 * (step / 2) : -(ox + lateX1 * (step / 2)); + y = oy + lateY1 * (step / 2 - 1); + innerX = this.lines[step - 3].innerX - lateX2; + innerY = y; + } + } + return { + img: "line", + site: item.sdwandevice_list[0].name, + x1: x, + y1: y, + x2: innerX, + y2: innerY, + innerX: innerX, + innerY: innerY + } + }); + this.render(this.imgmap, this.lines); + } + + render(imgmap, lines) { + + //enter + var svg = d3.select("svg"), + _g_lines = svg.selectAll('line.line') + .data(lines) + .enter() + .append('line') + .style('stroke', '#3fa8eb' + ) + .style('stroke-width', 2) + .attr('class', 'line') + .attr("x1", function (d) { + return d.x1; + }) + .attr("y1", function (d) { + return d.y1; + }) + .attr("x2", function (d) { + return d.x2; + }) + .attr("y2", function (d) { + return d.y2; + }), + _g_site = svg.selectAll('g.g-site') + .data(lines) + .enter() + .append('g') + .style('cursor', 'pointer') + .attr('class', 'g-site'); + _g_site.append('image') + .style("width", "50px") + .attr('xlink:href', function (d) { + return imgmap[2]; + }) + .attr("x", function (d) { + return d.x1 - 25; + }) + .attr("y", function (d) { + return d.y1 - 25; + }) + + //quit + svg.selectAll("g.g-site") + .data(lines) + .exit() //Select a picture without bound data + .remove(); + svg.selectAll("line.line") + .data(lines) + .exit() //Select the connection without binding data + .remove(); + + } + + modifyJosnKey(json, oddkey, newkey) { + + let val = json[oddkey]; + delete json[oddkey]; + json[newkey] = val; + } + + // submit createData + submit() { + let globalCustomerId = this.createParams.commonParams.customer.id; + let globalServiceType = this.createParams.commonParams.serviceType.name; + let servicebody = { + service: { + name: this.templateParameters.service["name"], + description: this.templateParameters.service["description"], + serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], + serviceUuid: this.templateParameters.service["serviceUuid"], + globalSubscriberId: globalCustomerId, //customer.id + serviceType: globalServiceType, //serviceType.value + parameters: { + locationConstraints: [], + resources: [], + requestInputs: {} + }, + } + }; + let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + siteresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { + sitewan = Object.keys(items)[0] + } + if (Object.keys(items)[0].search("device") != -1) { + device = Object.keys(items)[0] + } + }); + } + if (item.search("vpn") != -1) { + vpnresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1) { + sitelan = Object.keys(items)[0] + } + }); + } + }); + this.sotnVpnTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitelan) + } + }); + }); + this.siteTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitewan) + } + if (items.search("device") != -1) { + this.modifyJosnKey(item, items, device) + } + }); + }); + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); + } + if (item.search("vpn") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); + } + }); + console.log(servicebody); + + this.closeCreate.emit(servicebody); + + } + + goback() { + this.closeCreate.emit(); + } +} diff --git a/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css new file mode 100644 index 00000000..d5ad960d --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.css @@ -0,0 +1,365 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 10px; +} +.model { + background-color: #F7F8FC; + overflow-y: auto; +} +.creation-model{ + position: relative; + height: 100%; +} +.top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; +} +.model .submit{ + position: absolute; + width: 90px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background: #0DA9E2; + border-radius: 4px; + border: none!important; + border-color: rgba(0,0,0,0)!important; +} +.model .back,.model .back:hover{ + position: absolute; + top: 10px; + right: 20px; + display: inline-block; + width: 35px; + height: 35px; + background:url("../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; + border-radius:4px; + color: #D7D7D7; + cursor: pointer; +} +.model .back:hover{ + background: url("../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; +} +.top-title h3.title { + height: 35px; + width: 80%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + line-height:35px; + display: inline-block; +} + + +.model .detaildata { + width: 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 0; + color: #000; +} +.model .detaildata .service-title{ + margin:60px 50px; +} +.model .detaildata .service-title .info-inputs{ + width:400px; + height: 42px; + display: inline-block; +} +.model .detaildata .service-title span{ + height: 42px; + line-height: 42px; + vertical-align: middle; +} +.model .detaildata .service-title .lable{ + display: inline-block; + width: 100px; + font: 700 14px "Arial"; + color: #3C4F8C; + height: 42px; + line-height: 42px; + vertical-align: middle; + margin-left: 5px; +} +.model .detaildata .service-title .service-title-input { + width: 230px; + height: 42px; + border-radius:4px; + margin-right: 30px; + display: inline-block; +} +/* SOTN VPN */ +.model .detaildata .sotnvpn ul li { + display: inline-block; + height: 40px; + width: 24.5%; + margin-bottom: 40px; + float: left; +} +.model .detaildata .sotnvpn ul li span { + display: inline-block; + font-size: 14px; + font-weight: 500; + color:rgba(60,79,140,0.5); + margin-left: 10px; + vertical-align: middle; + float: left; + width: 110px; +} + +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ + width: 186px; + float: right; + margin-right: 60px; +} +.model .sotnnpnmodel .inputs input{ + width: 186px; + float: left; + margin-left: 20px; +} + +/* addsite model */ +.model .sitemodel,.model .sotnnpnmodel{ + position: absolute; + z-index: 1001; + left: 50px; + top: 60px; + background-color: #fff; + width:1500px; + height: 81%; + border-radius:2px; + overflow:auto; +} +.model .sotnnpnmodel{ + width: 1000px; + height: 53%; + top:200px; + left: 50%; + margin-left: -500px; +} +.model .sitemodel h3,.model .sotnnpnmodel h3{ + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + color: #06A7E2; + border-bottom: 2px solid; + border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; + border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; + border-radius:2px; +} +.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { + padding: 10px 20px 0; +} +.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { + display: inline-block; + height: 35px; + line-height: 35px; + width: 24.5%; + margin-bottom: 20px; +} +.model .sotnnpnmodel .inputs ul li{ + width: 31%; +} +.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span { + display: inline-block; + line-height: 35px; + font-size: 14px; + font-weight: 500; + color: #3C4F8C; + margin-left: 10px; + vertical-align: middle; + float: left; +} +.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{ + width: 186px; + float: right; + margin-right: 60px; +} +.model .sotnnpnmodel .inputs div{ + width: 186px; + float: left; + margin-left: 20px; +} +.model .sitemodel .action,.model .sotnnpnmodel .action { + text-align: center; + margin-top: 30px; + margin-bottom: 20px; + cursor: pointer +} +.model .sotnnpnmodel .action{ + margin-top: 70px; +} +.model .sitemodel .action button,.model .sotnnpnmodel .action button{ + width: 126px; + height:40px; + background:#EEEEEE; + border-radius:2px; + border: none!important; + color: #9DA7C5; + font-size: 16px; + margin: 0 15px; +} +.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ + background: #0DA9E2; + color: #fff; +} +.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ + background:#09C6E2; +} + +.model nz-table tbody td i.anticon:hover { + color: #3fa8eb; + cursor: pointer; +} + +/* site table */ +.sitemodel h3 button,.sotnnpnmodel h3 button{ + color: #D7D7D7; + width:32px; + height:32px; + background:#ffffff; + border-radius:4px; + border:1px solid #D7D7D7; +} +.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ + background:#ffffff; + color: #0DA9E2; + border:1px solid #0DA9E2; +} +.sitemodel h3>button,.sotnnpnmodel h3>button{ + float: right; + width: 30px; + height: 30px; + margin-right: 15px; +} + +/* site Detail */ + +.model .detaildata .site h3 .closeDetail { + cursor: pointer; + padding: 2px 15px; + color: #3fa8eb; +} + +.model .detaildata .sotnvpn,.model .detaildata .site{ + background: #fff; + padding: 30px 30px 0 30px; +} + +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 1000; + background: rgba(0, 0, 0, 0.65); + top:0; +} + +/* charts */ +.model .chart { + width: 98%; + padding: 10px; + margin: 0 auto; + color: #06A7E2; + font-size: 16px; + font-weight: 500; + margin-bottom: 30px; + background: #EEF9FF; + border-radius: 4px; +} +.model .chart #detailChart { + width: 100%; + height: 254px; + margin-top: 20px; + position: relative; +} +.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; +} +.siteWanTab{ + width: 96%; + margin: 0 auto; + margin-top: 10px; +} +.siteWanTab th{ + padding: 10px 8px; + color: #3C4F8C; + font-size: 16px; +} +.siteWanTab tr td{ + padding: 10px 5px; +} +.siteWanTab .tr-border{ + border-bottom: 1px solid #EDEDED; +} +.addListBtn{ + margin-right: 30px; + color: #06A7E2; + border: none; + background: rgba(229,238,252,0.8); + cursor: pointer; +} diff --git a/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html new file mode 100644 index 00000000..e2b5159e --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.html @@ -0,0 +1,421 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> + +<div class="model creation-model" style="background: #F7F8FC;"> + <!-- top title --> + <div class="top-title"> + <h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3> + <div class="fl" style="width: 20%"> + <button class="submit" nz-button (click)="submitUpdate()" *ngIf="upDateShow"><span> + {{"i18nTextDefine_Update" | translate}} </span> + </button> + <button class="back" nz-button (click)="goback()"></button> + </div> + </div> + <!-- chart --> + <div class="chart"> + + <div id="detailChart"> + <svg width="100%" height="100%" style="position: relative"> + <!--local domain--> + <g class="clouds" *ngIf="vpns[0].domain!=''"> + <image xlink:href="assets/images/domain1.png" id="domain1" width="14%" x="17%" y="14%"></image> + <text dx="24%" dy="51%" style="font-size: 14px; fill:#ffffff;width: 20px;"> + {{vpns[0].domain}} + </text> + </g> + <g *ngIf="vpns[1]" class="clouds"> + <image xlink:href="assets/images/domain1.png" id="domain2" width="14%" x="40%" y="40%"></image> + <text dx="43%" dy="19%" style="font-size: 14px; fill: #ffffff;width: 20px;"> + {{vpns[1].domain}} + </text> + </g> + <!--domain1 tp--> + <g class="clouds" *ngIf="vpns[0].sitetpname!=''"> + <image xlink:href="assets/images/tp.png" class="tp" id="tp1" height="16" width="20" x="21%" y="37%"></image> + <text dx="21%" dy="34%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[0].sitetpname}} + </text> + </g> + <g class="clouds" *ngIf="vpns[0].othertpname!=''"> + <image xlink:href="assets/images/tp.png" class="tp" id="tp2" height="16" width="20" x="29%" y="52%"></image> + <text dx="29%" dy="49%" 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="44%" y="52%"></image> + <text dx="44%" dy="49%" 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="51%" y="78%"></image> + <text dx="51%" dy="75%" style="font-size: 14px; fill: #666;width: 20px;"> + {{vpns[1].sitetpname}} + </text> + </g> + <!--clouds--> + <g class="clouds"> + <image xlink:href="assets/images/cloud-out.png" id="extent-cloud" width="14%" x="70%" y="11%"></image> + <text dx="75%" dy="39%" style="font-size: 14px; fill: #666;width: 20px;"> + SP Partent Network + </text> + </g> + <!--local site--> + <g class="clouds" *ngIf="localSite.length>0"> + <image xlink:href="assets/images/site.png" id="site1" height="59" width="100" x="6%" y="29%"></image> + <text dx="8%" dy="26%" style="font-size: 14px; fill: #666;width: 20px;"> + {{localSite[0] && localSite[0]["service-instance-name"]}} + </text> + </g> + <g *ngIf="!detailSites && localSite.length>0" class="clouds"> + <image xlink:href="assets/images/site.png" id="site2" height="59" width="100" x="61%" y="70%" + *ngIf="this.vpns.length == 2"></image> + <text dx="62%" dy="66%" style="font-size: 14px; fill: #666;width: 20px;" *ngIf="this.vpns.length == 2"> + {{ localSite[1] && localSite[1]["service-instance-name"]}} + </text> + <image xlink:href="assets/images/site.png" id="site2" height="59" width="100" x="40%" y="44%" + *ngIf="this.vpns.length == 1"></image> + <text dx="41%" dy="40%" style="font-size: 14px; fill: #666;width: 20px;" *ngIf="this.vpns.length == 1"> + {{ localSite[1] && localSite[1]["service-instance-name"]}} + </text> + </g> + <!--cloud site--> + <g *ngIf="!detailSites && outerSite.length>0" class="clouds"> + <image xlink:href="assets/images/site.png" id="site3" height="59" width="100" x="89%" y="10%"></image> + <text dx="90%" dy="7%" style="font-size: 14px; fill: #666;width: 20px;"> + {{outerSite[1] && outerSite[1]["service-instance-name"]}} + </text> + </g> + <g class="clouds" *ngIf="outerSite.length>0"> + <image xlink:href="assets/images/site.png" id="site4" height="59" width="100" x="89%" y="40%"></image> + <text dx="90%" dy="37%" style="font-size: 14px; fill: #666;width: 20px;"> + {{outerSite[0] && outerSite[0]["service-instance-name"]}} + </text> + </g> + <!--tp,site,domain---line --> + <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" + [attr.y2]="item.y2" style="stroke:#2F8BF7; stroke-width:2"></line> + <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line> + </svg> + </div> + </div> + <div class="detaildata"> + <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle + [nzSelectedIndex]="upDateShow == false?0:1"> + <nz-tab nzTitle="Service Info"> + <div class="service-title" style="clear: both"> + <span class="lable" style="width: 60px">name:</span> + <div class="service-title-input">{{templateParameters.service["name"]}}</div> + <span class="lable">description:</span> + <div class="service-title-input">{{templateParameters.service["description"]}}</div> + </div> + </nz-tab> + <nz-tab nzTitle="Sdwanvpnresource List"> + <div class="sotnvpn clearfix"> + <div style="clear: both;height: 10px"> + <h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3> + <button nz-button *ngIf="upDateShow" (click)="updateSotnvpn()" class="addListBtn" + style="float: right;margin-right: 10px"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}} + </button> + </div> + <nz-table #sotnVpnTable [nzData]="sotnVpnTableData" [nzShowPagination]="false" nzSize="small"> + <thead> + <tr> + <th width="30%"> NO.</th> + <th width="30%"> Name</th> + <th width="30%"> topology</th> + <th nzWidth="10%"> Action </th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of sotnVpnTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.sdwanvpn_name}}</td> + <td>{{item.sdwanvpn_topology}}</td> + <td> + <span class="action" (click)="showstonVpnDetail(i+1)"><i class="anticon anticon-bars"></i></span> + <span class="action" (click)="editUpdateSotnVpn(i+1)" *ngIf="sotnvpnnum[i]"><i + class="anticon anticon-edit"></i></span> + + <span class="action" (click)="deleteUpdateSotnVpn(i+1)" *ngIf="upDateShow"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + </tbody> + </nz-table> + </div> + </nz-tab> + <nz-tab nzTitle="Sdwansiteresource List"> + <div class="site"> + <div style="height: 10px"> + <h3 style="float: left;color: #3C4F8C">Site List</h3> + <button nz-button *ngIf="upDateShow" (click)="updateSite()" class="addListBtn" + style="float: right;margin-right: 10px"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <nz-table #nzTable [nzData]="siteTableData" [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> + + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.sdwandevice_list[0].name}}</td> + <td>{{item.sdwansite_description}}</td> + <td>{{item.sdwansite_postcode}}</td> + <td>{{item.sdwansite_address}}</td> + <td>{{item.sdwansite_emails}}</td> + <td> + <span class="action" (click)="showSiteDetail(i+1)"><i class="anticon anticon-bars"></i></span> + + <span class="action" (click)="editUpdateSite(i+1)" *ngIf="sitenum[i]"><i + class="anticon anticon-edit"></i></span> + + <span class="action" (click)="deleteUpdateSite(i+1)" *ngIf="upDateShow"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + + </tbody> + </nz-table> + </div> + </nz-tab> + </nz-tabset> + </div> + <!-- sotnVpn model --> + <div class="sotnnpnmodel" *ngIf="sotnVpnDetailShow"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list"> + <span>{{item.lableShow}}:</span> + <span class="input-info">{{sotnInfo[item.lable]}}</span> + </li> + </ul> + </div> + <div> + <h3>Sdwansitelan List</h3> + <div> + <div style="width: 100%;text-align: right"> + </div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" class="tr-border"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="key != 'lable' ">{{item[key]}}</span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + <div class="action"> + <button nz-button nzType="primary" + (click)="detailSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + </div> + </div> + <!-- site model --> + <div class="sitemodel" *ngIf="siteDetail"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list"> + <span>{{item.lableShow}}:</span> + <span class="input-info">{{siteBaseData[item.lable]}}</span> + </li> + </ul> + </div> + <div> + <h3>Sdwandevice</h3> + <div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.siteCpeData)">{{key}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of siteSdwanDevice; let i = index;" class="tr-border"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);"> + <span *ngIf="key != 'lable' ">{{item[key]}}</span> + </td> + </tr> + </tbody> + </table> + </div> + <h3>Sdwansitewan List</h3> + <div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of siteWanData; let i = index;" class="tr-border"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);"> + <span *ngIf="key != 'lable' ">{{item[key]}}</span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="action"> + <button nz-button nzType="primary" (click)="detailsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + </div> + </div> + <!-- sotnVpn update model --> + <div class="sotnnpnmodel" *ngIf="sotnVpnAddModelShow"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list"> + <span>{{item.lableShow}}:</span> + <input nz-input [(ngModel)]="sotnInfo[item.lable]"></li> + </ul> + </div> + <div> + <h3>Sdwansitelan List</h3> + <div> + <div style="width: 100%;text-align: right"> + <button nz-button (click)="updateSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th> + <th width="7%"> Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" + [ngClass]="{'tr-border':item.tabInputShowSdwansitelan ==false}"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="!tabInputShowSdwansitelan[i]">{{item[key]}}</span> + <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] "> + </td> + <td> + <span class="action" (click)="editUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i + class="anticon anticon-edit" style="margin: 0 5px;"></i></span> + <span class="action" (click)="deleteUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="action"> + <button nz-button nzType="primary" + (click)="updateSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + <button nz-button nzType="primary" (click)="updateSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button> + </div> + </div> + <!-- site update Model --> + <div class="sitemodel" *ngIf="siteAddModelShow"> + <h3> {{"i18nTextDefine_Base" | translate}} </h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list"> + <span>{{item.lableShow}}:</span> + <input nz-input [(ngModel)]="siteBaseData[item.lable]"></li> + </ul> + </div> + <div> + <h3>Sdwandevice</h3> + <div class="inputs"> + <ul> + <li *ngFor="let item of this.templateParameters.site.sdwandevice_list"> + <span>{{item.lable}}:</span> + <input nz-input [(ngModel)]="siteCpeData[item.lable]"> + </li> + </ul> + </div> + <h3>Sdwansitewan List</h3> + <div> + <div style="width: 100%;text-align: right"> + <button nz-button (click)="updateSiteWan()" class="addListBtn"><i class="anticon anticon-plus" + style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}} + </button> + </div> + <table class="siteWanTab"> + <thead> + <tr> + <th width="4%"> NO.</th> + <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th> + <th width="7%"> Action</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of siteWanData; let i = index;" + [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}"> + <td>{{i+1}}</td> + <td *ngFor="let key of getKeys(item);let a = index;"> + <span *ngIf="!tabInputShowWanPort[i]">{{item[key]}}</span> + <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] "> + </td> + <td> + <span class="action" (click)="editUpdateWanPort(i+1,item,siteWanData)"><i class="anticon anticon-edit" + style="margin: 0 5px;"></i></span> + <span class="action" (click)="deleteUpdateWanPort(i+1,item,siteWanData)"><i + class="anticon anticon-delete"></i></span> + </td> + </tr> + </tbody> + </table> + </div> + </div> + + <div class="action"> + <button nz-button nzType="primary" (click)="updatesite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button> + <button nz-button nzType="primary" (click)="updatesite_OK()">{{"i18nTextDefine_Add" | translate}}</button> + </div> + </div> + <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || sotnVpnAddModelShow || siteAddModelShow" + (click)="hiddenModel()"></div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts new file mode 100644 index 00000000..3d112bf8 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.spec.ts @@ -0,0 +1,69 @@ +/* + 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 { NgZorroAntdModule } from 'ng-zorro-antd'; +import { HttpClientModule } from '@angular/common/http'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader } from '@ngx-translate/core'; + +import { CcvpnDetailComponent } from './ccvpn-detail.component'; +import { MyhttpService } from '../../core/services/myhttp.service'; + +describe('CcvpnDetailComponent', () => { + let component: CcvpnDetailComponent; + let fixture: ComponentFixture<CcvpnDetailComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [CcvpnDetailComponent], + imports: [TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: TranslateFakeLoader } }), + NgZorroAntdModule.forRoot(), HttpClientModule], + providers: [MyhttpService, { provide: NZ_I18N, useValue: en_US }] + }) + .compileComponents(); + })); + + beforeEach(() => { + let detailshow = false; + detailData: Object; + let serviceDetail = (service) => { + service["siteSer"] = []; + service["sdwanSer"] = []; + service["customer"] = this.customerSelected; + service["serviceType"] = this.serviceTypeSelected; + + service.childServiceInstances.forEach((item) => { + if (item.serviceDomain == "SITE") { + service.siteSer.push(item); + } else if (item.serviceDomain == "SDWAN") { + service.sdwanSer.push(item); + } + }) + this.detailshow = true; + this.detailData = service; + component.detailParams = this.detailData + fixture = TestBed.createComponent(CcvpnDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }; + + it('should create', () => { + console.log(component); + expect(component).toBeTruthy(); + }); + }); + +}); diff --git a/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts new file mode 100644 index 00000000..109c143b --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-detail/ccvpn-detail.component.ts @@ -0,0 +1,815 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { MyhttpService } from '../../core/services/myhttp.service'; +import * as d3 from 'd3'; + +@Component({ + selector: 'app-ccvpn-detail', + templateUrl: './ccvpn-detail.component.html', + styleUrls: ['./ccvpn-detail.component.css'] +}) +export class CcvpnDetailComponent implements OnInit { + + constructor(private myhttp: MyhttpService) { } + + ngOnInit() { + this.dataInit(); + this.drawImages(); + } + + @Input() detailParams; + @Input() upDateShow; + @Output() closeDetail = new EventEmitter(); + @Output() closeUpdate = new EventEmitter(); + + tabBarStyle = { + "height": "58px", + "width": "694px", + "box-shadow": "none", + "margin": "0", + "border-radius": "4px 4px 0px 0px" + }; + input_parameters: any; + templateParameters = { + service: {}, + sotnvpn: { + // info: {}, + sdwanvpnresource_list: [], + sdwansitelan_list: [] + }, + site: { + // info: {}, + sdwansiteresource_list: [], + sdwandevice_list: [], + sdwansitewan_list: [] + } + }; + bodyTemplateParameter = {}; + + // SOTN VPN List + sotnVpnTableData = []; + sotnInfo = {};//sotnmodel The first part of sotnInfo + sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table + sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data + tabInputShowSdwansitelan = [];//sdwansitelan table input and span + // Site List + siteTableData = []; + siteBaseData = {}; //sitemodel one sdwansiteresource_list + // cpe + siteSdwanDevice = []; //sitemodel SdwanDevice port Table data + siteCpeData = {}; //sitemodel two sdwandevice_list + tabInputShowDevice = [];//Device port input and span + // Wan Port + siteWanData = []; //sitemodel three wan port Table data + siteWanParams = {}; //wan port Table Detailed parameters of each line of data + tabInputShowWanPort = [];//wan port table input and span + sitenum = []; + sotnvpnnum = []; + + getKeys(item) { + return Object.keys(item); + } + //tabBarStyle + dataInit() { + console.log(this.detailParams); + // this.input_parameters = JSON.stringify(this.detailParams['input-parameters']) + if (this.detailParams['input-parameters']) { + this.input_parameters = JSON.parse(this.detailParams['input-parameters']); + } else { + return false; + } + console.log(this.input_parameters); + this.templateParameters.service = { + name: this.input_parameters.service.name, + description: this.input_parameters.service.description, + serviceInvariantUuid: this.input_parameters.service["serviceInvariantUuid"], + serviceUuid: this.input_parameters.service["serviceUuid"] + }; + let inputs = this.input_parameters.service.parameters.requestInputs; + + Object.keys(inputs).map((items) => { + if (items.search("vpn") != -1) { + this.bodyTemplateParameter[items] = []; + inputs[items].map((item, index) => { + this.sotnVpnTableData.push(item); + this.sotnvpnnum.push(false); + }); + let sdwanvpnresource_list = inputs[items][0]; + Object.keys(sdwanvpnresource_list).forEach((its) => { + let input = {}; + if (its.search("site") != -1 && sdwanvpnresource_list[its] instanceof Array === true) { + Object.keys(sdwanvpnresource_list[its][0]).forEach((i) => { + let input1 = {}; + input1[i] = sdwanvpnresource_list[its][i]; + this.templateParameters["sotnvpn"]["sdwansitelan_list"].push(input1); + }) + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("sitelan") == -1 && sdwanvpnresource_list[its] instanceof Array === false) { + input[its] = sdwanvpnresource_list[its]; + this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(input); + } + }); + } + if (items.search("site") != -1) { + this.bodyTemplateParameter[items] = []; + inputs[items].map((item, index) => { + this.siteTableData.push(item); + this.sitenum.push(false); + }); + let sdwansiteresource_list = inputs[items][0]; + Object.keys(sdwansiteresource_list).forEach((its) => { + let input2 = {}; + if (its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true) { + this.templateParameters["site"]["sdwandevice_list"][0] = sdwansiteresource_list[its][0]; + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("site") != -1 && its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === true) { + this.templateParameters["site"]["sdwansitewan_list"][0] = sdwansiteresource_list[its][0]; + let sitelanKey = {}; + sitelanKey[its] = []; + this.bodyTemplateParameter[items].push(sitelanKey); + } + if (its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === false) { + input2[its] = sdwansiteresource_list[its]; + this.templateParameters["site"]["sdwansiteresource_list"].push(input2); + } + }); + + } + }); + + console.log(this.templateParameters.site); + console.log(this.siteTableData); + + this.showTemParametersSotnVpn(); + this.showTemParametersSite(); + + } + + //sotnVpn data, after combining the structure, rendering the template data to the page + showTemParametersSotnVpn() { + //sotn Data analysis, structure assembly + this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.sotnInfo = Object.assign(this.sotnInfo, input); + } + } + }); + + this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); + } + } + }); + this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); + this.sotnSdwansitelanData.map((item, index) => { + this.tabInputShowSdwansitelan[index] = true; + }); + } + + //Site data, after combining the structure, rendering the template to the page + showTemParametersSite() { + //site Data analysis, structure assembly + this.templateParameters.site.sdwansiteresource_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + item["lableShow"] = keys.split("_")[1]; + this.siteBaseData = Object.assign(this.siteBaseData, input); + } + } + }); + + this.templateParameters.site.sdwandevice_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteCpeData = Object.assign(this.siteCpeData, input); + } + } + }); + this.templateParameters.site.sdwandevice_list.map((item, index) => { + if (this.getKeys(item).indexOf("lable") == -1) { + this.templateParameters.site.sdwandevice_list.splice(index, 1) + } + }); + this.templateParameters.site.sdwansitewan_list.map((item, index) => { + let input = {}; + for (let keys in item) { + if (keys != "required" && keys != "type" && keys != "description") { + input[keys] = item[keys]; + item["lable"] = keys; + this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); + } + } + }); + this.siteSdwanDevice.push(this.siteCpeData); + this.siteSdwanDevice.map((item, index) => { + this.tabInputShowDevice[index] = true; + }); + this.siteWanData.push(this.siteWanParams); + this.siteWanData.map((item, index) => { + this.tabInputShowWanPort[index] = true; + }); + } + + //sotnVpn detail show + sotnVpnDetailShow = false; + isEditSotnVpn = 0; + showstonVpnDetail(num) { + this.sotnVpnDetailShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + } + detailSotnVpn_cancel() { + this.sotnVpnDetailShow = false; + } + + // site detail show + siteDetail = false; + isEditSite = 0; + showSiteDetail(num) { + this.siteDetail = true; + this.isEditSite = num; + console.log(this.siteTableData[num - 1]); + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, {}, item) + }); + } + detailsite_cancel() { + this.siteDetail = false; + } + deleteUpdateSite(num) { + this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); + this.sitenum.splice(num - 1, 1); + } + + //sotnVpn addModel + sotnVpnAddModelShow = false; + + updateSotnVpn_OK() { + let inputs = { + "sdwansitelan_list": [] + }; + inputs = Object.assign(inputs, this.sotnInfo); + inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSotnVpn) { + + this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; + this.sotnVpnTableData = [...this.sotnVpnTableData]; + } else { + // this.siteTableData.push(inputs); + this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; + this.sotnvpnnum = [...this.sotnvpnnum, true]; + } + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + this.tabInputShowSdwansitelan.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnAddModelShow = false; + } + + updateSotnVpn_cancel() { + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = null; + }); + this.sotnSdwansitelanData.forEach((item, index) => { + if (index > 0) { + this.sotnSdwansitelanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowSdwansitelan[index] = true; + } + + }); + this.sotnVpnAddModelShow = false; + } + + editUpdateSotnVpn(num) { + this.sotnVpnAddModelShow = true; + this.isEditSotnVpn = num; + Object.keys(this.sotnInfo).forEach((item) => { + this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; + }); + this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { + return Object.assign({}, {}, item) + }); + this.sotnSdwansitelanData.forEach((item, index) => { + this.tabInputShowSdwansitelan[index] = false; + }); + } + + deleteUpdateSotnVpn(num) { + this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); + this.sotnvpnnum.splice(num - 1, 1); + } + updateSotnSdwansitelan() { + if (this.tabInputShowSdwansitelan.indexOf(true) > -1) { + return false; + } + let addNum = this.sotnSdwansitelanData.length; + let inputsData = Object.assign({}, this.sotnSdwansitelanParams); + Object.keys(inputsData).forEach((item) => { + if (item != "description") { + inputsData[item] = null; + } + }); + this.sotnSdwansitelanData[addNum] = inputsData; + this.tabInputShowSdwansitelan[addNum] = true; + this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; + } + editUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.tabInputShowSdwansitelan[num - 1] == false) { + this.tabInputShowSdwansitelan[num - 1] = true; + } else { + this.tabInputShowSdwansitelan[num - 1] = false; + } + } + deleteUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) { + if (this.sotnSdwansitelanData.length <= 1) { + return false; + } else { + + } + this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); + } + + // site addModel + siteAddModelShow = false; + + updateSotnvpn() { + this.sotnVpnAddModelShow = true; + this.isEditSotnVpn = 0; + } + + updateSite() { + this.siteAddModelShow = true; + this.isEditSite = 0; + } + + editUpdateSite(num) { + this.siteAddModelShow = true; + this.isEditSite = num; + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = this.siteTableData[num - 1][item]; + }); + this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { + return Object.assign({}, item) + }); + this.siteSdwanDevice.forEach((item, index) => { + this.tabInputShowDevice[index] = false; + }); + this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { + return Object.assign({}, item) + }); + this.siteWanData.forEach((item, index) => { + this.tabInputShowWanPort[index] = false; + }); + } + + updatesite_cancel() { + Object.keys(this.siteBaseData).forEach((item) => { + this.siteBaseData[item] = null; + }) + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + + }); + this.siteAddModelShow = false; + } + + updatesite_OK() { + let inputs = { + "sdwandevice_list": [], + "sdwansitewan_list": [] + }; + inputs = Object.assign(inputs, this.siteBaseData); + inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => { + return Object.assign({}, item); + }); + inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { + return Object.assign({}, item); + }); + if (this.isEditSite) { + // Edit status does not increase + this.siteTableData[this.isEditSite - 1] = inputs; + this.siteTableData = [...this.siteTableData]; //Table refresh + } else { + // this.siteTableData.push(inputs); + this.siteTableData = [...this.siteTableData, inputs]; + this.sitenum = [...this.sitenum, true]; + } + + Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box + this.siteBaseData[item] = null; + }); + this.siteSdwanDevice.forEach((item, index) => { + if (index > 0) { + this.siteSdwanDevice.splice(index, 1); + this.tabInputShowDevice.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowDevice[index] = true; + } + + }); + this.siteWanData.forEach((item, index) => { + if (index > 0) { + this.siteWanData.splice(index, 1); + this.tabInputShowWanPort.splice(index, 1); + } else { + Object.keys(item).forEach((item2) => { + item[item2] = null; + }); + this.tabInputShowWanPort[index] = true; + } + + }); + console.log(this.siteTableData); + this.siteAddModelShow = false; + } + + //add.edit，detele siteWanPort + updateSiteWan() { + if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited + return false; + } + let addNum = this.siteWanData.length; + let inputsData = Object.assign({}, this.siteWanParams); + Object.keys(inputsData).forEach((item) => {//Add a new line of empty data + if (item != "description") { + inputsData[item] = null; + } + }); + this.siteWanData[addNum] = inputsData; + this.tabInputShowWanPort[addNum] = true; + this.siteWanData = [...this.siteWanData]; //Table refresh + console.log(this.siteWanData) + } + + editUpdateWanPort(num, item, siteWanData) { + if (this.tabInputShowWanPort[num - 1] == false) { + this.tabInputShowWanPort[num - 1] = true; + } else { + this.tabInputShowWanPort[num - 1] = false; + } + } + + deleteUpdateWanPort(num, item, siteWanData) { + if (this.siteWanData.length <= 1) { + return false; + } + this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); + } + + // 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] && this.localSite[0]["service-instance-name"].startsWith("Dc")) { + this.localSite.reverse(); + } + + if (this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")) { + this.outerSite.reverse(); + } + if (this.localSite.length > 0) { + this.detailLines = [].concat(this.detailLiness); + 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) => { + let resource = data["allotted-resource"].find((item) => { return item["allotted-resource-name"] == "sotn ar" }); + let tps_pnfs = resource["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "p-interface" })["relationship-data"]; + site.tpsitename = tps_pnfs.find((item) => { return item["relationship-key"] == "p-interface.interface-name" })["relationship-value"]; + res("sites-domain"); + }) + }) + } else { + return false; + } + }) + } + + + vpns = [{ name: "", tps: [], domain: "", sitetpname: "", othertpname: "" }]; + + + getSotnAresource() { + return new Promise((res, rej) => { + let connectivityId = this.detailParams["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) => { + 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.vpns = vpns.map((item) => { + return { name: item } + }); + this.detailParams.vpns.forEach((vpn, index) => { + this.myhttp.getVpnBinding(vpn.name) + .subscribe((data2) => { + 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"] + }); + vpn.tps = tpnames; + this.myhttp.getPnfDetail(pnfname[0]) + .subscribe((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.vpns; + console.log(this.vpns) + res(this.detailParams.vpns) + }) + console.log(this.detailParams.vpns) + }) + }) + }) + }) + } + + + drawImages() { + + this.getSiteAResource().then((data) => { + return this.getSotnAresource() + }).then((data) => { + this.detailSites = this.detailParams.serviceDomain == "CCVPN" ? false : true; + // When there is only one vpn + if (this.detailParams.serviceDomain == "CCVPN" && this.vpns.length == 1) { + this.detailLines.length = this.detailLines.length - 3; + // this.detailLines.push(line); + // when local site have 2 + if (this.localSite.length == 2) { + let line = { + "x1": "30%", "y1": "55%", "x2": "42%", "y2": "55%"//tp2--tp3 + } + this.detailLines.push(line); + } + // when cloud site have 2 + if (this.outerSite.length == 2) { + let line = { + "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//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 = []; + detailLiness = [ //Details of the topology map connection coordinates + { + "x1": "9%", "y1": "40%", "x2": "21%", "y2": "40%"//site1--tp1 + }, + + { + "x1": "83%", "y1": "51%", "x2": "91%", "y2": "51%"//out-domain--site4 + }, + + { + "x1": "52%", "y1": "81%", "x2": "63%", "y2": "81%"//site2--tp4 + }, + { + "x1": "81%", "y1": "21%", "x2": "90%", "y2": "21%"//out-domain--site3 + }, + { + "x1": "30%", "y1": "55%", "x2": "44%", "y2": "55%"//tp2--tp3 + } + ]; + + modifyJosnKey(json, oddkey, newkey) { + + let val = json[oddkey]; + delete json[oddkey]; + json[newkey] = val; + } + + // ccvpn update + submitUpdate() { + let globalCustomerId = this.detailParams.customer.id; + let globalServiceType = this.detailParams.serviceType.name; + let servicebody = { + service: { + name: this.templateParameters.service["name"], + description: this.templateParameters.service["description"], + serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], + serviceUuid: this.templateParameters.service["serviceUuid"], + globalSubscriberId: globalCustomerId, //customer.id + serviceType: globalServiceType, //serviceType.value + parameters: { + locationConstraints: [], + resources: [], + requestInputs: { + sdwanvpnresource_list: [], + sdwansiteresource_list: [] + } + } + } + }; + let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + siteresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { + sitewan = Object.keys(items)[0] + } + if (Object.keys(items)[0].search("device") != -1) { + device = Object.keys(items)[0] + } + }); + } + if (item.search("vpn") != -1) { + vpnresource = item; + this.bodyTemplateParameter[item].map((items, index) => { + if (Object.keys(items)[0].search("site") != -1) { + sitelan = Object.keys(items)[0] + } + }); + } + }); + this.sotnVpnTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitelan) + } + }); + }); + this.siteTableData.forEach((item, index) => { + Object.keys(item).map((items, index) => { + if (items.search("site") != -1 && items.search("device") == -1 && item[items] instanceof Array === true) { + this.modifyJosnKey(item, items, sitewan) + } + if (items.search("device") != -1) { + this.modifyJosnKey(item, items, device) + } + }); + }); + Object.keys(this.bodyTemplateParameter).map((item, index) => { + if (item.search("site") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); + } + if (item.search("vpn") != -1) { + servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); + } + }); + console.log(servicebody); + this.closeUpdate.emit(servicebody); + } + + goback() { + this.closeDetail.emit(); + } + + hiddenModel() { + this.sotnVpnDetailShow = false; + this.siteDetail = false; + } + +} diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css new file mode 100644 index 00000000..5055205d --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.css @@ -0,0 +1,119 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.outer{ + width: 20%; + float: left; +} +.content{ + width: 100px; + margin: 30px 0; +} + +.submit,.delete,.add{ + padding:10px 20px; + width: 100px; + margin: 0 auto; + background: dodgerblue; + border: none; + border-radius: 10px; + color: #fff; + cursor: pointer; +} + +#tpContainer{ + position: relative; + width:100%; + height: 95%; + margin-top: 15px; + float: left; + background: #EEF9FF; +} +#tpContainer .no-network{ + width: 300px; + margin: 0 auto; + height: 280px; + position: absolute; + top: 50%; + left: 50%; + margin-top: -140px; + margin-left: -150px; +} +.no-network img{ + width: 100%; +} +.no-network p{ + text-align: center; + color: #A0AACD; + font-size: 18px; + margin-top: 20px; +} +.model { + position: relative; + padding: 15px; + height: 100vh; + width: 100%; +} +.model h2{ + display: inline-block; + margin: 0; + color: #3C4F8C; + margin-left: 10px; + display: inline-block; +} +.model .title-modelshow{ + color: #A0AACD; +} +.model .creation { + /*margin-top:-4%;*/ + background-color: #fff; + /*float: left;*/ + width: 20%; + position: absolute; + left: 0; + margin-top: 30px; + margin-left: 30px; + 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/views/ccvpn-network/ccvpn-network.component.html b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html new file mode 100644 index 00000000..25687f67 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.html @@ -0,0 +1,152 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<nz-spin [nzSpinning]="isSpinning" nzSize="large"> +<div class="model"> + <!--chart--> + <button nz-button nzType="primary" *ngIf="!nonetwork" style="margin-top: 2px;display: inline-block" (click)="showForm()" + [disabled]='isVisible' [attr.disabled] ='isVisible?true:undefined'> + {{"i18nTextDefine_CreateLink" | translate}} + </button> + <h2 *ngIf="!nonetwork" [ngClass]="{'title-modelshow':isVisible == true}"> + Please configure network links for registered devices and partner system. + </h2> + <div id="tpContainer" style="overflow: hidden;"> + <div *ngIf="nonetwork" style="padding: 20px"> + <h2> + There is not any terminal device can be used for configuration + </h2> + <br> + <h2> + please register external network into ONAP. + </h2> + </div> + <div class="no-network" *ngIf="nonetwork"> + <img src="assets/images/no-network-available.png" alt="No network available"> + <p>No network available</p> + </div> + </div> + <!--Popup--> + <div class="creation" id="d3_form" *ngIf="isVisible==true"> + <span class="v_color"></span> + <h3 class="w_font4"> {{"i18nTextDefine_SetAttribtes" | translate}} </h3> + <ul class="choose"> + <li> + <span class="title-span"><span class="red-span">*</span> {{"i18nTextDefine_LinkName" | translate}} </span> + <input nz-input [(ngModel)]="linkName" maxlength="20"> + </li> + </ul> + <h4> {{"i18nTextDefine_LeftPort" | translate}} </h4> + <ul class="choose"> + <li> + <span class="title-span"><span class="red-span">*</span> {{"i18nTextDefine_Network" | translate}} </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> {{"i18nTextDefine_Node" | translate}} </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> {{"i18nTextDefine_TerminalPoint" | translate}} </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> {{"i18nTextDefine_RightPort" | translate}} </h4> + <label nz-checkbox [(ngModel)]="inputshow"> {{"i18nTextDefine_PartnerNetwork" | translate}} </label> + <ul class="choose"> + <li> + <span class="title-span"><span *ngIf="inputshow" class="red-span">*</span> {{"i18nTextDefine_HostUrl" | translate}} </span> + <input nz-input [(ngModel)]="cloudUrl" [disabled]='!inputshow' [attr.disabled] ='!inputshow?true:undefined'> + </li> + <li> + <span class="title-span"><span class="red-span">*</span> {{"i18nTextDefine_Network" | translate}} </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> {{"i18nTextDefine_Node" | translate}} </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> {{"i18nTextDefine_TerminalPoint" | translate}} </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()"> {{"i18nTextDefine_modelOk" | translate}} </button> + <button nz-button nzType="default" nzSize="small" style="width: 60px;" (click)="hideForm()"> {{"i18nTextDefine_Cancel" | translate}} </button> + </div> + <div class="creation" id="delbox" *ngIf="delBoxisVisible==true"> + <span class="v_color"></span> + <ul class="choose"> + <li> + <span class="title-span"> {{"i18nTextDefine_LinkName" | translate}} </span> + <input nz-input [(ngModel)]="delLinkname" disabled="disabled"> + </li> + </ul> + <h4> {{"i18nTextDefine_LeftPort" | translate}} </h4> + <ul class="choose"> + <li> + <span class="title-span"> {{"i18nTextDefine_Network" | translate}} </span> + <input nz-input [(ngModel)]="delNetwork1" disabled="disabled"> + </li> + <li> + <span class="title-span"> {{"i18nTextDefine_Node" | translate}} </span> + <input nz-input [(ngModel)]="delNode1" disabled="disabled"> + </li> + <li> + <span class="title-span"> {{"i18nTextDefine_TerminalPoint" | translate}} </span> + <input nz-input [(ngModel)]="delTp1" disabled="disabled"> + </li> + </ul> + <h4> {{"i18nTextDefine_RightPort" | translate}} </h4> + <ul class="choose"> + <li *ngIf="delcloud"> + <span class="title-span"> {{"i18nTextDefine_HostUrl" | translate}} </span> + <input nz-input [(ngModel)]="delcloudUrl" disabled="disabled"> + </li> + <li> + <span class="title-span"> {{"i18nTextDefine_Network" | translate}} </span> + <input nz-input [(ngModel)]="delNetwork2" disabled="disabled"> + </li> + <li> + <span class="title-span"> {{"i18nTextDefine_Node" | translate}} </span> + <input nz-input [(ngModel)]="delNode2" disabled="disabled"> + </li> + <li> + <span class="title-span"> {{"i18nTextDefine_TerminalPoint" | translate}} </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"> {{"i18nTextDefine_DeleteLink" | translate}} </button> + <button nz-button nzType="primary" nzSize="small" class="del-button" style="width: 90px;" (click)="delCloudLink()" *ngIf="delcloud"> {{"i18nTextDefine_deleteLink" | translate}} </button> + <button nz-button nzType="default" nzSize="small" class="del-button" style="width: 60px;" (click)="hideForm()"> {{"i18nTextDefine_Cancel" | translate}} </button> + </div> +</div> +</nz-spin> diff --git a/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts new file mode 100644 index 00000000..9ec321c5 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.spec.ts @@ -0,0 +1,40 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { 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/views/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts new file mode 100644 index 00000000..8a56d885 --- /dev/null +++ b/usecaseui-portal/src/app/views/ccvpn-network/ccvpn-network.component.ts @@ -0,0 +1,1270 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import * as d3 from 'd3'; +import * as $ from 'jquery'; +import { networkHttpservice } from '../../core/services/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() { + let thisNg = this; + thisNg.getD3Data(); + + + //Local cloud TP port connection, click on the right to expand the details + $('#tpContainer').on('click', '.line-port', 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.delcloudUrl = null; + thisNg.delLinkIndex = $(this); + + let dataD3 = thisNg.d3Data; + for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to + 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]; + }); + + //External cloud connection, click on the right to expand the details + $('#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); + }); + } + + addLinkDisabled = true; + nonetwork = false; + isVisible = false; + outCloudShow = false; + inputshow = false; + delBoxisVisible = false; + isSpinning = true; + + d3Data = [];//D3Render the required data + logicalLinks = [];//logicalLinks Existing connection data returned by the interface + linkName = null;//Linked name link-name + networkOption = [];//Form network drop-down box filled data + nodeOption1 = {};//Node drop-down box filled data + tpOption1 = [];//Node drop-down box filled data + tpOption2 = [];//Node drop-down box filled data + networkVal1 = null;//network1 Drop-down box default data + networkVal2 = null;//network2 Drop-down box default data + selectedNode1 = null;//node1 Drop-down box default data + selectedNode2 = null;//node2 Drop-down box default data + selecteTpName1 = null;//TP1 Drop-down box default data + selecteTpName2 = null;//TP2 Drop-down box default data + cloudUrl = null;//External cloud URL address + cloudNetwork = null;//External cloud network name + cloudNode = null;//External cloud Node name + cloudTp = null;//External cloud Tp name + + dataCloud = [];//External cloud information + dataCloudLink = []; + aaiId = ''; + + + //When the connection is deleted, the data displayed in the right frame + delLinkname = null; + delNetwork1 = null; + delNode1 = null; + delTp1 = null; + delcloudUrl = null; + delNetwork2 = null; + delNode2 = null; + delTp2 = null; + delVersion = null; + delLinkIndex = null; + network = []; + delcloud = false; + + winWidth = $('#tpContainer').width(); + winHeight = $('#tpContainer').height(); + charge = -300; + + imgmap = { + '1': 'assets/images/cloud-county1.png', + '2': 'assets/images/tp.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;//Initialize the default data of the network1 drop-down box + this.networkVal2 = null;//Initialize the network2 drop-down box default data + this.selectedNode1 = null;//Initialize the default data of the node1 drop-down box + this.selectedNode2 = null;//Initialize the default data of the node2 drop-down box + this.selecteTpName1 = null;//Initialize the default data of the TP1 drop-down box + this.selecteTpName2 = null;//Initialize the default data of the TP2 drop-down box + this.cloudUrl = null;//External cloud URL address + this.cloudNetwork = null;//External cloud network name + this.cloudNode = null;//External cloud Node name + this.cloudTp = null;//External cloud Tp name + } + + //Get cloud image data + getD3Data() { + this.isSpinning = true; + this.myhttp.getNetworkD3Data() + .subscribe((data) => { + this.isSpinning = false; + if (data.length == 0) { + this.addLinkDisabled = false; + this.nonetwork = true; + return; + } + this.nonetwork = false; + for (let ii = 0; ii < data.length; ii++) {//Determine if there is external cloud information in the data, and kick it out. + if (data[ii]['aaiId'] != null) { + this.dataCloud = data.splice(ii, 1); + } + } + + for (let 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 (let i = 0; i < data.length; i++) { + let tp_length = data[i]['tps'].length; + for (let 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); + }); + + } + + //Get the initial connection status of the cloud image getlogicalLinksData + getLinksData() { + this.myhttp.getLogicalLinksData() + .subscribe((data) => { + if (data["status"] == "FAILED") { + return; + } + for (let i = 0; i < data["logical-link"].length; i++) {//Determine whether there is an external cloud connection in the obtained connection, and kick it out. + if (data['logical-link'][i]['relationship-list']['relationship'].length > 2) { + this.dataCloudLink = data['logical-link'].splice(i, 1); + } + } + + 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); + } + console.log(this.logicalLinks); + if (this.dataCloudLink.length > 0) { + this.getcloudLine(this.dataCloudLink); + } + }, (err) => { + console.log(err); + }); + } + + //D3Cloud rendering + render(nodes, imgmap, dataCloud, charge, dataD3) { + let thiss = this; + let _this = this.tpoption, + width = null, + height = _this.height; + if (_this.width > 800) { + width = _this.width; + } else { + width = 800; + } + if (dataD3.length <= 4) { + charge = -300; + } else if (dataD3.length > 4 && dataD3.length <= 6) { + charge = -160; + } else if (dataD3.length > 6 && dataD3.length <= 10) { + charge = -110; + } else { + charge = -100; + } + let svg = d3.select(_this.container).append('svg') + .attr('width', width) + .attr('height', height) + .attr('id', 'content-svg') + .style('pointer-events', 'all') + .style('position', 'absolute') + .style('top', '1%') + .style('right', '2%'), + 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) { + let 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) { + let 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) { + let 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) { + let x = null; + let 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) { + let size = 14; + switch (d.type) { + case '1': + size = 14; + break; + case '2': + size = 12; + break; + default: + break; + } + return size; + }) + .style('fill', function (d) { + let color = '#666'; + switch (d.type) { + case '1': + color = '#666'; + break; + case '2': + color = '#666'; + break; + default: + break; + } + return color; + }) + .style('font-weight', '500'); + + + //Add custom attributes online + _g_lines.each(function (d, i) { + let _this = d3.select(this); + if (d.name) { + _this.attr('data-text', d.name); + } + }); + + let force = d3.layout.force() + .size([1000, this.winHeight]) + .linkDistance(5) + // .theta(0.6) + .charge(charge) + .nodes(nodes) + .links(nodes) + .start(); + + force.on('tick', function () { + if (force.alpha() <= 0.04) { + + _g_nodes.style('display', function (d) { + let display = 'block'; + switch (d.type) { + case '1': + display = 'block'; + break; + case '2': + display = 'none'; + break; + default: + break; + } + return display; + }); + + 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; + }); + + _g_nodes.attr('transform', function (d) { + + let image = d3.select(this).select('image')[0][0], + halfWidth = parseFloat(image.attributes[0]['value']) / 2, + halfHeight = parseFloat(image.attributes[1]['value']) / 2; + let xx = d.x - halfWidth, + yy = d.y - halfHeight; + return 'translate(' + xx + ',' + yy + ')'; + }); + + _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.select('text').attr('dy', function (d) { + let 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; + }); + + }; + + //Topology drag and drop effect + 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); + } + + } + + //Initialize node location + 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; + }); + } + + //Get anchor points based on polygons + getVertices(origin, r, n) { + if (typeof n !== 'number') return; + let ox = origin[0]; + let oy = origin[1]; + let angle = 30 * n / n; + let i = 0; + let points = []; + let 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; + } + + //Rendering an external cloud + getoutCloud(dataCloud, imgmap) { + let _this = this, + width; + let networkId = dataCloud[0]['networkId']; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + let svg = d3.select('#content-svg'); + svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)'); + let 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'); + } + + //External cloud connection + 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']; + let dataD3 = this.d3Data; + let arr = [ + textval[0], + textval[1] + ]; + for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to + for (let pp = 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to + if (dataD3[p]['name'] == arr[pp]) { + textval[8] = dataD3[p]['source']['name'];//network1 + } + } + } + textval[9] = dataCloudLink[0]['link-name']; + let lines_json = {}; + let _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[8]) { + //Get the x, y coordinates of the second level + let 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; + } + } + let x1 = lines_json['x1']; + let y1 = lines_json['y1']; + let x2 = lines_json['x2']; + let y2 = lines_json['y2']; + let color = '#14bb58'; + if (textval[5] == 'up') { + color = '#14bb58'; + } else { + color = 'red'; + } + let line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>'; + let 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()); + this.getCloudUrl(textval[6]); + this.getExtAAIIdVersion(textval[6]); + } + + + //Query external cloud host url address + getCloudUrl(aaiId) { + this.myhttp.queryCloudUrl(aaiId) + .subscribe((data) => { + this.delcloudUrl = data['service-url']; + $('.cloudline').attr({ + 'data-url': data['service-url'] + }); + }, (err) => { + console.log(err); + }); + } + + //Query external cloud ext-aai-id resource-version + getExtAAIIdVersion(aaiId) { + this.myhttp.queryExtAAIIdVersion(aaiId) + .subscribe((data) => { + this.delVersion = data["resource-version"]; + $('.cloudline').attr({ + 'data-version': data["resource-version"], + }); + }, (err) => { + console.log(err); + }); + } + + + //The right form drop-down box data is filled with three levels of linkage + //Left Port + network1Change(value: string): void { + this.selectedNode1 = this.nodeOption1[value][0]; + this.getPInterfaces1(); + } + + node1Change(): void { + this.getPInterfaces1(); + } + + //Get the TP data under the specified node + 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(); + } + + //Get the TP data under the specified node + 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); + }); + } + + //Submit form, connect + submitForm(): void { + //When the page ONAP is not selected, the local cloud TP connection + let _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('The service port cannot be empty. Please select the port information.'); + return; + } else if (this.networkVal1 == this.networkVal2) { + alert('The TP port under the same cloud service cannot be connected!'); + return; + } + let tp_links = [], + tp1 = this.selecteTpName1, + tp2 = this.selecteTpName2; + for (let i = 0; i < $(".line-port").length; i++) { + let data_text1 = $('.line-port').eq(i).attr('data-tp1'); + let data_text2 = $('.line-port').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('This port number connection already exists!'); + return; + } + this.createTpLinks(); + + } else { + //When the page ONAP is selected, the external cloud is created, and the connection is made. + 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('The service port cannot be empty. Please fill in the complete port information.'); + return; + } + let tp_links = [], + tp1 = this.selecteTpName1; + for (let i = 0; i < $(".line-port").length; i++) { + let data_text1 = $('.line-port').eq(i).attr('data-tp1'); + tp_links.push(data_text1); + } + if (tp_links.indexOf(tp1) != -1) { + alert('This port number connection already exists!'); + return; + } + + let time = this.cloudNetwork + new Date().getTime();//Create aaiid for the external cloud, this identifier is unique and cannot be repeated + this.createCloudUrls(time) + } + } + + //Create tp connection call interface createLink + createTpLinks() { + let params = { + 'link-name': this.linkName, + 'link-type': 'cross-link', + 'operational-status': 'up', + 'relationship-list': { + 'relationship': [ + { + 'related-to': 'p-interface', + 'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1, + 'relationship-data': [ + { + 'relationship-key': 'pnf.pnf-id', + 'relationship-value': this.selectedNode1 + }, + { + 'relationship-key': 'p-interface.p-interface-id', + 'relationship-value': this.selecteTpName1, + } + ] + }, + { + 'related-to': 'p-interface', + 'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2, + 'relationship-data': [ + { + 'relationship-key': 'pnf.pnf-id', + 'relationship-value': this.selectedNode2 + }, + { + 'relationship-key': 'p-interface.p-interface-id', + 'relationship-value': this.selecteTpName2 + } + ] + } + ] + } + }; + this.myhttp.createLink(params) + .subscribe((data) => { + if (data['status'] == 'SUCCESS') { + this.queryAddLink(); + } + }, (err) => { + console.log(err); + console.log('Create connection interface call failed'); + }); + } + + //Query the newly added connection immediately after creating the tp cable + queryAddLink() { + let linkName = this.linkName, + selecteTpName1 = this.selecteTpName1, + selecteTpName2 = this.selecteTpName2, + selectedNode1 = this.selectedNode1, + selectedNode2 = this.selectedNode2; + let params = { + 'link-name': linkName, + }; + this.myhttp.querySpecificLinkInfo(params) + .subscribe((data) => { + let version = data['resource-version'], + operational_status = data['operational-status'], + linkname = data['link-name']; + let textval = [selecteTpName1, selecteTpName2, version, selectedNode1, selectedNode2, operational_status, linkname]; + this.hideForm(); + this.chose(textval); + }, (err) => { + console.log(err); + }); + } + + //Connection between two TP coordinates + chose(textval) { + let 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(); + //Get the x, y coordinates of the second level + let 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(); + let 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); + } + + //Connection between two TPs + 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; + let x2 = lines.x2; + let y2 = lines.y2; + let color = '#14bb58'; + if (status == 'up') { + color = '#14bb58'; + } else { + color = 'red'; + } + let line = '<line class=\'line line-port line-click\' 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()); + } + + //After creating an external cloud connection, query the connection immediately + queryOutCloudLink(time) { + 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 status = data['operational-status']; + let link_name = data['link-name']; + this.outCloudShow = true; + this.hideForm(); + this.outCloud(this.imgmap); + setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time), 0); + }, (err) => { + console.log(err); + }); + } + + //Add external cloud + outCloud(imgmap) { + let _this = this, + width; + if (_this.tpoption.width > 800) { + width = _this.tpoption.width; + } else { + width = 800; + } + let svg = d3.select('#content-svg'); + svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)'); + let 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'); + } + + //Add external cloud connection + cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time) { + let lines_json = {}; + let _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) { + //Get the x, y coordinates of the second level + let 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; + } + } + let x1 = lines_json['x1']; + let y1 = lines_json['y1']; + let x2 = lines_json['x2']; + let y2 = lines_json['y2']; + let color = '#14bb58'; + if (status == 'up') { + color = '#14bb58'; + } else { + color = 'red'; + } + let line = '<line class=\'line cloudline line-click\' stroke=\'' + color + '\' stroke-width=\'2\' style=\'cursor:pointer\'></line>'; + let 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-node1': selectedNode1, + 'data-node2': cloudNode, + 'data-network': networkVal1, + 'data-cloudnetwork': cloudNetWork, + 'data-url': cloudUrl, + 'data-aaiid': time, + 'data-link': link_name + }); + svg.html(svg.html()); + this.getExtAAIIdVersion(time); + } + + //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls + createCloudNetwork(time) { + let _thiss = this; + let params = { + '-xmlns': 'http://org.onap.aai.inventory/v14', + 'in-maint': 'false', + "network-id": this.cloudNetwork, + "provider-id": "", + "client-id": "", + "te-topo-id": "", + "relationship-list": { + "relationship": [{ + "related-to": "ext-aai-network", + 'related-link': '/aai/v14/network/ext-aai-networks/ext-aai-network/' + time + }] + } + }; + + //Do some asynchronous operations + _thiss.myhttp.createNetwrok(params) + .subscribe((data) => { + if (data["status"] == "SUCCESS") { + _thiss.createPnfs(time) + } + }, (err) => { + console.log(err); + }); + + } + + createPnfs(time) { + let _thiss = this; + let params = { + "-xmlns": "http://org.onap.aai.inventory/v14", + "pnf-name": this.cloudNode, + "pnf-id": this.cloudNode, + "in-maint": "true", + "relationship-list": { + "relationship": [ + { + "related-to": "ext-aai-network", + "relationship-label": "org.onap.relationships.inventory.BelongsTo", + "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time, + "relationship-data": { + "relationship-key": "ext-aai-network.aai-id", + "relationship-value": time + } + }, + { + "related-to": "network-resource", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v14/network/network-resources/network-resource/" + this.cloudNetwork + } + ] + } + }; + + //Do some asynchronous operations + _thiss.myhttp.createPnf(params) + .subscribe((data) => { + if (data["status"] == "SUCCESS") { + _thiss.createCloudTp(time) + } + }, (err) => { + console.log(err); + }); + } + + createCloudTp(time) { + let _thiss = this; + let params = { + "-xmlns": "http://org.onap.aai.inventory/v14", + "interface-name": this.cloudTp, + "speed-value": "1000000", + "in-maint": "true", + "network-ref": "", + "transparent": "true", + "operational-status": "up" + }; + + let cloudNodeName = this.cloudNode; + //Do some asynchronous operations + _thiss.myhttp.createTp(params, cloudNodeName) + .subscribe((data) => { + if (data["status"] == "SUCCESS") { + _thiss.createCloudLinks(time) + } + }, (err) => { + console.log(err); + }); + } + + createCloudLinks(time) { + let _thiss = this; + let params = { + "-xmlns": "http://org.onap.aai.inventory/v14", + "link-name": this.linkName, + "in-maint": "false", + "link-type": "cross-link", + "speed-value": "", + "operational-status": "up", + "relationship-list": { + "relationship": [ + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v14/network/pnfs/pnf/" + this.selectedNode1 + "/p-interfaces/p-interface/" + this.selecteTpName1, + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": this.selectedNode1 + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": this.selecteTpName1 + } + ], + "related-to-property": [{ + "property-key": "p-interface.prov-status" + }] + }, + { + "related-to": "p-interface", + "relationship-label": "tosca.relationships.network.LinksTo", + "related-link": "/aai/v14/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/" + this.cloudTp, + "relationship-data": [ + { + "relationship-key": "pnf.pnf-name", + "relationship-value": this.cloudNode + }, + { + "relationship-key": "p-interface.interface-name", + "relationship-value": this.cloudTp + } + ], + "related-to-property": [{ + "property-key": "p-interface.prov-status" + }] + }, + { + "related-to": "ext-aai-network", + "relationship-label": "org.onap.relationships.inventory.BelongsTo", + "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time, + "relationship-data": [ + { + "relationship-key": "ext-aai-network.aai-id", + "relationship-value": time + } + ] + } + ] + } + }; + + //Do some asynchronous operations + _thiss.myhttp.createCloudLink(params) + .subscribe((data) => { + // resolve(data['status']); + if (data["status"] == "SUCCESS") { + _thiss.queryOutCloudLink(time); + } + }, (err) => { + console.log(err); + }); + } + + createCloudUrls(time) { + let _thiss = this; + let params = { + '-xmlns': 'http://org.onap.aai.inventory/v14', + 'aai-id': time, + 'esr-system-info': { + 'esr-system-info-id': 'example-esr-system-info-id-val-0', + 'service-url': this.cloudUrl, + 'user-name': 'demo', + 'password': 'demo123456!', + 'system-type': 'ONAP' + } + }; + _thiss.myhttp.createCloudUrl(params) + .subscribe((data) => { + if (data['status'] == 'SUCCESS') { + _thiss.createCloudNetwork(time); + } + }, (err) => { + console.log(err); + }); + } + + //Local cloud TP port Delete connection Call interface deleteLink + delLink(): void { + let deltp1 = this.delTp1, + deltp2 = this.delTp2, + version = this.delVersion, + dellinkname = this.delLinkname, + delLinkIndex = this.delLinkIndex; + let params = { + 'logical-link': dellinkname, + 'resource-version': version, + }; + this.myhttp.deleteLink(params) + .subscribe((data) => { + if (data['status'] == 'SUCCESS') { + this.delLine(deltp1, deltp2); + delLinkIndex.remove(); + } + }, (err) => { + console.log(err); + console.log('Deleting a connection interface call failed'); + }); + } + + delLine(val1, val2) { + this.delBoxisVisible = false; + 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(); + } + } + } + + + //External cloud Delete connection Call interface deleteCloudLink + delCloudLink(): void { + let deltp1 = this.delTp1, + deltp2 = this.delTp2, + version = this.delVersion, + aaiId = this.aaiId; + let params = { + "aaiId": aaiId, + "version": version, + }; + this.myhttp.deleteCloudLink(params) + .subscribe((data) => { + if (data['status'] == 'SUCCESS') { + this.delLine(deltp1, deltp2); + $('.cloudline').remove(); + $('#out').remove(); + } + }, (err) => { + console.log(err); + console.log('Deleting a connection interface call failed'); + }); + } + +} diff --git a/usecaseui-portal/src/app/views/fcaps/fcaps.component.html b/usecaseui-portal/src/app/views/fcaps/fcaps.component.html new file mode 100644 index 00000000..edd2111a --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.html @@ -0,0 +1,3 @@ +<iframe src="http://172.30.1.80:5601" frameborder="0" style="height:100vh;width:100%;"></iframe> +<!-- <iframe src="http://dl_es:5601/app/kibana#/dashboard/a0db79a0-624e-11e9-88e5-b7b07490dd67?_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A86400000)%2Ctime%3A(from%3Anow-1y%2Cmode%3Aquick%2Cto%3Anow))" frameborder="0" style="height:100vh;width:100%;"></iframe> --> +<!-- <iframe src="http://dl_es:5601/app/kibana#/dashboard/a0db79a0-624e-11e9-88e5-b7b07490dd67?embed=true&_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A86400000)%2Ctime%3A(from%3Anow-1y%2Cmode%3Aquick%2Cto%3Anow))" style="height:100vh;width:100%;"></iframe> --> diff --git a/usecaseui-portal/src/app/views/fcaps/fcaps.component.less b/usecaseui-portal/src/app/views/fcaps/fcaps.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.less diff --git a/usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts b/usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts new file mode 100644 index 00000000..42bdbc0f --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FcapsComponent } from './fcaps.component'; + +describe('FcapsComponent', () => { + let component: FcapsComponent; + let fixture: ComponentFixture<FcapsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FcapsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FcapsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/fcaps/fcaps.component.ts b/usecaseui-portal/src/app/views/fcaps/fcaps.component.ts new file mode 100644 index 00000000..7f9ab7f4 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/fcaps.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-fcaps', + templateUrl: './fcaps.component.html', + styleUrls: ['./fcaps.component.less'] +}) +export class FcapsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/views/home/home.component.css b/usecaseui-portal/src/app/views/home/home.component.css new file mode 100644 index 00000000..41b3f5fe --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.css @@ -0,0 +1,158 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 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; + margin-left: 2%; + 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/views/home/home.component.html b/usecaseui-portal/src/app/views/home/home.component.html new file mode 100644 index 00000000..4126f241 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.html @@ -0,0 +1,102 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> + +<!--<h3 class="title"> {{"Overall trend" | translate}}</h3> +<hr> --> +<div class="content"> + <div class="left-content"> + <div class="services"> + <h4>{{"i18nTextDefine_SERVICES" | translate}}</h4> + <!-- <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3> + <p>{{serviceNumber}} {{"services has been created" | translate}}</p> --> + <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData" *ngIf="serviceChart"></app-pie> + <div *ngIf="!serviceChart" + style="color: #ddd; font-weight: 700;font-size: 19px;height: 200px;text-align: center;line-height: 8;">No Service Instances </div> + + <div> + <h5><span>{{"i18nTextDefine_Total" | translate}}:</span> {{serviceNumber}} + <span>{{"i18nTextDefine_cutomers_and" | translate}}</span> {{serviceNumber}} + <span>{{"i18nTextDefine_service_instance" | translate}}</span></h5> + </div> + <p class="tip"> + <span style="color:#3C4F8C" (click) = "goback_services()">{{"i18nTextDefine_ViewDetails" | translate}}</span> + </p> + </div> + <div class="PACKAGE"> + <h4>{{"i18nTextDefine_PACKAGE" | translate}}</h4> + <div class="details"> + <li class="detailstoplinContent"> + <div class="detailstoplin"> + <div><span></span> NS</div> + <div> + <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData"></app-bar> + </div> + <div>{{NSdata}}</div> + </div> + </li> + <li class="detailstoplinContent"> + <div class="detailstoplin"> + <div><span style="background-color:#BCECB8;"></span> VNF</div> + <div> + <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData1"></app-bar> + </div> + <div>{{Vnfdata}}</div> + </div> + </li> + <li class="detailstoplinContent"> + <div class="detailstoplin"> + <div><span style="background-color:#ACCAF4;"></span> PNF</div> + <div> + <app-bar [initData]="serviceBarChartInit" [chartData]="servicesBarChartData2"></app-bar> + </div> + <div>{{PnfData}}</div> + </div> + </li> + </div> + <p class="tip"> + <span style="color:#3C4F8C" (click) = "goback_onboard()">{{"i18nTextDefine_ViewDetails" | translate}}</span> + </p> + </div> + </div> + <div class="rightcontent" style="height: 96vh"> + <div class="rt-content"> + <div class="alarm"> + <h4>{{"i18nTextDefine_ALARM" | translate}}</h4> + <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie> + <p class="alarm-name"> {{"i18nTextDefine_VNF_Alarm" | translate}} </p> + </div> + <div class="poerformance"> + <app-pie [initData]="VMAlarmChartInit" [chartData]="VMAlarmChartData"></app-pie> + <p class="alarm-name"> {{"i18nTextDefine_VM_Alarm" | translate}} </p> + <p class="tip"> + <a href="#" style="color:#3C4F8C">{{"i18nTextDefine_ViewDetails" | translate}}</a> + </p> + </div> + </div> + <div class="rb-content"> + <h4>{{"i18nTextDefine_VM_Performance" | translate}}</h4> + <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'"> + <button nz-button nz-dropdown><span>{{sourceNameSelected}}</span> <i class="anticon anticon-down"></i></button> + <ul nz-menu> + <li nz-menu-item (click)="sourceNameSelect(item)" *ngFor="let item of sourceNameList"> + <a>{{item}}</a> + </li> + </ul> + </nz-dropdown> + <app-line [initData]="alarmLineChartInit" [chartData]="alarmLineChartData"></app-line> + </div> + </div> +</div> diff --git a/usecaseui-portal/src/app/views/home/home.component.less b/usecaseui-portal/src/app/views/home/home.component.less new file mode 100644 index 00000000..9e768cf7 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.less @@ -0,0 +1,265 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +// .title { +// font: 700 18px/18px "思源黑体"; +// color: #4c5e70; +// margin-bottom: 18px; +// } +// hr { +// border: none; +// height: 2px; +// background-color: #dce1e7; +// margin-bottom: 20px; +// } +.content { + padding: 20px 20px; + overflow: hidden; + .left-content{ + float: left; + width:30%; + // height:96vh; + .services,.PACKAGE{ + width: 100%; + background:rgba(255,255,255,1); + box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); + border-radius:6px; + padding: 28px 22px; + h4{ + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + } + .tip { + float: right; + width: 110px; + line-height: 35px; + border-radius: 5px; + background-color: #eceff4; + font-size: 16px; + color: #3C4F8C; + margin-top: 20px; + margin-bottom: 0!important; + } + } + .services{ + height:466px; + h4{ + margin-bottom: 20px; + } + h5 { + font: 500 18px/18px "ArialMT"; + color:#0DA9E2; + margin: -2em 0 1em 0 ; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + span { + font-size: 14px; + font-family: "Arial"; + color:#3C4F8C; + } + span:first-child { + font-size: 18px; + padding: 0 4PX 0 4px; + } + span:last-child { + padding-left: 4px; + } + + } + } + .PACKAGE{ + height:422px; + margin-top: 20px; + h4{ + margin-bottom: 50px; + } + .details { + .detailstoplinContent{ + border-bottom:0.5px solid rgba(237,237,237,1); + border-radius:4px; + line-height: 45px; + font-size: 14px; + color: #3C4F8C; + font-family:"ArialMT"; + .detailstoplin { + width: 100%; + height: 50px; + border-top: 0.5px solid #ededed; + border-radius: 4px; + div:first-child{ + width: 20%; + float: left; + } + div:nth-child(2){ + width: 65%; + float: left; + } + div:last-child { + width: 13%; + float: right; + font-size:12px; + font-weight: 500; + color:rgba(60,79,140,0.5); + } + } + } + } + + } + } + .services,.PACKAGE{ + 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; + } + } + .rightcontent { + float: left; + padding-left: 15px; + width: 70%; + .rt-content { + height: 40%; + margin-bottom: 18px; + background:rgba(255,255,255,1); + box-shadow:0px 10px 10px 2px rgba(222,222,222,0.5); + border-radius:6px; + .poerformance { + float: left; + background-color: #fff; + height: 100%; + width: 50%; + border-radius: 5px; + padding: 28px 26px; + .pfVmPm { + h3 { + color:#BD57E5; + } + } + h4 { + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + margin-bottom: 34px; + } + + div { + height: 57px; + position: relative; + margin-bottom: 10px; + h3 { + font: 600 25px/25px "Arial"; + color: #2F6AEF; + margin-bottom: 10px; + padding-left: 50%; + } + p { + font: 400 12px/12px "Arial"; + color:rgba(60,79,140,0.5); + padding-left: 50%; + + } + img { + position: absolute; + top: 0; + left: 0; + } + } + } + .alarm { + float: left; + background-color: #fff; + height: 100%; + width: 48%; + border-radius: 5px; + position: relative; + padding: 28px 26px; + h4 { + position: absolute; + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + } + } + .alarm-name{ + text-align: center; + margin-top: 15px; + } + .tip{ + width: 110px; + background-color: #eceff4; + color: #3C4F8C; + font-size: 16px; + float: right; + margin-top: 20px; + margin-bottom: 0!important; + line-height: 35px; + border-radius: 5px; + text-align: center; + } + } + .rb-content { + position: relative; + height: 58%; + background-color: #fff; + padding: 24px 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); + border-radius:6px; + h4 { + font: 600 16px/16px "Arial Bold"; + color: #0DA9E2; + } + 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/views/home/home.component.spec.ts b/usecaseui-portal/src/app/views/home/home.component.spec.ts new file mode 100644 index 00000000..5456a323 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.spec.ts @@ -0,0 +1,42 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { NgxEchartsModule } from 'ngx-echarts'; +import { HttpClientModule } from '@angular/common/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { HomeComponent } from './home.component'; +import { PieComponent } from '../../shared/components/charts/pie/pie.component'; +import { BarComponent } from '../../shared/components/charts/bar/bar.component'; +import { LineComponent } from '../../shared/components/charts/line/line.component'; +import { HomesService } from '../../core/services/homes.service'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture<HomeComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent, PieComponent, BarComponent, LineComponent ], + imports: [TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}), + NgZorroAntdModule, + NgxEchartsModule, + HttpClientModule, + BrowserAnimationsModule, + RouterTestingModule], + providers: [HomesService, TranslateService] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/home/home.component.ts b/usecaseui-portal/src/app/views/home/home.component.ts new file mode 100644 index 00000000..11a0f1a8 --- /dev/null +++ b/usecaseui-portal/src/app/views/home/home.component.ts @@ -0,0 +1,531 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core'; +import { HomesService } from '../../core/services/homes.service'; +import { slideToRight } from '../../animates'; +import { TranslateService } from "@ngx-translate/core"; +import { Router } from '@angular/router'; + +@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: HomesService, private router: Router) { } + + ngOnInit() { + this.getListSortMasters(); + this.getSourceNames(); + this.getHomeServiceData(); + this.getHomeAlarmData(); + this.getHomeAlarmChartData(); + this.getHomeServiceBarNsData(); + this.getHomeServiceBarVnfData(); + this.getHomeServiceBarPnfData(); + } + + + // services + serviceNumber: number = 0; + serviceChartData: Object; + serviceChartInit: Object = { + backgroundColor: '#fff', + height: 200, + option: { + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + data: ['Active', 'Closed'] + }, + color: ["#7AC0EF", "#6A86D8", "#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"], + series: [ + { + name: "服务信息", + radius: ['50%', '70%'], + center: ['50%', '45%'], + avoidLabelOverlap: false, + label: { + normal: { + show: false, + position: 'center' + }, + emphasis: { + show: true, + formatter: '{b}\n{c}', + textStyle: { + fontSize: '18', + fontWeight: 'bold' + } + } + }, + labelLine: { + normal: { + show: false + } + }, + itemStyle: { + normal: { + borderWidth: 4, + borderColor: "#fff" + }, + emphasis: { + borderWidth: 0 + } + }, + } + ] + } + }; + // gethomeServiceData + serviceChart = true; + getHomeServiceData() { + this.myhttp.getHomeServiceData() + .subscribe( + (data) => { + this.serviceNumber = data.serviceTotalNum; + if (this.serviceNumber > 0) { + this.serviceChart = true; + } else { + this.serviceChart = false; + } + this.serviceChartData = { + series: [{ data: data.customerServiceList }] + }; + }, + (err) => { + console.error(err); + } + ) + } + + // VM alarm + VMAlarmChartData: Object; + VMAlarmChartInit: Object = { + height: 180, + option: { + tooltip: { + trigger: 'item', + formatter: '{b}\n{c},{d}%' + }, + color: [ + { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB93C2' // 0% color + }, { + offset: 1, color: '#FB7788' // 100% color + }], + globalCoord: false + }, { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#A6BFE4' // 0% color + }, { + offset: 1, color: '#7A8BAE' // 100% color + }], + globalCoord: false + }], + series: [{ + name: "告警信息", + radius: ['50%', '70%'], + center: ['50%', '45%'], + label: { + normal: { + show: false, + }, + emphasis: { + show: true, + formatter: '{b}\n{c},{d}%', + color: "#3C4F8C" + } + }, + + }] + } + }; + + // alarm bar + alarmChartData: Object; + alarmChartInit: Object = { + height: 180, + option: { + tooltip: { + trigger: 'item', + formatter: '{b}\n{c},{d}%' + }, + legend: { + orient: 'vertical', + left: '0px', + bottom: '0px', + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: "#3C4F8C" + }, + data: ['Active', 'Fixed'] + }, + color: [ + { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#FB93C2' // 0% color + }, { + offset: 1, color: '#FB7788' // 100% color + }], + globalCoord: false + }, { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: '#A6BFE4' // 0% + }, { + offset: 1, color: '#7A8BAE' // 100% + }], + globalCoord: false + }], + series: [{ + name: "告警信息", + radius: '55%', + center: ['50%', '45%'], + label: { + normal: { + show: false, + }, + emphasis: { + show: true, + formatter: '{b}\n{c},{d}%', + color: "#3C4F8C" + } + } + }] + } + }; + + getHomeAlarmData() { + this.myhttp.getHomeAlarmData() + .subscribe((data) => { + this.alarmChartData = { + series: [{ + data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] + }] + }; + this.VMAlarmChartData = { + series: [{ + data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] + }] + }; + }) + } + + // alarm line + alarmLineChartData: Object; + alarmLineChartInit: Object = { + height: 320, + option: { + legend: { + bottom: '0px', + data: ['CPU', 'Memory', 'Disk'] + }, + xAxis: { + data: [] + }, + series: [ + { + name: 'CPU', + type: 'line', + itemStyle: { + color: "#70ACEC" + }, + data: [] + }, + { + name: 'Memory', + type: 'line', + itemStyle: { + color: "#3BCD79" + }, + data: [] + }, + { + name: 'Disk', + type: 'line', + itemStyle: { + color: "#FDC288" + }, + data: [] + } + ] + } + }; + + // services + servicesBarChartData: Object; + servicesBarChartData1: Object; + servicesBarChartData2: Object; + serviceBarChartInit: Object = { + height: 40, + width: 160, + option: { + tooltip: { + + }, + grid: { + + }, + xAxis: { + type: 'value', + show: false, + min: 0, + max: 100, + axisTick: { + show: false + }, + }, + yAxis: { + type: 'category', + show: false, + axisTick: { + show: false + } + }, + series: [{ + type: 'bar', + name: 'a', + silent: true, + animation: false, + data: [], + stack: 'income', + barWidth: 12, + itemStyle: { + normal: {} + }, + }, { + type: 'bar', + name: '', + animation: false, + silent: true, + data: [100], + tooltip: { + show: false + }, + stack: 'income', + barWidth: 12, + itemStyle: { + normal: { + color: '#fff', + barBorderRadius: [10, 10, 10, 10] + } + }, + label: { + normal: { + show: false, + } + }, + } + ] + } + } + + + NSdata: number; + Vnfdata: number; + PnfData: number; + getHomeServiceBarNsData() { + this.myhttp.getHomeServiceBarNsData() + .subscribe((data) => { + this.NSdata = data.length; + this.servicesBarChartData = { + series: [ + { + data: [this.NSdata], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#FDAC63' + }, { + offset: 1, + color: '#FECE72' + }], + globalCoord: false, + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + + ] + } + }, (err) => { + console.error(err); + }) + } + + getHomeServiceBarVnfData() { + this.myhttp.getHomeServiceBarVnfData() + .subscribe((data) => { + this.Vnfdata = data.length; + this.servicesBarChartData1 = { + series: [ + { + data: [this.Vnfdata], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#9AD09F' + }, { + offset: 1, + color: '#BCECB8' + }], + globalCoord: false, + + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + ] + } + }, (err) => { + console.error(err); + }) + } + + getHomeServiceBarPnfData() { + this.myhttp.getHomeServiceBarPnfData() + .subscribe((data) => { + this.PnfData = data.length; + this.servicesBarChartData2 = { + series: [ + { + data: [this.PnfData], + itemStyle: { + normal: { + color: { + type: 'bar', + colorStops: [{ + offset: 0, + color: '#71ADEF' + }, { + offset: 1, + color: '#ACCAF4' + }], + globalCoord: false, + + }, + barBorderRadius: [10, 10, 10, 10] + } + }, + }, + { data: [100] }, + ] + } + }, (err) => { + console.error(err); + }) + } + // sourceName + sourceNameList = ['performanceNameOne']; + sourceNameSelected = null; + + + listSortMasters = null; + + getListSortMasters() { + if (sessionStorage.getItem("DefaultLang") == undefined) { + sessionStorage.setItem("DefaultLang", "en"); + } + this.myhttp.getListSortMasters() + .subscribe((data) => { + this.listSortMasters = JSON.stringify(data); + sessionStorage.setItem('listSortMasters', this.listSortMasters) + }) + } + + getSourceNames() { + this.myhttp.getSourceNames() + .subscribe((data) => { + this.sourceNameList = data; + }) + } + sourceNameSelect(item) { + if (this.sourceNameSelected != item) { + this.sourceNameSelected = item; + this.getHomeAlarmChartData() + } + } + getHomeAlarmChartData() { + let nowTime = this.myhttp.dateformater(Date.now()); + let startTime = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000); + let obj = { + sourceName: this.sourceNameSelected, + startTime: startTime, + endTime: nowTime, + format: "day" + } + + this.myhttp.getHomeAlarmChartData(obj) + .subscribe((data) => { + this.alarmLineChartData = { + xAxis: { + data: data.dataList + }, + series: [ + { data: data.allList }, + { data: data.ActiveList }, + { data: data.closedList } + ] + } + }, (err) => { + console.error(err); + }) + } + + goback_services() { + this.router.navigateByUrl('/services/services-list'); + } + goback_onboard() { + this.router.navigateByUrl('/services/onboard-vnf-vm'); + } + +} diff --git a/usecaseui-portal/src/app/views/management/management.component.html b/usecaseui-portal/src/app/views/management/management.component.html new file mode 100644 index 00000000..c96f0253 --- /dev/null +++ b/usecaseui-portal/src/app/views/management/management.component.html @@ -0,0 +1,39 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="content" style="padding: 20px 20px;height: 100vh"> + <div class="management" *ngIf="nocuster"> + <div class="title"> + <p> {{"i18nTextDefine_Create_initial_customer" | translate}} </p> + <span> {{"i18nTextDefine_Customer_not_in_ONAP" | translate}} </span> + <span> {{"i18nTextDefine_CreateCustomer" | translate}} </span> + <img src="../../../assets/images/customer01.png" alt=""> + <input nz-input placeholder=" {{'i18nTextDefine_Input_customerName' | translate}} " nzSize="large" + style="height: 50px" [(ngModel)]="firstCustomer"> + <div class="action"> + <button nz-button nzType="primary" class="cancel" (click)="clearCustomerInput()"> + {{"i18nTextDefine_Cancel" | translate}} </button> + <button nz-button nzType="primary" class="add" (click)="createNewCustomer(firstCustomer)"> + {{"i18nTextDefine_Add" | translate}} </button> + </div> + </div> + <div class="image"> + <img src="../../../assets/images/customer02.png" alt=""> + </div> + </div> + <div *ngIf="!nocuster" style="height: 100%"> + <app-customer></app-customer> + </div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/management/management.component.less b/usecaseui-portal/src/app/views/management/management.component.less new file mode 100644 index 00000000..5a3a0f42 --- /dev/null +++ b/usecaseui-portal/src/app/views/management/management.component.less @@ -0,0 +1,79 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.content { + .management { + width: 100%; + .title { + width: 50%; + vertical-align:top; + display: inline-block; + font-family: "Arial"; + p { + font-size: 33px; + color: #3C4F8C; + margin-bottom: 0.5em; + } + span { + font-size: 18px; + color: rgba(60,79,140,0.5); + display: block; + } + img { + padding-top: 8%; + width: 55%; + margin-left: 20%; + margin-bottom: 5%; + } + input { + width: 50%; + margin: 0 auto; + margin-bottom: 5%; + display: block; + + } + .action{ + width: 50%; + height: 40px; + margin: 0 auto; + } + .action button{ + width: 40%; + height: 40px; + margin: 0 4%; + } + .cancel{ + background-color: #eee; + border-color: #eee; + color: #9DA7C5; + } + .add { + color: #fff; + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + border-color: #1890ff; + } + } + .image { + width: 49%; + vertical-align:top; + display: inline-block; + img { + width: 85%; + margin-top: 41%; + } + } + } + +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/management/management.component.spec.ts b/usecaseui-portal/src/app/views/management/management.component.spec.ts new file mode 100644 index 00000000..f6152432 --- /dev/null +++ b/usecaseui-portal/src/app/views/management/management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManagementComponent } from './management.component'; + +describe('ManagementComponent', () => { + let component: ManagementComponent; + let fixture: ComponentFixture<ManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/management/management.component.ts b/usecaseui-portal/src/app/views/management/management.component.ts new file mode 100644 index 00000000..8b3afea7 --- /dev/null +++ b/usecaseui-portal/src/app/views/management/management.component.ts @@ -0,0 +1,68 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit , HostBinding} from '@angular/core'; +import { showHideAnimate, slideToRight } from '../../animates'; +import { ManagemencsService } from '../../core/services/managemencs.service'; + +@Component({ + selector: 'app-management', + templateUrl: './management.component.html', + styleUrls: ['./management.component.less'], + animations: [ + showHideAnimate, slideToRight + ] +}) +export class ManagementComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; //Routing animation + + constructor(private managemencs: ManagemencsService) { } + + ngOnInit() { + this.getAllCustomers(); + } + + nocuster = true; + firstCustomer = null; + AllCustomersdata = []; + + // Get all customers + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + if (data.length > 0) { + this.nocuster = false; + } else { + this.nocuster = true; + } + }) + } + + createNewCustomer(customer) { + let createParams = { + customerId: customer + }; + this.managemencs.createCustomer(customer, createParams).subscribe((data) => { + if (data["status"] == 'SUCCESS') { + this.nocuster = false; + } else { + this.nocuster = true; + console.log(data, "Interface returned error") + } + }) + } + clearCustomerInput(){ + this.firstCustomer=null; + } +} diff --git a/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css new file mode 100644 index 00000000..e9631957 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.css @@ -0,0 +1,75 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 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/views/performance/performance-vm/performance-vm.component.html b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.html new file mode 100644 index 00000000..06d84353 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.html @@ -0,0 +1,79 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<!-- <h3 class="title"> + <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/views/performance/performance-vm/performance-vm.component.less b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.less new file mode 100644 index 00000000..31623dcf --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.less @@ -0,0 +1,76 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 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/views/performance/performance-vm/performance-vm.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.spec.ts new file mode 100644 index 00000000..b66b2ea0 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.spec.ts @@ -0,0 +1,68 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { PerformanceVmComponent } from './performance-vm.component'; + +describe('PerformanceVmComponent', () => { + let component: PerformanceVmComponent; + let fixture: ComponentFixture<PerformanceVmComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceVmComponent ], + imports: [ + BrowserAnimationsModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceVmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should test performanceShow method to set proper values', () => { + component.performanceShow(); + expect(component.state).toBe('show'); + expect(component.state2).toBe('hide'); + expect(component.state3).toBe('hide'); + expect(component.graphicshow).toBe(false); + expect(component.detailshow).toBe(false); + }); + + it('should test graphicShow method to set proper values', () => { + component.graphicShow(); + expect(component.state).toBe('hide'); + expect(component.state2).toBe('show'); + expect(component.state3).toBe('hide'); + expect(component.graphicshow).toBe(true); + expect(component.detailshow).toBe(false); + }); + + it('should test detailShow method to set proper values', () => { + component.detailShow({id:1}); + expect(component.state).toBe('hide'); + expect(component.state2).toBe('hide'); + expect(component.state3).toBe('show'); + expect(component.graphicshow).toBe(true); + expect(component.detailshow).toBe(true); + expect(component.detailId).toBe(1); + }); + + it('should test choseSourceName method', () => { + component.choseSourceName('bbbb'); + expect(component.sourceNameSelected).toBe('bbbb'); + }); + + it('should test choseSourceName method', () => { + component.choseReportingEntityName('bbbb'); + expect(component.ReportingEntityNameSelected).toBe('bbbb'); + }); + +}); diff --git a/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.ts b/usecaseui-portal/src/app/views/performance/performance-vm/performance-vm.component.ts new file mode 100644 index 00000000..c179cdbb --- /dev/null +++ b/usecaseui-portal/src/app/views/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() { + } + + // Filter box (drop-down box) + 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; + } + + //Tabular data + 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.' + } + ]; + + //Detail page title display + graphicshow = false; + detailshow = false; + // Show hidden animation + 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; + } + // Selected 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/views/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css new file mode 100644 index 00000000..269af7a9 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.css @@ -0,0 +1,126 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 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 .search { + margin-left: 20px; + vertical-align: middle; + height: 30px; + padding: 0 10px; +} +.select .search 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/views/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html new file mode 100644 index 00000000..9e0e2ed6 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.html @@ -0,0 +1,63 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> + <span (click)="performanceShow()" style="cursor:pointer;" *ngIf="graphicshow">Performance VNF</span> + <span (click)="graphicShow()" *ngIf="graphicshow">/ Graphic list </span> + <span *ngIf="detailshow">/ Details </span> +</h3> +<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> + <button class="search" nz-button [nzType]="'primary'"><i + class="anticon anticon-search"></i><span>Search</span></button> + <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button> --> +</div> +<div class="content" [@showHideAnimate]="state"> + <div class="vnfs"> + <div class="vnf" *ngFor="let item of totalRecords"> + <img src="../../../../assets/images/vnf01.png" title="VNF" (click)="graphicShow2(item)"> + <!-- <h3>{{item.name}}</h3> --> + <div class="intro"> + {{item.name}} + </div> + </div> + <div class="vnf" *ngFor="let item of totalpnfs"> + <img src="../../../../assets/images/pnf01.png" alt="PNF" (click)="graphicShow2(item)"> + <div class="intro"> + {{item.name}} + </div> + </div> + <div class="empty" *ngFor="let empty of emptys"></div> + </div> + <div class="pages"> + <nz-pagination [(nzPageIndex)]="currentPage" [nzTotal]="vnfsdataTotal" [nzSize]="'small'" + [(nzPageSize)]="pageSize" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper> + </nz-pagination> + </div> +</div> +<div [@showHideAnimate]="state2"> + <app-graphiclist (detailData)="detailShow($event)" [vnfname]="vnfname"></app-graphiclist> +</div> +<div [@showHideAnimate]="state3"> + <app-performance-details [detailId]="detailId"></app-performance-details> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less new file mode 100644 index 00000000..cc4e1ca5 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.less @@ -0,0 +1,136 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 500 14px/18px "ArialMT"; + color: #3C4F8C; + padding: 20px 0 0 20px; +} +.select { + height: 70px; + background-color: #fff; + margin-top: -30px; + padding-left: 20px; + box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); + line-height: 5; + span { + display: inline-block; + font: 400 14px "ArialMT"; + color: #3C4F8C; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #fff; + text-align: left; + border-color: #E5E8F2; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + :hover { + border-color: #48C6EF; + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .search { + margin-left: 20px; + margin-top: -6px; + 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; + background-color: #fff; + width: 18%; + height: 200px; + margin: 5px; + padding: 20px; + border-radius: 2px; + text-align: center; + cursor: pointer; + transition: all 0.3s linear; + &:hover { + background-color: #fff; + transform: scale(1.02); + color: #3F9CFF; + } + 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; + padding-top: 25px; + 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/views/performance/performance-vnf/performance-vnf.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts new file mode 100644 index 00000000..25bcfd50 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.spec.ts @@ -0,0 +1,45 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { TranslateModule, TranslateLoader, TranslateService, TranslateFakeLoader} from '@ngx-translate/core'; +import { NgZorroAntdModule } from 'ng-zorro-antd'; +import { NgxEchartsModule } from 'ngx-echarts'; +import { NZ_I18N, en_US } from 'ng-zorro-antd'; +import { HttpClientModule } from '@angular/common/http'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { PerformanceDetailsComponent } from '../../../shared/components/performance-details/performance-details.component'; +import { GraphiclistComponent } from '../../../shared/components/graphiclist/graphiclist.component'; +import { PerformanceVnfComponent } from './performance-vnf.component'; +import { HomesService } from '../../../core/services/homes.service'; + +describe('PerformanceVnfComponent', () => { + let component: PerformanceVnfComponent; + let fixture: ComponentFixture<PerformanceVnfComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformanceVnfComponent, PerformanceDetailsComponent, GraphiclistComponent ], + imports: [ TranslateModule.forRoot({loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }}), + NgZorroAntdModule.forRoot(), + NgxEchartsModule, + HttpClientModule, + BrowserAnimationsModule ], + providers: [TranslateService, HomesService ], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA, + NO_ERRORS_SCHEMA + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformanceVnfComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +});
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts new file mode 100644 index 00000000..96b5404c --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance-vnf/performance-vnf.component.ts @@ -0,0 +1,145 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { slideToRight, showHideAnimate } from '../../../animates'; +import { HomesService } from '../../../core/services/homes.service'; + +@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; + public sourceNameList: Array<any> = ['---auto---']; + public sourceName: string = ''; + public vnfsdataTotal: number; + public startTime: string = ''; + public endTime: string = ''; + public currentPage: number = 1; + public pageSize: number = 10; + list: any; + + constructor( + private myhttp: HomesService) { } + + ngOnInit() { + this.getqueryAllSourceNames(); + // this.getperformanceSsourceNames(); + let _this = this; + setTimeout(function(){ + _this.totalRecords = [ + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"} + ]; + _this.totalpnfs = [ + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"}, + {name:"Mfvs_MMEManagedElem entdElementMfvs_MMEM anagedELement��",text:"oahgieango"} + ] + _this.emptys = new Array(12-_this.totalRecords.length); + },300) + } + + + sourceNameSelected = this.sourceNameList[0]; + getqueryAllSourceNames() { + this.myhttp.getqueryAllSourceNames().subscribe((data) => { + for (let i = 0; i < data.length; i++) { + this.sourceNameList.push(data[i]); + } + this.sourceNameSelected = this.sourceNameList[0]; + }) + } + choseSourceName(item) { + this.sourceNameSelected = item; + if (item == "---auto---") { + this.sourceName = ''; + } else { + this.sourceName = item; + } + } + // vnfs data + totalRecords = []; + totalpnfs = []; + //Fill the box + emptys = []; + + // getperformanceSsourceNames() { + // this.myhttp.getperformanceSourceNames(this.currentPage, this.pageSize, this.sourceName).subscribe((data) => { + // this.totalRecords = data.totalRecords; + // this.vnfsdataTotal = data.names; + // if (Number.isInteger(this.totalRecords.length / 5)) { + // this.emptys = new Array(0); + // } else { + // this.emptys = new Array(5 - this.totalRecords.length % 5); + // } + // }) + // } + //Detail page title display + isHidden = true; + graphicshow = false; + detailshow = false; + // Show hidden animation + state = "show"; + state2 = "hide"; + state3 = "hide"; + performanceShow() { + this.state = 'show'; + this.state2 = 'hide'; + this.state3 = 'hide'; + this.graphicshow = false; + this.detailshow = false; + } + // Selected name + + graphicShow() { + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + } + vnfname: string; + graphicShow2(item) { + this.state = 'hide'; + this.state2 = 'show'; + this.state3 = 'hide'; + this.graphicshow = true; + this.detailshow = false; + this.vnfname = item; + } + // Selected id + detailId: string; + detailShow(item) { + this.state = 'hide'; + this.state2 = 'hide'; + this.state3 = 'show'; + this.graphicshow = true; + this.detailshow = true; + this.detailId = item.id.id; + } +} diff --git a/usecaseui-portal/src/app/views/performance/performance.component.css b/usecaseui-portal/src/app/views/performance/performance.component.css new file mode 100644 index 00000000..f2169538 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance.component.css @@ -0,0 +1,26 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} diff --git a/usecaseui-portal/src/app/views/performance/performance.component.html b/usecaseui-portal/src/app/views/performance/performance.component.html new file mode 100644 index 00000000..cd92b659 --- /dev/null +++ b/usecaseui-portal/src/app/views/performance/performance.component.html @@ -0,0 +1,17 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<h3 class="title"> Performance </h3> +<hr> diff --git a/usecaseui-portal/src/app/views/performance/performance.component.less b/usecaseui-portal/src/app/views/performance/performance.component.less new file mode 100644 index 00000000..2b1949a5 --- /dev/null +++ b/usecaseui-portal/src/app/views/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/views/performance/performance.component.spec.ts b/usecaseui-portal/src/app/views/performance/performance.component.spec.ts new file mode 100644 index 00000000..1bdc919d --- /dev/null +++ b/usecaseui-portal/src/app/views/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/views/performance/performance.component.ts b/usecaseui-portal/src/app/views/performance/performance.component.ts new file mode 100644 index 00000000..12405e9e --- /dev/null +++ b/usecaseui-portal/src/app/views/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/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css new file mode 100644 index 00000000..4e80750c --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -0,0 +1,67 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 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; +} +.list nz-table tbody td .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.list nz-table tbody td .fileIcon{ + display: none; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html new file mode 100644 index 00000000..70ee81c0 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -0,0 +1,333 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'"> + <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)"> + <!-- nsList --> + <div class="list" *ngIf="tab === 'NS'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div style="width:100%;height: 30%;margin-bottom: 1%"> + <div class="listupload"> + <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS"> + <p class="ant-upload-drag-icon"> + <i nz-icon type="inbox" class="anticon anticon-inbox"></i> + </p> + <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p> + <p class="ant-upload-hint"></p> + </nz-upload> + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> + {{ nsuploading ? 'Uploading' : 'Start Upload' }} + </button> + </div> + <div class="listlin"></div> + <div class="listfile"> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of nsRightList"> + <div> + <i class="anticon anticon-link"></i> + </div> + <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div> + <div class="color" *ngIf="itemns.status"> + <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress> + </div> + <div class="color" *ngIf="!itemns.status"> + <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> + <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> + </div> + <div *ngIf="!itemns.status"> + <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i> + <i class="anticon anticon-exclamation-circle" *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i> + </div> + </div> + </div> + </div> + </div> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" + [(nzPageIndex)]='nspageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th> + <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <!--<td *ngIf="item.uuid">{{item.uuid}}</td>--> + + <td *ngIf="item.nsdName">{{item.nsdName}}</td> + <td *ngIf="item.nsdName === null || item.nsdName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.name===null || item.name=== ''"> </td> + <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> + <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td *ngIf="item.version === null || item.version === ''"> </td> + <td> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''"> </span> + <span *ngIf="item.uuid">{{status}}</span> + + <!-- <span *ngIf="item.uuid" [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', + 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span> + <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> --> + </td> + <td>{{item.nsdOperationalState}}</td> + <td>{{item.nsdUsageState}}</td> + <td> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i,notificationModel)" + *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)" + *ngIf="item.id"></i> + <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">--> + <!--<span *ngIf="item.id && item.sameid == undefined">--> + <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">--> + <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>--> + <!--</nz-upload>--> + <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"--> + <!--style="margin-top: 16px" *ngIf="item.id==nsdInfoId">--> + <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}--> + <!--</button>--> + <!--</span>--> + + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + <!-- <div style="margin-top:8px;"> + Loading state: + <nz-switch [(ngModel)]="isSpinning"></nz-switch> + </div> --> + + </div> + <!-- VNFList --> + <div class="list" *ngIf="tab === 'VNF'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div style="width:100%;height: 30%;margin-bottom: 1%"> + <div class="listupload"> + <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF"> + <p class="ant-upload-drag-icon"> + <i nz-icon type="inbox" class="anticon anticon-inbox"></i> + </p> + <p class="ant-upload-text">Click or drag CSAR File here</p> + <p class="ant-upload-hint"></p> + </nz-upload> + <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> + {{ vnfuploading ? 'Uploading' : 'Start Upload' }} + </button> + </div> + <div class="listlin"></div> + <div class="listfile"> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of vnfRightList"> + <div> + <i class="anticon anticon-link"></i> + </div> + <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div> + <div class="color" *ngIf="itemns.status"> + <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress> + </div> + <div class="color" *ngIf="!itemns.status"> + <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> + <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> + </div> + <div *ngIf="!itemns.status"> + <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i> + <i class="anticon anticon-exclamation-circle" *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i> + </div> + </div> + </div> + </div> + </div> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" + [(nzPageIndex)]='vnfpageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th> + <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <!--<td *ngIf="item.uuid">{{item.uuid}}</td>--> + <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td> + <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''"> </td> + <td *ngIf="item.name">{{item.name}}</td> + <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td> + <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''"> </td> + <td *ngIf="item.version">{{item.version}}</td> + <td>{{item.onboardingState}}</td> + <td>{{item.operationalState}}</td> + <td>{{item.usageState}}</td> + <td> + <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" + class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i,notificationModel)" + *ngIf="item.uuid"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)" + *ngIf="item.id"></i> + <!--<span *ngIf="item.id && item.sameid == undefined">--> + <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">--> + <!--<!– <button nz-button> –>--> + <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>--> + <!--<!– <span >upload</span> –>--> + <!--<!– </button> –>--> + + <!--</nz-upload>--> + <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"--> + <!--style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"--> + <!--*ngIf="item.id==vnfPkgId">--> + <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}--> + <!--</button>--> + <!--</span>--> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + + </div> + <!-- PNFList --> + <div class="list" *ngIf="tab === 'PNF'"> + <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div style="width:100%;height: 30%;margin-bottom: 1%"> + <div class="listupload"> + <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF"> + <p class="ant-upload-drag-icon"> + <i nz-icon type="inbox" class="anticon anticon-inbox"></i> + </p> + <p class="ant-upload-text">Click or drag CSAR File here</p> + <p class="ant-upload-hint"></p> + </nz-upload> + <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" + style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"> + {{ pnfuploading ? 'Uploading' : 'Start Upload' }} + </button> + </div> + <div class="listlin"></div> + <div class="listfile"> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of pnfRightList"> + <div> + <i class="anticon anticon-link"></i> + </div> + <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div> + <div class="color" *ngIf="itemns.status"> + <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress> + </div> + <div class="color" *ngIf="!itemns.status"> + <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> + <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> + </div> + <div *ngIf="!itemns.status"> + <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i> + <i class="anticon anticon-exclamation-circle" *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i> + </div> + </div> + </div> + </div> + </div> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> + <div class="mask" *ngIf="isSpinning"></div> + <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" + [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" + [(nzPageIndex)]='pnfpageIndex' [nzLoading]="loading" nzSize="middle"> + <thead (nzSortChange)="sort($event)" nzSingleSort> + <tr> + <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th> + <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th> + </tr> + </thead> + <tbody> + <tr *ngFor="let item of nzTable.data; let i = index; "> + <td>{{i+1}}</td> + <td>{{item.pnfdName}}</td> + <td>{{item.pnfdVersion}}</td> + <td>{{item.pnfdOnboardingState}}</td> + <td>{{item.pnfdUsageState}}</td> + <td> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"></i> + <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">--> + <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">--> + <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>--> + <!--</nz-upload>--> + <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"--> + <!--style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"--> + <!--*ngIf="item.id==vnfPkgId">--> + <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}--> + <!--</button>--> + <!--</span>--> + </td> + </tr> + </tbody> + </nz-table> + </nz-spin> + + </div> + </nz-tab> + <!--2019.08.14 add notification--> + <ng-template #notificationModel > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}"> + </span> + <div class="ant-notification-notice-message"> + {{notificationAttributes.title}} + {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"i18nTextDefine_"+notificationAttributes.status | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p>{{notificationAttributes.title}} id: </p> + <span>{{ notificationAttributes.id }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> +</nz-tabset> + diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less new file mode 100644 index 00000000..c31409c9 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -0,0 +1,182 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.switch_btn { + position: absolute; + right: 6%; + top: 18px; + border: 1px solid #3fa8eb; + width: 8%; + border-radius: 10px; + margin-bottom: 18px; + span { + display: block; + float: left; + text-align: center; + width: 50%; + color: #3fa8eb; + font-weight: 700; + cursor: pointer; + } + span:first-child { + border-radius: 10px 0 0 10px; + } + span:last-child { + border-radius: 0 10px 10px 0; + } + span.left_b { + border-left: 1px solid #3fa8eb; + } + span.active { + color: #fff; + background: #3fa8eb; + } +} + +.list { + // background-color: #fff; + border-radius: 5px; + // padding: 10px; + .listupload { + width: 22%; + vertical-align: top; + display: inline-block; + margin-left: 13%; + } + .listlin { + vertical-align: top; + display: inline-block; + width: 1%; + margin-left: 10%; + height: 177px; + margin-bottom: 30px; + border-right: 2px solid #EEEEEE; + } + .listfile { + width: 43%; + height: 100%; + vertical-align: top; + display: inline-block; + margin-left: 10%; + .nouploadfile{ + height: 80%; + width: 100%; + text-align: center; + font-size: 22px; + margin-top: 5%; + } + .listfilebgc { + background-color: #fff; + border-bottom: 8px solid #F7F8FC; + } + .listfilebgc { + background-color: #fff; + height: 30px; + border-radius: 2px; + line-height: 2; + color: #42548F; + border-bottom: 4px solid #F7F8FC; + >div { + float: left; + } + :first-child { + width: 6%; + margin-left: 5px; + } + :nth-child(2){ + width:20%; + } + :nth-child(3){ + width: 60%; + text-align: center; + } + :nth-child(4){ + padding-left: 4%; + } + .color { + color:rgba(66,84,143,1); + span{ + color:rgba(66,84,143,0.7); + } + } + .progress{ + color:rgba(66,84,143,0.7); + } + } + } + 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; + } + } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } + .fileIcon{ + display: none; + } + } + } + } +} +.mask { + top: 0; + left: 0; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.1; + background: black; + z-index: 1049; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts new file mode 100644 index 00000000..0e49f656 --- /dev/null +++ b/usecaseui-portal/src/app/views/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/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts new file mode 100644 index 00000000..4899aed8 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -0,0 +1,668 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; +import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core'; +import { NzNotificationService } from 'ng-zorro-antd'; +// import { MyhttpService } from '../../myhttp.service'; +import { onboardService } from '../../../core/services/onboard.service'; +import { slideToRight } from '../../../animates'; +import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd'; +import { filter } from 'rxjs/operators'; +import { Title } from '@angular/platform-browser'; + +@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; + + // delete Modal + confirmModal: NzModalRef; + nsdInfoId = ''; + vnfPkgId = ''; + pnfdInfoId = ''; + tabTitle = "NS"; + nsuploading = false; + vnfuploading = false; + pnfloading = false; + fileList: UploadFile[] = []; + fileListNS: UploadFile[] = []; + fileListVNF: UploadFile[] = []; + fileListPNF: UploadFile[] = []; + // onboard initial value + status = "Onboard Available"; + jobId = ''; + //url + url = { + // line up + ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content', + vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content', + pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content' + // line local + //ns: 'https://jsonplaceholder.typicode.com/posts/', + //vnf: 'https://jsonplaceholder.typicode.com/posts/', + //pnf: 'https://jsonplaceholder.typicode.com/posts/', + }; + constructor( + private myhttp: onboardService, + private http: HttpClient, + private msg: NzMessageService, + private titleService: Title, + private modal: NzModalService, + private modalService: NzModalService, + private notification: NzNotificationService + ) { } + //default Call ns data by default + ngOnInit() { + this.getTableData(); + } + + //Tabular data + nstableData: any; + vnftableData: any; + pnftableData: any; + nssdcData: any; + nsvfcData: any; + + vnfsdcData: any; + vnfvfcData: any; + nspageIndex = 1; + nspageSize = 10; + vnfpageIndex = 1; + vnfpageSize = 10; + pnfpageIndex = 1; + pnfpageSize = 10; + total; + nsloading = false; + sortName = null; + sortValue = null; + tabs = ['NS', 'VNF', 'PNF']; + isSpinning = false; + + //2019.08.14 add + notificationAttributes = { + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": null + }; + notificationModelShow(template: TemplateRef<{}>): void { + this.notification.template(template); + } + notificationSuccess(notificationModel) { + this.notificationAttributes.imgPath = "../../../../assets/images/execute-success.png"; + this.notificationAttributes.status = "Success"; + this.notificationModelShow(notificationModel); + } + notificationFailed(notificationModel) { + this.notificationAttributes.imgPath = "../../../../assets/images/execute-faild.png"; + this.notificationAttributes.status = "Failed"; + this.notificationModelShow(notificationModel); + } + // Handling tab switching request data + handleTabChange(tab) { + this.tabTitle = tab; + switch (tab) { + case 'NS': + this.nstableData = []; + this.getTableData(); + this.fileList = []; //Empty uploaded files when switching + break + case 'VNF': + this.vnftableData = []; + this.getTableVnfData() + this.fileList = []; + break + case 'PNF': + this.pnftableData = []; + this.getTablePnfData() + this.fileList = []; + break + } + } + + + //before put create--Drag and drop files to the page before uploading + requestBody = { + "userDefinedData": { + "additionalProp1": "", + "additionalProp2": "", + "additionalProp3": "" + } + } + + //NS/VNF List add file + beforeUpload = (file: UploadFile): boolean => { + this.fileList.push(file); + return false; + } + + // ns beforeUpload + beforeUploadNS = (file: UploadFile): boolean => { + this.fileListNS.push(file); + this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line + // this.myhttp.getCreatensData("creatensDataNS") //local + .subscribe((data) => { + this.nsdInfoId = data["id"]; + }, (err) => { + console.log(err); + }) + return false; + } + + //vnf beforeUpload + beforeUploadVNF = (file: UploadFile): boolean => { + this.fileListVNF.push(file); + this.myhttp.getCreatensData("createVnfData", this.requestBody)//on-line + // this.myhttp.getCreatensData("creatensDataVNF") //local + .subscribe((data) => { + this.vnfPkgId = data["id"]; + }, (err) => { + console.log(err); + }) + return false; + } + + // //pnf eforeUpload + beforeUploadPNF = (file: UploadFile): boolean => { + this.fileListPNF.push(file); + this.myhttp.getCreatensData("createPnfData", this.requestBody) //on-line + // this.myhttp.getCreatensData("creatensDataPNF") //local + .subscribe((data) => { + this.pnfdInfoId = data["id"]; + }, (err) => { + console.log(err); + }) + return false; + } + + //Get list list id + onClickId(id, tab) { + switch (tab) { + case 'NS': + this.nsdInfoId = id; + break + case 'VNF': + this.vnfPkgId = id; + break + case 'PNF': + this.pnfdInfoId = id; + break + } + } + + //Drag and drop and click the upload button + onClick(tab) { + switch (tab) { + case 'NS': + // this.handleUpload('/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',tab); + this.handleUpload(this.url.ns.replace("*_*", this.nsdInfoId), tab); + this.getTableData(); + break + case 'VNF': + // this.handleUpload('/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',tab); + this.handleUpload(this.url.vnf.replace("*_*", this.vnfPkgId), tab); + this.getTableVnfData() + break + case 'PNF': + // this.handleUpload('/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content',tab); + this.handleUpload(this.url.pnf.replace("*_*", this.pnfdInfoId), tab); + this.getTablePnfData(); + break + } + } + + nsRightList = []; + nsNum = 0; + vnfRightList = []; + vnfNum = 0; + pnfRightList = []; + pnfNum = 0; + //put Upload Upload + handleUpload(url, tab): void { + const formData = new FormData(); + // tslint:disable-next-line:no-any + switch (tab) { + case "NS": + this.fileListNS.forEach((file: any) => { + formData.append('file', file); + }); + this.nsuploading = true; + let lastNs = this.fileListNS[this.fileListNS.length - 1]; + let nsfile = { + name: lastNs.name, + uid: lastNs.uid, + progress: 0, + status: true, + success: 0 + }; + this.nsNum += 1; + this.nsRightList.push(nsfile); + let requeryNs = (nsfile) => { + setTimeout(() => { + nsfile.progress += 2; + if (nsfile.progress < 100) { + requeryNs(nsfile) + } else { + nsfile.progress = 100; + nsfile.status = false; + } + }, 100) + }; + requeryNs(nsfile); + break + case "VNF": + this.fileListVNF.forEach((file: any) => { + formData.append('file', file); + }); + this.vnfuploading = true; + let lastVnf = this.fileListVNF[this.fileListVNF.length - 1]; + let vnffile = { + name: lastVnf.name, + uid: lastVnf.uid, + progress: 0, + status: true, + success: 0 + }; + this.vnfNum += 1; + this.vnfRightList.push(vnffile); + let requeryVnf = (vnffile) => { + setTimeout(() => { + vnffile.progress += 2; + if (vnffile.progress < 100) { + requeryVnf(vnffile) + } else { + vnffile.progress = 100; + vnffile.status = false; + } + }, 100) + }; + requeryVnf(vnffile); + break + case "PNF": + this.fileListPNF.forEach((file: any) => { + formData.append('file', file); + }); + this.pnfloading = true; + let lastPnf = this.fileListPNF[this.fileListPNF.length - 1]; + let pnffile = { + name: lastPnf.name, + uid: lastPnf.uid, + progress: 0, + status: true, + success: 0 + }; + this.pnfNum += 1; + this.pnfRightList.push(pnffile); + let requeryPnf = (pnffile) => { + setTimeout(() => { + pnffile.progress += 2; + if (pnffile.progress < 100) { + requeryPnf(pnffile) + } else { + pnffile.progress = 100; + pnffile.status = false; + } + }, 100) + }; + requeryPnf(pnffile); + break + } + // line PUT + const req = new HttpRequest('PUT', url, formData, { + reportProgress: true, + withCredentials: true + }); + //Upload pre-empty array + this.fileList = []; + this.fileListNS = []; + this.fileListVNF = []; + this.fileListPNF = []; + this.http.request(req) + .pipe(filter(e => e instanceof HttpResponse)) + .subscribe( + (event: {}) => { + if (tab == "NS") { + this.nsRightList[this.nsNum - 1].progress = 100; + this.nsRightList[this.nsNum - 1].status = false; + this.nsRightList[this.nsNum - 1].success = 0; + } + if (tab == "VNF") { + this.vnfRightList[this.vnfNum - 1].progress = 100; + this.vnfRightList[this.vnfNum - 1].status = false; + this.vnfRightList[this.vnfNum - 1].success = 0; + } + if (tab == "PNF") { + this.pnfRightList[this.pnfNum - 1].progress = 100; + this.pnfRightList[this.pnfNum - 1].status = false; + this.pnfRightList[this.pnfNum - 1].success = 0; + } + this.changeUploadingSta(tab); + this.msg.success('upload successfully.'); + }, + err => { + if (tab == "NS") { + this.nsRightList[this.nsNum - 1].progress = 100; + this.nsRightList[this.nsNum - 1].status = false; + this.nsRightList[this.nsNum - 1].success = 1; + } + if (tab == "VNF") { + this.vnfRightList[this.vnfNum - 1].progress = 100; + this.vnfRightList[this.vnfNum - 1].status = false; + this.vnfRightList[this.vnfNum - 1].success = 1; + } + if (tab == "PNF") { + this.pnfRightList[this.pnfNum - 1].progress = 100; + this.pnfRightList[this.pnfNum - 1].status = false; + this.pnfRightList[this.pnfNum - 1].success = 1; + } + this.changeUploadingSta(tab); + this.msg.error('upload failed.'); + } + ); + } + + // Control the status of uploading + changeUploadingSta(tab) { + switch (tab) { + case "NS": + this.nsuploading = false; + break + case "VNF": + this.vnfuploading = false; + break + case "PNF": + this.pnfloading = false; + } + } + + //---------------------------------------------------------------------------------------------- + + // Get the NS list + getTableData() { + this.isSpinning = true; + //ns vfc lists + this.myhttp.getOnboardTableData() + .subscribe((data) => { + this.nsvfcData = data; + this.nstableData = this.nsvfcData; + //ns sdc list + this.myhttp.getSDC_NSTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + this.nssdcData = data; + this.nsvfcData.map((nsvfc) => { nsvfc.sameid = this.nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; }); + let sameData = this.nssdcData.filter((nssdc) => { return !this.nsvfcData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); + this.nstableData = this.nstableData.concat(sameData); + }, (err) => { + console.log(err); + this.isSpinning = false; + }) + }, (err) => { + console.log(err); + this.isSpinning = false; + }) + + } + + // Get the vnf list + getTableVnfData() { + this.isSpinning = true; + //vnf vfc lists + this.myhttp.getOnboardTableVnfData() + .subscribe((data) => { + this.vnfvfcData = data; + this.vnftableData = this.vnfvfcData; + //vnf sdc lists + this.myhttp.getSDC_VNFTableData() + .subscribe((data) => { + this.isSpinning = false; //loading hide + this.vnfsdcData = data; + this.vnfvfcData.map((vnfvfc) => { vnfvfc.sameid = this.vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; }); + let sameData = this.vnfsdcData.filter((vnfsdc) => { return !this.vnfvfcData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) }); + this.vnftableData = this.vnftableData.concat(sameData); + }, (err) => { + console.log(err); + }) + + }, (err) => { + console.log(err); + }) + } + + // Get pnf list + getTablePnfData() { + this.isSpinning = true; + this.myhttp.getOnboardTablePnfData() + .subscribe((data) => { + this.pnftableData = data; + this.isSpinning = false; //loading hide + }, (err) => { + console.log(err); + }) + } + + //----------------------------------------------------------------------------------- + /* onboard */ + //Successful frame + success(tab): void { + const modal = this.modalService.success({ + nzTitle: 'This is an success message', + nzContent: 'Package Onboard Completed.' + }); + switch (tab) { + case "NS": + this.getTableData(); + break + case "VNF": + this.getTableVnfData(); + break + } + } + + //Failure frame + error(): void { + this.modalService.error({ + nzTitle: 'This is an error message', + nzContent: 'Package Onboard Failed!' + }); + } + + //onboard status + onboardData = { + status: "onboard", + progress: 0, + } + currentIndex = 0; + // ns onboard Upload button + updataNsService(id, index, notificationModel) { + this.currentIndex = index; + this.onboardData.status = "onboarding"; //Disabled + this.onboardData.progress = 0; + let requestBody = { + "csarId": id + }; + this.notificationAttributes = { + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": id + }; + this.notificationModelShow(notificationModel); + this.myhttp.getNsonboard(requestBody) + .subscribe((data) => { + if (data.status == "failed") { + this.onboardData.status = "Failed"; + this.notificationFailed(notificationModel); + this.error(); + return false + } else if (data.status == "success") { + this.success("NS"); + this.onboardData.status = "onboarded"; + this.notificationSuccess(notificationModel); + } + }, (err) => { + console.log(err); + }) + } + + // vnf onboard Upload button + updataVnfService(id, index, notificationModel) { + this.currentIndex = index; + this.onboardData.status = "onboarding"; //Disabled button + this.onboardData.progress = 0; + + + let requestBody = { + "csarId": id + }; + this.notificationAttributes = { + "title": this.tabs[1], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": id + }; + this.notificationModelShow(notificationModel); + this.myhttp.getVnfonboard(requestBody) + .subscribe((data) => { + this.jobId = data.jobId; + this.queryProgress(this.jobId, 0, notificationModel); //vnf Need to query progress interface + }, (err) => { + console.log(err); + }) + } + + //Progress Progress inquiry + queryProgress(jobId, responseId, notificationModel) { + let mypromise = new Promise((res) => { + this.myhttp.getProgress(jobId, responseId) + .subscribe((data) => { + if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) { + this.onboardData.status = "onboarding"; + setTimeout(() => { + this.queryProgress(this.jobId, 0, notificationModel); + }, 10000) + return false + } + if (data.responseDescriptor.progress > 100) { + this.onboardData.status = "Failed"; + this.notificationFailed(notificationModel); + this.error(); + return false + } + if (data.responseDescriptor.progress < 100) { + this.onboardData.status = "onboarding"; + setTimeout(() => { + this.queryProgress(this.jobId, 0, notificationModel); + }, 5000) + } else if (data.responseDescriptor.progress == 100) { + res(data); + this.success("VNF"); + this.onboardData.status = "onboarded"; + this.notificationSuccess(notificationModel); + } + return false + }) + }) + return mypromise; + } + + //-------------------------------------------------------------------------------- + /* delete button */ + showConfirm(index, pkgid, tab, notificationModel): void { + this.notificationAttributes = { + "title": this.tabs[0], + "imgPath": "../../../../assets/images/execute-inproess.png", + "action": "OnboardingState", + "status": "InProgress", + "id": pkgid + }; + this.confirmModal = this.modal.confirm({ + nzTitle: 'Do you Want to delete these items?', + nzContent: 'Do you Want to delete these items?', + nzOkText: 'Yes', + nzCancelText: 'No', + nzOnOk: () => new Promise((resolve, reject) => { + switch (tab) { + case 'NS': + this.notificationAttributes.title = this.tabs[0]; + this.notificationModelShow(notificationModel); + this.deleteNsService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break + case 'VNF': + this.notificationAttributes.title = this.tabs[1]; + this.notificationModelShow(notificationModel); + this.deleteVnfService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break + case 'PNF': + this.notificationAttributes.title = this.tabs[2]; + this.notificationModelShow(notificationModel); + this.deletePnfService(index, pkgid, notificationModel); + setTimeout(Math.random() > 0.5 ? resolve : reject, 2000); + break + } + }).catch(() => console.log('Oops errors!')) + }); + } + + //delete nsItem + deleteNsService(index, pkgid, notificationModel) { + this.myhttp.deleteNsIdData(pkgid) + .subscribe((data) => { + this.notificationSuccess(notificationModel); + //refresh list after successful deletion + this.getTableData(); + }, (err) => { + console.log(err); + this.notificationFailed(notificationModel); + }) + } + + //delete vnfItem + deleteVnfService(index, pkgid, notificationModel) { + this.myhttp.deleteVnfIdData(pkgid) + .subscribe((data) => { + this.notificationSuccess(notificationModel); + //refresh list after successful deletion + this.getTableVnfData() + }, (err) => { + console.log(err); + this.notificationFailed(notificationModel); + }) + } + + //delete PnfItem + deletePnfService(index, pkgid, notificationModel) { + this.myhttp.deletePnfIdData(pkgid) + .subscribe((data) => { + //refresh list after successful deletion + this.notificationSuccess(notificationModel); + this.getTablePnfData() + }, (err) => { + console.log(err); + this.notificationFailed(notificationModel); + }) + } + +} diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.css b/usecaseui-portal/src/app/views/services/services-list/services-list.component.css new file mode 100644 index 00000000..0a7f92eb --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.css @@ -0,0 +1,145 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 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 span.scaling { + font-size: 12px; + color: purple; +} +.list nz-table tbody td span.healing { + font-size: 12px; + color: orangered; +} +.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 td .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.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/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html new file mode 100644 index 00000000..6f6d8f74 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html @@ -0,0 +1,745 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="action ant-tabs-bar"> + + <span><i style="margin-right: 10px"><img src="assets/images/customer.png" alt=""></i> + {{"i18nTextDefine_Customer" | translate}} : </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="min-height:40px;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 style="margin-left:40px"><i style="margin-right: 10px"><img src="assets/images/service-type.png" alt=""></i> + {{"i18nTextDefine_ServiceType" | translate}} : </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="min-height:40px;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)="createModal()"><i class="anticon anticon-plus" + style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> + {{"i18nTextDefine_Create" | translate}} </span> + </button> + <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} " + (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzClassName="serviceCreationModel" + nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <div class="select-list"> + <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear + (ngModelChange)="customerChange()"> + <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + <div class="select-list"> + <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear + (ngModelChange)="serviceTypeChange()"> + <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name"> + </nz-option> + </nz-select> + </div> + <div class="select-list"> + <span style="display:inline-block;"> {{"i18nTextDefine_UseCase" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(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-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option> + <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option> + </nz-select> + </div> + + <div class="select-list"> + <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear> + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + <div *ngIf="templateTypeSelected == 'E2E Service'"> + <div class="select-list"> + <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span> + <nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear> + <nz-option *ngFor="let item of orchestratorList" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + </div> + <div *ngIf="templateTypeSelected == 'E2E Service'"> + <div class="check-box" style="margin:30px; height: 50px"> + <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox" + [(ngModel)]="isSol005Interface" value="true" nzAllowClear> + <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label> + </div> + </div> + <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips"> + {{"i18nTextDefine_Templateparsingfailed" | translate}} + </div> + </nz-modal> +</div> +<nz-layout style=" padding: 20px 32px; "> + <ul class="top-num"> + <li *ngFor="let item of serviceMunber" class="top-list"> + <span class="round">{{item.serviceDomain}}</span> + <div class="top-list-text"> + <p> + <span>{{item.failed}}</span> + <span> {{"i18nTextDefine_Failed" | translate}} </span> + </p> + <p> + <span>{{item.Success}}</span> + <span> {{"i18nTextDefine_Success" | translate}} </span> + </p> + <p> + <span>{{item.InProgress}}</span> + <span> {{"i18nTextDefine_InProgress" | translate}} </span> + </p> + </div> + <p class="service-description"> {{item.detailName | translate}} </p> + </li> + </ul> + <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}"> + <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> + <tr> + <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}}</th> + <th nzWidth="5%"></th> + <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}}</th> + <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}}</th> + <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}}</th> + <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}}</th> + <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}}</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> + <tr> + <td>{{pageSize*(pageIndex-1) + i+1}}</td> + <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td> + <td>{{data["service-instance-name"] || data.nsName}}</td> + <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> + <td> + <p + [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN','voLTEColor':data.serviceDomain=='voLTE type'}"> + {{data.serviceDomain}} + </p> + </td> + <td> + <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding', + 'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001', + 'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}" + *ngIf="data.tips != 'Available' && data.tips != 'Unavailable'">{{data.tips}}</span> + <span *ngIf="data.tips == 'Available' " style="margin-left: 10px"> + <img src="assets/images/wancheng-icon.png" alt="Available"> + </span> + <span *ngIf="data.tips == 'Unavailable' " style="margin-left: 10px"> + <img src="assets/images/shibai-icon.png" alt="Unavailable"> + </span> + <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate" + [nzShowInfo]="false" nzStatus="active"></nz-progress> + </td> + <td> + <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" + class="anticon anticon-bars" (click)="serviceDetail(data,1)"></i> + <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete" + (click)="deleteModel(data)"></i> + <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-ellipsis" + (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i> + + <ul *ngIf="data.iconMore==true " class="icon-more"> + <li (click)="scaleService(data)" + [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"> + <i class="anticon anticon-scale"></i> + <span> {{"i18nTextDefine_Scale" | translate}} </span> + </li> + <li (click)="serviceDetail(data,2)" + [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"> + <i class="anticon anticon-update"></i> + <span> {{"i18nTextDefine_Update" | translate}} </span> + </li> + </ul> + <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> --> + <!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}" + *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> --> + </td> + </tr> + <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances"> + <td></td> + <td></td> + <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td> + <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td> + <td> + <p + [ngClass]="{'vnfColor':item.serviceDomain=='vnf','siteColor':item.serviceDomain=='SITE','SDWANColor':item.serviceDomain=='SDWAN'}"> + {{item.serviceDomain}} + </p> + </td> + <td> + <span [ngClass]="{'healing':data.statusClass=='1004'}">{{item.tips}}</span> + <nz-progress *ngIf=" item.status == 'In Progress' " [nzPercent]="item.rate"></nz-progress> + </td> + <td> + <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" + class="anticon anticon-reload" (click)="healService(item)"></i> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + + <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} " + (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)" + nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " + nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_SureScale" | translate}} </h3> + <div class="question"> + <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4> + <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] || + thisService["nsInstanceId"] || + thisService["vnfInstanceId"]}} + </div> + </div> + <div *ngFor="let item of e2e_nsData" style="margin-top: 20px"> + <h3>{{ item.netWorkServiceName }}</h3> + <div class="e2eScaleContent"> + <span class="e2eScaleLable"> {{"i18nTextDefine_ScaleType" | translate}} :</span> + <nz-select style="width: 165px;" [(ngModel)]="item.scaleType"> + <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option> + <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option> + </nz-select> + </div> + <div class="e2eScaleContent"> + <span class="e2eScaleLable"> {{"i18nTextDefine_AspectId" | translate}} :</span> + <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string"> + </div> + <div class="e2eScaleContent"> + <span class="e2eScaleLable"> {{"i18nTextDefine_Number_Of_Steps" | translate}} :</span> + <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" + nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number> + </div> + <div class="e2eScaleContent"> + <span class="e2eScaleLable"> {{"i18nTextDefine_ScalingDirection" | translate}} :</span> + <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection"> + <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option> + <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option> + </nz-select> + </div> + </div> + + <ng-template #templatescalestarting> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message">E2E + {{"i18nTextDefine_InstanceTeminationStarting" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + </nz-modal> + + <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " + (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)" + nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}" + nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " + nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_SureDelete" | translate}} </h3> + <div class="question"> + <h4> {{"i18nTextDefine_InstanceName" | translate}} :</h4> + <div class="deleteModelContent">{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </div> + </div> + <div class="question"> + <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4> + <div class="deleteModelContent">{{ thisService["service-instance-id"] || + thisService["nsInstanceId"] }} + </div> + </div> + <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> + <div class="question"> + <h4> {{"i18nTextDefine_terminationType" | translate}} :</h4> + <nz-select style="width: 306px;" [(ngModel)]="terminationType"> + <nz-option nzValue="graceful" nzLabel=" {{'i18nTextDefine_graceful' | translate}} "></nz-option> + <nz-option nzValue="forceful" nzLabel=" {{'i18nTextDefine_forceful' | translate}} "></nz-option> + </nz-select> + </div> + <div class="question"> + <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}} + :</h4> + <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input + [(ngModel)]="gracefulTerminationTimeout"> + </div> + </div> + + <ng-template #templatedeletestarting> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message" + *ngIf="thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'"> + {{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceTeminationStarting" | + translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="thisService['serviceDomain'] == 'E2E Service'">E2E + {{"i18nTextDefine_InstanceTeminationStarting" | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="thisService['serviceDomain'] == 'Network Service'">NS + {{"i18nTextDefine_InstanceTeminationStarting" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + </nz-modal> + + <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} " + (nzOnCancel)="healCancel()" (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)" + nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " + nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> + <h3><span style="color: red">* </span> {{"i18nTextDefine_SureHeal" | translate}} </h3> + <div class="heal-question"> + <p class="heal-label"> {{"i18nTextDefine_InstanceID" | translate}} : </p> + <div class="healModelContent" title="{{ thisService['service-instance-id'] || thisService['nsInstanceId'] || + thisService['vnfInstanceId']}}"> {{ thisService["service-instance-id"] || + thisService["nsInstanceId"] || + thisService["vnfInstanceId"]}} + </div> + </div> + <!-- NS --> + <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> + <div class="question"> + <p class="heal-label"> {{"i18nTextDefine_degreeHealing" | translate}} :</p> + <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px" + [(ngModel)]="nsParams.degreeHealing"> + <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option> + <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option> + <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option> + <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option> + </nz-select> + </div> + <div> + <span style="display:inline-block;"> {{"i18nTextDefine_actionsHealing" | translate}} :</span> + <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i + class="anticon anticon-plus-circle-o"></i></button> + <br> + <div *ngFor="let item of healActions;let i = index;" style="display:inline-block;"> + <input style="width: 165px;" nz-input [(ngModel)]="item.value"> + <button nz-button [nzType]="'dashed'" (click)="minusActionsHealing(i)"><i + class="anticon anticon-minus-circle-o"></i></button> + + </div> + </div> + <span style="display:inline-block;width:50%;"> {{"i18nTextDefine_healScript" | translate}} :</span> + <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript"> + <div> + <span style="display:inline-block;"> {{"i18nTextDefine_additionalParamsforNs" | translate}} :</span> + <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i + class="anticon anticon-plus-circle-o"></i></button> + <br> + <div *ngFor="let item of nsAdditional;let i = index;"> + Key: <input style="width: 165px;" nz-input [(ngModel)]="item.key"> + Value: <input style="width: 165px;" nz-input [(ngModel)]="item.value"> + <button nz-button [nzType]="'dashed'" (click)="minusNsAdditional(i)"><i + class="anticon anticon-minus-circle-o"></i></button> + </div> + </div> + </div> + <!-- vnf --> + <div *ngIf="thisService['serviceDomain'] == 'vnf'" style="clear: both"> + <div class="heal-question"> + <p class="heal-label"> {{"i18nTextDefine_cause" | translate}} :</p> + <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input"> + </div> + <div class="heal-question"> + <p class="heal-label"> {{"i18nTextDefine_action" | translate}} :</p> + <input nz-input [(ngModel)]="vnfParams.additionalParams.action" class="heal-input"> + </div> + <div class="heal-question"> + <p class="heal-label"> {{"i18nTextDefine_actionvminfo" | translate}}:</p> + <nz-select + style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px" + [(ngModel)]="vmSelected"> + <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option> + </nz-select> + </div> + </div> + + <ng-template #templatehealstarting> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message">NS + {{"i18nTextDefine_InstanceHealingStarting" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + </nz-modal> + + <!-- add notification--> + <ng-template #templateCreatestarting> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-inproess.png" alt="instance temination is starting"> + </span> + <div class="ant-notification-notice-message" + *ngIf="thisCreateService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'"> + {{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceCreationStarting" | + translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="thisCreateService['serviceDomain'] == 'E2E Service'">E2E + {{"i18nTextDefine_InstanceCreationStarting" | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="thisCreateService['serviceDomain'] == 'Network Service'">NS + {{"i18nTextDefine_InstanceCreationStarting" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisCreateService["service-instance-name"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected2.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisCreateService['serviceDomain'] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + <ng-template #templateCreateSuccessFaild> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" + *ngIf="thisCreateService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" + *ngIf="thisCreateService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" + *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Successful'"> + {{ thisCreateService['serviceDomain'] }} {{"i18nTextDefine_InstanceCreatedSuccessfully" | + translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Successful'"> + E2E {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Successful'"> + NS {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Failed'"> + {{ thisCreateService['serviceDomain'] }} {{"i18nTextDefine_InstanceCreationFailed" | + translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Failed'"> + E2E {{"i18nTextDefine_InstanceCreationFailed" | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Failed'"> + NS {{"i18nTextDefine_InstanceCreationFailed" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisCreateService["service-instance-name"] || + thisCreateService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected2.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisCreateService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + <ng-template #templateDeleteSuccessFaild> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" + *ngIf="thisService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" + *ngIf="thisService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" + *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Successful'"> + {{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceTeminatedSuccessfully" | + translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'"> + E2E {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'"> + NS {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Failed'"> + {{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceTeminationFailed" | + translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E + {{"i18nTextDefine_InstanceTeminationFailed" | translate}} + </div> + <div class="ant-notification-notice-message" + *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'"> + NS {{"i18nTextDefine_InstanceTeminationFailed" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + <ng-template #templateScaleSuccessFaild> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" + *ngIf="thisService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" + *ngIf="thisService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">E2E + {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">E2E + {{"i18nTextDefine_InstanceScaleFailed" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + <ng-template #templatehealSuccessFaild> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" + *ngIf="thisService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" + *ngIf="thisService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">NS + {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">NS + {{"i18nTextDefine_InstanceHealingFailed" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + <ng-template #templateUpdateSuccessFaild> + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="assets/images/execute-success.png" alt="instance temination is starting" + *ngIf="thisService.status == 'Successful'"> + <img src="assets/images/execute-faild.png" alt="instance temination is starting" + *ngIf="thisService.status == 'Failed'"> + </span> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">CCVPN + {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">CCVPN + {{"i18nTextDefine_InstanceUpdateFailed" | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p> {{"i18nTextDefine_InstanceName" | translate}} :</p> + <span>{{ thisService["service-instance-name"] || + thisService["nsInstanceName"] }} + </span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_Customer" | translate}} :</p> + <span>{{ customerSelected.name }}</span> + </div> + <div class="notificationlist"> + <p> {{"i18nTextDefine_UseCase" | translate}} :</p> + <span>{{ thisService["serviceDomain"] }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> + </div> + <div class="detailComponent" *ngIf="detailshow"> + <app-ccvpn-detail [detailParams]="detailData" [upDateShow]="upDateShow" + (closeUpdate)="closeCCVPNUpdate($event,templateUpdateSuccessFaild)" + (closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail> + </div> + <div class="detailComponent" *ngIf="detailshow2"> + <app-e2e-detail [detailParams]="detailData" (closeDetail)="detailshow2 = false;listDisplay = false;"> + </app-e2e-detail> + </div> + <div class="createComponent" *ngIf="createshow"> + <app-ccvpn-creation [createParams]="createData" [ccvpn_temParametersContent]="ccvpn_temParametersContent" + (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)"> + </app-ccvpn-creation> + </div> + <div class="createComponent" *ngIf="createshow2"> + <app-e2e-creation [createParams]="createData" [e2e_ns_temParametersContent]="e2e_ns_temParametersContent" + (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)" + (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"> + </app-e2e-creation> + </div> + <!--</div>--> +</nz-layout> +<div class="loading" *ngIf="loadingAnimateShow"> + <img src="assets/images/loading-animate2.gif" alt="loading"> + <p>Please wating……</p> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less new file mode 100644 index 00000000..392d1b3a --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less @@ -0,0 +1,380 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.ant-tabs-bar{ + margin-bottom: 0!important; +} +.mask{ + width: 100%; + height: 100%; + position: absolute; + z-index: 999; + background: rgba(0, 0, 0, 0.65); + top:0; +} +.loading{ + width: 100%; + height: 100%; + position: fixed; + top: 0; + margin-top: -50px; + margin-left: -50px; + z-index: 1001; + text-align: center; + background: transparent; + p{ + color: #0DA9E2; + text-align: center; + position: absolute; + width: 300px; + height: 30px; + line-height: 30px; + top: 71%; + left: 36%; + margin-top: -150px; + margin-left: -150px; + } + img{ + width: 300px; + height: 300px; + position: absolute; + top: 50%; + left: 36%; + margin-top: -150px; + margin-left: -150px; + } +} +.action { + margin-bottom: 15px; + padding: 28px; + background: #ffffff; + position: relative; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #3C4F8C; + margin-right: 5px; + } + nz-dropdown { + vertical-align: middle; + background-color:#ffffff; + :hover{ + border-color: #48C6EF; + } + button { + width: 165px; + height: 42px; + background-color:#ffffff; + text-align: left; + border-color: #EEEEEE; + span { + font-weight: 400; + color: #3C4F8C; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + } + //The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body. + .create { + position: absolute; + right: 3%; + top:50%; + width:116px; + height:42px; + background:#0DA9E2; + border-radius:6px; + margin-top: -15px; + span { + color: #fff; + font-weight: 400; + font-size: 18px; + } + .anticon-plus-circle-o{ + font-size: 18px; + } + } + .create.ant-btn.ant-btn-primary{ + border: none; + } + .create:hover{ + background:#09C6E2; + } + +} +.top-num{ + overflow: auto; + width: 100%; +} +.top-list{ + position: relative; + width:29%; + height:170px; + margin: 10px 1%; + float: left; + background:url("../../../../assets/images/servicelist-e2e.png") no-repeat; + background-size: 100% 100%; + border-radius:2px; +} +.top-num .top-list:nth-child(2){ + background:url("../../../../assets/images/servicelist-e2e.png") no-repeat; + background-size: 100% 100%; +} +.top-num .top-list:nth-child(3){ + background:url("../../../../assets/images/servicelist-e2e.png") no-repeat; + background-size: 100% 100%; +} +.top-num .top-list:nth-child(4){ + background:url("../../../../assets/images/servicelist-sotn.png") no-repeat; + background-size: 100% 100%; +} +.top-list .round{ + position: absolute; + width: 60px; + height: 60px; + line-height: 60px; + text-align: center; + top:45%; + left: 50px; + margin-top: -30px; + background:#E0EDFF; + border:2px solid rgba(224,237,255,1); + border-radius: 50%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; +} +.top-list { + .top-list-text { + position: absolute; + text-align: right; + height: 40px; + line-height: 20px; + right: 50px; + color: #fff; + p { + font-size: 14px; + width: 250px; + margin: 15px 0 0 0; + height: 13px; + clear: both; + span { + display: inline-block; + font-weight: 500; + text-align: right; + float: right; + } + span:nth-child(1) { + font-size: 18px; + width: 40px; + min-width: 40px; + } + span:nth-child(2) { + width: 85px; + font-size: 16px; + } + } + p:nth-child(1) { + margin-top: 25px; + } + } + .service-description{ + font-size: 14px; + width: 250px; + height: 13px; + position: absolute; + bottom: 30px; + left: 50px; + color: #3C4F8C; + } +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; + nz-table { + tbody { + td { + position: relative; + 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; + } + span.scaling { + font-size: 12px; + color: purple; + } + span.healing { + font-size: 12px; + color: orangered; + } + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + .cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; + } + .icon-more{ + position: absolute; + width: 115px; + height: 90px; + top:50px; + padding:15px 0 0 15px; + background: #ffffff; + z-index: 2; + border-radius: 5px; + box-shadow: 0px 10px 15px 2px rgba(247, 247, 247, 0.5); + li{ + margin-bottom:10px; + line-height: 20px; + text-align: left; + cursor: pointer; + .anticon{ + width: 18px; + height: 18px; + background: url("../../../../assets/images/scale.png") no-repeat; + } + .anticon.anticon-update{ + background: url("../../../../assets/images/update.png") no-repeat; + } + span{ + margin-left: 5px; + } + } + li:hover{ + color: #0DA9E2; + .anticon{ + background: url("../../../../assets/images/scale-active.png") no-repeat; + } + .anticon.anticon-update{ + background: url("../../../../assets/images/update-active.png") no-repeat; + } + } + } + } + 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; + z-index: 3; +} +.createComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #F7F8FC; + overflow-y: auto; + z-index: 3; +} + +.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{ + width:120px; + height: 34px; + line-height: 34px; + margin-bottom: 0!important; + text-align: center; + background:rgba(158, 158, 158, 0.38); + border-radius:4px +} + +.vnfColor,.siteColor,.SDWANColor{ + color:rgba(60,79,140,0.5); + width:120px; + height: 34px; + line-height: 34px; + margin-bottom: 0!important; + text-align: center; + background:rgba(238,238,238,1); + border-radius:4px; +} + +.select-list{ + width: 320px; + height: 32px; + line-height: 32px; + margin: 35px auto; +} +.select-list>span{ + text-align: right; + width: 110px!important; + line-height: 32px; +} + +.listdisplay{ + display: none; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts new file mode 100644 index 00000000..61440dc3 --- /dev/null +++ b/usecaseui-portal/src/app/views/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/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts new file mode 100644 index 00000000..c15e9f11 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts @@ -0,0 +1,1410 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core'; +import { MyhttpService } from '../../../core/services/myhttp.service'; +import { slideToRight } from '../../../animates'; +import { NzModalService } from 'ng-zorro-antd'; +import { NzNotificationService } 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, private notification: NzNotificationService) { + } + + ngOnInit() { + this.getallCustomers(); + } + + // customer servicetype + isSol005Interface = false; + orchestratorList = []; + customerList = []; + customerList2 = []; + customerSelected = { name: null, id: null }; + customerSelected2 = { name: null, id: null }; + serviceTypeList = []; + serviceTypeList2 = []; + serviceTypeSelected = { name: '' }; + serviceTypeSelected2 = { name: '' }; + serviceTypeSelectedName = ""; + templateTypeSelected = "CCVPN"; + orchestratorSelected = { name: null, id: null }; + listSortMasters = JSON.parse(sessionStorage.getItem('listSortMasters')); + language = sessionStorage.getItem("DefaultLang"); + iconMore = false; + loadingAnimateShow = false; + serviceMunber = [ // top: E2E/NS/CCVPN data + { + "serviceDomain": "E2E", + "Success": 0, + "failed": 0, + "InProgress": 0, + "detailName": "i18nTextDefine_End_To_End_Service" + }, + { + "serviceDomain": "NS", + "Success": 0, + "failed": 0, + "InProgress": 0, + "detailName": "i18nTextDefine_Network_Service" + }, + { + "serviceDomain": "CCVPN", + "Success": 0, + "failed": 0, + "InProgress": 0, + "detailName": "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN" + } + ]; + + //The icon behind each row of data in the table expands + iconMoreShow(data, tableData) { + tableData.map((its) => { + if (its["service-instance-id"] == data["service-instance-id"]) { + if (its["iconMore"] == false) { + data.iconMore = true; + } else if (its["iconMore"] == true) { + data.iconMore = false; + } + } else { + its["iconMore"] = false; + } + }) + } + + //Get all the customers + getallCustomers() { + console.log(this.language, "this.language"); + this.myhttp.getAllCustomers() + .subscribe((data) => { + this.customerList = data.map((item) => { + return { name: item["subscriber-name"], id: item["global-customer-id"] } + }); + if (this.customerList.length == 0) { + console.log("customerList.length == 0", this.customerList); + return false; + } + this.customerList2 = data.map((item) => { + return { name: item["subscriber-name"], id: item["global-customer-id"] } + }); + if (this.customerList2.length == 0) { + return false; + } + this.customerSelected = this.customerList[0]; + this.choseCustomer(this.customerSelected); + }) + } + + getallOrchestrators() { + this.myhttp.getAllOrchestrators() + .subscribe((data) => { + this.orchestratorList = data.map((item) => { + return { name: item["name"], id: item["name"] } + }); + if (this.orchestratorList.length == 0) { + console.log("orchestratorList.length == 0", this.orchestratorList); + return false; + } + this.orchestratorSelected = this.orchestratorList[0]; + }) + } + + choseCustomer(item) { + this.customerSelected = item; + this.myhttp.getServiceTypes(this.customerSelected) + .subscribe((data) => { + this.serviceTypeList = data.map((item) => { + return { name: item["service-type"] } + }); + + if (this.serviceTypeList.length == 0) { + console.log("serviceTypeList.length == 0", this.serviceTypeList); + return false; + } + + this.serviceTypeSelected = this.serviceTypeList[0]; + + this.choseServiceType(this.serviceTypeSelected); + }) + } + + choseServiceType(item) { + this.serviceTypeSelected = item; + this.getTableData(); + } + + + // Create modal box 2 (dialog box) create ------------------------------- + isVisible = false; + + customerChange(): void { + this.getServiceType(this.customerSelected2); + } + + getServiceType(customerSelected2) { + this.myhttp.getServiceTypes(customerSelected2) + .subscribe((data) => { + this.serviceTypeList2 = data.map((item) => { + return { name: item["service-type"] } + }); + if (this.serviceTypeList2.length == 0) { + console.log("serviceTypeList.length == 0", this.serviceTypeList2); + return false; + } + this.getAlltemplates(); + }) + } + + serviceTypeChange(): void { + this.serviceTypeSelected2.name = this.serviceTypeSelectedName + } + + createModal(): void { + this.isVisible = true; + this.getallOrchestrators(); + this.customerSelected2 = this.customerSelected; + this.serviceTypeSelectedName = this.serviceTypeSelected.name; + this.serviceTypeSelected2 = Object.assign({}, this.serviceTypeSelected); + this.getServiceType(this.customerSelected2); + } + + choseTemplateType() { + this.getallOrchestrators(); + this.getAlltemplates(); + } + + templates = []; + template1 = { name: null }; + + getAlltemplates() { + this.myhttp.getAllServiceTemplates(this.templateTypeSelected) + .subscribe((data) => { + this.templates = data; + if (this.templateTypeSelected == "Network Service") { + this.templates = data.filter((d) => { + return typeof d.packageInfo.csarName == "string"; + }).map((item) => { + let cName = item.packageInfo.csarName.split("/").reverse()[0]; + return { name: cName, id: item.csarId, packageInfo: item.packageInfo } + }); + } + this.template1 = this.templates[0]; + }, (err) => { + console.log(err); + }) + } + + createshow = false; + createshow2 = false; + listDisplay = false; + createData: Object = {}; + + handleOk(): void { + if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { + this.createData = { + commonParams: { + customer: this.customerSelected, + serviceType: this.serviceTypeSelected2, + templateType: this.templateTypeSelected + }, template: this.template1 + }; + } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { + this.createData = { + commonParams: { + customer: this.customerSelected, + serviceType: this.serviceTypeSelected2, + templateType: this.templateTypeSelected + }, + template: this.template1, + orchestrator: this.orchestratorSelected, + isSol005Interface: this.isSol005Interface + }; + } + this.getTemParameters(); + } + + handleCancel(): void { + this.isVisible = false; + this.loadingAnimateShow = false; + } + + temParametersTips = false; + ccvpn_temParametersContent: any; + e2e_ns_temParametersContent: any; + + getTemParameters() { + let chosedtemplates = this.createData["template"]; + let types = this.createData["commonParams"].templateType; + if (types == "E2E Service") { + types = "e2e"; + } else if (types == "Network Service") { + types = "ns"; + } + this.loadingAnimateShow = true; + this.myhttp.getTemplateParameters(types, chosedtemplates) + .subscribe((data) => { + this.loadingAnimateShow = false; + if (data.status == "FAILED") { + this.temParametersTips = true; + this.isVisible = true; + console.log("Template parsing Failed"); + } else { + this.isVisible = false; + this.temParametersTips = false; + if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { + this.ccvpn_temParametersContent = data; + this.createshow = true; + this.listDisplay = true; + } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { + this.e2e_ns_temParametersContent = data; + this.createshow2 = true; + this.listDisplay = true; + } + } + }) + } + + //tableData + tableData = []; + pageIndex = 1; + pageSize = 10; + total = 100; + loading = false; + + getTableData() { + this.loading = true; + // Query parameter: customer serviceType Current page number, number of pages per page + let paramsObj = { + customerId: this.customerSelected.id, + serviceType: this.serviceTypeSelected.name, + currentPage: this.pageIndex, + pageSize: this.pageSize + } + this.myhttp.getServicesTableData(paramsObj) + .subscribe((data) => { + this.total = data.body.total; + this.tableData = data.body.tableList.map((item) => { + if (typeof item == "string") { + item = JSON.parse(item); + } + + item["iconMore"] = this.iconMore; + if (item["serviceDomain"] == "Network Service") { + if (item["vnfInfo"]) { + item["childServiceInstances"] = item["vnfInfo"].map((vnf) => { + vnf["serviceDomain"] = "vnf"; + return vnf; + }); + } else if (item["relationship-list"] && item["relationship-list"]["relationship"]) { + item["childServiceInstances"] = item["relationship-list"]["relationship"].filter((relate) => { + return relate["related-to"] == "generic-vnf"; + }).map((vnf) => { + let vnfInfo = { + vnfNsInstanceId: "", + vnfInstanceId: "", + vnfInstanceName: "", + serviceDomain: "vnf" + }; + vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"]; + vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid) => { + return vnfid["relationship-key"] == "generic-vnf.vnf-id" + })["relationship-value"]; + vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname) => { + return vnfname["property-key"] == "generic-vnf.vnf-name" + })["property-value"]; + return vnfInfo; + }) + } + } else { + item["childServiceInstances"] = []; + } + + // + if (item["operationResult"] == "2001") { //operationResult==2001 + item["status"] = "Available"; + item["tips"] = "Available"; + item["statusClass"] = item["operationResult"]; + } + // 2018.12.13 + else if (item["operationResult"] == "2002") { //operationResult==2002 + if (item["operationType"] == "1001" || item["operationType"] == "1002") { + // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == item["operationResult"] && its["language"] == this.language + })["sortValue"]; + item["tips"] = "Unavailable"; + item["statusClass"] = item["operationType"]; + } else if (item["operationType"] != "1001" && item["operationType"] != "1002") { + // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == item["operationResult"] && its["language"] == this.language + })["sortValue"]; + item["tips"] = "Available"; + item["statusClass"] = item["operationType"]; + } + + } + else if (item["operationResult"] == "2003") { //operationResult==2003 + // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == item["operationResult"] && its["language"] == this.language + })["sortValue"]; + item["statusClass"] = item["operationType"]; + if (item["serviceDomain"] == "Network Service") { + let updata = (prodata) => { + item["rate"] = prodata.progress; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%"; + if (item["rate"] > 100) { + item["status"] = prodata.status; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; + } + } + let id = item["nsInstanceId"] || item["service-instance-id"]; + let jobid = item["jobId"] || item["operationId"]; + let operationType = item["operationType"]; + this.queryNsProgress(jobid, id, updata, operationType).then(() => { + item["rate"] = 100; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; + }) + } else { + let updata = (prodata) => { + item["rate"] = prodata.progress || item["rate"]; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%"; + if (item["rate"] > 100) { + item["status"] = prodata.status; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; + } + } + let obj = { + serviceId: item["service-instance-id"], + operationId: item["operationId"], + operationType: item["operationType"] + } + this.queryProgress(obj, updata).then(() => { + item["rate"] = 100; + item["status"] = this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + item["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == item["operationType"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; + }) + } + } + return item; + }) + this.tableData.map((item, index) => { + if (item.serviceDomain == 'E2E Service') { + if (item.operationResult == 2001) { + this.serviceMunber[0]["Success"] += 1; + } else if (item.operationResult == 2002) { + this.serviceMunber[0]["failed"] += 1; + } else if (item.operationResult == 2003) { + this.serviceMunber[0]["InProgress"] += 1; + } + } + else if (item.serviceDomain == 'Network Service') { + if (item.operationResult == 2001) { + this.serviceMunber[1]["Success"] += 1; + } else if (item.operationResult == 2002) { + this.serviceMunber[1]["failed"] += 1; + } else if (item.operationResult == 2003) { + this.serviceMunber[1]["InProgress"] += 1; + } + } + else if (item.serviceDomain == 'CCVPN') { + if (item.operationResult == 2001) { + this.serviceMunber[2]["Success"] += 1; + } else if (item.operationResult == 2002) { + this.serviceMunber[2]["failed"] += 1; + } else if (item.operationResult == 2003) { + this.serviceMunber[2]["InProgress"] += 1; + } + } + }) + this.loading = false; + }, (err) => { + console.log(err); + this.loading = false; + }) + } + + searchData(reset: boolean = false) { + this.getTableData(); + } + + thisService = {}; //The current service of the operation + e2e_nsData: Object[]; + scaleModelVisible = false; + + scaleService(service) { + this.thisService = service; + this.scaleModelVisible = true; + let paramsObj = { + customerId: this.customerSelected.id, + serviceType: this.serviceTypeSelected.name, + serviceId: service["service-instance-id"] + } + this.myhttp.getE2e_nsData(paramsObj) + .subscribe((data) => { + this.e2e_nsData = data; + }) + } + + scaleOk(templatescalestarting, templateScaleSuccessFaild) { + this.scaleModelVisible = false; + let requestBody = { + "service": { + "serviceInstanceName": this.thisService["service-instance-name"], + "serviceType": this.serviceTypeSelected.name, + "globalSubscriberId": this.customerSelected.id, + "resources": this.e2e_nsData.map((item) => { + return { + "resourceInstanceId": item["netWorkServiceId"], + "scaleType": item["scaleType"], + "scaleNsData": { + "scaleNsByStepsData": { + "aspectId": item["aspectId"], + "numberOfSteps": item["numberOfSteps"], + "scalingDirection": item["scalingDirection"] + } + } + } + }) + } + } + this.scaleE2eService(this.thisService, requestBody, templateScaleSuccessFaild); + this.scaleNotification(templatescalestarting); + } + + scaleCancel() { + this.scaleModelVisible = false; + } + + scaleNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + scaleSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + //heal + healModelVisible = false; + healActions = []; + nsAdditional = []; + nsParams = { + degreeHealing: "HEAL_RESTORE", + actionsHealing: [], + healScript: "", + additionalParamsforNs: "" + } + vnfVms = []; + vmSelected = {}; + vnfParams = { + vnfInstanceId: "", + cause: "", + additionalParams: { + action: "", + actionvminfo: { + vmid: "", + vduid: "", + vmname: "" + } + } + } + + addActionsHealing() { + this.healActions.push({ value: "" }) + } + + minusActionsHealing(index) { + this.healActions.splice(index, 1); + } + + addNsAdditional() { + this.nsAdditional.push({ key: "", value: "" }) + } + + minusNsAdditional(index) { + this.nsAdditional.splice(index, 1); + } + + healService(service) { + this.thisService = service; + this.healModelVisible = true; + if (service.serviceDomain == "vnf") { + this.vnfParams.vnfInstanceId = service.vnfInstanceId; + this.myhttp.getVnfInfo(service.vnfInstanceId) + .subscribe((data) => { + this.vnfVms = data.vnfVms; + this.vmSelected = this.vnfVms[0]; + }) + } + } + + healOk(templatehealstarting, templatehealSuccessFaild) { + this.healModelVisible = false; + // nsParams + this.nsParams.actionsHealing = this.healActions.map((item) => { + return item.value + }); + let additional = {}; + this.nsAdditional.forEach((item) => { + additional[item.key] = item.value; + }); + this.nsParams.additionalParamsforNs = JSON.stringify(additional); + // vnfParams + this.vnfParams.additionalParams.actionvminfo.vmid = this.vmSelected["vmId"]; + this.vnfParams.additionalParams.actionvminfo.vmname = this.vmSelected["vmName"]; + + let requestBody = this.thisService["serviceDomain"] == "Network Service" ? { healNsData: this.nsParams } : { healVnfData: this.vnfParams }; + this.healNsVnfService(this.thisService, requestBody, templatehealSuccessFaild); + this.healNotification(templatehealstarting); + } + + healCancel() { + this.healModelVisible = false; + } + + healNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + healSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + // show detail + detailshow = false; + detailshow2 = false; + upDateShow = false; + detailData: Object; + + serviceDetail(service, typeNum) { + service["siteSer"] = []; + service["sdwanSer"] = []; + service["customer"] = this.customerSelected; + service["serviceType"] = this.serviceTypeSelected; + + service.childServiceInstances.forEach((item) => { + if (item.serviceDomain == "SITE") { + service.siteSer.push(item); + } else if (item.serviceDomain == "SDWAN") { + service.sdwanSer.push(item); + } + }) + if (service["serviceDomain"] == 'CCVPN' || service["serviceDomain"] == 'SOTN') { + this.detailshow = true; + if (typeNum == 1) { + this.upDateShow = false; + } else { + this.upDateShow = true; + } + } else if (service["serviceDomain"] == 'E2E Service' || service["serviceDomain"] == 'Network Service') { + this.detailshow2 = true; + } + this.listDisplay = true; + this.detailData = service; + console.log(service); + } + + deleteModelVisible = false; + terminationType = "graceful"; + gracefulTerminationTimeout = 120; + + // delete Model show + deleteModel(service) { + this.thisService = service; + this.deleteModelVisible = true; + } + + deleteOk(templatedeletestarting, templateDeleteSuccessFaild) { + this.deleteModelVisible = false; + this.loadingAnimateShow = true; + if (this.thisService["serviceDomain"] == "Network Service") { + this.deleteNsService(this.thisService, templateDeleteSuccessFaild); + } else { + this.deleteService(this.thisService, templateDeleteSuccessFaild); + } + this.deleteNotification(templatedeletestarting); + } + + deleteCancel() { + this.deleteModelVisible = false; + } + + deleteNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + deleteSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + createNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + createSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + //ccvpn sotn createservice + parentServiceInstanceId = ""; + thisCreateService = {}; + + closeCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { + if (!obj) { + this.createshow = false; //close + this.listDisplay = false; //close + return false; + } + this.createshow = false; + this.listDisplay = false; + this.loadingAnimateShow = true; + console.log(obj); + let newData; //Newly created service data for the main table + + let createParams = "?customerId=" + this.customerSelected2.id + + "&serviceType=" + this.serviceTypeSelected2.name + + "&serviceDomain=" + this.templateTypeSelected; + this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => { + console.log(data); + this.loadingAnimateShow = false; + newData = { //Newly created service data in the main form + 'service-instance-id': data["serviceId"], + 'service-instance-name': obj.service.name, + serviceDomain: this.templateTypeSelected, + childServiceInstances: [], + status: "In Progress", + rate: 0, + statusClass: 1001, + tips: "" + }; + this.thisCreateService = newData; + this.tableData = [newData, ...this.tableData]; + this.createNotification(templateCreatestarting); + let updata = (prodata) => { + newData.rate = prodata.progress; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + newData.rate + "%"; + if (newData["rate"] > 100) { + newData["status"] = prodata.status; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; + } + }; + let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; + return this.queryProgress(queryParams, updata); + }).then((data) => { + console.log(data); + newData.rate = 100; + newData.status = "Successful"; + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }); + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + } + + e2eCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { + if (!obj) { + this.createshow2 = false; // + this.listDisplay = false; // + return false; + } + this.createshow2 = false; // + this.listDisplay = false; // + this.loadingAnimateShow = true; + console.log(obj); + let newData; // + let createParams = "?customerId=" + this.customerSelected.id + + "&serviceType=" + this.serviceTypeSelected2.name + + "&serviceDomain=" + this.templateTypeSelected + + "&parentServiceInstanceId=" + + "&uuid=" + obj.service.serviceUuid + + "&invariantUuuid=" + obj.service.serviceInvariantUuid; + this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => { + console.log(data); + this.loadingAnimateShow = false; + newData = { // + 'service-instance-id': data["serviceId"], + 'service-instance-name': obj.service.name, + serviceDomain: this.templateTypeSelected, + childServiceInstances: [], + status: "In Progress", + statusClass: 1001, + rate: 0, + tips: "" + } + this.thisCreateService = newData; + this.tableData = [newData, ...this.tableData]; + this.createNotification(templateCreatestarting); + let updata = (prodata) => { + newData.rate = prodata.progress; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + newData.rate + "%"; + if (newData["rate"] > 100) { + newData["status"] = prodata.status; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; + } + } + let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; + return this.queryProgress(queryParams, updata); + }).then((data) => { + console.log(data); + newData.rate = 100; + newData.status = "Successful"; + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }) + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + + } + + nsCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { + if (!obj) { + this.createshow2 = false; // + this.listDisplay = false; // + return false; + } + this.createshow2 = false; // + this.listDisplay = false; // + this.loadingAnimateShow = true; + console.log(obj); + let newData; // + // step1 + this.myhttp.nsCreateInstance(obj.step1) + .subscribe((data) => { + // console.log(data); + this.loadingAnimateShow = false; + newData = { // + 'service-instance-id': data.nsInstanceId, + 'service-instance-name': obj.step1.nsName, + serviceDomain: this.templateTypeSelected, + childServiceInstances: [], + status: "In Progress", + statusClass: 1001, + rate: 0, + tips: "" + } + this.thisCreateService = newData; + this.tableData = [newData, ...this.tableData]; + this.createNotification(templateCreatestarting); + if (data.status == "FAILED") { + console.log("create ns service Failed :" + JSON.stringify(data)); + newData.status = "Failed"; + this.createSuccessNotification(templateCreateSuccessFaild); + return false; + } + let createParams = "?ns_instance_id=" + data.nsInstanceId + + "&customerId=" + this.customerSelected2.id + + "&serviceType=" + this.serviceTypeSelected2.name + + "&serviceDomain=" + this.templateTypeSelected + + "&parentServiceInstanceId="; + // step2 + this.createNsService(createParams, obj.step2).then((jobid) => { + if (jobid == "Failed") { + newData.status = "Failed"; + console.log(jobid, "ns two jobid") + this.thisCreateService = newData; + console.log(this.thisCreateService) + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + return false; + } + let operationType = "1001"; + let updata = (prodata) => { + newData.rate = prodata.progress; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + newData.rate + "%"; + if (newData["rate"] > 100) { + newData["status"] = prodata.status; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; + } + } + + return this.queryNsProgress(jobid, newData["service-instance-id"], updata, operationType); + }).then((data) => { + console.log(data); + newData.rate = 100; + newData.status = "Successful"; + this.thisCreateService = newData; + console.log(this.thisCreateService) + this.createSuccessNotification(templateCreateSuccessFaild); + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }) + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + }) + } + + createService(requestBody, createParams, templateCreatestarting, templateCreateSuccessFaild) { + let mypromise = new Promise((res, rej) => { + this.myhttp.createInstance(requestBody, createParams) + .subscribe((data) => { + if (data.status == "FAILED") { + this.loadingAnimateShow = false; + res("Failed"); + console.log("create e2e service Failed :" + JSON.stringify(data)); + return false; + } + res(data.service); + }) + }) + return mypromise; + } + + createNsService(id, obj) { + let mypromise = new Promise((res, rej) => { + this.myhttp.nsCreateInstance2(id, obj) + .subscribe((data) => { + if (data.status == "FAILED") { + this.loadingAnimateShow = false; + console.log("instantiate ns service Failed :" + JSON.stringify(data)); + res("Failed"); + return false; + } + res(data.jobId); + }) + }) + return mypromise; + } + + scaleE2eService(service, requestBody, templateScaleSuccessFaild) { + let id = service["service-instance-id"]; + service.rate = 0; + service.status = "In Progress"; + service.statusClass = "1003"; + service.tips = ""; + this.myhttp.scaleE2eService(id, requestBody) + .subscribe((data) => { + if (data.status == "FAILED") { + console.log("scale E2e service Failed :" + JSON.stringify(data)); + service.status = "Failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.scaleSuccessNotification(templateScaleSuccessFaild); + return false; + } + let obj = { + serviceId: id, + operationId: data.operationId, + operationType: "1003" + } + let updata = (prodata) => { + service.rate = prodata.progress; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["rate"] + "%"; + if (service["rate"] > 100) { + service["status"] = prodata.status; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; + } + } + this.queryProgress(obj, updata).then(() => { + service.rate = 100; + service.status = "Successful"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.scaleSuccessNotification(templateScaleSuccessFaild); + }) + }) + } + + healNsVnfService(service, requestBody, templatehealSuccessFaild) { + console.log(service); + service.rate = 0; + service.status = "In Progress"; + service.tips = ""; + service.statusClass = "1004"; + let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"]; + this.myhttp.healNsService(id, requestBody) + .subscribe((data) => { + if (data.status == "FAILED") { + console.log("heal nsvnf service Failed :" + JSON.stringify(data)); + service.status = "Failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.healSuccessNotification(templatehealSuccessFaild); + return false; + } + let jobid = data.jobId; + let operationType = "1004"; + let updata = (prodata) => { + service.rate = prodata.progress; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%"; + console.log(service.rate) + if (service["rate"] > 100) { + service["status"] = prodata.status; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; + } + } + this.queryNsProgress(jobid, null, updata, operationType).then((data1) => { + console.log(data1); + service.rate = 100; + service.status = "Successful"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.healSuccessNotification(templatehealSuccessFaild); + }); + }) + } + + updateCcvpnNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + updateCcvpnSuccessNotification(template: TemplateRef<{}>): void { + this.notification.template(template); + } + + closeCCVPNUpdate(obj, templateUpdateSuccessFaild) { + console.log(obj); + this.detailshow = false; + this.listDisplay = false; + this.upDateShow = false; + this.detailData["rate"] = 0; + this.detailData["status"] = "In Progress"; + this.detailData['tips'] = ""; + this.detailData["statusClass"] = "1005"; + let id = this.detailData["service-instance-id"]; + this.myhttp.updateccvpn(id, obj) + .subscribe((data) => { + if (data.status == "FAILED") { + console.log("scale E2e service Failed :" + JSON.stringify(data)); + this.detailData["status"] = "Failed"; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); + return false; + } + let obj = { + serviceId: id, + operationId: data.operationId + } + let updata = (prodata) => { + this.detailData["rate"] = prodata.progress; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["rate"] + "%"; + if (this.detailData["rate"] > 100) { + this.detailData["status"] = prodata.status; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["status"]; + } + }; + this.queryProgress(obj, updata).then(() => { + this.detailData["rate"] = 100; + this.detailData["status"] = "Successful"; + this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); + }) + }) + } + + deleteService(service, templateDeleteSuccessFaild) { + let allprogress = {}; // + let querypros = []; // + service.rate = 0; + service.status = "In Progress"; + service.tips = ""; + service.statusClass = "1002"; + service["childServiceInstances"].push({ "service-instance-id": service["service-instance-id"] }); + let deletePros = service["childServiceInstances"].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) => { + this.loadingAnimateShow = false; + if (data.status == "FAILED") { + console.log("delete service Failed :" + JSON.stringify(data)); + service.status = "Failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + return false; + } + let obj = { + serviceId: params.serviceInstanceId, + operationId: data.operationId, + operationType: "1002" + } + let updata = (prodata) => { + allprogress[prodata.operationId] = prodata.progress; + let average = ((arr) => { + return eval(arr.join("+")) / arr.length + })(Object.values(allprogress)); + service["rate"] = average; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["rate"] + "%"; + if (service["rate"] > 100) { + service["status"] = prodata.status; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service["status"]; + } + }; + querypros.push(this.queryProgress(obj, updata)); + res(); + }) + }) + }); + Promise.all(deletePros).then(() => { + Promise.all(querypros).then((data) => { + console.log(data); + service.rate = 100; + service.status = "Successful"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }) + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + }) + } + + deleteNsService(service, templateDeleteSuccessFaild) { + service.rate = 0; + service.status = "In Progress"; + service.tips = ""; + service.statusClass = "1002"; + let id = service.nsInstanceId || service["service-instance-id"]; + let operationType = "1002"; + let requestBody = { + terminationType: this.terminationType, + gracefulTerminationTimeout: this.gracefulTerminationTimeout + } + this.stopNsService(id, requestBody).then((jobid) => { + if (jobid == "Failed") { + service.status = "Failed"; + this.deleteSuccessNotification(templateDeleteSuccessFaild); + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + return false; + } + let updata = (prodata) => { + service.rate = prodata.progress; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%"; + if (service["rate"] > 100) { + service["status"] = prodata.status; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + service["status"]; + } + } + return this.queryNsProgress(jobid, null, updata, operationType); + }).then(() => { + this.myhttp.nsDeleteInstance(id) + .subscribe((data) => { + console.log(data); + service.rate = 100; + service.status = "Successful"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2001 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); + if (data.status == "FAILED") { + console.log("delete ns service Failed :" + JSON.stringify(data)); + service.status = "Failed"; + service.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == service.statusClass && its["language"] == this.language + })["sortValue"] + this.listSortMasters["operationResults"].find((its) => { + return its["sortCode"] == 2002 && its["language"] == this.language + })["sortValue"]; + this.deleteSuccessNotification(templateDeleteSuccessFaild); + return false; + } + console.log(service, "deleteservice"); + console.log(this.thisService, "thisService"); + let hasUndone = this.tableData.some((item) => { + return item.rate < 100; + }) + if (!hasUndone) { + setTimeout(() => { + this.getTableData(); + }, 1000) + } + }) + }) + } + + stopNsService(id, obj) { + let mypromise = new Promise((res, rej) => { + this.myhttp.stopNsService(id, obj) + .subscribe((data) => { + this.loadingAnimateShow = false; + if (data.status == "FAILED") { + console.log("stop ns service Failed :" + JSON.stringify(data)); + res("Failed"); + return false; + } + res(data.jobId); + }) + }) + 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 errorNums = 180; + let requery = () => { + this.myhttp.getProgress(obj) + .subscribe((data) => { + if (data.status == "FAILED") { + callback({ progress: 255, status: "Failed" }); + return false; + } + if (data.operationStatus == null || data.operationStatus.progress == undefined) { + // console.log(data); + errorNums--; + if (errorNums == 0) { + callback({ progress: 255, status: "time over" }); + return false; + } + setTimeout(() => { + requery(); + }, 10000) + return false; + } + if (data.operationStatus.progress > 100) { + callback({ progress: 255, status: "time over" }); + 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; + } + + queryNsProgress(jobid, id, callback, operationType) { + let mypromise = new Promise((res, rej) => { + // let data = { + // "jobId": "string", + // "responseDescriptor": { + // "status": "string", + // "progress": 0, + // "statusDescription": "string", + // "errorCode": "string", + // "responseId": "string", + // "responseHistoryList": [ + // { + // "status": "string", + // "progress": "string", + // "statusDescription": "string", + // "errorCode": "string", + // "responseId": "string" + // } + // ] + // } + // } + let errorNums = 180; + let requery = () => { + this.myhttp.getNsProgress(jobid, id, operationType) + .subscribe((data) => { + if (data.status == "FAILED") { + callback({ progress: 255, status: "Failed" }); + return false; + } + if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) { + // console.log(data); + errorNums--; + if (errorNums == 0) { + callback({ progress: 255, status: "time over" }); + return false; + } + setTimeout(() => { + requery(); + }, 10000) + return false; + } + if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error") { + callback({ progress: 255, status: data.responseDescriptor.statusDescription }); + return false; + } + if (data.responseDescriptor.progress < 100) { + callback(data.responseDescriptor); + setTimeout(() => { + requery(); + }, 5000) + } else { + res(data); + } + }) + // setTimeout(()=>{ + // console.log(data.responseDescriptor.progress) + // data.responseDescriptor.progress++; + // if(data.responseDescriptor.progress<100){ + // callback(data.responseDescriptor); + // requery() + // }else{ + // callback(data); + // res(data) + // } + // },100) + }; + requery(); + }); + return mypromise; + } + +} diff --git a/usecaseui-portal/src/app/views/services/services.component.html b/usecaseui-portal/src/app/views/services/services.component.html new file mode 100644 index 00000000..10142833 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services.component.html @@ -0,0 +1,18 @@ +<!-- + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<p> + services works! +</p> diff --git a/usecaseui-portal/src/app/views/services/services.component.less b/usecaseui-portal/src/app/views/services/services.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services.component.less diff --git a/usecaseui-portal/src/app/views/services/services.component.spec.ts b/usecaseui-portal/src/app/views/services/services.component.spec.ts new file mode 100644 index 00000000..2e76b9f9 --- /dev/null +++ b/usecaseui-portal/src/app/views/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/views/services/services.component.ts b/usecaseui-portal/src/app/views/services/services.component.ts new file mode 100644 index 00000000..eec235b4 --- /dev/null +++ b/usecaseui-portal/src/app/views/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() { + } + +} |