- <cd-card cardTitle="Cluster utilization"
- i18n-title
- class="col-sm-9 px-3 d-flex"
- aria-label="Cluster utilization card">
- <div class="ms-4 me-4 mt-0">
- <cd-dashboard-time-selector (selectedTime)="getPrometheusData($event)">
- </cd-dashboard-time-selector>
- <ng-container *ngIf="capacity">
- <cd-dashboard-area-chart chartTitle="Used Capacity"
- [maxValue]="capacity.total_bytes"
- dataUnits="B"
- label="Used Capacity"
- [data]="queriesResults.USEDCAPACITY">
- </cd-dashboard-area-chart>
- </ng-container>
- <cd-dashboard-area-chart chartTitle="IOPS"
- dataUnits=""
- label="OPS"
- label2="IPS"
- [data]="queriesResults.OPS"
- [data2]="queriesResults.IPS">
- </cd-dashboard-area-chart>
- <cd-dashboard-area-chart chartTitle="Latency"
- dataUnits="ms"
- label="Read"
- label2="Write"
- [data]="queriesResults.READLATENCY"
- [data2]="queriesResults.WRITELATENCY">
- </cd-dashboard-area-chart>
- <cd-dashboard-area-chart chartTitle="Client Throughput"
- dataUnits="B/s"
- label="Read"
- label2="Write"
- [data]="queriesResults.READCLIENTTHROUGHPUT"
- [data2]="queriesResults.WRITECLIENTTHROUGHPUT">
- </cd-dashboard-area-chart>
- <cd-dashboard-area-chart chartTitle="Recovery Throughput"
- dataUnits="B/s"
- label="Recovery Throughput"
- [data]="queriesResults.RECOVERYBYTES">
- </cd-dashboard-area-chart>
+ <!-- Second Grid to hold Status Capacity and Cluster Utilization Cards-->
+ <div class="col-sm-9 ps-0">
+ <div class="row">
+ <!-- This column will hold Status and Capacity cards-->
+ <div class="col-sm-8">
+ <cd-card cardTitle="Status"
+ i18n-title
+ aria-label="Status card"
+ class="status"
+ [alignItemsCenter]="true"
+ [cardFooter]="isAlertmanagerConfigured && prometheusAlertService.alerts.length"
+ [fullHeight]="true">
+ <div class="viewAlert"
+ *ngIf="prometheusAlertService.alerts.length">
+ <a href="#/monitoring/active-alerts"
+ i18n>
+ View alerts
+ </a>
+ </div>
+ <div class="d-flex flex-column ms-4 me-4 mt-4 mb-4">
+ <ng-template #healthChecks>
+ <ng-container *ngTemplateOutlet="logsLink"></ng-container>
+ <ul>
+ <li *ngFor="let check of healthData.health.checks">
+ <span [ngStyle]="check.severity | healthColor"
+ [class.health-warn-description]="check.severity === 'HEALTH_WARN'">
+ {{ check.type }}</span>: {{ check.summary.message }}
+ </li>
+ </ul>
+ </ng-template>
+
+ <div class="d-flex flex-row">
+ <i *ngIf="healthData.health?.status"
+ [ngClass]="[healthData.health.status | healthIcon, icons.large2x]"
+ [ngStyle]="healthData.health.status | healthColor"
+ [title]="healthData.health.status"></i>
+ <a class="ms-2 mt-n1 lead text-primary"
+ [ngbPopover]="healthChecks"
+ popoverClass="info-card-popover-cluster-status"
+ [openDelay]="300"
+ [closeDelay]="500"
+ triggers="mouseenter:mouseleave"
+ *ngIf="healthData.health?.checks?.length"
+ i18n>Cluster</a>
+ <span class="ms-2 mt-n1 lead"
+ *ngIf="!healthData.health?.checks?.length"
+ i18n>Cluster</span>
+ </div>
+ </div>
+ <section class="footer alerts"
+ *ngIf="isAlertmanagerConfigured && prometheusAlertService.alerts.length">
+ <div class="d-flex flex-wrap ms-4 me-4 mb-3 mt-3">
+ <span class="pt-2"
+ i18n>Alerts</span>
+
+ <!-- Potentially make widget component -->
+ <button class="btn btn-outline-danger rounded-pill ms-2"
+ [ngClass]="{'active': true && alertType === 'critical'}"
+ title="Danger"
+ (click)="toggleAlertsWindow('critical')"
+ id="dangerAlerts"
+ i18n-title
+ *ngIf="prometheusAlertService?.activeCriticalAlerts">
+ <i [ngClass]="[icons.danger]"></i>
+ <span>{{ prometheusAlertService.activeCriticalAlerts }}</span>
+ </button>
+
+ <button class="btn btn-outline-warning rounded-pill ms-2"
+ [ngClass]="{'active': true && alertType === 'warning'}"
+ title="Warning"
+ (click)="toggleAlertsWindow('warning')"
+ id="warningAlerts"
+ i18n-title
+ *ngIf="prometheusAlertService?.activeWarningAlerts">
+ <i [ngClass]="[icons.infoCircle]"></i>
+ <span>{{ prometheusAlertService.activeWarningAlerts }}</span>
+ </button>
+ </div>
+
+ <div class="alerts-section pt-0">
+ <hr class="mt-1 mb-0">
+ <ngx-simplebar [options]="simplebar">
+ <div class="card-body p-0">
+ <ng-container *ngTemplateOutlet="alertsCard"></ng-container>
+ </div>
+ </ngx-simplebar>
+ </div>
+ </section>
+ </cd-card>
+ </div>
+ <div class="col-sm-4 ps-0">
+ <cd-card cardTitle="Capacity"
+ i18n-title
+ [fullHeight]="true"
+ aria-label="Capacity card">
+ <ng-container class="ms-4 me-4"
+ *ngIf="capacity && osdSettings">
+ <cd-dashboard-pie [data]="{max: capacity.total_bytes, current: capacity.total_used_raw_bytes}"
+ [lowThreshold]="osdSettings.nearfull_ratio"
+ [highThreshold]="osdSettings.full_ratio">
+ </cd-dashboard-pie>
+ </ng-container>
+ </cd-card>
+ </div>
+
+ <!-- This column will hold Cluster Utlization card -->
+ <div class="col-sm-12 d-flex flex-column pt-4">
+ <cd-card cardTitle="Cluster Utilization"
+ i18n-title
+ aria-label="Cluster utilization card">
+ <div class="ms-4 me-4 mt-0">
+ <cd-dashboard-time-selector (selectedTime)="getPrometheusData($event)">
+ </cd-dashboard-time-selector>
+ <ng-container *ngIf="capacity">
+ <cd-dashboard-area-chart chartTitle="Used Capacity (RAW)"
+ [maxValue]="capacity.total_bytes"
+ dataUnits="B"
+ label="Used Capacity"
+ [data]="queriesResults.USEDCAPACITY">
+ </cd-dashboard-area-chart>
+ </ng-container>
+ <cd-dashboard-area-chart chartTitle="IOPS"
+ dataUnits=""
+ decimals="0"
+ label="Reads"
+ label2="Writes"
+ [data]="queriesResults.READIOPS"
+ [data2]="queriesResults.WRITEIOPS">
+ </cd-dashboard-area-chart>
+ <cd-dashboard-area-chart chartTitle="OSD Latencies"
+ dataUnits="ms"
+ decimals="2"
+ label="Apply"
+ label2="Commit"
+ [data]="queriesResults.READLATENCY"
+ [data2]="queriesResults.WRITELATENCY">
+ </cd-dashboard-area-chart>
+ <cd-dashboard-area-chart chartTitle="Client Throughput"
+ dataUnits="B/s"
+ decimals="2"
+ label="Reads"
+ label2="Writes"
+ [data]="queriesResults.READCLIENTTHROUGHPUT"
+ [data2]="queriesResults.WRITECLIENTTHROUGHPUT">
+ </cd-dashboard-area-chart>
+ <cd-dashboard-area-chart chartTitle="Recovery Throughput"
+ dataUnits="B/s"
+ decimals="2"
+ label="Recovery Throughput"
+ [data]="queriesResults.RECOVERYBYTES">
+ </cd-dashboard-area-chart>
+ </div>
+ </cd-card>
+ </div>