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 { SupervisionService } from '../../@core-xds/services/supervision.service';
  26 import { AlertService } from '../../@core-xds/services/alert.service';
  27
  28 export interface GrafanaDashboard {
  29   name: string;
  30   shortname: string;
  31   url?: string;
  32   safeUrl?: SafeResourceUrl;
  33 }
  34
  35 export interface GrafanaPanel {
  36   name: string;
  37   index: string;
  38   url?: string;
  39   safeUrl?: SafeResourceUrl;
  40 }
  41
  42 @Component({
  43   selector: 'xds-supervision',
  44   styleUrls: ['./supervision.component.scss'],
  45   templateUrl: './supervision.component.html',
  46 })
  47
  48 export class SupervisionComponent implements OnInit {
  49
  50   @Input() theme = 'light';
  51   @Input() tm_from = 1528988550450;
  52   @Input() tm_to = 1528988842496;
  53   @Input() scroll_factor = 10000;
  54   @Input() zoom_factor = 100000;
  55
  56   displayMode = 'dashboard';
  57
  58   private dashboards: Map<string, GrafanaDashboard> = new Map<string, GrafanaDashboard>([
  59     ['xds_supervisor', { name: 'AGL XDS Supervisor', shortname: 'agl-xds-supervisor' }],
  60   ]);
  61
  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' }],
  66   ]);
  67
  68   constructor(
  69     private supervisionSvr: SupervisionService,
  70     private alert: AlertService,
  71     private themeService: NbThemeService,
  72     private sanitizer: DomSanitizer,
  73   ) {
  74   }
  75
  76   ngOnInit() {
  77     this._initDashboard();
  78     this._initPanels();
  79
  80     this.themeService.onThemeChange().subscribe(tm => {
  81       this.theme = (tm.name === 'cosmic') ? 'dark' : 'light';
  82       this.themeUpdate();
  83     });
  84   }
  85
  86   getDashboard(name: string): SafeResourceUrl {
  87     return this.dashboards.get(name).safeUrl;
  88   }
  89
  90   getPanel(name: string): SafeResourceUrl {
  91     return this.panels.get(name).safeUrl;
  92   }
  93
  94   displayModeChange() {
  95     if (this.displayMode === 'dashboard') {
  96       this.displayMode = 'panels';
  97     } else {
  98       this.displayMode = 'dashboard';
  99     }
 100   }
 101
 102   themeUpdate() {
 103     this._initDashboard();
 104     this._initPanels();
 105   }
 106
 107   timeChange(val: number) {
 108     this.tm_from += val * this.scroll_factor;
 109     this.tm_to += val * this.scroll_factor;
 110     this._initPanels();
 111   }
 112
 113   zoomOut() {
 114     this.tm_from -= this.zoom_factor;
 115     this.tm_to += this.zoom_factor;
 116     this._initPanels();
 117   }
 118
 119
 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);
 124     });
 125   }
 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);
 130     });
 131   }
 132
 133   private _buildDashboardUrl(sname: string, from: number, to: number, theme: string) {
 134     let url = 'http://localhost:3000/d/Lbpwc6Iiz/' + sname;
 135     url += '?orgId=1';
 136     url += '&from=' + from;
 137     url += '&to=' + to;
 138     url += '&theme=' + theme;
 139     return url;
 140   }
 141
 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;
 145     url += '&orgId=1';
 146     url += '&from=' + from;
 147     url += '&to=' + to;
 148     url += '&theme=' + theme;
 149     url += '&sidemenu=close';
 150     return url;
 151   }
 152 }