mgr/dashboard: details card

mgr/dashboard: added interface, changed html table to list, using mgrModuleService now

Signed-off-by: Pedro Gonzalez Gomez <pegonzal@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 24cfd5445b4c1113594858b41cd5874a21f50753..c384687fbdad36c41a699229a240792ab8dd4fb0 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
@@ -3,7 +3,14 @@
     <cd-card title="Details"
              i18n-title
              class="col-sm-3 px-3">
-             Text
+      <dl>
+        <dt>FSID</dt>
+        <dd>{{ detailsCardData.fsid }}</dd>
+        <dt>Orchestror</dt>
+        <dd>{{ detailsCardData.orchestrator }}</dd>
+        <dt>Ceph version</dt>
+        <dd>{{ detailsCardData.cephVersion }}</dd>
+      </dl>
     </cd-card>
 
     <cd-card title="Status"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts
index 0e29e14954d5c14042e737635118c4d1c5101f88..1361a64eba0d191825d39401b6a6ff0408e21995 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/new-dashboard/dashboard/dashboard.component.spec.ts
@@ -1,22 +1,62 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 
+import { BehaviorSubject, of } from 'rxjs';
+
+import { ConfigurationService } from '~/app/shared/api/configuration.service';
+import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
+import { SummaryService } from '~/app/shared/services/summary.service';
 import { configureTestBed } from '~/testing/unit-test-helper';
 import { CardComponent } from '../card/card.component';
 import { DashboardComponent } from './dashboard.component';
 
+export class SummaryServiceMock {
+  summaryDataSource = new BehaviorSubject({
+    version:
+      'ceph version 17.0.0-12222-gcd0cd7cb ' +
+      '(b8193bb4cda16ccc5b028c3e1df62bc72350a15d) quincy (dev)'
+  });
+  summaryData$ = this.summaryDataSource.asObservable();
+
+  subscribe(call: any) {
+    return this.summaryData$.subscribe(call);
+  }
+}
+
 describe('CardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
+  let configurationService: ConfigurationService;
+  let orchestratorService: MgrModuleService;
+
+  const configValueData: any = {
+    value: [
+      {
+        section: 'mgr',
+        value: 'e90a0d58-658e-4148-8f61-e896c86f0696'
+      }
+    ]
+  };
+
+  const orchData: any = {
+    log_level: '',
+    log_to_cluster: false,
+    log_to_cluster_level: 'info',
+    log_to_file: false,
+    orchestrator: 'cephadm'
+  };
 
   configureTestBed({
-    imports: [RouterTestingModule],
-    declarations: [DashboardComponent, CardComponent]
+    imports: [HttpClientTestingModule],
+    declarations: [DashboardComponent, CardComponent],
+    providers: [{ provide: SummaryService, useClass: SummaryServiceMock }]
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DashboardComponent);
     component = fixture.componentInstance;
+    configurationService = TestBed.inject(ConfigurationService);
+    orchestratorService = TestBed.inject(MgrModuleService);
   });
 
   it('should create', () => {
@@ -27,4 +67,13 @@ describe('CardComponent', () => {
     const dashboardCards = fixture.debugElement.nativeElement.querySelectorAll('cd-card');
     expect(dashboardCards.length).toBe(6);
   });
+
+  it('should get corresponding data into detailsCardData', () => {
+    spyOn(configurationService, 'get').and.returnValue(of(configValueData));
+    spyOn(orchestratorService, 'getConfig').and.returnValue(of(orchData));
+    component.ngOnInit();
+    expect(component.detailsCardData.fsid).toBe('e90a0d58-658e-4148-8f61-e896c86f0696');
+    expect(component.detailsCardData.orchestrator).toBe('Cephadm');
+    expect(component.detailsCardData.cephVersion).toBe('17.0.0-12222-gcd0cd7cb quincy (dev)');
+  });
 });

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 e18b06df0333ce9199a5f83b2b0aa7b1f6a725cd..775c5eabe5ab289e333adf231825e07010e984cd 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
@@ -1,8 +1,40 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { ConfigurationService } from '~/app/shared/api/configuration.service';
+import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
+import { DashboardDetails } from '~/app/shared/models/cd-details';
+import { SummaryService } from '~/app/shared/services/summary.service';
 
 @Component({
   selector: 'cd-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent {}
+export class DashboardComponent implements OnInit {
+  detailsCardData: DashboardDetails = {};
+
+  constructor(
+    private summaryService: SummaryService,
+    private configService: ConfigurationService,
+    private mgrModuleService: MgrModuleService
+  ) {}
+
+  ngOnInit() {
+    this.getDetailsCardData();
+  }
+
+  getDetailsCardData() {
+    this.configService.get('fsid').subscribe((data) => {
+      this.detailsCardData.fsid = data['value'][0]['value'];
+    });
+    this.mgrModuleService.getConfig('orchestrator').subscribe((data) => {
+      const orchStr = data['orchestrator'];
+      this.detailsCardData.orchestrator = orchStr.charAt(0).toUpperCase() + orchStr.slice(1);
+    });
+    this.summaryService.subscribe((summary) => {
+      const version = summary.version.replace('ceph version ', '').split(' ');
+      this.detailsCardData.cephVersion =
+        version[0] + ' ' + version.slice(2, version.length).join(' ');
+    });
+  }
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-details.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-details.ts
new file mode 100644 (file)
index 0000000..d021f19
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-details.ts
@@ -0,0 +1,5 @@
+export interface DashboardDetails {
+  fsid?: string;
+  orchestrator?: string;
+  cephVersion?: string;
+}