[CST-5535] Use accordion for health status components

src/app/health-page/health-info/health-info-component/health-info-component.component.html

@@ -1,4 +1,34 @@
-<ng-container *ngIf="healthInfoComponent && !isPlainProperty(healthInfoComponent)">
+<div *ngFor="let entry of healthInfoComponent | dsObjNgFor" data-test="collapse">
+  <div *ngIf="entry && !isPlainProperty(entry.value)" class="mb-3 border-bottom">
+    <div class="w-100 d-flex justify-content-between" (click)="collapse.toggle()">
+      <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
+              aria-controls="collapseExample">
+        {{ entry.key | titlecase }}
+      </button>
+      <div class="d-inline-block">
+        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+      </div>
+    </div>
+    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+      <div class="card border-0">
+        <div class="card-body">
+          <ds-health-info-component [healthInfoComponent]="entry.value"
+                                    [healthInfoComponentName]="entry.key"
+                                    [isNested]="true"
+                                    data-test="info-component"></ds-health-info-component>
+        </div>
+      </div>
+    </div>
+  </div>
+  <ng-container *ngIf="entry && isPlainProperty(entry.value)">
+    <p data-test="property"> <span class="font-weight-bold">{{ entry.key | titlecase }}</span> : {{entry.value}}</p>
+  </ng-container>
+</div>
+
+
+<!--
+
   <div class="mb-3 border-bottom" >
     <div class="w-100 d-flex justify-content-between py-2 mb-0" (click)="collapse.toggle()">
       <button type="button" class="btn btn-link p-0 " (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
@@ -22,7 +52,5 @@
       </div>
     </div>
   </div>
-</ng-container>
-<ng-container *ngIf="healthInfoComponent && isPlainProperty(healthInfoComponent)">
-  <p data-test="property"> <span class="font-weight-bold">{{ healthInfoComponentName | titlecase }}</span> : {{healthInfoComponent}}</p>
-</ng-container>
+</ng-container>-->
+

src/app/health-page/health-info/health-info-component/health-info-component.component.spec.ts

@@ -46,7 +46,9 @@ describe('HealthInfoComponentComponent', () => {
     });
 
     it('should display property', () => {
-      const components = fixture.debugElement.queryAll(By.css('[data-test="component"]'));
+      const properties = fixture.debugElement.queryAll(By.css('[data-test="property"]'));
+      expect(properties.length).toBe(14);
+      const components = fixture.debugElement.queryAll(By.css('[data-test="info-component"]'));
       expect(components.length).toBe(4);
     });
 

src/app/health-page/health-info/health-info.component.html

@@ -1,7 +1,33 @@
 <ng-container *ngIf="healthInfoResponse">
-  <div *ngFor="let entry of healthInfoResponse | dsObjNgFor" class="mb-3">
+  <ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
+    <ngb-panel [id]="entry.key" *ngFor="let entry of healthInfoResponse | dsObjNgFor">
+      <ng-template ngbPanelHeader>
+        <div class="w-100 d-flex justify-content-between" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="info-component">
+          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded(entry.key)"
+                  aria-controls="collapseExample">
+            {{ entry.key | titlecase }}
+          </button>
+          <div class="text-right d-flex">
+            <ds-health-status [status]="entry.value?.status"></ds-health-status>
+            <div class="ml-3 d-inline-block">
+              <span *ngIf="acc.isExpanded(entry.key)" class="fas fa-chevron-up fa-fw"></span>
+              <span *ngIf="!acc.isExpanded(entry.key)" class="fas fa-chevron-down fa-fw"></span>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+      <ng-template ngbPanelContent>
+        <ds-health-info-component [healthInfoComponentName]="entry.key"
+                                  [healthInfoComponent]="entry.value"></ds-health-info-component>
+      </ng-template>
+    </ngb-panel>
+  </ngb-accordion>
+
+
+
+<!--  <div *ngFor="let entry of healthInfoResponse | dsObjNgFor" class="mb-3">
     <ds-health-info-component [healthInfoComponentName]="entry.key"
                               [healthInfoComponent]="entry.value"
                               data-test="info-component"></ds-health-info-component>
-  </div>
+  </div>-->
 </ng-container>

src/app/health-page/health-info/health-info.component.spec.ts

@@ -4,6 +4,8 @@ import { HealthInfoComponent } from './health-info.component';
 import { HealthInfoResponseObj } from '../../shared/mocks/health-endpoint.mocks';
 import { ObjNgFor } from '../../shared/utils/object-ngfor.pipe';
 import { By } from '@angular/platform-browser';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 describe('HealthInfoComponent', () => {
   let component: HealthInfoComponent;
@@ -11,10 +13,14 @@ describe('HealthInfoComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [
+        NgbAccordionModule,
+      ],
       declarations: [
         HealthInfoComponent,
         ObjNgFor
-      ]
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();
   });

src/app/health-page/health-info/health-info.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 import { HealthInfoResponse } from '../models/health-component.model';
 
@@ -7,8 +7,16 @@ import { HealthInfoResponse } from '../models/health-component.model';
   templateUrl: './health-info.component.html',
   styleUrls: ['./health-info.component.scss']
 })
-export class HealthInfoComponent {
+export class HealthInfoComponent implements OnInit  {
 
   @Input() healthInfoResponse: HealthInfoResponse;
 
+  /**
+   * The first active panel id
+   */
+  activeId: string;
+
+  ngOnInit(): void {
+    this.activeId = Object.keys(this.healthInfoResponse)[0];
+  }
 }

src/app/health-page/health-panel/health-component/health-component.component.html

@@ -22,6 +22,7 @@
 </ng-container>
 <ng-container *ngIf="healthComponent?.details">
   <div *ngFor="let item of healthComponent?.details | dsObjNgFor" data-test="details">
-    <span class="font-weight-bold">{{ item.key | titlecase }}</span> : {{item.value}}
+    <p data-test="property"><span class="font-weight-bold">{{ item.key | titlecase }}</span> : {{item.value}}</p>
+
   </div>
 </ng-container>

src/app/health-page/health-panel/health-panel.component.html

@@ -1,21 +1,25 @@
 <p class="h2">{{'health-page.status' | translate}} : <ds-health-status [status]="healthResponse.status"></ds-health-status></p>
-<div class="mb-3 border-bottom " *ngFor="let entry of healthResponse.components | dsObjNgFor" data-test="component">
-  <div class="w-100 d-flex justify-content-between py-2 mb-0" (click)="collapse.toggle()">
-    <button type="button" class="btn btn-link p-0 " (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
-            aria-controls="collapseExample">
-      <span class="h4">{{ entry.key | titlecase }}</span>
-    </button>
-    <div class="d-inline-block">
-      <span><ds-health-status [status]="entry.value?.status"></ds-health-status></span>
-      <span *ngIf="collapse.collapsed" class="ml-2 fas fa-chevron-down"></span>
-      <span *ngIf="!collapse.collapsed" class="ml-2 fas fa-chevron-up"></span>
-    </div>
-  </div>
-  <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
-    <div class="card border-0">
-      <div class="card-body">
-        <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"></ds-health-component>
+<ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
+  <ngb-panel [id]="entry.key" *ngFor="let entry of healthResponse.components | dsObjNgFor">
+    <ng-template ngbPanelHeader>
+      <div class="w-100 d-flex justify-content-between" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="component">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!acc.isExpanded(entry.key)"
+                aria-controls="collapseExample">
+          {{ entry.key | titlecase }}
+        </button>
+        <div class="text-right d-flex">
+          <ds-health-status [status]="entry.value?.status"></ds-health-status>
+          <div class="ml-3 d-inline-block">
+            <span *ngIf="acc.isExpanded(entry.key)" class="fas fa-chevron-up fa-fw"></span>
+            <span *ngIf="!acc.isExpanded(entry.key)" class="fas fa-chevron-down fa-fw"></span>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-</div>
+    </ng-template>
+    <ng-template ngbPanelContent>
+      <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"></ds-health-component>
+    </ng-template>
+  </ngb-panel>
+</ngb-accordion>
+
+

src/app/health-page/health-panel/health-panel.component.spec.ts

@@ -5,14 +5,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { NgbCollapseModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbAccordionModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 import { HealthPanelComponent } from './health-panel.component';
 import { HealthResponseObj } from '../../shared/mocks/health-endpoint.mocks';
 import { ObjNgFor } from '../../shared/utils/object-ngfor.pipe';
 
-describe('HealthComponent', () => {
+describe('HealthPanelComponent', () => {
   let component: HealthPanelComponent;
   let fixture: ComponentFixture<HealthPanelComponent>;
 
@@ -20,7 +20,7 @@ describe('HealthComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         NgbNavModule,
-        NgbCollapseModule,
+        NgbAccordionModule,
         CommonModule,
         BrowserAnimationsModule,
         TranslateModule.forRoot({
@@ -42,7 +42,6 @@ describe('HealthComponent', () => {
     fixture = TestBed.createComponent(HealthPanelComponent);
     component = fixture.componentInstance;
     component.healthResponse = HealthResponseObj;
-    component.isCollapsed = false;
     fixture.detectChanges();
   });
 
@@ -50,7 +49,7 @@ describe('HealthComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should render a card for each component', () => {
+  it('should render a panel for each component', () => {
     const components = fixture.debugElement.queryAll(By.css('[data-test="component"]'));
     expect(components.length).toBe(5);
   });

src/app/health-page/health-panel/health-panel.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { HealthResponse } from '../models/health-component.model';
 
 @Component({
@@ -6,7 +6,7 @@ import { HealthResponse } from '../models/health-component.model';
   templateUrl: './health-panel.component.html',
   styleUrls: ['./health-panel.component.scss']
 })
-export class HealthPanelComponent {
+export class HealthPanelComponent implements OnInit {
 
   /**
    * Health endpoint response
@@ -14,8 +14,11 @@ export class HealthPanelComponent {
   @Input() healthResponse: HealthResponse;
 
   /**
-   * A boolean representing if div should start collapsed
+   * The first active panel id
    */
-  public isCollapsed = true;
+  activeId: string;
 
+  ngOnInit(): void {
+    this.activeId = Object.keys(this.healthResponse.components)[0];
+  }
 }

src/app/shared/mocks/health-endpoint.mocks.ts

@@ -134,7 +134,27 @@ export const HealthInfoComponentOne: HealthInfoComponent = {
   'name': 'DSpace at My University',
   'dir': '/home/giuseppe/development/java/install/dspace7-review',
   'url': 'http://localhost:8080/server',
-  'db': 'jdbc:postgresql://localhost:5432/dspace7'
+  'db': 'jdbc:postgresql://localhost:5432/dspace7',
+  'solr': {
+    'server': 'http://localhost:8983/solr',
+    'prefix': ''
+  },
+  'mail': {
+    'server': 'smtp.example.com',
+    'from-address': 'dspace-noreply@myu.edu',
+    'feedback-recipient': 'dspace-help@myu.edu',
+    'mail-admin': 'dspace-help@myu.edu',
+    'mail-helpdesk': 'dspace-help@myu.edu',
+    'alert-recipient': 'dspace-help@myu.edu'
+  },
+  'cors': {
+    'allowed-origins': 'http://localhost:4000'
+  },
+  'ui': {
+    'url': 'http://localhost:4000'
+  }
 };
 
-export const HealthInfoComponentTwo = '7.3-SNAPSHOT';
+export const HealthInfoComponentTwo = {
+  'version': '7.3-SNAPSHOT'
+};