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 { SupervisionService } from '../../@core-xds/services/supervision.service';
26 import { AlertService } from '../../@core-xds/services/alert.service';
28 export interface GrafanaDashboard {
32 safeUrl?: SafeResourceUrl;
35 export interface GrafanaPanel {
39 safeUrl?: SafeResourceUrl;
43 selector: 'xds-supervision',
44 styleUrls: ['./supervision.component.scss'],
45 templateUrl: './supervision.component.html',
48 export class SupervisionComponent implements OnInit {
50 @Input() theme = 'light';
51 @Input() tm_from = 1528988550450;
52 @Input() tm_to = 1528988842496;
53 @Input() scroll_factor = 10000;
54 @Input() zoom_factor = 100000;
56 displayMode = 'dashboard';
58 private dashboards: Map<string, GrafanaDashboard> = new Map<string, GrafanaDashboard>([
59 ['xds_supervisor', { name: 'AGL XDS Supervisor', shortname: 'agl-xds-supervisor' }],
62 private panels: Map<string, GrafanaPanel> = new Map<string, GrafanaPanel>([
63 ['table', { name: 'Supervisor traces table', index: '2' }],
64 ['evt_data_bytes', { name: 'Requests & Events per second', index: '5' }],
65 ['req_evts_per_sec', { name: 'Events Data bytes', index: '12' }],
69 private supervisionSvr: SupervisionService,
70 private alert: AlertService,
71 private themeService: NbThemeService,
72 private sanitizer: DomSanitizer,
77 this._initDashboard();
80 this.themeService.onThemeChange().subscribe(tm => {
81 this.theme = (tm.name === 'cosmic') ? 'dark' : 'light';
86 getDashboard(name: string): SafeResourceUrl {
87 return this.dashboards.get(name).safeUrl;
90 getPanel(name: string): SafeResourceUrl {
91 return this.panels.get(name).safeUrl;
95 if (this.displayMode === 'dashboard') {
96 this.displayMode = 'panels';
98 this.displayMode = 'dashboard';
103 this._initDashboard();
107 timeChange(val: number) {
108 this.tm_from += val * this.scroll_factor;
109 this.tm_to += val * this.scroll_factor;
114 this.tm_from -= this.zoom_factor;
115 this.tm_to += this.zoom_factor;
120 private _initDashboard() {
121 this.dashboards.forEach(dd => {
122 dd.url = this._buildDashboardUrl(dd.shortname, this.tm_from, this.tm_to, this.theme);
123 dd.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(dd.url);
126 private _initPanels() {
127 this.panels.forEach(gg => {
128 gg.url = this._buildPanelUrl(gg.index, this.tm_from, this.tm_to, this.theme);
129 gg.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(gg.url);
133 private _buildDashboardUrl(sname: string, from: number, to: number, theme: string) {
134 let url = 'http://localhost:3000/d/Lbpwc6Iiz/' + sname;
136 url += '&from=' + from;
138 url += '&theme=' + theme;
142 private _buildPanelUrl(idx: string, from: number, to: number, theme: string) {
143 let url = 'http://localhost:3000/d-solo/Lbpwc6Iiz/agl-xds-supervisor';
144 url += '?panelId=' + idx;
146 url += '&from=' + from;
148 url += '&theme=' + theme;
149 url += '&sidemenu=close';