From: bryanmontalvan <68972382+bryanmontalvan@users.noreply.github.com>
Date: Wed, 3 Aug 2022 01:39:05 +0000 (-0400)
Subject: mgr/dashboard: Start of status card
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=992cad77ac745fa1c2ab22687bfc37c27d3b35e8;p=ceph.git

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 8316d59d974..0b72e8c275a 100644
--- 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 e722fdf1e81..5c094b00fd5 100644
--- 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;
+    });
+  }
 }