1 files changed, 159 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
new file mode 100644
index 000000000..dd55a678f
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -0,0 +1,159 @@
+<div *ngIf="contentData">
+  <ng-container *ngTemplateOutlet="logFiltersTpl"></ng-container>
+
+  <ul ngbNav
+      #nav="ngbNav"
+      class="nav-tabs"
+      cdStatefulTab="logs">
+    <li ngbNavItem="cluster-logs">
+      <a ngbNavLink
+         i18n>Cluster Logs</a>
+      <ng-template ngbNavContent>
+        <div class="card bg-light mb-3"
+             *ngIf="clog">
+          <div class="btn-group"
+               role="group"
+               *ngIf="clog.length">
+            <cd-download-button [objectItem]="clog"
+                                [textItem]="clogText"
+                                fileName="cluster_log">
+            </cd-download-button>
+            <cd-copy-2-clipboard-button
+                    [source]="clogText"
+                    [byId]="false">
+            </cd-copy-2-clipboard-button>
+          </div>
+          <div class="card-body">
+            <p *ngFor="let line of clog">
+              <span class="timestamp">{{ line.stamp | cdDate }}</span>
+              <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
+              <span class="message"
+                    [innerHTML]="line.message | searchHighlight: search"></span>
+            </p>
+
+            <ng-container *ngIf="clog.length != 0 else noEntriesTpl"></ng-container>
+          </div>
+        </div>
+      </ng-template>
+    </li>
+    <li ngbNavItem="audit-logs">
+      <a ngbNavLink
+         i18n>Audit Logs</a>
+      <ng-template ngbNavContent>
+        <div class="card bg-light mb-3"
+             *ngIf="audit_log">
+          <div class="btn-group"
+               role="group"
+               *ngIf="audit_log.length">
+            <cd-download-button [objectItem]="audit_log"
+                                [textItem]="auditLogText"
+                                fileName="audit_log">
+            </cd-download-button>
+            <cd-copy-2-clipboard-button
+                    [source]="auditLogText"
+                    [byId]="false">
+            </cd-copy-2-clipboard-button>
+          </div>
+          <div class="card-body">
+            <p *ngFor="let line of audit_log">
+              <span class="timestamp">{{ line.stamp | cdDate }}</span>
+              <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
+              <span class="message"
+                    [innerHTML]="line.message | searchHighlight: search"></span>
+            </p>
+
+            <ng-container *ngIf="audit_log.length != 0 else noEntriesTpl"></ng-container>
+          </div>
+        </div>
+      </ng-template>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="nav"></div>
+</div>
+
+<ng-template #logFiltersTpl>
+  <div class="form-inline">
+    <div class="form-group">
+      <label for="logs-priority"
+             i18n>Priority:</label>
+      <select id="logs-priority"
+              class="form-control"
+              [(ngModel)]="priority"
+              (ngModelChange)="filterLogs()">
+        <option *ngFor="let prio of priorities"
+                [value]="prio.value">{{ prio.name }}</option>
+      </select>
+    </div>
+
+    <div class="form-group">
+      <label for="logs-keyword"
+             i18n>Keyword:</label>
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text">
+            <i [ngClass]="[icons.search]"></i>
+          </span>
+        </div>
+
+        <input class="form-control"
+               id="logs-keyword"
+               type="text"
+               [(ngModel)]="search"
+               (keyup)="filterLogs()">
+
+        <div class="input-group-append">
+          <button type="button"
+                  class="btn btn-light"
+                  (click)="clearSearchKey()">
+            <i class="icon-prepend {{ icons.destroy }}"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="logs-date"
+             i18n>Date:</label>
+      <div class="input-group">
+        <input class="form-control"
+               id="logs-date"
+               placeholder="YYYY-MM-DD"
+               ngbDatepicker
+               [maxDate]="maxDate"
+               #d="ngbDatepicker"
+               (click)="d.open()"
+               [(ngModel)]="selectedDate"
+               (ngModelChange)="filterLogs()">
+        <span class="input-group-append">
+          <button type="button"
+                  class="btn btn-light"
+                  (click)="clearDate()">
+            <i class="icon-prepend {{ icons.destroy }}"></i>
+          </button>
+        </span>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label i18n>Time range:</label>
+      <ngb-timepicker [spinners]="false"
+                      [(ngModel)]="startTime"
+                      (ngModelChange)="filterLogs()"></ngb-timepicker>
+
+      <span>&nbsp;&mdash;&nbsp;</span>
+
+      <ngb-timepicker [spinners]="false"
+                      [(ngModel)]="endTime"
+                      (ngModelChange)="filterLogs()"></ngb-timepicker>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #noEntriesTpl>
+  <span i18n>No log entries found. Please try to select different filter options.</span>
+  <span>&nbsp;</span>
+  <a href="#"
+     (click)="resetFilter()"
+     i18n>Reset filter.</a>
+</ng-template>