ui-frontend

About This Project

This repository contains code relevant for the frontend component required in the Control Plane UI (MCP UI), which is part of the @openmcp-project, more info here.

The Control Plane UI empowers endusers to create and manage Projects, Workspaces and ControlPlanes, without installing any additional tools.

It allows users to observe and edit managed resources of the Onboarding API, as well as the control planes it creates.

Our goal is to provide quick access, simple overview, and encourage users to create cloud landscapes using Kubernetes Ressource Model.

Getting Started

Development Setup

Install Dependencies

npm i

Configure Frontend

• Copy frontend-config.json to public/frontend-config.json and adapt the backendUrl according to your setup (see section Dynamic Frontend Config).
• Copy .env.template to .env and fill in the missing values.

Run the Application

npm run dev

The UI will be served on http://localhost:5173.

Headlamp (local dev cluster)

The UI embeds Headlamp to visualize any Kubernetes resource running inside of ControlPlane.

For local development a kind cluster is used.

Prerequisites: kind, kubectl, helm, task (Taskfile)

One-time setup — creates the kind cluster, installs Headlamp with the latest plugin releases from ArtifactHub, and port-forwards to http://localhost:8090:

task headlamp:dev

Then set HEADLAMP_UPSTREAM_URL=http://localhost:8090 in your .env and start the app:

npm run dev

Develop a plugin — if you have crossplane-headlamp-plugin or kiosk-headlamp-plugin checked out as in the same dicrectory next to this repo, build and hot-sync them into the running pod (no restart needed):

task headlamp:update

Then hard-refresh the browser (Cmd+Shift+R).

Safari Support

Note: The frontend is currently incompatible with Safari when running locally on localhost.

To enable local development with Safari, follow these steps on your local machine:

1. Update Cookie Settings:
   In server/encrypted-session.js, set the secure property to false in both occurrences.

2. Disable Helmet Registration:
   In server.js, comment out or remove the registration of helmet.

Build & Production

Build the Application

npm run build

Serve the Production Build Locally

npm run preview

Production Deployment

Use the docker image which uses nginx for best performance and small bundle size.

docker build -t my-label .

Coming Soon: Deploy on Open Control Plane {#deploy-platform-service}

We plan to ship this component as a PlatformService of Open Control Plane.

Dynamic FrontendConfig

The frontend loads a frontend-config.json file from the root folder containing dynamic config like the backend url. For development, the file frontend-config.json can be copied to public/frontend-config.json. For production, NGINX will serve the content from the environment variable BACKEND_CONFIG.

An example docker run command would be

docker run -p 5001:80 -e BACKEND_CONFIG="$(cat frontend-config.json)"  -t ui-test

Generating GraphQL Types

GraphQL types can be generated from the remote schema using the generate-graphql-types script. Pass your access token as a positional argument directly after the script name:

npm run generate-graphql-types -- myaccesstokenhere

To run in watch mode (re-generates on file changes):

npm run generate-graphql-types:watch -- myaccesstokenhere

The token is automatically prefixed with Bearer and passed as the Authorization header when fetching the remote GraphQL schema.

Which access token

The schema is fetched from the kubernetes-graphql-gateway. Getting the required access token depends on how you deploy your platform. For OIDC setups, use kubelogin (kubectl oidc-login) to obtain the token — this is an example of an IDP-centered setup. More guidance coming soon.

kubectl oidc-login get-token 
  --oidc-issuer-url=<according to your setup>
  --oidc-client-id=<according to your setup> --oidc-extra-scope=offline_access 
  --oidc-extra-scope=email 
  --oidc-extra-scope=profile 
  --oidc-use-pkce 
  --grant-type=auto | jq .status.token -r

Support & Contributing

This project is open to feature requests/suggestions, bug reports etc. via GitHub issues. Contribution and feedback are encouraged and always welcome. For more information about how to contribute, the project structure, as well as additional contribution information, see our Contribution Guidelines.

Security & Disclosure

If you find any bug that may be a security problem, please follow our instructions at in our security policy on how to report it. Please do not create GitHub issues for security-related doubts or problems.

Code of Conduct

We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone. By participating in this project, you agree to abide by its Code of Conduct at all times.

Licensing

Copyright OpenControlPlane contributors. Please see our LICENSE for copyright and license information. Detailed information including third-party components and their licensing/copyright information is available via the REUSE tool.

---

OpenControlPlane is part of ApeiroRA, an EU Important Project of Common European Interest (IPCEI-CIS).

Copyright Linux Foundation Europe. For web site terms of use, trademark policy and other project policies please see https://linuxfoundation.eu/en/policies.