From: Nizamudeen A <nia@redhat.com>
Date: Tue, 16 Nov 2021 14:43:09 +0000 (+0530)
Subject: mgr/dashboard: Daemon Events listing using bootstrap class
X-Git-Tag: v16.2.7~9^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=0d67fe4858c38678996dad21fe28fb84eea6eeb8;p=ceph.git

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 5a8116d5a288..3aeb04eade7a 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 c9a361d32961..a0d91c704479 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;
 }