ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html

   1 <ng-template #tasksTpl>
   2   <!-- Executing -->
   3   <div *ngFor="let executingTask of executingTasks; trackBy:trackByFn">
   4     <div class="card tc_task border-0">
   5       <div class="row no-gutters">
   6         <div class="col-md-2 text-center">
   7           <span [ngClass]="[icons.stack, icons.large2x]"
   8                 class="text-info">
   9             <i [ngClass]="[icons.stack2x, icons.circle]"></i>
  10             <i [ngClass]="[icons.stack1x, icons.spinner, icons.spin, icons.inverse]"></i>
  11           </span>
  12         </div>
  13         <div class="col-md-9">
  14           <div class="card-body p-1">
  15             <h6 class="card-title bold">{{ executingTask.description }}</h6>
  16
  17             <div class="mb-1">
  18               <ngb-progressbar type="info"
  19                                [value]="executingTask?.progress"
  20                                [striped]="true"
  21                                [animated]="true"></ngb-progressbar>
  22             </div>
  23
  24             <p class="card-text text-muted">
  25               <small class="date float-left">
  26                 {{ executingTask.begin_time | cdDate }}
  27               </small>
  28
  29               <span class="float-right">
  30                 {{ executingTask.progress || 0 }} %
  31               </span>
  32             </p>
  33
  34           </div>
  35         </div>
  36       </div>
  37     </div>
  38
  39     <hr>
  40   </div>
  41 </ng-template>
  42
  43 <ng-template #notificationsTpl>
  44   <ng-container *ngIf="notifications.length > 0">
  45     <button type="button"
  46             class="btn btn-light btn-block"
  47             (click)="removeAll(); $event.stopPropagation()">
  48       <i [ngClass]="[icons.trash]"
  49          aria-hidden="true"></i>
  50       &nbsp;
  51       <ng-container i18n>Clear notifications</ng-container>
  52     </button>
  53
  54     <hr>
  55
  56     <div *ngFor="let notification of notifications; let i = index"
  57          [ngClass]="notification.borderClass">
  58       <div class="card tc_notification border-0">
  59         <div class="row no-gutters">
  60           <div class="col-md-2 text-center">
  61             <span [ngClass]="[icons.stack, icons.large2x,  notification.textClass]">
  62               <i [ngClass]="[icons.circle, icons.stack2x]"></i>
  63               <i [ngClass]="[icons.stack1x, icons.inverse, notification.iconClass]"></i>
  64             </span>
  65           </div>
  66           <div class="col-md-10">
  67             <div class="card-body p-1">
  68               <button class="btn btn-link float-right mt-0 pt-0"
  69                       title="Remove notification"
  70                       i18n-title
  71                       (click)="remove(i); $event.stopPropagation()">
  72                 <i [ngClass]="[icons.trash]"></i>
  73               </button>
  74
  75               <h6 class="card-title bold">{{ notification.title }}</h6>
  76               <p class="card-text"
  77                  [innerHtml]="notification.message"></p>
  78               <p class="card-text text-muted">
  79                 <ng-container *ngIf="notification.duration">
  80                   <small>
  81                     <ng-container i18n>Duration:</ng-container> {{ notification.duration | duration }}
  82                   </small>
  83                   <br>
  84                 </ng-container>
  85                 <small class="date"
  86                        [title]="notification.timestamp | cdDate">{{ notification.timestamp | relativeDate }}</small>
  87                 <i class="float-right custom-icon"
  88                    [ngClass]="[notification.applicationClass]"
  89                    [title]="notification.application"></i>
  90               </p>
  91             </div>
  92           </div>
  93         </div>
  94       </div>
  95
  96       <hr>
  97     </div>
  98   </ng-container>
  99 </ng-template>
 100
 101 <ng-template #emptyTpl>
 102   <div *ngIf="notifications.length === 0 && executingTasks.length === 0">
 103     <div class="message text-center"
 104          i18n>There are no notifications.</div>
 105   </div>
 106 </ng-template>
 107
 108 <div class="card"
 109      (clickOutside)="closeSidebar()"
 110      [clickOutsideEnabled]="isSidebarOpened">
 111   <div class="card-header">
 112     <ng-container i18n>Tasks and Notifications</ng-container>
 113
 114     <button class="close float-right"
 115             tabindex="-1"
 116             type="button"
 117             (click)="closeSidebar()">
 118       <span>
 119         <i [ngClass]="icons.close"></i>
 120       </span>
 121     </button>
 122   </div>
 123
 124   <ngx-simplebar [options]="simplebar">
 125     <div class="card-body">
 126       <ng-container *ngTemplateOutlet="tasksTpl"></ng-container>
 127       <ng-container *ngTemplateOutlet="notificationsTpl"></ng-container>
 128       <ng-container *ngTemplateOutlet="emptyTpl"></ng-container>
 129     </div>
 130   </ngx-simplebar>
 131 </div>