mgr/dashboard: Start of status card

This commit is the bare-bones work of the status card. The only logic
written in this commit is the Cluster health status icon.

Signed-off-by: bryanmontalvan <bmontalv@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html
index 8316d59d974ec4854d0cf08f19949598f7be6379..0b72e8c275a0e1568ec5c970437c4a9ddb6f05e5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.html
@@ -13,10 +13,44 @@
       </dl>
     </cd-card>
 
-    <cd-card title="Status"
+    <cd-card *ngIf="healthData"
+             title="Status"
              i18n-title
              class="col-sm-6 px-3">
-             Text
+      <div class="d-flex">
+        <i *ngIf="healthData.health?.status != 'HEALTH_OK'"
+           class="pl-2 fa fa-exclamation-triangle text-warning"></i>
+        <i *ngIf="healthData.health?.status == 'HEALTH_OK'"
+           class="pl-2 fa fa-check-circle text-success"></i>
+        <p class="pl-2 pr-5">Cluster</p>
+        <i class="fa fa-exclamation-triangle"></i>
+        <p class="pl-2">Data Health</p>
+      </div>
+      <hr />
+      <div class="d-flex flex-wrap">
+        <p>Notifications</p>
+        <!-- Potentially make widget component -->
+        <button class="ml-3 btn btn-outline-danger rounded-pill">
+          <i class="fa fa-exclamation-circle"></i>
+          <a>1</a>
+        </button>
+        <span class="ml-2 btn btn-outline-warning rounded-pill">
+          <i class="fa fa-exclamation-triangle"></i>
+          <a>1</a>
+        </span>
+        <span class="ml-2 btn btn-outline-success rounded-pill">
+          <i class="fa fa-check-circle"></i>
+          <a>1</a>
+        </span>
+        <span class="ml-2 btn btn-outline-primary rounded-pill">
+          <i class="fa fa-info-circle"></i>
+          <a>1</a>
+        </span>
+        <span class="ml-2 btn btn-outline-info rounded-pill">
+          <i class="fa fa-bell"></i>
+          <a>1</a>
+        </span>
+      </div>
     </cd-card>
 
     <cd-card title="Capacity"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
index e722fdf1e81b53ff162aad29874416efaa33148c..5c094b00fd540fbeeb746f2aa1a5be9b6edf3fe2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.ts
@@ -5,6 +5,7 @@ import { Observable, Subscription } from 'rxjs';
 
 import { ClusterService } from '~/app/shared/api/cluster.service';
 import { ConfigurationService } from '~/app/shared/api/configuration.service';
+import { HealthService } from '~/app/shared/api/health.service';
 import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
 import { OsdService } from '~/app/shared/api/osd.service';
 import { DashboardDetails } from '~/app/shared/models/cd-details';
@@ -29,6 +30,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   enabledFeature$: FeatureTogglesMap$;
   color: string;
   capacity$: Observable<any>;
+  healthData: any;
   constructor(
     private summaryService: SummaryService,
     private configService: ConfigurationService,
@@ -36,7 +38,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
     private clusterService: ClusterService,
     private osdService: OsdService,
     private authStorageService: AuthStorageService,
-    private featureToggles: FeatureTogglesService
+    private featureToggles: FeatureTogglesService,
+    private healthService: HealthService
   ) {
     this.permissions = this.authStorageService.getPermissions();
     this.enabledFeature$ = this.featureToggles.get();
@@ -47,6 +50,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 
     this.osdSettings$ = this.osdService.getOsdSettings();
     this.capacity$ = this.clusterService.getCapacity();
+    this.getHealth();
   }
 
   ngOnDestroy() {
@@ -67,4 +71,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
         version[0] + ' ' + version.slice(2, version.length).join(' ');
     });
   }
+
+  getHealth() {
+    this.healthService.getMinimalHealth().subscribe((data: any) => {
+      this.healthData = data;
+    });
+  }
 }