mgr/dashboard: Daemon Events listing using bootstrap class

Fixes: https://tracker.ceph.com/issues/53282
Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit 1bad306efd628dd4940b1082c08199bbbaf0b581)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
index 5a8116d5a288ac3ed3701c8af682999e6bf1896f..3aeb04eade7afde501fd649179cd1b4f0f8313b5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.html
@@ -57,23 +57,26 @@
 
 <ng-template #listTpl
              let-events="value">
-  <div *ngIf="events.length == 0 || events == undefined">
-    <span>No data available</span>
-  </div>
-  <div *ngIf="events.length != 0 && events != undefined"
-       class="ul-margin">
-    <ul *ngFor="let event of events; trackBy:trackByFn">
-      <li><b>{{ event.created | relativeDate }} - </b>
+  <ul class="list-group list-group-flush"
+      *ngIf="events?.length else noEventsAvailable">
+    <li class="list-group-item"
+        *ngFor="let event of events; trackBy:trackByFn">
+      <b>{{ event.created | relativeDate }} - </b>
       <span class="badge badge-info">{{ event.subject }}</span><br>
-      <span *ngIf="event.level == 'INFO'">
+      <span *ngIf="event.level === 'INFO'">
       <i [ngClass]="[icons.infoCircle]"
          aria-hidden="true"></i>
       </span>
-      <span *ngIf="event.level == 'ERROR'">
+      <span *ngIf="event.level === 'ERROR'">
       <i [ngClass]="[icons.warning]"
          aria-hidden="true"></i>
       </span>
-      {{ event.message }}</li>
-    </ul>
-  </div>
+      {{ event.message }}
+    </li>
+  </ul>
+  <ng-template #noEventsAvailable>
+    <div *ngIf="events?.length === 0">
+      <span>No data available</span>
+    </div>
+  </ng-template>
 </ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.scss
index c9a361d329614441f463d194f5fd046e5843e262..a0d91c704479b436d2f914bc096d26497da08beb 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/services/service-daemon-list/service-daemon-list.component.scss
@@ -8,6 +8,7 @@
   color: vv.$danger;
 }
 
-.ul-margin {
-  margin-left: -30px;
+.list-group-item {
+  background-color: transparent;
+  border-width: 0;
 }