update source to Ceph Pacific 16.2.2

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

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
index 00be424f3783415905375e0e5a1c470f2df2400e..ec56d3f25dcaa90f458aaedbcc5b4bccec5aef56 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html
@@ -1,58 +1,91 @@
 <div *ngIf="contentData">
   <ng-container *ngTemplateOutlet="logFiltersTpl"></ng-container>
 
-  <tabset>
-    <tab i18n-heading
-         heading="Cluster Logs">
-      <div class="card bg-light mb-3"
-           *ngIf="clog">
-        <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">{{ line.message }}</span>
-          </p>
+  <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">{{ line.message }}</span>
+            </p>
 
-          <span *ngIf="contentData.clog.length === 0"
-                i18n>No entries found</span>
+            <ng-container *ngIf="clog.length != 0 else noEntriesTpl"></ng-container>
+          </div>
         </div>
-      </div>
-    </tab>
-
-    <tab i18n-heading
-         heading="Audit Logs">
-      <div class="card bg-light mb-3"
-           *ngIf="audit_log">
-        <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">{{ line.message }}</span>
-          </p>
+      </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">{{ line.message }}</span>
+            </p>
 
-          <span *ngIf="contentData.audit_log.length === 0"
-                i18n>No entries found</span>
+            <ng-container *ngIf="audit_log.length != 0 else noEntriesTpl"></ng-container>
+          </div>
         </div>
-      </div>
-    </tab>
-  </tabset>
+      </ng-template>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="nav"></div>
 </div>
 
 <ng-template #logFiltersTpl>
   <div class="form-inline">
     <div class="form-group">
-      <label class="col-form-label"
+      <label for="logs-priority"
              i18n>Priority:</label>
-      <select class="form-control custom-select"
+      <select id="logs-priority"
+              class="form-control custom-select"
               [(ngModel)]="priority"
               (ngModelChange)="filterLogs()">
-        <option *ngFor="let prio of prioritys"
+        <option *ngFor="let prio of priorities"
                 [value]="prio.value">{{ prio.name }}</option>
       </select>
     </div>
 
     <div class="form-group">
-      <label class="col-form-label"
+      <label for="logs-keyword"
              i18n>Keyword:</label>
       <div class="input-group">
         <div class="input-group-prepend">
@@ -62,6 +95,7 @@
         </div>
 
         <input class="form-control"
+               id="logs-keyword"
                type="text"
                [(ngModel)]="search"
                (keyup)="filterLogs()">
@@ -77,15 +111,16 @@
     </div>
 
     <div class="form-group">
-      <label class="col-form-label"
+      <label for="logs-date"
              i18n>Date:</label>
       <div class="input-group">
-        <input type="text"
-               class="form-control"
-               i18n-placeholder
-               placeholder="Datepicker"
-               [bsConfig]="bsConfig"
-               bsDatepicker
+        <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">
@@ -99,23 +134,24 @@
     </div>
 
     <div class="form-group">
-      <label class="col-form-label"
-             i18n>Time range:</label>
-      <div class="d-inline-flex">
-        <timepicker [showMeridian]="false"
-                    [showSpinners]="false"
-                    [minuteStep]="1"
-                    [(ngModel)]="startTime"
-                    (ngModelChange)="filterLogs()">
-        </timepicker>
-        <span class="middle">&nbsp;&mdash;&nbsp;</span>
-        <timepicker [showMeridian]="false"
-                    [showSpinners]="false"
-                    [minuteStep]="1"
-                    [(ngModel)]="endTime"
-                    (ngModelChange)="filterLogs()">
-        </timepicker>
-      </div>
+      <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>