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

2025-10-07 01:54:15 +00:00 · 2022-05-18 13:04:04 +02:00
parent 74b68a5e15
commit d4dc176870
17 changed files with 117 additions and 13 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,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>

--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.scss
+++ b/src/app/health-page/health-info/health-info-component/health-info-component.component.scss
@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}
--- 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
@@ -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,
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.ts
+++ b/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';
  }
+
 }
--- a/src/app/health-page/health-info/health-info.component.html
+++ b/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>
--- a/src/app/health-page/health-info/health-info.component.scss
+++ b/src/app/health-page/health-info/health-info.component.scss
@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}
--- a/src/app/health-page/health-info/health-info.component.spec.ts
+++ b/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,
--- a/src/app/health-page/health-info/health-info.component.ts
+++ b/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;
+  }
 }
--- 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
@@ -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>
--- a/src/app/health-page/health-panel/health-component/health-component.component.scss
+++ b/src/app/health-page/health-panel/health-component/health-component.component.scss
@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}
--- a/src/app/health-page/health-panel/health-component/health-component.component.spec.ts
+++ b/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,
--- a/src/app/health-page/health-panel/health-component/health-component.component.ts
+++ b/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;
+  }
 }
--- a/src/app/health-page/health-panel/health-panel.component.html
+++ b/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>
--- a/src/app/health-page/health-panel/health-panel.component.scss
+++ b/src/app/health-page/health-panel/health-panel.component.scss
@@ -0,0 +1,3 @@
+.collapse-toggle {
+  cursor: pointer;
+}
--- a/src/app/health-page/health-panel/health-panel.component.ts
+++ b/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;
+  }
 }
--- a/src/app/health-page/health-panel/health-status/health-status.component.spec.ts
+++ b/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();
--- a/src/assets/i18n/en.json5
+++ b/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",