generator-jhipster 8.0.0 → 8.1.0

package/dist/generators/angular/templates/src/main/webapp/app/account/settings/settings.component.html.ejs

@@ -19,13 +19,18 @@
 <div>
   <div class="d-flex justify-content-center">
     <div class="col-md-8">
-      <h2 <%= jhiPrefix %>Translate="settings.title" [translateValues]="{ username: settingsForm.value.login }" *ngIf="settingsForm.value.login">__jhiTransformTranslate__('settings.title', { "username": "{{ settingsForm.value.login }}" })</h2>
+    @if (settingsForm.value.login) {
+      <h2 <%= jhiPrefix %>Translate="settings.title" [translateValues]="{ username: settingsForm.value.login }">__jhiTransformTranslate__('settings.title', { "username": "{{ settingsForm.value.login }}" })</h2>
+    }
 
-      <div class="alert alert-success" *ngIf="success" <%= jhiPrefix %>Translate="settings.messages.success">__jhiTransformTranslate__('settings.messages.success')</div>
+    @if (success) {
+      <div class="alert alert-success" <%= jhiPrefix %>Translate="settings.messages.success">__jhiTransformTranslate__('settings.messages.success')</div>
+    }
 
       <<%= jhiPrefixDashed %>-alert-error></<%= jhiPrefixDashed %>-alert-error>
 
-      <form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" *ngIf="settingsForm.value.login" novalidate>
+    @if (settingsForm.value.login) {
+      <form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" novalidate>
         <div class="mb-3">
           <label class="form-label" for="firstName" <%= jhiPrefix %>Translate="settings.form.firstname">__jhiTransformTranslate__('settings.form.firstname')</label>
           <input
@@ -38,30 +43,27 @@
             data-cy="firstname"
           />
 
-          <div
-            *ngIf="
-              settingsForm.get('firstName')!.invalid &&
-              (settingsForm.get('firstName')!.dirty || settingsForm.get('firstName')!.touched)
-            "
-          >
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('firstName')?.errors?.required"
+        @if (settingsForm.get('firstName')!.invalid && (settingsForm.get('firstName')!.dirty || settingsForm.get('firstName')!.touched)) {
+          <div>
+          @if (settingsForm.get('firstName')?.errors?.required) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="settings.messages.validate.firstname.required"
             >__jhiTransformTranslate__('settings.messages.validate.firstname.required')</small>
+          }
 
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('firstName')?.errors?.minlength"
+          @if (settingsForm.get('firstName')?.errors?.minlength) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="settings.messages.validate.firstname.minlength"
             >__jhiTransformTranslate__('settings.messages.validate.firstname.minlength')</small>
+          }
 
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('firstName')?.errors?.maxlength"
+          @if (settingsForm.get('firstName')?.errors?.maxlength) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="settings.messages.validate.firstname.maxlength"
             >__jhiTransformTranslate__('settings.messages.validate.firstname.maxlength')</small>
+          }
           </div>
+        }
         </div>
 
         <div class="mb-3">
@@ -76,30 +78,27 @@
             data-cy="lastname"
           />
 
-          <div
-            *ngIf="
-              settingsForm.get('lastName')!.invalid &&
-              (settingsForm.get('lastName')!.dirty || settingsForm.get('lastName')!.touched)
-            "
-          >
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('lastName')?.errors?.required"
+        @if (settingsForm.get('lastName')!.invalid && (settingsForm.get('lastName')!.dirty || settingsForm.get('lastName')!.touched)) {
+          <div>
+          @if (settingsForm.get('lastName')?.errors?.required) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="settings.messages.validate.lastname.required"
             >__jhiTransformTranslate__('settings.messages.validate.lastname.required')</small>
+          }
 
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('lastName')?.errors?.minlength"
+          @if (settingsForm.get('lastName')?.errors?.minlength) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="settings.messages.validate.lastname.minlength"
             >__jhiTransformTranslate__('settings.messages.validate.lastname.minlength')</small>
+          }
 
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('lastName')?.errors?.maxlength"
+          @if (settingsForm.get('lastName')?.errors?.maxlength) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="settings.messages.validate.lastname.maxlength"
             >__jhiTransformTranslate__('settings.messages.validate.lastname.maxlength')</small>
+          }
           </div>
+        }
         </div>
 
         <div class="mb-3">
@@ -114,40 +113,46 @@
             data-cy="email"
           />
 
-          <div *ngIf="settingsForm.get('email')!.invalid && (settingsForm.get('email')!.dirty || settingsForm.get('email')!.touched)">
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('email')?.errors?.required"
+        @if (settingsForm.get('email')!.invalid && (settingsForm.get('email')!.dirty || settingsForm.get('email')!.touched)) {
+          <div>
+          @if (settingsForm.get('email')?.errors?.required) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="global.messages.validate.email.required"
             >__jhiTransformTranslate__('global.messages.validate.email.required')</small>
+          }
 
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('email')?.errors?.email"
+          @if (settingsForm.get('email')?.errors?.email) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="global.messages.validate.email.invalid"
             >__jhiTransformTranslate__('global.messages.validate.email.invalid')</small>
+          }
 
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('email')?.errors?.minlength"
+          @if (settingsForm.get('email')?.errors?.minlength) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="global.messages.validate.email.minlength"
             >__jhiTransformTranslate__('global.messages.validate.email.minlength')</small>
+          }
 
-            <small
-              class="form-text text-danger"
-              *ngIf="settingsForm.get('email')?.errors?.maxlength"
+          @if (settingsForm.get('email')?.errors?.maxlength) {
+            <small class="form-text text-danger"
               <%= jhiPrefix %>Translate="global.messages.validate.email.maxlength"
             >__jhiTransformTranslate__('global.messages.validate.email.maxlength')</small>
+          }
           </div>
+        }
         </div>
         <%_ if (enableTranslation) { _%>
 
-        <div class="mb-3" *ngIf="languages && languages.length > 0">
+      @if (languages && languages.length > 0) {
+        <div class="mb-3">
           <label for="langKey" <%= jhiPrefix %>Translate="settings.form.language">__jhiTransformTranslate__('settings.form.language')</label>
           <select class="form-control" id="langKey" name="langKey" formControlName="langKey" data-cy="langKey">
-            <option *ngFor="let language of languages" [value]="language">{{ language | findLanguageFromKey }}</option>
+          @for (language of languages; track $index) {
+            <option [value]="language">{{ language | findLanguageFromKey }}</option>
+          }
           </select>
         </div>
+      }
         <%_ } _%>
 
         <button
@@ -158,6 +163,7 @@
           data-cy="submit"
         >__jhiTransformTranslate__('settings.form.button')</button>
       </form>
+    }
     </div>
   </div>
 </div>

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

@@ -0,0 +1,74 @@
+<%#
+ Copyright 2013-2023 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+import { Routes } from '@angular/router';
+/* jhipster-needle-add-admin-module-import - JHipster will add admin modules imports here */
+
+const routes: Routes = [
+<%_ if (generateUserManagement) { _%>
+  {
+    path: 'user-management',
+    loadChildren: () => import('./user-management/user-management.route'),
+    title: 'userManagement.home.title',
+  },
+<%_ } _%>
+  {
+    path: 'docs',
+    loadComponent: () => import('./docs/docs.component'),
+    title: 'global.menu.admin.apidocs',
+  },
+<%_ if (withAdminUi) { _%>
+  {
+    path: 'configuration',
+    loadComponent: () => import('./configuration/configuration.component'),
+    title: 'configuration.title',
+  },
+  {
+    path: 'health',
+    loadComponent: () => import('./health/health.component'),
+    title: 'health.title',
+  },
+  {
+    path: 'logs',
+    loadComponent: () => import('./logs/logs.component'),
+    title: 'logs.title',
+  },
+  {
+    path: 'metrics',
+    loadComponent: () => import('./metrics/metrics.component'),
+    title: 'metrics.title',
+  },
+<%_ } _%>
+<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+  {
+    path: 'gateway',
+    loadComponent: () => import('./gateway/gateway.component'),
+    title: 'gateway.title',
+  },
+<%_ } _%>
+<%_ if (communicationSpringWebsocket) { _%>
+  {
+    path: 'tracker',
+    loadComponent: () => import('./tracker/tracker.component'),
+    title: 'tracker.title',
+  },
+<%_ } _%>
+  /* jhipster-needle-add-admin-route - JHipster will add admin routes here */
+];
+
+export default routes;

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

@@ -16,7 +16,8 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-<div *ngIf="allBeans">
+@if (allBeans) {
+<div>
   <h2 id="configuration-page-heading" <%= jhiPrefix %>Translate="configuration.title" data-cy="configurationPageHeading">__jhiTransformTranslate__('configuration.title')</h2>
 
   <span <%= jhiPrefix %>Translate="configuration.filter">__jhiTransformTranslate__('configuration.filter')</span>
@@ -34,23 +35,28 @@
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let bean of beans">
+    @for (bean of beans; track $index) {
+      <tr>
         <td>
           <span>{{ bean.prefix }}</span>
         </td>
         <td>
-          <div class="row" *ngFor="let property of bean.properties | keyvalue">
+        @for (property of bean.properties | keyvalue; track property.key) {
+          <div class="row">
             <div class="col-md-4">{{ property.key }}</div>
             <div class="col-md-8">
               <span class="float-end bg-secondary break">{{ property.value | json }}</span>
             </div>
           </div>
+        }
         </td>
       </tr>
+    }
     </tbody>
   </table>
 
-  <div *ngFor="let propertySource of propertySources; let i = index">
+  @for (propertySource of propertySources; track i; let i = $index) {
+  <div>
     <h4 [id]="'property-source-' + i">
       <span>{{ propertySource.name }}</span>
     </h4>
@@ -63,13 +69,17 @@
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let property of propertySource.properties | keyvalue">
+      @for (property of propertySource.properties | keyvalue; track property.key) {
+        <tr>
           <td class="break">{{ property.key }}</td>
           <td class="break">
             <span class="float-end bg-secondary break">{{ property.value.value }}</span>
           </td>
         </tr>
+      }
       </tbody>
     </table>
   </div>
+  }
 </div>
+}

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

@@ -22,6 +22,6 @@ import { Component } from '@angular/core';
   standalone: true,
   selector: '<%= jhiPrefixDashed %>-docs',
   templateUrl: './docs.component.html',
-  styleUrls: ['./docs.component.scss'],
+  styleUrl: './docs.component.scss',
 })
 export default class DocsComponent {}

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

@@ -37,33 +37,46 @@
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let route of gatewayRoutes">
+      @for (route of gatewayRoutes; track route.path) {
+        <tr>
           <td>{{ route.path }}</td>
           <td>{{ route.serviceId }}</td>
           <td>
-            <div *ngIf="route.serviceInstances.length === 0" class="label label-danger" <%= jhiPrefix %>Translate="gateway.routes.error">__jhiTransformTranslate__('gateway.routes.error')</div>
+          @if (route.serviceInstances.length === 0) {
+            <div class="label label-danger" <%= jhiPrefix %>Translate="gateway.routes.error">__jhiTransformTranslate__('gateway.routes.error')</div>
+          }
 
             <div class="table-responsive">
-              <table class="table table-striped" *ngIf="route">
-                <tr *ngFor="let instance of route.serviceInstances">
+            @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>
-                    <div *ngIf="instance.instanceInfo" class="badge bg-{{ instance.instanceInfo.status === 'UP' ? 'success' : 'danger' }}">{{ instance.instanceInfo.status }}</div>
-                    <div *ngIf="!instance.instanceInfo" class="badge bg-warning">?</div>
+                  @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>
-                    <span *ngFor="let entry of (instance.metadata | keyvalue )">
+                  @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/health/health.component.html.ejs

@@ -34,8 +34,10 @@
           <th scope="col" class="text-center" <%= jhiPrefix %>Translate="health.details.details">__jhiTransformTranslate__('health.details.details')</th>
         </tr>
       </thead>
-      <tbody *ngIf="health">
-        <tr *ngFor="let componentHealth of health.components | keyvalue">
+    @if (health) {
+      <tbody>
+      @for (componentHealth of health.components | keyvalue; track componentHealth.key) {
+        <tr>
           <td>
             <%_ if (enableTranslation) { _%>
             {{ 'health.indicator.' + componentHealth.key | translate }}
@@ -53,16 +55,17 @@
             </span>
           </td>
           <td class="text-center">
-            <a
-              class="hand"
-              (click)="showHealth({ key: componentHealth.key, value: componentHealth.value! })"
-              *ngIf="componentHealth.value!.details"
-            >
+          @if (componentHealth.value!.details) {
+            <a class="hand"
+              (click)="showHealth({ key: componentHealth.key, value: componentHealth.value! })">
               <fa-icon icon="eye"></fa-icon>
             </a>
+          }
           </td>
         </tr>
+      }
       </tbody>
+    }
     </table>
   </div>
 </div>

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

@@ -17,13 +17,15 @@
  limitations under the License.
 -%>
 <div class="modal-header">
-  <h4 class="modal-title" id="showHealthLabel" *ngIf="health">
+@if (health) {
+  <h4 class="modal-title" id="showHealthLabel">
     <%_ if (enableTranslation) { _%>
     {{ 'health.indicator.' + health.key | translate }}
     <%_ } else { _%>
     <span class="text-capitalize">{{ health.key }}</span>
     <%_ } _%>
   </h4>
+}
 
   <button aria-label="Close" data-dismiss="modal" class="btn-close" type="button" (click)="dismiss()">
     <span aria-hidden="true">&times;</span>
@@ -31,7 +33,8 @@
 </div>
 
 <div class="modal-body pad">
-  <div *ngIf="health">
+@if (health) {
+  <div>
     <h5 <%= jhiPrefix %>Translate="health.details.properties">__jhiTransformTranslate__('health.details.properties')</h5>
 
     <div class="table-responsive">
@@ -43,14 +46,17 @@
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let healthDetail of health.value.details! | keyvalue">
+        @for (healthDetail of health.value.details! | keyvalue; track healthDetail.key) {
+          <tr>
             <td class="text-start">{{ healthDetail.key }}</td>
             <td class="text-start">{{ readableValue(healthDetail.value) }}</td>
           </tr>
+        }
         </tbody>
       </table>
     </div>
   </div>
+}
 </div>
 
 <div class="modal-footer">

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

@@ -16,23 +16,28 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-<div class="table-responsive" *ngIf="loggers">
+@if (loggers) {
+<div class="table-responsive">
   <h2 id="logs-page-heading" <%= jhiPrefix %>Translate="logs.title" data-cy="logsPageHeading">__jhiTransformTranslate__('logs.title')</h2>
 
 <%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
   <div class="float-end">
     <select class="form-select" id="routesSelect" (change)="changeService($event)">
       <option [ngValue]="null"></option>
-      <option *ngFor="let service of services" [value]="service">
+    @for (service of services; track $index) {
+      <option [value]="service">
         {{ service }}
       </option>
+    }
     </select>
   </div>
 <%_ } _%>
 
-  <div class="float-end me-3" *ngIf="isLoading">
+@if (isLoading) {
+  <div class="float-end me-3">
     <div class="spinner-border"></div>
   </div>
+}
 
   <p <%= jhiPrefix %>Translate="logs.nbloggers" [translateValues]="{ total: loggers.length }">__jhiTransformTranslate__('logs.nbloggers', { "total": "{{ loggers.length }}" })</p>
 
@@ -48,7 +53,8 @@
     </thead>
 
     <tbody>
-      <tr *ngFor="let logger of filteredAndOrderedLoggers">
+    @for (logger of filteredAndOrderedLoggers; track $index) {
+      <tr>
         <td>
           <small>{{ logger.name | slice: 0:140 }}</small>
         </td>
@@ -102,6 +108,8 @@
           </button>
         </td>
       </tr>
+    }
     </tbody>
   </table>
 </div>
+}

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

@@ -18,19 +18,22 @@
 -%>
 <h4 <%= jhiPrefix %>Translate="metrics.jvm.memory.title">__jhiTransformTranslate__('metrics.jvm.memory.title')</h4>
 
-<div *ngIf="!updating && jvmMemoryMetrics">
-  <div *ngFor="let entry of jvmMemoryMetrics | keyvalue">
-    <span *ngIf="entry.value.max !== -1; else other">
+@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>
 
     <div>Committed : {{ entry.value.committed / 1048576 | number: '1.0-0' }}M</div>
-
-    <ng-template #other><span><span>{{ entry.key }}</span> {{ entry.value.used / 1048576 | number: '1.0-0' }}M</span></ng-template>
-
+  } @else {
+    <span><span>{{ entry.key }}</span> {{ entry.value.used / 1048576 | number: '1.0-0' }}M</span>
+  }
+  @if (entry.value.max !== -1) {
     <ngb-progressbar
-      *ngIf="entry.value.max !== -1"
       type="success"
       [value]="(100 * entry.value.used) / entry.value.max"
       [striped]="true"
@@ -38,5 +41,8 @@
     >
       <span>{{ (entry.value.used * 100) / entry.value.max | number: '1.0-0' }}%</span>
     </ngb-progressbar>
+  }
   </div>
+  }
 </div>
+}

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

@@ -18,7 +18,8 @@
 -%>
 <h3 id="cacheMetrics" <%= jhiPrefix %>Translate="metrics.cache.title">__jhiTransformTranslate__('metrics.cache.title')</h3>
 
-<div class="table-responsive" *ngIf="!updating && cacheMetrics">
+@if (!updating && cacheMetrics) {
+<div class="table-responsive">
   <table class="table table-striped" aria-describedby="cacheMetrics">
     <thead>
       <tr>
@@ -34,7 +35,8 @@
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let entry of cacheMetrics | keyvalue">
+    @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>
@@ -55,6 +57,8 @@
           }}
         </td>
       </tr>
+    }
     </tbody>
   </table>
 </div>
+}

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

@@ -18,7 +18,8 @@
 -%>
 <h3 id="datasourceMetrics" <%= jhiPrefix %>Translate="metrics.datasource.title">__jhiTransformTranslate__('metrics.datasource.title')</h3>
 
-<div class="table-responsive" *ngIf="!updating && datasourceMetrics">
+@if (!updating && datasourceMetrics) {
+<div class="table-responsive">
   <table class="table table-striped" aria-describedby="datasourceMetrics">
     <thead>
       <tr>
@@ -73,3 +74,4 @@
     </tbody>
   </table>
 </div>
+}

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

@@ -18,7 +18,8 @@
 -%>
 <h3 id="endpointsRequestsMetrics">Endpoints requests (time in millisecond)</h3>
 
-<div class="table-responsive" *ngIf="!updating && endpointsRequestsMetrics">
+@if (!updating && endpointsRequestsMetrics) {
+<div class="table-responsive">
   <table class="table table-striped" aria-describedby="endpointsRequestsMetrics">
     <thead>
       <tr>
@@ -29,14 +30,17 @@
       </tr>
     </thead>
     <tbody>
-      <ng-container *ngFor="let entry of endpointsRequestsMetrics | keyvalue">
-        <tr *ngFor="let method of entry.value | keyvalue">
-          <td>{{ method.key }}</td>
-          <td>{{ entry.key }}</td>
-          <td class="text-end">{{ method.value!.count }}</td>
-          <td class="text-end">{{ method.value!.mean | number: '1.0-3' }}</td>
-        </tr>
-      </ng-container>
+  @for (entry of endpointsRequestsMetrics | keyvalue; track entry.key) {
+    @for (method of entry.value | keyvalue; track method.key) {
+      <tr>
+        <td>{{ method.key }}</td>
+        <td>{{ entry.key }}</td>
+        <td class="text-end">{{ method.value!.count }}</td>
+        <td class="text-end">{{ method.value!.mean | number: '1.0-3' }}</td>
+      </tr>
+    }
+  }
     </tbody>
   </table>
 </div>
+}