generator-jhipster 7.6.0 → 7.7.0

package/generators/client/files-common.js

@@ -20,11 +20,7 @@ const constants = require('../generator-constants');
 
 const { CLIENT_MAIN_SRC_DIR } = constants;
 
-module.exports = {
-  writeFiles,
-};
-
-const commonFiles = {
+const files = {
   common: [
     {
       templates: ['.eslintignore', 'README.md.jhi.client', `${CLIENT_MAIN_SRC_DIR}manifest.webapp`],
@@ -62,7 +58,7 @@ const commonFiles = {
       ],
     },
     {
-      condition: generator => generator.enableI18nRTL && !generator.clientFrameworkReact,
+      condition: generator => generator.enableI18nRTL && !generator.clientFrameworkReact && !generator.clientFrameworkAngular,
       path: CLIENT_MAIN_SRC_DIR,
       templates: ['content/scss/rtl.scss'],
     },
@@ -81,5 +77,10 @@ const commonFiles = {
 };
 
 function writeFiles() {
-  return this.writeFilesToDisk(commonFiles, 'common');
+  return this.writeFilesToDisk(files, 'common');
 }
+
+module.exports = {
+  files,
+  writeFiles,
+};

package/generators/client/files-vue.js

@@ -24,12 +24,6 @@ const { GATEWAY } = require('../../jdl/jhipster/application-types');
 
 const { CLIENT_MAIN_SRC_DIR, CLIENT_TEST_SRC_DIR, VUE_DIR } = constants;
 
-module.exports = {
-  cleanup,
-  writeFiles,
-  customizeFiles,
-};
-
 const vueFiles = {
   common: [
     {
@@ -428,3 +422,10 @@ function customizeFiles() {
     }
   }
 }
+
+module.exports = {
+  files: vueFiles,
+  cleanup,
+  writeFiles,
+  customizeFiles,
+};

package/generators/client/index.js

@@ -35,7 +35,7 @@ const {
 } = require('../../lib/constants/priorities.cjs').compat;
 
 const prompts = require('./prompts');
-const writeAngularFiles = require('./files-angular').writeFiles;
+const { cleanup: cleanupAngular, writeFiles: writeAngularFiles } = require('./files-angular');
 const { cleanup: cleanupReact, writeFiles: writeReactFiles } = require('./files-react');
 const { cleanup: cleanupVue, writeFiles: writeVueFiles, customizeFiles: customizeVueFiles } = require('./files-vue');
 const writeCommonFiles = require('./files-common').writeFiles;
@@ -341,6 +341,7 @@ module.exports = class JHipsterClientGenerator extends BaseBlueprintGenerator {
     return {
       cleanupReact,
       cleanupVue,
+      cleanupAngular,
 
       write() {
         if (this.skipClient) return;

package/generators/client/templates/angular/angular.json.ejs

@@ -128,7 +128,7 @@
   "cli": {
     "cache": {
       "enabled": true,
-      "path": "./<%= BUILD_DIR %>",
+      "path": "./<%= BUILD_DIR %>angular/",
       "environment": "all"
     },
     "packageManager": "<%= clientPackageManager %>"

package/generators/client/templates/angular/package.json

@@ -1,46 +1,49 @@
 {
   "dependencies": {
-    "@angular/common": "13.1.3",
-    "bootstrap": "4.6.1",
+    "@angular/common": "13.2.4",
     "@fortawesome/angular-fontawesome": "0.10.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@ng-bootstrap/ng-bootstrap": "11.0.0",
+    "@fortawesome/fontawesome-svg-core": "1.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.0.0",
+    "@ng-bootstrap/ng-bootstrap": "12.0.0",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
+    "@popperjs/core": "2.11.2",
+    "bootstrap": "5.1.3",
+    "bootswatch": "5.1.3",
     "ngx-cookie-service": "13.1.2",
     "ngx-infinite-scroll": "10.0.1",
     "ngx-webstorage": "9.0.0",
-    "rxjs": "7.5.2",
-    "swagger-ui-dist": "4.2.1",
+    "rxjs": "7.5.4",
+    "swagger-ui-dist": "4.5.2",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular/cli": "13.1.2",
-    "@angular-builders/custom-webpack": "13.0.0",
-    "@angular-builders/jest": "13.0.2",
-    "@angular-eslint/eslint-plugin": "13.0.1",
-    "@types/node": "16.11.21",
-    "@types/jest": "27.4.0",
-    "@typescript-eslint/eslint-plugin": "5.10.0",
+    "@angular/cli": "13.2.5",
+    "@angular-builders/custom-webpack": "13.1.0",
+    "@angular-builders/jest": "13.0.3",
+    "@angular-eslint/eslint-plugin": "13.1.0",
+    "@types/node": "16.11.26",
+    "@types/jest": "27.4.1",
+    "@typescript-eslint/eslint-plugin": "5.12.1",
     "browser-sync": "2.27.7",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "10.2.1",
-    "eslint": "8.5.0",
-    "eslint-config-prettier": "8.3.0",
+    "copy-webpack-plugin": "10.2.4",
+    "eslint": "8.9.0",
+    "eslint-config-prettier": "8.4.0",
     "eslint-webpack-plugin": "3.1.1",
-    "folder-hash": "4.0.1",
-    "jest": "27.4.7",
-    "jest-preset-angular": "11.0.1",
+    "folder-hash": "4.0.2",
+    "jest": "27.5.1",
+    "jest-preset-angular": "11.1.1",
     "jest-date-mock": "1.0.8",
     "jest-junit": "13.0.0",
     "jest-sonar-reporter": "2.0.0",
     "merge-jsons-webpack-plugin": "2.0.1",
+    "postcss-rtlcss": "3.5.2",
     "rimraf": "3.0.2",
     "ts-jest": "27.1.3",
-    "typescript": "4.5.4",
-    "webpack": "5.66.0",
+    "typescript": "4.5.5",
+    "webpack": "5.69.1",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-merge": "5.8.0",
     "webpack-notifier": "1.15.0"

package/generators/client/templates/angular/package.json.ejs

@@ -45,7 +45,7 @@
 <%_ } _%>
     "bootstrap": "<%= dependabotPackageJson.dependencies.bootstrap %>",
     <%_ if (!clientThemeNone) { _%>
-    "bootswatch": "<%= dependabotPackageJson.dependencies.bootstrap %>",
+    "bootswatch": "<%= dependabotPackageJson.dependencies.bootswatch %>",
     <%_ } _%>
     "dayjs": "<%= dependabotPackageJson.dependencies['dayjs'] %>",
     <%_ if (authenticationTypeSession && websocket === 'spring-websocket') { _%>
@@ -53,6 +53,7 @@
     <%_ } _%>
     "ngx-infinite-scroll": "<%= dependabotPackageJson.dependencies['ngx-infinite-scroll'] %>",
     "ngx-webstorage": "<%= dependabotPackageJson.dependencies['ngx-webstorage'] %>",
+    "@popperjs/core": "<%= dependabotPackageJson.dependencies['@popperjs/core'] %>",
     "rxjs": "<%= dependabotPackageJson.dependencies['rxjs'] %>",
     "swagger-ui-dist": "<%= dependabotPackageJson.dependencies['swagger-ui-dist'] %>",
     <%_ if (websocket === 'spring-websocket') { _%>
@@ -122,6 +123,9 @@
     "jest-sonar-reporter": "<%= dependabotPackageJson.devDependencies['jest-sonar-reporter'] %>",
     "prettier": "<%= dependabotPackageJson.devDependencies['prettier'] %>",
     "prettier-plugin-packagejson": "<%= dependabotPackageJson.devDependencies['prettier-plugin-packagejson'] %>",
+<%_ if (enableI18nRTL) { _%>
+    "postcss-rtlcss": "<%= dependabotPackageJson.devDependencies['postcss-rtlcss'] %>",
+<%_ } _%>
     "rimraf": "<%= dependabotPackageJson.devDependencies['rimraf'] %>",
     "ts-jest": "<%= dependabotPackageJson.devDependencies['ts-jest'] %>",
     "typescript": "<%= dependabotPackageJson.devDependencies['typescript'] %>",

package/generators/client/templates/angular/src/main/webapp/app/account/activate/activate.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <h1 <%= jhiPrefix %>Translate="activate.title">Activation</h1>
 

package/generators/client/templates/angular/src/main/webapp/app/account/password/password.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8" *ngIf="account$ | async as account">
       <h2 <%= jhiPrefix %>Translate="password.title" [translateValues]="{ username: account.login }">
         Password for [<strong>{{ account.login }}</strong>]
@@ -36,8 +36,8 @@
       </div>
 
       <form name="form" role="form" (ngSubmit)="changePassword()" [formGroup]="passwordForm">
-        <div class="form-group">
-          <label class="form-control-label" for="currentPassword" <%= jhiPrefix %>Translate="global.form.currentpassword.label">Current password</label>
+        <div class="mb-3">
+          <label class="form-label" for="currentPassword" <%= jhiPrefix %>Translate="global.form.currentpassword.label">Current password</label>
           <input
             type="password"
             class="form-control"
@@ -64,8 +64,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
+        <div class="mb-3">
+          <label class="form-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
           <input
             type="password"
             class="form-control"
@@ -110,8 +110,8 @@
           <<%= jhiPrefixDashed %>-password-strength-bar [passwordToCheck]="passwordForm.get('newPassword')!.value"></<%= jhiPrefixDashed %>-password-strength-bar>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
+        <div class="mb-3">
+          <label class="form-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
           <input
             type="password"
             class="form-control"

package/generators/client/templates/angular/src/main/webapp/app/account/password-reset/finish/password-reset-finish.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-4">
       <h1 <%= jhiPrefix %>Translate="reset.finish.title">Reset password</h1>
 
@@ -44,8 +44,8 @@
 
       <div *ngIf="key && !success">
         <form name="form" role="form" (ngSubmit)="finishReset()" [formGroup]="passwordForm">
-          <div class="form-group">
-            <label class="form-control-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
+          <div class="mb-3">
+            <label class="form-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
             <input
               type="password"
               class="form-control"
@@ -91,8 +91,8 @@
             <<%= jhiPrefixDashed %>-password-strength-bar [passwordToCheck]="passwordForm.get('newPassword')!.value"></<%= jhiPrefixDashed %>-password-strength-bar>
           </div>
 
-          <div class="form-group">
-            <label class="form-control-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
+          <div class="mb-3">
+            <label class="form-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
             <input
               type="password"
               class="form-control"

package/generators/client/templates/angular/src/main/webapp/app/account/password-reset/init/password-reset-init.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <h1 <%= jhiPrefix %>Translate="reset.request.title">Reset your password</h1>
 
@@ -32,8 +32,8 @@
       </div>
 
       <form *ngIf="!success" name="form" role="form" (ngSubmit)="requestReset()" [formGroup]="resetRequestForm">
-        <div class="form-group">
-          <label class="form-control-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
+        <div class="mb-3">
+          <label class="form-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
           <input
             type="email"
             class="form-control"

package/generators/client/templates/angular/src/main/webapp/app/account/register/register.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <h1 <%= jhiPrefix %>Translate="register.title" data-cy="registerTitle">Registration</h1>
 
@@ -43,11 +43,11 @@
     </div>
   </div>
 
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <form name="form" role="form" (ngSubmit)="register()" [formGroup]="registerForm" *ngIf="!success">
-        <div class="form-group">
-          <label class="form-control-label" for="login" <%= jhiPrefix %>Translate="global.form.username.label">Username</label>
+        <div class="mb-3">
+          <label class="form-label" for="login" <%= jhiPrefix %>Translate="global.form.username.label">Username</label>
           <input
             type="text"
             class="form-control"
@@ -94,8 +94,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
+        <div class="mb-3">
+          <label class="form-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
           <input
             type="email"
             class="form-control"
@@ -141,8 +141,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="password" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
+        <div class="mb-3">
+          <label class="form-label" for="password" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
           <input
             type="password"
             class="form-control"
@@ -187,8 +187,8 @@
           <<%= jhiPrefixDashed %>-password-strength-bar [passwordToCheck]="registerForm.get('password')!.value"></<%= jhiPrefixDashed %>-password-strength-bar>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
+        <div class="mb-3">
+          <label class="form-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
           <input
             type="password"
             class="form-control"

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

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <h2 <%= jhiPrefix %>Translate="settings.title" [translateValues]="{ username: account.login }" *ngIf="account">
         User settings for [<strong>{{ account.login }}</strong>]
@@ -30,8 +30,8 @@
       <<%= jhiPrefixDashed %>-alert-error></<%= jhiPrefixDashed %>-alert-error>
 
       <form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" *ngIf="account" novalidate>
-        <div class="form-group">
-          <label class="form-control-label" for="firstName" <%= jhiPrefix %>Translate="settings.form.firstname">First Name</label>
+        <div class="mb-3">
+          <label class="form-label" for="firstName" <%= jhiPrefix %>Translate="settings.form.firstname">First Name</label>
           <input
             type="text"
             class="form-control"
@@ -74,8 +74,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="lastName" <%= jhiPrefix %>Translate="settings.form.lastname">Last Name</label>
+        <div class="mb-3">
+          <label class="form-label" for="lastName" <%= jhiPrefix %>Translate="settings.form.lastname">Last Name</label>
           <input
             type="text"
             class="form-control"
@@ -118,8 +118,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
+        <div class="mb-3">
+          <label class="form-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
           <input
             type="email"
             class="form-control"
@@ -166,7 +166,7 @@
         </div>
         <%_ if (enableTranslation) { _%>
 
-        <div class="form-group" *ngIf="languages && languages.length > 0">
+        <div class="mb-3" *ngIf="languages && languages.length > 0">
           <label for="langKey" <%= jhiPrefix %>Translate="settings.form.language">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>

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

@@ -42,7 +42,7 @@
           <div class="row" *ngFor="let property of bean.properties | keyvalue">
             <div class="col-md-4">{{ property.key }}</div>
             <div class="col-md-8">
-              <span class="float-right badge-secondary break">{{ property.value | json }}</span>
+              <span class="float-end bg-secondary break">{{ property.value | json }}</span>
             </div>
           </div>
         </td>
@@ -66,7 +66,7 @@
         <tr *ngFor="let property of propertySource.properties | keyvalue">
           <td class="break">{{ property.key }}</td>
           <td class="break">
-            <span class="float-right badge-secondary break">{{ property.value.value }}</span>
+            <span class="float-end bg-secondary break">{{ property.value.value }}</span>
           </td>
         </tr>
       </tbody>

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

@@ -20,7 +20,7 @@
   <h2>
     <span id="gateway-page-heading" <%= jhiPrefix %>Translate="gateway.title">Gateway</span>
 
-    <button class="btn btn-primary float-right" (click)="refresh()" (disabled)="updatingRoutes">
+    <button class="btn btn-primary float-end" (click)="refresh()" (disabled)="updatingRoutes">
       <fa-icon icon="sync"></fa-icon> <span <%= jhiPrefix %>Translate="gateway.refresh.button">Refresh</span>
     </button>
   </h2>
@@ -50,13 +50,13 @@
                 <tr *ngFor="let instance of route.serviceInstances">
                   <td><a href="{{ instance.uri }}" target="_blank">{{ instance.uri }}</a></td>
                   <td>
-                    <div *ngIf="instance.instanceInfo" class="badge badge-{{ instance.instanceInfo.status === 'UP' ? 'success' : 'danger' }}">{{ instance.instanceInfo.status }}</div>
-                    <div *ngIf="!instance.instanceInfo" class="badge badge-warning">?</div>
+                    <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>
                   </td>
                   <td>
                     <span *ngFor="let entry of (instance.metadata | keyvalue )">
-                      <span class="badge badge-default font-weight-normal">
-                        <span class="badge badge-pill badge-info font-weight-normal">{{ entry.key }}</span>
+                      <span class="badge bg-default fw-normal">
+                        <span class="badge rounded-pill bg-info fw-normal">{{ entry.key }}</span>
                         {{ entry.value }}
                       </span>
                     </span>

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

@@ -20,7 +20,7 @@
   <h2>
     <span id="health-page-heading" <%= jhiPrefix %>Translate="health.title" data-cy="healthPageHeading">Health Checks</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="health.refresh.button">Refresh</span>
     </button>
   </h2>

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

@@ -51,8 +51,8 @@ describe('HealthComponent', () => {
     it('should get badge class', () => {
       const upBadgeClass = comp.getBadgeClass('UP');
       const downBadgeClass = comp.getBadgeClass('DOWN');
-      expect(upBadgeClass).toEqual('badge-success');
-      expect(downBadgeClass).toEqual('badge-danger');
+      expect(upBadgeClass).toEqual('bg-success');
+      expect(downBadgeClass).toEqual('bg-danger');
     });
   });
 

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

@@ -39,9 +39,9 @@ export class HealthComponent implements OnInit {
 
   getBadgeClass(statusState: HealthStatus): string {
     if (statusState === 'UP') {
-      return 'badge-success';
+      return 'bg-success';
     }
-    return 'badge-danger';
+    return 'bg-danger';
   }
 
   refresh(): void {

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

@@ -25,7 +25,7 @@
     <%_ } _%>
   </h4>
 
-  <button aria-label="Close" data-dismiss="modal" class="close" type="button" (click)="dismiss()">
+  <button aria-label="Close" data-dismiss="modal" class="btn-close" type="button" (click)="dismiss()">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
@@ -38,14 +38,14 @@
       <table class="table table-striped" aria-describedby="showHealthLabel">
         <thead>
           <tr>
-            <th scope="col" class="text-left" <%= jhiPrefix %>Translate="health.details.name">Name</th>
-            <th scope="col" class="text-left" <%= jhiPrefix %>Translate="health.details.value">Value</th>
+            <th scope="col" class="text-start" <%= jhiPrefix %>Translate="health.details.name">Name</th>
+            <th scope="col" class="text-start" <%= jhiPrefix %>Translate="health.details.value">Value</th>
           </tr>
         </thead>
         <tbody>
           <tr *ngFor="let healthDetail of health.value.details! | keyvalue">
-            <td class="text-left">{{ healthDetail.key }}</td>
-            <td class="text-left">{{ readableValue(healthDetail.value) }}</td>
+            <td class="text-start">{{ healthDetail.key }}</td>
+            <td class="text-start">{{ readableValue(healthDetail.value) }}</td>
           </tr>
         </tbody>
       </table>
@@ -54,5 +54,5 @@
 </div>
 
 <div class="modal-footer">
-  <button data-dismiss="modal" class="btn btn-secondary float-left" type="button" (click)="dismiss()">Done</button>
+  <button data-dismiss="modal" class="btn btn-secondary float-start" type="button" (click)="dismiss()">Done</button>
 </div>

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

@@ -32,59 +32,61 @@
       </tr>
     </thead>
 
-    <tr *ngFor="let logger of filteredAndOrderedLoggers">
-      <td>
-        <small>{{ logger.name | slice: 0:140 }}</small>
-      </td>
-      <td>
-        <button
-          (click)="changeLevel(logger.name, 'TRACE')"
-          [ngClass]="logger.level === 'TRACE' ? 'btn-primary' : 'btn-light'"
-          class="btn btn-sm"
-        >
-          TRACE
-        </button>
+    <tbody>
+      <tr *ngFor="let logger of filteredAndOrderedLoggers">
+        <td>
+          <small>{{ logger.name | slice: 0:140 }}</small>
+        </td>
+        <td>
+          <button
+            (click)="changeLevel(logger.name, 'TRACE')"
+            [ngClass]="logger.level === 'TRACE' ? 'btn-primary' : 'btn-light'"
+            class="btn btn-sm"
+          >
+            TRACE
+          </button>
 
-        <button
-          (click)="changeLevel(logger.name, 'DEBUG')"
-          [ngClass]="logger.level === 'DEBUG' ? 'btn-success' : 'btn-light'"
-          class="btn btn-sm"
-        >
-          DEBUG
-        </button>
+          <button
+            (click)="changeLevel(logger.name, 'DEBUG')"
+            [ngClass]="logger.level === 'DEBUG' ? 'btn-success' : 'btn-light'"
+            class="btn btn-sm"
+          >
+            DEBUG
+          </button>
 
-        <button
-          (click)="changeLevel(logger.name, 'INFO')"
-          [ngClass]="logger.level === 'INFO' ? 'btn-info' : 'btn-light'"
-          class="btn btn-sm"
-        >
-          INFO
-        </button>
+          <button
+            (click)="changeLevel(logger.name, 'INFO')"
+            [ngClass]="logger.level === 'INFO' ? 'btn-info' : 'btn-light'"
+            class="btn btn-sm"
+          >
+            INFO
+          </button>
 
-        <button
-          (click)="changeLevel(logger.name, 'WARN')"
-          [ngClass]="logger.level === 'WARN' ? 'btn-warning' : 'btn-light'"
-          class="btn btn-sm"
-        >
-          WARN
-        </button>
+          <button
+            (click)="changeLevel(logger.name, 'WARN')"
+            [ngClass]="logger.level === 'WARN' ? 'btn-warning' : 'btn-light'"
+            class="btn btn-sm"
+          >
+            WARN
+          </button>
 
-        <button
-          (click)="changeLevel(logger.name, 'ERROR')"
-          [ngClass]="logger.level === 'ERROR' ? 'btn-danger' : 'btn-light'"
-          class="btn btn-sm"
-        >
-          ERROR
-        </button>
+          <button
+            (click)="changeLevel(logger.name, 'ERROR')"
+            [ngClass]="logger.level === 'ERROR' ? 'btn-danger' : 'btn-light'"
+            class="btn btn-sm"
+          >
+            ERROR
+          </button>
 
-        <button
-          (click)="changeLevel(logger.name, 'OFF')"
-          [ngClass]="logger.level === 'OFF' ? 'btn-secondary' : 'btn-light'"
-          class="btn btn-sm"
-        >
-          OFF
-        </button>
-      </td>
-    </tr>
+          <button
+            (click)="changeLevel(logger.name, 'OFF')"
+            [ngClass]="logger.level === 'OFF' ? 'btn-secondary' : 'btn-light'"
+            class="btn btn-sm"
+          >
+            OFF
+          </button>
+        </td>
+      </tr>
+    </tbody>
   </table>
 </div>