DiracX-Web

Overview

diracx-web is a web application that provides a user interface to interact with the DiracX service and is part of the DIRAC ecosystem.

This repository is organized as a monorepo, with the following key packages:

• diracx-web
• diracx-web-components
• extensions

Packages

• DiracX-Web: Vanilla Dirac web interface based on Next.js. Leverages components from DiracX-Web-Components to provide core functionalities.

• DiracX-Web-Components: A library of reusable React components designed for integration within the DiracX-Web package and to facilitate the creation of custom DiracX web extensions.

• Extensions: An illustrative example of a web extension demonstrating how to extend the functionality of DiracX-Web using the components from the DiracX-Web-Components package.

Project Management

• Lerna: Utilized for efficient monorepo management. Useful to run scripts or commands across all packages while handling errors correctly.
• npm: Used for dependency management.
• Release-Please: Automated release management for the project.

The dependency management is further detailed in the Package Management documentation.

For more detailed and interactive documentation, visit our Storybook instance.

Getting started

Requirements: docker, internet

This will allow you to run a demo setup:

# Clone the diracx-chart repository
git clone git@github.com:DIRACGrid/diracx-charts.git

# Run the demo
diracx-charts/run_demo.sh

You can also start the demo setup in development mode - code changes will be reflected in the demo in real time:

# Clone the diracx-web repository
git clone git@github.com:DIRACGrid/diracx-web.git

# Clone the diracx-chart repository
git clone git@github.com:DIRACGrid/diracx-charts.git

# Run the demo
diracx-charts/run_demo.sh ./diracx-web

Contributing

See the Contributing guidelines

Testing

Unit tests can be started with:

npm test

End-to-end tests are launched through cypress such as:

# diracx-charts/run_demo.sh is running
npx cypress open --config baseUrl=$DIRACX_URL

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.