3 * Copyright (C) 2017-2018 "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 { Observable } from 'rxjs/Observable';
21 import { Subject } from 'rxjs/Subject';
22 import { NbThemeService } from '@nebular/theme';
23 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
25 import { ConfigService, IConfig } from '../../@core-xds/services/config.service';
26 import { SupervisionService } from '../../@core-xds/services/supervision.service';
27 import { AlertService } from '../../@core-xds/services/alert.service';
29 export interface GrafanaDashboard {
33 safeUrl?: SafeResourceUrl;
36 export interface GrafanaPanel {
40 safeUrl?: SafeResourceUrl;
44 selector: 'xds-supervision',
45 styleUrls: ['./supervision.component.scss'],
46 templateUrl: './supervision.component.html',
49 export class SupervisionComponent implements OnInit {
51 /* TODO bind tm_* and refresh in UI */
52 @Input() theme = 'light';
53 @Input() tm_from = 'now-60s';
54 @Input() tm_to = 'now';
55 @Input() refresh = '5s';
56 @Input() scroll_factor = 10000;
57 @Input() zoom_factor = 100000;
59 displayMode = 'dashboard';
61 private dashboards: Map<string, GrafanaDashboard> = new Map<string, GrafanaDashboard>([
62 ['xds_supervisor', { name: 'AGL XDS Supervisor', shortname: 'agl-xds-supervisor' }],
65 private panels: Map<string, GrafanaPanel> = new Map<string, GrafanaPanel>([
66 ['table', { name: 'Supervisor traces table', index: '2' }],
67 ['evt_data_bytes', { name: 'Requests & Events per second', index: '5' }],
68 ['req_evts_per_sec', { name: 'Events Data bytes', index: '12' }],
72 private supervisionSvr: SupervisionService,
73 private alert: AlertService,
74 private themeService: NbThemeService,
75 private sanitizer: DomSanitizer,
76 private configSvr: ConfigService,
80 Config: IConfig = <IConfig>{};
83 this.configSvr.Conf$.subscribe(cfg => this.Config = cfg);
85 this._initDashboard();
88 this.themeService.onThemeChange().subscribe(tm => {
89 this.theme = (tm.name === 'cosmic') ? 'dark' : 'light';
94 getDashboard(name: string): SafeResourceUrl {
95 return this.dashboards.get(name).safeUrl;
98 getPanel(name: string): SafeResourceUrl {
99 return this.panels.get(name).safeUrl;
102 displayModeChange() {
103 if (this.displayMode === 'dashboard') {
104 this.displayMode = 'panels';
106 this.displayMode = 'dashboard';
111 this._initDashboard();
115 timeChange(val: number) {
116 /* TODO: convert tm_from string to number
117 this.tm_from += val * this.scroll_factor;
118 this.tm_to += val * this.scroll_factor;
124 /* TODO: convert tm_from string to number
125 this.tm_from -= this.zoom_factor;
126 this.tm_to += this.zoom_factor;
131 private _initDashboard() {
132 // http://localhost:3000/d/Lbpwc6Iiz/agl-xds-supervisor?from=now-40s&to=now&refresh=5s
133 this.dashboards.forEach(dd => {
134 dd.url = this._buildDashboardUrl(dd.shortname, this.tm_from, this.tm_to, this.refresh, this.theme);
135 dd.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(dd.url);
138 private _initPanels() {
139 this.panels.forEach(gg => {
140 gg.url = this._buildPanelUrl(gg.index, this.tm_from, this.tm_to, this.refresh, this.theme);
141 gg.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(gg.url);
145 private _buildDashboardUrl(sname, from, to, refresh, theme: string) {
146 // FIXME get sname from config to support several dashboards
147 let url = 'http://localhost:3000/d/Lbpwc6Iiz/' + sname;
148 if (this.Config.grafanaDashboardUrl !== '') {
149 url = this.Config.grafanaDashboardUrl;
152 if (from !== '') { url += '&from=' + from; }
153 if (to !== '') { url += '&to=' + to; }
154 if (theme !== '') { url += '&theme=' + theme; }
155 if (refresh !== '') { url += '&refresh=' + refresh; }
156 url += '&sidemenu=close';
160 private _buildPanelUrl(idx, from, to, refresh, theme: string) {
161 let url = 'http://localhost:3000/d-solo/Lbpwc6Iiz/agl-xds-supervisor';
162 if (this.Config.grafanaDashboardUrl !== '') {
163 url = this.Config.grafanaDashboardUrl;
165 url += '?panelId=' + idx;
167 if (from !== '') { url += '&from=' + from; }
168 if (to !== '') { url += '&to=' + to; }
169 if (theme !== '') { url += '&theme=' + theme; }
170 if (refresh !== '') { url += '&refresh=' + refresh; }
171 url += '&sidemenu=close';