Home

Frontends

Insights uses a micro-frontend architecture, where each application has its own frontend bundle. Frontend bundles from each application are created as a federated module (using Module Federation, a Webpack concept). Insights frontend bundles use the PatternFly design system and React.

Builds

Frontend assets are built into a scratch (or ubi-micro, the micro Universal Base Image) containers utilizing common build tools from insights-frontend-builder-common. The build script uses the build tool fec from the Insights frontend-components to build a federated module.

Note

The insights-frontend-builder-common is usually added to individual frontend Git repositories as a Git submodule at the path ./build-tools.

The assets are available inside the frontend containers at the path:

/srv/dist
Tip

OCI artifacts can be used instead of scratch containers. These can be managed by the oras tool.

Distribution and Serving

The frontend assets are distributed as content-only containers. Assets from these containers are copied to disk by Foreman Installer to the path:

/var/lib/foreman/public/assets/apps/<app_name>

The frontend artifacts on a Foreman instance are served as static files by Apache httpd at the following location.

/assets/apps/<app_name>

Context and Federation

The integration with the site is facilitated by Scalprum, a Module Federation-based framework that enables React applications to dynamically compose remote components and share hooks across a scalable, type-safe micro-frontend architecture.

The configuration for a federated module is read from the following URL path:

/assets/apps/<app_name>/fed-mods.json

Foreman, through the RH Cloud plugin, creates React entrypoint components for each subpage that wrap a federated Insights component. It provides a ScalprumContext that includes the essential information and APIs for Insights frontends.

The ScalprumContext provides these Chrome APIs:

Note

The Chrome APIs can be accessed via the useChrome hook from frontend-components.

import useChrome from '@redhat-cloud-services/frontend-components/useChrome';

See ScalprumModule/ScalprumContext.js and the entrypoints at https://github.com/theforeman/foreman_rh_cloud/tree/develop/webpack.

CSRF Protection

The Cross-Site Request Forgery token (CSRF) is required for every modifying request (e.g. PATCH, POST, PUT, DELETE). The token is generated by the Foreman backend and provided to the browser.

Frontend components that perform modifying requests must pass the CSRF token value in the X-CSRF-Token header. The token value can be read by the frontend from the document meta tag:

document.meta[name="csrf-token"]