Added Supervision/Monitoring support

[src/xds/xds-agent.git] / webapp / src / app / pages / supervision / supervision.component.ts

diff --git a/webapp/src/app/pages/supervision/supervision.component.ts b/webapp/src/app/pages/supervision/supervision.component.ts
new file mode 100644 (file)
index 0000000..219f28f
--- /dev/null
+++ b/webapp/src/app/pages/supervision/supervision.component.ts
@@ -0,0 +1,152 @@
+/**
+* @license
+* Copyright (C) 2017-2018 "IoT.bzh"
+* Author Sebastien Douheret <sebastien@iot.bzh>
+*
+* 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<string, GrafanaDashboard> = new Map<string, GrafanaDashboard>([
+    ['xds_supervisor', { name: 'AGL XDS Supervisor', shortname: 'agl-xds-supervisor' }],
+  ]);
+
+  private panels: Map<string, GrafanaPanel> = new Map<string, GrafanaPanel>([
+    ['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;
+  }
+}