1 files changed, 172 insertions, 0 deletions
diff --git a/webapp/src/app/pages/monitoring/monitoring.component.ts b/webapp/src/app/pages/monitoring/monitoring.component.ts
new file mode 100644
index 0000000..ccbe365
--- /dev/null
+++ b/webapp/src/app/pages/monitoring/monitoring.component.ts
@@ -0,0 +1,172 @@
+/**
+* @license
+* Copyright (C) 2017-2019 "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 { NbThemeService } from '@nebular/theme';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+import { ConfigService, IConfig } from '../../@core-xds/services/config.service';
+import { MonitoringService } from '../../@core-xds/services/monitoring.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-monitoring',
+  styleUrls: ['./monitoring.component.scss'],
+  templateUrl: './monitoring.component.html',
+})
+
+export class MonitoringComponent implements OnInit {
+
+  /* TODO bind tm_* and refresh in UI */
+  @Input() theme = 'light';
+  @Input() tm_from = 'now-60s';
+  @Input() tm_to = 'now';
+  @Input() refresh = '5s';
+  @Input() scroll_factor = 10000;
+  @Input() zoom_factor = 100000;
+
+  displayMode = 'dashboard';
+
+  private dashboards: Map<string, GrafanaDashboard> = new Map<string, GrafanaDashboard>([
+    ['xds_monitoring', { name: 'AGL XDS Monitoring', shortname: 'agl-xds-monitoring' }],
+  ]);
+
+  private panels: Map<string, GrafanaPanel> = new Map<string, GrafanaPanel>([
+    ['table', { name: 'Monitoring 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 monitoringSvr: MonitoringService,
+    private alert: AlertService,
+    private themeService: NbThemeService,
+    private sanitizer: DomSanitizer,
+    private configSvr: ConfigService,
+  ) {
+  }
+
+  Config: IConfig = <IConfig>{};
+
+  ngOnInit() {
+    this.configSvr.Conf$.subscribe(cfg => this.Config = cfg);
+
+    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) {
+    /* TODO: convert tm_from string to number
+    this.tm_from += val * this.scroll_factor;
+    this.tm_to += val * this.scroll_factor;
+    this._initPanels();
+      */
+  }
+
+  zoomOut() {
+    /* TODO: convert tm_from string to number
+    this.tm_from -= this.zoom_factor;
+    this.tm_to += this.zoom_factor;
+    this._initPanels();
+    */
+  }
+
+  private _initDashboard() {
+    // http://localhost:3000/d/Lbpwc6Iiz/agl-xds-monitoring?from=now-40s&to=now&refresh=5s
+    this.dashboards.forEach(dd => {
+      dd.url = this._buildDashboardUrl(dd.shortname, this.tm_from, this.tm_to, this.refresh, 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.refresh, this.theme);
+      gg.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(gg.url);
+    });
+  }
+
+  private _buildDashboardUrl(sname, from, to, refresh, theme: string) {
+    // FIXME get sname from config to support several dashboards
+    let url = 'http://localhost:3000/d/Lbpwc6Iiz/' + sname;
+    if (this.Config.grafanaDashboardUrl !== '') {
+      url = this.Config.grafanaDashboardUrl;
+    }
+    url += '?orgId=1';
+    if (from !== '') { url += '&from=' + from; }
+    if (to !== '') { url += '&to=' + to; }
+    if (theme !== '') { url += '&theme=' + theme; }
+    if (refresh !== '') { url += '&refresh=' + refresh; }
+    url += '&sidemenu=close';
+    return url;
+  }
+
+  private _buildPanelUrl(idx, from, to, refresh, theme: string) {
+    let url = 'http://localhost:3000/d-solo/Lbpwc6Iiz/agl-xds-monitoring';
+    if (this.Config.grafanaDashboardUrl !== '') {
+      url = this.Config.grafanaDashboardUrl;
+    }
+    url += '?panelId=' + idx;
+    url += '&orgId=1';
+    if (from !== '') { url += '&from=' + from; }
+    if (to !== '') { url += '&to=' + to; }
+    if (theme !== '') { url += '&theme=' + theme; }
+    if (refresh !== '') { url += '&refresh=' + refresh; }
+    url += '&sidemenu=close';
+    return url;
+  }
+}