From e5d4099641047e49f7b9191c0dbeb13980a981dc Mon Sep 17 00:00:00 2001
From: bsc7 <118875465+bsc7@users.noreply.github.com>
Date: Thu, 7 Nov 2024 01:04:03 +0100
Subject: [PATCH 1/3] NodeMonitor: FE: +ReportDiffs, +NodeType/UserName:

* Rebase/Merge completed due to REST API reorg
* ReportDiffs: Compares reports and highlights deviations based on thresholds.
* NodeType/UserName: Displays node type and username alongside the address.
* Unified BE/FE naming conventions and API endpoints for consistency.

---
ReportDiffs enables comparison across all reports and provides average
values. It supports three configurable thresholds, which can be adjusted
in the settings. Threshold violations are visually highlighted: for
subtables, the background of the button that toggles the detail view
is marked based on the highest exceeded threshold.
---
 apps/rest-api-app/build.gradle.kts            |   1 +
 .../rest_api/RestApiApplicationService.java   |  36 +--
 .../bisq/rest_api/RestApiResourceConfig.java  |   2 +-
 .../bisq/rest_api/proto/AddressDetails.java   |  71 ++++++
 .../bisq/rest_api/report/ReportRestApi.java   |  51 +++-
 .../src/main/proto/rest_api.proto             |  10 +
 .../src/main/resources/node-monitor/README.md |  54 +++-
 .../main/resources/node-monitor/index.html    | 107 +++++---
 .../src/main/resources/node-monitor/index.js  |  29 ++-
 .../resources/node-monitor/js/Constants.js    |  89 +++++++
 .../resources/node-monitor/js/constants.js    |  15 --
 .../js/controllers/AppController.js           | 129 ++++++++++
 .../js/controllers/ReportController.js        | 199 +++++++++++++++
 .../js/controllers/ReportDiffsController.js   | 181 ++++++++++++++
 .../js/controllers/appController.js           | 201 ---------------
 .../main/resources/node-monitor/js/errors.js  |  49 ++++
 .../node-monitor/js/services/DataService.js   | 135 ++++++++++
 .../js/services/StorageService.js             | 165 +++++++++++++
 .../node-monitor/js/services/dataService.js   |  60 -----
 .../js/services/storageService.js             | 137 ----------
 .../node-monitor/js/utils/DOMUtils.js         | 100 ++++++++
 .../node-monitor/js/utils/FormatUtils.js      |  29 +++
 .../node-monitor/js/utils/KeyUtils.js         |  83 +++++++
 .../node-monitor/js/views/ReportView.js       | 233 ++++++++++++++++++
 .../node-monitor/js/views/SettingsView.js     | 145 +++++++++++
 .../node-monitor/js/views/reportView.js       | 146 -----------
 .../node-monitor/js/views/settingsView.js     |  99 --------
 .../node-monitor/resources/Bisq2_icon.svg     |  82 ++++++
 .../resources/node-monitor/styles/global.css  |   9 +-
 .../node-monitor/styles/page-layout.css       |   1 +
 .../node-monitor/styles/reportView.css        | 166 ++++++++++++-
 .../node-monitor/styles/settingsView.css      |  92 ++++++-
 32 files changed, 2128 insertions(+), 778 deletions(-)
 create mode 100644 apps/rest-api-app/src/main/java/bisq/rest_api/proto/AddressDetails.java
 create mode 100644 apps/rest-api-app/src/main/proto/rest_api.proto
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/Constants.js
 delete mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/constants.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/controllers/AppController.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/controllers/ReportController.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/controllers/ReportDiffsController.js
 delete mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/controllers/appController.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/errors.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/services/DataService.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/services/StorageService.js
 delete mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/services/dataService.js
 delete mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/services/storageService.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/utils/DOMUtils.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/utils/FormatUtils.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/utils/KeyUtils.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/views/ReportView.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/views/SettingsView.js
 delete mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/views/reportView.js
 delete mode 100644 apps/rest-api-app/src/main/resources/node-monitor/js/views/settingsView.js
 create mode 100644 apps/rest-api-app/src/main/resources/node-monitor/resources/Bisq2_icon.svg

diff --git a/apps/rest-api-app/build.gradle.kts b/apps/rest-api-app/build.gradle.kts
index 93dbe2907d..778519bd16 100644
--- a/apps/rest-api-app/build.gradle.kts
+++ b/apps/rest-api-app/build.gradle.kts
@@ -1,5 +1,6 @@
 plugins {
     id("bisq.java-library")
+    id("bisq.protobuf")
     application
 }
 
diff --git a/apps/rest-api-app/src/main/java/bisq/rest_api/RestApiApplicationService.java b/apps/rest-api-app/src/main/java/bisq/rest_api/RestApiApplicationService.java
index 533637b78c..6e14e0752b 100644
--- a/apps/rest-api-app/src/main/java/bisq/rest_api/RestApiApplicationService.java
+++ b/apps/rest-api-app/src/main/java/bisq/rest_api/RestApiApplicationService.java
@@ -20,12 +20,8 @@
 import bisq.account.AccountService;
 import bisq.bisq_easy.BisqEasyService;
 import bisq.bonded_roles.BondedRolesService;
-import bisq.bonded_roles.bonded_role.AuthorizedBondedRole;
-import bisq.bonded_roles.bonded_role.BondedRole;
 import bisq.chat.ChatService;
 import bisq.common.application.Service;
-import bisq.common.network.Address;
-import bisq.common.network.TransportType;
 import bisq.common.observable.Observable;
 import bisq.common.platform.OS;
 import bisq.common.util.CompletableFutureUtils;
@@ -51,13 +47,9 @@
 import lombok.Getter;
 import lombok.extern.slf4j.Slf4j;
 
-import java.util.List;
-import java.util.Map;
 import java.util.Optional;
-import java.util.Set;
 import java.util.concurrent.CompletableFuture;
 import java.util.concurrent.TimeUnit;
-import java.util.stream.Collectors;
 
 import static com.google.common.base.Preconditions.checkArgument;
 import static java.util.concurrent.CompletableFuture.supplyAsync;
@@ -102,7 +94,7 @@ public enum State {
     public RestApiApplicationService(String[] args) {
         super("rest_api", args);
 
-        restApiConfig= getConfig("restApi");
+        restApiConfig = getConfig("restApi");
 
         securityService = new SecurityService(persistenceService, SecurityService.Config.from(getConfig("security")));
         com.typesafe.config.Config bitcoinWalletConfig = getConfig("bitcoinWallet");
@@ -274,7 +266,6 @@ public KeyBundleService getKeyBundleService() {
         return securityService.getKeyBundleService();
     }
 
-
     private void setState(State newState) {
         checkArgument(state.get().ordinal() < newState.ordinal(),
                 "New state %s must have a higher ordinal as the current state %s", newState, state.get());
@@ -300,29 +291,4 @@ private Optional<OsSpecificNotificationService> findSystemNotificationDelegate()
             return Optional.empty();
         }
     }
-
-    public List<String> getAddressList() {
-        Set<Address> bannedAddresses = bondedRolesService.getAuthorizedBondedRolesService().getBondedRoles().stream()
-                .filter(BondedRole::isBanned)
-                .map(BondedRole::getAuthorizedBondedRole)
-                .map(AuthorizedBondedRole::getAddressByTransportTypeMap)
-                .filter(Optional::isPresent)
-                .map(Optional::get)
-                .flatMap(map -> map.values().stream())
-                .collect(Collectors.toSet());
-        Map<TransportType, Set<Address>> seedAddressesByTransport = networkService.getSeedAddressesByTransportFromConfig();
-        Set<TransportType> supportedTransportTypes = networkService.getSupportedTransportTypes();
-        List<String> addresslist = seedAddressesByTransport.entrySet().stream()
-                .filter(entry -> supportedTransportTypes.contains(entry.getKey()))
-                .flatMap(entry -> entry.getValue().stream())
-                .filter(address -> !bannedAddresses.contains(address))
-                .map(Address::toString)
-                .collect(Collectors.toList());
-
-        // Oracle Nodes
-        addresslist.add("kr4yvzlhwt5binpw7js2tsfqv6mjd4klmslmcxw3c5izsaqh5vvsp6ad.onion:36185");
-        addresslist.add("s2yxxqvyofzud32mxliya3dihj5rdlowagkblqqtntxhi7cbdaufqkid.onion:54467");
-
-        return addresslist;
-    }
 }
diff --git a/apps/rest-api-app/src/main/java/bisq/rest_api/RestApiResourceConfig.java b/apps/rest-api-app/src/main/java/bisq/rest_api/RestApiResourceConfig.java
index de8757c3c6..7e1cb6ce78 100644
--- a/apps/rest-api-app/src/main/java/bisq/rest_api/RestApiResourceConfig.java
+++ b/apps/rest-api-app/src/main/java/bisq/rest_api/RestApiResourceConfig.java
@@ -33,7 +33,7 @@ public RestApiResourceConfig(RestApiApplicationService applicationService, Strin
             protected void configure() {
                 bind(new SwaggerResolution(baseUrl)).to(SwaggerResolution.class);
                 bind(new UserIdentityRestApi(applicationService.getUserService().getUserIdentityService())).to(UserIdentityRestApi.class);
-                bind(new ReportRestApi(applicationService.getNetworkService(), applicationService.getBondedRolesService())).to(ReportRestApi.class);
+                bind(new ReportRestApi(applicationService.getNetworkService(), applicationService.getBondedRolesService(), applicationService.getUserService())).to(ReportRestApi.class);
             }
         });
     }
diff --git a/apps/rest-api-app/src/main/java/bisq/rest_api/proto/AddressDetails.java b/apps/rest-api-app/src/main/java/bisq/rest_api/proto/AddressDetails.java
new file mode 100644
index 0000000000..d4819884ef
--- /dev/null
+++ b/apps/rest-api-app/src/main/java/bisq/rest_api/proto/AddressDetails.java
@@ -0,0 +1,71 @@
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
+ * License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+package bisq.rest_api.proto;
+
+import bisq.common.proto.NetworkProto;
+import bisq.common.proto.Proto;
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.EqualsAndHashCode;
+import lombok.Getter;
+import lombok.ToString;
+import lombok.extern.slf4j.Slf4j;
+
+import static com.google.common.base.Preconditions.checkArgument;
+
+@Slf4j
+@Getter
+@EqualsAndHashCode
+@ToString
+@Schema(name = "AddressDetails")
+public final class AddressDetails implements NetworkProto {
+    private final String address;
+    private final String bondedRoleType;
+    private final String nickNameOrBondUserName;
+
+    public AddressDetails(String address, String bondedRoleType, String nickNameOrBondUserName) {
+        this.address = address;
+        this.bondedRoleType = bondedRoleType;
+        this.nickNameOrBondUserName = nickNameOrBondUserName;
+    }
+
+    @Override
+    public void verify() {
+        checkArgument(address != null && address.length() > 0);
+        checkArgument(bondedRoleType != null && bondedRoleType.length() > 0);
+        checkArgument(nickNameOrBondUserName != null && nickNameOrBondUserName.length() > 0);
+    }
+
+    @Override
+    public bisq.rest_api.protobuf.AddressDetails toProto(boolean serializeForHash) {
+        return resolveProto(serializeForHash);
+    }
+
+    @Override
+    public bisq.rest_api.protobuf.AddressDetails.Builder getBuilder(boolean serializeForHash) {
+        return bisq.rest_api.protobuf.AddressDetails.newBuilder()
+                .setAddress(this.address)
+                .setBondedRoleType(this.bondedRoleType)
+                .setNickNameOrBondUserName(this.nickNameOrBondUserName);
+    }
+
+    public static AddressDetails fromProto(bisq.rest_api.protobuf.AddressDetails proto) {
+        return new AddressDetails(proto.getAddress(),
+                proto.getBondedRoleType(),
+                proto.getNickNameOrBondUserName());
+    }
+}
diff --git a/apps/rest-api-app/src/main/java/bisq/rest_api/report/ReportRestApi.java b/apps/rest-api-app/src/main/java/bisq/rest_api/report/ReportRestApi.java
index 5b63933d03..fbfc49214a 100644
--- a/apps/rest-api-app/src/main/java/bisq/rest_api/report/ReportRestApi.java
+++ b/apps/rest-api-app/src/main/java/bisq/rest_api/report/ReportRestApi.java
@@ -27,16 +27,15 @@
 import bisq.common.util.CompletableFutureUtils;
 import bisq.network.NetworkService;
 import bisq.network.p2p.services.reporting.Report;
+import bisq.user.UserService;
+import bisq.user.profile.UserProfile;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.Parameter;
 import io.swagger.v3.oas.annotations.media.Content;
 import io.swagger.v3.oas.annotations.media.Schema;
 import io.swagger.v3.oas.annotations.responses.ApiResponse;
 import io.swagger.v3.oas.annotations.tags.Tag;
-import jakarta.ws.rs.GET;
-import jakarta.ws.rs.Path;
-import jakarta.ws.rs.PathParam;
-import jakarta.ws.rs.Produces;
+import jakarta.ws.rs.*;
 import jakarta.ws.rs.core.MediaType;
 import lombok.extern.slf4j.Slf4j;
 
@@ -45,6 +44,7 @@
 import java.util.Optional;
 import java.util.Set;
 import java.util.stream.Collectors;
+import java.util.stream.Stream;
 
 @Slf4j
 @Path("/report")
@@ -53,10 +53,14 @@
 public class ReportRestApi {
     private final NetworkService networkService;
     private final BondedRolesService bondedRolesService;
+    private final UserService userService;
 
-    public ReportRestApi(NetworkService networkService, BondedRolesService bondedRolesService) {
+    public ReportRestApi(NetworkService networkService,
+                         BondedRolesService bondedRolesService,
+                         UserService userService) {
         this.networkService = networkService;
         this.bondedRolesService = bondedRolesService;
+        this.userService = userService;
     }
 
     @Operation(description = "Get a address list of seed and oracle nodes")
@@ -67,7 +71,7 @@ public ReportRestApi(NetworkService networkService, BondedRolesService bondedRol
                     )}
     )
     @GET
-    @Path("address-list")
+    @Path("addresses")
     public List<String> getAddressList() {
         try {
             Set<Address> bannedAddresses = bondedRolesService.getAuthorizedBondedRolesService().getBondedRoles().stream()
@@ -145,4 +149,39 @@ public List<Report> getReports(
             throw new RestApiException(e);
         }
     }
+
+    @GET
+    @Path("/addresses/details")
+    @Operation(description = "Get address info for a set of host:port addresses")
+    @ApiResponse(responseCode = "200", description = "The set of address info (host, role type, nickname or bond name)",
+            content = @Content(mediaType = MediaType.APPLICATION_JSON, schema = @Schema(implementation = bisq.rest_api.proto.AddressDetails[].class)))
+    public List<bisq.rest_api.proto.AddressDetails> getAddressDetailsDto(
+            @QueryParam("addresses") String addresses) {  // Comma-separated list
+        try {
+            log.info("Received request to get address infos for: {}", addresses);
+            List<String> addressList = CollectionUtil.streamFromCsv(addresses).toList();
+            return getAddressDetailsProtobufs(addressList);
+        } catch (Exception e) {
+            throw new RestApiException(e);
+        }
+    }
+
+    public List<bisq.rest_api.proto.AddressDetails> getAddressDetailsProtobufs(List<String> addressList) {
+        Set<BondedRole> bondedRoles = bondedRolesService.getAuthorizedBondedRolesService().getBondedRoles();
+        return bondedRoles.stream()
+                .flatMap(bondedRole -> bondedRole.getAuthorizedBondedRole().getAddressByTransportTypeMap()
+                        .map(addressMap -> addressMap.entrySet().stream()
+                                .filter(entry -> addressList.contains(entry.getValue().toString())) // Nutze addressList
+                                .map(entry -> new bisq.rest_api.proto.AddressDetails(
+                                        entry.getValue().toString(),
+                                        bondedRole.getAuthorizedBondedRole().getBondedRoleType().name(),
+                                        userService.getUserProfileService()
+                                                .findUserProfile(bondedRole.getAuthorizedBondedRole().getProfileId())
+                                                .map(UserProfile::getNickName)
+                                                .orElse(bondedRole.getAuthorizedBondedRole().getBondUserName())
+                                ))
+                        ).orElse(Stream.empty()))
+                .collect(Collectors.toList());
+
+    }
 }
diff --git a/apps/rest-api-app/src/main/proto/rest_api.proto b/apps/rest-api-app/src/main/proto/rest_api.proto
new file mode 100644
index 0000000000..d8e613da70
--- /dev/null
+++ b/apps/rest-api-app/src/main/proto/rest_api.proto
@@ -0,0 +1,10 @@
+syntax = "proto3";
+package rest_api;
+option java_package = "bisq.rest_api.protobuf";
+option java_multiple_files = true;
+
+message AddressDetails {
+  string address = 1;
+  string bondedRoleType = 2;
+  string nickNameOrBondUserName = 3;
+}
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/README.md b/apps/rest-api-app/src/main/resources/node-monitor/README.md
index 83e06de037..8d10fa0c7e 100644
--- a/apps/rest-api-app/src/main/resources/node-monitor/README.md
+++ b/apps/rest-api-app/src/main/resources/node-monitor/README.md
@@ -11,26 +11,54 @@ The application provides a user interface to input a list of hosts and ports, re
 The project is organized into different modules to ensure a clear separation of concerns and ease of maintenance. Each part of the application has a dedicated file or directory, as outlined below:
 
 ```
-projekt-root/
+project-root/
 │
-├── index.html                   # Main HTML file that defines the application's structure
+├── index.html                   # Main HTML file defining the application's structure
 ├── index.js                     # Main JavaScript file for initializing the application
-├── README.md                    # Project README file with documentation
+├── README.md                    # Project documentation
 │
 ├── js/                          # JavaScript files organized by functionality
-│   ├── constants.js             # Global constants used throughout the application
-│   ├── controllers/             # Application controllers
-│   │   └── appController.js     # Main application controller for handling user input and API calls
-│   ├── services/                # Application services for data and storage management
-│   │   ├── dataService.js       # Service handling API requests and data retrieval
-│   │   └── storageService.js    # Service for handling local storage interactions
+│   ├── Constants.js             # Global constants used throughout the application
+│   ├── controllers/             # Controllers for managing application logic
+│   │   ├── AppController.js     # Main controller for user interaction and API calls
+│   │   ├── ReportController.js  # Controller for handling reports
+│   │   └── ReportDiffsController.js # Controller for report comparison and analysis
+│   ├── errors.js                # Error handling logic
+│   ├── services/                # Services for data and storage management
+│   │   ├── DataService.js       # Service for managing API requests and data retrieval
+│   │   └── StorageService.js    # Service for handling local storage
+│   ├── utils/                   # Utility functions
+│   │   ├── DOMUtils.js          # Functions for DOM manipulation
+│   │   ├── FormatUtils.js       # Formatting utilities
+│   │   └── KeyUtils.js          # Utilities for key management
 │   └── views/                   # View components for different sections
-│       ├── settingsView.js      # View handling settings display and input
-│       └── reportView.js        # View managing the display of node reports
+│       ├── ReportView.js        # View for displaying reports
+│       └── SettingsView.js      # View for handling settings
 │
-└── styles/                      # Directory containing CSS files for styling
+├── resources/                   # Resources such as images and icons
+│   └── Bisq2_icon.svg           # Application icon
+│
+└── styles/                      # CSS files for styling
     ├── global.css               # Global styles, typography, colors, and basic element styling
-    ├── page-layout.css          # Layout and positioning of main areas, responsive styling
+    ├── page-layout.css          # Layout and positioning of main areas, responsive styles
     ├── reportView.css           # Styling for the report view section
     └── settingsView.css         # Styling for the settings view section
 ```
+
+## Description
+
+Here’s a revised version integrating your requirements:
+
+ReportDiffs enables comparison across all reports and highlights deviations.
+It provides average values and supports three configurable thresholds, which 
+can be adjusted in the settings. Threshold violations are visually marked, 
+with a hover showing the specific average value and the extent of the deviation.
+For subtables, the background of the button toggling the detail view is marked
+based on the highest exceeded threshold.
+
+For certain metrics, deviations are highlighted based on fixed reference values
+rather than averages:
+    numConnections: Marked as critical if below 10, highlighting downward deviations.
+    memoryUsed: Marked as critical if exceeding 500 MB, highlighting upward deviations.
+    numThreads: Marked as critical if exceeding 70, highlighting upward deviations.
+    nodeLoad: Marked as critical if exceeding 0.4, highlighting upward deviations.
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/index.html b/apps/rest-api-app/src/main/resources/node-monitor/index.html
index d5b82b191a..ce445d0eb0 100644
--- a/apps/rest-api-app/src/main/resources/node-monitor/index.html
+++ b/apps/rest-api-app/src/main/resources/node-monitor/index.html
@@ -1,8 +1,10 @@
 <!-- ./index.html -->
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bisq Node Monitor</title>
     <link rel="stylesheet" href="styles/global.css">
@@ -10,52 +12,75 @@
     <link rel="stylesheet" href="styles/reportView.css">
     <link rel="stylesheet" href="styles/page-layout.css">
 </head>
+
 <body>
 
-<h2>Bisq Node Monitor</h2>
+    <h2>Bisq Node Monitor</h2>
 
-<div class="hamburger-menu" id="hamburgerButton">
-    &#9776;
-</div>
+    <div class="hamburger-menu" id="hamburgerButton">
+        &#9776;
+    </div>
 
-<div id="settingsPanel" style="display: none;">
-    <h3>Settings</h3>
-    <div>
-        <label>Host List (comma or newline separated):</label>
-        <textarea id="hostListInput" placeholder="Host:port list, separated by commas or new lines" rows="9" style="width: 100%;"></textarea>
+    <div id="settingsPanel" style="display: none;">
+        <h3>Settings</h3>
+        <div>
+            <label>Address List (comma or newline separated):</label>
+            <textarea id="addressListInput"
+                placeholder="Address list in host:port format, separated by commas or new lines" rows="9"
+                style="width: 100%;"></textarea>
+        </div>
+        <button id="fetchRemoteListButton" class="toggle-button" style="margin-top: 10px;">Fetch Remote Address
+            List</button>
+        <div>
+            <label>Port List (comma or newline separated, optional):</label>
+            <textarea id="portListInput" placeholder="Port list for filtering, separated by commas or new lines"
+                rows="3" style="width: 100%;"></textarea>
+        </div>
+        <div id="thresholdSettings">
+            <div class="threshold-container">
+                <div class="threshold-text">
+                    <h4>Deviation Thresholds</h4>
+                    <p>For report diffs</p>
+                </div>
+                <div class="threshold-grid">
+                    <div>
+                        <label for="lowThreshold">LOW</label>
+                        <input id="lowThreshold" type="number" value="5">
+                    </div>
+                    <div>
+                        <label for="mediumThreshold">MEDIUM</label>
+                        <input id="mediumThreshold" type="number" value="20">
+                    </div>
+                    <div>
+                        <label for="highThreshold">HIGH</label>
+                        <input id="highThreshold" type="number" value="50">
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <button id="saveConfigButton" class="toggle-button" style="margin-top: 10px;">Save Configuration</button>
     </div>
-    <button id="fetchRemoteListButton" class="toggle-button" style="margin-top: 10px;">Fetch Remote Host List</button>
-    <div>
-        <label>Port List (comma or newline separated, optional):</label>
-        <textarea id="portListInput" placeholder="Port list for filtering, separated by commas or new lines" rows="3" style="width: 100%;"></textarea>
+
+    <div class="button-container">
+        <button id="reloadButton" class="button button--green">Reload Data</button>
+        <button id="toggleAllButton" class="button button--blue" style="display: none;">Expand All Details</button>
     </div>
-    <button id="saveConfigButton" class="toggle-button" style="margin-top: 10px;">Save Configuration</button>
-</div>
-
-<div class="button-container">
-    <button id="reloadButton" class="button button--green">Reload Data</button>
-    <button id="toggleAllButton" class="button button--blue" style="display: none;">Expand All Details</button>
-</div>
-
-<div id="statusMessage" style="display: none; text-align: center; margin-top: 20px; color: grey;">
-    <!-- Dynamically generated message data will appear here -->
-</div>
-
-<div id="reportContainer">
-    <!-- Dynamically generated node data will appear here -->
-</div>
-
-<script>
-    window.App = window.App || {};
-</script>
-
-<script src="js/constants.js"></script>
-<script src="js/services/storageService.js"></script>
-<script src="js/services/dataService.js"></script>
-<script src="js/views/settingsView.js"></script>
-<script src="js/views/reportView.js"></script>
-<script src="js/controllers/appController.js"></script>
-<script src="index.js"></script>
+
+    <div id="statusMessage" style="display: none; text-align: center; margin-top: 20px; color: grey;">
+        <!-- Dynamically generated message data will appear here -->
+    </div>
+
+    <div id="reportContainer">
+        <!-- Dynamically generated node data will appear here -->
+    </div>
+
+    <script>
+        window.App = window.App || {};
+    </script>
+
+    <script type="module" src="index.js"></script>
+
 </body>
-</html>
 
+</html>
\ No newline at end of file
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/index.js b/apps/rest-api-app/src/main/resources/node-monitor/index.js
index 8d25d6f3c5..5ba3863691 100644
--- a/apps/rest-api-app/src/main/resources/node-monitor/index.js
+++ b/apps/rest-api-app/src/main/resources/node-monitor/index.js
@@ -1,11 +1,32 @@
 // index.js
-// Namespace for the application
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { AppController } from './js/controllers/AppController.js';
+import { DataService } from './js/services/DataService.js';
+import { StorageService } from './js/services/StorageService.js';
+
 window.App = window.App || {};
 
 document.addEventListener("DOMContentLoaded", () => {
-    const dataService = new App.Services.DataService();
-    const storageService = new App.Services.StorageService();
+    const dataService = new DataService();
+    const storageService = new StorageService();
 
-    const appController = new App.Controllers.AppController(dataService, storageService);
+    const appController = new AppController(dataService, storageService);
     appController.initApp();
 });
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/Constants.js b/apps/rest-api-app/src/main/resources/node-monitor/js/Constants.js
new file mode 100644
index 0000000000..5cac4a2de8
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/Constants.js
@@ -0,0 +1,89 @@
+// js/Constants.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export const Constants = {
+    MODE_DEV: 'dev',
+    MODE_PROD: 'prod',
+    MODE: null,
+
+    API_URL_GET_REPORT: 'http://localhost:8082/api/v1/report',
+    API_URL_GET_ADDRESSES: 'http://localhost:8082/api/v1/report/addresses',
+    API_URL_GET_ADDRESSES_DETAILS: 'http://localhost:8082/api/v1/report/addresses/details',
+    QUERY_PARAM_ADDRESSES: 'addresses',
+
+    STATUS_ERROR: "Failed to fetch data",
+
+    STATUS_ENTER_ADDRESSES: "Please enter an address list in the settings to start fetching data.",
+    PLACEHOLDER_ADDRESS_LIST: "Host:port list in host:port format, separated by commas or new lines.\n# Comments and empty lines are allowed.",
+    PLACEHOLDER_PORT_LIST: "Port list, for filtering addresses. Separated by commas or new lines.\n# Comments and empty lines are allowed.",
+
+    BUTTON_EXPAND_ALL: "Expand All Details",
+    BUTTON_COLLAPSE_ALL: "Collapse All Details",
+    BUTTON_EXPAND_DETAILS: "Expand Details",
+    BUTTON_COLLAPSE_DETAILS: "Collapse Details",
+
+    CONFIG_KEY: {
+        ADDRESSES_COOKIE: 'addresses',
+        PORTS_COOKIE: 'ports',
+        DEVIATION_THRESHOLDS: 'deviation_thresholds'
+    },
+
+    SELECTOR_DATA_KEY: 'data-key',
+    SELECTOR_DATA_FULL_KEY: 'data-fullkey',
+
+    REPORT_KEY_ROOT_PARENT: '',
+    REPORT_KEY_ROOT: "Report",
+    HIERARCHY_DELIMITER: '.',
+
+    DEFAULT_DEVIATION_THRESHOLDS: {
+        LOW: { value: 5 },
+        MEDIUM: { value: 20 },
+        HIGH: { value: 50 }
+    },
+
+    DEVIATION_THRESHOLDS: {},
+
+    // Defaults
+    initialize(savedConfig = {}) {
+        this.MODE = savedConfig.MODE || this.MODE_PROD;
+
+        this.DEVIATION_THRESHOLDS = {
+            LOW: { value: savedConfig.DEVIATION_THRESHOLDS?.LOW || this.DEFAULT_DEVIATION_THRESHOLDS.LOW.value },
+            MEDIUM: { value: savedConfig.DEVIATION_THRESHOLDS?.MEDIUM || this.DEFAULT_DEVIATION_THRESHOLDS.MEDIUM.value },
+            HIGH: { value: savedConfig.DEVIATION_THRESHOLDS?.HIGH || this.DEFAULT_DEVIATION_THRESHOLDS.HIGH.value }
+        };
+
+        console.log('Constants initialized with:', {
+            MODE: this.MODE,
+            DEVIATION_THRESHOLDS: this.DEVIATION_THRESHOLDS
+        });
+    }
+};
+
+const savedConfig = {
+
+    MODE: Constants.MODE_PROD,
+
+    DEVIATION_THRESHOLDS: {
+        LOW: 5,
+        MEDIUM: 20
+    }
+};
+
+Constants.initialize(savedConfig);
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/constants.js b/apps/rest-api-app/src/main/resources/node-monitor/js/constants.js
deleted file mode 100644
index f9664de23d..0000000000
--- a/apps/rest-api-app/src/main/resources/node-monitor/js/constants.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// js/constants.js
-App.Constants = {
-    API_URL_GET_REPORT: 'http://localhost:8082/api/v1/report',
-    API_URL_GET_ADDRESS_LIST: 'http://localhost:8082/api/v1/report/address-list',
-    STATUS_ERROR: "Failed to fetch data",
-    STATUS_ENTER_HOSTS: "Please enter a Host:port list in the settings to start fetching data.",
-    PLACEHOLDER_HOST_LIST: "Host:port list, separated by commas or new lines.\n# Comments and empty lines are alowed.",
-    PLACEHOLDER_PORT_LIST: "Port list, for filtering hosts. Separated by commas or new lines.\n# Comments and empty lines are alowed.",
-    BUTTON_EXPAND_ALL: "Expand All Details",
-    BUTTON_COLLAPSE_ALL: "Collapse All Details",
-    BUTTON_EXPAND_DETAILS: "Expand Details",
-    BUTTON_COLLAPSE_DETAILS: "Collapse Details",
-    HOSTS_COOKIE_KEY: 'hosts',
-    PORTS_COOKIE_KEY: 'ports',
-};
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/AppController.js b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/AppController.js
new file mode 100644
index 0000000000..92598c9fe2
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/AppController.js
@@ -0,0 +1,129 @@
+// js/controllers/AppController.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Constants } from '../Constants.js';
+import { ReportController } from './ReportController.js';
+import { ReportView } from '../views/ReportView.js';
+import { SettingsView } from '../views/SettingsView.js';
+
+export class AppController {
+    constructor(dataService, storageService) {
+        this.dataService = dataService;
+        this.storageService = storageService;
+        this.reportView = new ReportView();
+        this.settingsView = new SettingsView(
+            this.reportView,
+            this.storageService,
+            this.dataService,
+            this.onSettingsChanged.bind(this)
+        );
+
+        this.reportController = new ReportController(this.dataService, this.reportView);
+    }
+
+    async initApp() {
+        try {
+            await this.#updateAddressesAndLoadAllReports();
+            this.#setInitialUIState();
+            await this.#loadAddressDetails();
+            this.reportController.init();
+        } catch (error) {
+            console.error("Error on init app", error);
+            this.reportView.renderErrorMessage(error.message);
+        }
+    }
+
+    async onSettingsChanged() {
+        try {
+            await this.#updateAddressesAndLoadAllReports();
+            await this.#loadAddressDetails();
+        } catch (error) {
+            this.reportView.renderErrorMessage(error.message);
+        }
+    }
+
+    //////////////////////
+    // PRIVATE METHODS
+    //////////////////////
+
+    #setInitialUIState() {
+        const hasAddresses = this.addressList && this.addressList.length > 0;
+        this.reportController.updateButtons();
+        this.#toggleReloadButton(hasAddresses);
+    }
+
+    #toggleReloadButton(show) {
+        const button = document.getElementById("reloadButton");
+        button.style.display = show ? "block" : "none";
+
+        button.addEventListener("click", () => {
+            if (this.addressList.length > 0) {
+                this.reportController.loadAllReports(this.addressList, this.portList);
+            } else {
+                this.reportView.renderErrorMessage(Constants.STATUS_ENTER_ADDRESSES);
+            }
+        });
+    }
+
+    async #getAddresses() {
+        let addresses = this.storageService.getAddressesFromCookie();
+        if (addresses.length === 0) {
+            addresses = await this.dataService.fetchAddressList();
+            if (addresses && addresses.length > 0) {
+                this.storageService.saveAddresses(addresses.join('\n'));
+                this.reportView.clearMessage();
+            } else {
+                throw new Error("No addresses available from server.");
+            }
+        }
+        return addresses;
+    }
+
+    async #updateAddressesAndLoadAllReports() {
+        try {
+            this.addressList = this.storageService.getAddressesFromCookie();
+            this.portList = this.storageService.getPortsFromCookie();
+
+            if (this.addressList.length === 0) {
+                this.addressList = await this.#getAddresses();
+                if (this.addressList.length === 0) {
+                    this.reportView.renderErrorMessage(Constants.STATUS_ENTER_ADDRESSES);
+                    this.reportController.updateButtons();
+                    return;
+                }
+            }
+
+            this.reportController.loadAllReports(this.addressList, this.portList);
+        } catch (error) {
+            this.reportView.renderErrorMessage(error.message);
+            this.reportController.updateButtons();
+        }
+    }
+
+    async #loadAddressDetails() {
+        try {
+            const addressDetails = await this.dataService.fetchAddressDetails(this.addressList);
+            addressDetails.forEach(dto => {
+                this.reportView.renderAddressDetails(dto);
+            });
+        } catch (error) {
+            this.reportView.renderWarnMessage(error.message, 5);
+        }
+    }
+}
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/ReportController.js b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/ReportController.js
new file mode 100644
index 0000000000..9c5abf47eb
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/ReportController.js
@@ -0,0 +1,199 @@
+// js/controllers/ReportController.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Constants } from '../Constants.js';
+import { DOMUtils } from '../utils/DOMUtils.js';
+import { KeyUtility } from '../utils/KeyUtils.js';
+import { ReportDiffsController } from './ReportDiffsController.js';
+
+export class ReportController {
+    constructor(dataService, reportView) {
+        this.dataService = dataService;
+        this.reportView = reportView;
+        this.diffRenderer = new ReportDiffsController(this);
+        this.reports = [];
+        this.renderQueue = Promise.resolve();
+    }
+
+    init() {
+        this.#initToggleAllButton();
+        this.updateButtons();
+    }
+
+    async loadAllReports(addressList, portList = []) {
+        console.log("Loading reports for addresses:", addressList);
+
+        this.#removeObsoleteReports(addressList, portList);
+        this.diffRenderer.reset();
+
+        const processedAddresses = new Set();
+
+        for (const address of addressList) {
+            if (processedAddresses.has(address)) {
+                console.warn(`Skipping duplicate address: ${address}`);
+                continue;
+            }
+
+            processedAddresses.add(address);
+
+            const addressPort = parseInt(address.split(":")[1]);
+            if (!portList.length || portList.includes(addressPort)) {
+                this.#createOrUpdatePlaceholderForReport(address);
+
+                (async () => {
+                    const success = await this.#loadSingleReport(address);
+                    if (success) {
+                        this.reports.push({ address, success });
+                        this.updateButtons();
+                    }
+                })();
+            } else {
+                console.log(`Skipping address as port not in filter list: ${address}`);
+            }
+        }
+    }
+
+    updateButtons() {
+        const toggleAllButton = document.getElementById("toggleAllButton");
+        const hasSuccessfulReports = this.reports.some(report => report.success);
+
+        if ((hasSuccessfulReports && toggleAllButton.style.display !== "block") ||
+            (!hasSuccessfulReports && toggleAllButton.style.display !== "none")) {
+            toggleAllButton.style.display = hasSuccessfulReports ? "block" : "none";
+        }
+    }
+
+    toggleAllDetails(expand) {
+        const toggleButtons = document.querySelectorAll('.toggle-button');
+        toggleButtons.forEach(button => {
+            try {
+                if (button.dataset.details) {
+                    this.reportView.toggleDetailButton(button, expand);
+                }
+            } catch (error) {
+                console.warn("Skipping button due to invalid JSON in dataset.details:", button);
+            }
+        });
+
+        const toggleAllButton = document.getElementById("toggleAllButton");
+        toggleAllButton.textContent = expand
+            ? Constants.BUTTON_COLLAPSE_ALL
+            : Constants.BUTTON_EXPAND_ALL;
+    }
+
+    /////////////////////////
+    // PRIVATE METHODS
+    /////////////////////////
+
+    #initToggleAllButton() {
+        const toggleAllButton = document.getElementById("toggleAllButton");
+
+        toggleAllButton.addEventListener("click", () => {
+            const expand = toggleAllButton.textContent === Constants.BUTTON_EXPAND_ALL;
+            this.toggleAllDetails(expand);
+        });
+    }
+
+    async #loadSingleReport(address) {
+        console.log(`Loading new report for address: ${address}`);
+        try {
+            const data = await this.dataService.fetchReportData(address);
+
+            this.reportView.renderSingleReport(data, address);
+            this.diffRenderer.addReport(data, address);
+
+            // Ensure sequential rendering of report diffs to maintain consistency and avoid race conditions.
+            this.renderQueue = this.renderQueue
+                .then(() => this.diffRenderer.scheduleRender())
+                .catch(error => console.error("Render queue error:", error));
+
+            this.updateButtons();
+            return true;
+        } catch (error) {
+            const message = `Error loading report for ${address}: ${error.message}`;
+            console.error(message, error);
+            this.reportView.renderErrorMessage(message);
+            return false;
+        }
+    }
+
+    #createOrUpdatePlaceholderForReport(address) {
+        const existingNodeBlock = DOMUtils.findReportElementByAddress(address);
+        if (!existingNodeBlock) {
+            this.#createNewPlaceholder(address);
+        } else {
+            this.#reuseExistingReport(existingNodeBlock);
+        }
+    }
+
+    #reuseExistingReport(nodeBlock) {
+        console.log(`Reusing existing placeholder for ${nodeBlock.id}`);
+        this.#markPlaceholderLoading(nodeBlock);
+        this.#clearReportData(nodeBlock);
+    }
+
+    #createNewPlaceholder(address) {
+        const nodeBlock = document.createElement('div');
+        nodeBlock.classList.add('node-block');
+        nodeBlock.id = KeyUtility.generateReportNodeId(address);
+
+        const header = document.createElement('div');
+        header.classList.add('node-header');
+
+        const statusCircle = document.createElement('span');
+        statusCircle.classList.add('status-circle', 'status-loading');
+        header.appendChild(statusCircle);
+
+        const addressText = document.createElement('span');
+        addressText.textContent = address;
+        header.appendChild(addressText);
+
+        nodeBlock.appendChild(header);
+        document.getElementById("reportContainer").appendChild(nodeBlock);
+    }
+
+    #markPlaceholderLoading(nodeBlock) {
+        console.log(`Marking placeholder loading for ${nodeBlock.id}`);
+        const statusCircle = nodeBlock.querySelector('.status-circle');
+        statusCircle.className = 'status-circle status-loading';
+    }
+
+    #clearReportData(nodeBlock) {
+        console.log(`Clearing report data for ${nodeBlock.id}`);
+        Array.from(nodeBlock.children).forEach(child => {
+            if (!child.classList.contains('node-header')) {
+                nodeBlock.removeChild(child);
+            }
+        });
+    }
+
+    #removeObsoleteReports(addressList, portList) {
+        const existingNodes = document.querySelectorAll('.node-block');
+
+        existingNodes.forEach(node => {
+            const address = KeyUtility.extractAddressFromReportNodeId(node.id);
+            const port = parseInt(address.split(":")[1]);
+
+            if (!addressList.includes(address) || (portList.length > 0 && !portList.includes(port))) {
+                console.log(`Removing obsolete report placeholder for address: ${address}`);
+                node.remove();
+            }
+        });
+    }
+}
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/ReportDiffsController.js b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/ReportDiffsController.js
new file mode 100644
index 0000000000..423cba8214
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/ReportDiffsController.js
@@ -0,0 +1,181 @@
+// js/controllers/ReportDiffsController.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Constants } from '../Constants.js';
+import { DOMUtils } from '../utils/DOMUtils.js';
+import { KeyUtility } from '../utils/KeyUtils.js';
+import { FormatUtils } from '../utils/FormatUtils.js';
+
+const VALUE_GT_REFERENCE_VALUE = '>';
+const VALUE_LT_REFERENCE_VALUE = '<';
+const THRESHOLD_CONFIG = {
+    'numConnections': { direction: VALUE_LT_REFERENCE_VALUE, referenceValue: 10 },
+    'memoryUsed': { direction: VALUE_GT_REFERENCE_VALUE, referenceValue: 500 },
+    'numThreads': { direction: VALUE_GT_REFERENCE_VALUE, referenceValue: 70 },
+    'nodeLoad': { direction: VALUE_GT_REFERENCE_VALUE, referenceValue: 0.4 }
+};
+
+export class ReportDiffsController {
+
+    constructor() {
+        this.reports = [];
+        this.averageReport = {};
+        this.relevantKeys = new Set();
+        this.isRendering = false;
+        this.pendingRender = false;
+    }
+
+    reset() {
+        this.reports = [];
+        this.averageReport = {};
+        this.relevantKeys.clear();
+        this.isRendering = false;
+        this.pendingRender = false;
+    }
+
+    addReport(data, address) {
+        if (!data.success) {
+            console.warn(`Report for ${address} was not successful and will be ignored.`);
+            return;
+        }
+
+        this.reports.push({ address, data: data.report });
+        this.#updateAverageAndRelevantKeys(data.report, Constants.REPORT_KEY_ROOT_PARENT);
+    }
+
+    scheduleRender() {
+        if (this.isRendering) {
+            this.pendingRender = true;
+            return;
+        }
+
+        this.isRendering = true;
+        setTimeout(() => {
+            this.#renderFieldDiffs();
+            this.isRendering = false;
+
+            if (this.pendingRender) {
+                this.pendingRender = false;
+                this.scheduleRender();
+            }
+        }, 0);
+    }
+
+    #updateAverageAndRelevantKeys(report, parentFullKey = Constants.REPORT_KEY_ROOT_PARENT) {
+        Object.entries(report).forEach(([key, value]) => {
+            const fullKey = KeyUtility.createFullKey(parentFullKey, key);
+
+            if (typeof value === 'number') {
+                this.#updateAverageForField(value, fullKey);
+            } else if (typeof value === 'object' && value !== null) {
+                this.#updateAverageAndRelevantKeys(value, fullKey);
+            }
+        });
+    }
+
+    #updateAverageForField(value, fullKey) {
+        let currentAverageData = KeyUtility.getNestedValue(this.averageReport, fullKey);
+
+        if (!currentAverageData) {
+            currentAverageData = { average: 0, count: 0 };
+            KeyUtility.setNestedValue(this.averageReport, fullKey, currentAverageData);
+        }
+
+        currentAverageData.count += 1;
+        currentAverageData.average += (value - currentAverageData.average) / currentAverageData.count;
+
+        const newAverage = currentAverageData.average;
+        const deviation = Math.abs((value - newAverage) / newAverage) * 100;
+        if (deviation >= Constants.DEVIATION_THRESHOLDS.LOW.value) {
+            this.relevantKeys.add(fullKey);
+        }
+        return deviation;
+    }
+
+    #renderFieldDiffs() {
+        this.reports.forEach(({ address, data }) => {
+            const maxDeviationPerParent = new Map();
+
+            this.relevantKeys.forEach(fullKey => {
+                const value = KeyUtility.getNestedValue(data, fullKey);
+                let deviation = 0;
+                let hover = ``;
+
+                if (THRESHOLD_CONFIG[fullKey]) {
+                    const { direction, referenceValue } = THRESHOLD_CONFIG[fullKey];
+                    deviation = this.#calculateCustomDeviation(value, referenceValue, direction);
+                    if (deviation == 0) {
+                        return;
+                    }
+                    hover = `Deviation: ${FormatUtils.formatNumber(deviation)}% from reference value (${FormatUtils.formatNumber(referenceValue)})`;
+                    this.#renderField(address, fullKey, deviation, hover);
+                } else {
+                    const averageData = KeyUtility.getNestedValue(this.averageReport, fullKey);
+                    if (!averageData || averageData.average == undefined) {
+                        console.error(`Average Value not found or null: Key: ${fullKey}`);
+                    } else if (value != undefined) {
+                        deviation = Math.abs((value - averageData.average) / averageData.average * 100);
+                        hover = `Deviation: ${FormatUtils.formatNumber(deviation)}% from average (${FormatUtils.formatNumber(averageData.average)})`;
+                        this.#renderField(address, fullKey, deviation, hover);
+
+                        const parentKey = KeyUtility.getParentKey(fullKey);
+                        if (parentKey === Constants.REPORT_KEY_ROOT_PARENT) {
+                            return;
+                        }
+                        if (!maxDeviationPerParent.has(parentKey) || deviation > maxDeviationPerParent.get(parentKey)) {
+                            maxDeviationPerParent.set(parentKey, deviation);
+                        }
+                    }
+                }
+            });
+
+            maxDeviationPerParent.forEach((maxDeviation, parentKey) => {
+                this.#renderField(address, parentKey, maxDeviation, `Max Deviation: ${maxDeviation.toFixed(2)}%`);
+            });
+        });
+    }
+
+    #renderField(address, fullKey, deviation, title) {
+        const element = DOMUtils.findTableValueByAddressAndFullKey(address, fullKey);
+        if (!element) {
+            console.error(`Element not found: Key: ${fullKey}, Address: ${address}`);
+            return;
+        }
+
+        element.title = title;
+
+        element.classList.remove('low', 'medium', 'high', 'diff');
+        if (deviation >= Constants.DEVIATION_THRESHOLDS.HIGH.value) {
+            element.classList.add('diff', 'high');
+        } else if (deviation >= Constants.DEVIATION_THRESHOLDS.MEDIUM.value) {
+            element.classList.add('diff', 'medium');
+        } else if (deviation >= Constants.DEVIATION_THRESHOLDS.LOW.value) {
+            element.classList.add('diff', 'low');
+        }
+    }
+
+    #calculateCustomDeviation(value, referenceValue, direction) {
+        if (direction === VALUE_LT_REFERENCE_VALUE) {
+            return value < referenceValue ? ((referenceValue - value) / referenceValue) * 100 : 0;
+        } else if (direction === VALUE_GT_REFERENCE_VALUE) {
+            return value > referenceValue ? ((value - referenceValue) / referenceValue) * 100 : 0;
+        }
+        return 0;
+    }
+}
\ No newline at end of file
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/appController.js b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/appController.js
deleted file mode 100644
index b79394027b..0000000000
--- a/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/appController.js
+++ /dev/null
@@ -1,201 +0,0 @@
-// js/controllers/appController.js
-App.Controllers = App.Controllers || {};
-
-App.Controllers.AppController = class {
-    constructor(dataService, storageService) {
-        this.dataService = dataService;
-        this.storageService = storageService;
-        this.reportView = new App.Views.ReportView();
-        this.settingsView = new App.Views.SettingsView(
-            this.reportView,
-            this.storageService,
-            this.dataService,
-            this.onSettingsChanged.bind(this)
-        );
-    }
-
-    async initApp() {
-        try {
-            await this.#updateHostsAndLoadAllReports();
-            this.#setInitialUIState();
-
-            this.#initReloadButton();
-            this.#initToggleAllButton();
-        } catch (error) {
-            console.error("Error on init app", error);
-            this.reportView.renderErrorMessage(error.message);
-        }
-    }
-
-    async onSettingsChanged() {
-        try {
-            await this.#updateHostsAndLoadAllReports();
-        } catch (error) {
-            this.reportView.renderErrorMessage(error.message);
-        }
-    }
-
-    //////////////////////
-    // PRIVATE METHODS
-    //////////////////////
-
-    #setInitialUIState() {
-        const hasHosts = this.hostList && this.hostList.length > 0;
-        this.#toggleReloadButton(hasHosts);
-    }
-
-    #initReloadButton() {
-        document.getElementById("reloadButton").addEventListener("click", () => {
-            if (this.hostList.length > 0) {
-                this.#loadAllReports();
-            } else {
-                this.reportView.renderErrorMessage(App.Constants.STATUS_ENTER_HOSTS);
-            }
-        });
-    }
-
-    #toggleReloadButton(show) {
-        this.#toggleButton(show, "reloadButton");
-    }
-
-    #initToggleAllButton() {
-        document.getElementById("toggleAllButton").addEventListener("click", () => {
-            const expand = document.getElementById("toggleAllButton").textContent === App.Constants.BUTTON_EXPAND_ALL;
-            const toggleButtons = document.querySelectorAll('.toggle-button');
-            toggleButtons.forEach(button => {
-                try {
-                    if (button.dataset.details) {
-                        this.reportView.toggleDetailButton(button, expand);
-                    }
-                } catch (error) {
-                    console.warn("Skipping button due to invalid JSON in dataset.value:", button);
-                }
-            });
-
-            document.getElementById("toggleAllButton").textContent = expand ?
-                App.Constants.BUTTON_COLLAPSE_ALL :
-                App.Constants.BUTTON_EXPAND_ALL;
-        });
-    }
-
-    #toggleToggleAllButton(show) {
-        this.#toggleButton(show, "toggleAllButton");
-    }
-
-    #toggleButton(show, elementById) {
-        const button = document.getElementById(elementById);
-        button.style.display = show ? "block" : "none";
-    }
-
-    async #getHosts() {
-        let hosts = this.storageService.getHostsFromCookie();
-        if (hosts.length === 0) {
-            hosts = await this.dataService.fetchHostList();
-            if (hosts && hosts.length > 0) {
-                this.storageService.saveHosts(hosts.join('\n'));
-                this.reportView.clearMessage();
-            } else {
-                throw new Error("No hosts available from server.");
-            }
-        }
-        return hosts;
-    }
-
-    #cleanupObsoleteReports() {
-        const existingHostElements = document.querySelectorAll('.node-block');
-        existingHostElements.forEach(element => {
-            const hostId = element.id.replace('report-', '').replace(/-/g, ':');
-            const hostPort = parseInt(hostId.split(":")[1]);
-
-            if (!this.hostList.includes(hostId) || (this.portList && !this.portList.includes(hostPort))) {
-                element.remove();
-                console.log(`Removed obsolete or filtered host element for: ${hostId}`);
-            }
-        });
-    }
-
-    async #updateHostsAndLoadAllReports() {
-        try {
-            this.hostList = this.storageService.getHostsFromCookie();
-            this.portList = this.storageService.getPortsFromCookie();
-
-            if (this.hostList.length === 0) {
-                this.hostList = await this.#getHosts();
-                if (this.hostList.length === 0) {
-                    this.reportView.renderErrorMessage(App.Constants.STATUS_ENTER_HOSTS);
-                    this.#toggleReloadButton(false);
-                    this.#toggleToggleAllButton(false);
-                    return;
-                }
-            } else {
-                this.#toggleReloadButton(true);
-                this.#toggleToggleAllButton(true);
-            }
-
-            this.#cleanupObsoleteReports();
-            this.#loadAllReports();
-        } catch (error) {
-            this.reportView.renderErrorMessage(error.message);
-            this.#toggleReloadButton(false);
-            this.#toggleToggleAllButton(false);
-        }
-    }
-
-    #createOrUpdatePlaceholderForReport(host) {
-        const existingNodeBlock = document.getElementById(`report-${host.replace(/[:.]/g, '-')}`);
-        if (!existingNodeBlock) {
-            const nodeBlock = document.createElement('div');
-            nodeBlock.classList.add('node-block');
-            nodeBlock.id = `report-${host.replace(/[:.]/g, '-')}`;
-
-            const header = document.createElement('div');
-            header.classList.add('node-header');
-
-            const statusCircle = document.createElement('span');
-            statusCircle.classList.add('status-circle', 'status-loading');
-            header.appendChild(statusCircle);
-
-            const hostText = document.createElement('span');
-            hostText.textContent = host;
-            header.appendChild(hostText);
-
-            nodeBlock.appendChild(header);
-            document.getElementById("reportContainer").appendChild(nodeBlock);
-        } else {
-            const statusCircle = existingNodeBlock.querySelector('.status-circle');
-            statusCircle.className = 'status-circle status-loading';
-        }
-    }
-
-    async #loadSingleReport(host) {
-        try {
-            const { data } = await this.dataService.fetchReportData(host);
-            this.reportView.renderSingleReport(data, host);
-        } catch (error) {
-            this.reportView.renderErrorMessage(error.message);
-        }
-    }
-
-    #loadAllReports() {
-        console.log("Loading reports for hosts:", this.hostList);
-        console.log("Allowed Ports:", this.portList);
-
-        if (this.hostList.length > 0) {
-            this.#toggleToggleAllButton(true);
-            this.hostList.forEach(host => {
-                const hostPort = parseInt(host.split(":")[1]);
-                console.log("Checking host:", host, "with extracted port:", hostPort);
-
-                if (!this.portList || this.portList.length === 0 || this.portList.includes(hostPort)) {
-                    console.log("Fetching report for host with port:", host);
-                    this.#createOrUpdatePlaceholderForReport(host);
-                    this.#loadSingleReport(host);
-                } else {
-                    console.log("Skipping host as port not in filter list:", host);
-                }
-            });
-        } else {
-            this.#toggleToggleAllButton(false);
-        }
-    }
-};
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/errors.js b/apps/rest-api-app/src/main/resources/node-monitor/js/errors.js
new file mode 100644
index 0000000000..26ec9c22b6
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/errors.js
@@ -0,0 +1,49 @@
+// js/errors.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+class NodeMonitroError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = "NodeMonitroError";
+    }
+}
+
+class NetworkError extends NodeMonitroError {
+    constructor(message) {
+        super(message);
+        this.name = "NetworkError";
+    }
+}
+
+class ServerError extends NodeMonitroError {
+    constructor(message, statusCode) {
+        super(message);
+        this.name = "ServerError";
+        this.statusCode = statusCode;
+    }
+}
+
+class DataValidationError extends NodeMonitroError {
+    constructor(message) {
+        super(message);
+        this.name = "DataValidationError";
+    }
+}
+
+export { NodeMonitroError, NetworkError, ServerError, DataValidationError };
\ No newline at end of file
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/services/DataService.js b/apps/rest-api-app/src/main/resources/node-monitor/js/services/DataService.js
new file mode 100644
index 0000000000..52e6d50b08
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/services/DataService.js
@@ -0,0 +1,135 @@
+// js/services/DataService.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Constants } from '../Constants.js';
+import { NodeMonitroError, ServerError, DataValidationError, NetworkError } from '../errors.js';
+
+export class DataService {
+    async fetchReportData(address) {
+        const url = `${Constants.API_URL_GET_REPORT}/${address}`;
+        try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                const statusText = response.statusText || `Status code: ${response.status}`;
+                throw new ServerError(`Error fetching report: ${statusText}`, response.status);
+            }
+
+            const contentType = response.headers.get("Content-Type") || "";
+            if (!contentType.startsWith("application/json")) {
+                const errorMessage = await response.text();
+                throw new DataValidationError(`Unexpected content type: ${errorMessage}`);
+            }
+
+            const report = await response.json();
+            const filteredReport = this.#filterReportData(report);
+            return { success: true, report: filteredReport, errorMessage: undefined };
+        } catch (error) {
+            if (error instanceof NodeMonitroError) {
+                console.error(`${error.message} Address: ${address}.`, error);
+                return { success: false, report: undefined, errorMessage: error.message };
+            } else {
+                console.error(`Network error: Unable to fetch report for ${address}`, error);
+                return { success: false, report: undefined, errorMessage: error.message };
+            }
+        }
+    }
+
+    async fetchAddressList() {
+        try {
+            const response = await fetch(Constants.API_URL_GET_ADDRESSES);
+            if (!response.ok) {
+                const statusText = response.statusText || `Status code: ${response.status}`;
+                throw new ServerError(`Error fetching address list: ${statusText}`, response.status);
+            }
+
+            const contentType = response.headers.get("Content-Type") || "";
+            if (!contentType.startsWith("application/json")) {
+                const errorMessage = await response.text();
+                throw new DataValidationError(`Unexpected content type for address list: ${errorMessage}`);
+            }
+
+            const data = await response.json();
+            if (!data || !Array.isArray(data)) {
+                throw new DataValidationError("Invalid data format: expected an array.");
+            }
+
+            return data;
+        } catch (error) {
+            if (error instanceof NodeMonitroError) {
+                console.error(error);
+                throw error;
+            } else {
+                console.error("Network error: Unable to fetch address list:", error);
+                throw new NetworkError(`Network error while fetching address list: ${error.message}`);
+            }
+        }
+    }
+
+    async fetchAddressDetails(addressList) {
+        try {
+            const url = this.#getAddressDetailsUrl(addressList);
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                const statusText = response.statusText || `Status code: ${response.status}`;
+                throw new ServerError(`Error fetching address details: ${statusText}`, response.status);
+            }
+
+            const contentType = response.headers.get("Content-Type") || "";
+            if (!contentType.startsWith("application/json")) {
+                const errorMessage = await response.text();
+                throw new DataValidationError(`Unexpected content type for address details: ${errorMessage}`);
+            }
+
+            return await response.json();
+        } catch (error) {
+            if (error instanceof NodeMonitroError) {
+                console.error(error);
+                throw error;
+            } else {
+                console.error("Network error: Unable to fetch address details:", error);
+                throw new NetworkError(`Network error while fetching address details: ${error.message}`);
+            }
+        }
+    }
+
+    //////////////////////
+    // PRIVATE METHODS
+    //////////////////////
+
+    #filterReportData(report) {
+        if (!report || typeof report !== 'object') {
+            return report;
+        }
+        const { version = null, serializedSize = null, excludedFields = null, ...filteredReport } = report;
+        return filteredReport;
+    }
+
+    #getAddressDetailsUrl(addressList) {
+        const queryParams = new URLSearchParams({
+            [Constants.QUERY_PARAM_ADDRESSES]: addressList.join(",")
+        });
+        return `${Constants.API_URL_GET_ADDRESSES_DETAILS}?${queryParams.toString()}`;
+    }
+}
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/services/StorageService.js b/apps/rest-api-app/src/main/resources/node-monitor/js/services/StorageService.js
new file mode 100644
index 0000000000..38489bd0f6
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/services/StorageService.js
@@ -0,0 +1,165 @@
+// js/services/StorageService.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Constants } from '../Constants.js';
+
+export class StorageService {
+    constructor() {
+        this.addressesKey = Constants.CONFIG_KEY.ADDRESSES_COOKIE;
+        this.portsKey = Constants.CONFIG_KEY.PORTS_COOKIE;
+        this.thresholdsKey = Constants.CONFIG_KEY.DEVIATION_THRESHOLDS;
+    }
+
+    saveAddressesAndPorts(addressesInput, portsInput) {
+        try {
+            const addressList = this.#parseAddressListInput(addressesInput);
+            const portList = this.#parsePortListInput(portsInput);
+
+            this.#setAddressesCookie(addressesInput);
+            this.#setPortsCookie(portsInput);
+        } catch (error) {
+            throw new Error("Address and filter-port lists not stored: " + error.message);
+        }
+    }
+
+    saveAddresses(addressesInput) {
+        try {
+            const addressList = this.#parseAddressListInput(addressesInput);
+
+            this.#setAddressesCookie(addressesInput);
+        } catch (error) {
+            throw new Error("Address list not stored: " + error.message);
+        }
+    }
+
+    getAddressesFromCookie() {
+        const addressesText = this.getAddressesCookie();
+        const uniqueAddresses = new Set();
+
+        addressesText.split(/\r?\n/).forEach(line => {
+            line = line.trim();
+            if (line && !line.startsWith('#')) {
+                line.split(',').forEach(address => {
+                    address = address.trim();
+                    if (address) uniqueAddresses.add(address);
+                });
+            }
+        });
+
+        return Array.from(uniqueAddresses);
+    }
+
+    getPortsFromCookie() {
+        const portsText = this.getPortsCookie();
+        const uniquePorts = new Set();
+
+        portsText.split(/\r?\n/).forEach(line => {
+            line = line.trim();
+            if (line && !line.startsWith('#')) {
+                line.split(',').forEach(port => {
+                    port = port.trim();
+                    if (port && !isNaN(port)) uniquePorts.add(Number(port));
+                });
+            }
+        });
+
+        return Array.from(uniquePorts);
+    }
+
+    getAddressesCookie() {
+        return this.#getCookie(this.addressesKey) || "";
+    }
+
+    getPortsCookie() {
+        return this.#getCookie(this.portsKey) || "";
+    }
+
+    saveDeviationThresholds(thresholds) {
+        this.#setCookie(this.thresholdsKey, JSON.stringify(thresholds));
+    }
+
+    getDeviationThresholds() {
+        const thresholdsText = this.#getCookie(this.thresholdsKey);
+        return thresholdsText ? JSON.parse(thresholdsText) : null;
+    }
+
+    //////////////////////
+    // PRIVATE METHODS
+    //////////////////////
+
+    #getCookie(name) {
+        const decodedCookie = decodeURIComponent(document.cookie);
+        const cookiesArray = decodedCookie.split(';');
+        for (let cookie of cookiesArray) {
+            cookie = cookie.trim();
+            if (cookie.startsWith(name + "=")) {
+                return cookie.substring(name.length + 1);
+            }
+        }
+        return null;
+    }
+
+    #parseAddressListInput(input) {
+        return input
+            .split(/\r?\n|,/)
+            .map(line => line.trim())
+            .filter(line => line && !line.startsWith('#'))
+            .map(item => {
+                if (!this.#isValidAddressFormat(item)) {
+                    throw new Error(`Invalid address entry detected: "${item}"`);
+                }
+                return item;
+            });
+    };
+
+    #isValidAddressFormat = (address) => {
+        const addressPattern = /^[a-zA-Z0-9.-]+:\d+$/;
+        return addressPattern.test(address);
+    };
+
+    #parsePortListInput(input) {
+        return input
+            .split(/\r?\n|,/)
+            .map(line => line.trim())
+            .filter(line => line && !line.startsWith('#'))
+            .map(item => {
+                const port = Number(item);
+                if (isNaN(port) || port <= 0 || port > 65535) {
+                    throw new Error(`Invalid or out-of-range port detected: "${item}"`);
+                }
+                return port;
+            });
+    };
+
+    #setCookie(key, text) {
+        const date = new Date();
+        date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
+        const expires = "expires=" + date.toUTCString();
+        document.cookie = `${key}=${encodeURIComponent(text)}; ${expires}; path=/; SameSite=None; Secure`;
+    }
+
+    #setAddressesCookie(addressesText) {
+        this.#setCookie(this.addressesKey, addressesText);
+    }
+
+    #setPortsCookie(portsText) {
+        this.#setCookie(this.portsKey, portsText);
+    }
+};
+
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/services/dataService.js b/apps/rest-api-app/src/main/resources/node-monitor/js/services/dataService.js
deleted file mode 100644
index 0eae68ed0d..0000000000
--- a/apps/rest-api-app/src/main/resources/node-monitor/js/services/dataService.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// js/services/dataService.js
-App.Services = App.Services || {};
-
-App.Services.DataService = class {
-    async fetchReportData(host) {
-        const url = `${App.Constants.API_URL_GET_REPORT}/${host}`;
-        try {
-            const response = await fetch(url);
-            if (!response.ok) {
-                const statusText = response.statusText || `Status code: ${response.status}`;
-                throw new Error(`Error fetching report for ${host}: ${statusText}`);
-            }
-            const contentType = response.headers.get("Content-Type") || "";
-            if (!contentType.startsWith("application/json")) {
-                const errorMessage = await response.text();
-                throw new Error(`Unexpected content type for ${host}: ${errorMessage}`);
-            }
-            const data = await response.json();
-            const filteredData = this.#filterReportData(data);
-            return { success: true, data: filteredData };
-        } catch (error) {
-            throw new Error(`Network error: Unable to fetch report for ${host}: ${error.message}`);
-        }
-    }
-
-    async fetchHostList() {
-        try {
-            const response = await fetch(App.Constants.API_URL_GET_ADDRESS_LIST);
-            if (!response.ok) {
-                const statusText = response.statusText || `Status code: ${response.status}`;
-                throw new Error(`Server error while fetching host list: ${statusText}`);
-            }
-            const contentType = response.headers.get("Content-Type") || "";
-            if (!contentType.startsWith("application/json")) {
-                const errorMessage = await response.text();
-                throw new Error(`Unexpected content type for ${host}: ${errorMessage}`);
-            }
-            const data = await response.json();
-            if (!data || !Array.isArray(data)) {
-                throw new Error("Invalid data format: expected an array.");
-            }
-            return data;
-        } catch (error) {
-            throw new Error("Network error: Unable to fetch host list: " + error.message);
-        }
-    }
-
-    //////////////////////
-    // PRIVATE METHODS
-    //////////////////////
-
-    #filterReportData(data) {
-        if (!data || typeof data !== 'object' || !data.report || typeof data.report !== 'object') {
-            return data;
-        }
-        const { version = null, serializedSize = null, excludedFields = null, ...filteredReport } = data.report;
-        return { ...data, report: filteredReport };
-
-    }
-};
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/services/storageService.js b/apps/rest-api-app/src/main/resources/node-monitor/js/services/storageService.js
deleted file mode 100644
index 02bf37dad0..0000000000
--- a/apps/rest-api-app/src/main/resources/node-monitor/js/services/storageService.js
+++ /dev/null
@@ -1,137 +0,0 @@
-// js/services/storageService.js
-App.Services = App.Services || {};
-
-App.Services.StorageService = class {
-    constructor() {
-        this.hostsKey = App.Constants.HOSTS_COOKIE_KEY;
-        this.portsKey = App.Constants.PORTS_COOKIE_KEY;
-    }
-
-    saveHostsAndPorts(hostsInput, portsInput) {
-        try {
-            const hostList = this.#parseHostListInput(hostsInput);
-            const portList = this.#parsePortListInput(portsInput);
-
-            this.#setHostsCookie(hostsInput);
-            this.#setPortsCookie(portsInput);
-        } catch (error) {
-            throw new Error("Host and port lists not stored: " + error.message);
-        }
-    }
-
-    saveHosts(hostsInput) {
-        try {
-            const hostList = this.#parseHostListInput(hostsInput);
-
-            this.#setHostsCookie(hostsInput);
-        } catch (error) {
-            throw new Error("Host list not stored: " + error.message);
-        }
-    }
-
-    getHostsFromCookie() {
-        const hostsText = this.getHostsCookie();
-        const uniqueHosts = new Set();
-
-        hostsText.split(/\r?\n/).forEach(line => {
-            line = line.trim();
-            if (line && !line.startsWith('#')) {
-                line.split(',').forEach(host => {
-                    host = host.trim();
-                    if (host) uniqueHosts.add(host);
-                });
-            }
-        });
-
-        return Array.from(uniqueHosts);
-    }
-
-    getPortsFromCookie() {
-        const portsText = this.getPortsCookie();
-        const uniquePorts = new Set();
-
-        portsText.split(/\r?\n/).forEach(line => {
-            line = line.trim();
-            if (line && !line.startsWith('#')) {
-                line.split(',').forEach(port => {
-                    port = port.trim();
-                    if (port && !isNaN(port)) uniquePorts.add(Number(port));
-                });
-            }
-        });
-
-        return Array.from(uniquePorts);
-    }
-
-    getHostsCookie() {
-        return this.#getCookie(this.hostsKey) || "";
-    }
-
-    getPortsCookie() {
-        return this.#getCookie(this.portsKey) || "";
-    }
-
-    //////////////////////
-    // PRIVATE METHODS
-    //////////////////////
-
-    #getCookie(name) {
-        const decodedCookie = decodeURIComponent(document.cookie);
-        const cookiesArray = decodedCookie.split(';');
-        for (let cookie of cookiesArray) {
-            cookie = cookie.trim();
-            if (cookie.startsWith(name + "=")) {
-                return cookie.substring(name.length + 1);
-            }
-        }
-        return null;
-    }
-
-    #parseHostListInput(input) {
-        return input
-            .split(/\r?\n|,/)
-            .map(line => line.trim())
-            .filter(line => line && !line.startsWith('#'))
-            .map(item => {
-                if (!this.#isValidHostFormat(item)) {
-                    throw new Error(`Invalid host entry detected: "${item}"`);
-                }
-                return item;
-            });
-    };
-
-    #isValidHostFormat = (host) => {
-        const hostPattern = /^[a-zA-Z0-9.-]+:\d+$/;
-        return hostPattern.test(host);
-    };
-    
-    #parsePortListInput(input) {
-        return input
-            .split(/\r?\n|,/) 
-            .map(line => line.trim()) 
-            .filter(line => line && !line.startsWith('#'))
-            .map(item => {
-                const port = Number(item);
-                if (isNaN(port) || port <= 0 || port > 65535) {
-                    throw new Error(`Invalid or out-of-range port detected: "${item}"`);
-                }
-                return port;
-            });
-    };
-
-    #setCookie(key, text) {
-        const date = new Date();
-        date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
-        const expires = "expires=" + date.toUTCString();
-        document.cookie = `${key}=${encodeURIComponent(text)}; ${expires}; path=/; SameSite=None; Secure`;
-    }
-
-    #setHostsCookie(hostsText) {
-        this.#setCookie(this.hostsKey, hostsText);
-    }
-
-    #setPortsCookie(portsText) {
-        this.#setCookie(this.portsKey, portsText);
-    }
-};
-
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/utils/DOMUtils.js b/apps/rest-api-app/src/main/resources/node-monitor/js/utils/DOMUtils.js
new file mode 100644
index 0000000000..b044c6ded7
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/utils/DOMUtils.js
@@ -0,0 +1,100 @@
+// js/utils/DOMUtils.js
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * DOMUtils is a helper class for DOM manipulation and searching.
+ */
+
+import { KeyUtility } from './KeyUtils.js'
+
+export class DOMUtils {
+
+    static SELECTOR_DATA_FULL_KEY = 'data-fullkey';
+
+    static findReportElementByAddress(address) {
+        const nodeBlock = document.getElementById(KeyUtility.generateReportNodeId(address));
+        if (!nodeBlock) {
+            console.warn(`Report node for address "${address}" not found.`);
+            return null;
+        }
+        return nodeBlock;
+    }
+
+    static findTableContainerInElementByFullKey(element, fullKey) {
+        const selector = `div.table-container[data-fullkey="${fullKey}"]`;
+        return DOMUtils.#findElementBySelectorAndOptionals(selector, element);
+    }
+
+    static findTableValueByAddressAndFullKey(address, fullKey) {
+        const selector = `td[${DOMUtils.SELECTOR_DATA_FULL_KEY}="${fullKey}"]`;
+        return DOMUtils.#findElementBySelectorAndOptionals(selector, undefined, address);
+    }
+
+    static #findElementBySelectorAndOptionals(selector, element = undefined, address = undefined) {
+        let nodeBlock = element || (address && DOMUtils.findReportElementByAddress(address));
+        if (!nodeBlock) {
+            console.warn(`No valid node found for selector "${selector}", address "${address}".`);
+            return null;
+        }
+
+        const subElement = nodeBlock.querySelector(selector);
+        if (!subElement) {
+            console.warn(`Element not found for selector "${subElement}" in node (address: "${address}").`);
+        }
+        return subElement;
+    }
+
+    static setDataFullKey(element, fullKey) {
+        element.setAttribute(DOMUtils.SELECTOR_DATA_FULL_KEY, fullKey);
+    }
+
+    static getDataFullKey(element) {
+        return element.getAttribute(DOMUtils.SELECTOR_DATA_FULL_KEY);
+    }
+
+    static findElementByKey(element, key) {
+        return this.#findElement(element, DOMUtils.SELECTOR_DATA_KEY, key);
+    }
+
+    static findElementByFullKey(element, fullKey) {
+        return this.#findElement(element, DOMUtils.SELECTOR_DATA_FULL_KEY, fullKey);
+    }
+
+    //////////////////////
+    // PRIVATE METHODS
+    //////////////////////
+
+    static #findElement(element, attribute, value) {
+        if (!element || typeof value !== 'string' || !value.trim()) {
+            console.warn('Invalid input provided to #findElement');
+            return null;
+        }
+
+        const selector = `[${attribute}="${value}"]`;
+        const selectedElement = element.querySelector(selector);
+
+        if (selectedElement) {
+            console.log(`Found element with selector "${selector}" in parent node.`);
+        } else {
+            console.warn(`No element found with selector "${selector}" in parent node.`);
+        }
+
+        return selectedElement;
+    }
+}
+
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/utils/FormatUtils.js b/apps/rest-api-app/src/main/resources/node-monitor/js/utils/FormatUtils.js
new file mode 100644
index 0000000000..cfc4dbaaab
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/utils/FormatUtils.js
@@ -0,0 +1,29 @@
+// js/utils/FormatUtils.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export class FormatUtils {
+
+    static formatNumber(value, decimalPlaces = 2) {
+        if (typeof value !== 'number' || isNaN(value)) {
+            throw new Error('Invalid value: The input must be a valid number.');
+        }
+
+        return Number.isInteger(value) ? value.toString() : value.toFixed(decimalPlaces);
+    }
+}
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/utils/KeyUtils.js b/apps/rest-api-app/src/main/resources/node-monitor/js/utils/KeyUtils.js
new file mode 100644
index 0000000000..fe1ea693cf
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/utils/KeyUtils.js
@@ -0,0 +1,83 @@
+// js/utils/KeyUtility.js
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
+ * License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Constants } from '../Constants.js';
+
+/**
+ * KeyUtility is a helper class that provides methods for working with nested keys and object data.
+ */
+export class KeyUtility {
+
+    static generateReportNodeId(address) {
+        return `report-${address.replace(/:/g, '-').replace(/\./g, '_')}`;
+    }
+
+    static extractAddressFromReportNodeId(reportNodeId) {
+        if (!reportNodeId.startsWith('report-')) {
+            throw new Error(`Invalid report node ID: ${reportNodeId}`);
+        }
+
+        return reportNodeId
+            .replace('report-', '')
+            .replace(/-/g, ':')
+            .replace(/_/g, '.');
+    }
+
+    static createFullKey(parentFullKey, currentKey) {
+        const fullKey = parentFullKey ? `${parentFullKey}.${currentKey}` : currentKey;
+        return fullKey;
+    }
+
+    static getParentKey(fullKey) {
+        return fullKey.substring(0, fullKey.lastIndexOf(Constants.HIERARCHY_DELIMITER));
+    }
+
+    static getNestedValue(obj, fullKey, defaultValue = undefined) {
+        const keys = fullKey.split(Constants.HIERARCHY_DELIMITER);
+        let current = obj;
+
+        for (const key of keys) {
+            if (current && key in current) {
+                current = current[key];
+            } else {
+                return defaultValue;
+            }
+        }
+
+        return current;
+    }
+
+    static setNestedValue(obj, fullKey, value) {
+        const keys = fullKey.split(Constants.HIERARCHY_DELIMITER);
+        keys.reduce((acc, key, index) => {
+            if (acc === null || acc === undefined) {
+                throw new TypeError(`Cannot set value for "${fullKey}". Encountered null or undefined at key "${key}".`);
+            }
+
+            if (index === keys.length - 1) {
+                acc[key] = value;
+            } else {
+                if (!(key in acc)) {
+                    acc[key] = {};
+                }
+                return acc[key];
+            }
+        }, obj);
+    }
+}
+
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/views/ReportView.js b/apps/rest-api-app/src/main/resources/node-monitor/js/views/ReportView.js
new file mode 100644
index 0000000000..ce47565524
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/views/ReportView.js
@@ -0,0 +1,233 @@
+// js/views/ReportView.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Constants } from '../Constants.js';
+import { KeyUtility } from '../utils/KeyUtils.js';
+import { DOMUtils } from '../utils/DOMUtils.js';
+
+export class ReportView {
+    constructor() { }
+
+    renderInfoMessage(message, duration) {
+        this.#renderMessage(message, "green", duration);
+    }
+
+    renderWarnMessage(message, duration) {
+        this.#renderMessage(message, "orange", duration);
+    }
+
+    renderErrorMessage(message, duration) {
+        this.#renderMessage(message, "red", duration);
+    }
+
+    clearMessage() {
+        const statusMessage = document.getElementById("statusMessage");
+        statusMessage.style.display = "none";
+    }
+
+    renderSingleReport(data, address) {
+        const nodeBlock = document.getElementById(KeyUtility.generateReportNodeId(address));
+
+        const existingTableOrError = nodeBlock.querySelector('.table-container, .error');
+        if (existingTableOrError) {
+            existingTableOrError.remove();
+        }
+
+        const existingRoleType = nodeBlock.querySelector('.role-type');
+        const existingUserName = nodeBlock.querySelector('.user-name');
+
+        let header = nodeBlock.querySelector('.node-header');
+        if (!header) {
+            header = document.createElement('div');
+            header.classList.add('node-header');
+            nodeBlock.appendChild(header);
+        } else {
+            header.innerHTML = '';
+        }
+
+        const statusCircle = document.createElement('span');
+        statusCircle.classList.add('status-circle');
+        statusCircle.classList.add(data.success ? 'status-ok' : 'status-error');
+        header.appendChild(statusCircle);
+
+        const addressText = document.createElement('span');
+        addressText.textContent = address;
+        header.appendChild(addressText);
+
+        if (existingRoleType) {
+            header.appendChild(existingRoleType);
+        }
+        if (existingUserName) {
+            header.appendChild(existingUserName);
+        }
+
+        if (data.success) {
+            const mainTable = this.#createTable(data.report, Constants.REPORT_KEY_ROOT_PARENT, Constants.REPORT_KEY_ROOT, 0);
+            nodeBlock.appendChild(mainTable);
+        } else {
+            const errorDiv = document.createElement('div');
+            errorDiv.classList.add('error');
+            errorDiv.textContent = data.errorMessage || Constants.STATUS_ERROR;
+            nodeBlock.appendChild(errorDiv);
+        }
+    }
+
+    renderAddressDetails(dto) {
+        const nodeBlock = document.getElementById(KeyUtility.generateReportNodeId(dto.address));
+        if (!nodeBlock) return;
+
+        const header = nodeBlock.querySelector('.node-header');
+
+        let roleText = header.querySelector('.role-type');
+        if (!roleText) {
+            roleText = document.createElement('span');
+            roleText.classList.add('role-type');
+            header.appendChild(roleText);
+        }
+        roleText.textContent = ` ${dto.bondedRoleType} `;
+
+        let userText = header.querySelector('.user-name');
+        if (!userText) {
+            userText = document.createElement('span');
+            userText.classList.add('user-name');
+            header.appendChild(userText);
+        }
+        userText.textContent = `${dto.nickNameOrBondUserName}`;
+    }
+
+    toggleDetailButton(button, expand) {
+        const fullKey = button.dataset.reftable_fullkey;
+        const tableContainer = button.closest('.table-container');
+        if (fullKey && tableContainer) {
+            const subTable = DOMUtils.findTableContainerInElementByFullKey(tableContainer, fullKey);
+            if (subTable) {
+                const isVisible = expand !== undefined ? expand : subTable.style.display === 'none';
+
+                subTable.style.display = isVisible ? 'block' : 'none';
+                button.textContent = isVisible ? Constants.BUTTON_COLLAPSE_DETAILS : Constants.BUTTON_EXPAND_DETAILS;
+            } else {
+                console.warn(`Subtable with fullKey "${fullKey}" not found.`);
+            }
+        } else {
+            console.warn('Button or table-container is invalid.');
+        }
+    }
+
+    //////////////////////
+    // PRIVATE METHODS
+    //////////////////////
+
+    #renderMessage(message, color = "grey", duration) {
+        const statusMessage = document.getElementById("statusMessage");
+        statusMessage.textContent = message;
+        statusMessage.style.color = color;
+        statusMessage.style.display = "block";
+
+        if (duration) {
+            setTimeout(() => {
+                this.clearMessage();
+            }, duration * 1000);
+        }
+    }
+
+    #formatColumnName(name) {
+        return name.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+    }
+
+    #createTable(data, parentFullKey, key, depth = 0) {
+
+        const tableDiv = document.createElement('div');
+
+        tableDiv.classList.add('table-container');
+        tableDiv.style.marginLeft = `${depth * 20}px`;
+
+        let fullKey;
+
+        if (depth !== 0) {
+            const tableTitle = document.createElement('div');
+            tableTitle.classList.add('sub-structure-title');
+            tableTitle.textContent = this.#formatColumnName(key);
+            tableDiv.appendChild(tableTitle);
+            fullKey = KeyUtility.createFullKey(parentFullKey, key);
+        } else {
+            fullKey = Constants.REPORT_KEY_ROOT_PARENT;
+        }
+
+        DOMUtils.setDataFullKey(tableDiv, fullKey);
+
+        const table = document.createElement('table');
+        const headerRow = document.createElement('tr');
+        const valueRow = document.createElement('tr');
+
+        const entries = Object.entries(data);
+        const primitiveEntries = entries.filter(([, value]) => typeof value !== 'object' || value === null);
+        const complexEntries = entries.filter(([, value]) => typeof value === 'object' && value !== null);
+        const sortedEntries = [...primitiveEntries, ...complexEntries];
+        const subTableList = [];
+
+        sortedEntries.forEach(([entryKey, entryValue]) => {
+            const subFullKey = KeyUtility.createFullKey(fullKey, entryKey);
+
+            const th = document.createElement('th');
+            th.textContent = this.#formatColumnName(entryKey);
+            th.title = entryKey;
+            headerRow.appendChild(th);
+
+            const td = document.createElement('td');
+            DOMUtils.setDataFullKey(td, subFullKey);
+
+            if (typeof entryValue === 'object' && entryValue !== null) {
+                const button = document.createElement('button');
+                button.classList.add('button', 'button--blue', 'toggle-button');
+                button.textContent = Constants.BUTTON_EXPAND_DETAILS;
+                button.dataset.depth = depth;
+                button.dataset.reftable_fullkey = subFullKey;
+                button.dataset.details = JSON.stringify(entryValue);
+                button.tableDiv = tableDiv;
+                button.onclick = () => this.toggleDetailButton(button);
+                td.appendChild(button);
+
+                const subTable = this.#createTable(entryValue, fullKey, entryKey, depth + 1);
+                subTable.style.display = 'none';
+                subTableList.push(subTable);
+            } else {
+                if (typeof entryValue === 'number') {
+                    td.textContent = this.#formatNumber(entryValue);
+                } else {
+                    td.textContent = entryValue !== undefined ? entryValue : "N/A";
+                }
+            }
+            valueRow.appendChild(td);
+        });
+
+        table.appendChild(headerRow);
+        table.appendChild(valueRow);
+        tableDiv.appendChild(table);
+        subTableList.forEach(subTable => tableDiv.appendChild(subTable));
+
+        return tableDiv;
+    }
+
+    #formatNumber(value) {
+        if (Number.isInteger(value)) {
+            return value.toString();
+        }
+        return parseFloat(value.toFixed(10)).toString();
+    }
+};
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/views/SettingsView.js b/apps/rest-api-app/src/main/resources/node-monitor/js/views/SettingsView.js
new file mode 100644
index 0000000000..788758c84e
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/views/SettingsView.js
@@ -0,0 +1,145 @@
+// js/views/SettingsView.js
+
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Constants } from '../Constants.js';
+
+export class SettingsView {
+    constructor(reportView, storageService, dataService, onSettingsChangedCallback) {
+        this.reportView = reportView;
+        this.storageService = storageService;
+        this.dataService = dataService;
+        this.onSettingsChanged = onSettingsChangedCallback;
+        this.#initialize();
+    }
+
+    toggleSettingsMenu() {
+        const settingsPanel = document.getElementById("settingsPanel");
+        const isCurrentlyHidden = settingsPanel.style.display === "none";
+        settingsPanel.style.display = isCurrentlyHidden ? "block" : "none";
+        if (isCurrentlyHidden) {
+            this.#initializeAddressesTextAndPortsText();
+        }
+    }
+
+    //////////////////////
+    // PRIVATE METHODS
+    //////////////////////
+
+    #initialize() {
+        this.#initializeHamburgerButton();
+        this.#initializeFetchRemoteListButton();
+        this.#initializeSaveConfigButton();
+        this.#initializeSettingsView();
+    }
+
+    #initializeHamburgerButton() {
+        document.getElementById("hamburgerButton").addEventListener("click", () => {
+            this.toggleSettingsMenu();
+        });
+    }
+
+    #initializeFetchRemoteListButton() {
+        const fetchRemoteListButton = document.getElementById("fetchRemoteListButton");
+        fetchRemoteListButton.classList.add("button", "button--orange");
+        fetchRemoteListButton.addEventListener("click", async () => {
+            await this.#fetchAndDisplayRemoteAddressList();
+        });
+    }
+
+    #initializeSaveConfigButton() {
+        const saveConfigButton = document.getElementById("saveConfigButton");
+        saveConfigButton.classList.add("button", "button--green");
+        saveConfigButton.addEventListener("click", () => {
+            this.#saveCurrentConfiguration();
+        });
+    }
+
+    #initializeAddressesTextAndPortsText() {
+        const addressesText = this.storageService.getAddressesCookie();
+        const portsText = this.storageService.getPortsCookie();
+        document.getElementById("addressListInput").value = addressesText;
+        document.getElementById("portListInput").value = portsText;
+    }
+
+    #initializeSettingsView() {
+
+        document.getElementById("addressListInput").placeholder = Constants.PLACEHOLDER_ADDRESS_LIST;
+        document.getElementById("portListInput").placeholder = Constants.PLACEHOLDER_PORT_LIST;
+
+        const addressesText = this.storageService.getAddressesCookie() || '';
+        const portsText = this.storageService.getPortsCookie() || '';
+        document.getElementById("addressListInput").value = addressesText;
+        document.getElementById("portListInput").value = portsText;
+
+        const thresholds = this.storageService.getDeviationThresholds() || {
+            LOW: 5,
+            MEDIUM: 20,
+            HIGH: 50
+        };
+        document.getElementById("lowThreshold").value = thresholds.LOW;
+        document.getElementById("mediumThreshold").value = thresholds.MEDIUM;
+        document.getElementById("highThreshold").value = thresholds.HIGH;
+    }
+
+    async #fetchAndDisplayRemoteAddressList() {
+        this.reportView.clearMessage();
+        try {
+            const remoteAddresses = await this.dataService.fetchAddressList();
+            if (remoteAddresses && Array.isArray(remoteAddresses)) {
+                const newValue = remoteAddresses.join('\n');
+                if (newValue.length > 0) {
+                    document.getElementById("addressListInput").value = newValue;
+                } else {
+                    this.reportView.renderErrorMessage("Received address list is empty.");
+                }
+            } else {
+                this.reportView.renderErrorMessage("Failed to fetch remote address list.");
+            }
+        } catch (error) {
+            this.reportView.renderErrorMessage(error.message);
+        }
+    }
+
+    #saveCurrentConfiguration() {
+        const addressesInput = document.getElementById("addressListInput").value;
+        const portsInput = document.getElementById("portListInput").value;
+
+        const lowThreshold = parseInt(document.getElementById("lowThreshold").value, 10);
+        const mediumThreshold = parseInt(document.getElementById("mediumThreshold").value, 10);
+        const highThreshold = parseInt(document.getElementById("highThreshold").value, 10);
+
+        try {
+            this.storageService.saveAddressesAndPorts(addressesInput, portsInput);
+
+            const newThresholds = {
+                LOW: lowThreshold,
+                MEDIUM: mediumThreshold,
+                HIGH: highThreshold
+            };
+            this.storageService.saveDeviationThresholds(newThresholds);
+
+            Constants.initialize({ DEVIATION_THRESHOLDS: newThresholds });
+
+            this.reportView.renderInfoMessage("Configuration saved successfully.", 1);
+            this.toggleSettingsMenu();
+            Promise.resolve().then(() => this.onSettingsChanged());
+        } catch (error) {
+            this.reportView.renderErrorMessage(error.message);
+        }
+    }
+};
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/views/reportView.js b/apps/rest-api-app/src/main/resources/node-monitor/js/views/reportView.js
deleted file mode 100644
index 5c4346d879..0000000000
--- a/apps/rest-api-app/src/main/resources/node-monitor/js/views/reportView.js
+++ /dev/null
@@ -1,146 +0,0 @@
-// js/views/reportView.js
-App.Views = App.Views || {};
-
-App.Views.ReportView = class {
-    constructor() {}
-
-    renderInfoMessage(message, dauer) {
-        this.#renderMessage(message, "green", dauer);
-    }
-
-    renderWarnMessage(message, dauer) {
-        this.#renderMessage(message, "orange", dauer);
-    }
-
-    renderErrorMessage(message, dauer) {
-        this.#renderMessage(message, "red", dauer);
-    }
-
-    clearMessage() {
-        const statusMessage = document.getElementById("statusMessage");
-        statusMessage.style.display = "none";
-    }
-
-    renderSingleReport(data, host) {
-        const nodeBlock = document.getElementById(`report-${host.replace(/[:.]/g, '-')}`);
-        nodeBlock.innerHTML = '';
-
-        const header = document.createElement('div');
-        header.classList.add('node-header');
-
-        const statusCircle = document.createElement('span');
-        statusCircle.classList.add('status-circle');
-
-        //todo
-        //statusCircle.classList.add(data.successful ? 'status-ok' : 'status-error');
-        statusCircle.classList.add('status-ok');
-        header.appendChild(statusCircle);
-
-        const hostText = document.createElement('span');
-        hostText.textContent = host;
-        header.appendChild(hostText);
-
-        nodeBlock.appendChild(header);
-
-        //todo
-        //if (data.successful) {
-            const mainTable = this.#createTable(data, "Report", 0);
-            nodeBlock.appendChild(mainTable);
-       /* } else {
-            const errorDiv = document.createElement('div');
-            errorDiv.classList.add('error');
-            errorDiv.textContent = data.errorMessage || App.Constants.STATUS_ERROR;
-            nodeBlock.appendChild(errorDiv);
-        }*/
-    }
-
-    toggleDetailButton(button, expand) {
-        const details = JSON.parse(button.dataset.details);
-        const key = button.dataset.key;
-        const depth = parseInt(button.dataset.depth);
-
-        if (!button.classList.contains('expanded')) {
-            const nestedTable = this.#createTable(details, key, depth + 1);
-            nestedTable.style.display = 'none';
-            button.tableDiv.appendChild(nestedTable);
-            button.classList.add('expanded');
-            button.nestedTable = nestedTable;
-        }
-        const isVisible = expand !== undefined ? expand : button.nestedTable.style.display === 'none';
-        button.nestedTable.style.display = isVisible ? 'block' : 'none';
-        button.textContent = isVisible ? BUTTON_COLLAPSE_DETAILS : BUTTON_EXPAND_DETAILS;
-    }
-
-    //////////////////////
-    // PRIVATE METHODS
-    //////////////////////
-
-    #renderMessage(message, color = "grey", dauer) {
-        const statusMessage = document.getElementById("statusMessage");
-        statusMessage.textContent = message;
-        statusMessage.style.color = color;
-        statusMessage.style.display = "block";
-
-        if (dauer) {
-            setTimeout(() => {
-                this.clearMessage();
-            }, dauer * 1000);
-        }
-    }
-
-    #formatColumnName(name) {
-        return name.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
-    };
-
-    #createTable(data, title, depth = 0) {
-        const tableDiv = document.createElement('div');
-        tableDiv.classList.add('table-container');
-        tableDiv.style.marginLeft = `${depth * 20}px`;
-
-        const tableTitle = document.createElement('div');
-        tableTitle.classList.add('sub-structure-title');
-        tableTitle.textContent = title;
-        tableDiv.appendChild(tableTitle);
-
-        const table = document.createElement('table');
-        const headerRow = document.createElement('tr');
-        const valueRow = document.createElement('tr');
-
-        const keys = Object.keys(data);
-        const simpleKeys = keys.filter(key => typeof data[key] !== 'object' || data[key] === null);
-        const complexKeys = keys.filter(key => typeof data[key] === 'object' && data[key] !== null);
-        const sortedKeys = [...simpleKeys, ...complexKeys];
-
-        sortedKeys.forEach(key => {
-            const th = document.createElement('th');
-            th.textContent = this.#formatColumnName(key);
-            th.title = key;
-            headerRow.appendChild(th);
-
-            const td = document.createElement('td');
-            const details = data[key];
-
-            if (complexKeys.includes(key)) {
-                const button = document.createElement('button');
-                button.classList.add('button', 'button--blue', 'toggle-button');
-                button.textContent = App.Constants.BUTTON_EXPAND_DETAILS;
-                button.dataset.key = key;
-                button.dataset.details = JSON.stringify(details);
-                button.dataset.depth = depth;
-                button.tableDiv = tableDiv;
-                button.onclick = () => this.toggleDetailButton(button);
-                td.appendChild(button);
-            } else {
-                td.textContent = details !== undefined ? details : "N/A";
-            }
-            valueRow.appendChild(td);
-        });
-
-        table.appendChild(headerRow);
-        table.appendChild(valueRow);
-        tableDiv.appendChild(table);
-
-        return tableDiv;
-    }
-};
-
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/views/settingsView.js b/apps/rest-api-app/src/main/resources/node-monitor/js/views/settingsView.js
deleted file mode 100644
index 11c8bf999e..0000000000
--- a/apps/rest-api-app/src/main/resources/node-monitor/js/views/settingsView.js
+++ /dev/null
@@ -1,99 +0,0 @@
-// js/views/settingsView.js
-App.Views = App.Views || {};
-
-App.Views.SettingsView = class {
-    constructor(reportView, storageService, dataService, onSettingsChangedCallback) {
-        this.reportView = reportView;
-        this.storageService = storageService;
-        this.dataService = dataService;
-        this.onSettingsChanged = onSettingsChangedCallback;
-        this.#initialize();
-    }
-
-    toggleSettingsMenu() {
-        const settingsPanel = document.getElementById("settingsPanel");
-        const isCurrentlyHidden = settingsPanel.style.display === "none";
-        settingsPanel.style.display = isCurrentlyHidden ? "block" : "none";
-        if (isCurrentlyHidden) {
-            this.#initializeHostsTextAndPortsText();
-        }
-    }
-
-    //////////////////////
-    // PRIVATE METHODS
-    //////////////////////
-
-    #initialize() {
-        this.#initializeHamburgerButton();
-        this.#initializeFetchRemoteListButton();
-        this.#initializeSaveConfigButton();
-        this.#initializePlaceHolder();
-        this.#initializeHostsTextAndPortsText();
-    }
-
-    #initializePlaceHolder() {
-        document.getElementById("hostListInput").placeholder = App.Constants.PLACEHOLDER_HOST_LIST;
-        document.getElementById("portListInput").placeholder = App.Constants.PLACEHOLDER_PORT_LIST;
-    }
-
-    #initializeHostsTextAndPortsText() {
-        const hostsText = this.storageService.getHostsCookie();
-        const portsText = this.storageService.getPortsCookie();
-        document.getElementById("hostListInput").value = hostsText;
-        document.getElementById("portListInput").value = portsText;
-    }
-
-    #initializeHamburgerButton() {
-        document.getElementById("hamburgerButton").addEventListener("click", () => {
-            this.toggleSettingsMenu();
-        });
-    }
-
-    #initializeFetchRemoteListButton() {
-        const fetchRemoteListButton = document.getElementById("fetchRemoteListButton");
-        fetchRemoteListButton.classList.add("button", "button--orange");
-        fetchRemoteListButton.addEventListener("click", async () => {
-            await this.#fetchAndDisplayRemoteHostList();
-        });
-    }
-
-    #initializeSaveConfigButton() {
-        const saveConfigButton = document.getElementById("saveConfigButton");
-        saveConfigButton.classList.add("button", "button--green");
-        saveConfigButton.addEventListener("click", () => {
-            this.#saveCurrentConfiguration();
-        });
-    }
-
-    async #fetchAndDisplayRemoteHostList() {
-        this.reportView.clearMessage();
-        try {
-            const remoteHosts = await this.dataService.fetchHostList();
-            if (remoteHosts && Array.isArray(remoteHosts)) {
-                const newValue = remoteHosts.join('\n');
-                if (newValue.length > 0) {
-                    document.getElementById("hostListInput").value = newValue;
-                } else {
-                    this.reportView.renderErrorMessage("Received host list is empty.");
-                }
-            } else {
-                this.reportView.renderErrorMessage("Failed to fetch remote host list.");
-            }
-        } catch (error) {
-            this.reportView.renderErrorMessage(error.message);
-        }
-    }
-
-    #saveCurrentConfiguration() {
-        const hostsInput = document.getElementById("hostListInput").value;
-        const portsInput = document.getElementById("portListInput").value;
-        try {
-            this.storageService.saveHostsAndPorts(hostsInput, portsInput);
-            this.reportView.renderInfoMessage("Saved successfully", 1);
-            this.toggleSettingsMenu();
-            Promise.resolve().then(() => this.onSettingsChanged());
-        } catch (error) {
-            this.reportView.renderErrorMessage(error.message);
-        }
-    }
-};
\ No newline at end of file
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/resources/Bisq2_icon.svg b/apps/rest-api-app/src/main/resources/node-monitor/resources/Bisq2_icon.svg
new file mode 100644
index 0000000000..5c224c4a79
--- /dev/null
+++ b/apps/rest-api-app/src/main/resources/node-monitor/resources/Bisq2_icon.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256px" height="256px"
+     style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+>
+    <g>
+        <path style="opacity:0.03" fill="#000000"
+              d="M 255.5,119.5 C 255.5,126.833 255.5,134.167 255.5,141.5C 246.701,200.626 213.701,238.626 156.5,255.5C 137.167,255.5 117.833,255.5 98.5,255.5C 41.7601,238.753 8.76005,201.086 -0.5,142.5C -0.5,134.833 -0.5,127.167 -0.5,119.5C 6.05494,70.1214 31.7216,34.6214 76.5,13C 128.26,-6.48565 174.927,1.84769 216.5,38C 238.783,60.7319 251.783,87.8986 255.5,119.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:0.975" fill="#48b555"
+              d="M 219.5,202.5 C 218.833,202.5 218.167,202.5 217.5,202.5C 248.283,162.031 252.783,118.698 231,72.5C 204.417,28.4541 165.25,7.95411 113.5,11C 82.1086,15.6873 56.442,30.1873 36.5,54.5C 26.6603,65.8382 19.6603,78.8382 15.5,93.5C 12.4413,103.573 10.7747,113.906 10.5,124.5C 9.51836,121.038 9.18503,117.371 9.5,113.5C 16.0291,67.4802 40.5291,35.1468 83,16.5C 136.394,-1.23592 182.06,10.4307 220,51.5C 248.536,89.5902 254.203,130.924 237,175.5C 232.637,185.588 226.803,194.588 219.5,202.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#25af34"
+              d="M 217.5,202.5 C 217.167,202.5 216.833,202.5 216.5,202.5C 211.91,198.425 207.077,193.759 202,188.5C 201.086,189.654 200.253,189.487 199.5,188C 200.252,187.329 200.586,186.496 200.5,185.5C 205.803,180.213 207.636,173.88 206,166.5C 204.144,163.152 201.311,161.152 197.5,160.5C 195.873,158.37 194.04,156.37 192,154.5C 190.434,155.061 189.101,154.394 188,152.5C 187.667,152.833 187.333,153.167 187,153.5C 181.63,148.298 176.464,142.965 171.5,137.5C 171.896,134.956 171.229,132.789 169.5,131C 165.747,129.011 161.747,128.178 157.5,128.5C 155.873,126.37 154.04,124.37 152,122.5C 151.667,122.833 151.333,123.167 151,123.5C 148.667,121.167 146.333,118.833 144,116.5C 143.667,116.833 143.333,117.167 143,117.5C 139.333,113.833 135.667,110.167 132,106.5C 131.667,106.833 131.333,107.167 131,107.5C 128.667,105.167 126.333,102.833 124,100.5C 123.667,100.833 123.333,101.167 123,101.5C 119.333,97.8333 115.667,94.1667 112,90.5C 111.667,90.8333 111.333,91.1667 111,91.5C 108.667,89.1667 106.333,86.8333 104,84.5C 103.667,84.8333 103.333,85.1667 103,85.5C 99.3333,81.8333 95.6667,78.1667 92,74.5C 91.6667,74.8333 91.3333,75.1667 91,75.5C 88.8733,73.8863 87.3733,71.8863 86.5,69.5C 88.2884,68.3775 90.2884,68.2109 92.5,69C 100.844,73.8372 108.844,79.1705 116.5,85C 132.961,93.6777 146.127,90.1777 156,74.5C 159.526,56.4085 152.359,44.5752 134.5,39C 102.386,35.2255 76.3857,46.0589 56.5,71.5C 48.9147,67.6354 42.2481,61.9687 36.5,54.5C 56.442,30.1873 82.1086,15.6873 113.5,11C 165.25,7.95411 204.417,28.4541 231,72.5C 252.783,118.698 248.283,162.031 217.5,202.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#243f27"
+              d="M 86.5,69.5 C 84.4959,70.6728 82.9959,72.3395 82,74.5C 80.5226,78.4299 79.3559,82.4299 78.5,86.5C 76.5646,90.8949 75.2313,95.5615 74.5,100.5C 73.596,101.209 73.2627,102.209 73.5,103.5C 71.9826,103.489 70.8159,102.823 70,101.5C 68.513,102.253 68.3463,103.086 69.5,104C 68.4844,104.519 67.8178,105.353 67.5,106.5C 66.7092,111.308 65.5425,115.642 64,119.5C 62.4943,116.526 60.8276,116.193 59,118.5C 57.6667,115.833 56.3333,115.833 55,118.5C 53.6667,115.833 52.3333,115.833 51,118.5C 49.6667,115.833 48.3333,115.833 47,118.5C 44.9895,114.998 43.6561,114.998 43,118.5C 42.9459,112.875 43.7792,107.042 45.5,101C 44.2513,99.1759 43.0847,99.3426 42,101.5C 41.5357,100.906 41.369,100.239 41.5,99.5C 44.7833,89.2246 49.7833,79.8913 56.5,71.5C 76.3857,46.0589 102.386,35.2255 134.5,39C 152.359,44.5752 159.526,56.4085 156,74.5C 146.127,90.1777 132.961,93.6777 116.5,85C 108.844,79.1705 100.844,73.8372 92.5,69C 90.2884,68.2109 88.2884,68.3775 86.5,69.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#23ab33"
+              d="M 86.5,69.5 C 87.3733,71.8863 88.8733,73.8863 91,75.5C 91.3333,75.1667 91.6667,74.8333 92,74.5C 95.6667,78.1667 99.3333,81.8333 103,85.5C 103.333,85.1667 103.667,84.8333 104,84.5C 106.333,86.8333 108.667,89.1667 111,91.5C 111.333,91.1667 111.667,90.8333 112,90.5C 115.667,94.1667 119.333,97.8333 123,101.5C 123.333,101.167 123.667,100.833 124,100.5C 126.333,102.833 128.667,105.167 131,107.5C 131.333,107.167 131.667,106.833 132,106.5C 135.667,110.167 139.333,113.833 143,117.5C 143.333,117.167 143.667,116.833 144,116.5C 146.333,118.833 148.667,121.167 151,123.5C 151.333,123.167 151.667,122.833 152,122.5C 154.04,124.37 155.873,126.37 157.5,128.5C 152.833,129.833 149.833,132.833 148.5,137.5C 147.683,139.969 147.183,142.635 147,145.5C 144.667,143.167 142.333,140.833 140,138.5C 139.667,138.833 139.333,139.167 139,139.5C 136.667,137.167 134.333,134.833 132,132.5C 131.667,132.833 131.333,133.167 131,133.5C 127.333,129.833 123.667,126.167 120,122.5C 119.667,122.833 119.333,123.167 119,123.5C 116.667,121.167 114.333,118.833 112,116.5C 111.667,116.833 111.333,117.167 111,117.5C 107.333,113.833 103.667,110.167 100,106.5C 99.6667,106.833 99.3333,107.167 99,107.5C 96.6667,105.167 94.3333,102.833 92,100.5C 91.6667,100.833 91.3333,101.167 91,101.5C 87,97.5 83,93.5 79,89.5C 78.5172,88.552 78.3505,87.552 78.5,86.5C 79.3559,82.4299 80.5226,78.4299 82,74.5C 82.9959,72.3395 84.4959,70.6728 86.5,69.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#22a030"
+              d="M 36.5,54.5 C 42.2481,61.9687 48.9147,67.6354 56.5,71.5C 49.7833,79.8913 44.7833,89.2246 41.5,99.5C 39.8993,102.55 38.8993,105.884 38.5,109.5C 35.2172,107.843 31.7172,104.843 28,100.5C 27.6667,100.833 27.3333,101.167 27,101.5C 24,98.5 21,95.5 18,92.5C 17.3292,93.2524 16.4959,93.5858 15.5,93.5C 19.6603,78.8382 26.6603,65.8382 36.5,54.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#233f26"
+              d="M 181.5,72.5 C 184.505,72.253 187.005,73.253 189,75.5C 194.822,86.143 199.822,97.143 204,108.5C 205.856,115.303 203.689,120.136 197.5,123C 192.411,123.826 187.411,123.492 182.5,122C 176.046,119.273 169.712,116.273 163.5,113C 154.335,107.512 153.169,100.678 160,92.5C 166.762,85.2326 173.928,78.5659 181.5,72.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#23a732"
+              d="M 78.5,86.5 C 78.3505,87.552 78.5172,88.552 79,89.5C 83,93.5 87,97.5 91,101.5C 91.3333,101.167 91.6667,100.833 92,100.5C 94.3333,102.833 96.6667,105.167 99,107.5C 99.3333,107.167 99.6667,106.833 100,106.5C 103.667,110.167 107.333,113.833 111,117.5C 111.333,117.167 111.667,116.833 112,116.5C 114.333,118.833 116.667,121.167 119,123.5C 119.333,123.167 119.667,122.833 120,122.5C 123.667,126.167 127.333,129.833 131,133.5C 131.333,133.167 131.667,132.833 132,132.5C 134.333,134.833 136.667,137.167 139,139.5C 139.333,139.167 139.667,138.833 140,138.5C 142.333,140.833 144.667,143.167 147,145.5C 147.183,142.635 147.683,139.969 148.5,137.5C 147.918,149.216 152.918,152.383 163.5,147C 166.783,144.228 169.45,141.061 171.5,137.5C 176.464,142.965 181.63,148.298 187,153.5C 187.333,153.167 187.667,152.833 188,152.5C 189.101,154.394 190.434,155.061 192,154.5C 194.04,156.37 195.873,158.37 197.5,160.5C 194.68,160.248 192.014,160.748 189.5,162C 183.489,167.001 177.156,171.501 170.5,175.5C 168.079,174.109 165.412,173.275 162.5,173C 160.333,170.833 158.167,168.667 156,166.5C 155.333,167.167 154.667,167.833 154,168.5C 150,164.5 145.333,159.833 140,154.5C 139.667,154.833 139.333,155.167 139,155.5C 136.822,154.107 135.822,152.44 136,150.5C 133.925,153.028 133.092,152.861 133.5,150C 126.002,144.534 118.835,138.034 112,130.5C 111.586,130.957 111.086,131.291 110.5,131.5C 105.22,127.722 100.386,123.389 96,118.5C 95.6667,118.833 95.3333,119.167 95,119.5C 92.8219,118.107 91.8219,116.44 92,114.5C 91.3333,115.167 90.6667,115.833 90,116.5C 84.6303,111.298 79.4636,105.965 74.5,100.5C 75.2313,95.5615 76.5646,90.8949 78.5,86.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#1f932c"
+              d="M 38.5,109.5 C 35.7972,128.063 37.7972,146.063 44.5,163.5C 44.4717,166.342 43.1383,167.509 40.5,167C 35.502,163.358 30.6686,159.192 26,154.5C 25.6667,154.833 25.3333,155.167 25,155.5C 21.3333,151.833 17.6667,148.167 14,144.5C 13.6174,145.056 13.1174,145.389 12.5,145.5C 10.7163,138.649 10.0496,131.649 10.5,124.5C 10.7747,113.906 12.4413,103.573 15.5,93.5C 16.4959,93.5858 17.3292,93.2524 18,92.5C 21,95.5 24,98.5 27,101.5C 27.3333,101.167 27.6667,100.833 28,100.5C 31.7172,104.843 35.2172,107.843 38.5,109.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#203e23"
+              d="M 157.5,128.5 C 161.747,128.178 165.747,129.011 169.5,131C 171.229,132.789 171.896,134.956 171.5,137.5C 169.45,141.061 166.783,144.228 163.5,147C 152.918,152.383 147.918,149.216 148.5,137.5C 149.833,132.833 152.833,129.833 157.5,128.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#21a130"
+              d="M 74.5,100.5 C 79.4636,105.965 84.6303,111.298 90,116.5C 90.6667,115.833 91.3333,115.167 92,114.5C 91.8219,116.44 92.8219,118.107 95,119.5C 95.3333,119.167 95.6667,118.833 96,118.5C 100.386,123.389 105.22,127.722 110.5,131.5C 111.086,131.291 111.586,130.957 112,130.5C 118.835,138.034 126.002,144.534 133.5,150C 133.092,152.861 133.925,153.028 136,150.5C 135.822,152.44 136.822,154.107 139,155.5C 139.333,155.167 139.667,154.833 140,154.5C 145.333,159.833 150,164.5 154,168.5C 154.667,167.833 155.333,167.167 156,166.5C 158.167,168.667 160.333,170.833 162.5,173C 165.412,173.275 168.079,174.109 170.5,175.5C 162.066,182.052 152.732,187.052 142.5,190.5C 139.737,190.256 137.571,188.923 136,186.5C 134.434,187.061 133.101,186.394 132,184.5C 131.667,184.833 131.333,185.167 131,185.5C 124.331,178.132 117.331,171.799 110,166.5C 109.667,166.833 109.333,167.167 109,167.5C 104.667,163.167 100.333,158.833 96,154.5C 95.6667,154.833 95.3333,155.167 95,155.5C 92.6667,153.167 90.3333,150.833 88,148.5C 87.6667,148.833 87.3333,149.167 87,149.5C 83.3333,145.833 79.6667,142.167 76,138.5C 75.6667,138.833 75.3333,139.167 75,139.5C 69.8492,135.079 68.0159,129.412 69.5,122.5C 70.0474,115.98 71.3808,109.647 73.5,103.5C 73.2627,102.209 73.596,101.209 74.5,100.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#203e23"
+              d="M 93.5,128.5 C 103.095,127.112 108.762,131.112 110.5,140.5C 109.82,147.906 105.82,150.739 98.5,149C 91.0018,145.867 87.1684,140.367 87,132.5C 89.0129,130.752 91.1795,129.418 93.5,128.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#20982e"
+              d="M 69.5,122.5 C 68.0159,129.412 69.8492,135.079 75,139.5C 75.3333,139.167 75.6667,138.833 76,138.5C 79.6667,142.167 83.3333,145.833 87,149.5C 87.3333,149.167 87.6667,148.833 88,148.5C 90.3333,150.833 92.6667,153.167 95,155.5C 95.3333,155.167 95.6667,154.833 96,154.5C 100.333,158.833 104.667,163.167 109,167.5C 109.333,167.167 109.667,166.833 110,166.5C 117.331,171.799 124.331,178.132 131,185.5C 131.333,185.167 131.667,184.833 132,184.5C 133.101,186.394 134.434,187.061 136,186.5C 137.571,188.923 139.737,190.256 142.5,190.5C 128.317,193.894 115.317,191.061 103.5,182C 97.5,177.333 91.5,172.667 85.5,168C 71.8741,155.617 66.5407,140.45 69.5,122.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#1d8b2a"
+              d="M 44.5,163.5 C 56.5761,187.578 75.2427,204.244 100.5,213.5C 100.062,213.435 99.7284,213.601 99.5,214C 102,216.5 104.5,219 107,221.5C 107.333,221.167 107.667,220.833 108,220.5C 110.333,222.833 112.667,225.167 115,227.5C 115.333,227.167 115.667,226.833 116,226.5C 119.667,230.167 123.333,233.833 127,237.5C 127.333,237.167 127.667,236.833 128,236.5C 130.167,238.667 132.333,240.833 134.5,243C 136.134,243.494 137.801,243.66 139.5,243.5C 77.9269,246.114 36.4269,218.448 15,160.5C 14.0025,155.514 13.1692,150.514 12.5,145.5C 13.1174,145.389 13.6174,145.056 14,144.5C 17.6667,148.167 21.3333,151.833 25,155.5C 25.3333,155.167 25.6667,154.833 26,154.5C 30.6686,159.192 35.502,163.358 40.5,167C 43.1383,167.509 44.4717,166.342 44.5,163.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#1e3d21"
+              d="M 41.5,99.5 C 41.369,100.239 41.5357,100.906 42,101.5C 43.0847,99.3426 44.2513,99.1759 45.5,101C 43.7792,107.042 42.9459,112.875 43,118.5C 43.6561,114.998 44.9895,114.998 47,118.5C 48.3333,115.833 49.6667,115.833 51,118.5C 52.3333,115.833 53.6667,115.833 55,118.5C 56.3333,115.833 57.6667,115.833 59,118.5C 60.8276,116.193 62.4943,116.526 64,119.5C 65.5425,115.642 66.7092,111.308 67.5,106.5C 67.8178,105.353 68.4844,104.519 69.5,104C 68.3463,103.086 68.513,102.253 70,101.5C 70.8159,102.823 71.9826,103.489 73.5,103.5C 71.3808,109.647 70.0474,115.98 69.5,122.5C 66.5407,140.45 71.8741,155.617 85.5,168C 91.5,172.667 97.5,177.333 103.5,182C 115.317,191.061 128.317,193.894 142.5,190.5C 152.732,187.052 162.066,182.052 170.5,175.5C 177.156,171.501 183.489,167.001 189.5,162C 192.014,160.748 194.68,160.248 197.5,160.5C 201.311,161.152 204.144,163.152 206,166.5C 207.636,173.88 205.803,180.213 200.5,185.5C 190.77,196.533 179.104,204.866 165.5,210.5C 144.154,218.451 122.488,219.451 100.5,213.5C 75.2427,204.244 56.5761,187.578 44.5,163.5C 37.7972,146.063 35.7972,128.063 38.5,109.5C 38.8993,105.884 39.8993,102.55 41.5,99.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#1e3d21"
+              d="M 119.5,161.5 C 126.175,161.334 132.842,161.5 139.5,162C 140.554,163.388 140.72,164.888 140,166.5C 136.915,170.093 133.415,173.093 129.5,175.5C 124.238,173.204 120.238,169.537 117.5,164.5C 117.942,163.261 118.609,162.261 119.5,161.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#439a4d"
+              d="M 9.5,113.5 C 9.18503,117.371 9.51836,121.038 10.5,124.5C 10.0496,131.649 10.7163,138.649 12.5,145.5C 13.1692,150.514 14.0025,155.514 15,160.5C 36.4269,218.448 77.9269,246.114 139.5,243.5C 156.132,242.066 171.465,237.066 185.5,228.5C 192.627,224.763 199.294,220.263 205.5,215C 209.747,211.258 213.414,207.092 216.5,202.5C 216.833,202.5 217.167,202.5 217.5,202.5C 218.167,202.5 218.833,202.5 219.5,202.5C 199.701,227.579 173.701,242.079 141.5,246C 82.278,249.321 40.4447,224.154 16,170.5C 8.83637,151.914 6.66971,132.914 9.5,113.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#21a030"
+              d="M 200.5,185.5 C 200.586,186.496 200.252,187.329 199.5,188C 200.253,189.487 201.086,189.654 202,188.5C 207.077,193.759 211.91,198.425 216.5,202.5C 213.414,207.092 209.747,211.258 205.5,215C 199.294,220.263 192.627,224.763 185.5,228.5C 183.873,226.37 182.04,224.37 180,222.5C 179.667,222.833 179.333,223.167 179,223.5C 176.667,221.167 174.333,218.833 172,216.5C 171.667,216.833 171.333,217.167 171,217.5C 168.546,215.559 166.713,213.225 165.5,210.5C 179.104,204.866 190.77,196.533 200.5,185.5 Z"/>
+    </g>
+    <g>
+        <path style="opacity:1" fill="#1f942c"
+              d="M 165.5,210.5 C 166.713,213.225 168.546,215.559 171,217.5C 171.333,217.167 171.667,216.833 172,216.5C 174.333,218.833 176.667,221.167 179,223.5C 179.333,223.167 179.667,222.833 180,222.5C 182.04,224.37 183.873,226.37 185.5,228.5C 171.465,237.066 156.132,242.066 139.5,243.5C 137.801,243.66 136.134,243.494 134.5,243C 132.333,240.833 130.167,238.667 128,236.5C 127.667,236.833 127.333,237.167 127,237.5C 123.333,233.833 119.667,230.167 116,226.5C 115.667,226.833 115.333,227.167 115,227.5C 112.667,225.167 110.333,222.833 108,220.5C 107.667,220.833 107.333,221.167 107,221.5C 104.5,219 102,216.5 99.5,214C 99.7284,213.601 100.062,213.435 100.5,213.5C 122.488,219.451 144.154,218.451 165.5,210.5 Z"/>
+    </g>
+</svg>
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/styles/global.css b/apps/rest-api-app/src/main/resources/node-monitor/styles/global.css
index 736e847057..cd4037f387 100644
--- a/apps/rest-api-app/src/main/resources/node-monitor/styles/global.css
+++ b/apps/rest-api-app/src/main/resources/node-monitor/styles/global.css
@@ -1,4 +1,5 @@
 /* styles/global.css */
+
 /* Basic reset and global styling */
 body {
     font-family: Arial, sans-serif;
@@ -41,7 +42,7 @@ h2 {
     background-color: red;
 }
 
-/* Basic button styling to be extended in specific views */
+/* Basic button styling */
 .button {
     padding: 5px 10px;
     color: #fff;
@@ -80,9 +81,9 @@ h2 {
     background-color: #004494;
 }
 
-/* Fetch Remote List Button - using orange for warning */
 .button--orange {
-    background-color: #ff8c00; /* Orange as a warning color */
+    background-color: #ff8c00;
+    /* Orange as a warning color */
 }
 
 .button--orange:hover {
@@ -91,4 +92,4 @@ h2 {
 
 .button--orange:active {
     background-color: #cc6f00;
-}
+}
\ No newline at end of file
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/styles/page-layout.css b/apps/rest-api-app/src/main/resources/node-monitor/styles/page-layout.css
index 4bae378da9..bc8718aeba 100644
--- a/apps/rest-api-app/src/main/resources/node-monitor/styles/page-layout.css
+++ b/apps/rest-api-app/src/main/resources/node-monitor/styles/page-layout.css
@@ -6,6 +6,7 @@
     gap: 10px;
 }
 
+/* Responsive adjustments */
 @media (max-width: 768px) {
     h2 {
         font-size: 1.5em;
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/styles/reportView.css b/apps/rest-api-app/src/main/resources/node-monitor/styles/reportView.css
index 210dcd9d2c..2df052042e 100644
--- a/apps/rest-api-app/src/main/resources/node-monitor/styles/reportView.css
+++ b/apps/rest-api-app/src/main/resources/node-monitor/styles/reportView.css
@@ -1,4 +1,5 @@
 /* styles/reportView.css */
+
 /* Node block container styling */
 .node-block {
     border: 1px solid #ddd;
@@ -6,7 +7,8 @@
     margin: 10px 20px;
     border-radius: 8px;
     background-color: #f9f9f9;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds slight shadow for depth */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* Adds slight shadow for depth */
 }
 
 /* Header styling for each node */
@@ -14,7 +16,70 @@
     display: flex;
     align-items: center;
     margin-bottom: 10px;
-    flex-wrap: wrap; /* Allows wrapping on smaller screens */
+    flex-wrap: wrap;
+    /* Allows wrapping on smaller screens */
+    gap: 15px;
+    /* Adds space between elements */
+}
+
+/* Host, Role Type, and User styling */
+.node-header span:not(.status-circle) {
+    font-size: 1em;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: #e9ecef;
+    /* Light background for readability */
+    color: #333;
+}
+
+/* Distinct styles for Role Type and User */
+div.node-header>span.role-type {
+    font-weight: bold;
+    background-color: #cce5ff;
+    color: #004085;
+    padding: 4px 8px;
+    border-radius: 4px;
+    border: 1px solid #b8daff;
+}
+
+.node-header .user-name {
+    font-style: italic;
+    color: #6c757d;
+    /* Gray color for user name */
+}
+
+/* Status indicator circles */
+.status-circle {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 10px;
+    background-color: grey;
+    /* Default fallback color */
+}
+
+.status-loading {
+    background-color: yellow;
+}
+
+.status-ok {
+    background-color: green;
+}
+
+.status-error {
+    background-color: red;
+}
+
+.sub-structure-title {
+    display: inline-block;
+    font-weight: bold;
+    background-color: #e9ecef;
+    color: #495057;
+     padding: 4px 8px;
+    border-radius: 4px;
+    margin: 5px 0;
+    border: 1px solid #ced4da;
 }
 
 /* Table styling for report details */
@@ -28,13 +93,12 @@ table {
     margin-top: 5px;
 }
 
-th, td {
-    padding: 8px;
+th,
+td {
+    padding: 3px 3px;
     border: 1px solid #ddd;
-    text-align: left;
 }
 
-/* Header styling for table columns */
 th {
     font-size: 0.85em;
     background-color: #f2f2f2;
@@ -43,6 +107,75 @@ th {
     max-width: 120px;
     white-space: normal;
     word-wrap: break-word;
+    text-align: left;
+    /* Ensure headers are left-aligned */
+}
+
+td {
+    text-align: left;
+}
+
+td .button.toggle-button {
+    margin: 0 auto;
+}
+
+td.diff {
+    position: relative;
+    background: transparent;
+}
+
+td.diff.low {
+    background: radial-gradient(
+        ellipse at center,
+        rgba(255, 240, 85, 1) 0%,
+        rgba(255, 240, 85, 0.25) 50%,
+        rgba(255, 240, 85, 0) 100%
+    );
+}
+
+td.diff.medium {
+    background: radial-gradient(
+        ellipse at center,
+        rgba(255, 214, 153, 1) 0%, 
+        rgba(255, 214, 153, 0.25) 50%, 
+        rgba(255, 214, 153, 0) 100%
+    );
+}
+
+td.diff.high {
+    background: radial-gradient(
+        ellipse at center,
+        rgba(255, 153, 153, 1) 0%, 
+        rgba(255, 153, 153, 0.25) 50%, 
+        rgba(255, 153, 153, 0) 100%
+    );
+}
+
+td.diff::after {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    font-size: 1.2em;
+    color: #333;
+    content: ''; /* Platzhalter für Symbole */
+}
+
+td.flex-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+td.flex-container .button.toggle-button {
+    margin: 0 auto;
+}
+
+td.flex-container> :not(.button.toggle-button) {
+    flex-grow: 0;
+}
+
+td> :not(.button.toggle-button) {
+    flex-grow: 0;
 }
 
 /* Responsive adjustments */
@@ -52,7 +185,17 @@ th {
         margin: 8px 10px;
     }
 
-    th, td {
+    .node-header {
+        gap: 10px;
+        /* Adjust gap for smaller screens */
+    }
+
+    .node-header span:not(.status-circle) {
+        font-size: 0.9em;
+    }
+
+    th,
+    td {
         font-size: 0.75em;
         padding: 6px;
     }
@@ -63,4 +206,13 @@ th {
         flex-direction: column;
         align-items: flex-start;
     }
+
+    .node-header span:not(.status-circle) {
+        margin-bottom: 5px;
+        /* Add space between wrapped items */
+    }
+
+    table {
+        font-size: 0.8em;
+    }
 }
diff --git a/apps/rest-api-app/src/main/resources/node-monitor/styles/settingsView.css b/apps/rest-api-app/src/main/resources/node-monitor/styles/settingsView.css
index e57a598bfb..ef746c05e8 100644
--- a/apps/rest-api-app/src/main/resources/node-monitor/styles/settingsView.css
+++ b/apps/rest-api-app/src/main/resources/node-monitor/styles/settingsView.css
@@ -1,4 +1,20 @@
 /* styles/settingsView.css */
+
+/* Specific styling for hamburger menu */
+.hamburger-menu {
+    font-size: 24px;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    user-select: none;
+    color: #333;
+}
+
+.hamburger-menu:hover {
+    color: #555;
+}
+
 /* Settings panel container */
 #settingsPanel {
     padding: 15px;
@@ -35,17 +51,75 @@
     box-sizing: border-box;
 }
 
-/* Specific styling for hamburger menu */
-.hamburger-menu {
-    font-size: 24px;
-    cursor: pointer;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    user-select: none;
+#thresholdSettings {
+    margin-top: 10px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.threshold-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+}
+
+.threshold-text {
+    text-align: left;
+    font-size: 1em;
     color: #333;
 }
 
-.hamburger-menu:hover {
+.threshold-text h4 {
+    font-size: 1.2em;
+    margin: 0 0 5px 0;
+    color: #333;
+}
+
+.threshold-text p {
+    margin: 0;
+    font-size: 1em;
     color: #555;
+    line-height: 1.4;
+}
+
+.threshold-grid {
+    display: flex;
+    gap: 10px;
 }
+
+.threshold-grid div {
+    text-align: center;
+}
+
+.threshold-grid label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 3px;
+    font-size: 0.8em;
+}
+
+.threshold-grid input {
+    width: 45px;
+    padding: 3px;
+    font-size: 0.9em;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+@media (max-width: 768px) {
+    .threshold-container {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .threshold-grid {
+        justify-content: flex-start;
+        gap: 10px;
+    }
+}
\ No newline at end of file

From 00a2c252fe850d9696ed204b8bf997dddb210f4c Mon Sep 17 00:00:00 2001
From: bsc7 <118875465+bsc7@users.noreply.github.com>
Date: Tue, 19 Nov 2024 10:59:50 +0100
Subject: [PATCH 2/3] proto-plugin removed from gradle, AddressDetails moved

---
 apps/rest-api-app/build.gradle.kts            |  1 -
 .../{proto => report}/AddressDetails.java     | 34 ++-----------------
 .../bisq/rest_api/report/ReportRestApi.java   |  9 +++--
 .../src/main/proto/rest_api.proto             | 10 ------
 4 files changed, 6 insertions(+), 48 deletions(-)
 rename apps/rest-api-app/src/main/java/bisq/rest_api/{proto => report}/AddressDetails.java (50%)
 delete mode 100644 apps/rest-api-app/src/main/proto/rest_api.proto

diff --git a/apps/rest-api-app/build.gradle.kts b/apps/rest-api-app/build.gradle.kts
index 778519bd16..93dbe2907d 100644
--- a/apps/rest-api-app/build.gradle.kts
+++ b/apps/rest-api-app/build.gradle.kts
@@ -1,6 +1,5 @@
 plugins {
     id("bisq.java-library")
-    id("bisq.protobuf")
     application
 }
 
diff --git a/apps/rest-api-app/src/main/java/bisq/rest_api/proto/AddressDetails.java b/apps/rest-api-app/src/main/java/bisq/rest_api/report/AddressDetails.java
similarity index 50%
rename from apps/rest-api-app/src/main/java/bisq/rest_api/proto/AddressDetails.java
rename to apps/rest-api-app/src/main/java/bisq/rest_api/report/AddressDetails.java
index d4819884ef..237f92e835 100644
--- a/apps/rest-api-app/src/main/java/bisq/rest_api/proto/AddressDetails.java
+++ b/apps/rest-api-app/src/main/java/bisq/rest_api/report/AddressDetails.java
@@ -15,24 +15,20 @@
  * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
  */
 
-package bisq.rest_api.proto;
+package bisq.rest_api.report;
 
-import bisq.common.proto.NetworkProto;
-import bisq.common.proto.Proto;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.EqualsAndHashCode;
 import lombok.Getter;
 import lombok.ToString;
 import lombok.extern.slf4j.Slf4j;
 
-import static com.google.common.base.Preconditions.checkArgument;
-
 @Slf4j
 @Getter
 @EqualsAndHashCode
 @ToString
 @Schema(name = "AddressDetails")
-public final class AddressDetails implements NetworkProto {
+public final class AddressDetails {
     private final String address;
     private final String bondedRoleType;
     private final String nickNameOrBondUserName;
@@ -42,30 +38,4 @@ public AddressDetails(String address, String bondedRoleType, String nickNameOrBo
         this.bondedRoleType = bondedRoleType;
         this.nickNameOrBondUserName = nickNameOrBondUserName;
     }
-
-    @Override
-    public void verify() {
-        checkArgument(address != null && address.length() > 0);
-        checkArgument(bondedRoleType != null && bondedRoleType.length() > 0);
-        checkArgument(nickNameOrBondUserName != null && nickNameOrBondUserName.length() > 0);
-    }
-
-    @Override
-    public bisq.rest_api.protobuf.AddressDetails toProto(boolean serializeForHash) {
-        return resolveProto(serializeForHash);
-    }
-
-    @Override
-    public bisq.rest_api.protobuf.AddressDetails.Builder getBuilder(boolean serializeForHash) {
-        return bisq.rest_api.protobuf.AddressDetails.newBuilder()
-                .setAddress(this.address)
-                .setBondedRoleType(this.bondedRoleType)
-                .setNickNameOrBondUserName(this.nickNameOrBondUserName);
-    }
-
-    public static AddressDetails fromProto(bisq.rest_api.protobuf.AddressDetails proto) {
-        return new AddressDetails(proto.getAddress(),
-                proto.getBondedRoleType(),
-                proto.getNickNameOrBondUserName());
-    }
 }
diff --git a/apps/rest-api-app/src/main/java/bisq/rest_api/report/ReportRestApi.java b/apps/rest-api-app/src/main/java/bisq/rest_api/report/ReportRestApi.java
index fbfc49214a..bc0030c511 100644
--- a/apps/rest-api-app/src/main/java/bisq/rest_api/report/ReportRestApi.java
+++ b/apps/rest-api-app/src/main/java/bisq/rest_api/report/ReportRestApi.java
@@ -154,8 +154,8 @@ public List<Report> getReports(
     @Path("/addresses/details")
     @Operation(description = "Get address info for a set of host:port addresses")
     @ApiResponse(responseCode = "200", description = "The set of address info (host, role type, nickname or bond name)",
-            content = @Content(mediaType = MediaType.APPLICATION_JSON, schema = @Schema(implementation = bisq.rest_api.proto.AddressDetails[].class)))
-    public List<bisq.rest_api.proto.AddressDetails> getAddressDetailsDto(
+            content = @Content(mediaType = MediaType.APPLICATION_JSON, schema = @Schema(implementation = AddressDetails[].class)))
+    public List<AddressDetails> getAddressDetailsDto(
             @QueryParam("addresses") String addresses) {  // Comma-separated list
         try {
             log.info("Received request to get address infos for: {}", addresses);
@@ -166,13 +166,13 @@ public List<bisq.rest_api.proto.AddressDetails> getAddressDetailsDto(
         }
     }
 
-    public List<bisq.rest_api.proto.AddressDetails> getAddressDetailsProtobufs(List<String> addressList) {
+    public List<AddressDetails> getAddressDetailsProtobufs(List<String> addressList) {
         Set<BondedRole> bondedRoles = bondedRolesService.getAuthorizedBondedRolesService().getBondedRoles();
         return bondedRoles.stream()
                 .flatMap(bondedRole -> bondedRole.getAuthorizedBondedRole().getAddressByTransportTypeMap()
                         .map(addressMap -> addressMap.entrySet().stream()
                                 .filter(entry -> addressList.contains(entry.getValue().toString())) // Nutze addressList
-                                .map(entry -> new bisq.rest_api.proto.AddressDetails(
+                                .map(entry -> new AddressDetails(
                                         entry.getValue().toString(),
                                         bondedRole.getAuthorizedBondedRole().getBondedRoleType().name(),
                                         userService.getUserProfileService()
@@ -182,6 +182,5 @@ public List<bisq.rest_api.proto.AddressDetails> getAddressDetailsProtobufs(List<
                                 ))
                         ).orElse(Stream.empty()))
                 .collect(Collectors.toList());
-
     }
 }
diff --git a/apps/rest-api-app/src/main/proto/rest_api.proto b/apps/rest-api-app/src/main/proto/rest_api.proto
deleted file mode 100644
index d8e613da70..0000000000
--- a/apps/rest-api-app/src/main/proto/rest_api.proto
+++ /dev/null
@@ -1,10 +0,0 @@
-syntax = "proto3";
-package rest_api;
-option java_package = "bisq.rest_api.protobuf";
-option java_multiple_files = true;
-
-message AddressDetails {
-  string address = 1;
-  string bondedRoleType = 2;
-  string nickNameOrBondUserName = 3;
-}

From e069f38b1321d38d659b5beccccc05af6a742d5e Mon Sep 17 00:00:00 2001
From: bsc7 <118875465+bsc7@users.noreply.github.com>
Date: Tue, 19 Nov 2024 11:56:49 +0100
Subject: [PATCH 3/3] Fix: Init threshold settings on first load

---
 .../resources/node-monitor/js/controllers/AppController.js  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/AppController.js b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/AppController.js
index 92598c9fe2..20a42b5973 100644
--- a/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/AppController.js
+++ b/apps/rest-api-app/src/main/resources/node-monitor/js/controllers/AppController.js
@@ -39,6 +39,7 @@ export class AppController {
 
     async initApp() {
         try {
+            this.#initSettings();
             await this.#updateAddressesAndLoadAllReports();
             this.#setInitialUIState();
             await this.#loadAddressDetails();
@@ -62,6 +63,11 @@ export class AppController {
     // PRIVATE METHODS
     //////////////////////
 
+    #initSettings() {
+        const savedThresholds = this.storageService.getDeviationThresholds() || Constants.DEFAULT_DEVIATION_THRESHOLDS;
+        Constants.initialize({ DEVIATION_THRESHOLDS: savedThresholds });
+    }
+
     #setInitialUIState() {
         const hasAddresses = this.addressList && this.addressList.length > 0;
         this.reportController.updateButtons();