git-server-git.apps.pok.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 <cd-productive-card class="overview-alerts-card">
   2 @if (vm$ | async; as vm) {
   3   <ng-template #header>
   4     <h2 class="cds--type-heading-compact-02"
   5         i18n>
   6       System alerts
   7     </h2>
   8     <button
   9       cdsButton="ghost"
  10       size="sm"
  11       [routerLink]="['/monitoring/active-alerts']"
  12       i18n
  13     >
  14       View all
  15     </button>
  16   </ng-template>
  17
  18   <div>
  19     <span class="cds--type-heading-07">{{ vm.total }}</span>
  20     <cd-icon [type]="vm.icon"></cd-icon>
  21   </div>
  22
  23   <small
  24     class="cds--type-label-01 overview-alerts-card-need-attention"
  25     i18n>
  26     {{ vm.statusText }}
  27   </small>
  28
  29   <div class="cds-mt-6">
  30   @if (vm.badges.length) {
  31     <div class="overview-alerts-card-badges">
  32       @for (b of vm.badges; track b.key; let first = $first) {
  33       <span
  34         class="overview-alerts-card-badge"
  35         [class.overview-alerts-card-badge-with-border]="!first">
  36         <cd-icon [type]="b.icon"></cd-icon>
  37         <a
  38           cdsLink
  39           class="cds-ml-3"
  40           [routerLink]="['/monitoring/active-alerts']"
  41           [queryParams]="{ severity: b.key }">
  42           {{ b.count }}
  43         </a>
  44       </span>
  45       }
  46     </div>
  47   }
  48   </div>
  49 }
  50 </cd-productive-card>