/** * @license * Copyright (C) 2017-2018 "IoT.bzh" * Author Sebastien Douheret * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { Component, OnInit, Input } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; import { NbThemeService } from '@nebular/theme'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { SupervisionService } from '../../@core-xds/services/supervision.service'; import { AlertService } from '../../@core-xds/services/alert.service'; export interface GrafanaDashboard { name: string; shortname: string; url?: string; safeUrl?: SafeResourceUrl; } export interface GrafanaPanel { name: string; index: string; url?: string; safeUrl?: SafeResourceUrl; } @Component({ selector: 'xds-supervision', styleUrls: ['./supervision.component.scss'], templateUrl: './supervision.component.html', }) export class SupervisionComponent implements OnInit { @Input() theme = 'light'; @Input() tm_from = 1528988550450; @Input() tm_to = 1528988842496; @Input() scroll_factor = 10000; @Input() zoom_factor = 100000; displayMode = 'dashboard'; private dashboards: Map = new Map([ ['xds_supervisor', { name: 'AGL XDS Supervisor', shortname: 'agl-xds-supervisor' }], ]); private panels: Map = new Map([ ['table', { name: 'Supervisor traces table', index: '2' }], ['evt_data_bytes', { name: 'Requests & Events per second', index: '5' }], ['req_evts_per_sec', { name: 'Events Data bytes', index: '12' }], ]); constructor( private supervisionSvr: SupervisionService, private alert: AlertService, private themeService: NbThemeService, private sanitizer: DomSanitizer, ) { } ngOnInit() { this._initDashboard(); this._initPanels(); this.themeService.onThemeChange().subscribe(tm => { this.theme = (tm.name === 'cosmic') ? 'dark' : 'light'; this.themeUpdate(); }); } getDashboard(name: string): SafeResourceUrl { return this.dashboards.get(name).safeUrl; } getPanel(name: string): SafeResourceUrl { return this.panels.get(name).safeUrl; } displayModeChange() { if (this.displayMode === 'dashboard') { this.displayMode = 'panels'; } else { this.displayMode = 'dashboard'; } } themeUpdate() { this._initDashboard(); this._initPanels(); } timeChange(val: number) { this.tm_from += val * this.scroll_factor; this.tm_to += val * this.scroll_factor; this._initPanels(); } zoomOut() { this.tm_from -= this.zoom_factor; this.tm_to += this.zoom_factor; this._initPanels(); } private _initDashboard() { this.dashboards.forEach(dd => { dd.url = this._buildDashboardUrl(dd.shortname, this.tm_from, this.tm_to, this.theme); dd.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(dd.url); }); } private _initPanels() { this.panels.forEach(gg => { gg.url = this._buildPanelUrl(gg.index, this.tm_from, this.tm_to, this.theme); gg.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(gg.url); }); } private _buildDashboardUrl(sname: string, from: number, to: number, theme: string) { let url = 'http://localhost:3000/d/Lbpwc6Iiz/' + sname; url += '?orgId=1'; url += '&from=' + from; url += '&to=' + to; url += '&theme=' + theme; return url; } private _buildPanelUrl(idx: string, from: number, to: number, theme: string) { let url = 'http://localhost:3000/d-solo/Lbpwc6Iiz/agl-xds-supervisor'; url += '?panelId=' + idx; url += '&orgId=1'; url += '&from=' + from; url += '&to=' + to; url += '&theme=' + theme; url += '&sidemenu=close'; return url; } }