[CST-5535] Add Possibility to have translation also for properties

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

@@ -1,6 +1,6 @@
 <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()">
+    <div class="w-100 d-flex justify-content-between collapse-toggle" (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 }}
@@ -22,7 +22,7 @@
     </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>
+    <p data-test="property"> <span class="font-weight-bold">{{ getPropertyLabel(entry.key) | titlecase }}</span> : {{entry.value}}</p>
   </ng-container>
 </div>
 

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

@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}

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

@@ -8,6 +8,8 @@ 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';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
 
 describe('HealthInfoComponentComponent', () => {
   let component: HealthInfoComponentComponent;
@@ -18,7 +20,13 @@ describe('HealthInfoComponentComponent', () => {
       imports: [
         CommonModule,
         NgbCollapseModule,
-        NoopAnimationsModule
+        NoopAnimationsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
       ],
       declarations: [
         HealthInfoComponentComponent,

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

@@ -1,13 +1,14 @@
 import { Component, Input } from '@angular/core';
 
 import { HealthInfoComponent } from '../../models/health-component.model';
+import { HealthComponentComponent } from '../../health-panel/health-component/health-component.component';
 
 @Component({
   selector: 'ds-health-info-component',
   templateUrl: './health-info-component.component.html',
   styleUrls: ['./health-info-component.component.scss']
 })
-export class HealthInfoComponentComponent {
+export class HealthInfoComponentComponent extends HealthComponentComponent {
 
   /**
    * The HealthInfoComponent object to display
@@ -27,9 +28,16 @@ export class HealthInfoComponentComponent {
   /**
    * A boolean representing if div should start collapsed
    */
-  public isCollapsed = true;
+  public isCollapsed = false;
 
+  /**
+   * Check if the HealthInfoComponent is has only string property or contains object
+   *
+   * @param entry The HealthInfoComponent to check
+   * @return boolean
+   */
   isPlainProperty(entry: HealthInfoComponent | string): boolean {
     return typeof entry === 'string';
   }
+
 }

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

@@ -2,10 +2,10 @@
   <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">
+        <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">
-            {{ 'health-page.section-info.' + entry.key +'.title'  | translate }}
+            {{ getPanelLabel(entry.key) | titlecase }}
           </button>
           <div class="text-right d-flex">
             <ds-health-status [status]="entry.value?.status"></ds-health-status>

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

@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}

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

@@ -6,6 +6,8 @@ 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';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 
 describe('HealthInfoComponent', () => {
   let component: HealthInfoComponent;
@@ -15,6 +17,12 @@ describe('HealthInfoComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         NgbAccordionModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
       ],
       declarations: [
         HealthInfoComponent,

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

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 
 import { HealthInfoResponse } from '../models/health-component.model';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ds-health-info',
@@ -16,7 +17,21 @@ export class HealthInfoComponent implements OnInit  {
    */
   activeId: string;
 
+  constructor(private translate: TranslateService) {
+  }
+
   ngOnInit(): void {
     this.activeId = Object.keys(this.healthInfoResponse)[0];
   }
+  /**
+   * Return translated label if exist for the given property
+   *
+   * @param property
+   */
+  public getPanelLabel(panelKey: string): string {
+    const translationKey = `health-page.section-info.${panelKey}.title`;
+    const translation = this.translate.instant(translationKey);
+
+    return (translation === translationKey) ? panelKey : translation;
+  }
 }

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

@@ -1,6 +1,6 @@
 <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()">
+    <div class="w-100 d-flex justify-content-between collapse-toggle" (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 }}
@@ -22,7 +22,7 @@
 </ng-container>
 <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">{{ item.key | titlecase }}</span> : {{item.value}}</p>
+    <p data-test="property"><span class="font-weight-bold">{{ getPropertyLabel(item.key) | titlecase }}</span> : {{item.value}}</p>
 
   </div>
 </ng-container>

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

@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}

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

@@ -9,6 +9,8 @@ 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';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
 
 describe('HealthComponentComponent', () => {
   let component: HealthComponentComponent;
@@ -19,7 +21,13 @@ describe('HealthComponentComponent', () => {
       imports: [
         CommonModule,
         NgbCollapseModule,
-        NoopAnimationsModule
+        NoopAnimationsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
       ],
       declarations: [
         HealthComponentComponent,

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

@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 import { HealthComponent } from '../../models/health-component.model';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ds-health-component',
@@ -22,6 +23,20 @@ export class HealthComponentComponent {
   /**
    * A boolean representing if div should start collapsed
    */
-  public isCollapsed = true;
+  public isCollapsed = false;
 
+  constructor(private translate: TranslateService) {
+  }
+
+  /**
+   * Return translated label if exist for the given property
+   *
+   * @param property
+   */
+  public getPropertyLabel(property: string): string {
+    const translationKey = `health-page.property.${property}`;
+    const translation = this.translate.instant(translationKey);
+
+    return (translation === translationKey) ? property : translation;
+  }
 }

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

@@ -2,10 +2,10 @@
 <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">
+      <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">
-          {{ 'health-page.section.' + entry.key +'.title'  | translate }}
+          {{ getPanelLabel(entry.key) | titlecase }}
         </button>
         <div class="text-right d-flex">
           <ds-health-status [status]="entry.value?.status"></ds-health-status>

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

@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}

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

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { HealthResponse } from '../models/health-component.model';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ds-health-panel',
@@ -18,7 +19,22 @@ export class HealthPanelComponent implements OnInit {
    */
   activeId: string;
 
+  constructor(private translate: TranslateService) {
+  }
+
   ngOnInit(): void {
     this.activeId = Object.keys(this.healthResponse.components)[0];
   }
+
+  /**
+   * Return translated label if exist for the given property
+   *
+   * @param property
+   */
+  public getPanelLabel(panelKey: string): string {
+    const translationKey = `health-page.section.${panelKey}.title`;
+    const translation = this.translate.instant(translationKey);
+
+    return (translation === translationKey) ? panelKey : translation;
+  }
 }

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

@@ -3,6 +3,9 @@ import { By } from '@angular/platform-browser';
 
 import { HealthStatusComponent } from './health-status.component';
 import { HealthStatus } from '../../models/health-component.model';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 describe('HealthStatusComponent', () => {
   let component: HealthStatusComponent;
@@ -10,6 +13,15 @@ describe('HealthStatusComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [
+        NgbTooltipModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })
+      ],
       declarations: [ HealthStatusComponent ]
     })
     .compileComponents();

src/assets/i18n/en.json5

@@ -1585,6 +1585,8 @@
 
   "health-page.error.msg": "The health check service is temporarily unavailable",
 
+  "health-page.property.status": "Status code",
+
   "health-page.section.db.title": "Database",
 
   "health-page.section.geoIp.title": "GeoIp",