From: Tiago Melo <tmelo@suse.com>
Date: Fri, 4 Oct 2019 12:10:52 +0000 (+0000)
Subject: mgr/dashboard: Allow removal of single notification
X-Git-Tag: v15.1.0~1111^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=c7bd94f07e35e3cda08e92a8f9424849ebf1ab64;p=ceph.git

mgr/dashboard: Allow removal of single notification

Signed-off-by: Tiago Melo <tmelo@suse.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
index 6b4f2f3fa9ba4..6b2921230d271 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
@@ -54,7 +54,7 @@
 
     <hr>
 
-    <div *ngFor="let notification of notifications">
+    <div *ngFor="let notification of notifications; let i = index">
       <div class="card border-0 mb-3">
         <div class="row no-gutters">
           <div class="col-md-3 text-center">
@@ -65,6 +65,13 @@
           </div>
           <div class="col-md-9">
             <div class="card-body p-0">
+              <button class="btn btn-link float-right mt-0 pt-0"
+                      title="Remove notification"
+                      i18n-title
+                      (click)="remove(i); $event.stopPropagation()">
+                <i [ngClass]="[icons.trash]"></i>
+              </button>
+
               <h6 class="card-title bold">{{ notification.title }}</h6>
               <p class="card-text"
                  [innerHtml]="notification.message"></p>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
index eb52241327454..ac5c8f8e7165e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
@@ -27,6 +27,10 @@
     background-color: $color-popover-seperator-bg;
     font-size: 12px;
   }
+
+  .btn-link .fa-trash-o {
+    color: $color-black;
+  }
 }
 
 table {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.ts
index 5c28c20ad8cdc..d9660e0e1e491 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.ts
@@ -121,6 +121,10 @@ export class NotificationsSidebarComponent implements OnInit, OnDestroy {
     this.notificationService.removeAll();
   }
 
+  remove(index: number) {
+    this.notificationService.remove(index);
+  }
+
   closeSidebar() {
     this.notificationService.toggleSidebar(true);
   }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
index 2c0c22a9c4aa3..2767f3f69cf2d 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
@@ -69,6 +69,13 @@ describe('NotificationService', () => {
       });
     };
 
+    const addNotifications = (quantity) => {
+      for (let index = 0; index < quantity; index++) {
+        service.show(NotificationType.info, `${index}`);
+        tick(510);
+      }
+    };
+
     beforeEach(() => {
       spyOn(service, 'show').and.callThrough();
       service.cancel(service['justShownTimeoutId']);
@@ -94,10 +101,7 @@ describe('NotificationService', () => {
     }));
 
     it('should never have more then 10 notifications', fakeAsync(() => {
-      for (let index = 0; index < 15; index++) {
-        service.show(NotificationType.info, 'Simple test');
-        tick(510);
-      }
+      addNotifications(15);
       expect(service['dataSource'].getValue().length).toBe(10);
     }));
 
@@ -156,6 +160,22 @@ describe('NotificationService', () => {
         message: '<ul><li>Error occurred in path a</li><li>Error occurred in path b</li></ul>'
       });
     }));
+
+    it('should remove a single notification', fakeAsync(() => {
+      addNotifications(5);
+      let messages = service['dataSource'].getValue().map((notification) => notification.title);
+      expect(messages).toEqual(['4', '3', '2', '1', '0']);
+      service.remove(2);
+      messages = service['dataSource'].getValue().map((notification) => notification.title);
+      expect(messages).toEqual(['4', '3', '1', '0']);
+    }));
+
+    it('should remove all notifications', fakeAsync(() => {
+      addNotifications(5);
+      expect(service['dataSource'].getValue().length).toBe(5);
+      service.removeAll();
+      expect(service['dataSource'].getValue().length).toBe(0);
+    }));
   });
 
   describe('notification queue', () => {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts
index 4a4356c83730e..9f9c5e36bc819 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts
@@ -55,14 +55,25 @@ export class NotificationService {
     this.dataSource.next([]);
   }
 
+  /**
+   * Removes a single saved notifications
+   */
+  remove(index: number) {
+    const recent = this.dataSource.getValue();
+    recent.splice(index, 1);
+    this.dataSource.next(recent);
+    localStorage.setItem(this.KEY, JSON.stringify(recent));
+  }
+
   /**
    * Method used for saving a shown notification (check show() method).
    */
   save(notification: CdNotification) {
     const recent = this.dataSource.getValue();
     recent.push(notification);
+    recent.sort((a, b) => (a.timestamp > b.timestamp ? -1 : 1));
     while (recent.length > 10) {
-      recent.shift();
+      recent.pop();
     }
     this.dataSource.next(recent);
     localStorage.setItem(this.KEY, JSON.stringify(recent));
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 8bb8dd7a0c277..b5b4cec92599a 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -320,7 +320,7 @@ a {
 }
 .custom-icon {
   padding: 10px;
-  margin-right: 1em;
+  margin-right: 8px;
   background-clip: padding-box;
   background-size: contain;
   background-repeat: no-repeat;