[CST-5535] Refactoring health page

package.json

@@ -59,7 +59,6 @@
     "@angular/core": "~13.2.6",
     "@angular/forms": "~13.2.6",
     "@angular/localize": "13.2.6",
-    "@angular/material": "13.3.5",
     "@angular/platform-browser": "~13.2.6",
     "@angular/platform-browser-dynamic": "~13.2.6",
     "@angular/platform-server": "~13.2.6",

src/app/app-routing-paths.ts

@@ -116,3 +116,5 @@ export const REQUEST_COPY_MODULE_PATH = 'request-a-copy';
 export function getRequestCopyModulePath() {
   return `/${REQUEST_COPY_MODULE_PATH}`;
 }
+
+export const HEALTH_PAGE_PATH = 'health';

src/app/app-routing.module.ts

@@ -3,13 +3,16 @@ import { RouterModule } from '@angular/router';
 import { AuthBlockingGuard } from './core/auth/auth-blocking.guard';
 
 import { AuthenticatedGuard } from './core/auth/authenticated.guard';
-import { SiteAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
+import {
+  SiteAdministratorGuard
+} from './core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 import {
   ACCESS_CONTROL_MODULE_PATH,
   ADMIN_MODULE_PATH,
   BITSTREAM_MODULE_PATH,
   FORBIDDEN_PATH,
   FORGOT_PASSWORD_PATH,
+  HEALTH_PAGE_PATH,
   INFO_MODULE_PATH,
   INTERNAL_SERVER_ERROR,
   LEGACY_BITSTREAM_MODULE_PATH,
@@ -27,8 +30,12 @@ import { EndUserAgreementCurrentUserGuard } from './core/end-user-agreement/end-
 import { SiteRegisterGuard } from './core/data/feature-authorization/feature-authorization-guard/site-register.guard';
 import { ThemedPageNotFoundComponent } from './pagenotfound/themed-pagenotfound.component';
 import { ThemedForbiddenComponent } from './forbidden/themed-forbidden.component';
-import { GroupAdministratorGuard } from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
+import {
-import { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
+  GroupAdministratorGuard
+} from './core/data/feature-authorization/feature-authorization-guard/group-administrator.guard';
+import {
+  ThemedPageInternalServerErrorComponent
+} from './page-internal-server-error/themed-page-internal-server-error.component';
 import { ServerCheckGuard } from './core/server-check/server-check.guard';
 
 @NgModule({
@@ -209,9 +216,9 @@ import { ServerCheckGuard } from './core/server-check/server-check.guard';
               .then((m) => m.StatisticsPageRoutingModule)
           },
           {
-            path: 'health',
+            path: HEALTH_PAGE_PATH,
-            loadChildren: () => import('./health-page/health.module')
+            loadChildren: () => import('./health-page/health-page.module')
-              .then((m) => m.HealthModule)
+              .then((m) => m.HealthPageModule)
           },
           {
             path: ACCESS_CONTROL_MODULE_PATH,

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

@@ -0,0 +1,28 @@
+<ng-container *ngIf="healthInfoComponent && !isPlainProperty(healthInfoComponent)">
+  <div class="mb-3 border-bottom" >
+    <div class="w-100 d-flex justify-content-between py-2 mb-0" [class.h4]="!isNested" (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]="!isNested">{{ healthInfoComponentName | titlecase }}</span>
+      </button>
+      <div class="d-inline-block">
+        <span *ngIf="collapse.collapsed" class="fas fa-plus"></span>
+        <span *ngIf="!collapse.collapsed" class="fas fa-minus"></span>
+      </div>
+    </div>
+    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+      <div class="card border-0">
+        <div class="card-body">
+          <ds-health-info-component *ngFor="let entry of healthInfoComponent | dsObjNgFor"
+                                    [healthInfoComponent]="entry.value"
+                                    [healthInfoComponentName]="entry.key"
+                                    [isNested]="true"
+                                    data-test="component"></ds-health-info-component>
+        </div>
+      </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>

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

@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { HealthInfoComponentComponent } from './health-info-component.component';
+import { HealthInfoComponentOne, HealthInfoComponentTwo } from '../../../shared/mocks/health-endpoint.mocks';
+import { ObjNgFor } from '../../../shared/utils/object-ngfor.pipe';
+
+describe('HealthInfoComponentComponent', () => {
+  let component: HealthInfoComponentComponent;
+  let fixture: ComponentFixture<HealthInfoComponentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        NgbCollapseModule,
+        NoopAnimationsModule
+      ],
+      declarations: [
+        HealthInfoComponentComponent,
+        ObjNgFor
+      ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthInfoComponentComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('when has nested components', () => {
+    beforeEach(() => {
+      component.healthInfoComponentName = 'App';
+      component.healthInfoComponent = HealthInfoComponentOne;
+      component.isCollapsed = false;
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should display property', () => {
+      const components = fixture.debugElement.queryAll(By.css('[data-test="component"]'));
+      expect(components.length).toBe(4);
+    });
+
+  });
+
+  describe('when has plain properties', () => {
+    beforeEach(() => {
+      component.healthInfoComponentName = 'Java';
+      component.healthInfoComponent = HealthInfoComponentTwo;
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should display property', () => {
+      const property = fixture.debugElement.queryAll(By.css('[data-test="property"]'));
+      expect(property.length).toBe(1);
+    });
+
+  });
+});

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

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+
+import { HealthInfoComponent } from '../../models/health-component.model';
+
+@Component({
+  selector: 'ds-health-info-component',
+  templateUrl: './health-info-component.component.html',
+  styleUrls: ['./health-info-component.component.scss']
+})
+export class HealthInfoComponentComponent {
+
+  /**
+   * The HealthInfoComponent object to display
+   */
+  @Input() healthInfoComponent: HealthInfoComponent|string;
+
+  /**
+   * The HealthInfoComponent object name
+   */
+  @Input() healthInfoComponentName: string;
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  @Input() isNested = false;
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = true;
+
+  isPlainProperty(entry: HealthInfoComponent | string): boolean {
+    return typeof entry === 'string';
+  }
+}

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

@@ -0,0 +1,7 @@
+<ng-container *ngIf="healthInfoResponse">
+  <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>
+</ng-container>

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

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+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';
+
+describe('HealthInfoComponent', () => {
+  let component: HealthInfoComponent;
+  let fixture: ComponentFixture<HealthInfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        HealthInfoComponent,
+        ObjNgFor
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthInfoComponent);
+    component = fixture.componentInstance;
+    component.healthInfoResponse = HealthInfoResponseObj;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create info component properly', () => {
+    const components = fixture.debugElement.queryAll(By.css('[data-test="info-component"]'));
+    expect(components.length).toBe(3);
+  });
+});

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

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+import { HealthInfoResponse } from '../models/health-component.model';
+
+@Component({
+  selector: 'ds-health-info',
+  templateUrl: './health-info.component.html',
+  styleUrls: ['./health-info.component.scss']
+})
+export class HealthInfoComponent {
+
+  @Input() healthInfoResponse: HealthInfoResponse;
+
+}

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

@@ -0,0 +1,21 @@
+<div class="container" *ngIf="(healthResponse | async) && (healthInfoResponse | async)">
+  <ul ngbNav #nav="ngbNav" [activeId]="'health'" class="nav-tabs">
+    <li [ngbNavItem]="'health'">
+      <a ngbNavLink>{{'health-page.health' | translate}}</a>
+      <ng-template ngbNavContent>
+        <div id="health">
+          <ds-health-panel [healthResponse]="(healthResponse | async)"></ds-health-panel>
+        </div>
+      </ng-template>
+    </li>
+    <li [ngbNavItem]="'info'">
+      <a ngbNavLink>{{'health-page.info' | translate}}</a>
+      <ng-template ngbNavContent>
+        <div id="info">
+          <ds-health-info [healthInfoResponse]="(healthInfoResponse | async)"></ds-health-info>
+        </div>
+      </ng-template>
+    </li>
+  </ul>
+  <div [ngbNavOutlet]="nav" class="mt-2"></div>
+</div>

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

@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { By } from '@angular/platform-browser';
+
+import { of } from 'rxjs';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+
+import { HealthPageComponent } from './health-page.component';
+import { HealthDataService } from './health-data.service';
+import { HealthInfoResponseObj, HealthResponseObj } from '../shared/mocks/health-endpoint.mocks';
+import { RawRestResponse } from '../core/dspace-rest/raw-rest-response.model';
+import { TranslateLoaderMock } from '../shared/mocks/translate-loader.mock';
+
+describe('HealthPageComponent', () => {
+  let component: HealthPageComponent;
+  let fixture: ComponentFixture<HealthPageComponent>;
+
+  const healthService = jasmine.createSpyObj('healthDataService', {
+    getHealth: jasmine.createSpy('getHealth'),
+    getInfo: jasmine.createSpy('getInfo'),
+  });
+
+  const healthRestResponse$ = of({
+    payload: HealthResponseObj,
+    statusCode: 200,
+    statusText: 'OK'
+  } as RawRestResponse);
+
+  const healthInfoRestResponse$ = of({
+    payload: HealthInfoResponseObj,
+    statusCode: 200,
+    statusText: 'OK'
+  } as RawRestResponse);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        NgbNavModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
+      declarations: [ HealthPageComponent ],
+      providers: [
+        { provide: HealthDataService, useValue: healthService }
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthPageComponent);
+    component = fixture.componentInstance;
+    healthService.getHealth.and.returnValue(healthRestResponse$);
+    healthService.getInfo.and.returnValue(healthInfoRestResponse$);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create nav items properly', () => {
+    const navItems = fixture.debugElement.queryAll(By.css('li.nav-item'));
+    expect(navItems.length).toBe(2);
+  });
+});

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

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+
+import { BehaviorSubject } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+import { HealthDataService } from './health-data.service';
+import { HealthInfoResponse, HealthResponse } from './models/health-component.model';
+
+@Component({
+  selector: 'ds-health-page',
+  templateUrl: './health-page.component.html',
+  styleUrls: ['./health-page.component.scss']
+})
+export class HealthPageComponent implements OnInit {
+
+  /**
+   * Health info endpoint response
+   */
+  healthInfoResponse: BehaviorSubject<HealthInfoResponse> = new BehaviorSubject<HealthInfoResponse>(null);
+
+  /**
+   * Health endpoint response
+   */
+  healthResponse: BehaviorSubject<HealthResponse> = new BehaviorSubject<HealthResponse>(null);
+
+  constructor(private healthDataService: HealthDataService) {
+  }
+
+  /**
+   * Retrieve responses from rest
+   */
+  ngOnInit(): void {
+    this.healthDataService.getHealth().pipe(take(1)).subscribe((data: any) => {
+      this.healthResponse.next(data.payload);
+    });
+
+    this.healthDataService.getInfo().pipe(take(1)).subscribe((data) => {
+      this.healthInfoResponse.next(data.payload);
+    });
+  }
+}

src/app/health-page/health-page.module.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { HealthPageRoutingModule } from './health-page.routing.module';
+import { HealthPanelComponent } from './health-panel/health-panel.component';
+import { HealthStatusComponent } from './health-panel/health-status/health-status.component';
+import { SharedModule } from '../shared/shared.module';
+import { HealthPageComponent } from './health-page.component';
+import { HealthComponentComponent } from './health-panel/health-component/health-component.component';
+import { HealthInfoComponent } from './health-info/health-info.component';
+import { HealthInfoComponentComponent } from './health-info/health-info-component/health-info-component.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HealthPageRoutingModule,
+    NgbModule,
+    SharedModule,
+    TranslateModule
+  ],
+  declarations: [
+    HealthPageComponent,
+    HealthPanelComponent,
+    HealthStatusComponent,
+    HealthComponentComponent,
+    HealthInfoComponent,
+    HealthInfoComponentComponent,
+  ]
+})
+export class HealthPageModule {
+}

src/app/health-page/health-page.routing.module.ts

@@ -1,8 +1,11 @@
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
+
-import { HealthComponent } from './health/health.component';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { HealthPageComponent } from './health-page.component';
+import {
+  SiteAdministratorGuard
+} from '../core/data/feature-authorization/feature-authorization-guard/site-administrator.guard';
 
 @NgModule({
   imports: [
@@ -11,15 +14,9 @@ import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.reso
         path: '',
         resolve: { breadcrumb: I18nBreadcrumbResolver },
         data: { breadcrumbKey: 'health' },
-        canActivate: [AuthenticatedGuard],
+        canActivate: [SiteAdministratorGuard],
-        children: [
+        component: HealthPageComponent
-          {
+      }
-            path: '',
-            component: HealthComponent,
-          },
-        ]
-      },
-
     ])
   ]
 })

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

@@ -0,0 +1,27 @@
+<ng-container *ngIf="healthComponent?.components">
+  <div *ngFor="let entry of healthComponent?.components | dsObjNgFor" class="mb-3 border-bottom" data-test="collapse">
+    <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-plus"></span>
+        <span *ngIf="!collapse.collapsed" class="fas fa-minus"></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>
+        </div>
+      </div>
+    </div>
+  </div>
+</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}}
+  </div>
+</ng-container>

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

@@ -0,0 +1,77 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { HealthComponentComponent } from './health-component.component';
+import { HealthComponentOne, HealthComponentTwo } from '../../../shared/mocks/health-endpoint.mocks';
+import { ObjNgFor } from '../../../shared/utils/object-ngfor.pipe';
+
+describe('HealthComponentComponent', () => {
+  let component: HealthComponentComponent;
+  let fixture: ComponentFixture<HealthComponentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CommonModule,
+        NgbCollapseModule,
+        NoopAnimationsModule
+      ],
+      declarations: [
+        HealthComponentComponent,
+        ObjNgFor
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthComponentComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('when has nested components', () => {
+    beforeEach(() => {
+      component.healthComponentName = 'db';
+      component.healthComponent = HealthComponentOne;
+      component.isCollapsed = false;
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should create collapsible divs properly', () => {
+      const collapseDivs = fixture.debugElement.queryAll(By.css('[data-test="collapse"]'));
+      expect(collapseDivs.length).toBe(2);
+      const detailsDivs = fixture.debugElement.queryAll(By.css('[data-test="details"]'));
+      expect(detailsDivs.length).toBe(6);
+    });
+  });
+
+  describe('when has details', () => {
+    beforeEach(() => {
+      component.healthComponentName = 'geoIp';
+      component.healthComponent = HealthComponentTwo;
+
+      fixture.detectChanges();
+    });
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should create detail divs properly', () => {
+      const detailsDivs = fixture.debugElement.queryAll(By.css('[data-test="details"]'));
+      expect(detailsDivs.length).toBe(1);
+      const collapseDivs = fixture.debugElement.queryAll(By.css('[data-test="collapse"]'));
+      expect(collapseDivs.length).toBe(0);
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+import { HealthComponent } from '../../models/health-component.model';
+
+@Component({
+  selector: 'ds-health-component',
+  templateUrl: './health-component.component.html',
+  styleUrls: ['./health-component.component.scss']
+})
+export class HealthComponentComponent {
+
+  /**
+   * The HealthComponent object to display
+   */
+  @Input() healthComponent: HealthComponent;
+
+  /**
+   * The HealthComponent object name
+   */
+  @Input() healthComponentName: string;
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = true;
+
+}

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

@@ -0,0 +1,21 @@
+<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 h4 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-plus"></span>
+      <span *ngIf="!collapse.collapsed" class="ml-2 fas fa-minus"></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>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+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 { 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', () => {
+  let component: HealthPanelComponent;
+  let fixture: ComponentFixture<HealthPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgbNavModule,
+        NgbCollapseModule,
+        CommonModule,
+        BrowserAnimationsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+      ],
+      declarations: [
+        HealthPanelComponent,
+        ObjNgFor
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthPanelComponent);
+    component = fixture.componentInstance;
+    component.healthResponse = HealthResponseObj;
+    component.isCollapsed = false;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render a card 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

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { HealthResponse } from '../models/health-component.model';
+
+@Component({
+  selector: 'ds-health-panel',
+  templateUrl: './health-panel.component.html',
+  styleUrls: ['./health-panel.component.scss']
+})
+export class HealthPanelComponent {
+
+  /**
+   * Health endpoint response
+   */
+  @Input() healthResponse: HealthResponse;
+
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = true;
+
+}

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

@@ -0,0 +1,6 @@
+<ng-container [ngSwitch]="status">
+  <i *ngSwitchCase="HealthStatus.UP" class="fa fa-check-circle text-success ml-2 mt-1"></i>
+  <i *ngSwitchCase="HealthStatus.UP_WITH_ISSUES" class="fa fa-exclamation-triangle text-warning ml-2 mt-1"></i>
+  <i *ngSwitchCase="HealthStatus.DOWN" class="fa fa-times-circle text-danger ml-2 mt-1"></i>
+
+</ng-container>

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

@@ -0,0 +1,48 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { HealthStatusComponent } from './health-status.component';
+import { HealthStatus } from '../../models/health-component.model';
+
+describe('HealthStatusComponent', () => {
+  let component: HealthStatusComponent;
+  let fixture: ComponentFixture<HealthStatusComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HealthStatusComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create success icon', () => {
+    component.status = HealthStatus.UP;
+    fixture.detectChanges();
+    const icon = fixture.debugElement.query(By.css('i.text-success'));
+    expect(icon).toBeTruthy();
+  });
+
+  it('should create warning icon', () => {
+    component.status = HealthStatus.UP_WITH_ISSUES;
+    fixture.detectChanges();
+    const icon = fixture.debugElement.query(By.css('i.text-warning'));
+    expect(icon).toBeTruthy();
+  });
+
+  it('should create success icon', () => {
+    component.status = HealthStatus.DOWN;
+    fixture.detectChanges();
+    const icon = fixture.debugElement.query(By.css('i.text-danger'));
+    expect(icon).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { HealthStatus } from '../../models/health-component.model';
+
+@Component({
+  selector: 'ds-health-status',
+  templateUrl: './health-status.component.html',
+  styleUrls: ['./health-status.component.scss']
+})
+export class HealthStatusComponent {
+  /**
+   * The current status to show
+   */
+  @Input() status: HealthStatus;
+
+  /**
+   * He
+   */
+  HealthStatus = HealthStatus;
+
+}

src/app/health-page/health.module.ts

@@ -1,23 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { HealthPageRoutingModule } from './health.routing.module';
-import { HealthComponent } from './health/health.component';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from '@ngx-translate/core';
-
-
-@NgModule({
-    imports: [
-        CommonModule,
-        HealthPageRoutingModule,
-        MatExpansionModule,
-        NgbModule,
-        TranslateModule
-    ],
-    declarations: [
-        HealthComponent
-    ]
-  })
-  export class HealthModule {
-  }

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

@@ -1,39 +0,0 @@
-<div class="container">
-  <ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs">
-    <li [ngbNavItem]="'Health'">
-      <a ngbNavLink>{{'health-page.health' | translate}}</a>
-      <ng-template ngbNavContent>
-        <div id="health">
-          {{'health-page.status' | translate}} : <i [ngClass]="getHealthIconClass(healthGlobalStatus)"> </i>
-          <mat-accordion multi="true">
-            <mat-expansion-panel *ngFor="let health of healthArr">
-              <mat-expansion-panel-header>
-                <mat-panel-title> {{ health.components }} <i [ngClass]="getHealthIconClass(health.status)"></i></mat-panel-title>
-              </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent> 
-                  <div *ngFor="let item of health.details | keyvalue">
-                      {{ item.key }} : {{item.value}} 
-                  </div>
-              </ng-template>
-            </mat-expansion-panel>
-          </mat-accordion>
-        </div>
-      </ng-template>
-    </li>
-    <li [ngbNavItem]="'Info'">
-      <a ngbNavLink>{{'health-page.info' | translate}}</a>
-      <ng-template ngbNavContent>
-        <div id="info">
-          <small [ngStyle]="serverInfo.style" *ngFor="let serverInfo of serverInfoArr; let index = index">
-              {{ serverInfo.value }} <br>
-          </small>
-        </div>
-      </ng-template>
-    </li>
-  </ul>
-  <div [ngbNavOutlet]="nav" class="mt-2"></div>
-</div>
-
-
-
-

src/app/health-page/health/health.component.scss

@@ -1,8 +0,0 @@
-.mat-expansion-panel-header {
-    padding-left: 0px;
-}
-
-.circle-red {
-    color:red;
-    align-items: center;
-}

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

@@ -1,160 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { By } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { of } from 'rxjs';
-import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
-import { HealthDataService } from '../health-data.service';
-import { HealthPageRoutingModule } from '../health.routing.module';
-import { HealthComponent } from './health.component';
-
- function getHealth() {
-   return of({
-    'payload':{
-       'status':'UP_WITH_ISSUES',
-       'components':{
-          'db':{
-             'status':'UP',
-             'components':{
-                'dataSource':{
-                   'status':'UP',
-                   'details':{
-                      'database':'PostgreSQL',
-                      'result':1,
-                      'validationQuery':'SELECT 1'
-                   }
-                },
-                'dspaceDataSource':{
-                   'status':'UP',
-                   'details':{
-                      'database':'PostgreSQL',
-                      'result':1,
-                      'validationQuery':'SELECT 1'
-                   }
-                }
-             }
-          },
-          'geoIp':{
-             'status':'UP_WITH_ISSUES',
-             'details':{
-                'reason':'The GeoLite Database file is missing (/var/lib/GeoIP/GeoLite2-City.mmdb)! Solr Statistics cannot generate location based reports! Please see the DSpace installation instructions for instructions to install this file.'
-             }
-          },
-          'solrOaiCore':{
-             'status':'UP',
-             'details':{
-                'status':0,
-                'detectedPathType':'particular core'
-             }
-          },
-          'solrSearchCore':{
-             'status':'UP',
-             'details':{
-                'status':0,
-                'detectedPathType':'particular core'
-             }
-          },
-          'solrStatisticsCore':{
-             'status':'UP',
-             'details':{
-                'status':0,
-                'detectedPathType':'particular core'
-             }
-          }
-       }
-    },
-    'statusCode':200,
-    'statusText':'OK'
-   });
- }
-
- function getInfo() {
-  return of({
-    'payload':{
-       'app':{
-          'name':'DSpace at My University',
-          'version':'7.3',
-          'dir':'/Users/pratikrajkotiya/Documents/Project/FrontEnd/dspace-cris-install',
-          'url':'http://localhost:8080/server',
-          'db':'jdbc:postgresql://localhost:5432/4science',
-          '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'
-          }
-       }
-    },
-    'statusCode':200,
-    'statusText':'OK'
-   });
- }
-
-function getMockHealthDataService() {
-  return jasmine.createSpyObj('healthDataService', {
-    getHealth: getHealth(),
-    getInfo: getInfo()
-  });
-}
-
-describe('HealthComponent', () => {
-  let component: HealthComponent;
-  let fixture: ComponentFixture<HealthComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        NgbNavModule,
-        CommonModule,
-        HealthPageRoutingModule,
-        MatExpansionModule,
-        BrowserAnimationsModule,
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateLoaderMock
-          }
-        }),
-      ],
-      declarations: [ HealthComponent ],
-      providers:[{ provide: HealthDataService, useValue: getMockHealthDataService() }]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(HealthComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render health tab.', () => {
-    const healthTab = fixture.debugElement.query(By.css('#health'));
-    expect(healthTab).toBeTruthy();
-  });
-
-  it('should render info tab.', () => {
-    const infoTab = fixture.debugElement.query(By.css('#info'));
-    expect(infoTab).toBeFalsy();
-  });
-
-});

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

@@ -1,100 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { HealthDataService } from '../health-data.service';
-
-
-enum HealthStatus {
-  UP = 'UP',
-  UP_WITH_ISSUES = 'UP_WITH_ISSUES',
-  DOWN = 'DOWN'
-}
-@Component({
-  selector: 'ds-health',
-  templateUrl: './health.component.html',
-  styleUrls: ['./health.component.scss']
-})
-export class HealthComponent implements OnInit {
-  healthArr: string[];
-  serverInfoArr: string[];
-  healthGlobalStatus: string;
-  activeId ='Health';
-  constructor(private healthDataService: HealthDataService) { }
-
-  ngOnInit(): void {
-    this.healthDataService.getHealth().subscribe((data) => {
-       this.healthArr = this.getHealth(data.payload.components);
-       this.healthGlobalStatus = data.payload.status;
-    });
-
-    this.healthDataService.getInfo().subscribe((data) => {
-      this.serverInfoArr =  this.getInfo(data.payload, null, []);
-    });
-  }
-
-  /**
-   * @param obj represents a info
-   * @param key represents a nested key of info
-   * @param arr represents a  key value pair or only key
-   * @returns {{arr}} of key value pair or only key
-   */
-  getInfo(obj, key, arr) {
-      if (typeof obj === 'object' && key !== null) {
-          arr.push({style: {'font-weight': 'bold' ,'font-size.px': key === 'app' ? '30' : '20' }, value: key});
-      }
-      if (typeof obj !== 'object') {
-          arr.push({style: {'font-size.px': '15'}, value: `${key} =  ${obj}`});
-          return obj;
-      }
-      // tslint:disable-next-line: forin
-      for (const objKey in obj) {
-          this.getInfo(obj[objKey], objKey, arr);
-      }
-      return arr;
-  }
-
-  /**
-   * @param subCompObj represent nested sub component
-   * @param superCompkey represents a key of super component
-   * @returns linear components array
-   */
-  getHealthSubComponents(subCompObj, superCompkey) {
-    const subCompArr = [];
-    // tslint:disable-next-line: forin
-    for (const key in subCompObj) {
-        subCompArr.push({ ...subCompObj[key], components: superCompkey + '.' + key });
-    }
-    return subCompArr;
-  }
-
-  /**
-   * @param componentsObj represent health data
-   * @returns linear components array
-   */
-  getHealth(componentsObj) {
-    let componentsArr = [];
-    for (const key in componentsObj) {
-        if (componentsObj[key].hasOwnProperty('components')) {
-            componentsArr.push({ ...componentsObj[key], components: key });
-            // tslint:disable-next-line: no-string-literal
-            componentsArr = [...componentsArr, ...this.getHealthSubComponents(componentsObj[key]['components'], key)];
-        } else {
-            componentsArr.push({ ...componentsObj[key], components: key });
-        }
-    }
-    return componentsArr;
-  }
-
-  /**
-   * @param  status of perticular block
-   * @returns {{ string }} class respective status
-   */
-  getHealthIconClass(status: string): string {
-    if (status === HealthStatus.UP) {
-      return 'fa fa-check-circle text-success ml-2 mt-1';
-    } else if (status === HealthStatus.UP_WITH_ISSUES) {
-      return 'fa fa-exclamation-triangle text-warning ml-2 mt-1';
-    } else {
-      return 'fa fa-times-circle circle-red ml-2 mt-1';
-    }
-  }
-
-}

src/app/health-page/models/health-component.model.ts

@@ -0,0 +1,48 @@
+/**
+ * Interface for Health Status
+ */
+export enum HealthStatus {
+  UP = 'UP',
+  UP_WITH_ISSUES = 'UP_WITH_ISSUES',
+  DOWN = 'DOWN'
+}
+
+/**
+ * Interface describing the Health endpoint response
+ */
+export interface HealthResponse {
+  status: HealthStatus;
+  components: {
+    [name: string]: HealthComponent;
+  };
+}
+
+/**
+ * Interface describing a single component retrieved from the Health endpoint response
+ */
+export interface HealthComponent {
+  status: HealthStatus;
+  details?: {
+    [name: string]: number|string;
+  };
+  components?: {
+    [name: string]: HealthComponent;
+  };
+}
+
+/**
+ * Interface describing the Health info endpoint response
+ */
+export interface HealthInfoResponse {
+  [name: string]: HealthInfoComponent|string;
+}
+
+/**
+ * Interface describing a single component retrieved from the Health info endpoint response
+ */
+export interface HealthInfoComponent {
+  [property: string]: HealthInfoComponent|string;
+}
+
+
+

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

@@ -0,0 +1,140 @@
+import {
+  HealthComponent,
+  HealthInfoComponent,
+  HealthInfoResponse,
+  HealthResponse,
+  HealthStatus
+} from '../../health-page/models/health-component.model';
+
+export const HealthResponseObj: HealthResponse = {
+  'status': HealthStatus.UP_WITH_ISSUES,
+  'components': {
+    'db': {
+      'status': HealthStatus.UP,
+      'components': {
+        'dataSource': {
+          'status': HealthStatus.UP,
+          'details': {
+            'database': 'PostgreSQL',
+            'result': 1,
+            'validationQuery': 'SELECT 1'
+          }
+        },
+        'dspaceDataSource': {
+          'status': HealthStatus.UP,
+          'details': {
+            'database': 'PostgreSQL',
+            'result': 1,
+            'validationQuery': 'SELECT 1'
+          }
+        }
+      }
+    },
+    'geoIp': {
+      'status': HealthStatus.UP_WITH_ISSUES,
+      'details': {
+        'reason': 'The GeoLite Database file is missing (/var/lib/GeoIP/GeoLite2-City.mmdb)! Solr Statistics cannot generate location based reports! Please see the DSpace installation instructions for instructions to install this file.'
+      }
+    },
+    'solrOaiCore': {
+      'status': HealthStatus.UP,
+      'details': {
+        'status': 0,
+        'detectedPathType': 'particular core'
+      }
+    },
+    'solrSearchCore': {
+      'status': HealthStatus.UP,
+      'details': {
+        'status': 0,
+        'detectedPathType': 'particular core'
+      }
+    },
+    'solrStatisticsCore': {
+      'status': HealthStatus.UP,
+      'details': {
+        'status': 0,
+        'detectedPathType': 'particular core'
+      }
+    }
+  }
+};
+
+export const HealthComponentOne: HealthComponent = {
+  'status': HealthStatus.UP,
+  'components': {
+    'dataSource': {
+      'status': HealthStatus.UP,
+      'details': {
+        'database': 'PostgreSQL',
+        'result': 1,
+        'validationQuery': 'SELECT 1'
+      }
+    },
+    'dspaceDataSource': {
+      'status': HealthStatus.UP,
+      'details': {
+        'database': 'PostgreSQL',
+        'result': 1,
+        'validationQuery': 'SELECT 1'
+      }
+    }
+  }
+};
+
+export const HealthComponentTwo: HealthComponent = {
+  'status': HealthStatus.UP_WITH_ISSUES,
+  'details': {
+    'reason': 'The GeoLite Database file is missing (/var/lib/GeoIP/GeoLite2-City.mmdb)! Solr Statistics cannot generate location based reports! Please see the DSpace installation instructions for instructions to install this file.'
+  }
+};
+
+export const HealthInfoResponseObj: HealthInfoResponse = {
+  'app': {
+    'name': 'DSpace at My University',
+    'dir': '/home/giuseppe/development/java/install/dspace7-review',
+    'url': 'http://localhost:8080/server',
+    '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'
+    }
+  },
+  'java': {
+    'vendor': 'Private Build',
+    'version': '11.0.15',
+    'runtime': {
+      'name': 'OpenJDK Runtime Environment',
+      'version': '11.0.15+10-Ubuntu-0ubuntu0.20.04.1'
+    },
+    'jvm': {
+      'name': 'OpenJDK 64-Bit Server VM',
+      'vendor': 'Private Build',
+      'version': '11.0.15+10-Ubuntu-0ubuntu0.20.04.1'
+    }
+  },
+  'version': '7.3-SNAPSHOT'
+};
+
+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'
+};
+
+export const HealthInfoComponentTwo = '7.3-SNAPSHOT';