ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/card-row/card-row.component.html

   1 <div class="d-flex pl-1 pb-2 pt-2">
   2   <div class="ms-2 me-auto">
   3     <a [routerLink]="link"
   4        *ngIf="link && total > 0; else noLinkTitle"
   5        [ngPlural]="total"
   6        i18n>
   7         {{ total }}
   8       <ng-template ngPluralCase="=0">{{ title }}</ng-template>
   9       <ng-template ngPluralCase="=1">{{ title }}</ng-template>
  10       <ng-template ngPluralCase="other">{{ title }}s</ng-template>
  11     </a>
  12   </div>
  13
  14   <ng-container [ngSwitch]="summaryType">
  15     <ng-container *ngSwitchCase="'iscsi'">
  16       <ng-container *ngTemplateOutlet="iscsiSummary"></ng-container>
  17     </ng-container>
  18     <ng-container *ngSwitchCase="'osd'">
  19       <ng-container *ngTemplateOutlet="osdSummary"></ng-container>
  20     </ng-container>
  21     <ng-container *ngSwitchCase="'simplified'">
  22       <ng-container *ngTemplateOutlet="simplifiedSummary"></ng-container>
  23     </ng-container>
  24     <ng-container *ngSwitchDefault>
  25       <ng-container *ngTemplateOutlet="defaultSummary"></ng-container>
  26     </ng-container>
  27   </ng-container>
  28 </div>
  29
  30 <ng-template #defaultSummary>
  31   <span *ngIf="data.success || data.categoryPgAmount?.clean || (data.success === 0 && data.total === 0)">
  32     <span *ngIf="data.success || (data.success === 0 && data.total === 0)">
  33       {{ data.success }}
  34     </span>
  35     <span *ngIf="data.categoryPgAmount?.clean">
  36       {{ data.categoryPgAmount?.clean }}
  37     </span>
  38     <i class="text-success"
  39        [ngClass]="[icons.success]">
  40     </i>
  41   </span>
  42   <span *ngIf="data.info"
  43         class="ms-2">
  44     <span *ngIf="data.info">
  45       {{ data.info }}
  46     </span>
  47     <i class="text-info"
  48        [ngClass]="[icons.danger]">
  49     </i>
  50   </span>
  51   <span *ngIf="data.warn || data.categoryPgAmount?.warning"
  52         class="ms-2">
  53     <span *ngIf="data.warn">
  54       {{ data.warn }}
  55     </span>
  56     <span *ngIf="data.categoryPgAmount?.warning">
  57       {{ data.categoryPgAmount?.warning }}
  58     </span>
  59     <i class="text-warning"
  60        [ngClass]="[icons.warning]">
  61     </i>
  62   </span>
  63   <span *ngIf="data.error || data.categoryPgAmount?.unknown"
  64         class="ms-2">
  65     <span *ngIf="data.error">
  66       {{ data.error }}
  67     </span>
  68     <span *ngIf="data.categoryPgAmount?.unknown">
  69       {{ data.categoryPgAmount?.unknown }}
  70     </span>
  71     <i class="text-danger"
  72        [ngClass]="[icons.danger]">
  73     </i>
  74   </span>
  75   <span *ngIf="data.categoryPgAmount?.working"
  76         class="ms-2">
  77     <span *ngIf="data.categoryPgAmount?.working">
  78       {{ data.categoryPgAmount?.working }}
  79     </span>
  80     <i class="text-warning"
  81        [ngClass]="[icons.spinner, icons.spin]">
  82     </i>
  83   </span>
  84 </ng-template>
  85
  86 <ng-template #osdSummary>
  87   <span *ngIf="data.up === data.in">
  88     {{ data.up }}
  89     <i class="text-success"
  90        [ngClass]="[icons.success]">
  91     </i>
  92   </span>
  93   <span *ngIf="data.up !== data.in">
  94     {{ data.up }}
  95     <span class="fw-bold text-success">
  96         up
  97     </span>
  98   </span>
  99   <span *ngIf="data.in !== data.up"
 100         class="ms-2">
 101     {{ data.in }}
 102     <span class="fw-bold text-success">
 103         in
 104     </span>
 105   </span>
 106   <span *ngIf="data.down"
 107         class="ms-2">
 108     {{ data.down }}
 109     <span class="fw-bold text-danger me-2">
 110         down
 111     </span>
 112   </span>
 113   <span *ngIf="data.out"
 114         class="ms-2">
 115     {{ data.out }}
 116     <span class="fw-bold text-danger me-2">
 117         out
 118     </span>
 119   </span>
 120   <span *ngIf="data.nearfull"
 121         class="ms-2">
 122         {{ data.nearfull }}
 123     <span class="fw-bold text-warning me-2">
 124       nearfull</span></span>
 125   <span *ngIf="data.full"
 126         class="ms-2">
 127         {{ data.full }}
 128     <span class="fw-bold text-danger">
 129       full
 130     </span>
 131   </span>
 132 </ng-template>
 133
 134 <ng-template #iscsiSummary>
 135   <span>
 136     {{ data.up }}
 137     <i class="text-success"
 138        *ngIf="data.up || data.up === 0"
 139        [ngClass]="[icons.success]">
 140     </i>
 141   </span>
 142   <span *ngIf="data.down"
 143         class="ms-2">
 144         {{ data.down }}
 145     <i class="text-danger"
 146        [ngClass]="[icons.danger]">
 147     </i>
 148   </span>
 149 </ng-template>
 150
 151 <ng-template #simplifiedSummary>
 152   <span>
 153     {{ data }}
 154     <i class="text-success"
 155        [ngClass]="[icons.success]"></i>
 156   </span>
 157 </ng-template>
 158
 159 <ng-template #noLinkTitle>
 160   <span *ngIf="total || total === 0"
 161         [ngPlural]="total">
 162     {{ total }}
 163     <ng-template ngPluralCase="=0">{{ title }}</ng-template>
 164     <ng-template ngPluralCase="=1">{{ title }}</ng-template>
 165     <ng-template ngPluralCase="other">{{ title }}s</ng-template>
 166   </span>
 167 </ng-template>