ilum/ui repository overview

⁠Ilum UI

⁠Overview

ilum/ui is the web-based management interface for the Ilum platform, providing a unified dashboard for data engineering teams. Built with React 18 and TypeScript, it offers comprehensive tools for Spark job orchestration, SQL querying, data lineage visualization, and integration with the broader data ecosystem.

• Modern React SPA — React 18.2 with TypeScript, styled-components, and Redux Toolkit
• Data Exploration — interactive SQL interface, table catalog, file browser, and data lineage
• Workload Management — Kubernetes cluster control, Spark job monitoring, and scheduling
• Tool Integrations — seamless access to Airflow, MLflow, Jupyter, Grafana, Superset, and more
• OAuth2/OIDC Authentication — enterprise-grade security with role-based access control

⁠TL;DR / Quick Start

# Run Il um UI (connects to ilum-core backend)
docker run -d \
  --name ilum-ui \
  -p 3000:8080 \
  -e REACT_APP_ILUM_CORE_URL=http://ilum-core:9000 \
  ilum/ui:<version>

Access the UI at http://localhost:3000.

Note: For production deployments, use the official Ilum Helm Chart⁠.

⁠Supported Tags

• <version>: Ilum UI 6.2.0 + React 18.2 + Nginx 1.29

⁠Environment Variables

⁠Required for Production

⁠Optional Configuration

All environment variables follow the REACT_APP_* prefix pattern and are injected at runtime via runtime-env-cra.

TIP: The application uses runtime environment injection, allowing configuration changes without rebuilding the image.

⁠Data Persistence (Volumes)

Ilum UI is stateless. All data is stored in the backend (ilum-core) and connected databases.

NOTE: No persistent volumes are required for the UI container.

⁠Network Configuration

TIP: Map to port 3000 for local development consistency: -p 3000:8080.

⁠Security

⁠Non-root Architecture

The image runs as user nginx (UID 101, non-root). The application is served by Nginx in unprivileged mode.

⁠Secret Hygiene

CAUTION: Never pass sensitive credentials directly in environment variables!

Recommended methods:

1. Kubernetes Secrets — mount OAuth2 credentials and API keys as secrets.
2. External Secret Operators — sync with Vault or cloud secret managers.

⁠Content Security Policy

The application implements CSP headers via Nginx configuration to protect against XSS and injection attacks.

⁠Vulnerability Scanning

Before production deployment, scan the image:

# Trivy
trivy image ilum/ui:<version>

⁠Building the Image

Run commands from the root of the ilum-frontend repository:

# Build multi-arch image
docker buildx build \
  --platform linux/amd64,linux/arm64 \
  -t ilum/ui:<version> \
  -f docker/Dockerfile \
  --push .

⁠Image Verification

⁠Layer Analysis (Dive)

dive ilum/ui:<version>

⁠Software Bill of Materials (SBOM)

# Syft
syft ilum/ui:<version> -o spdx-json > sbom.json

⁠Image Contents — Details

⁠Dockerfile Components

• Build Stage 1: Node.js 22.16.0 — dependency installation
• Build Stage 2: Node.js 22.16.0-slim — application build with Rsbuild
• Runtime: Nginx 1.29 Alpine (unprivileged) — static file serving

⁠Frontend Stack

• Framework: React 18.2.0 with TypeScript 5.9
• Build Tool: Rsbuild 1.6 (modern Rspack-based bundler)
• State Management: Redux Toolkit 1.9
• Styling: Styled Components 6.1
• Routing: React Router DOM 6.21
• Authentication: OIDC Client TS 3.1

⁠Key Features

• Code Editors: CodeMirror 6 with SQL, JavaScript, Markdown support
• Data Visualization: ECharts 5.6, D3.js 7.8, React Flow 12
• SQL Tools: SQL Parser, SQL Formatter
• AI Integration: Vercel AI SDK for LLM-powered features

⁠Support and Feedback

• Issues: Bug Tracker⁠
• Documentation: Ilum Docs⁠
• Slack: Join our Community⁠