From c437d5360c75c1af5417c3681235a0f8015a9a85 Mon Sep 17 00:00:00 2001 From: liuwh7 Date: Wed, 15 Sep 2021 09:57:09 +0800 Subject: feat: add intent based service Signed-off-by: liuwh7 Change-Id: If63eb5e61f01751771ad090728f33214077edd6f Issue-ID: USECASEUI-605 --- .../monitor-facps-service.component.html | 39 ++++ .../monitor-facps-service.component.less | 99 ++++++++++ .../monitor-facps-service.component.ts | 199 +++++++++++++++++++++ .../monitor-management-service.component.html | 5 + .../monitor-management-service.component.less | 0 .../monitor-management-service.component.ts | 18 ++ 6 files changed, 360 insertions(+) create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less create mode 100644 usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts (limited to 'usecaseui-portal/src/app/views/fcaps/monitor-management-service') 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 @@ +
+
+ + + + + +
+ FinishedInstance + + + + +
+
+
+
+
+ Line Chart +
+
+
+
\ 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 @@ + + + + + \ 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 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 -- cgit 1.2.3-korg