repository·master·Indexed 25 days ago
https://github.com/jenkinsci/blueocean-pluginA Jenkins plugin providing the Blue Ocean user interface and a specialized REST API for programmatic access to pipelines, runs, organizations, and SCM resources. Includes documentation for setting up and running acceptance tests (ATH) using Selenium, Guice DI, and WebDriverMixin, as well as guides for developing the Dashboard plugin and @jenkins-cd/blueocean-core-js.
The blueocean-i18n package provides the Internationalization API for Blue Ocean. For detailed implementation details and usage, refer to the official documentation files within the repository:
../docu/I18N.md../js-extensions/README.mdWhen adding features to JDL that need to be tested within Blue Ocean, use slink to perform local installs. This avoids the need to constantly publish to NPM or manually modify package.json files.
Follow these steps to set up a development environment where JDL changes are reflected in Blue Ocean modules:
Install slink globally:
npm install -g slink
Locally install JDL into Blue Ocean modules:
Navigate to your Blue Ocean module directory (e.g., blueocean-web) and run npm install pointing to your local JDL checkout. Do not use the --save flag; this ensures the change is temporary and can be undone by running a standard npm install or mvn clean install later.
Watch for JDL changes:
In the jenkins-design-language directory, run gulp watch.
Slink the JDL directory in each module:
In each Blue Ocean module directory (e.g., blueocean-web, blueocean-dashboard), run slink pointing to your local JDL checkout. This is necessary because blueocean-web exports shared instances of modules via js-modules, and other plugins must watch for changes in the linked source.
Watch for Blue Ocean changes and rebundle:
In the blueocean-web directory, run gulp bundle:watch. This triggers a cascading rebundle: JDL changes trigger a slink update, which in turn triggers the blueocean-web rebundle.
You can develop GUI components in isolation without a running Jenkins instance using React Storybook.
Start the Storybook server:
npm run storybookThe server will start on port 9001 and refresh automatically on changes.
Writing Stories: Create a story file (e.g., src/main/js/components/stories/button.js) to define different views of your component using storiesOf and action from @kadira/storybook.
Registering Stories: You must register your new story files in the Storybook configuration. You can either add them to .storybook/config.js or, preferably, add them to the central index file at src/main/js/components/stories/index.js.
npm run storybookTo set up the development environment for the Jenkins Design Language (JDL) reusable React components, follow these steps:
npm install.npm run gulp.npm run build-storybook.npm run site-server to view the components.npm install
npm run gulp
npm run build-storybook
npm run site-serverTo start the BlueOcean Aggregator for development or testing, ensure you have first run mvn clean install from the parent directory. Then, execute the following command in the aggregator directory:
mvn hpi:runOnce running, you can access the following interfaces:
http://localhost:8080/jenkins/bluehttp://localhost:8080/jenkinsmvn hpi:runTo develop JDL components in isolation without the overhead of Jenkins plugins, use React Storybook. This starts a local webpack server at http://localhost:9001/ that watches for JavaScript changes. Stories are located in /src/js/stories/.
Note: Storybook does not automatically watch and rebuild CSS from .less files. If you modify styles, you must run the watch-styles Gulp task separately.
Use the provided shell script to execute tests. This is primarily intended for CI environments.
Starts the Selenium Docker container and runs all Java ATH tests.
./run.shIf Docker fails to start the Bitbucket test, use the -ld flag:
./run.sh -ldTo run tests against a local development instance (e.g., using a local ChromeDriver), create a properties file at ~/.blueocean-ath-config with the following keys:
| Key | Description |
|---|---|
webDriverType | e.g., chrome |
webDriverUrl | URL of the driver (e.g., http://localhost:9515) |
webDriverBrowserSize | Optional: e.g., 1024x768 |
jenkinsUrl | Optional: URL of the Jenkins instance |
adminUsername | Optional: Admin username |
adminPassword | Optional: Admin password |
Since Java properties files in Jenkins core support only iso-8859-1, special characters (like ñ) must be converted to their Unicode escape sequences (e.g., \u00F1). Use the native2ascii tool provided in the JDK to ensure compatibility.
native2ascii Messages_fr.properties Messages_fr.properties.new
mv Messages_fr.properties.new Messages_fr.properties@jenkins-cd/js-extensions module is published via npm. It allows plugins (both within the BlueOcean project and external ones) to define extension points and provide UI implementations for the Jenkins BlueOcean interface.The project uses ESLint with React linting options. Use the following commands to maintain code quality:
npm run lint: Runs the linting process.npm run lint:fix: Attempts to automatically fix linting offenses.gulp lint:watch --continueOnLint: Runs linting in watch mode, providing rapid feedback as you save files.npm run lint
npm run lint:fix
gulp lint:watch --continueOnLint