generator-jhipster 8.5.0 → 8.7.0

package/dist/generators/angular/templates/src/main/webapp/app/admin/gateway/gateway.component.html.ejs

@@ -20,7 +20,7 @@
   <h2>
     <span id="gateway-page-heading">__jhiTranslateTag__('gateway.title')</span>
 
-    <button class="btn btn-primary float-end" (click)="refresh()" (disabled)="updatingRoutes">
+    <button class="btn btn-primary float-end" (click)="refresh()" (disabled)="(updatingRoutes)">
       <fa-icon icon="sync"></fa-icon> <span>__jhiTranslateTag__('gateway.refresh.button')</span>
     </button>
   </h2>
@@ -37,46 +37,50 @@
         </tr>
       </thead>
       <tbody>
-      @for (route of gatewayRoutes; track route.path) {
-        <tr>
-          <td>{{ route.path }}</td>
-          <td>{{ route.serviceId }}</td>
-          <td>
-          @if (route.serviceInstances.length === 0) {
-            <div class="label label-danger">__jhiTranslateTag__('gateway.routes.error')</div>
-          }
-
-            <div class="table-responsive">
-            @if (route) {
-              <table class="table table-striped">
-              @for (instance of route.serviceInstances; track instance.uri) {
-                <tr>
-                  <td><a href="{{ instance.uri }}" target="_blank">{{ instance.uri }}</a></td>
-                  <td>
-                  @if (instance.instanceInfo) {
-                    <div class="badge bg-{{ instance.instanceInfo.status === 'UP' ? 'success' : 'danger' }}">{{ instance.instanceInfo.status }}</div>
-                  } @else {
-                    <div class="badge bg-warning">?</div>
-                  }
-                  </td>
-                  <td>
-                  @for (entry of (instance.metadata | keyvalue ); track entry.key) {
-                    <span>
-                      <span class="badge bg-default fw-normal">
-                        <span class="badge rounded-pill bg-info fw-normal">{{ entry.key }}</span>
-                        <span class="text-secondary">{{ entry.value }}</span>
-                      </span>
-                    </span>
-                  }
-                  </td>
-                </tr>
+        @for (route of gatewayRoutes; track route.path) {
+          <tr>
+            <td>{{ route.path }}</td>
+            <td>{{ route.serviceId }}</td>
+            <td>
+              @if (route.serviceInstances.length === 0) {
+                <div class="label label-danger">__jhiTranslateTag__('gateway.routes.error')</div>
               }
-              </table>
-            }
-            </div>
-          </td>
-        </tr>
-      }
+
+              <div class="table-responsive">
+                @if (route) {
+                  <table class="table table-striped">
+                    @for (instance of route.serviceInstances; track instance.uri) {
+                      <tr>
+                        <td>
+                          <a href="{{ instance.uri }}" target="_blank">{{ instance.uri }}</a>
+                        </td>
+                        <td>
+                          @if (instance.instanceInfo) {
+                            <div class="badge bg-{{ instance.instanceInfo.status === 'UP' ? 'success' : 'danger' }}">
+                              {{ instance.instanceInfo.status }}
+                            </div>
+                          } @else {
+                            <div class="badge bg-warning">?</div>
+                          }
+                        </td>
+                        <td>
+                          @for (entry of instance.metadata | keyvalue; track entry.key) {
+                            <span>
+                              <span class="badge bg-default fw-normal">
+                                <span class="badge rounded-pill bg-info fw-normal">{{ entry.key }}</span>
+                                <span class="text-secondary">{{ entry.value }}</span>
+                              </span>
+                            </span>
+                          }
+                        </td>
+                      </tr>
+                    }
+                  </table>
+                }
+              </div>
+            </td>
+          </tr>
+        }
       </tbody>
     </table>
   </div>

package/dist/generators/angular/templates/src/main/webapp/app/admin/gateway/gateway.component.ts.ejs

@@ -52,7 +52,7 @@ export default class GatewayComponent implements OnInit {
             ) {
               serviceInstance.instanceInfo = { status: 'UP' };
             } else {
-              serviceInstance.instanceInfo = { status: 'DOWN'} ;
+              serviceInstance.instanceInfo = { status: 'DOWN' };
             }
           }
           return serviceInstance as object;

package/dist/generators/angular/templates/src/main/webapp/app/admin/health/health.component.spec.ts.ejs

@@ -17,8 +17,7 @@
  limitations under the License.
 -%>
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HttpErrorResponse } from '@angular/common/http';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient, HttpErrorResponse } from '@angular/common/http';
 import { of, throwError } from 'rxjs';
 
 import HealthComponent from './health.component';
@@ -30,15 +29,14 @@ describe('HealthComponent', () => {
   let fixture: ComponentFixture<HealthComponent>;
   let service: HealthService;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, HealthComponent],
-      })
-        .overrideTemplate(HealthComponent, '')
-        .compileComponents();
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HealthComponent],
+      providers: [provideHttpClient()],
     })
-  );
+      .overrideTemplate(HealthComponent, '')
+      .compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HealthComponent);
@@ -72,7 +70,7 @@ describe('HealthComponent', () => {
     it('should handle a 503 on refreshing health data', () => {
       // GIVEN
       const health: Health = { status: 'DOWN', components: { mail: { status: 'DOWN' } } };
-      jest.spyOn(service, 'checkHealth').mockReturnValue(throwError(new HttpErrorResponse({ status: 503, error: health })));
+      jest.spyOn(service, 'checkHealth').mockReturnValue(throwError(() => new HttpErrorResponse({ status: 503, error: health })));
 
       // WHEN
       comp.refresh();

package/dist/generators/angular/templates/src/main/webapp/app/admin/health/health.component.ts.ejs

@@ -55,7 +55,7 @@ export default class HealthComponent implements OnInit {
         if (error.status === 503) {
           this.health = error.error;
         }
-      }
+      },
     });
   }
 

package/dist/generators/angular/templates/src/main/webapp/app/admin/health/health.model.ts.ejs

@@ -63,5 +63,5 @@ export interface Health {
 
 export interface HealthDetails {
   status: HealthStatus;
-  details?: { [key: string]: unknown };
+  details?: Record<string, unknown>;
 }

package/dist/generators/angular/templates/src/main/webapp/app/admin/health/health.service.spec.ts.ejs

@@ -17,7 +17,8 @@
  limitations under the License.
 -%>
 import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 
 import { HealthService } from './health.service';
 import { ApplicationConfigService } from 'app/core/config/application-config.service';
@@ -29,7 +30,7 @@ describe('HealthService Service', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      providers: [provideHttpClient(), provideHttpClientTesting()],
     });
 
     service = TestBed.inject(HealthService);
@@ -46,7 +47,7 @@ describe('HealthService Service', () => {
       // GIVEN
       let expectedResult;
       const checkHealth = {
-        components: []
+        components: [],
       };
 
       // WHEN

package/dist/generators/angular/templates/src/main/webapp/app/admin/health/modal/health-modal.component.spec.ts.ejs

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import HealthModalComponent from './health-modal.component';
@@ -9,16 +9,14 @@ describe('HealthModalComponent', () => {
   let fixture: ComponentFixture<HealthModalComponent>;
   let mockActiveModal: NgbActiveModal;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, HealthModalComponent],
-        providers: [NgbActiveModal],
-      })
-        .overrideTemplate(HealthModalComponent, '')
-        .compileComponents();
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HealthModalComponent],
+      providers: [provideHttpClient(), NgbActiveModal],
     })
-  );
+      .overrideTemplate(HealthModalComponent, '')
+      .compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HealthModalComponent);
@@ -32,7 +30,7 @@ describe('HealthModalComponent', () => {
       comp.health = undefined;
 
       // WHEN
-      const result = comp.readableValue({ 'name': 'jhipster' });
+      const result = comp.readableValue({ name: 'jhipster' });
 
       // THEN
       expect(result).toEqual('{"name":"jhipster"}');
@@ -54,8 +52,8 @@ describe('HealthModalComponent', () => {
       comp.health = {
         key: 'diskSpace',
         value: {
-          status: 'UP'
-        }
+          status: 'UP',
+        },
       };
 
       // WHEN
@@ -70,8 +68,8 @@ describe('HealthModalComponent', () => {
       comp.health = {
         key: 'diskSpace',
         value: {
-          status: 'UP'
-        }
+          status: 'UP',
+        },
       };
 
       // WHEN
@@ -86,8 +84,8 @@ describe('HealthModalComponent', () => {
       comp.health = {
         key: 'mail',
         value: {
-          status: 'UP'
-        }
+          status: 'UP',
+        },
       };
 
       // WHEN

package/dist/generators/angular/templates/src/main/webapp/app/admin/logs/log.model.ts.ejs

@@ -25,12 +25,12 @@ export interface Logger {
 
 export interface LoggersResponse {
   levels: Level[];
-  loggers: { [key: string]: Logger };
+  loggers: Record<string, Logger>;
 }
 
 export class Log {
   constructor(
     public name: string,
-    public level: Level
+    public level: Level,
   ) {}
 }

package/dist/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.html.ejs

@@ -20,7 +20,7 @@
   <div class="table-responsive">
     <h2 id="logs-page-heading" data-cy="logsPageHeading">__jhiTranslateTag__('logs.title')</h2>
 
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
     <div class="float-end">
       <select class="form-select" id="routesSelect" (change)="changeService($event)">
         <option [ngValue]="null"></option>

package/dist/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.spec.ts.ejs

@@ -17,13 +17,14 @@
  limitations under the License.
 -%>
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 import { of } from 'rxjs';
 
 import LogsComponent from './logs.component';
 import { LogsService } from './logs.service';
 import { Log, LoggersResponse } from './log.model';
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
 import { GatewayRoutesService } from '../gateway/gateway-routes.service';
 <%_ } _%>
 
@@ -35,8 +36,8 @@ describe('LogsComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, LogsComponent],
-        providers: [LogsService<%= applicationTypeGateway && serviceDiscoveryAny ? ', GatewayRoutesService' : '' %>],
+        imports: [LogsComponent],
+        providers: [provideHttpClient(), provideHttpClientTesting(), LogsService<%= applicationTypeGateway && gatewayServicesApiAvailable ? ', GatewayRoutesService' : '' %>],
       })
         .overrideTemplate(LogsComponent, '')
         .compileComponents();
@@ -66,7 +67,7 @@ describe('LogsComponent', () => {
               effectiveLevel: 'WARN',
             },
           },
-        } as unknown as LoggersResponse)
+        } as unknown as LoggersResponse),
       );
 
       // WHEN
@@ -90,7 +91,7 @@ describe('LogsComponent', () => {
               effectiveLevel: 'ERROR',
             },
           },
-        } as unknown as LoggersResponse)
+        } as unknown as LoggersResponse),
       );
 
       // WHEN

package/dist/generators/angular/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs

@@ -17,14 +17,14 @@
  limitations under the License.
 -%>
 import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { finalize<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>, map<%_ } _%> } from 'rxjs/operators';
+import { finalize<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>, map<%_ } _%> } from 'rxjs/operators';
 
 import SharedModule from 'app/shared/shared.module';
 import { FormsModule } from '@angular/forms';
 import { SortDirective, SortByDirective, sortStateSignal, SortService } from 'app/shared/sort';
 import { Log, LoggersResponse, Level } from './log.model';
 import { LogsService } from './logs.service';
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
 import { GatewayRoutesService } from '../gateway/gateway-routes.service';
 <%_ } _%>
 
@@ -32,7 +32,7 @@ import { GatewayRoutesService } from '../gateway/gateway-routes.service';
   standalone: true,
   selector: '<%= jhiPrefixDashed %>-logs',
   templateUrl: './logs.component.html',
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
   providers: [GatewayRoutesService],
 <%_ } _%>
   imports: [SharedModule, FormsModule, SortDirective, SortByDirective],
@@ -55,27 +55,27 @@ export default class LogsComponent implements OnInit {
     }
     return data;
   });
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
   services: string[] = [];
   selectedService: string | undefined = undefined;
 <%_ } _%>
 
   private logsService = inject(LogsService);
   private sortService = inject(SortService);
-  <%= applicationTypeGateway && serviceDiscoveryAny ? 'private gatewayRoutesService = inject(GatewayRoutesService);' : '' %>
+  <%= applicationTypeGateway && gatewayServicesApiAvailable ? 'private gatewayRoutesService = inject(GatewayRoutesService);' : '' %>
 
   ngOnInit(): void {
     this.findAndExtractLoggers();
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
     this.loadServicesOptions();
 <%_ } _%>
   }
 
   changeLevel(name: string, level: Level): void {
-    this.logsService.changeLevel(name, level<%= applicationTypeGateway && serviceDiscoveryAny ? ', this.selectedService' : '' %>).subscribe(() => this.findAndExtractLoggers());
+    this.logsService.changeLevel(name, level<%= applicationTypeGateway && gatewayServicesApiAvailable ? ', this.selectedService' : '' %>).subscribe(() => this.findAndExtractLoggers());
   }
 
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
   changeService(event: any): void {
     this.selectedService = event.target.value?.replace('Service', '')?.toLowerCase();
     this.findAndExtractLoggers();
@@ -85,7 +85,7 @@ export default class LogsComponent implements OnInit {
   private findAndExtractLoggers(): void {
     this.isLoading.set(true);
     this.logsService
-      .findAll(<%= applicationTypeGateway && serviceDiscoveryAny ? 'this.selectedService' : '' %>)
+      .findAll(<%= applicationTypeGateway && gatewayServicesApiAvailable ? 'this.selectedService' : '' %>)
       .pipe(
         finalize(() => {
           this.isLoading.set(false);
@@ -98,7 +98,7 @@ export default class LogsComponent implements OnInit {
       });
   }
 
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
   private loadServicesOptions(): void {
     this.gatewayRoutesService
       .findAll()

package/dist/generators/angular/templates/src/main/webapp/app/admin/logs/logs.service.spec.ts.ejs

@@ -17,7 +17,8 @@
  limitations under the License.
 -%>
 import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 
 import { LogsService } from './logs.service';
 
@@ -27,7 +28,7 @@ describe('Logs Service', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule],
+      providers: [provideHttpClient(), provideHttpClientTesting()],
     });
 
     service = TestBed.inject(LogsService);

package/dist/generators/angular/templates/src/main/webapp/app/admin/logs/logs.service.ts.ejs

@@ -28,11 +28,11 @@ export class LogsService {
   private http = inject(HttpClient);
   private applicationConfigService = inject(ApplicationConfigService);
 
-  changeLevel(name: string, configuredLevel: Level<%= applicationTypeGateway && serviceDiscoveryAny ? ', service?: string' : '' %>): Observable<{}> {
-    return this.http.post(this.applicationConfigService.getEndpointFor(`management/loggers/${name}`<%= applicationTypeGateway && serviceDiscoveryAny ? ', service' : '' %>), { configuredLevel });
+  changeLevel(name: string, configuredLevel: Level<%= applicationTypeGateway && gatewayServicesApiAvailable ? ', service?: string' : '' %>): Observable<{}> {
+    return this.http.post(this.applicationConfigService.getEndpointFor(`management/loggers/${name}`<%= applicationTypeGateway && gatewayServicesApiAvailable ? ', service' : '' %>), { configuredLevel });
   }
 
-  findAll(<%= applicationTypeGateway && serviceDiscoveryAny ? 'service?: string' : '' %>): Observable<LoggersResponse> {
-    return this.http.get<LoggersResponse>(this.applicationConfigService.getEndpointFor('management/loggers'<%= applicationTypeGateway && serviceDiscoveryAny ? ', service' : '' %>));
+  findAll(<%= applicationTypeGateway && gatewayServicesApiAvailable ? 'service?: string' : '' %>): Observable<LoggersResponse> {
+    return this.http.get<LoggersResponse>(this.applicationConfigService.getEndpointFor('management/loggers'<%= applicationTypeGateway && gatewayServicesApiAvailable ? ', service' : '' %>));
   }
 }

package/dist/generators/angular/templates/src/main/webapp/app/admin/metrics/blocks/jvm-memory/jvm-memory.component.html.ejs

@@ -19,28 +19,25 @@
 <h4>__jhiTranslateTag__('metrics.jvm.memory.title')</h4>
 
 @if (!updating() && jvmMemoryMetrics()) {
-<div>
-  @for (entry of jvmMemoryMetrics() | keyvalue; track $index) {
   <div>
-  @if (entry.value.max !== -1) {
-    <span>
-      <span>{{ entry.key }}</span>
-      ({{ entry.value.used / 1048576 | number: '1.0-0' }}M / {{ entry.value.max / 1048576 | number: '1.0-0' }}M)
-    </span>
+    @for (entry of jvmMemoryMetrics() | keyvalue; track $index) {
+      <div>
+        @if (entry.value.max !== -1) {
+          <span>
+            <span>{{ entry.key }}</span>
+            ({{ entry.value.used / 1048576 | number: '1.0-0' }}M / {{ entry.value.max / 1048576 | number: '1.0-0' }}M)
+          </span>
 
-    <div>Committed : {{ entry.value.committed / 1048576 | number: '1.0-0' }}M</div>
-    <ngb-progressbar
-      type="success"
-      [value]="(100 * entry.value.used) / entry.value.max"
-      [striped]="true"
-      [animated]="false"
-    >
-      <span>{{ (entry.value.used * 100) / entry.value.max | number: '1.0-0' }}%</span>
-    </ngb-progressbar>
-  } @else {
-    <span><span>{{ entry.key }}</span> {{ entry.value.used / 1048576 | number: '1.0-0' }}M</span>
-  }
+          <div>Committed : {{ entry.value.committed / 1048576 | number: '1.0-0' }}M</div>
+          <ngb-progressbar type="success" [value]="(100 * entry.value.used) / entry.value.max" [striped]="true" [animated]="false">
+            <span>{{ (entry.value.used * 100) / entry.value.max | number: '1.0-0' }}%</span>
+          </ngb-progressbar>
+        } @else {
+          <span
+            ><span>{{ entry.key }}</span> {{ entry.value.used / 1048576 | number: '1.0-0' }}M</span
+          >
+        }
+      </div>
+    }
   </div>
-  }
-</div>
 }

package/dist/generators/angular/templates/src/main/webapp/app/admin/metrics/blocks/jvm-memory/jvm-memory.component.ts.ejs

@@ -31,7 +31,7 @@ export class JvmMemoryComponent {
   /**
    * object containing all jvm memory metrics
    */
-  jvmMemoryMetrics = input<{ [key: string]: JvmMetrics }>();
+  jvmMemoryMetrics = input<Record<string, JvmMetrics>>();
 
   /**
    * boolean field saying if the metrics are in the process of being updated

package/dist/generators/angular/templates/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.ts.ejs

@@ -67,7 +67,7 @@ export class JvmThreadsComponent {
 
   private _threads: Thread[] | undefined;
 
-  private modalService = inject(NgbModal);
+  private readonly modalService = inject(NgbModal);
 
   open(): void {
     const modalRef = this.modalService.open(MetricsModalThreadsComponent);

package/dist/generators/angular/templates/src/main/webapp/app/admin/metrics/blocks/metrics-cache/metrics-cache.component.html.ejs

@@ -19,46 +19,46 @@
 <h3 id="cacheMetrics()">__jhiTranslateTag__('metrics.cache.title')</h3>
 
 @if (!updating() && cacheMetrics()) {
-<div class="table-responsive">
-  <table class="table table-striped" aria-describedby="cacheMetrics">
-    <thead>
-      <tr>
-        <th scope="col">__jhiTranslateTag__('metrics.cache.cachename')</th>
-        <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.hits')</th>
-        <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.misses')</th>
-        <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.gets')</th>
-        <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.puts')</th>
-        <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.removals')</th>
-        <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.evictions')</th>
-        <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.hitPercent')</th>
-        <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.missPercent')</th>
-      </tr>
-    </thead>
-    <tbody>
-    @for (entry of cacheMetrics() | keyvalue; track entry.key) {
-      <tr>
-        <td>{{ entry.key }}</td>
-        <td class="text-end">{{ entry.value['cache.gets.hit'] }}</td>
-        <td class="text-end">{{ entry.value['cache.gets.miss'] }}</td>
-        <td class="text-end">{{ entry.value['cache.gets.hit'] + entry.value['cache.gets.miss'] }}</td>
-        <td class="text-end">{{ entry.value['cache.puts'] }}</td>
-        <td class="text-end">{{ entry.value['cache.removals'] }}</td>
-        <td class="text-end">{{ entry.value['cache.evictions'] }}</td>
-        <td class="text-end">
-          {{
-            filterNaN((100 * entry.value['cache.gets.hit']) / (entry.value['cache.gets.hit'] + entry.value['cache.gets.miss']))
-              | number: '1.0-4'
-          }}
-        </td>
-        <td class="text-end">
-          {{
-            filterNaN((100 * entry.value['cache.gets.miss']) / (entry.value['cache.gets.hit'] + entry.value['cache.gets.miss']))
-              | number: '1.0-4'
-          }}
-        </td>
-      </tr>
-    }
-    </tbody>
-  </table>
-</div>
+  <div class="table-responsive">
+    <table class="table table-striped" aria-describedby="cacheMetrics">
+      <thead>
+        <tr>
+          <th scope="col">__jhiTranslateTag__('metrics.cache.cachename')</th>
+          <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.hits')</th>
+          <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.misses')</th>
+          <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.gets')</th>
+          <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.puts')</th>
+          <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.removals')</th>
+          <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.evictions')</th>
+          <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.hitPercent')</th>
+          <th scope="col" class="text-end">__jhiTranslateTag__('metrics.cache.missPercent')</th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (entry of cacheMetrics() | keyvalue; track entry.key) {
+          <tr>
+            <td>{{ entry.key }}</td>
+            <td class="text-end">{{ entry.value['cache.gets.hit'] }}</td>
+            <td class="text-end">{{ entry.value['cache.gets.miss'] }}</td>
+            <td class="text-end">{{ entry.value['cache.gets.hit'] + entry.value['cache.gets.miss'] }}</td>
+            <td class="text-end">{{ entry.value['cache.puts'] }}</td>
+            <td class="text-end">{{ entry.value['cache.removals'] }}</td>
+            <td class="text-end">{{ entry.value['cache.evictions'] }}</td>
+            <td class="text-end">
+              {{
+                filterNaN((100 * entry.value['cache.gets.hit']) / (entry.value['cache.gets.hit'] + entry.value['cache.gets.miss']))
+                  | number: '1.0-4'
+              }}
+            </td>
+            <td class="text-end">
+              {{
+                filterNaN((100 * entry.value['cache.gets.miss']) / (entry.value['cache.gets.hit'] + entry.value['cache.gets.miss']))
+                  | number: '1.0-4'
+              }}
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </div>
 }

package/dist/generators/angular/templates/src/main/webapp/app/admin/metrics/blocks/metrics-cache/metrics-cache.component.ts.ejs

@@ -33,7 +33,7 @@ export class MetricsCacheComponent {
   /**
    * object containing all cache related metrics
    */
-  cacheMetrics = input<{ [key: string]: CacheMetrics }>();
+  cacheMetrics = input<Record<string, CacheMetrics>>();
 
   /**
    * boolean field saying if the metrics are in the process of being updated