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">
  17     <div class="col">
  18       <div class="form-inline timepicker">
  19         <label for="timepicker"
  20                class="ml-1 my-1"
  21                i18n>Grafana Time Picker</label>
  22
  23         <select id="timepicker"
  24                 name="timepicker"
  25                 class="custom-select my-1 mx-3"
  26                 [(ngModel)]="time"
  27                 (ngModelChange)="onTimepickerChange($event)">
  28           <option *ngFor="let key of grafanaTimes"
  29                   [ngValue]="key.value">{{ key.name }}
  30           </option>
  31         </select>
  32
  33         <button class="btn btn-light my-1"
  34                 i18n-title
  35                 title="Reset Settings"
  36                 (click)="reset()">
  37           <i [ngClass]="[icons.undo]"></i>
  38         </button>
  39         <button class="btn btn-light my-1 ml-3"
  40                 i18n-title
  41                 title="Show hidden information"
  42                 (click)="showMessage = !showMessage">
  43           <i [ngClass]="[icons.infoCircle, icons.large]"></i>
  44         </button>
  45       </div>
  46     </div>
  47   </div>
  48
  49   <div class="row">
  50     <div class="col my-3"
  51          *ngIf="showMessage">
  52       <cd-alert-panel type="info"
  53                       class="mb-3"
  54                       *ngIf="showMessage"
  55                       dismissible="true"
  56                       (dismissed)="showMessage = false"
  57                       i18n>If no embedded Grafana Dashboard appeared below, please follow <a [href]="grafanaSrc"
  58                       target="_blank"
  59                       noopener
  60                       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>
  61     </div>
  62   </div>
  63
  64   <div class="row">
  65     <div class="col">
  66       <div class="grafana-container">
  67         <iframe #iframe
  68                 id="iframe"
  69                 [src]="grafanaSrc"
  70                 class="grafana"
  71                 [ngClass]="panelStyle"
  72                 frameborder="0"
  73                 scrolling="no">
  74         </iframe>
  75       </div>
  76     </div>
  77   </div>
  78 </ng-container>