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   </ul>
  71
  72   <div [ngbNavOutlet]="nav"></div>
  73 </div>
  74
  75 <ng-template #logFiltersTpl>
  76   <div class="form-inline">
  77     <div class="form-group">
  78       <label for="logs-priority"
  79              i18n>Priority:</label>
  80       <select id="logs-priority"
  81               class="form-control"
  82               [(ngModel)]="priority"
  83               (ngModelChange)="filterLogs()">
  84         <option *ngFor="let prio of priorities"
  85                 [value]="prio.value">{{ prio.name }}</option>
  86       </select>
  87     </div>
  88
  89     <div class="form-group">
  90       <label for="logs-keyword"
  91              i18n>Keyword:</label>
  92       <div class="input-group">
  93         <div class="input-group-prepend">
  94           <span class="input-group-text">
  95             <i [ngClass]="[icons.search]"></i>
  96           </span>
  97         </div>
  98
  99         <input class="form-control"
 100                id="logs-keyword"
 101                type="text"
 102                [(ngModel)]="search"
 103                (keyup)="filterLogs()">
 104
 105         <div class="input-group-append">
 106           <button type="button"
 107                   class="btn btn-light"
 108                   (click)="clearSearchKey()">
 109             <i class="icon-prepend {{ icons.destroy }}"></i>
 110           </button>
 111         </div>
 112       </div>
 113     </div>
 114
 115     <div class="form-group">
 116       <label for="logs-date"
 117              i18n>Date:</label>
 118       <div class="input-group">
 119         <input class="form-control"
 120                id="logs-date"
 121                placeholder="YYYY-MM-DD"
 122                ngbDatepicker
 123                [maxDate]="maxDate"
 124                #d="ngbDatepicker"
 125                (click)="d.open()"
 126                [(ngModel)]="selectedDate"
 127                (ngModelChange)="filterLogs()">
 128         <span class="input-group-append">
 129           <button type="button"
 130                   class="btn btn-light"
 131                   (click)="clearDate()">
 132             <i class="icon-prepend {{ icons.destroy }}"></i>
 133           </button>
 134         </span>
 135       </div>
 136     </div>
 137
 138     <div class="form-group">
 139       <label i18n>Time range:</label>
 140       <ngb-timepicker [spinners]="false"
 141                       [(ngModel)]="startTime"
 142                       (ngModelChange)="filterLogs()"></ngb-timepicker>
 143
 144       <span>&nbsp;&mdash;&nbsp;</span>
 145
 146       <ngb-timepicker [spinners]="false"
 147                       [(ngModel)]="endTime"
 148                       (ngModelChange)="filterLogs()"></ngb-timepicker>
 149     </div>
 150   </div>
 151 </ng-template>
 152
 153 <ng-template #noEntriesTpl>
 154   <span i18n>No log entries found. Please try to select different filter options.</span>
 155   <span>&nbsp;</span>
 156   <a href="#"
 157      (click)="resetFilter()"
 158      i18n>Reset filter.</a>
 159 </ng-template>