ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html

   1 <div *ngIf="contentData">
   2   <ng-container *ngTemplateOutlet="logFiltersTpl"></ng-container>
   3
   4   <ul ngbNav
   5       #nav="ngbNav"
   6       class="nav-tabs"
   7       cdStatefulTab="logs">
   8     <li ngbNavItem="cluster-logs">
   9       <a ngbNavLink
  10          i18n>Cluster Logs</a>
  11       <ng-template ngbNavContent>
  12         <div class="card bg-light mb-3"
  13              *ngIf="clog">
  14           <div class="btn-group"
  15                role="group"
  16                *ngIf="clog.length">
  17             <cd-download-button [objectItem]="clog"
  18                                 [textItem]="clogText"
  19                                 fileName="cluster_log">
  20             </cd-download-button>
  21             <cd-copy-2-clipboard-button
  22                     [source]="clogText"
  23                     [byId]="false">
  24             </cd-copy-2-clipboard-button>
  25           </div>
  26           <div class="card-body">
  27             <p *ngFor="let line of clog">
  28               <span class="timestamp">{{ line.stamp | cdDate }}</span>
  29               <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
  30               <span class="message"
  31                     [innerHTML]="line.message | searchHighlight: search"></span>
  32             </p>
  33
  34             <ng-container *ngIf="clog.length != 0 else noEntriesTpl"></ng-container>
  35           </div>
  36         </div>
  37       </ng-template>
  38     </li>
  39     <li ngbNavItem="audit-logs">
  40       <a ngbNavLink
  41          i18n>Audit Logs</a>
  42       <ng-template ngbNavContent>
  43         <div class="card bg-light mb-3"
  44              *ngIf="audit_log">
  45           <div class="btn-group"
  46                role="group"
  47                *ngIf="audit_log.length">
  48             <cd-download-button [objectItem]="audit_log"
  49                                 [textItem]="auditLogText"
  50                                 fileName="audit_log">
  51             </cd-download-button>
  52             <cd-copy-2-clipboard-button
  53                     [source]="auditLogText"
  54                     [byId]="false">
  55             </cd-copy-2-clipboard-button>
  56           </div>
  57           <div class="card-body">
  58             <p *ngFor="let line of audit_log">
  59               <span class="timestamp">{{ line.stamp | cdDate }}</span>
  60               <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
  61               <span class="message"
  62                     [innerHTML]="line.message | searchHighlight: search"></span>
  63             </p>
  64
  65             <ng-container *ngIf="audit_log.length != 0 else noEntriesTpl"></ng-container>
  66           </div>
  67         </div>
  68       </ng-template>
  69     </li>
  70     <li ngbNavItem="daemon-logs">
  71       <a ngbNavLink
  72          i18n>Daemon Logs</a>
  73       <ng-template ngbNavContent>
  74         <ng-container *ngIf="lokiServiceStatus$ | async as lokiServiceStatus; else daemonLogsTpl">
  75           <div *ngIf="promtailServiceStatus$ | async as promtailServiceStatus; else daemonLogsTpl">
  76             <cd-grafana [grafanaPath]="'explore?'"
  77                         [type]="'logs'"
  78                         uid="CrAHE0iZz"
  79                         grafanaStyle="two">
  80             </cd-grafana>
  81           </div>
  82         </ng-container>
  83       </ng-template>
  84     </li>
  85   </ul>
  86
  87   <div [ngbNavOutlet]="nav"></div>
  88 </div>
  89
  90 <ng-template #logFiltersTpl>
  91   <div class="form-inline">
  92     <div class="form-group">
  93       <label for="logs-priority"
  94              i18n>Priority:</label>
  95       <select id="logs-priority"
  96               class="form-control"
  97               [(ngModel)]="priority"
  98               (ngModelChange)="filterLogs()">
  99         <option *ngFor="let prio of priorities"
 100                 [value]="prio.value">{{ prio.name }}</option>
 101       </select>
 102     </div>
 103
 104     <div class="form-group">
 105       <label for="logs-keyword"
 106              i18n>Keyword:</label>
 107       <div class="input-group">
 108         <div class="input-group-prepend">
 109           <span class="input-group-text">
 110             <i [ngClass]="[icons.search]"></i>
 111           </span>
 112         </div>
 113
 114         <input class="form-control"
 115                id="logs-keyword"
 116                type="text"
 117                [(ngModel)]="search"
 118                (keyup)="filterLogs()">
 119
 120         <div class="input-group-append">
 121           <button type="button"
 122                   class="btn btn-light"
 123                   (click)="clearSearchKey()">
 124             <i class="icon-prepend {{ icons.destroy }}"></i>
 125           </button>
 126         </div>
 127       </div>
 128     </div>
 129
 130     <div class="form-group">
 131       <label for="logs-date"
 132              i18n>Date:</label>
 133       <div class="input-group">
 134         <input class="form-control"
 135                id="logs-date"
 136                placeholder="YYYY-MM-DD"
 137                ngbDatepicker
 138                [maxDate]="maxDate"
 139                #d="ngbDatepicker"
 140                (click)="d.open()"
 141                [(ngModel)]="selectedDate"
 142                (ngModelChange)="filterLogs()">
 143         <span class="input-group-append">
 144           <button type="button"
 145                   class="btn btn-light"
 146                   (click)="clearDate()">
 147             <i class="icon-prepend {{ icons.destroy }}"></i>
 148           </button>
 149         </span>
 150       </div>
 151     </div>
 152
 153     <div class="form-group">
 154       <label i18n>Time range:</label>
 155       <ngb-timepicker [spinners]="false"
 156                       [(ngModel)]="startTime"
 157                       (ngModelChange)="filterLogs()"></ngb-timepicker>
 158
 159       <span>&nbsp;&mdash;&nbsp;</span>
 160
 161       <ngb-timepicker [spinners]="false"
 162                       [(ngModel)]="endTime"
 163                       (ngModelChange)="filterLogs()"></ngb-timepicker>
 164     </div>
 165   </div>
 166 </ng-template>
 167
 168 <ng-template #noEntriesTpl>
 169   <span i18n>No log entries found. Please try to select different filter options.</span>
 170   <span>&nbsp;</span>
 171   <a href="#"
 172      (click)="resetFilter()"
 173      i18n>Reset filter.</a>
 174 </ng-template>
 175
 176 <ng-template #daemonLogsTpl>
 177   <cd-alert-panel type="info"
 178                   title="Loki/Promtail service not running"
 179                   i18n-title>
 180   <ng-container i18n>Please start the loki and promtail service to see these logs.</ng-container>
 181   </cd-alert-panel>
 182 </ng-template>