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