XDR UI

Every extension point covered so far works behind the platform. A connect profile manages settings, a query command processes data, and the result appears through the query screen or a dashboard widget.

XDR UI is the extension point where the app owns the whole screen. The app registers its own item in the Logpresso Sonar web console menu, and when a user selects that menu, the screen the app built appears inside the console.

You use XDR UI for two purposes.

Bringing an integrated product's management console into Logpresso Sonar. Security operators work with several products at once — firewalls, EDR, threat intelligence — and move between a different console for each one. Even after Logpresso collects the logs, the actual investigation and response still happen in each product's own console. When an app reimplements the target product's screens inside Logpresso, operators can review detections, look up details, and complete the response without leaving Logpresso. Managing several products from a single platform is the goal of XDR, and XDR UI covers that final step.

Extending Logpresso's own capabilities. The app provides a workflow that Logpresso Sonar's built-in screens cannot express well. A dedicated management screen for data the app added, or an investigation screen that moves through several stages, both fall into this category.

Neither case is solved by a widget or a dashboard. Widgets and dashboards place data into a frame Logpresso Sonar defines, so the shapes they can express are fixed. With XDR UI the app composes the entire screen, so it can reproduce navigation between a list and its details, actions driven by item selection, and the target product's own information structure.

How XDR UI works

The app registers a menu in its manifest file and sets the menu route in the form /app-loader/{app_code}/{internal path}. When a user selects the menu, the app loader in the web console opens the screen and places a single iframe pointing at /app/{app_code}/{internal path}. For requests to that address, the platform returns the static files from the WEB-INF directory embedded in the app bundle.

menu click
  → /app-loader/sample/subnet-groups        (web console route, handled by the app loader)
    → iframe src = /app/sample/subnet-groups
      → returns WEB-INF/index.html from the bundle
        → loads WEB-INF/assets/index-*.js, index-*.css

The important point in this structure is that the app does not write a servlet to serve its static files. The app's job ends at placing its build output in the bundle's WEB-INF directory; the platform handles the rest.

Because the screen is isolated in an iframe, the app can use a different framework or a different version than the web console, and the app's styles do not affect the console. In exchange, the web console owns the address bar and the browser history, so the app and the console exchange navigation through a defined message contract. Screen routing describes that contract.

Development stack

XDR UI assumes the stack below. An app can choose a different stack, but the examples in this guide and the design-system assets are written for these.

You do not have to install Node.js and npm yourself. The Maven build downloads the versions it needs. See Prerequisites for details.

How to read this chapter

Developing an XDR UI means attaching a screen to an app, and you go through the following steps.

1. Developing with an AI agent — the reference material and rules you need when you delegate screen development to an AI agent. Even if you develop it yourself, this tells you where the design system is and what to comply with.
2. Creating a UI project — the minimum set of files needed to add a UI to an app.
3. Building and installing a UI — the build process, how to install, and how to iterate on a screen quickly.
4. App manifest and menus — registering the app screen in the web console menu.
5. Screen routing — the contract the web console and the app use to exchange navigation.
6. REST API plugin — how a screen reads data from the server.
7. Following the design system — the specifications that make an app screen look like every other screen in the product.

The next section explains how to develop an XDR UI with an AI agent.