git.apps.os.sepia.ceph.com Git - ceph.git/blob

   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-start">
  26                 {{ executingTask.begin_time | cdDate }}
  27               </small>
  28
  29               <span class="float-end">
  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-end 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               <button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && !notification.alertSilenced"
  75                       class="btn btn-link float-end text-muted mute m-0 p-0"
  76                       title="Silence Alert"
  77                       i18n-title
  78                       (click)="silence(notification)">
  79                 <i [ngClass]="[icons.mute]"></i>
  80               </button>
  81               <button *ngIf="notification.application === 'Prometheus' && notification.type !== 2 && notification.alertSilenced"
  82                       class="btn btn-link float-end text-muted mute m-0 p-0"
  83                       title="Expire Silence"
  84                       i18n-title
  85                       (click)="expire(notification)">
  86                 <i [ngClass]="[icons.bell]"></i>
  87               </button>
  88
  89
  90               <h6 class="card-title bold">{{ notification.title }}</h6>
  91               <p class="card-text"
  92                  [innerHtml]="notification.message"></p>
  93               <p class="card-text text-muted">
  94                 <ng-container *ngIf="notification.duration">
  95                   <small>
  96                     <ng-container i18n>Duration:</ng-container> {{ notification.duration | duration }}
  97                   </small>
  98                   <br>
  99                 </ng-container>
 100                 <small class="date"
 101                        [title]="notification.timestamp | cdDate">{{ notification.timestamp | relativeDate }}</small>
 102                 <i class="float-end custom-icon"
 103                    [ngClass]="[notification.applicationClass]"
 104                    [title]="notification.application"></i>
 105               </p>
 106             </div>
 107           </div>
 108         </div>
 109       </div>
 110
 111       <hr>
 112     </div>
 113   </ng-container>
 114 </ng-template>
 115
 116 <ng-template #emptyTpl>
 117   <div *ngIf="notifications.length === 0 && executingTasks.length === 0">
 118     <div class="message text-center"
 119          i18n>There are no notifications.</div>
 120   </div>
 121 </ng-template>
 122
 123 <div class="card"
 124      (clickOutside)="closeSidebar()"
 125      [clickOutsideEnabled]="isSidebarOpened">
 126   <div class="card-header">
 127     <ng-container i18n>Tasks and Notifications</ng-container>
 128
 129     <button class="btn-close float-end"
 130             tabindex="-1"
 131             type="button"
 132             title="close"
 133             (click)="closeSidebar()">
 134     </button>
 135   </div>
 136
 137   <ngx-simplebar [options]="simplebar">
 138     <div class="card-body">
 139       <ng-container *ngTemplateOutlet="tasksTpl"></ng-container>
 140       <ng-container *ngTemplateOutlet="notificationsTpl"></ng-container>
 141       <ng-container *ngTemplateOutlet="emptyTpl"></ng-container>
 142     </div>
 143   </ngx-simplebar>
 144 </div>