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