1 files changed, 110 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html
new file mode 100644
index 000000000..805d7558e
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/shared/smart-list/smart-list.component.html
@@ -0,0 +1,110 @@
+<ng-container *ngIf="!loading; else isLoading">
+  <cd-alert-panel *ngIf="error"
+                  type="error"
+                  i18n>Failed to retrieve SMART data.</cd-alert-panel>
+  <cd-alert-panel *ngIf="incompatible"
+                  type="warning"
+                  i18n>The data received has the JSON format version 2.x and is currently incompatible with the
+    dashboard.</cd-alert-panel>
+
+  <ng-container *ngIf="!error && !incompatible">
+    <cd-alert-panel *ngIf="data | pipeFunction:isEmpty"
+                    type="info"
+                    i18n>No SMART data available.</cd-alert-panel>
+
+    <ng-container *ngIf="!(data | pipeFunction:isEmpty)">
+      <ul ngbNav
+          #nav="ngbNav"
+          class="nav-tabs">
+        <li ngbNavItem
+            *ngFor="let device of data | keyvalue">
+          <a ngbNavLink>{{ device.value.device }} ({{ device.value.identifier }})</a>
+          <ng-template ngbNavContent>
+            <ng-container *ngIf="device.value.error; else noError">
+              <cd-alert-panel id="alert-error"
+                              type="warning">{{ device.value.userMessage }}</cd-alert-panel>
+            </ng-container>
+
+            <ng-template #noError>
+              <cd-alert-panel *ngIf="device.value.info?.smart_status | pipeFunction:isEmpty; else hasSmartStatus"
+                              id="alert-self-test-unknown"
+                              size="slim"
+                              type="warning"
+                              i18n-title
+                              title="SMART overall-health self-assessment test result"
+                              i18n>unknown</cd-alert-panel>
+              <ng-template #hasSmartStatus>
+                <!-- HDD/NVMe self test -->
+                <ng-container *ngIf="device.value.info.smart_status.passed; else selfTestFailed">
+                  <cd-alert-panel id="alert-self-test-passed"
+                                  size="slim"
+                                  type="info"
+                                  i18n-title
+                                  title="SMART overall-health self-assessment test result"
+                                  i18n>passed</cd-alert-panel>
+                </ng-container>
+                <ng-template #selfTestFailed>
+                  <cd-alert-panel id="alert-self-test-failed"
+                                  size="slim"
+                                  type="warning"
+                                  i18n-title
+                                  title="SMART overall-health self-assessment test result"
+                                  i18n>failed</cd-alert-panel>
+                </ng-template>
+              </ng-template>
+            </ng-template>
+
+            <ng-container *ngIf="!(device.value.info | pipeFunction:isEmpty) || !(device.value.smart | pipeFunction:isEmpty)">
+              <ul ngbNav
+                  #innerNav="ngbNav"
+                  class="nav-tabs">
+                <li [ngbNavItem]="1">
+                  <a ngbNavLink
+                     i18n>Device Information</a>
+                  <ng-template ngbNavContent>
+                    <cd-table-key-value *ngIf="!(device.value.info | pipeFunction:isEmpty)"
+                                        [renderObjects]="true"
+                                        [data]="device.value.info"></cd-table-key-value>
+                    <cd-alert-panel *ngIf="device.value.info | pipeFunction:isEmpty"
+                                    id="alert-device-info-unavailable"
+                                    type="info"
+                                    i18n>No device information available for this device.</cd-alert-panel>
+                  </ng-template>
+                </li>
+                <li [ngbNavItem]="2">
+                  <a ngbNavLink
+                     i18n>SMART</a>
+                  <ng-template ngbNavContent>
+                    <cd-table *ngIf="device.value.smart?.attributes"
+                              [data]="device.value.smart.attributes.table"
+                              updateSelectionOnRefresh="never"
+                              [columns]="smartDataColumns"></cd-table>
+                    <cd-table-key-value *ngIf="device.value.smart?.scsi_error_counter_log"
+                                        [renderObjects]="true"
+                                        [data]="device.value.smart"
+                                        updateSelectionOnRefresh="never"></cd-table-key-value>
+                    <cd-table-key-value *ngIf="device.value.smart?.nvmeData"
+                                        [renderObjects]="true"
+                                        [data]="device.value.smart.nvmeData"
+                                        updateSelectionOnRefresh="never"></cd-table-key-value>
+                    <cd-alert-panel *ngIf="!device.value.smart?.attributes && !device.value.smart?.nvmeData && !device.value.smart?.scsi_error_counter_log"
+                                    id="alert-device-smart-data-unavailable"
+                                    type="info"
+                                    i18n>No SMART data available for this device.</cd-alert-panel>
+                  </ng-template>
+                </li>
+              </ul>
+
+              <div [ngbNavOutlet]="innerNav"></div>
+            </ng-container>
+          </ng-template>
+        </li>
+      </ul>
+
+      <div [ngbNavOutlet]="nav"></div>
+    </ng-container>
+  </ng-container>
+</ng-container>
+<ng-template #isLoading>
+  <cd-loading-panel i18n>SMART data is loading.</cd-loading-panel>
+</ng-template>