summaryrefslogtreecommitdiffstats
path: root/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
diff options
context:
space:
mode:
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html')
-rw-r--r--src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html237
1 files changed, 237 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
new file mode 100644
index 000000000..71aac66d9
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.html
@@ -0,0 +1,237 @@
+<div *ngIf="healthData && enabledFeature$ | async as enabledFeature"
+ class="container-fluid">
+ <cd-info-group groupTitle="Status"
+ i18n-groupTitle
+ *ngIf="healthData.health?.status
+ || healthData.mon_status
+ || healthData.osd_map
+ || healthData.mgr_map
+ || healthData.hosts != null
+ || healthData.rgw != null
+ || healthData.fs_map
+ || healthData.iscsi_daemons != null">
+
+ <cd-info-card cardTitle="Cluster Status"
+ i18n-cardTitle
+ class="cd-status-card"
+ contentClass="content-highlight"
+ *ngIf="healthData.health?.status">
+ <ng-container *ngIf="healthData.health?.checks?.length > 0">
+ <ng-template #healthChecks>
+ <ng-container *ngTemplateOutlet="logsLink"></ng-container>
+ <ul>
+ <li *ngFor="let check of healthData.health.checks">
+ <span [ngStyle]="check.severity | healthColor">{{ check.type }}</span>: {{ check.summary.message }}
+ </li>
+ </ul>
+ </ng-template>
+ <div class="info-card-content-clickable"
+ [ngStyle]="healthData.health.status | healthColor"
+ [ngbPopover]="healthChecks"
+ popoverClass="info-card-popover-cluster-status">
+ {{ healthData.health.status }} <i *ngIf="healthData.health?.status != 'HEALTH_OK'"
+ class="fa fa-exclamation-triangle"></i>
+ </div>
+ </ng-container>
+ <ng-container *ngIf="!healthData.health?.checks?.length">
+ <div [ngStyle]="healthData.health.status | healthColor">
+ {{ healthData.health.status }}
+ </div>
+ </ng-container>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Hosts"
+ i18n-cardTitle
+ link="/hosts"
+ class="cd-status-card"
+ contentClass="content-highlight"
+ *ngIf="healthData.hosts != null">
+ {{ healthData.hosts }} total
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Monitors"
+ i18n-cardTitle
+ link="/monitor"
+ class="cd-status-card"
+ contentClass="content-highlight"
+ *ngIf="healthData.mon_status">
+ {{ healthData.mon_status | monSummary }}
+ </cd-info-card>
+
+ <cd-info-card cardTitle="OSDs"
+ i18n-cardTitle
+ link="/osd"
+ class="cd-status-card"
+ *ngIf="(healthData.osd_map | osdSummary) as transformedResult"
+ contentClass="content-highlight">
+ <span *ngFor="let result of transformedResult"
+ [ngClass]="result.class">
+ {{ result.content }}
+ </span>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Managers"
+ i18n-cardTitle
+ class="cd-status-card"
+ contentClass="content-highlight"
+ *ngIf="healthData.mgr_map">
+ <span *ngFor="let result of (healthData.mgr_map | mgrSummary)"
+ [ngClass]="result.class"
+ [title]="result.titleText != null ? result.titleText : ''">
+ {{ result.content }}
+ </span>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Object Gateways"
+ i18n-cardTitle
+ link="/rgw/daemon"
+ class="cd-status-card"
+ contentClass="content-highlight"
+ *ngIf="enabledFeature.rgw && healthData.rgw != null">
+ {{ healthData.rgw }} total
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Metadata Servers"
+ i18n-cardTitle
+ class="cd-status-card"
+ *ngIf="(enabledFeature.cephfs && healthData.fs_map | mdsSummary) as transformedResult"
+ [contentClass]="(transformedResult.length > 1 ? 'text-area-size-2' : '') + ' content-highlight'">
+ <!-- TODO: check text-area-size-2 -->
+ <span *ngFor="let result of transformedResult"
+ [ngClass]="result.class"
+ [title]="result.titleText != null ? result.titleText : ''">
+ {{ result.content }}
+ </span>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="iSCSI Gateways"
+ i18n-cardTitle
+ link="/block/iscsi"
+ class="cd-status-card"
+ contentClass="content-highlight"
+ *ngIf="enabledFeature.iscsi && healthData.iscsi_daemons != null">
+ {{ healthData.iscsi_daemons.up + healthData.iscsi_daemons.down }} total
+ <span class="card-text-line-break"></span>
+ {{ healthData.iscsi_daemons.up }} up,
+ <span [ngClass]="{'card-text-error': healthData.iscsi_daemons.down > 0}">{{ healthData.iscsi_daemons.down }}
+ down</span>
+ </cd-info-card>
+ </cd-info-group>
+
+ <cd-info-group groupTitle="Capacity"
+ i18n-groupTitle
+ *ngIf="healthData.pools
+ || healthData.df
+ || healthData.pg_info">
+ <cd-info-card cardTitle="Raw Capacity"
+ i18n-cardTitle
+ class="cd-capacity-card cd-chart-card"
+ contentClass="content-chart"
+ *ngIf="healthData.df">
+ <cd-health-pie [data]="healthData"
+ [config]="rawCapacityChartConfig"
+ [isBytesData]="true"
+ (prepareFn)="prepareRawUsage($event[0], $event[1])">
+ </cd-health-pie>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Objects"
+ i18n-cardTitle
+ class="cd-capacity-card cd-chart-card"
+ contentClass="content-chart"
+ *ngIf="healthData.pg_info?.object_stats?.num_objects != null">
+ <cd-health-pie [data]="healthData"
+ (prepareFn)="prepareObjects($event[0], $event[1])">
+ </cd-health-pie>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="PG Status"
+ i18n-cardTitle
+ class="cd-capacity-card cd-chart-card"
+ contentClass="content-chart"
+ *ngIf="healthData.pg_info">
+ <ng-template #pgStatus>
+ <ng-container *ngTemplateOutlet="logsLink"></ng-container>
+ <ul>
+ <li *ngFor="let pgStatesText of healthData.pg_info.statuses | keyvalue">
+ {{ pgStatesText.key }}: {{ pgStatesText.value }}
+ </li>
+ </ul>
+ </ng-template>
+ <div class="pg-status-popover-wrapper">
+ <div [ngbPopover]="pgStatus">
+ <cd-health-pie [data]="healthData"
+ [config]="pgStatusChartConfig"
+ (prepareFn)="preparePgStatus($event[0], $event[1])">
+ </cd-health-pie>
+ </div>
+ </div>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Pools"
+ i18n-cardTitle
+ link="/pool"
+ class="cd-capacity-card"
+ contentClass="content-highlight"
+ *ngIf="healthData.pools">
+ {{ healthData.pools.length }}
+ </cd-info-card>
+
+ <cd-info-card cardTitle="PGs per OSD"
+ i18n-cardTitle
+ class="cd-capacity-card"
+ contentClass="content-highlight"
+ *ngIf="healthData.pg_info">
+ {{ healthData.pg_info.pgs_per_osd | dimless }}
+ </cd-info-card>
+ </cd-info-group>
+
+ <cd-info-group groupTitle="Performance"
+ i18n-groupTitle
+ *ngIf="healthData.client_perf || healthData.scrub_status">
+ <cd-info-card cardTitle="Client Read/Write"
+ i18n-cardTitle
+ class="cd-performance-card cd-chart-card"
+ contentClass="content-chart"
+ *ngIf="healthData.client_perf">
+ <cd-health-pie [data]="healthData"
+ [config]="clientStatsConfig"
+ (prepareFn)="prepareReadWriteRatio($event[0], $event[1])">
+ </cd-health-pie>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Client Throughput"
+ i18n-cardTitle
+ class="cd-performance-card cd-chart-card"
+ contentClass="content-chart"
+ *ngIf="healthData.client_perf">
+ <cd-health-pie [data]="healthData"
+ [config]="clientStatsConfig"
+ (prepareFn)="prepareClientThroughput($event[0], $event[1])">
+ </cd-health-pie>
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Recovery Throughput"
+ i18n-cardTitle
+ class="cd-performance-card"
+ contentClass="content-highlight"
+ *ngIf="healthData.client_perf">
+ {{ (healthData.client_perf.recovering_bytes_per_sec | dimlessBinary) + '/s' }}
+ </cd-info-card>
+
+ <cd-info-card cardTitle="Scrubbing"
+ i18n-cardTitle
+ class="cd-performance-card"
+ contentClass="content-highlight"
+ *ngIf="healthData.scrub_status">
+ {{ healthData.scrub_status }}
+ </cd-info-card>
+ </cd-info-group>
+
+ <ng-template #logsLink>
+ <ng-container *ngIf="permissions.log.read">
+ <p class="logs-link"
+ i18n><i [ngClass]="[icons.infoCircle]"></i> See <a routerLink="/logs">Logs</a> for more details.</p>
+ </ng-container>
+ </ng-template>
+</div>
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-11 01:15:09 +0000