3 * Copyright (C) 2017-2019 "IoT.bzh"
4 * Author Sebastien Douheret <sebastien@iot.bzh>
6 * Licensed under the Apache License, Version 2.0 (the "License");
7 * you may not use this file except in compliance with the License.
8 * You may obtain a copy of the License at
10 * http://www.apache.org/licenses/LICENSE-2.0
12 * Unless required by applicable law or agreed to in writing, software
13 * distributed under the License is distributed on an "AS IS" BASIS,
14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 * See the License for the specific language governing permissions and
16 * limitations under the License.
19 import { Component, OnInit, Input } from '@angular/core';
20 import { NbThemeService } from '@nebular/theme';
21 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
23 import { ConfigService, IConfig } from '../../@core-xds/services/config.service';
24 import { MonitoringService } from '../../@core-xds/services/monitoring.service';
25 import { AlertService } from '../../@core-xds/services/alert.service';
27 export interface GrafanaDashboard {
31 safeUrl?: SafeResourceUrl;
34 export interface GrafanaPanel {
38 safeUrl?: SafeResourceUrl;
42 selector: 'xds-monitoring',
43 styleUrls: ['./monitoring.component.scss'],
44 templateUrl: './monitoring.component.html',
47 export class MonitoringComponent implements OnInit {
49 /* TODO bind tm_* and refresh in UI */
50 @Input() theme = 'light';
51 @Input() tm_from = 'now-60s';
52 @Input() tm_to = 'now';
53 @Input() refresh = '5s';
54 @Input() scroll_factor = 10000;
55 @Input() zoom_factor = 100000;
57 displayMode = 'dashboard';
59 private dashboards: Map<string, GrafanaDashboard> = new Map<string, GrafanaDashboard>([
60 ['xds_monitoring', { name: 'AGL XDS Monitoring', shortname: 'agl-xds-monitoring' }],
63 private panels: Map<string, GrafanaPanel> = new Map<string, GrafanaPanel>([
64 ['table', { name: 'Monitoring traces table', index: '2' }],
65 ['evt_data_bytes', { name: 'Requests & Events per second', index: '5' }],
66 ['req_evts_per_sec', { name: 'Events Data bytes', index: '12' }],
70 private monitoringSvr: MonitoringService,
71 private alert: AlertService,
72 private themeService: NbThemeService,
73 private sanitizer: DomSanitizer,
74 private configSvr: ConfigService,
78 Config: IConfig = <IConfig>{};
81 this.configSvr.Conf$.subscribe(cfg => this.Config = cfg);
83 this._initDashboard();
86 this.themeService.onThemeChange().subscribe(tm => {
87 this.theme = (tm.name === 'cosmic') ? 'dark' : 'light';
92 getDashboard(name: string): SafeResourceUrl {
93 return this.dashboards.get(name).safeUrl;
96 getPanel(name: string): SafeResourceUrl {
97 return this.panels.get(name).safeUrl;
100 displayModeChange() {
101 if (this.displayMode === 'dashboard') {
102 this.displayMode = 'panels';
104 this.displayMode = 'dashboard';
109 this._initDashboard();
113 timeChange(val: number) {
114 /* TODO: convert tm_from string to number
115 this.tm_from += val * this.scroll_factor;
116 this.tm_to += val * this.scroll_factor;
122 /* TODO: convert tm_from string to number
123 this.tm_from -= this.zoom_factor;
124 this.tm_to += this.zoom_factor;
129 private _initDashboard() {
130 // http://localhost:3000/d/Lbpwc6Iiz/agl-xds-monitoring?from=now-40s&to=now&refresh=5s
131 this.dashboards.forEach(dd => {
132 dd.url = this._buildDashboardUrl(dd.shortname, this.tm_from, this.tm_to, this.refresh, this.theme);
133 dd.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(dd.url);
136 private _initPanels() {
137 this.panels.forEach(gg => {
138 gg.url = this._buildPanelUrl(gg.index, this.tm_from, this.tm_to, this.refresh, this.theme);
139 gg.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(gg.url);
143 private _buildDashboardUrl(sname, from, to, refresh, theme: string) {
144 // FIXME get sname from config to support several dashboards
145 let url = 'http://localhost:3000/d/Lbpwc6Iiz/' + sname;
146 if (this.Config.grafanaDashboardUrl !== '') {
147 url = this.Config.grafanaDashboardUrl;
150 if (from !== '') { url += '&from=' + from; }
151 if (to !== '') { url += '&to=' + to; }
152 if (theme !== '') { url += '&theme=' + theme; }
153 if (refresh !== '') { url += '&refresh=' + refresh; }
154 url += '&sidemenu=close';
158 private _buildPanelUrl(idx, from, to, refresh, theme: string) {
159 let url = 'http://localhost:3000/d-solo/Lbpwc6Iiz/agl-xds-monitoring';
160 if (this.Config.grafanaDashboardUrl !== '') {
161 url = this.Config.grafanaDashboardUrl;
163 url += '?panelId=' + idx;
165 if (from !== '') { url += '&from=' + from; }
166 if (to !== '') { url += '&to=' + to; }
167 if (theme !== '') { url += '&theme=' + theme; }
168 if (refresh !== '') { url += '&refresh=' + refresh; }
169 url += '&sidemenu=close';