ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/grafana/grafana.component.ts

   1 import { Component, Input, OnChanges, OnInit } from '@angular/core';
   2 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
   3
   4 import { SettingsService } from '~/app/shared/api/settings.service';
   5 import { Icons } from '~/app/shared/enum/icons.enum';
   6
   7 @Component({
   8   selector: 'cd-grafana',
   9   templateUrl: './grafana.component.html',
  10   styleUrls: ['./grafana.component.scss']
  11 })
  12 export class GrafanaComponent implements OnInit, OnChanges {
  13   grafanaSrc: SafeUrl;
  14   url: string;
  15   protocol: string;
  16   host: string;
  17   port: number;
  18   baseUrl: any;
  19   panelStyle: any;
  20   grafanaExist = false;
  21   mode = '&kiosk';
  22   datasource = 'Dashboard1';
  23   loading = true;
  24   styles: Record<string, string> = {};
  25   dashboardExist = true;
  26   time: string;
  27   grafanaTimes: any;
  28   icons = Icons;
  29   readonly DEFAULT_TIME: string = 'from=now-1h&to=now';
  30
  31   @Input()
  32   grafanaPath: string;
  33   @Input()
  34   grafanaStyle: string;
  35   @Input()
  36   uid: string;
  37
  38   constructor(private sanitizer: DomSanitizer, private settingsService: SettingsService) {
  39     this.grafanaTimes = [
  40       {
  41         name: $localize`Last 5 minutes`,
  42         value: 'from=now-5m&to=now'
  43       },
  44       {
  45         name: $localize`Last 15 minutes`,
  46         value: 'from=now-15m&to=now'
  47       },
  48       {
  49         name: $localize`Last 30 minutes`,
  50         value: 'from=now-30m&to=now'
  51       },
  52       {
  53         name: $localize`Last 1 hour (Default)`,
  54         value: 'from=now-1h&to=now'
  55       },
  56       {
  57         name: $localize`Last 3 hours`,
  58         value: 'from=now-3h&to=now'
  59       },
  60       {
  61         name: $localize`Last 6 hours`,
  62         value: 'from=now-6h&to=now'
  63       },
  64       {
  65         name: $localize`Last 12 hours`,
  66         value: 'from=now-12h&to=now'
  67       },
  68       {
  69         name: $localize`Last 24 hours`,
  70         value: 'from=now-24h&to=now'
  71       },
  72       {
  73         name: $localize`Yesterday`,
  74         value: 'from=now-1d%2Fd&to=now-1d%2Fd'
  75       },
  76       {
  77         name: $localize`Today so far`,
  78         value: 'from=now%2Fd&to=now'
  79       },
  80       {
  81         name: $localize`Day before yesterday`,
  82         value: 'from=now-2d%2Fd&to=now-2d%2Fd'
  83       },
  84       {
  85         name: $localize`Last 2 days`,
  86         value: 'from=now-2d&to=now'
  87       },
  88       {
  89         name: $localize`This day last week`,
  90         value: 'from=now-7d%2Fd&to=now-7d%2Fd'
  91       },
  92       {
  93         name: $localize`Previous week`,
  94         value: 'from=now-1w%2Fw&to=now-1w%2Fw'
  95       },
  96       {
  97         name: $localize`This week so far`,
  98         value: 'from=now%2Fw&to=now'
  99       },
 100       {
 101         name: $localize`Last 7 days`,
 102         value: 'from=now-7d&to=now'
 103       },
 104       {
 105         name: $localize`Previous month`,
 106         value: 'from=now-1M%2FM&to=now-1M%2FM'
 107       },
 108       {
 109         name: $localize`This month so far`,
 110         value: 'from=now%2FM&to=now'
 111       },
 112       {
 113         name: $localize`Last 30 days`,
 114         value: 'from=now-30d&to=now'
 115       },
 116       {
 117         name: $localize`Last 90 days`,
 118         value: 'from=now-90d&to=now'
 119       },
 120       {
 121         name: $localize`Last 6 months`,
 122         value: 'from=now-6M&to=now'
 123       },
 124       {
 125         name: $localize`Last 1 year`,
 126         value: 'from=now-1y&to=now'
 127       },
 128       {
 129         name: $localize`Previous year`,
 130         value: 'from=now-1y%2Fy&to=now-1y%2Fy'
 131       },
 132       {
 133         name: $localize`This year so far`,
 134         value: 'from=now%2Fy&to=now'
 135       },
 136       {
 137         name: $localize`Last 2 years`,
 138         value: 'from=now-2y&to=now'
 139       },
 140       {
 141         name: $localize`Last 5 years`,
 142         value: 'from=now-5y&to=now'
 143       }
 144     ];
 145   }
 146
 147   ngOnInit() {
 148     this.time = this.DEFAULT_TIME;
 149     this.styles = {
 150       one: 'grafana_one',
 151       two: 'grafana_two',
 152       three: 'grafana_three',
 153       four: 'grafana_four'
 154     };
 155
 156     this.settingsService.ifSettingConfigured('api/grafana/url', (url) => {
 157       this.grafanaExist = true;
 158       this.loading = false;
 159       this.baseUrl = url + '/d/';
 160       this.getFrame();
 161     });
 162     this.panelStyle = this.styles[this.grafanaStyle];
 163   }
 164
 165   getFrame() {
 166     this.settingsService
 167       .validateGrafanaDashboardUrl(this.uid)
 168       .subscribe((data: any) => (this.dashboardExist = data === 200));
 169     this.url =
 170       this.baseUrl +
 171       this.uid +
 172       '/' +
 173       this.grafanaPath +
 174       '&refresh=2s' +
 175       `&var-datasource=${this.datasource}` +
 176       this.mode +
 177       '&' +
 178       this.time;
 179     this.grafanaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
 180   }
 181
 182   onTimepickerChange() {
 183     if (this.grafanaExist) {
 184       this.getFrame();
 185     }
 186   }
 187
 188   reset() {
 189     this.time = this.DEFAULT_TIME;
 190     if (this.grafanaExist) {
 191       this.getFrame();
 192     }
 193   }
 194
 195   ngOnChanges() {
 196     if (this.grafanaExist) {
 197       this.getFrame();
 198     }
 199   }
 200 }