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

   1 <!-- Embed dashboard -->
   2 <cd-loading-panel *ngIf="loading && grafanaExist"
   3                   i18n>Loading panel data...</cd-loading-panel>
   4
   5 <cd-alert-panel type="info"
   6                 *ngIf="!grafanaExist"
   7                 i18n>Please consult the <cd-doc section="grafana"></cd-doc> on
   8   how to configure and enable the monitoring functionality.</cd-alert-panel>
   9
  10 <cd-alert-panel type="info"
  11                 *ngIf="!dashboardExist"
  12                 i18n>Grafana Dashboard doesn't exist. Please refer to
  13   <cd-doc section="grafana"></cd-doc> on how to add dashboards to Grafana.</cd-alert-panel>
  14
  15 <ng-container *ngIf="grafanaExist && dashboardExist">
  16   <div class="row mb-3">
  17     <div class="col-lg-5 d-flex">
  18       <div class="col-md-3 timepicker">
  19         <label for="timepicker"
  20                class="mt-2"
  21                i18n>Grafana Time Picker</label>
  22       </div>
  23       <div class="col-sm-4">
  24         <select id="timepicker"
  25                 name="timepicker"
  26                 class="form-select"
  27                 [(ngModel)]="time"
  28                 (ngModelChange)="onTimepickerChange($event)">
  29           <option *ngFor="let key of grafanaTimes"
  30                   [ngValue]="key.value">{{ key.name }}
  31           </option>
  32         </select>
  33       </div>
  34       <div class="col-sm-1">
  35         <button class="btn btn-light ms-3"
  36                 i18n-title
  37                 title="Reset Settings"
  38                 (click)="reset()">
  39           <i [ngClass]="[icons.undo]"></i>
  40         </button>
  41       </div>
  42       <div class="col-sm-1">
  43         <button class="btn btn-light ms-3"
  44                 i18n-title
  45                 title="Show hidden information"
  46                 (click)="showMessage = !showMessage">
  47           <i [ngClass]="[icons.infoCircle, icons.large]"></i>
  48         </button>
  49       </div>
  50     </div>
  51   </div>
  52
  53   <div class="row">
  54     <div class="col my-2"
  55          *ngIf="showMessage">
  56       <cd-alert-panel type="info"
  57                       class="mb-3"
  58                       *ngIf="showMessage"
  59                       dismissible="true"
  60                       (dismissed)="showMessage = false"
  61                       i18n>If no embedded Grafana Dashboard appeared below, please follow <a [href]="grafanaSrc"
  62                       target="_blank"
  63                       noopener
  64                       noreferrer>this link </a> to check if Grafana is reachable and there are no HTTPS certificate issues. You may need to reload this page after accepting any Browser certificate exceptions</cd-alert-panel>
  65     </div>
  66   </div>
  67
  68   <div class="row">
  69     <div class="col">
  70       <div class="grafana-container">
  71         <iframe #iframe
  72                 id="iframe"
  73                 [src]="grafanaSrc"
  74                 class="grafana"
  75                 [ngClass]="panelStyle"
  76                 frameborder="0"
  77                 scrolling="no"
  78                 [title]="title"
  79                 i18n-title>
  80         </iframe>
  81       </div>
  82     </div>
  83   </div>
  84 </ng-container>