ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html

   1 <div *ngIf="healthData && enabledFeature$ | async as enabledFeature"
   2      class="container-fluid">
   3   <cd-info-group groupTitle="Status"
   4                  i18n-groupTitle
   5                  *ngIf="healthData.health?.status
   6                  || healthData.mon_status
   7                  || healthData.osd_map
   8                  || healthData.mgr_map
   9                  || healthData.hosts != null
  10                  || healthData.rgw != null
  11                  || healthData.fs_map
  12                  || healthData.iscsi_daemons != null">
  13
  14     <cd-info-card cardTitle="Cluster Status"
  15                   i18n-cardTitle
  16                   class="cd-status-card"
  17                   contentClass="content-highlight"
  18                   *ngIf="healthData.health?.status">
  19       <ng-container *ngIf="healthData.health?.checks?.length > 0">
  20         <ng-template #healthChecks>
  21           <ng-container *ngTemplateOutlet="logsLink"></ng-container>
  22           <ul>
  23             <li *ngFor="let check of healthData.health.checks">
  24               <span [ngStyle]="check.severity | healthColor">{{ check.type }}</span>: {{ check.summary.message }}
  25             </li>
  26           </ul>
  27         </ng-template>
  28         <div class="info-card-content-clickable"
  29              [ngStyle]="healthData.health.status | healthColor"
  30              [ngbPopover]="healthChecks"
  31              popoverClass="info-card-popover-cluster-status">
  32           {{ healthData.health.status }} <i *ngIf="healthData.health?.status != 'HEALTH_OK'"
  33                                             class="fa fa-exclamation-triangle"></i>
  34         </div>
  35       </ng-container>
  36       <ng-container *ngIf="!healthData.health?.checks?.length">
  37         <div [ngStyle]="healthData.health.status | healthColor">
  38           {{ healthData.health.status }}
  39         </div>
  40       </ng-container>
  41     </cd-info-card>
  42
  43     <cd-info-card cardTitle="Hosts"
  44                   i18n-cardTitle
  45                   link="/hosts"
  46                   class="cd-status-card"
  47                   contentClass="content-highlight"
  48                   *ngIf="healthData.hosts != null">
  49       {{ healthData.hosts }} total
  50     </cd-info-card>
  51
  52     <cd-info-card cardTitle="Monitors"
  53                   i18n-cardTitle
  54                   link="/monitor"
  55                   class="cd-status-card"
  56                   contentClass="content-highlight"
  57                   *ngIf="healthData.mon_status">
  58       {{ healthData.mon_status | monSummary }}
  59     </cd-info-card>
  60
  61     <cd-info-card cardTitle="OSDs"
  62                   i18n-cardTitle
  63                   link="/osd"
  64                   class="cd-status-card"
  65                   *ngIf="(healthData.osd_map | osdSummary) as transformedResult"
  66                   contentClass="content-highlight">
  67       <span *ngFor="let result of transformedResult"
  68             [ngClass]="result.class">
  69         {{ result.content }}
  70       </span>
  71     </cd-info-card>
  72
  73     <cd-info-card cardTitle="Managers"
  74                   i18n-cardTitle
  75                   class="cd-status-card"
  76                   contentClass="content-highlight"
  77                   *ngIf="healthData.mgr_map">
  78       <span *ngFor="let result of (healthData.mgr_map | mgrSummary)"
  79             [ngClass]="result.class"
  80             [title]="result.titleText != null ? result.titleText : ''">
  81         {{ result.content }}
  82       </span>
  83     </cd-info-card>
  84
  85     <cd-info-card cardTitle="Object Gateways"
  86                   i18n-cardTitle
  87                   link="/rgw/daemon"
  88                   class="cd-status-card"
  89                   contentClass="content-highlight"
  90                   *ngIf="enabledFeature.rgw && healthData.rgw != null">
  91       {{ healthData.rgw }} total
  92     </cd-info-card>
  93
  94     <cd-info-card cardTitle="Metadata Servers"
  95                   i18n-cardTitle
  96                   class="cd-status-card"
  97                   *ngIf="(enabledFeature.cephfs && healthData.fs_map | mdsSummary) as transformedResult"
  98                   [contentClass]="(transformedResult.length > 1 ? 'text-area-size-2' : '') + ' content-highlight'">
  99       <!-- TODO: check text-area-size-2 -->
 100       <span *ngFor="let result of transformedResult"
 101             [ngClass]="result.class"
 102             [title]="result.titleText != null ? result.titleText : ''">
 103         {{ result.content }}
 104       </span>
 105     </cd-info-card>
 106
 107     <cd-info-card cardTitle="iSCSI Gateways"
 108                   i18n-cardTitle
 109                   link="/block/iscsi"
 110                   class="cd-status-card"
 111                   contentClass="content-highlight"
 112                   *ngIf="enabledFeature.iscsi && healthData.iscsi_daemons != null">
 113       {{ healthData.iscsi_daemons.up + healthData.iscsi_daemons.down }} total
 114       <span class="card-text-line-break"></span>
 115       {{ healthData.iscsi_daemons.up }} up,
 116       <span [ngClass]="{'card-text-error': healthData.iscsi_daemons.down > 0}">{{ healthData.iscsi_daemons.down }}
 117         down</span>
 118     </cd-info-card>
 119   </cd-info-group>
 120
 121   <cd-info-group groupTitle="Capacity"
 122                  i18n-groupTitle
 123                  *ngIf="healthData.pools
 124                  || healthData.df
 125                  || healthData.pg_info">
 126     <cd-info-card cardTitle="Raw Capacity"
 127                   i18n-cardTitle
 128                   class="cd-capacity-card cd-chart-card"
 129                   contentClass="content-chart"
 130                   *ngIf="healthData.df">
 131       <cd-health-pie [data]="healthData"
 132                      [config]="rawCapacityChartConfig"
 133                      [isBytesData]="true"
 134                      (prepareFn)="prepareRawUsage($event[0], $event[1])">
 135       </cd-health-pie>
 136     </cd-info-card>
 137
 138     <cd-info-card cardTitle="Objects"
 139                   i18n-cardTitle
 140                   class="cd-capacity-card cd-chart-card"
 141                   contentClass="content-chart"
 142                   *ngIf="healthData.pg_info?.object_stats?.num_objects != null">
 143       <cd-health-pie [data]="healthData"
 144                      (prepareFn)="prepareObjects($event[0], $event[1])">
 145       </cd-health-pie>
 146     </cd-info-card>
 147
 148     <cd-info-card cardTitle="PG Status"
 149                   i18n-cardTitle
 150                   class="cd-capacity-card cd-chart-card"
 151                   contentClass="content-chart"
 152                   *ngIf="healthData.pg_info">
 153       <ng-template #pgStatus>
 154         <ng-container *ngTemplateOutlet="logsLink"></ng-container>
 155         <ul>
 156           <li *ngFor="let pgStatesText of healthData.pg_info.statuses | keyvalue">
 157             {{ pgStatesText.key }}: {{ pgStatesText.value }}
 158           </li>
 159         </ul>
 160       </ng-template>
 161       <div class="pg-status-popover-wrapper">
 162         <div [ngbPopover]="pgStatus">
 163           <cd-health-pie [data]="healthData"
 164                          [config]="pgStatusChartConfig"
 165                          (prepareFn)="preparePgStatus($event[0], $event[1])">
 166           </cd-health-pie>
 167         </div>
 168       </div>
 169     </cd-info-card>
 170
 171     <cd-info-card cardTitle="Pools"
 172                   i18n-cardTitle
 173                   link="/pool"
 174                   class="cd-capacity-card"
 175                   contentClass="content-highlight"
 176                   *ngIf="healthData.pools">
 177       {{ healthData.pools.length }}
 178     </cd-info-card>
 179
 180     <cd-info-card cardTitle="PGs per OSD"
 181                   i18n-cardTitle
 182                   class="cd-capacity-card"
 183                   contentClass="content-highlight"
 184                   *ngIf="healthData.pg_info">
 185       {{ healthData.pg_info.pgs_per_osd | dimless }}
 186     </cd-info-card>
 187   </cd-info-group>
 188
 189   <cd-info-group groupTitle="Performance"
 190                  i18n-groupTitle
 191                  *ngIf="healthData.client_perf || healthData.scrub_status">
 192     <cd-info-card cardTitle="Client Read/Write"
 193                   i18n-cardTitle
 194                   class="cd-performance-card cd-chart-card"
 195                   contentClass="content-chart"
 196                   *ngIf="healthData.client_perf">
 197       <cd-health-pie [data]="healthData"
 198                      [config]="clientStatsConfig"
 199                      (prepareFn)="prepareReadWriteRatio($event[0], $event[1])">
 200       </cd-health-pie>
 201     </cd-info-card>
 202
 203     <cd-info-card cardTitle="Client Throughput"
 204                   i18n-cardTitle
 205                   class="cd-performance-card cd-chart-card"
 206                   contentClass="content-chart"
 207                   *ngIf="healthData.client_perf">
 208       <cd-health-pie [data]="healthData"
 209                      [config]="clientStatsConfig"
 210                      (prepareFn)="prepareClientThroughput($event[0], $event[1])">
 211       </cd-health-pie>
 212     </cd-info-card>
 213
 214     <cd-info-card cardTitle="Recovery Throughput"
 215                   i18n-cardTitle
 216                   class="cd-performance-card"
 217                   contentClass="content-highlight"
 218                   *ngIf="healthData.client_perf">
 219       {{ (healthData.client_perf.recovering_bytes_per_sec | dimlessBinary) + '/s' }}
 220     </cd-info-card>
 221
 222     <cd-info-card cardTitle="Scrubbing"
 223                   i18n-cardTitle
 224                   class="cd-performance-card"
 225                   contentClass="content-highlight"
 226                   *ngIf="healthData.scrub_status">
 227       {{ healthData.scrub_status }}
 228     </cd-info-card>
 229   </cd-info-group>
 230
 231   <ng-template #logsLink>
 232     <ng-container *ngIf="permissions.log.read">
 233       <p class="logs-link"
 234          i18n><i [ngClass]="[icons.infoCircle]"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
 235     </ng-container>
 236   </ng-template>
 237 </div>