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