The web interface for Composer!
Making changes to Cockpit Composer
Here's where to get the code:
$ git clone https://github.com/osbuild/cockpit-composer.git $ cd cockpit-composer/
The remainder of the commands assume you're in the top level of the Cockpit Composer git repository checkout.
Getting the development dependencies
On Fedora or Red Hat Enterprise Linux:
- First install Cockpit on your local machine as described in: https://cockpit-project.org/running.html.
- Next install and start osbuild-composer:
$ sudo yum install osbuild-composer $ sudo systemctl start osbuild-composer
- Cockpit Composer uses Node.js during development. Node.js is not used at runtime. To make changes on Cockpit you'll want to install Node.js, NPM.
$ sudo yum install nodejs npm
In addition, for testing, the following dependencies are required:
$ sudo dnf install curl expect xz rpm-build chromium-headless \ libvirt-daemon-kvm libvirt-client python3-libvirt
to build everything. You can only run
make from the top-level and it will always rebuild the Cockpit Composer.
Cockpit Composer is built using React. For inspecting the React component hierarchy, including component props and state, you can run
$ npm run build:debug
Running integration test
Run test without visually seeing what the browser is doing:
$ make check
In the case you wish to visually see what the browser is doing you will want to run:
$ TEST_SHOW_BROWSER=true make check
$ make debug-check
By default the cockpit-composer will be installed into
$TEST_OSin Makefile and test will be run on Chromium. To run it on Firefox, a environment variable
TEST_BROWSER=firefox needs to be added, like:
$ TEST_BROWSER=firefox make check
To test cockpit-composer in different OS, set the
$TEST_OS environment variable, for example:
$ TEST_OS=fedora-32 make check
Cockpit Composer uses ESLint to automatically check
The linter is executed within every build as a webpack preloader.
For developer convenience, the ESLint can be started explicitly by:
$ npm run eslint
Rules configuration can be found in the
Working on your local machine
$ mkdir -p ~/.local/share/cockpit $ ln -s $(pwd)/public/dist ~/.local/share/cockpit/composer
Now you can log into Cockpit Composer on your local Linux machine at the following address. Use the same user and password that you used to log into your Linux desktop.
After every change to your sources, run
make to update all the webpacks, and reload cockpit in your browser.
To keep Cockpit Composer working with Cockpit API all code should follow the following rules.
- All requests to the API should be made using
utils.apiFetch. Any non API
fetchrequests must use
credentials: 'same-origin'so that cookies are included with those ajax requests.
- Use hashes for navigation within the SPA so that cockpit can keep the top level location display up to date.
Package as an RPM/SRPM
This project can be packaged as either a noarch rpm or an srpm.
$ make rpm # Or, `make srpm`
For a general guide on how to write translatable strings, see weldr.io
There are a lot of parts involved in translating a string. Here's an overview of the process, from start to finish:
Step 1. During development, the developer adds a translatable string. See weldr.io
for details on how to indicate that the string is translatable, and what the string may contain. In general, the string
is added using react-intl
MessageDescriptors, but without explicit
Debugging generated messages
To see if or how messages are generated,
make po/cockpit-composer.pot can be run to generate
which is the file, that is uploaded for translators later on.
As part of this process, babel-plugin-react-intl-auto
id attributes to all of the messages, and babel-plugin-react-intl
will extract all of the messages to JSON files, written to
./build/messages. react-intl-po is
used to collect the JSON files into a gettext-style POT file (po/cockpit-composer.pot).
Step 2. With
make upload-pot the PO template gets uploaded to the Weblate translation platform
where everybody can contribute translations to various languages. This is part of bots/po-refresh
which is invoked regularly by bots/po-trigger.
Step 3. Translators provide translations on Weblate.
Step 4. With
make download-po Weblate's translations are downloaded to
po/XX.po. This is also done by
Step 5. The user runs cockpit-composer. Based on the user's browser configuration, cockpit-composer determines the user's preferred
language, and if translations are available, these translations are provided to react-intl's
then displays translated strings where possible.
Making A New Release Of cockpit-composer
When the project is ready for a new release, do the following:
- Tag the release with
make NEWTAG=X.Y.Z tag, bumping .Z to the next version unless there are major changes.
- Edit the commit list to reflect the changes that will be visible to users (it shows up on the GitHub Releases page)
- Sign the tag with your GPG key
(an editor should open automatically, and gpg is required to be setup in order to sign the tag).
Finally, import the new
.srpm into the appropriate RHEL release.
It is important to keep your NPM modules up to date, to keep up with security updates and bug fixes. This is done with the npm-update bot script which is run daily or upon manual request through the npm-update.yml GitHub action.
Similarly, translations are refreshed every Tuesday evening (or manually) through the po-refresh.yml action.
This source code is licensed under the MIT license found in the