diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/fcaps/monitor-management-service')
6 files changed, 360 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html new file mode 100644 index 00000000..a07f948c --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html @@ -0,0 +1,39 @@ +<div class="main"> + <div class="divCls"> + <table> + <tr> + <td> + <nz-form-label class= "colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">FinishedInstance</nz-form-label> + </td> + <td> + <nz-select + id="subscriptionType" + class= "colm-s-2" + [(ngModel)]="instanceId" + (ngModelChange)="queryInstancePerformance($event)" + nzAllowClear + > + <nz-option + *ngFor="let option of instanceLists" + [nzValue]="option.instanceId" + [nzLabel]="option.name" + ></nz-option> + </nz-select> + </td> + </tr> + </table> + </div> + <div class="flexDiv"> + <div class="topocontainer"> + <div + id="chartLine" + echarts + [initOpts]="initOpts" + [options]="lineOption" + [merge]="updateOption" + (chartInit)="chartInit($event)"> + Line Chart + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less new file mode 100644 index 00000000..f7db5523 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less @@ -0,0 +1,99 @@ +#mynetwork { + width: 100%; + height: calc(~"100vh - 300px"); + border: 1px solid lightgray; + margin-right: 40px; + // background-color: #333333; +} + + +:host ::ng-deep .ant-form-item-label label { + color: var(--on-primary) ; + background-color:var(--primary); +} + +:host ::ng-deep .ant-select-dropdown-menu-item{ + color: var(--on-primary) ; + background-color:var(--primary); + +} +:host ::ng-deep .ant-select-selection__rendered { + background-color:var(--primary); + +} +:host ::ng-deep .ant-select-selection--single { + background-color:var(--primary); + +} + +:host ::ng-deep .ant-select-selection-selected-value { + + color: var(--on-primary) !important ; + +} + +@media only screen and (min-width: 600px) { +.flexDiv { + display: flex!important; +} +} +@media only screen and (min-width: 768px) { +.flexDiv { + display: flex!important; +} +} + +.font-size{ + font-size: 17px; +} +.font-weight{ + font-weight:bold; +} + +.refreshBtn{ + right: 580px; + position: absolute; + top: 35px; + z-index: 1 +} + +:host ::ng-deep .ant-form-item-label label { + color: var(--on-primary) ; +} + +:host ::ng-deep .ant-select-selection__placeholder +{ + color: var(--on-primary); +} + +:host ::ng-deep .ant-select-arrow { + + + color: var(--on-primary); + font-size: 12px; +} + + +.popup-table-row +{ + color: aqua; +} + +.divCls{ + display: inline-block; + width: 100%; + padding-bottom: 10px; + color : var(--on-lables) ; + } + + .main { + // padding-left:80px + } + .ant-col-sm-6 { + width:100%; + } + + #subscriptionType, #serviceInstance { + width: 250px; + } + diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts new file mode 100644 index 00000000..8da138bf --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts @@ -0,0 +1,199 @@ +import { HttpClient } from "@angular/common/http"; +import { Component, OnInit } from "@angular/core"; +import { NzMessageService } from "ng-zorro-antd"; +import { intentBaseService } from "../../../../core/services/intentBase.service"; + +@Component({ + selector: "app-monitor-facps-service", + templateUrl: "./monitor-facps-service.component.html", + styleUrls: ["./monitor-facps-service.component.less"], +}) +export class MonitorFacpsServiceComponent implements OnInit { + + constructor( + private nzMessage: NzMessageService, + private myHttp: intentBaseService, + private http: HttpClient + ) {} + + selectedSubscriptionType: string = ""; + selectedServiceInstance: string = ""; + selectedTopology: string = ""; + instanceId: string = ""; + chartData: any = { + xAxis: { + data: [ + "2018-09-10 ", + "2018-09-11", + "2018-09-12", + "2018-09-13", + "2018-09-14", + "2018-09-15", + "2018-09-16", + "2018-09-17", + "2018-09-18", + "2018-09-19", + "2018-09-20", + "2018-09-21", + "2018-09-22" + ] + }, + series: [ + { + data: [ + 30, + 45, + 34, + 35, + 43, + 56, + 36, + 53, + 42, + 45, + 44, + 35, + 32 + ] + }, + { + data: [ + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60 + ] + } + ] + }; + initData: any = { + height: 320, + option: { + legend: { bottom: "0px", data: ["RATE", "MAXRATE"] }, + xAxis: { data: [] }, + series: [ + { + name: "RATE", + type: "line", + itemStyle: { color: "#70ACEC" }, + data: [], + }, + { + name: 'MAXRATE', + type: 'line', + step: 'end', + itemStyle: { + color: "#3BCD79" + }, + data: [] + } + ], + }, + }; + + initOpts: any; + lineOption: any; + chartIntance: any; + updateOption: any; + + instanceLists: any[] = []; + + ngOnInit() { + this.getFinishedInstanceInfo(); + this.initOpts = { + renderer: "canvas", + height: this.initData.height, + width: this.initData.width, + }; + this.lineOption = { + tooltip: this.initData.option.tooltip, + icon: "circle", + legend: this.initData.option.legend, + dataZoom: this.initData.option.dataZoom, + grid: { + left: "0%", + right: "3%", + top: "10%", + bottom: "18%", + containLabel: true, + }, + xAxis: { + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + color: "#3C4F8C", + }, + data: this.initData.option.xAxis.data, + }, + yAxis: { + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + color: "#3C4F8C", + }, + splitLine: { + lineStyle: { + type: "dashed", + }, + }, + }, + series: this.initData.option.series, + }; + } + + chartInit(chart) { + this.chartIntance = chart; + } + + getFinishedInstanceInfo() { + this.myHttp.getFinishedInstanceInfo().subscribe( + (response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + this.instanceLists = [...data]; + }, + (err) => { + console.log(err); + } + ) + } + + queryInstancePerformance(instanceId) { + this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe( + (response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + if(this.chartIntance){ + this.updateOption = data; + } + }, + (err) => { + console.log(err); + } + ) + } + +} diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html new file mode 100644 index 00000000..554d8887 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html @@ -0,0 +1,5 @@ +<nz-tabset class="slicing"> + <nz-tab [nzTitle]="'i18nTextDefine_monitorService' | translate"> + <app-monitor-facps-service></app-monitor-facps-service> + </nz-tab> +</nz-tabset>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts new file mode 100644 index 00000000..39fd95e8 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts @@ -0,0 +1,18 @@ +import { Component, HostBinding, OnInit } from '@angular/core'; +import { slideToRight } from '../../../shared/utils/animates'; + +@Component({ + selector: 'app-monitor-management-service', + templateUrl: './monitor-management-service.component.html', + styleUrls: ['./monitor-management-service.component.less'], + animations: [slideToRight] +}) +export class MonitorManagementService implements OnInit { + + @HostBinding('@routerAnimate') routerAnimateState; + + constructor() { } + + ngOnInit() { + } +}
\ No newline at end of file |