mgr/dashboard: add smart self report summary to details of osd-smart-list

Fixes: https://tracker.ceph.com/issues/41774
Signed-off-by: Patrick Seidensal <pseidensal@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.html
index d5e3fe1688a7e86bef38761933e30cb49e202d90..31a7bb8374c8ba37957d8a8b670db10afd01b650 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.html
@@ -9,6 +9,24 @@
           <cd-alert-panel type="warning">{{ device.value.userMessage }}</cd-alert-panel>
         </ng-container>
         <ng-template #noError>
+          <ng-container *ngIf="device.value.smart.data.self_test.status.passed; else selfTestFailed">
+            <cd-alert-panel
+              size="slim"
+              type="info"
+              i18n-title
+              title="SMART overall-health self-assessment test result">
+              {{ device.value.smart.data.self_test.status.string }}
+            </cd-alert-panel>
+          </ng-container>
+          <ng-template #selfTestFailed>
+            <cd-alert-panel
+              size="slim"
+              type="warning"
+              i18n-title
+              title="SMART overall-health self-assessment test result">
+              {{ device.value.smart.data.self_test.status.string }}
+            </cd-alert-panel>
+          </ng-template>
           <tabset>
             <tab i18n-heading
                  heading="Device Information">
@@ -18,7 +36,7 @@
 
             <tab i18n-heading
                  heading="S.M.A.R.T">
-              <cd-table [data]="device.value.smart.table"
+              <cd-table [data]="device.value.smart.attributes.table"
                         updateSelectionOnRefresh="never"
                         [columns]="columns"></cd-table>
             </tab>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.spec.ts
index c003d68e67e6de42f245147507af36ace4bacec4..826728477c473a4e0bf7cf1135ec5ef962128690 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.spec.ts
@@ -1,7 +1,8 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { SimpleChange, SimpleChanges } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TabsModule } from 'ngx-bootstrap/tabs';
+import { By } from '@angular/platform-browser';
+import { TabsetComponent, TabsetConfig, TabsModule } from 'ngx-bootstrap/tabs';
 
 import _ = require('lodash');
 import { of } from 'rxjs';
@@ -62,7 +63,7 @@ describe('OsdSmartListComponent', () => {
   configureTestBed({
     declarations: [OsdSmartListComponent],
     imports: [TabsModule, SharedModule, HttpClientTestingModule],
-    providers: [i18nProviders]
+    providers: [i18nProviders, TabsetComponent, TabsetConfig]
   });
 
   beforeEach(() => {
@@ -103,4 +104,26 @@ describe('OsdSmartListComponent', () => {
     expect(component.data).toEqual({});
     expect(component.incompatible).toBeTruthy();
   });
+
+  it('should display info panel for passed self test', () => {
+    initializeComponentWithData();
+    fixture.detectChanges();
+    const alertPanel = fixture.debugElement.query(By.css('cd-alert-panel'));
+    expect(component.incompatible).toBe(false);
+    expect(component.loading).toBe(false);
+    expect(alertPanel.attributes.size).toBe('slim');
+    expect(alertPanel.attributes.title).toBe('SMART overall-health self-assessment test result');
+    expect(alertPanel.attributes.type).toBe('info');
+  });
+
+  it('should display warning panel for failed self test', () => {
+    initializeComponentWithData(patchData('ata_smart_data.self_test.status.passed', false));
+    fixture.detectChanges();
+    const alertPanel = fixture.debugElement.query(By.css('cd-alert-panel'));
+    expect(component.incompatible).toBe(false);
+    expect(component.loading).toBe(false);
+    expect(alertPanel.attributes.size).toBe('slim');
+    expect(alertPanel.attributes.title).toBe('SMART overall-health self-assessment test result');
+    expect(alertPanel.attributes.type).toBe('warning');
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.ts
index 26f0965ae98fca043a17d7164fc6490e3623e002..24ae7a0436c6559726e10c0c221c066877c71463 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-smart-list/osd-smart-list.component.ts
@@ -79,7 +79,10 @@ export class OsdSmartListComponent implements OnInit, OnChanges {
           // Build result
           result[deviceId] = {
             info: info,
-            smart: smartData.ata_smart_attributes,
+            smart: {
+              attributes: smartData.ata_smart_attributes,
+              data: smartData.ata_smart_data
+            },
             device: info.device.name,
             identifier: info.serial_number
           };

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
index a4c22848935834e6c30c51408f5a5bd8289b63db..490164b22e1612b48891b697faec9584c3b2bbbc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.html
@@ -1,20 +1,39 @@
 <alert type="{{ bootstrapClass }}">
   <table>
-    <tr>
-      <td rowspan="2" class="alert-panel-icon">
-        <i [ngClass]="[icons.large3x]" class="alert-{{ bootstrapClass }} {{ typeIcon }}"
-           aria-hidden="true"></i>
-      </td>
-      <td class="alert-panel-title">{{ title }}</td>
-    </tr>
-    <tr>
-      <td class="alert-panel-text">
-        <ng-content></ng-content>
-      </td>
-    </tr>
+    <ng-container *ngIf="size === 'normal'; else slim">
+      <tr>
+        <td *ngIf="showIcon"
+            rowspan="2" class="alert-panel-icon">
+          <i [ngClass]="[icons.large3x]" class="alert-{{ bootstrapClass }} {{ typeIcon }}"
+             aria-hidden="true"></i>
+        </td>
+        <td class="alert-panel-title">{{ title }}</td>
+      </tr>
+      <tr>
+        <td class="alert-panel-text">
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </td>
+      </tr>
+    </ng-container>
+    <ng-template #slim>
+      <tr>
+        <td *ngIf="showIcon" class="alert-panel-icon">
+          <i class="alert-{{ bootstrapClass }} {{ typeIcon }}"
+             aria-hidden="true"></i>
+        </td>
+        <td class="alert-panel-title">{{ title }}</td>
+        <td class="alert-panel-text">
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </td>
+      </tr>
+    </ng-template>
   </table>
 </alert>
 
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>
+
 <div class="button-group text-right"
      *ngIf="backAction.observers.length > 0">
   <button class="btn btn-light tc_backButton"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.scss
index a663f9295dc776c4d28511dff6fbed2ee78c02ea..29ae0e2ff34ecae92c87175549095f6e92ad9ac7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.scss
@@ -1,6 +1,6 @@
 .alert-panel-icon {
   vertical-align: top;
-  padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
+  padding-right: 0.5em;
 }
 
 .alert-panel-title {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts
index 90ce8c361e08f0461421b6db740bf9bb824a96e6..12b2a83237619230189b494e575cdbf0459d43ab 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.ts
@@ -14,11 +14,14 @@ export class AlertPanelComponent implements OnInit {
   bootstrapClass = '';
   @Output()
   backAction = new EventEmitter();
-
   @Input()
-  type: 'warning' | 'error' | 'info';
+  type: 'warning' | 'error' | 'info' | 'success';
   @Input()
   typeIcon: Icons | string;
+  @Input()
+  size: 'slim' | 'normal' = 'normal';
+  @Input()
+  showIcon = true;
 
   icons = Icons;