diff --git a/.yo-rc.json b/.yo-rc.json
index bf55d8bdf..600c3d83a 100644
--- a/.yo-rc.json
+++ b/.yo-rc.json
@@ -61,6 +61,6 @@
     "testFrameworks": [],
     "useSass": true,
     "websocket": false,
-    "withAdminUi": false
+    "withAdminUi": true
   }
 }
diff --git a/src/main/resources/config/application.yml b/src/main/resources/config/application.yml
index a37a3ed08..de5ee5845 100644
--- a/src/main/resources/config/application.yml
+++ b/src/main/resources/config/application.yml
@@ -38,8 +38,8 @@ eureka:
     enabled: true
     healthcheck:
       enabled: true
-    fetch-registry: true
-    register-with-eureka: true
+    fetch-registry: false
+    register-with-eureka: false
     instance-info-replication-interval-seconds: 10
     registry-fetch-interval-seconds: 10
     service-url:
diff --git a/src/main/webapp/app/admin/admin-routing.module.ts b/src/main/webapp/app/admin/admin-routing.module.ts
index 4722e566a..40a775d23 100644
--- a/src/main/webapp/app/admin/admin-routing.module.ts
+++ b/src/main/webapp/app/admin/admin-routing.module.ts
@@ -10,6 +10,22 @@ import { RouterModule } from '@angular/router';
         path: 'docs',
         loadChildren: () => import('./docs/docs.module').then(m => m.DocsModule),
       },
+      {
+        path: 'configuration',
+        loadChildren: () => import('./configuration/configuration.module').then(m => m.ConfigurationModule),
+      },
+      {
+        path: 'health',
+        loadChildren: () => import('./health/health.module').then(m => m.HealthModule),
+      },
+      {
+        path: 'logs',
+        loadChildren: () => import('./logs/logs.module').then(m => m.LogsModule),
+      },
+      {
+        path: 'metrics',
+        loadChildren: () => import('./metrics/metrics.module').then(m => m.MetricsModule),
+      },
       /* jhipster-needle-add-admin-route - JHipster will add admin routes here */
     ]),
   ],
diff --git a/src/main/webapp/app/admin/configuration/configuration.component.html b/src/main/webapp/app/admin/configuration/configuration.component.html
new file mode 100644
index 000000000..1e35c674f
--- /dev/null
+++ b/src/main/webapp/app/admin/configuration/configuration.component.html
@@ -0,0 +1,55 @@
+<div *ngIf="allBeans">
+  <h2 id="configuration-page-heading" data-cy="configurationPageHeading">Configuration</h2>
+
+  <span>Filter (by prefix)</span>
+  <input type="text" [(ngModel)]="beansFilter" (ngModelChange)="filterAndSortBeans()" class="form-control" />
+
+  <h3 id="spring-configuration">Spring configuration</h3>
+
+  <table class="table table-striped table-bordered table-responsive d-table" aria-describedby="spring-configuration">
+    <thead>
+      <tr jhiSort predicate="prefix" [(ascending)]="beansAscending" (sortChange)="filterAndSortBeans()">
+        <th jhiSortBy="prefix" scope="col" class="w-40"><span>Prefix</span> <fa-icon icon="sort"></fa-icon></th>
+        <th scope="col" class="w-60"><span>Properties</span></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let bean of beans">
+        <td>
+          <span>{{ bean.prefix }}</span>
+        </td>
+        <td>
+          <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-end bg-secondary break">{{ property.value | json }}</span>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div *ngFor="let propertySource of propertySources; let i = index">
+    <h4 [id]="'property-source-' + i">
+      <span>{{ propertySource.name }}</span>
+    </h4>
+
+    <table class="table table-sm table-striped table-bordered table-responsive d-table" [attr.aria-describedby]="'property-source-' + i">
+      <thead>
+        <tr>
+          <th scope="col" class="w-40">Property</th>
+          <th scope="col" class="w-60">Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let property of propertySource.properties | keyvalue">
+          <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>
diff --git a/src/main/webapp/app/admin/configuration/configuration.component.spec.ts b/src/main/webapp/app/admin/configuration/configuration.component.spec.ts
new file mode 100644
index 000000000..12df2b285
--- /dev/null
+++ b/src/main/webapp/app/admin/configuration/configuration.component.spec.ts
@@ -0,0 +1,67 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of } from 'rxjs';
+
+import { ConfigurationComponent } from './configuration.component';
+import { ConfigurationService } from './configuration.service';
+import { Bean, PropertySource } from './configuration.model';
+
+describe('ConfigurationComponent', () => {
+  let comp: ConfigurationComponent;
+  let fixture: ComponentFixture<ConfigurationComponent>;
+  let service: ConfigurationService;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      declarations: [ConfigurationComponent],
+      providers: [ConfigurationService],
+    })
+      .overrideTemplate(ConfigurationComponent, '')
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationComponent);
+    comp = fixture.componentInstance;
+    service = TestBed.inject(ConfigurationService);
+  });
+
+  describe('OnInit', () => {
+    it('Should call load all on init', () => {
+      // GIVEN
+      const beans: Bean[] = [
+        {
+          prefix: 'jhipster',
+          properties: {
+            clientApp: {
+              name: 'jhipsterApp',
+            },
+          },
+        },
+      ];
+      const propertySources: PropertySource[] = [
+        {
+          name: 'server.ports',
+          properties: {
+            'local.server.port': {
+              value: '8080',
+            },
+          },
+        },
+      ];
+      jest.spyOn(service, 'getBeans').mockReturnValue(of(beans));
+      jest.spyOn(service, 'getPropertySources').mockReturnValue(of(propertySources));
+
+      // WHEN
+      comp.ngOnInit();
+
+      // THEN
+      expect(service.getBeans).toHaveBeenCalled();
+      expect(service.getPropertySources).toHaveBeenCalled();
+      expect(comp.allBeans).toEqual(beans);
+      expect(comp.beans).toEqual(beans);
+      expect(comp.propertySources).toEqual(propertySources);
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/configuration/configuration.component.ts b/src/main/webapp/app/admin/configuration/configuration.component.ts
new file mode 100644
index 000000000..939d1aec8
--- /dev/null
+++ b/src/main/webapp/app/admin/configuration/configuration.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ConfigurationService } from './configuration.service';
+import { Bean, PropertySource } from './configuration.model';
+
+@Component({
+  selector: 'jhi-configuration',
+  templateUrl: './configuration.component.html',
+})
+export class ConfigurationComponent implements OnInit {
+  allBeans!: Bean[];
+  beans: Bean[] = [];
+  beansFilter = '';
+  beansAscending = true;
+  propertySources: PropertySource[] = [];
+
+  constructor(private configurationService: ConfigurationService) {}
+
+  ngOnInit(): void {
+    this.configurationService.getBeans().subscribe(beans => {
+      this.allBeans = beans;
+      this.filterAndSortBeans();
+    });
+
+    this.configurationService.getPropertySources().subscribe(propertySources => (this.propertySources = propertySources));
+  }
+
+  filterAndSortBeans(): void {
+    const beansAscendingValue = this.beansAscending ? -1 : 1;
+    const beansAscendingValueReverse = this.beansAscending ? 1 : -1;
+    this.beans = this.allBeans
+      .filter(bean => !this.beansFilter || bean.prefix.toLowerCase().includes(this.beansFilter.toLowerCase()))
+      .sort((a, b) => (a.prefix < b.prefix ? beansAscendingValue : beansAscendingValueReverse));
+  }
+}
diff --git a/src/main/webapp/app/admin/configuration/configuration.model.ts b/src/main/webapp/app/admin/configuration/configuration.model.ts
new file mode 100644
index 000000000..6a671e0a9
--- /dev/null
+++ b/src/main/webapp/app/admin/configuration/configuration.model.ts
@@ -0,0 +1,40 @@
+export interface ConfigProps {
+  contexts: Contexts;
+}
+
+export interface Contexts {
+  [key: string]: Context;
+}
+
+export interface Context {
+  beans: Beans;
+  parentId?: any;
+}
+
+export interface Beans {
+  [key: string]: Bean;
+}
+
+export interface Bean {
+  prefix: string;
+  properties: any;
+}
+
+export interface Env {
+  activeProfiles?: string[];
+  propertySources: PropertySource[];
+}
+
+export interface PropertySource {
+  name: string;
+  properties: Properties;
+}
+
+export interface Properties {
+  [key: string]: Property;
+}
+
+export interface Property {
+  value: string;
+  origin?: string;
+}
diff --git a/src/main/webapp/app/admin/configuration/configuration.module.ts b/src/main/webapp/app/admin/configuration/configuration.module.ts
new file mode 100644
index 000000000..43ade13c1
--- /dev/null
+++ b/src/main/webapp/app/admin/configuration/configuration.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from 'app/shared/shared.module';
+
+import { ConfigurationComponent } from './configuration.component';
+import { configurationRoute } from './configuration.route';
+
+@NgModule({
+  imports: [SharedModule, RouterModule.forChild([configurationRoute])],
+  declarations: [ConfigurationComponent],
+})
+export class ConfigurationModule {}
diff --git a/src/main/webapp/app/admin/configuration/configuration.route.ts b/src/main/webapp/app/admin/configuration/configuration.route.ts
new file mode 100644
index 000000000..f3090ec49
--- /dev/null
+++ b/src/main/webapp/app/admin/configuration/configuration.route.ts
@@ -0,0 +1,11 @@
+import { Route } from '@angular/router';
+
+import { ConfigurationComponent } from './configuration.component';
+
+export const configurationRoute: Route = {
+  path: '',
+  component: ConfigurationComponent,
+  data: {
+    pageTitle: 'Configuration',
+  },
+};
diff --git a/src/main/webapp/app/admin/configuration/configuration.service.spec.ts b/src/main/webapp/app/admin/configuration/configuration.service.spec.ts
new file mode 100644
index 000000000..6e6ff7f49
--- /dev/null
+++ b/src/main/webapp/app/admin/configuration/configuration.service.spec.ts
@@ -0,0 +1,71 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+import { ConfigurationService } from './configuration.service';
+import { Bean, ConfigProps, Env, PropertySource } from './configuration.model';
+
+describe('Logs Service', () => {
+  let service: ConfigurationService;
+  let httpMock: HttpTestingController;
+  let expectedResult: Bean[] | PropertySource[] | null;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+
+    expectedResult = null;
+    service = TestBed.inject(ConfigurationService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  describe('Service methods', () => {
+    it('should get the config', () => {
+      const bean: Bean = {
+        prefix: 'jhipster',
+        properties: {
+          clientApp: {
+            name: 'jhipsterApp',
+          },
+        },
+      };
+      const configProps: ConfigProps = {
+        contexts: {
+          jhipster: {
+            beans: {
+              'tech.jhipster.config.JHipsterProperties': bean,
+            },
+          },
+        },
+      };
+      service.getBeans().subscribe(received => (expectedResult = received));
+
+      const req = httpMock.expectOne({ method: 'GET' });
+      req.flush(configProps);
+      expect(expectedResult).toEqual([bean]);
+    });
+
+    it('should get the env', () => {
+      const propertySources: PropertySource[] = [
+        {
+          name: 'server.ports',
+          properties: {
+            'local.server.port': {
+              value: '8080',
+            },
+          },
+        },
+      ];
+      const env: Env = { propertySources };
+      service.getPropertySources().subscribe(received => (expectedResult = received));
+
+      const req = httpMock.expectOne({ method: 'GET' });
+      req.flush(env);
+      expect(expectedResult).toEqual(propertySources);
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/configuration/configuration.service.ts b/src/main/webapp/app/admin/configuration/configuration.service.ts
new file mode 100644
index 000000000..d8d30518d
--- /dev/null
+++ b/src/main/webapp/app/admin/configuration/configuration.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { ApplicationConfigService } from 'app/core/config/application-config.service';
+import { Bean, Beans, ConfigProps, Env, PropertySource } from './configuration.model';
+
+@Injectable({ providedIn: 'root' })
+export class ConfigurationService {
+  constructor(private http: HttpClient, private applicationConfigService: ApplicationConfigService) {}
+
+  getBeans(): Observable<Bean[]> {
+    return this.http.get<ConfigProps>(this.applicationConfigService.getEndpointFor('management/configprops')).pipe(
+      map(configProps =>
+        Object.values(
+          Object.values(configProps.contexts)
+            .map(context => context.beans)
+            .reduce((allBeans: Beans, contextBeans: Beans) => ({ ...allBeans, ...contextBeans }))
+        )
+      )
+    );
+  }
+
+  getPropertySources(): Observable<PropertySource[]> {
+    return this.http.get<Env>(this.applicationConfigService.getEndpointFor('management/env')).pipe(map(env => env.propertySources));
+  }
+}
diff --git a/src/main/webapp/app/admin/health/health.component.html b/src/main/webapp/app/admin/health/health.component.html
new file mode 100644
index 000000000..6844d9b62
--- /dev/null
+++ b/src/main/webapp/app/admin/health/health.component.html
@@ -0,0 +1,42 @@
+<div>
+  <h2>
+    <span id="health-page-heading" data-cy="healthPageHeading">Health Checks</span>
+
+    <button class="btn btn-primary float-end" (click)="refresh()"><fa-icon icon="sync"></fa-icon> <span>Refresh</span></button>
+  </h2>
+
+  <div class="table-responsive">
+    <table id="healthCheck" class="table table-striped" aria-describedby="health-page-heading">
+      <thead>
+        <tr>
+          <th scope="col">Service name</th>
+          <th scope="col" class="text-center">Status</th>
+          <th scope="col" class="text-center">Details</th>
+        </tr>
+      </thead>
+      <tbody *ngIf="health">
+        <tr *ngFor="let componentHealth of health.components | keyvalue">
+          <td>
+            <span class="text-capitalize">{{ componentHealth.key }}</span>
+          </td>
+          <td class="text-center">
+            <span class="badge" [ngClass]="getBadgeClass(componentHealth.value!.status)">
+              {{
+                { UNKNOWN: 'UNKNOWN', UP: 'UP', OUT_OF_SERVICE: 'OUT_OF_SERVICE', DOWN: 'DOWN' }[componentHealth.value!.status || 'UNKNOWN']
+              }}
+            </span>
+          </td>
+          <td class="text-center">
+            <a
+              class="hand"
+              (click)="showHealth({ key: componentHealth.key, value: componentHealth.value! })"
+              *ngIf="componentHealth.value!.details"
+            >
+              <fa-icon icon="eye"></fa-icon>
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
diff --git a/src/main/webapp/app/admin/health/health.component.spec.ts b/src/main/webapp/app/admin/health/health.component.spec.ts
new file mode 100644
index 000000000..3cfdf9f80
--- /dev/null
+++ b/src/main/webapp/app/admin/health/health.component.spec.ts
@@ -0,0 +1,66 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpErrorResponse } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of, throwError } from 'rxjs';
+
+import { HealthComponent } from './health.component';
+import { HealthService } from './health.service';
+import { Health } from './health.model';
+
+describe('HealthComponent', () => {
+  let comp: HealthComponent;
+  let fixture: ComponentFixture<HealthComponent>;
+  let service: HealthService;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      declarations: [HealthComponent],
+    })
+      .overrideTemplate(HealthComponent, '')
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthComponent);
+    comp = fixture.componentInstance;
+    service = TestBed.inject(HealthService);
+  });
+
+  describe('getBadgeClass', () => {
+    it('should get badge class', () => {
+      const upBadgeClass = comp.getBadgeClass('UP');
+      const downBadgeClass = comp.getBadgeClass('DOWN');
+      expect(upBadgeClass).toEqual('bg-success');
+      expect(downBadgeClass).toEqual('bg-danger');
+    });
+  });
+
+  describe('refresh', () => {
+    it('should call refresh on init', () => {
+      // GIVEN
+      const health: Health = { status: 'UP', components: { mail: { status: 'UP', details: { mailDetail: 'mail' } } } };
+      jest.spyOn(service, 'checkHealth').mockReturnValue(of(health));
+
+      // WHEN
+      comp.ngOnInit();
+
+      // THEN
+      expect(service.checkHealth).toHaveBeenCalled();
+      expect(comp.health).toEqual(health);
+    });
+
+    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 })));
+
+      // WHEN
+      comp.refresh();
+
+      // THEN
+      expect(service.checkHealth).toHaveBeenCalled();
+      expect(comp.health).toEqual(health);
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/health/health.component.ts b/src/main/webapp/app/admin/health/health.component.ts
new file mode 100644
index 000000000..2d9bc2d01
--- /dev/null
+++ b/src/main/webapp/app/admin/health/health.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { HealthService } from './health.service';
+import { Health, HealthDetails, HealthStatus } from './health.model';
+import { HealthModalComponent } from './modal/health-modal.component';
+
+@Component({
+  selector: 'jhi-health',
+  templateUrl: './health.component.html',
+})
+export class HealthComponent implements OnInit {
+  health?: Health;
+
+  constructor(private modalService: NgbModal, private healthService: HealthService) {}
+
+  ngOnInit(): void {
+    this.refresh();
+  }
+
+  getBadgeClass(statusState: HealthStatus): string {
+    if (statusState === 'UP') {
+      return 'bg-success';
+    }
+    return 'bg-danger';
+  }
+
+  refresh(): void {
+    this.healthService.checkHealth().subscribe({
+      next: health => (this.health = health),
+      error: (error: HttpErrorResponse) => {
+        if (error.status === 503) {
+          this.health = error.error;
+        }
+      },
+    });
+  }
+
+  showHealth(health: { key: string; value: HealthDetails }): void {
+    const modalRef = this.modalService.open(HealthModalComponent);
+    modalRef.componentInstance.health = health;
+  }
+}
diff --git a/src/main/webapp/app/admin/health/health.model.ts b/src/main/webapp/app/admin/health/health.model.ts
new file mode 100644
index 000000000..8f2e5cf82
--- /dev/null
+++ b/src/main/webapp/app/admin/health/health.model.ts
@@ -0,0 +1,24 @@
+export type HealthStatus = 'UP' | 'DOWN' | 'UNKNOWN' | 'OUT_OF_SERVICE';
+
+export type HealthKey =
+  | 'discoveryComposite'
+  | 'refreshScope'
+  | 'clientConfigServer'
+  | 'hystrix'
+  | 'diskSpace'
+  | 'mail'
+  | 'ping'
+  | 'livenessState'
+  | 'readinessState';
+
+export interface Health {
+  status: HealthStatus;
+  components: {
+    [key in HealthKey]?: HealthDetails;
+  };
+}
+
+export interface HealthDetails {
+  status: HealthStatus;
+  details?: { [key: string]: unknown };
+}
diff --git a/src/main/webapp/app/admin/health/health.module.ts b/src/main/webapp/app/admin/health/health.module.ts
new file mode 100644
index 000000000..554d1b8e0
--- /dev/null
+++ b/src/main/webapp/app/admin/health/health.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from 'app/shared/shared.module';
+
+import { HealthComponent } from './health.component';
+import { HealthModalComponent } from './modal/health-modal.component';
+import { healthRoute } from './health.route';
+
+@NgModule({
+  imports: [SharedModule, RouterModule.forChild([healthRoute])],
+  declarations: [HealthComponent, HealthModalComponent],
+})
+export class HealthModule {}
diff --git a/src/main/webapp/app/admin/health/health.route.ts b/src/main/webapp/app/admin/health/health.route.ts
new file mode 100644
index 000000000..3a8fe5705
--- /dev/null
+++ b/src/main/webapp/app/admin/health/health.route.ts
@@ -0,0 +1,11 @@
+import { Route } from '@angular/router';
+
+import { HealthComponent } from './health.component';
+
+export const healthRoute: Route = {
+  path: '',
+  component: HealthComponent,
+  data: {
+    pageTitle: 'Health Checks',
+  },
+};
diff --git a/src/main/webapp/app/admin/health/health.service.spec.ts b/src/main/webapp/app/admin/health/health.service.spec.ts
new file mode 100644
index 000000000..850c531f7
--- /dev/null
+++ b/src/main/webapp/app/admin/health/health.service.spec.ts
@@ -0,0 +1,48 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+import { HealthService } from './health.service';
+import { ApplicationConfigService } from 'app/core/config/application-config.service';
+
+describe('HealthService Service', () => {
+  let service: HealthService;
+  let httpMock: HttpTestingController;
+  let applicationConfigService: ApplicationConfigService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+
+    service = TestBed.inject(HealthService);
+    applicationConfigService = TestBed.inject(ApplicationConfigService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  describe('Service methods', () => {
+    it('should call management/health endpoint with correct values', () => {
+      // GIVEN
+      let expectedResult;
+      const checkHealth = {
+        components: [],
+      };
+
+      // WHEN
+      service.checkHealth().subscribe(received => {
+        expectedResult = received;
+      });
+      const testRequest = httpMock.expectOne({
+        method: 'GET',
+        url: applicationConfigService.getEndpointFor('management/health'),
+      });
+      testRequest.flush(checkHealth);
+
+      // THEN
+      expect(expectedResult).toEqual(checkHealth);
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/health/health.service.ts b/src/main/webapp/app/admin/health/health.service.ts
new file mode 100644
index 000000000..4712a9787
--- /dev/null
+++ b/src/main/webapp/app/admin/health/health.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { ApplicationConfigService } from 'app/core/config/application-config.service';
+import { Health } from './health.model';
+
+@Injectable({ providedIn: 'root' })
+export class HealthService {
+  constructor(private http: HttpClient, private applicationConfigService: ApplicationConfigService) {}
+
+  checkHealth(): Observable<Health> {
+    return this.http.get<Health>(this.applicationConfigService.getEndpointFor('management/health'));
+  }
+}
diff --git a/src/main/webapp/app/admin/health/modal/health-modal.component.html b/src/main/webapp/app/admin/health/modal/health-modal.component.html
new file mode 100644
index 000000000..95d6687d0
--- /dev/null
+++ b/src/main/webapp/app/admin/health/modal/health-modal.component.html
@@ -0,0 +1,36 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="showHealthLabel" *ngIf="health">
+    <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>
+  </button>
+</div>
+
+<div class="modal-body pad">
+  <div *ngIf="health">
+    <h5>Properties</h5>
+
+    <div class="table-responsive">
+      <table class="table table-striped" aria-describedby="showHealthLabel">
+        <thead>
+          <tr>
+            <th scope="col" class="text-start">Name</th>
+            <th scope="col" class="text-start">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let healthDetail of health.value.details! | keyvalue">
+            <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">
+  <button data-dismiss="modal" class="btn btn-secondary float-start" type="button" (click)="dismiss()">Done</button>
+</div>
diff --git a/src/main/webapp/app/admin/health/modal/health-modal.component.spec.ts b/src/main/webapp/app/admin/health/modal/health-modal.component.spec.ts
new file mode 100644
index 000000000..9eb92d0e8
--- /dev/null
+++ b/src/main/webapp/app/admin/health/modal/health-modal.component.spec.ts
@@ -0,0 +1,112 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { HealthModalComponent } from './health-modal.component';
+
+describe('HealthModalComponent', () => {
+  let comp: HealthModalComponent;
+  let fixture: ComponentFixture<HealthModalComponent>;
+  let mockActiveModal: NgbActiveModal;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      declarations: [HealthModalComponent],
+      providers: [NgbActiveModal],
+    })
+      .overrideTemplate(HealthModalComponent, '')
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HealthModalComponent);
+    comp = fixture.componentInstance;
+    mockActiveModal = TestBed.inject(NgbActiveModal);
+  });
+
+  describe('readableValue', () => {
+    it('should return stringify value', () => {
+      // GIVEN
+      comp.health = undefined;
+
+      // WHEN
+      const result = comp.readableValue({ name: 'jhipster' });
+
+      // THEN
+      expect(result).toEqual('{"name":"jhipster"}');
+    });
+
+    it('should return string value', () => {
+      // GIVEN
+      comp.health = undefined;
+
+      // WHEN
+      const result = comp.readableValue('jhipster');
+
+      // THEN
+      expect(result).toEqual('jhipster');
+    });
+
+    it('should return storage space in an human readable unit (GB)', () => {
+      // GIVEN
+      comp.health = {
+        key: 'diskSpace',
+        value: {
+          status: 'UP',
+        },
+      };
+
+      // WHEN
+      const result = comp.readableValue(1073741825);
+
+      // THEN
+      expect(result).toEqual('1.00 GB');
+    });
+
+    it('should return storage space in an human readable unit (MB)', () => {
+      // GIVEN
+      comp.health = {
+        key: 'diskSpace',
+        value: {
+          status: 'UP',
+        },
+      };
+
+      // WHEN
+      const result = comp.readableValue(1073741824);
+
+      // THEN
+      expect(result).toEqual('1024.00 MB');
+    });
+
+    it('should return string value', () => {
+      // GIVEN
+      comp.health = {
+        key: 'mail',
+        value: {
+          status: 'UP',
+        },
+      };
+
+      // WHEN
+      const result = comp.readableValue(1234);
+
+      // THEN
+      expect(result).toEqual('1234');
+    });
+  });
+
+  describe('dismiss', () => {
+    it('should call dismiss when dismiss modal is called', () => {
+      // GIVEN
+      const spy = jest.spyOn(mockActiveModal, 'dismiss');
+
+      // WHEN
+      comp.dismiss();
+
+      // THEN
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/health/modal/health-modal.component.ts b/src/main/webapp/app/admin/health/modal/health-modal.component.ts
new file mode 100644
index 000000000..02f7cc94f
--- /dev/null
+++ b/src/main/webapp/app/admin/health/modal/health-modal.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { HealthKey, HealthDetails } from '../health.model';
+
+@Component({
+  selector: 'jhi-health-modal',
+  templateUrl: './health-modal.component.html',
+})
+export class HealthModalComponent {
+  health?: { key: HealthKey; value: HealthDetails };
+
+  constructor(private activeModal: NgbActiveModal) {}
+
+  readableValue(value: any): string {
+    if (this.health?.key === 'diskSpace') {
+      // Should display storage space in an human readable unit
+      const val = value / 1073741824;
+      if (val > 1) {
+        return `${val.toFixed(2)} GB`;
+      }
+      return `${(value / 1048576).toFixed(2)} MB`;
+    }
+
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return String(value);
+  }
+
+  dismiss(): void {
+    this.activeModal.dismiss();
+  }
+}
diff --git a/src/main/webapp/app/admin/logs/log.model.ts b/src/main/webapp/app/admin/logs/log.model.ts
new file mode 100644
index 000000000..83f2e154a
--- /dev/null
+++ b/src/main/webapp/app/admin/logs/log.model.ts
@@ -0,0 +1,15 @@
+export type Level = 'TRACE' | 'DEBUG' | 'INFO' | 'WARN' | 'ERROR' | 'OFF';
+
+export interface Logger {
+  configuredLevel: Level | null;
+  effectiveLevel: Level;
+}
+
+export interface LoggersResponse {
+  levels: Level[];
+  loggers: { [key: string]: Logger };
+}
+
+export class Log {
+  constructor(public name: string, public level: Level) {}
+}
diff --git a/src/main/webapp/app/admin/logs/logs.component.html b/src/main/webapp/app/admin/logs/logs.component.html
new file mode 100644
index 000000000..414d9deef
--- /dev/null
+++ b/src/main/webapp/app/admin/logs/logs.component.html
@@ -0,0 +1,74 @@
+<div class="table-responsive" *ngIf="loggers">
+  <h2 id="logs-page-heading" data-cy="logsPageHeading">Logs</h2>
+
+  <p>There are {{ loggers.length }} loggers.</p>
+
+  <span>Filter</span>
+  <input type="text" [(ngModel)]="filter" (ngModelChange)="filterAndSort()" class="form-control" />
+
+  <table class="table table-sm table-striped table-bordered" aria-describedby="logs-page-heading">
+    <thead>
+      <tr jhiSort [(predicate)]="orderProp" [(ascending)]="ascending" (sortChange)="filterAndSort()">
+        <th jhiSortBy="name" scope="col"><span>Name</span> <fa-icon icon="sort"></fa-icon></th>
+        <th jhiSortBy="level" scope="col"><span>Level</span> <fa-icon icon="sort"></fa-icon></th>
+      </tr>
+    </thead>
+
+    <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, '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, '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>
+    </tbody>
+  </table>
+</div>
diff --git a/src/main/webapp/app/admin/logs/logs.component.spec.ts b/src/main/webapp/app/admin/logs/logs.component.spec.ts
new file mode 100644
index 000000000..774e01884
--- /dev/null
+++ b/src/main/webapp/app/admin/logs/logs.component.spec.ts
@@ -0,0 +1,83 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of } from 'rxjs';
+
+import { LogsComponent } from './logs.component';
+import { LogsService } from './logs.service';
+import { Log, LoggersResponse } from './log.model';
+
+describe('LogsComponent', () => {
+  let comp: LogsComponent;
+  let fixture: ComponentFixture<LogsComponent>;
+  let service: LogsService;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      declarations: [LogsComponent],
+      providers: [LogsService],
+    })
+      .overrideTemplate(LogsComponent, '')
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogsComponent);
+    comp = fixture.componentInstance;
+    service = TestBed.inject(LogsService);
+  });
+
+  describe('OnInit', () => {
+    it('should set all default values correctly', () => {
+      expect(comp.filter).toBe('');
+      expect(comp.orderProp).toBe('name');
+      expect(comp.ascending).toBe(true);
+    });
+
+    it('Should call load all on init', () => {
+      // GIVEN
+      const log = new Log('main', 'WARN');
+      jest.spyOn(service, 'findAll').mockReturnValue(
+        of({
+          loggers: {
+            main: {
+              effectiveLevel: 'WARN',
+            },
+          },
+        } as unknown as LoggersResponse)
+      );
+
+      // WHEN
+      comp.ngOnInit();
+
+      // THEN
+      expect(service.findAll).toHaveBeenCalled();
+      expect(comp.loggers?.[0]).toEqual(expect.objectContaining(log));
+    });
+  });
+
+  describe('change log level', () => {
+    it('should change log level correctly', () => {
+      // GIVEN
+      const log = new Log('main', 'ERROR');
+      jest.spyOn(service, 'changeLevel').mockReturnValue(of({}));
+      jest.spyOn(service, 'findAll').mockReturnValue(
+        of({
+          loggers: {
+            main: {
+              effectiveLevel: 'ERROR',
+            },
+          },
+        } as unknown as LoggersResponse)
+      );
+
+      // WHEN
+      comp.changeLevel('main', 'ERROR');
+
+      // THEN
+      expect(service.changeLevel).toHaveBeenCalled();
+      expect(service.findAll).toHaveBeenCalled();
+      expect(comp.loggers?.[0]).toEqual(expect.objectContaining(log));
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/logs/logs.component.ts b/src/main/webapp/app/admin/logs/logs.component.ts
new file mode 100644
index 000000000..6320accb7
--- /dev/null
+++ b/src/main/webapp/app/admin/logs/logs.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Log, LoggersResponse, Level } from './log.model';
+import { LogsService } from './logs.service';
+
+@Component({
+  selector: 'jhi-logs',
+  templateUrl: './logs.component.html',
+})
+export class LogsComponent implements OnInit {
+  loggers?: Log[];
+  filteredAndOrderedLoggers?: Log[];
+  filter = '';
+  orderProp: keyof Log = 'name';
+  ascending = true;
+
+  constructor(private logsService: LogsService) {}
+
+  ngOnInit(): void {
+    this.findAndExtractLoggers();
+  }
+
+  changeLevel(name: string, level: Level): void {
+    this.logsService.changeLevel(name, level).subscribe(() => this.findAndExtractLoggers());
+  }
+
+  filterAndSort(): void {
+    this.filteredAndOrderedLoggers = this.loggers!.filter(
+      logger => !this.filter || logger.name.toLowerCase().includes(this.filter.toLowerCase())
+    ).sort((a, b) => {
+      if (a[this.orderProp] < b[this.orderProp]) {
+        return this.ascending ? -1 : 1;
+      } else if (a[this.orderProp] > b[this.orderProp]) {
+        return this.ascending ? 1 : -1;
+      } else if (this.orderProp === 'level') {
+        return a.name < b.name ? -1 : 1;
+      }
+      return 0;
+    });
+  }
+
+  private findAndExtractLoggers(): void {
+    this.logsService.findAll().subscribe((response: LoggersResponse) => {
+      this.loggers = Object.entries(response.loggers).map(([key, logger]) => new Log(key, logger.effectiveLevel));
+      this.filterAndSort();
+    });
+  }
+}
diff --git a/src/main/webapp/app/admin/logs/logs.module.ts b/src/main/webapp/app/admin/logs/logs.module.ts
new file mode 100644
index 000000000..720af2794
--- /dev/null
+++ b/src/main/webapp/app/admin/logs/logs.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from 'app/shared/shared.module';
+
+import { LogsComponent } from './logs.component';
+import { logsRoute } from './logs.route';
+
+@NgModule({
+  imports: [SharedModule, RouterModule.forChild([logsRoute])],
+  declarations: [LogsComponent],
+})
+export class LogsModule {}
diff --git a/src/main/webapp/app/admin/logs/logs.route.ts b/src/main/webapp/app/admin/logs/logs.route.ts
new file mode 100644
index 000000000..5a160eb8f
--- /dev/null
+++ b/src/main/webapp/app/admin/logs/logs.route.ts
@@ -0,0 +1,11 @@
+import { Route } from '@angular/router';
+
+import { LogsComponent } from './logs.component';
+
+export const logsRoute: Route = {
+  path: '',
+  component: LogsComponent,
+  data: {
+    pageTitle: 'Logs',
+  },
+};
diff --git a/src/main/webapp/app/admin/logs/logs.service.spec.ts b/src/main/webapp/app/admin/logs/logs.service.spec.ts
new file mode 100644
index 000000000..cebee2ccd
--- /dev/null
+++ b/src/main/webapp/app/admin/logs/logs.service.spec.ts
@@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+import { LogsService } from './logs.service';
+
+describe('Logs Service', () => {
+  let service: LogsService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+
+    service = TestBed.inject(LogsService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  describe('Service methods', () => {
+    it('should change log level', () => {
+      service.changeLevel('main', 'ERROR').subscribe();
+
+      const req = httpMock.expectOne({ method: 'POST' });
+      expect(req.request.body).toEqual({ configuredLevel: 'ERROR' });
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/logs/logs.service.ts b/src/main/webapp/app/admin/logs/logs.service.ts
new file mode 100644
index 000000000..625868a8b
--- /dev/null
+++ b/src/main/webapp/app/admin/logs/logs.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { ApplicationConfigService } from 'app/core/config/application-config.service';
+import { LoggersResponse, Level } from './log.model';
+
+@Injectable({ providedIn: 'root' })
+export class LogsService {
+  constructor(private http: HttpClient, private applicationConfigService: ApplicationConfigService) {}
+
+  changeLevel(name: string, configuredLevel: Level): Observable<{}> {
+    return this.http.post(this.applicationConfigService.getEndpointFor(`management/loggers/${name}`), { configuredLevel });
+  }
+
+  findAll(): Observable<LoggersResponse> {
+    return this.http.get<LoggersResponse>(this.applicationConfigService.getEndpointFor('management/loggers'));
+  }
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/jvm-memory/jvm-memory.component.html b/src/main/webapp/app/admin/metrics/blocks/jvm-memory/jvm-memory.component.html
new file mode 100644
index 000000000..9009456db
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/jvm-memory/jvm-memory.component.html
@@ -0,0 +1,28 @@
+<h4>Memory</h4>
+
+<div *ngIf="!updating && jvmMemoryMetrics">
+  <div *ngFor="let entry of jvmMemoryMetrics | keyvalue">
+    <span *ngIf="entry.value.max !== -1; else other">
+      <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
+    >
+
+    <ngb-progressbar
+      *ngIf="entry.value.max !== -1"
+      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>
+  </div>
+</div>
diff --git a/src/main/webapp/app/admin/metrics/blocks/jvm-memory/jvm-memory.component.ts b/src/main/webapp/app/admin/metrics/blocks/jvm-memory/jvm-memory.component.ts
new file mode 100644
index 000000000..d434b8aec
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/jvm-memory/jvm-memory.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+import { JvmMetrics } from 'app/admin/metrics/metrics.model';
+
+@Component({
+  selector: 'jhi-jvm-memory',
+  templateUrl: './jvm-memory.component.html',
+})
+export class JvmMemoryComponent {
+  /**
+   * object containing all jvm memory metrics
+   */
+  @Input() jvmMemoryMetrics?: { [key: string]: JvmMetrics };
+
+  /**
+   * boolean field saying if the metrics are in the process of being updated
+   */
+  @Input() updating?: boolean;
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.html b/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.html
new file mode 100644
index 000000000..df0a5df2f
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.html
@@ -0,0 +1,55 @@
+<h4>Threads</h4>
+
+<span><span>Runnable</span> {{ threadStats.threadDumpRunnable }}</span>
+
+<ngb-progressbar
+  [value]="threadStats.threadDumpRunnable"
+  [max]="threadStats.threadDumpAll"
+  [striped]="true"
+  [animated]="false"
+  type="success"
+>
+  <span>{{ (threadStats.threadDumpRunnable * 100) / threadStats.threadDumpAll | number: '1.0-0' }}%</span>
+</ngb-progressbar>
+
+<span><span>Timed waiting</span> ({{ threadStats.threadDumpTimedWaiting }})</span>
+
+<ngb-progressbar
+  [value]="threadStats.threadDumpTimedWaiting"
+  [max]="threadStats.threadDumpAll"
+  [striped]="true"
+  [animated]="false"
+  type="warning"
+>
+  <span>{{ (threadStats.threadDumpTimedWaiting * 100) / threadStats.threadDumpAll | number: '1.0-0' }}%</span>
+</ngb-progressbar>
+
+<span><span>Waiting</span> ({{ threadStats.threadDumpWaiting }})</span>
+
+<ngb-progressbar
+  [value]="threadStats.threadDumpWaiting"
+  [max]="threadStats.threadDumpAll"
+  [striped]="true"
+  [animated]="false"
+  type="warning"
+>
+  <span>{{ (threadStats.threadDumpWaiting * 100) / threadStats.threadDumpAll | number: '1.0-0' }}%</span>
+</ngb-progressbar>
+
+<span><span>Blocked</span> ({{ threadStats.threadDumpBlocked }})</span>
+
+<ngb-progressbar
+  [value]="threadStats.threadDumpBlocked"
+  [max]="threadStats.threadDumpAll"
+  [striped]="true"
+  [animated]="false"
+  type="success"
+>
+  <span>{{ (threadStats.threadDumpBlocked * 100) / threadStats.threadDumpAll | number: '1.0-0' }}%</span>
+</ngb-progressbar>
+
+<div>Total: {{ threadStats.threadDumpAll }}</div>
+
+<button class="hand btn btn-primary btn-sm" (click)="open()" data-toggle="modal" data-target="#threadDump">
+  <span>Expand</span>
+</button>
diff --git a/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.ts b/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.ts
new file mode 100644
index 000000000..de98fb26f
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.ts
@@ -0,0 +1,55 @@
+import { Component, Input } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { Thread, ThreadState } from 'app/admin/metrics/metrics.model';
+import { MetricsModalThreadsComponent } from '../metrics-modal-threads/metrics-modal-threads.component';
+
+@Component({
+  selector: 'jhi-jvm-threads',
+  templateUrl: './jvm-threads.component.html',
+})
+export class JvmThreadsComponent {
+  threadStats = {
+    threadDumpAll: 0,
+    threadDumpRunnable: 0,
+    threadDumpTimedWaiting: 0,
+    threadDumpWaiting: 0,
+    threadDumpBlocked: 0,
+  };
+
+  @Input()
+  set threads(threads: Thread[] | undefined) {
+    this._threads = threads;
+
+    threads?.forEach(thread => {
+      if (thread.threadState === ThreadState.Runnable) {
+        this.threadStats.threadDumpRunnable += 1;
+      } else if (thread.threadState === ThreadState.Waiting) {
+        this.threadStats.threadDumpWaiting += 1;
+      } else if (thread.threadState === ThreadState.TimedWaiting) {
+        this.threadStats.threadDumpTimedWaiting += 1;
+      } else if (thread.threadState === ThreadState.Blocked) {
+        this.threadStats.threadDumpBlocked += 1;
+      }
+    });
+
+    this.threadStats.threadDumpAll =
+      this.threadStats.threadDumpRunnable +
+      this.threadStats.threadDumpWaiting +
+      this.threadStats.threadDumpTimedWaiting +
+      this.threadStats.threadDumpBlocked;
+  }
+
+  get threads(): Thread[] | undefined {
+    return this._threads;
+  }
+
+  private _threads: Thread[] | undefined;
+
+  constructor(private modalService: NgbModal) {}
+
+  open(): void {
+    const modalRef = this.modalService.open(MetricsModalThreadsComponent);
+    modalRef.componentInstance.threads = this.threads;
+  }
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-cache/metrics-cache.component.html b/src/main/webapp/app/admin/metrics/blocks/metrics-cache/metrics-cache.component.html
new file mode 100644
index 000000000..2cfd03113
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-cache/metrics-cache.component.html
@@ -0,0 +1,42 @@
+<h3 id="cacheMetrics">Cache statistics</h3>
+
+<div class="table-responsive" *ngIf="!updating && cacheMetrics">
+  <table class="table table-striped" aria-describedby="cacheMetrics">
+    <thead>
+      <tr>
+        <th scope="col">Cache name</th>
+        <th scope="col" class="text-end">Cache Hits</th>
+        <th scope="col" class="text-end">Cache Misses</th>
+        <th scope="col" class="text-end">Cache Gets</th>
+        <th scope="col" class="text-end">Cache Puts</th>
+        <th scope="col" class="text-end">Cache Removals</th>
+        <th scope="col" class="text-end">Cache Evictions</th>
+        <th scope="col" class="text-end">Cache Hit %</th>
+        <th scope="col" class="text-end">Cache Miss %</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let entry of cacheMetrics | keyvalue">
+        <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>
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-cache/metrics-cache.component.ts b/src/main/webapp/app/admin/metrics/blocks/metrics-cache/metrics-cache.component.ts
new file mode 100644
index 000000000..6d721463c
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-cache/metrics-cache.component.ts
@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { CacheMetrics } from 'app/admin/metrics/metrics.model';
+import { filterNaN } from 'app/core/util/operators';
+
+@Component({
+  selector: 'jhi-metrics-cache',
+  templateUrl: './metrics-cache.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetricsCacheComponent {
+  /**
+   * object containing all cache related metrics
+   */
+  @Input() cacheMetrics?: { [key: string]: CacheMetrics };
+
+  /**
+   * boolean field saying if the metrics are in the process of being updated
+   */
+  @Input() updating?: boolean;
+
+  filterNaN = (input: number): number => filterNaN(input);
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-datasource/metrics-datasource.component.html b/src/main/webapp/app/admin/metrics/blocks/metrics-datasource/metrics-datasource.component.html
new file mode 100644
index 000000000..99c61203b
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-datasource/metrics-datasource.component.html
@@ -0,0 +1,57 @@
+<h3 id="datasourceMetrics">DataSource statistics (time in millisecond)</h3>
+
+<div class="table-responsive" *ngIf="!updating && datasourceMetrics">
+  <table class="table table-striped" aria-describedby="datasourceMetrics">
+    <thead>
+      <tr>
+        <th scope="col">
+          <span>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-end">Count</th>
+        <th scope="col" class="text-end">Mean</th>
+        <th scope="col" class="text-end">Min</th>
+        <th scope="col" class="text-end">p50</th>
+        <th scope="col" class="text-end">p75</th>
+        <th scope="col" class="text-end">p95</th>
+        <th scope="col" class="text-end">p99</th>
+        <th scope="col" class="text-end">Max</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Acquire</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-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-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>
+</div>
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-datasource/metrics-datasource.component.ts b/src/main/webapp/app/admin/metrics/blocks/metrics-datasource/metrics-datasource.component.ts
new file mode 100644
index 000000000..eefcf585b
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-datasource/metrics-datasource.component.ts
@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { Databases } from 'app/admin/metrics/metrics.model';
+import { filterNaN } from 'app/core/util/operators';
+
+@Component({
+  selector: 'jhi-metrics-datasource',
+  templateUrl: './metrics-datasource.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetricsDatasourceComponent {
+  /**
+   * object containing all datasource related metrics
+   */
+  @Input() datasourceMetrics?: Databases;
+
+  /**
+   * boolean field saying if the metrics are in the process of being updated
+   */
+  @Input() updating?: boolean;
+
+  filterNaN = (input: number): number => filterNaN(input);
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-endpoints-requests/metrics-endpoints-requests.component.html b/src/main/webapp/app/admin/metrics/blocks/metrics-endpoints-requests/metrics-endpoints-requests.component.html
new file mode 100644
index 000000000..ee47ec7ea
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-endpoints-requests/metrics-endpoints-requests.component.html
@@ -0,0 +1,24 @@
+<h3 id="endpointsRequestsMetrics">Endpoints requests (time in millisecond)</h3>
+
+<div class="table-responsive" *ngIf="!updating && endpointsRequestsMetrics">
+  <table class="table table-striped" aria-describedby="endpointsRequestsMetrics">
+    <thead>
+      <tr>
+        <th scope="col">Method</th>
+        <th scope="col">Endpoint url</th>
+        <th scope="col" class="text-end">Count</th>
+        <th scope="col" class="text-end">Mean</th>
+      </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>
+    </tbody>
+  </table>
+</div>
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-endpoints-requests/metrics-endpoints-requests.component.ts b/src/main/webapp/app/admin/metrics/blocks/metrics-endpoints-requests/metrics-endpoints-requests.component.ts
new file mode 100644
index 000000000..aa4ceb4b4
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-endpoints-requests/metrics-endpoints-requests.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+import { Services } from 'app/admin/metrics/metrics.model';
+
+@Component({
+  selector: 'jhi-metrics-endpoints-requests',
+  templateUrl: './metrics-endpoints-requests.component.html',
+})
+export class MetricsEndpointsRequestsComponent {
+  /**
+   * object containing service related metrics
+   */
+  @Input() endpointsRequestsMetrics?: Services;
+
+  /**
+   * boolean field saying if the metrics are in the process of being updated
+   */
+  @Input() updating?: boolean;
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.html b/src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.html
new file mode 100644
index 000000000..219acf946
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.html
@@ -0,0 +1,92 @@
+<h3 id="garbageCollectorMetrics">Garbage collections</h3>
+
+<div class="row">
+  <div class="col-md-4">
+    <div *ngIf="garbageCollectorMetrics">
+      <span>
+        GC Live Data Size/GC Max Data Size ({{ garbageCollectorMetrics['jvm.gc.live.data.size'] / 1048576 | number: '1.0-0' }}M /
+        {{ garbageCollectorMetrics['jvm.gc.max.data.size'] / 1048576 | number: '1.0-0' }}M)
+      </span>
+
+      <ngb-progressbar
+        [max]="garbageCollectorMetrics['jvm.gc.max.data.size']"
+        [value]="garbageCollectorMetrics['jvm.gc.live.data.size']"
+        [striped]="true"
+        [animated]="false"
+        type="success"
+      >
+        <span>
+          {{
+            (100 * garbageCollectorMetrics['jvm.gc.live.data.size']) / garbageCollectorMetrics['jvm.gc.max.data.size'] | number: '1.0-2'
+          }}%
+        </span>
+      </ngb-progressbar>
+    </div>
+  </div>
+
+  <div class="col-md-4">
+    <div *ngIf="garbageCollectorMetrics">
+      <span>
+        GC Memory Promoted/GC Memory Allocated ({{ garbageCollectorMetrics['jvm.gc.memory.promoted'] / 1048576 | number: '1.0-0' }}M /
+        {{ garbageCollectorMetrics['jvm.gc.memory.allocated'] / 1048576 | number: '1.0-0' }}M)
+      </span>
+
+      <ngb-progressbar
+        [max]="garbageCollectorMetrics['jvm.gc.memory.allocated']"
+        [value]="garbageCollectorMetrics['jvm.gc.memory.promoted']"
+        [striped]="true"
+        [animated]="false"
+        type="success"
+      >
+        <span>
+          {{
+            (100 * garbageCollectorMetrics['jvm.gc.memory.promoted']) / garbageCollectorMetrics['jvm.gc.memory.allocated']
+              | number: '1.0-2'
+          }}%
+        </span>
+      </ngb-progressbar>
+    </div>
+  </div>
+
+  <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-end">{{ garbageCollectorMetrics.classesLoaded }}</div>
+    </div>
+    <div class="row" *ngIf="garbageCollectorMetrics">
+      <div class="col-md-9">Classes unloaded</div>
+      <div class="col-md-3 text-end">{{ garbageCollectorMetrics.classesUnloaded }}</div>
+    </div>
+  </div>
+
+  <div class="table-responsive" *ngIf="!updating && garbageCollectorMetrics">
+    <table class="table table-striped" aria-describedby="garbageCollectorMetrics">
+      <thead>
+        <tr>
+          <th scope="col"></th>
+          <th scope="col" class="text-end">Count</th>
+          <th scope="col" class="text-end">Mean</th>
+          <th scope="col" class="text-end">Min</th>
+          <th scope="col" class="text-end">p50</th>
+          <th scope="col" class="text-end">p75</th>
+          <th scope="col" class="text-end">p95</th>
+          <th scope="col" class="text-end">p99</th>
+          <th scope="col" class="text-end">Max</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>jvm.gc.pause</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>
+  </div>
+</div>
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.ts b/src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.ts
new file mode 100644
index 000000000..bbf11e00c
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-garbagecollector/metrics-garbagecollector.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+import { GarbageCollector } from 'app/admin/metrics/metrics.model';
+
+@Component({
+  selector: 'jhi-metrics-garbagecollector',
+  templateUrl: './metrics-garbagecollector.component.html',
+})
+export class MetricsGarbageCollectorComponent {
+  /**
+   * object containing garbage collector related metrics
+   */
+  @Input() garbageCollectorMetrics?: GarbageCollector;
+
+  /**
+   * boolean field saying if the metrics are in the process of being updated
+   */
+  @Input() updating?: boolean;
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-modal-threads/metrics-modal-threads.component.html b/src/main/webapp/app/admin/metrics/blocks/metrics-modal-threads/metrics-modal-threads.component.html
new file mode 100644
index 000000000..e725a60e8
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-modal-threads/metrics-modal-threads.component.html
@@ -0,0 +1,90 @@
+<div class="modal-header">
+  <h4 class="modal-title">Threads dump</h4>
+
+  <button type="button" class="btn-close" (click)="dismiss()">&times;</button>
+</div>
+
+<div class="modal-body">
+  <div class="mb-3">
+    <span class="badge bg-primary hand" (click)="threadStateFilter = undefined">
+      <fa-icon *ngIf="threadStateFilter === undefined" icon="check"></fa-icon>
+      All&nbsp;<span class="badge rounded-pill bg-default">{{ threadDumpAll }}</span>
+    </span>
+
+    <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 rounded-pill bg-default">{{ threadDumpRunnable }}</span>
+    </span>
+
+    <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 rounded-pill bg-default">{{ threadDumpWaiting }}</span>
+    </span>
+
+    <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 rounded-pill bg-default">{{ threadDumpTimedWaiting }}</span>
+    </span>
+
+    <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 rounded-pill bg-default">{{ threadDumpBlocked }}</span>
+    </span>
+  </div>
+
+  <div class="pad" *ngFor="let thread of getThreads()">
+    <h6>
+      <span class="badge" [ngClass]="getBadgeClass(thread.threadState)">{{ thread.threadState }}</span>
+
+      &nbsp;{{ thread.threadName }} (ID {{ thread.threadId }})
+
+      <a (click)="thread.showThreadDump = !thread.showThreadDump" href="javascript:void(0);">
+        <span [hidden]="thread.showThreadDump">Show Stacktrace</span>
+        <span [hidden]="!thread.showThreadDump">Hide Stacktrace</span>
+      </a>
+    </h6>
+
+    <div class="card" [hidden]="!thread.showThreadDump">
+      <div class="card-body">
+        <div *ngFor="let st of thread.stackTrace" class="break">
+          <samp
+            >{{ st.className }}.{{ st.methodName }}(<code>{{ st.fileName }}:{{ st.lineNumber }}</code
+            >)</samp
+          >
+          <span class="mt-1"></span>
+        </div>
+      </div>
+    </div>
+    <table class="table table-sm table-responsive">
+      <caption>
+        Threads dump:
+        {{
+          thread.threadName
+        }}
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col">Blocked Time</th>
+          <th scope="col">Blocked Count</th>
+          <th scope="col">Waited Time</th>
+          <th scope="col">Waited Count</th>
+          <th scope="col">Lock name</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{{ thread.blockedTime }}</td>
+          <td>{{ thread.blockedCount }}</td>
+          <td>{{ thread.waitedTime }}</td>
+          <td>{{ thread.waitedCount }}</td>
+          <td class="thread-dump-modal-lock" title="{{ thread.lockName }}">
+            <code>{{ thread.lockName }}</code>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary float-start" data-dismiss="modal" (click)="dismiss()">Done</button>
+</div>
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-modal-threads/metrics-modal-threads.component.ts b/src/main/webapp/app/admin/metrics/blocks/metrics-modal-threads/metrics-modal-threads.component.ts
new file mode 100644
index 000000000..f6dd2816d
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-modal-threads/metrics-modal-threads.component.ts
@@ -0,0 +1,59 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { Thread, ThreadState } from 'app/admin/metrics/metrics.model';
+
+@Component({
+  selector: 'jhi-thread-modal',
+  templateUrl: './metrics-modal-threads.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetricsModalThreadsComponent implements OnInit {
+  ThreadState = ThreadState;
+  threadStateFilter?: ThreadState;
+  threads?: Thread[];
+  threadDumpAll = 0;
+  threadDumpBlocked = 0;
+  threadDumpRunnable = 0;
+  threadDumpTimedWaiting = 0;
+  threadDumpWaiting = 0;
+
+  constructor(private activeModal: NgbActiveModal) {}
+
+  ngOnInit(): void {
+    this.threads?.forEach(thread => {
+      if (thread.threadState === ThreadState.Runnable) {
+        this.threadDumpRunnable += 1;
+      } else if (thread.threadState === ThreadState.Waiting) {
+        this.threadDumpWaiting += 1;
+      } else if (thread.threadState === ThreadState.TimedWaiting) {
+        this.threadDumpTimedWaiting += 1;
+      } else if (thread.threadState === ThreadState.Blocked) {
+        this.threadDumpBlocked += 1;
+      }
+    });
+
+    this.threadDumpAll = this.threadDumpRunnable + this.threadDumpWaiting + this.threadDumpTimedWaiting + this.threadDumpBlocked;
+  }
+
+  getBadgeClass(threadState: ThreadState): string {
+    if (threadState === ThreadState.Runnable) {
+      return 'bg-success';
+    } else if (threadState === ThreadState.Waiting) {
+      return 'bg-info';
+    } else if (threadState === ThreadState.TimedWaiting) {
+      return 'bg-warning';
+    } else if (threadState === ThreadState.Blocked) {
+      return 'bg-danger';
+    }
+    return '';
+  }
+
+  getThreads(): Thread[] {
+    return this.threads?.filter(thread => !this.threadStateFilter || thread.threadState === this.threadStateFilter) ?? [];
+  }
+
+  dismiss(): void {
+    this.activeModal.dismiss();
+  }
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-request/metrics-request.component.html b/src/main/webapp/app/admin/metrics/blocks/metrics-request/metrics-request.component.html
new file mode 100644
index 000000000..9be2f80a0
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-request/metrics-request.component.html
@@ -0,0 +1,26 @@
+<h3 id="requestMetrics">HTTP requests (time in millisecond)</h3>
+
+<table class="table table-striped" *ngIf="!updating && requestMetrics" aria-describedby="requestMetrics">
+  <thead>
+    <tr>
+      <th scope="col">Code</th>
+      <th scope="col">Count</th>
+      <th scope="col" class="text-end">Mean</th>
+      <th scope="col" class="text-end">Max</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let entry of requestMetrics['percode'] | keyvalue">
+      <td>{{ entry.key }}</td>
+      <td>
+        <ngb-progressbar [max]="requestMetrics['all'].count" [value]="entry.value.count" [striped]="true" [animated]="false" type="success">
+          <span>{{ entry.value.count }}</span>
+        </ngb-progressbar>
+      </td>
+      <td class="text-end">
+        {{ filterNaN(entry.value.mean) | number: '1.0-2' }}
+      </td>
+      <td class="text-end">{{ entry.value.max | number: '1.0-2' }}</td>
+    </tr>
+  </tbody>
+</table>
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-request/metrics-request.component.ts b/src/main/webapp/app/admin/metrics/blocks/metrics-request/metrics-request.component.ts
new file mode 100644
index 000000000..6a7cbc7dd
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-request/metrics-request.component.ts
@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { HttpServerRequests } from 'app/admin/metrics/metrics.model';
+import { filterNaN } from 'app/core/util/operators';
+
+@Component({
+  selector: 'jhi-metrics-request',
+  templateUrl: './metrics-request.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetricsRequestComponent {
+  /**
+   * object containing http request related metrics
+   */
+  @Input() requestMetrics?: HttpServerRequests;
+
+  /**
+   * boolean field saying if the metrics are in the process of being updated
+   */
+  @Input() updating?: boolean;
+
+  filterNaN = (input: number): number => filterNaN(input);
+}
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-system/metrics-system.component.html b/src/main/webapp/app/admin/metrics/blocks/metrics-system/metrics-system.component.html
new file mode 100644
index 000000000..d35be0cf0
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-system/metrics-system.component.html
@@ -0,0 +1,51 @@
+<h4>System</h4>
+
+<ng-container *ngIf="!updating && systemMetrics">
+  <div class="row">
+    <div class="col-md-4">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-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-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">
+    <span>{{ 100 * systemMetrics['process.cpu.usage'] | number: '1.0-2' }} %</span>
+  </ngb-progressbar>
+
+  <div class="row">
+    <div class="col-md-9">System CPU usage</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">
+    <span>{{ 100 * systemMetrics['system.cpu.usage'] | number: '1.0-2' }} %</span>
+  </ngb-progressbar>
+
+  <div class="row">
+    <div class="col-md-9">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-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-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-end">{{ systemMetrics['process.files.open'] | number: '1.0-0' }}</div>
+  </div>
+</ng-container>
diff --git a/src/main/webapp/app/admin/metrics/blocks/metrics-system/metrics-system.component.ts b/src/main/webapp/app/admin/metrics/blocks/metrics-system/metrics-system.component.ts
new file mode 100644
index 000000000..f078ada40
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/blocks/metrics-system/metrics-system.component.ts
@@ -0,0 +1,43 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { ProcessMetrics } from 'app/admin/metrics/metrics.model';
+
+@Component({
+  selector: 'jhi-metrics-system',
+  templateUrl: './metrics-system.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetricsSystemComponent {
+  /**
+   * object containing thread related metrics
+   */
+  @Input() systemMetrics?: ProcessMetrics;
+
+  /**
+   * boolean field saying if the metrics are in the process of being updated
+   */
+  @Input() updating?: boolean;
+
+  convertMillisecondsToDuration(ms: number): string {
+    const times = {
+      year: 31557600000,
+      month: 2629746000,
+      day: 86400000,
+      hour: 3600000,
+      minute: 60000,
+      second: 1000,
+    };
+    let timeString = '';
+    for (const [key, value] of Object.entries(times)) {
+      if (Math.floor(ms / value) > 0) {
+        let plural = '';
+        if (Math.floor(ms / value) > 1) {
+          plural = 's';
+        }
+        timeString += `${Math.floor(ms / value).toString()} ${key.toString()}${plural} `;
+        ms = ms - value * Math.floor(ms / value);
+      }
+    }
+    return timeString;
+  }
+}
diff --git a/src/main/webapp/app/admin/metrics/metrics.component.html b/src/main/webapp/app/admin/metrics/metrics.component.html
new file mode 100644
index 000000000..4445a9f5c
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/metrics.component.html
@@ -0,0 +1,49 @@
+<div>
+  <h2>
+    <span id="metrics-page-heading" data-cy="metricsPageHeading">Application Metrics</span>
+
+    <button class="btn btn-primary float-end" (click)="refresh()"><fa-icon icon="sync"></fa-icon> <span>Refresh</span></button>
+  </h2>
+
+  <h3>JVM Metrics</h3>
+
+  <div class="row" *ngIf="metrics && !updatingMetrics">
+    <jhi-jvm-memory class="col-md-4" [updating]="updatingMetrics" [jvmMemoryMetrics]="metrics.jvm"></jhi-jvm-memory>
+
+    <jhi-jvm-threads class="col-md-4" [threads]="threads"></jhi-jvm-threads>
+
+    <jhi-metrics-system class="col-md-4" [updating]="updatingMetrics" [systemMetrics]="metrics.processMetrics"></jhi-metrics-system>
+  </div>
+
+  <jhi-metrics-garbagecollector
+    *ngIf="metrics && metricsKeyExists('garbageCollector')"
+    [updating]="updatingMetrics"
+    [garbageCollectorMetrics]="metrics.garbageCollector"
+  ></jhi-metrics-garbagecollector>
+
+  <div class="well well-lg" *ngIf="updatingMetrics">Updating...</div>
+
+  <jhi-metrics-request
+    *ngIf="metrics && metricsKeyExists('http.server.requests')"
+    [updating]="updatingMetrics"
+    [requestMetrics]="metrics['http.server.requests']"
+  ></jhi-metrics-request>
+
+  <jhi-metrics-endpoints-requests
+    *ngIf="metrics && metricsKeyExists('services')"
+    [updating]="updatingMetrics"
+    [endpointsRequestsMetrics]="metrics.services"
+  ></jhi-metrics-endpoints-requests>
+
+  <jhi-metrics-cache
+    *ngIf="metrics && metricsKeyExists('cache')"
+    [updating]="updatingMetrics"
+    [cacheMetrics]="metrics.cache"
+  ></jhi-metrics-cache>
+
+  <jhi-metrics-datasource
+    *ngIf="metrics && metricsKeyExistsAndObjectNotEmpty('databases')"
+    [updating]="updatingMetrics"
+    [datasourceMetrics]="metrics.databases"
+  ></jhi-metrics-datasource>
+</div>
diff --git a/src/main/webapp/app/admin/metrics/metrics.component.spec.ts b/src/main/webapp/app/admin/metrics/metrics.component.spec.ts
new file mode 100644
index 000000000..4bd325861
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/metrics.component.spec.ts
@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { of } from 'rxjs';
+
+import { MetricsComponent } from './metrics.component';
+import { MetricsService } from './metrics.service';
+import { Metrics } from './metrics.model';
+
+describe('MetricsComponent', () => {
+  let comp: MetricsComponent;
+  let fixture: ComponentFixture<MetricsComponent>;
+  let service: MetricsService;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      declarations: [MetricsComponent],
+    })
+      .overrideTemplate(MetricsComponent, '')
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetricsComponent);
+    comp = fixture.componentInstance;
+    service = TestBed.inject(MetricsService);
+  });
+
+  describe('refresh', () => {
+    it('should call refresh on init', () => {
+      // GIVEN
+      jest.spyOn(service, 'getMetrics').mockReturnValue(of({} as Metrics));
+
+      // WHEN
+      comp.ngOnInit();
+
+      // THEN
+      expect(service.getMetrics).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/metrics/metrics.component.ts b/src/main/webapp/app/admin/metrics/metrics.component.ts
new file mode 100644
index 000000000..f633ee1fa
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/metrics.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { combineLatest } from 'rxjs';
+
+import { MetricsService } from './metrics.service';
+import { Metrics, Thread } from './metrics.model';
+
+@Component({
+  selector: 'jhi-metrics',
+  templateUrl: './metrics.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetricsComponent implements OnInit {
+  metrics?: Metrics;
+  threads?: Thread[];
+  updatingMetrics = true;
+
+  constructor(private metricsService: MetricsService, private changeDetector: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this.refresh();
+  }
+
+  refresh(): void {
+    this.updatingMetrics = true;
+    combineLatest([this.metricsService.getMetrics(), this.metricsService.threadDump()]).subscribe(([metrics, threadDump]) => {
+      this.metrics = metrics;
+      this.threads = threadDump.threads;
+      this.updatingMetrics = false;
+      this.changeDetector.markForCheck();
+    });
+  }
+
+  metricsKeyExists(key: keyof Metrics): boolean {
+    return Boolean(this.metrics?.[key]);
+  }
+
+  metricsKeyExistsAndObjectNotEmpty(key: keyof Metrics): boolean {
+    return Boolean(this.metrics?.[key] && JSON.stringify(this.metrics[key]) !== '{}');
+  }
+}
diff --git a/src/main/webapp/app/admin/metrics/metrics.model.ts b/src/main/webapp/app/admin/metrics/metrics.model.ts
new file mode 100644
index 000000000..d9576a903
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/metrics.model.ts
@@ -0,0 +1,159 @@
+export interface Metrics {
+  jvm: { [key: string]: JvmMetrics };
+  databases: Databases;
+  'http.server.requests': HttpServerRequests;
+  cache: { [key: string]: CacheMetrics };
+  garbageCollector: GarbageCollector;
+  services: Services;
+  processMetrics: ProcessMetrics;
+}
+
+export interface JvmMetrics {
+  committed: number;
+  max: number;
+  used: number;
+}
+
+export interface Databases {
+  min: Value;
+  idle: Value;
+  max: Value;
+  usage: MetricsWithPercentile;
+  pending: Value;
+  active: Value;
+  acquire: MetricsWithPercentile;
+  creation: MetricsWithPercentile;
+  connections: Value;
+}
+
+export interface Value {
+  value: number;
+}
+
+export interface MetricsWithPercentile {
+  '0.0': number;
+  '1.0': number;
+  max: number;
+  totalTime: number;
+  mean: number;
+  '0.5': number;
+  count: number;
+  '0.99': number;
+  '0.75': number;
+  '0.95': number;
+}
+
+export interface HttpServerRequests {
+  all: {
+    count: number;
+  };
+  percode: { [key: string]: MaxMeanCount };
+}
+
+export interface MaxMeanCount {
+  max: number;
+  mean: number;
+  count: number;
+}
+
+export interface CacheMetrics {
+  'cache.gets.miss': number;
+  'cache.puts': number;
+  'cache.gets.hit': number;
+  'cache.removals': number;
+  'cache.evictions': number;
+}
+
+export interface GarbageCollector {
+  'jvm.gc.max.data.size': number;
+  'jvm.gc.pause': MetricsWithPercentile;
+  'jvm.gc.memory.promoted': number;
+  'jvm.gc.memory.allocated': number;
+  classesLoaded: number;
+  'jvm.gc.live.data.size': number;
+  classesUnloaded: number;
+}
+
+export interface Services {
+  [key: string]: {
+    [key in HttpMethod]?: MaxMeanCount;
+  };
+}
+
+export enum HttpMethod {
+  Post = 'POST',
+  Get = 'GET',
+  Put = 'PUT',
+  Patch = 'PATCH',
+  Delete = 'DELETE',
+}
+
+export interface ProcessMetrics {
+  'system.cpu.usage': number;
+  'system.cpu.count': number;
+  'system.load.average.1m'?: number;
+  'process.cpu.usage': number;
+  'process.files.max'?: number;
+  'process.files.open'?: number;
+  'process.start.time': number;
+  'process.uptime': number;
+}
+
+export interface ThreadDump {
+  threads: Thread[];
+}
+
+export interface Thread {
+  threadName: string;
+  threadId: number;
+  blockedTime: number;
+  blockedCount: number;
+  waitedTime: number;
+  waitedCount: number;
+  lockName: string | null;
+  lockOwnerId: number;
+  lockOwnerName: string | null;
+  daemon: boolean;
+  inNative: boolean;
+  suspended: boolean;
+  threadState: ThreadState;
+  priority: number;
+  stackTrace: StackTrace[];
+  lockedMonitors: LockedMonitor[];
+  lockedSynchronizers: string[];
+  lockInfo: LockInfo | null;
+  // custom field for showing-hiding thread dump
+  showThreadDump?: boolean;
+}
+
+export interface LockInfo {
+  className: string;
+  identityHashCode: number;
+}
+
+export interface LockedMonitor {
+  className: string;
+  identityHashCode: number;
+  lockedStackDepth: number;
+  lockedStackFrame: StackTrace;
+}
+
+export interface StackTrace {
+  classLoaderName: string | null;
+  moduleName: string | null;
+  moduleVersion: string | null;
+  methodName: string;
+  fileName: string;
+  lineNumber: number;
+  className: string;
+  nativeMethod: boolean;
+}
+
+export enum ThreadState {
+  Runnable = 'RUNNABLE',
+  TimedWaiting = 'TIMED_WAITING',
+  Waiting = 'WAITING',
+  Blocked = 'BLOCKED',
+  New = 'NEW',
+  Terminated = 'TERMINATED',
+}
diff --git a/src/main/webapp/app/admin/metrics/metrics.module.ts b/src/main/webapp/app/admin/metrics/metrics.module.ts
new file mode 100644
index 000000000..e96c87b89
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/metrics.module.ts
@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { SharedModule } from 'app/shared/shared.module';
+import { MetricsComponent } from './metrics.component';
+import { metricsRoute } from './metrics.route';
+import { JvmMemoryComponent } from './blocks/jvm-memory/jvm-memory.component';
+import { JvmThreadsComponent } from './blocks/jvm-threads/jvm-threads.component';
+import { MetricsCacheComponent } from './blocks/metrics-cache/metrics-cache.component';
+import { MetricsDatasourceComponent } from './blocks/metrics-datasource/metrics-datasource.component';
+import { MetricsEndpointsRequestsComponent } from './blocks/metrics-endpoints-requests/metrics-endpoints-requests.component';
+import { MetricsGarbageCollectorComponent } from './blocks/metrics-garbagecollector/metrics-garbagecollector.component';
+import { MetricsModalThreadsComponent } from './blocks/metrics-modal-threads/metrics-modal-threads.component';
+import { MetricsRequestComponent } from './blocks/metrics-request/metrics-request.component';
+import { MetricsSystemComponent } from './blocks/metrics-system/metrics-system.component';
+
+@NgModule({
+  imports: [SharedModule, RouterModule.forChild([metricsRoute])],
+  declarations: [
+    MetricsComponent,
+    JvmMemoryComponent,
+    JvmThreadsComponent,
+    MetricsCacheComponent,
+    MetricsDatasourceComponent,
+    MetricsEndpointsRequestsComponent,
+    MetricsGarbageCollectorComponent,
+    MetricsModalThreadsComponent,
+    MetricsRequestComponent,
+    MetricsSystemComponent,
+  ],
+})
+export class MetricsModule {}
diff --git a/src/main/webapp/app/admin/metrics/metrics.route.ts b/src/main/webapp/app/admin/metrics/metrics.route.ts
new file mode 100644
index 000000000..deee47bb0
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/metrics.route.ts
@@ -0,0 +1,11 @@
+import { Route } from '@angular/router';
+
+import { MetricsComponent } from './metrics.component';
+
+export const metricsRoute: Route = {
+  path: '',
+  component: MetricsComponent,
+  data: {
+    pageTitle: 'Application Metrics',
+  },
+};
diff --git a/src/main/webapp/app/admin/metrics/metrics.service.spec.ts b/src/main/webapp/app/admin/metrics/metrics.service.spec.ts
new file mode 100644
index 000000000..468ebd52d
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/metrics.service.spec.ts
@@ -0,0 +1,81 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+import { MetricsService } from './metrics.service';
+import { ThreadDump, ThreadState } from './metrics.model';
+
+describe('Logs Service', () => {
+  let service: MetricsService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+    service = TestBed.inject(MetricsService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  describe('Service methods', () => {
+    it('should return Metrics', () => {
+      let expectedResult;
+      const metrics = {
+        jvm: {},
+        'http.server.requests': {},
+        cache: {},
+        services: {},
+        databases: {},
+        garbageCollector: {},
+        processMetrics: {},
+      };
+
+      service.getMetrics().subscribe(received => {
+        expectedResult = received;
+      });
+
+      const req = httpMock.expectOne({ method: 'GET' });
+      req.flush(metrics);
+      expect(expectedResult).toEqual(metrics);
+    });
+
+    it('should return Thread Dump', () => {
+      let expectedResult: ThreadDump | null = null;
+      const dump: ThreadDump = {
+        threads: [
+          {
+            threadName: 'Reference Handler',
+            threadId: 2,
+            blockedTime: -1,
+            blockedCount: 7,
+            waitedTime: -1,
+            waitedCount: 0,
+            lockName: null,
+            lockOwnerId: -1,
+            lockOwnerName: null,
+            daemon: true,
+            inNative: false,
+            suspended: false,
+            threadState: ThreadState.Runnable,
+            priority: 10,
+            stackTrace: [],
+            lockedMonitors: [],
+            lockedSynchronizers: [],
+            lockInfo: null,
+          },
+        ],
+      };
+
+      service.threadDump().subscribe(received => {
+        expectedResult = received;
+      });
+
+      const req = httpMock.expectOne({ method: 'GET' });
+      req.flush(dump);
+      expect(expectedResult).toEqual(dump);
+    });
+  });
+});
diff --git a/src/main/webapp/app/admin/metrics/metrics.service.ts b/src/main/webapp/app/admin/metrics/metrics.service.ts
new file mode 100644
index 000000000..1d27f2b13
--- /dev/null
+++ b/src/main/webapp/app/admin/metrics/metrics.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { ApplicationConfigService } from 'app/core/config/application-config.service';
+import { Metrics, ThreadDump } from './metrics.model';
+
+@Injectable({ providedIn: 'root' })
+export class MetricsService {
+  constructor(private http: HttpClient, private applicationConfigService: ApplicationConfigService) {}
+
+  getMetrics(): Observable<Metrics> {
+    return this.http.get<Metrics>(this.applicationConfigService.getEndpointFor('management/jhimetrics'));
+  }
+
+  threadDump(): Observable<ThreadDump> {
+    return this.http.get<ThreadDump>(this.applicationConfigService.getEndpointFor('management/threaddump'));
+  }
+}
diff --git a/src/main/webapp/app/layouts/navbar/navbar.component.html b/src/main/webapp/app/layouts/navbar/navbar.component.html
index 196f4352b..7816c4f89 100644
--- a/src/main/webapp/app/layouts/navbar/navbar.component.html
+++ b/src/main/webapp/app/layouts/navbar/navbar.component.html
@@ -93,6 +93,30 @@
           </span>
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu>
+          <li>
+            <a class="dropdown-item" routerLink="admin/metrics" routerLinkActive="active" (click)="collapseNavbar()">
+              <fa-icon icon="tachometer-alt" [fixedWidth]="true"></fa-icon>
+              <span>Metrics</span>
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item" routerLink="admin/health" routerLinkActive="active" (click)="collapseNavbar()">
+              <fa-icon icon="heart" [fixedWidth]="true"></fa-icon>
+              <span>Health</span>
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item" routerLink="admin/configuration" routerLinkActive="active" (click)="collapseNavbar()">
+              <fa-icon icon="list" [fixedWidth]="true"></fa-icon>
+              <span>Configuration</span>
+            </a>
+          </li>
+          <li>
+            <a class="dropdown-item" routerLink="admin/logs" routerLinkActive="active" (click)="collapseNavbar()">
+              <fa-icon icon="tasks" [fixedWidth]="true"></fa-icon>
+              <span>Loggers</span>
+            </a>
+          </li>
           <li *ngIf="openAPIEnabled">
             <a class="dropdown-item" routerLink="admin/docs" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="book" [fixedWidth]="true"></fa-icon>