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