generator-jhipster 7.6.0 → 7.7.0

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

@@ -23,32 +23,32 @@
     <thead>
       <tr>
         <th scope="col" <%= jhiPrefix %>Translate="metrics.cache.cachename">Cache name</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.cache.hits">Cache Hits</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.cache.misses">Cache Misses</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.cache.gets">Cache Gets</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.cache.puts">Cache Puts</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.cache.removals">Cache Removals</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.cache.evictions">Cache Evictions</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.cache.hitPercent">Cache Hit %</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.cache.missPercent">Cache Miss %</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.cache.hits">Cache Hits</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.cache.misses">Cache Misses</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.cache.gets">Cache Gets</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.cache.puts">Cache Puts</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.cache.removals">Cache Removals</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.cache.evictions">Cache Evictions</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.cache.hitPercent">Cache Hit %</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.cache.missPercent">Cache Miss %</th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let entry of cacheMetrics | keyvalue">
         <td>{{ entry.key }}</td>
-        <td class="text-right">{{ entry.value['cache.gets.hit'] }}</td>
-        <td class="text-right">{{ entry.value['cache.gets.miss'] }}</td>
-        <td class="text-right">{{ entry.value['cache.gets.hit'] + entry.value['cache.gets.miss'] }}</td>
-        <td class="text-right">{{ entry.value['cache.puts'] }}</td>
-        <td class="text-right">{{ entry.value['cache.removals'] }}</td>
-        <td class="text-right">{{ entry.value['cache.evictions'] }}</td>
-        <td class="text-right">
+        <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-right">
+        <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'

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

@@ -26,49 +26,49 @@
           <span <%= jhiPrefix %>Translate="metrics.datasource.usage">Connection Pool Usage</span> (active: {{ datasourceMetrics.active.value }},
           min: {{ datasourceMetrics.min.value }}, max: {{ datasourceMetrics.max.value }}, idle: {{ datasourceMetrics.idle.value }})
         </th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.datasource.count">Count</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.datasource.mean">Mean</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.min">Min</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p50">p50</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p75">p75</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p95">p95</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p99">p99</th>
-        <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.datasource.max">Max</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.datasource.count">Count</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.datasource.mean">Mean</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.min">Min</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p50">p50</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p75">p75</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p95">p95</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p99">p99</th>
+        <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.datasource.max">Max</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Acquire</td>
-        <td class="text-right">{{ datasourceMetrics.acquire.count }}</td>
-        <td class="text-right">{{ filterNaN(datasourceMetrics.acquire.mean) | number: '1.0-2' }}</td>
-        <td class="text-right">{{ datasourceMetrics.acquire['0.0'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.acquire['0.5'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.acquire['0.75'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.acquire['0.95'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.acquire['0.99'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ filterNaN(datasourceMetrics.acquire.max) | number: '1.0-2' }}</td>
+        <td class="text-end">{{ datasourceMetrics.acquire.count }}</td>
+        <td class="text-end">{{ filterNaN(datasourceMetrics.acquire.mean) | number: '1.0-2' }}</td>
+        <td class="text-end">{{ datasourceMetrics.acquire['0.0'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.acquire['0.5'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.acquire['0.75'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.acquire['0.95'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.acquire['0.99'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ filterNaN(datasourceMetrics.acquire.max) | number: '1.0-2' }}</td>
       </tr>
       <tr>
         <td>Creation</td>
-        <td class="text-right">{{ datasourceMetrics.creation.count }}</td>
-        <td class="text-right">{{ filterNaN(datasourceMetrics.creation.mean) | number: '1.0-2' }}</td>
-        <td class="text-right">{{ datasourceMetrics.creation['0.0'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.creation['0.5'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.creation['0.75'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.creation['0.95'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.creation['0.99'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ filterNaN(datasourceMetrics.creation.max) | number: '1.0-2' }}</td>
+        <td class="text-end">{{ datasourceMetrics.creation.count }}</td>
+        <td class="text-end">{{ filterNaN(datasourceMetrics.creation.mean) | number: '1.0-2' }}</td>
+        <td class="text-end">{{ datasourceMetrics.creation['0.0'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.creation['0.5'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.creation['0.75'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.creation['0.95'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.creation['0.99'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ filterNaN(datasourceMetrics.creation.max) | number: '1.0-2' }}</td>
       </tr>
       <tr>
         <td>Usage</td>
-        <td class="text-right">{{ datasourceMetrics.usage.count }}</td>
-        <td class="text-right">{{ filterNaN(datasourceMetrics.usage.mean) | number: '1.0-2' }}</td>
-        <td class="text-right">{{ datasourceMetrics.usage['0.0'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.usage['0.5'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.usage['0.75'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.usage['0.95'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ datasourceMetrics.usage['0.99'] | number: '1.0-3' }}</td>
-        <td class="text-right">{{ filterNaN(datasourceMetrics.usage.max) | number: '1.0-2' }}</td>
+        <td class="text-end">{{ datasourceMetrics.usage.count }}</td>
+        <td class="text-end">{{ filterNaN(datasourceMetrics.usage.mean) | number: '1.0-2' }}</td>
+        <td class="text-end">{{ datasourceMetrics.usage['0.0'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.usage['0.5'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.usage['0.75'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.usage['0.95'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ datasourceMetrics.usage['0.99'] | number: '1.0-3' }}</td>
+        <td class="text-end">{{ filterNaN(datasourceMetrics.usage.max) | number: '1.0-2' }}</td>
       </tr>
     </tbody>
   </table>

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

@@ -24,8 +24,8 @@
       <tr>
         <th scope="col">Method</th>
         <th scope="col">Endpoint url</th>
-        <th scope="col" class="text-right">Count</th>
-        <th scope="col" class="text-right">Mean</th>
+        <th scope="col" class="text-end">Count</th>
+        <th scope="col" class="text-end">Mean</th>
       </tr>
     </thead>
     <tbody>
@@ -33,8 +33,8 @@
         <tr *ngFor="let method of entry.value | keyvalue">
           <td>{{ method.key }}</td>
           <td>{{ entry.key }}</td>
-          <td class="text-right">{{ method.value!.count }}</td>
-          <td class="text-right">{{ method.value!.mean | number: '1.0-3' }}</td>
+          <td class="text-end">{{ method.value!.count }}</td>
+          <td class="text-end">{{ method.value!.mean | number: '1.0-3' }}</td>
         </tr>
       </ng-container>
     </tbody>

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

@@ -69,11 +69,11 @@
   <div id="garbageCollectorMetrics" class="col-md-4">
     <div class="row" *ngIf="garbageCollectorMetrics">
       <div class="col-md-9">Classes loaded</div>
-      <div class="col-md-3 text-right">{{ garbageCollectorMetrics.classesLoaded }}</div>
+      <div class="col-md-3 text-end">{{ garbageCollectorMetrics.classesLoaded }}</div>
     </div>
     <div class="row" *ngIf="garbageCollectorMetrics">
       <div class="col-md-9">Classes unloaded</div>
-      <div class="col-md-3 text-right">{{ garbageCollectorMetrics.classesUnloaded }}</div>
+      <div class="col-md-3 text-end">{{ garbageCollectorMetrics.classesUnloaded }}</div>
     </div>
   </div>
 
@@ -82,27 +82,27 @@
       <thead>
         <tr>
           <th scope="col"></th>
-          <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.count">Count</th>
-          <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.mean">Mean</th>
-          <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.min">Min</th>
-          <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p50">p50</th>
-          <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p75">p75</th>
-          <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p95">p95</th>
-          <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p99">p99</th>
-          <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.servicesstats.table.max">Max</th>
+          <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.count">Count</th>
+          <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.mean">Mean</th>
+          <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.min">Min</th>
+          <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p50">p50</th>
+          <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p75">p75</th>
+          <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p95">p95</th>
+          <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.p99">p99</th>
+          <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.servicesstats.table.max">Max</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>jvm.gc.pause</td>
-          <td class="text-right">{{ garbageCollectorMetrics['jvm.gc.pause'].count }}</td>
-          <td class="text-right">{{ garbageCollectorMetrics['jvm.gc.pause'].mean | number: '1.0-3' }}</td>
-          <td class="text-right">{{ garbageCollectorMetrics['jvm.gc.pause']['0.0'] | number: '1.0-3' }}</td>
-          <td class="text-right">{{ garbageCollectorMetrics['jvm.gc.pause']['0.5'] | number: '1.0-3' }}</td>
-          <td class="text-right">{{ garbageCollectorMetrics['jvm.gc.pause']['0.75'] | number: '1.0-3' }}</td>
-          <td class="text-right">{{ garbageCollectorMetrics['jvm.gc.pause']['0.95'] | number: '1.0-3' }}</td>
-          <td class="text-right">{{ garbageCollectorMetrics['jvm.gc.pause']['0.99'] | number: '1.0-3' }}</td>
-          <td class="text-right">{{ garbageCollectorMetrics['jvm.gc.pause'].max | number: '1.0-3' }}</td>
+          <td class="text-end">{{ garbageCollectorMetrics['jvm.gc.pause'].count }}</td>
+          <td class="text-end">{{ garbageCollectorMetrics['jvm.gc.pause'].mean | number: '1.0-3' }}</td>
+          <td class="text-end">{{ garbageCollectorMetrics['jvm.gc.pause']['0.0'] | number: '1.0-3' }}</td>
+          <td class="text-end">{{ garbageCollectorMetrics['jvm.gc.pause']['0.5'] | number: '1.0-3' }}</td>
+          <td class="text-end">{{ garbageCollectorMetrics['jvm.gc.pause']['0.75'] | number: '1.0-3' }}</td>
+          <td class="text-end">{{ garbageCollectorMetrics['jvm.gc.pause']['0.95'] | number: '1.0-3' }}</td>
+          <td class="text-end">{{ garbageCollectorMetrics['jvm.gc.pause']['0.99'] | number: '1.0-3' }}</td>
+          <td class="text-end">{{ garbageCollectorMetrics['jvm.gc.pause'].max | number: '1.0-3' }}</td>
         </tr>
       </tbody>
     </table>

package/generators/client/templates/angular/src/main/webapp/app/admin/metrics/blocks/metrics-modal-threads/metrics-modal-threads.component.html.ejs

@@ -19,34 +19,34 @@
 <div class="modal-header">
   <h4 class="modal-title" <%= jhiPrefix %>Translate="metrics.jvm.threads.dump.title">Threads dump</h4>
 
-  <button type="button" class="close" (click)="dismiss()">&times;</button>
+  <button type="button" class="btn-close" (click)="dismiss()">&times;</button>
 </div>
 
 <div class="modal-body">
   <div class="mb-3">
-    <span class="badge badge-primary hand" (click)="threadStateFilter = undefined">
+    <span class="badge bg-primary hand" (click)="threadStateFilter = undefined">
       <fa-icon *ngIf="threadStateFilter === undefined" icon="check"></fa-icon>
-      All&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpAll }}</span>
+      All&nbsp;<span class="badge rounded-pill bg-default">{{ threadDumpAll }}</span>
     </span>
 
-    <span class="badge badge-success hand" (click)="threadStateFilter = ThreadState.Runnable">
+    <span class="badge bg-success hand" (click)="threadStateFilter = ThreadState.Runnable">
       <fa-icon *ngIf="threadStateFilter === ThreadState.Runnable" icon="check"></fa-icon>
-      Runnable&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpRunnable }}</span>
+      Runnable&nbsp;<span class="badge rounded-pill bg-default">{{ threadDumpRunnable }}</span>
     </span>
 
-    <span class="badge badge-info hand" (click)="threadStateFilter = ThreadState.Waiting">
+    <span class="badge bg-info hand" (click)="threadStateFilter = ThreadState.Waiting">
       <fa-icon *ngIf="threadStateFilter === ThreadState.Waiting" icon="check"></fa-icon>
-      Waiting&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpWaiting }}</span>
+      Waiting&nbsp;<span class="badge rounded-pill bg-default">{{ threadDumpWaiting }}</span>
     </span>
 
-    <span class="badge badge-warning hand" (click)="threadStateFilter = ThreadState.TimedWaiting">
+    <span class="badge bg-warning hand" (click)="threadStateFilter = ThreadState.TimedWaiting">
       <fa-icon *ngIf="threadStateFilter === ThreadState.TimedWaiting" icon="check"></fa-icon>
-      Timed Waiting&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpTimedWaiting }}</span>
+      Timed Waiting&nbsp;<span class="badge rounded-pill bg-default">{{ threadDumpTimedWaiting }}</span>
     </span>
 
-    <span class="badge badge-danger hand" (click)="threadStateFilter = ThreadState.Blocked">
+    <span class="badge bg-danger hand" (click)="threadStateFilter = ThreadState.Blocked">
       <fa-icon *ngIf="threadStateFilter === ThreadState.Blocked" icon="check"></fa-icon>
-      Blocked&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpBlocked }}</span>
+      Blocked&nbsp;<span class="badge rounded-pill bg-default">{{ threadDumpBlocked }}</span>
     </span>
   </div>
 
@@ -96,5 +96,5 @@
   </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-secondary float-left" data-dismiss="modal" (click)="dismiss()">Done</button>
+  <button type="button" class="btn btn-secondary float-start" data-dismiss="modal" (click)="dismiss()">Done</button>
 </div>

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

@@ -56,13 +56,13 @@ export class MetricsModalThreadsComponent implements OnInit {
 
   getBadgeClass(threadState: ThreadState): string {
     if (threadState === ThreadState.Runnable) {
-      return 'badge-success';
+      return 'bg-success';
     } else if (threadState === ThreadState.Waiting) {
-      return 'badge-info';
+      return 'bg-info';
     } else if (threadState === ThreadState.TimedWaiting) {
-      return 'badge-warning';
+      return 'bg-warning';
     } else if (threadState === ThreadState.Blocked) {
-      return 'badge-danger';
+      return 'bg-danger';
     }
     return '';
   }

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

@@ -23,8 +23,8 @@
     <tr>
       <th scope="col" <%= jhiPrefix %>Translate="metrics.jvm.http.table.code">Code</th>
       <th scope="col" <%= jhiPrefix %>Translate="metrics.jvm.http.table.count">Count</th>
-      <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.jvm.http.table.mean">Mean</th>
-      <th scope="col" class="text-right" <%= jhiPrefix %>Translate="metrics.jvm.http.table.max">Max</th>
+      <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.jvm.http.table.mean">Mean</th>
+      <th scope="col" class="text-end" <%= jhiPrefix %>Translate="metrics.jvm.http.table.max">Max</th>
     </tr>
   </thead>
   <tbody>
@@ -35,10 +35,10 @@
           <span>{{ entry.value.count }}</span>
         </ngb-progressbar>
       </td>
-      <td class="text-right">
+      <td class="text-end">
         {{ filterNaN(entry.value.mean) | number: '1.0-2' }}
       </td>
-      <td class="text-right">{{ entry.value.max | number: '1.0-2' }}</td>
+      <td class="text-end">{{ entry.value.max | number: '1.0-2' }}</td>
     </tr>
   </tbody>
 </table>

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

@@ -21,17 +21,17 @@
 <ng-container *ngIf="!updating && systemMetrics">
   <div class="row">
     <div class="col-md-4">Uptime</div>
-    <div class="col-md-8 text-right">{{ convertMillisecondsToDuration(systemMetrics['process.uptime']) }}</div>
+    <div class="col-md-8 text-end">{{ convertMillisecondsToDuration(systemMetrics['process.uptime']) }}</div>
   </div>
 
   <div class="row">
     <div class="col-md-4">Start time</div>
-    <div class="col-md-8 text-right">{{ systemMetrics['process.start.time'] | date: 'full' }}</div>
+    <div class="col-md-8 text-end">{{ systemMetrics['process.start.time'] | date: 'full' }}</div>
   </div>
 
   <div class="row">
     <div class="col-md-9">Process CPU usage</div>
-    <div class="col-md-3 text-right">{{ 100 * systemMetrics['process.cpu.usage'] | number: '1.0-2' }} %</div>
+    <div class="col-md-3 text-end">{{ 100 * systemMetrics['process.cpu.usage'] | number: '1.0-2' }} %</div>
   </div>
 
   <ngb-progressbar [value]="100 * systemMetrics['process.cpu.usage']" [striped]="true" [animated]="false" type="success">
@@ -40,7 +40,7 @@
 
   <div class="row">
     <div class="col-md-9">System CPU usage</div>
-    <div class="col-md-3 text-right">{{ 100 * systemMetrics['system.cpu.usage'] | number: '1.0-2' }} %</div>
+    <div class="col-md-3 text-end">{{ 100 * systemMetrics['system.cpu.usage'] | number: '1.0-2' }} %</div>
   </div>
 
   <ngb-progressbar [value]="100 * systemMetrics['system.cpu.usage']" [striped]="true" [animated]="false" type="success">
@@ -49,21 +49,21 @@
 
   <div class="row">
     <div class="col-md-9">System CPU count</div>
-    <div class="col-md-3 text-right">{{ systemMetrics['system.cpu.count'] }}</div>
+    <div class="col-md-3 text-end">{{ systemMetrics['system.cpu.count'] }}</div>
   </div>
 
   <div class="row">
     <div class="col-md-9">System 1m Load average</div>
-    <div class="col-md-3 text-right">{{ systemMetrics['system.load.average.1m'] | number: '1.0-2' }}</div>
+    <div class="col-md-3 text-end">{{ systemMetrics['system.load.average.1m'] | number: '1.0-2' }}</div>
   </div>
 
   <div class="row">
     <div class="col-md-9">Process files max</div>
-    <div class="col-md-3 text-right">{{ systemMetrics['process.files.max'] | number: '1.0-0' }}</div>
+    <div class="col-md-3 text-end">{{ systemMetrics['process.files.max'] | number: '1.0-0' }}</div>
   </div>
 
   <div class="row">
     <div class="col-md-9">Process files open</div>
-    <div class="col-md-3 text-right">{{ systemMetrics['process.files.open'] | number: '1.0-0' }}</div>
+    <div class="col-md-3 text-end">{{ systemMetrics['process.files.open'] | number: '1.0-0' }}</div>
   </div>
 </ng-container>

package/generators/client/templates/angular/src/main/webapp/app/admin/metrics/metrics.component.html.ejs

@@ -20,7 +20,7 @@
   <h2>
     <span id="metrics-page-heading" <%= jhiPrefix %>Translate="metrics.title" data-cy="metricsPageHeading">Application Metrics</span>
 
-    <button class="btn btn-primary float-right" (click)="refresh()">
+    <button class="btn btn-primary float-end" (click)="refresh()">
       <fa-icon icon="sync"></fa-icon> <span <%= jhiPrefix %>Translate="metrics.refresh.button">Refresh</span>
     </button>
   </h2>

package/generators/client/templates/angular/src/main/webapp/app/admin/user-management/delete/user-management-delete-dialog.component.html.ejs

@@ -20,7 +20,7 @@
   <div class="modal-header">
     <h4 class="modal-title" <%= jhiPrefix %>Translate="entity.delete.title">Confirm delete operation</h4>
 
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="cancel()">&times;</button>
+    <button type="button" class="btn-close" data-dismiss="modal" aria-hidden="true" (click)="cancel()">&times;</button>
   </div>
 
   <div class="modal-body">

package/generators/client/templates/angular/src/main/webapp/app/admin/user-management/detail/user-management-detail.component.html.ejs

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-<div class="row justify-content-center">
+<div class="d-flex justify-content-center">
   <div class="col-8">
     <div *ngIf="user">
       <h2>
@@ -27,8 +27,8 @@
         <dt><span <%= jhiPrefix %>Translate="userManagement.login">Login</span></dt>
         <dd>
           <span>{{ user.login }}</span>
-          <span *ngIf="user.activated" class="badge badge-success" <%= jhiPrefix %>Translate="userManagement.activated">Activated</span>
-          <span *ngIf="!user.activated" class="badge badge-danger" <%= jhiPrefix %>Translate="userManagement.deactivated">Deactivated</span>
+          <span *ngIf="user.activated" class="badge bg-success" <%= jhiPrefix %>Translate="userManagement.activated">Activated</span>
+          <span *ngIf="!user.activated" class="badge bg-danger" <%= jhiPrefix %>Translate="userManagement.deactivated">Deactivated</span>
         </dd>
 
         <dt><span <%= jhiPrefix %>Translate="userManagement.firstName">First Name</span></dt>
@@ -61,7 +61,7 @@
         <dd>
           <ul class="list-unstyled">
             <li *ngFor="let authority of user.authorities">
-              <span class="badge badge-info">{{ authority }}</span>
+              <span class="badge bg-info">{{ authority }}</span>
             </li>
           </ul>
         </dd>

package/generators/client/templates/angular/src/main/webapp/app/admin/user-management/list/user-management.component.html.ejs

@@ -21,7 +21,7 @@
     <span id="user-management-page-heading" <%= jhiPrefix %>Translate="userManagement.home.title" data-cy="userManagementPageHeading">Users</span>
 
     <div class="d-flex justify-content-end">
-      <button class="btn btn-info mr-2" (click)="loadAll()" [disabled]="isLoading">
+      <button class="btn btn-info me-2" (click)="loadAll()" [disabled]="isLoading">
         <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
         <span <%= jhiPrefix %>Translate="userManagement.home.refreshListLabel">Refresh List</span>
       </button>
@@ -100,7 +100,7 @@
 <%_ } _%>
           <td>
             <div *ngFor="let authority of user.authorities">
-              <span class="badge badge-info">{{ authority }}</span>
+              <span class="badge bg-info">{{ authority }}</span>
             </div>
           </td>
 <%_ if (!databaseTypeCassandra) { _%>
@@ -108,7 +108,7 @@
           <td>{{ user.lastModifiedBy }}</td>
           <td>{{ user.lastModifiedDate | date: 'dd/MM/yy HH:mm' }}</td>
 <%_ } _%>
-          <td class="text-right">
+          <td class="text-end">
             <div class="btn-group">
               <button type="submit" [routerLink]="['./', user.login, 'view']" class="btn btn-info btn-sm">
                 <fa-icon icon="eye"></fa-icon>
@@ -138,11 +138,11 @@
 <%_ if (!databaseTypeCassandra) { _%>
 
   <div *ngIf="users">
-    <div class="row justify-content-center">
+    <div class="d-flex justify-content-center">
       <<%= jhiPrefixDashed %>-item-count [params]="{ page: page, totalItems: totalItems, itemsPerPage: itemsPerPage }"></<%= jhiPrefixDashed %>-item-count>
     </div>
 
-    <div class="row justify-content-center">
+    <div class="d-flex justify-content-center">
       <ngb-pagination
         [collectionSize]="totalItems"
         [(page)]="page"

package/generators/client/templates/angular/src/main/webapp/app/admin/user-management/update/user-management-update.component.html.ejs

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-<div class="row justify-content-center">
+<div class="d-flex justify-content-center">
   <div class="col-8">
     <form name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
       <h2 id="myUserLabel" <%= jhiPrefix %>Translate="userManagement.home.createOrEditLabel">Create or edit a User</h2>
@@ -24,13 +24,13 @@
       <div *ngIf="user">
         <<%= jhiPrefixDashed %>-alert-error></<%= jhiPrefixDashed %>-alert-error>
 
-        <div class="form-group" [hidden]="!user.id">
+        <div class="mb-3" [hidden]="!user.id">
           <label <%= jhiPrefix %>Translate="global.field.id">ID</label>
           <input type="text" class="form-control" name="id" formControlName="id" readonly />
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" <%= jhiPrefix %>Translate="userManagement.login">Login</label>
+        <div class="mb-3">
+          <label class="form-label" <%= jhiPrefix %>Translate="userManagement.login">Login</label>
           <input type="text" class="form-control" name="login" formControlName="login" />
 
           <div *ngIf="editForm.get('login')!.invalid && (editForm.get('login')!.dirty || editForm.get('login')!.touched)">
@@ -61,8 +61,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" <%= jhiPrefix %>Translate="userManagement.firstName">First Name</label>
+        <div class="mb-3">
+          <label class="form-label" <%= jhiPrefix %>Translate="userManagement.firstName">First Name</label>
           <input type="text" class="form-control" name="firstName" formControlName="firstName" />
 
           <div *ngIf="editForm.get('firstName')!.invalid && (editForm.get('firstName')!.dirty || editForm.get('firstName')!.touched)">
@@ -77,7 +77,7 @@
           </div>
         </div>
 
-        <div class="form-group">
+        <div class="mb-3">
           <label <%= jhiPrefix %>Translate="userManagement.lastName">Last Name</label>
           <input type="text" class="form-control" name="lastName" formControlName="lastName" />
 
@@ -93,8 +93,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" <%= jhiPrefix %>Translate="userManagement.email">Email</label>
+        <div class="mb-3">
+          <label class="form-label" <%= jhiPrefix %>Translate="userManagement.email">Email</label>
           <input type="email" class="form-control" name="email" formControlName="email" />
 
           <div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
@@ -149,7 +149,7 @@
         </div>
 <%_ if (enableTranslation) { _%>
 
-        <div class="form-group" *ngIf="languages && languages.length > 0">
+        <div class="mb-3" *ngIf="languages && languages.length > 0">
           <label <%= jhiPrefix %>Translate="userManagement.langKey">Lang Key</label>
           <select class="form-control" id="langKey" name="langKey" formControlName="langKey">
             <option *ngFor="let language of languages" [value]="language">{{ language | findLanguageFromKey }}</option>
@@ -157,7 +157,7 @@
         </div>
 <%_ } _%>
 
-        <div class="form-group">
+        <div class="mb-3">
           <label <%= jhiPrefix %>Translate="userManagement.profiles">Profiles</label>
           <select class="form-control" multiple name="authority" formControlName="authorities">
             <option *ngFor="let authority of authorities" [value]="authority">{{ authority }}</option>

package/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs

@@ -17,6 +17,7 @@
  limitations under the License.
 -%>
 <nav data-cy="navbar" class="navbar navbar-<% if (clientThemeNone || clientThemePrimary) { %>dark<% } else { %><%= clientThemeVariant %><% } %> navbar-expand-md <% if (clientThemeNone) { %>bg-dark<% } else { %>bg-<%= clientThemeVariant %><% } %>">
+  <div class="container-fluid">
   <a class="navbar-brand logo" routerLink="/" (click)="collapseNavbar()">
     <span class="logo-img"></span>
     <span <%= jhiPrefix %>Translate="global.title" class="navbar-title"><%= capitalizedBaseName %></span>
@@ -35,7 +36,7 @@
     <fa-icon icon="bars"></fa-icon>
   </a>
   <div class="navbar-collapse collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="account !== null">
-    <ul class="navbar-nav ml-auto">
+    <ul class="navbar-nav ms-auto">
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
         <a class="nav-link" routerLink="/" (click)="collapseNavbar()">
           <span>
@@ -73,7 +74,7 @@
               <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
               <span
     <%_ if (enableTranslation) { _%>
-              [jhiTranslate]="entityNavbarItem.translationKey"
+              [<%= jhiPrefix %>Translate]="entityNavbarItem.translationKey"
     <%_ } _%>
               >{{entityNavbarItem.name}}</span>
             </a>
@@ -239,4 +240,5 @@
       </li>
     </ul>
   </div>
+  </div>
 </nav>

package/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.scss.ejs

@@ -46,12 +46,6 @@ Navbar
   }
 <%_ } _%>
 
-  ul.navbar-nav {
-    .nav-item {
-      margin-left: 0.5em;
-    }
-  }
-
   a.nav-link {
     font-weight: 400;
   }

package/generators/client/templates/angular/src/main/webapp/app/layouts/profiles/page-ribbon.component.scss.ejs

@@ -21,12 +21,6 @@ Developement Ribbon
 ========================================================================== */
 .ribbon {
   background-color: rgba(170, 0, 0, 0.5);
-  left: -3.5em;
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
   overflow: hidden;
   position: absolute;
   top: 40px;