From 72fa86efa580939276bd7a7736ddc8c0b9f48c00 Mon Sep 17 00:00:00 2001
From: Sebastian Krah <skrah@suse.com>
Date: Tue, 29 Jan 2019 14:38:31 +0100
Subject: [PATCH] mgr/dashboard: Cleanup cluster and audit log

Applies the following changes:
- Makes the timestamp bold and not the message
- Colors the priority according to its level
- Indents the message correct if it's longer than one line
- Displays a message when the log is empty

Fixes: https://tracker.ceph.com/issues/37916
Signed-off-by: Sebastian Krah <skrah@suse.com>
---
 .../app/ceph/cluster/logs/logs.component.html | 42 +++++++++----------
 .../app/ceph/cluster/logs/logs.component.scss | 37 ++++++++++++++++
 .../frontend/src/locale/messages.xlf          | 12 +++++-
 3 files changed, 69 insertions(+), 22 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
index e3ed20b5807..d14dbf0be6b 100644
--- 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
@@ -1,34 +1,34 @@
-<div *ngIf="contentData"> 
+<div *ngIf="contentData">
 <tabset>
   <tab i18n-heading
        heading="Cluster Logs">
   <div class="well">
-  <div *ngIf="contentData.clog">
-  <p *ngFor="let line of contentData.clog">
-    {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
-    <span [ngStyle]="line">
-    {{ line.message }}
-    <br>
-    </span>
-    </p>
-  </div>
+    <div *ngIf="contentData.clog">
+      <p *ngFor="let line of contentData.clog">
+        <span class="timestamp">{{ line.stamp }}</span>
+        <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
+        <span class="message">{{ line.message }}</span>
+      </p>
+    </div>
+    <div *ngIf="contentData.clog.length === 0">
+      <p i18n>No entries found</p>
+    </div>
   </div>
   </tab>
 
   <tab i18n-heading
        heading="Audit Logs">
   <div class="well">
-  <div *ngIf="contentData.audit_log">
-    <p *ngFor="let line of contentData.audit_log">
-    {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
-    <span [ngStyle]="line">
-    <span style="font-weight: bold;">
-    {{ line.message }}
-    </span>
-    <br>
-    </span>
-    </p>
-  </div>
+    <div *ngIf="contentData.audit_log">
+      <p *ngFor="let line of contentData.audit_log">
+        <span class="timestamp">{{ line.stamp }}</span>
+        <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
+        <span class="message">{{ line.message }}</span>
+      </p>
+    </div>
+    <div *ngIf="contentData.audit_log.length === 0">
+      <p i18n>No entries found</p>
+    </div>
   </div>
   </tab>
 </tabset>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
index 9d435e65d40..b084aada8cc 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
@@ -1,4 +1,41 @@
+@import '../../../../defaults';
+
 p {
   font-family: monospace;
   color: black;
 }
+
+.well {
+  div p {
+    display: flex;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .timestamp {
+    font-weight: bold;
+    flex-shrink: 0;
+  }
+
+  .priority {
+    margin-left: 0.5rem;
+  }
+
+  .message {
+    margin-left: 1rem;
+  }
+
+  .err {
+    color: $color-pink;
+  }
+
+  .warn {
+    color: $color-bright-yellow;
+  }
+
+  .info {
+    color: $color-brand-teal;
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf b/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
index d7a8c9179d4..76711612b5d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
+++ b/src/pybind/mgr/dashboard/frontend/src/locale/messages.xlf
@@ -771,6 +771,16 @@
           <context context-type="sourcefile">app/ceph/cluster/hosts/hosts.component.html</context>
           <context context-type="linenumber">3</context>
         </context-group>
+      </trans-unit><trans-unit id="e6d57f36aa2bad303c8a8ee944b9bd7fae3c8c26" datatype="html">
+        <source>No entries found</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/ceph/cluster/logs/logs.component.html</context>
+          <context context-type="linenumber">14</context>
+        </context-group>
+        <context-group purpose="location">
+          <context context-type="sourcefile">app/ceph/cluster/logs/logs.component.html</context>
+          <context context-type="linenumber">30</context>
+        </context-group>
       </trans-unit><trans-unit id="d556ab48a65722b400e497f61737f553ee0f89e2" datatype="html">
         <source>Cluster Logs</source>
         <context-group purpose="location">
@@ -781,7 +791,7 @@
         <source>Audit Logs</source>
         <context-group purpose="location">
           <context context-type="sourcefile">app/ceph/cluster/logs/logs.component.html</context>
-          <context context-type="linenumber">19</context>
+          <context context-type="linenumber">20</context>
         </context-group>
       </trans-unit><trans-unit id="81b97b8ea996ad1e4f9fca8415021850214884b1" datatype="html">
         <source>Status</source>
-- 
2.39.5