diff --git a/src/app/health-page/health-panel/health-panel.component.scss b/src/app/health-page/health-panel/health-panel.component.scss
index e69de29bb2..a6f0e73413 100644
--- 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;
+}
diff --git a/src/app/health-page/health-panel/health-panel.component.ts b/src/app/health-page/health-panel/health-panel.component.ts
index 8bb670e67f..3137334d6f 100644
--- 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;
+ }
}
diff --git 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
index 13df9c23e3..f0f61ebdbb 100644
--- 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();
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 216b29fcd0..18a406b77b 100644
--- 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",