summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service')
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html39
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less99
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts199
3 files changed, 337 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);
+ }
+ )
+ }
+
+}