[CST-5535] Use accordion for health status components

2025-10-18 15:33:04 +00:00 · 2022-05-16 18:17:35 +02:00
parent 80ff8a517c
commit 4f7e37d348
10 changed files with 139 additions and 42 deletions
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.html
+++ b/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>-->
+
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.spec.ts
+++ b/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);
    });

--- a/src/app/health-page/health-info/health-info.component.html
+++ b/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>
--- a/src/app/health-page/health-info/health-info.component.spec.ts
+++ b/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();
  });
--- a/src/app/health-page/health-info/health-info.component.ts
+++ b/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];
+  }
 }
--- a/src/app/health-page/health-panel/health-component/health-component.component.html
+++ b/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>
--- a/src/app/health-page/health-panel/health-panel.component.html
+++ b/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"
+<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">
-      <span class="h4">{{ entry.key | titlecase }}</span>
+          {{ entry.key | titlecase }}
        </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 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 #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
-    <div class="card border-0">
-      <div class="card-body">
+      </div>
+    </ng-template>
+    <ng-template ngbPanelContent>
      <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"></ds-health-component>
-      </div>
-    </div>
-  </div>
-</div>
+    </ng-template>
+  </ngb-panel>
+</ngb-accordion>
+
+
--- a/src/app/health-page/health-panel/health-panel.component.spec.ts
+++ b/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);
  });
--- a/src/app/health-page/health-panel/health-panel.component.ts
+++ b/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];
+  }
 }
--- a/src/app/shared/mocks/health-endpoint.mocks.ts
+++ b/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'
+};