From 0d67fe4858c38678996dad21fe28fb84eea6eeb8 Mon Sep 17 00:00:00 2001
From: Nizamudeen A <nia@redhat.com>
Date: Tue, 16 Nov 2021 20:13:09 +0530
Subject: [PATCH] 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)
---
 .../service-daemon-list.component.html        | 27 ++++++++++---------
 .../service-daemon-list.component.scss        |  5 ++--
 2 files changed, 18 insertions(+), 14 deletions(-)

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 5a8116d5a288a..3aeb04eade7af 100644
--- 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 c9a361d329614..a0d91c704479b 100644
--- 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;
 }
-- 
2.39.5