[CST-5535] Add component typedoc and optimize code

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

@@ -4,7 +4,7 @@
       <ng-template ngbPanelHeader>
         <div class="w-100 d-flex justify-content-between collapse-toggle" 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">
+                  aria-controls="collapsePanels">
             {{ getPanelLabel(entry.key) | titlecase }}
           </button>
           <div class="text-right d-flex">

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

@@ -1,10 +1,15 @@
 import { Component, Input, OnInit } from '@angular/core';
 
-import { HealthInfoResponse } from '../models/health-component.model';
 import { TranslateService } from '@ngx-translate/core';
 
+import { HealthInfoResponse } from '../models/health-component.model';
+
 /**
- * Show the health info
+ * A component to render a "health-info component" object.
+ *
+ * Note that the word "component" in "health-info component" doesn't refer to Angular use of the term
+ * but rather to the components used in the response of the health endpoint of Spring's Actuator
+ * API.
  */
 @Component({
   selector: 'ds-health-info',
@@ -26,10 +31,11 @@ export class HealthInfoComponent implements OnInit  {
   ngOnInit(): void {
     this.activeId = Object.keys(this.healthInfoResponse)[0];
   }
+
   /**
    * Return translated label if exist for the given property
    *
-   * @param property
+   * @param panelKey
    */
   public getPanelLabel(panelKey: string): string {
     const translationKey = `health-page.section-info.${panelKey}.title`;

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

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

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

@@ -1,11 +1,16 @@
 import { Component, Input } from '@angular/core';
 
-import { HealthComponent } from '../../models/health-component.model';
 import { TranslateService } from '@ngx-translate/core';
+
+import { HealthComponent } from '../../models/health-component.model';
 import { AlertType } from '../../../shared/alert/aletr-type';
 
 /**
- * Show a health component object
+ * A component to render a "health component" object.
+ *
+ * Note that the word "component" in "health component" doesn't refer to Angular use of the term
+ * but rather to the components used in the response of the health endpoint of Spring's Actuator
+ * API.
  */
 @Component({
   selector: 'ds-health-component',

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

@@ -4,7 +4,7 @@
     <ng-template ngbPanelHeader>
       <div class="w-100 d-flex justify-content-between collapse-toggle" 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">
+                aria-controls="collapsePanels">
           {{ getPanelLabel(entry.key) | titlecase }}
         </button>
         <div class="text-right d-flex">

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

@@ -1,7 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { HealthResponse } from '../models/health-component.model';
+
 import { TranslateService } from '@ngx-translate/core';
 
+import { HealthResponse } from '../models/health-component.model';
+
 /**
  * Show the health panel
  */
@@ -32,7 +34,7 @@ export class HealthPanelComponent implements OnInit {
   /**
    * Return translated label if exist for the given property
    *
-   * @param property
+   * @param panelKey
    */
   public getPanelLabel(panelKey: string): string {
     const translationKey = `health-page.section.${panelKey}.title`;