webapp/src/app/pages/supervision/supervision.component.ts

   1 /**
   2 * @license
   3 * Copyright (C) 2017-2018 "IoT.bzh"
   4 * Author Sebastien Douheret <sebastien@iot.bzh>
   5 *
   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
   9 *
  10 *   http://www.apache.org/licenses/LICENSE-2.0
  11 *
  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.
  17 */
  18
  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';
  24
  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';
  28
  29 export interface GrafanaDashboard {
  30   name: string;
  31   shortname: string;
  32   url?: string;
  33   safeUrl?: SafeResourceUrl;
  34 }
  35
  36 export interface GrafanaPanel {
  37   name: string;
  38   index: string;
  39   url?: string;
  40   safeUrl?: SafeResourceUrl;
  41 }
  42
  43 @Component({
  44   selector: 'xds-supervision',
  45   styleUrls: ['./supervision.component.scss'],
  46   templateUrl: './supervision.component.html',
  47 })
  48
  49 export class SupervisionComponent implements OnInit {
  50
  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;
  58
  59   displayMode = 'dashboard';
  60
  61   private dashboards: Map<string, GrafanaDashboard> = new Map<string, GrafanaDashboard>([
  62     ['xds_supervisor', { name: 'AGL XDS Supervisor', shortname: 'agl-xds-supervisor' }],
  63   ]);
  64
  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' }],
  69   ]);
  70
  71   constructor(
  72     private supervisionSvr: SupervisionService,
  73     private alert: AlertService,
  74     private themeService: NbThemeService,
  75     private sanitizer: DomSanitizer,
  76     private configSvr: ConfigService,
  77   ) {
  78   }
  79
  80   Config: IConfig = <IConfig>{};
  81
  82   ngOnInit() {
  83     this.configSvr.Conf$.subscribe(cfg => this.Config = cfg);
  84
  85     this._initDashboard();
  86     this._initPanels();
  87
  88     this.themeService.onThemeChange().subscribe(tm => {
  89       this.theme = (tm.name === 'cosmic') ? 'dark' : 'light';
  90       this.themeUpdate();
  91     });
  92   }
  93
  94   getDashboard(name: string): SafeResourceUrl {
  95     return this.dashboards.get(name).safeUrl;
  96   }
  97
  98   getPanel(name: string): SafeResourceUrl {
  99     return this.panels.get(name).safeUrl;
 100   }
 101
 102   displayModeChange() {
 103     if (this.displayMode === 'dashboard') {
 104       this.displayMode = 'panels';
 105     } else {
 106       this.displayMode = 'dashboard';
 107     }
 108   }
 109
 110   themeUpdate() {
 111     this._initDashboard();
 112     this._initPanels();
 113   }
 114
 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;
 119     this._initPanels();
 120       */
 121   }
 122
 123   zoomOut() {
 124     /* TODO: convert tm_from string to number
 125     this.tm_from -= this.zoom_factor;
 126     this.tm_to += this.zoom_factor;
 127     this._initPanels();
 128     */
 129   }
 130
 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);
 136     });
 137   }
 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);
 142     });
 143   }
 144
 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;
 150     }
 151     url += '?orgId=1';
 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';
 157     return url;
 158   }
 159
 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;
 164     }
 165     url += '?panelId=' + idx;
 166     url += '&orgId=1';
 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';
 172     return url;
 173   }
 174 }