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

   1 <div class="container-fluid"
   2      *ngIf="healthData && enabledFeature$ | async as enabledFeature">
   3   <div class="row mx-0">
   4     <cd-card cardTitle="Details"
   5              i18n-title
   6              class="col-sm-3 px-3"
   7              [ngClass]="{'d-flex': flexHeight}"
   8              aria-label="Details card">
   9       <dl class="ms-4 me-4">
  10         <dt>FSID</dt>
  11         <dd>{{ detailsCardData.fsid }}</dd>
  12         <dt>Orchestrator</dt>
  13         <dd i18n>{{ detailsCardData.orchestrator || 'Orchestrator is not available' }}</dd>
  14         <dt>Ceph version</dt>
  15         <dd>{{ detailsCardData.cephVersion }}</dd>
  16       </dl>
  17     </cd-card>
  18
  19     <cd-card cardTitle="Status"
  20              i18n-title
  21              class="col-sm-6 px-3 d-flex"
  22              aria-label="Status card">
  23       <div class="d-flex ms-4 me-4 mb-5 center-content">
  24         <ng-template #healthChecks>
  25           <ng-container *ngTemplateOutlet="logsLink"></ng-container>
  26           <ul>
  27             <li *ngFor="let check of healthData.health.checks">
  28               <span [ngStyle]="check.severity | healthColor"
  29                     [class.health-warn-description]="check.severity === 'HEALTH_WARN'">
  30               {{ check.type }}</span>: {{ check.summary.message }}
  31             </li>
  32           </ul>
  33         </ng-template>
  34         <i *ngIf="healthData.health?.status"
  35            [ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
  36            [ngStyle]="healthData.health.status | healthColor"
  37            [title]="healthData.health.status"></i>
  38         <a class="ms-2 mt-n1 lead text-primary"
  39            [ngbPopover]="healthChecks"
  40            popoverClass="info-card-popover-cluster-status"
  41            *ngIf="healthData.health?.checks?.length"
  42            i18n>Cluster</a>
  43         <span class="ms-2 mt-n1 lead"
  44               *ngIf="!healthData.health?.checks?.length"
  45               i18n>Cluster</span>
  46       </div>
  47       <section class="border-top mt-5"
  48                *ngIf="isAlertmanagerConfigured && (prometheusAlertService.activeCriticalAlerts || prometheusAlertService.activeWarningAlerts)">
  49         <div class="d-flex flex-wrap ms-4 me-4">
  50           <span class="pt-2"
  51                 i18n>Alerts</span>
  52           <!-- Potentially make widget component -->
  53           <button class="btn btn-outline-danger rounded-pill ms-2"
  54                   [ngClass]="{'active': showAlerts && alertType === 'critical'}"
  55                   title="Danger"
  56                   (click)="toggleAlertsWindow('danger')"
  57                   id="dangerAlerts"
  58                   i18n-title
  59                   *ngIf="prometheusAlertService?.activeCriticalAlerts > 0">
  60             <i [ngClass]="[icons.danger]"></i>
  61             <span>{{ prometheusAlertService.activeCriticalAlerts }}</span>
  62           </button>
  63
  64           <button class="btn btn-outline-warning rounded-pill ms-2"
  65                   [ngClass]="{'active': showAlerts && alertType === 'warning'}"
  66                   title="Warning"
  67                   (click)="toggleAlertsWindow('warning')"
  68                   id="warningAlerts"
  69                   i18n-title
  70                   *ngIf="prometheusAlertService?.activeWarningAlerts > 0">
  71             <i [ngClass]="[icons.infoCircle]"></i>
  72             <span>{{ prometheusAlertService.activeWarningAlerts }}</span>
  73           </button>
  74
  75           <div class="pt-0 position-right">
  76             <button class="btn btn-block dropdown-toggle"
  77                     data-toggle="collapse"
  78                     aria-label="toggle alert window"
  79                     [attr.aria-expanded]="showAlerts"
  80                     (click)="toggleAlertsWindow('danger', 'true')"></button>
  81
  82           </div>
  83         </div>
  84         <div class="alerts pt-0"
  85              *ngIf="showAlerts">
  86           <hr class="mt-4">
  87           <ngx-simplebar [options]="simplebar">
  88             <div class="card-body ps-0 pe-1 pt-1">
  89               <ng-container *ngTemplateOutlet="alertsCard"></ng-container>
  90             </div>
  91           </ngx-simplebar>
  92         </div>
  93       </section>
  94     </cd-card>
  95
  96     <cd-card cardTitle="Capacity"
  97              i18n-title
  98              class="col-sm-3 px-3"
  99              [ngClass]="{'d-flex': flexHeight}"
 100              aria-label="Capacity card">
 101       <ng-container class="ms-4 me-4"
 102                     *ngIf="capacity && osdSettings">
 103         <cd-dashboard-pie [data]="{max: capacity.total_bytes, current: capacity.total_used_raw_bytes}"
 104                           [lowThreshold]="osdSettings.nearfull_ratio"
 105                           [highThreshold]="osdSettings.full_ratio">
 106         </cd-dashboard-pie>
 107       </ng-container>
 108     </cd-card>
 109   </div>
 110   <!-- Second row -->
 111   <div class="row mx-0">
 112     <!-- Inventory Card -->
 113     <cd-card cardTitle="Inventory"
 114              i18n-title
 115              class="col-sm-3 px-3 d-flex"
 116              aria-label="Inventory card">
 117       <hr>
 118       <!-- Hosts -->
 119       <li class="list-group-item">
 120         <cd-card-row [data]="healthData.hosts"
 121                      link="/hosts"
 122                      title="Host"
 123                      summaryType="simplified"
 124                      *ngIf="healthData.hosts != null"></cd-card-row>
 125       </li>
 126       <hr>
 127       <!-- Monitors -->
 128       <li class="list-group-item">
 129         <cd-card-row [data]="healthData.mon_status.monmap.mons.length"
 130                      link="/monitor"
 131                      title="Monitor"
 132                      summaryType="simplified"
 133                      *ngIf="healthData.mon_status"></cd-card-row>
 134       </li>
 135       <hr>
 136       <!-- Managers -->
 137       <li *ngIf="healthData.mgr_map"
 138           class="list-group-item">
 139         <cd-card-row [data]="healthData.mgr_map | mgrSummary"
 140                      title="Manager"
 141                      *ngIf="healthData.mgr_map"></cd-card-row>
 142       </li>
 143       <hr>
 144       <!-- OSDs -->
 145       <li class="list-group-item">
 146         <cd-card-row [data]="healthData.osd_map | osdSummary"
 147                      link="/osd"
 148                      title="OSD"
 149                      summaryType="osd"
 150                      *ngIf="healthData.osd_map"></cd-card-row>
 151       </li>
 152       <hr>
 153       <!-- Pools -->
 154       <li *ngIf="healthData.pools"
 155           class="list-group-item">
 156         <cd-card-row [data]="healthData.pools.length"
 157                      link="/pool"
 158                      title="Pool"
 159                      summaryType="simplified"
 160                      *ngIf="healthData.pools"></cd-card-row>
 161       </li>
 162       <hr>
 163       <!-- PG Info -->
 164       <li class="list-group-item">
 165         <cd-card-row [data]="healthData.pg_info | pgSummary"
 166                      title="PG"
 167                      *ngIf="healthData.pg_info"></cd-card-row>
 168       </li>
 169       <hr>
 170       <!-- Object gateways -->
 171       <li *ngIf="enabledFeature.rgw && healthData.rgw != null"
 172           class="list-group-item"
 173           id="rgw-item">
 174         <cd-card-row [data]="healthData.rgw"
 175                      link="/rgw/daemon"
 176                      title="Object Gateway"
 177                      summaryType="simplified"
 178                      *ngIf="healthData.rgw || healthData.rgw === 0 "></cd-card-row>
 179       </li>
 180       <hr>
 181       <!-- Metadata Servers -->
 182       <li *ngIf="enabledFeature.cephfs && healthData.fs_map"
 183           class="list-group-item"
 184           id="mds-item">
 185         <cd-card-row [data]="healthData.fs_map | mdsSummary"
 186                      title="Metadata Server"
 187                      *ngIf="healthData.fs_map"></cd-card-row>
 188       </li>
 189       <hr>
 190       <!-- iSCSI Gateways -->
 191       <li *ngIf="enabledFeature.iscsi && healthData.iscsi_daemons != null"
 192           class="list-group-item"
 193           id="iscsi-item">
 194         <cd-card-row [data]="healthData.iscsi_daemons"
 195                      link="/iscsi/daemon"
 196                      title="iSCSI Gateway"
 197                      summaryType="iscsi"
 198                      *ngIf="healthData.iscsi_daemons"></cd-card-row>
 199       </li>
 200     </cd-card>
 201
 202     <cd-card cardTitle="Cluster utilization"
 203              i18n-title
 204              class="col-sm-9 px-3 d-flex"
 205              aria-label="Cluster utilization card">
 206       <div class="ms-4 me-4 mt-0">
 207         <cd-dashboard-time-selector (selectedTime)="getPrometheusData($event)">
 208         </cd-dashboard-time-selector>
 209         <ng-container *ngIf="capacity">
 210           <cd-dashboard-area-chart chartTitle="Used Capacity"
 211                                    [maxValue]="capacity.total_bytes"
 212                                    dataUnits="B"
 213                                    label="Used Capacity"
 214                                    [data]="queriesResults.USEDCAPACITY">
 215           </cd-dashboard-area-chart>
 216         </ng-container>
 217         <cd-dashboard-area-chart chartTitle="IOPS"
 218                                  dataUnits=""
 219                                  label="OPS"
 220                                  label2="IPS"
 221                                  [data]="queriesResults.OPS"
 222                                  [data2]="queriesResults.IPS">
 223         </cd-dashboard-area-chart>
 224         <cd-dashboard-area-chart chartTitle="Latency"
 225                                  dataUnits="ms"
 226                                  label="Read"
 227                                  label2="Write"
 228                                  [data]="queriesResults.READLATENCY"
 229                                  [data2]="queriesResults.WRITELATENCY">
 230         </cd-dashboard-area-chart>
 231         <cd-dashboard-area-chart chartTitle="Client Throughput"
 232                                  dataUnits="B/s"
 233                                  label="Read"
 234                                  label2="Write"
 235                                  [data]="queriesResults.READCLIENTTHROUGHPUT"
 236                                  [data2]="queriesResults.WRITECLIENTTHROUGHPUT">
 237         </cd-dashboard-area-chart>
 238         <cd-dashboard-area-chart chartTitle="Recovery Throughput"
 239                                  dataUnits="B/s"
 240                                  label="Recovery Throughput"
 241                                  [data]="queriesResults.RECOVERYBYTES">
 242         </cd-dashboard-area-chart>
 243       </div>
 244     </cd-card>
 245   </div>
 246 </div>
 247
 248 <ng-template #alertsCard>
 249   <ng-container *ngFor="let alert of alerts; let i = index">
 250     <div [ngClass]="borderClass"
 251          *ngIf="alertType === alert.labels.severity">
 252       <div class="card tc_alerts border-0 pt-3">
 253         <div class="row no-gutters">
 254           <div class="col-sm-1 text-center">
 255             <span [ngClass]="[icons.stack, icons.large, textClass]">
 256               <i [ngClass]="[icons.circle, icons.stack2x]"></i>
 257               <i [ngClass]="[icons.stack1x, icons.inverse, icons.warning]"></i>
 258             </span>
 259           </div>
 260           <div class="col-md-11">
 261             <div class="card-body ps-0 pe-1 pt-1">
 262               <h6 class="card-title bold">{{ alert.labels.alertname }}</h6>
 263               <p class="card-text me-3"
 264                  [innerHtml]="alert.annotations.summary"></p>
 265               <p class="card-text text-muted me-3">
 266                 <small class="date"
 267                        [title]="alert.startsAt | cdDate"
 268                        i18n>Active since: {{ alert.startsAt  | relativeDate }}</small>
 269               </p>
 270             </div>
 271           </div>
 272         </div>
 273       </div>
 274       <hr>
 275     </div>
 276   </ng-container>
 277 </ng-template>
 278
 279 <ng-template #logsLink>
 280   <ng-container *ngIf="permissions.log.read">
 281     <p class="logs-link"
 282        i18n><i [ngClass]="[icons.infoCircle]"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
 283   </ng-container>
 284 </ng-template>