No description, website, or topics provided.
Clone or download
martinpitt and larskarlitski test: Support Cockpit test scenario
cockpit-project/cockpit#10194 introduces test
scenarios in Cockpit CI, and defines two scenarios "chrome" and
"firefox". These directly map to the Makefile's `$BROWSER` variable.
Latest commit e721fe6 Oct 1, 2018
Failed to load latest commit information.
.copr Add a cockpit-composer case for copr make srpm Jun 6, 2018
.github Add issues template to hel us report bugs better Mar 1, 2017
components Remove inert 'Architecture' field in 'Create Image' dialog (#388) Oct 19, 2018
core Add support for Modules during Add/Remove Oct 9, 2018
data Update Discard Changes to delete workspace Sep 26, 2018
docs Replace "Save" with "Commit" almost everywhere Feb 26, 2018
icons Replacing previous UI with new UI built using React Nov 8, 2016
pages Update Discard Changes to delete workspace Sep 26, 2018
po po: Update from Fedora Zanata Oct 17, 2018
public Use upstream patternfly-react's Tab component Aug 31, 2018
test test: Support Cockpit test scenario Oct 19, 2018
utils translations: Fail when zanata-js is not installed Sep 4, 2018
.gitignore Two improvements: Oct 17, 2018
.travis.yml Cockpit CI Integration Sep 26, 2018
Dockerfile.buildrpm Revert "Revert "Add python and gcc to the Dockerfiles."" Jul 30, 2018
LICENSE.txt Replacing previous UI with new UI built using React Nov 8, 2016
Makefile Makefile: Simplify variable defaults Oct 19, 2018 README: We're running tests on Cockpit's CI now Sep 27, 2018 Add a cockpit-composer-* target May 23, 2018
database.rules.json Replacing previous UI with new UI built using React Nov 8, 2016
firebase.json Replacing previous UI with new UI built using React Nov 8, 2016 bdcs-0.5.0 placed this command into a subdirectory May 7, 2018
main.js Create cockpit translation modules. Jul 26, 2018
package.json translations: remove test target Sep 4, 2018
routes.json Replace "recipe" with "blueprint" everywhere Feb 26, 2018 Make the generated version number less awful Jun 6, 2018
run.js translations: move po files and scripts to po/ Sep 4, 2018
webpack.config.js Use upstream patternfly-react's Tab component Aug 31, 2018 Generate a more koji-friendly SRPM May 21, 2018
zanata.xml Add scripts for interacting with Zanata. Jul 26, 2018

Welder Web

Build Status codecov

The web interface for Welder!

Getting Started

Step 1. Make sure that you have Node.js v6.9.1 or newer installed on your machine. For example:

nvm install 6.9.1

Or if it's installed, make sure you're using it:

nvm use 6.9.1

Step 2. Clone this repository and install its dependencies:

$ git clone -o upstream -b master --single-branch
$ cd welder-web/
$ npm install                   # Install project dependencies listed in package.json

Step 3. Compile and launch your app by running:

$ node run build
$ node run                      # Same as `npm start` or `node run start`

You can also test your app in release (production) mode by running node run start --release or with HMR and React Hot Loader disabled by running node run start --no-hmr. The app should become available at http://localhost:3000/.

You can also enable code instrumentation with istanbul by specifying node run build --with-coverage or node run --with-coverage. This is needed if you want to collect code coverage from end-to-end tests. Don't use --with-coverage when running the unit tests. jest provides its own instrumentation and it will break if we do double instrumentation. Disabled by default!

How to Test

Unit Test

The unit tests are powered by Jest and Enzyme

$ npm run lint                  # Check JavaScript and CSS code for potential issues
$ npm run test                  # Run unit tests. Or, `npm run test:watch`

End-to-End Test

End-to-End Test Running Guide.

NOTE: all tests are executed in Cockpit's CI on every commit and every pull request.

How to Deploy

Update publish script in the run.js file with your full Firebase project name as found in your Firebase console. Note that this may have an additional identifier suffix than the shorter name you've provided. Then run:

$ node run publish              # Build and publish the website to Firebase, same as `npm run publish`

The first time you publish, you will be prompted to authenticate with Google and generate an authentication token in order for the publish script to continue.


If you need just to build the project without publishing it, run:

$ node run build                # Or, `node run build --release` for production build

Building a Docker image

To build the Welder web application as a Docker image see README.docker


This source code is licensed under the MIT license found in the LICENSE.txt file.

Application internals

    ✓ Includes Patternfly CSS & some React implementations of Patternfly components
    ✓ Modern JavaScript syntax (ES2015+) via Babel, modern CSS syntax via PostCSS
    ✓ Component-based UI architecture via React, Webpack and CSS Modules
    ✓ Application state management /w time-travel debugging via Redux (see main.js, core/store.js)
    ✓ Routing and navigation via path-to-regexp and history (see main.js, core/router.js, utils/routes-loader.js)
    ✓ Code-splitting and async chunk loading via Webpack and ES6 System.import()
    ✓ Hot Module Replacement (HMR) /w React Hot Loader
    ✓ Cross-device testing with Browsersync (see run.js#start)

Directory Layout

├── /components/                # Shared or generic UI components
│   ├── /CardView/              # CardView component
│   ├── /Layout/                # Website layout component
│   ├── /Link  /                # Link component to be used insted of <a>
│   └── /...                    # etc.
├── /core/                      # Core framework
│   ├── /history.js             # Handles client-side navigation
│   ├── /router.js              # Handles routing and data fetching
│   └── /store.js               # Application state manager (Redux)
├── /node_modules/              # 3rd-party libraries and utilities
├── /pages/                     # React components for web pages
│   ├── /app/                   # App page
│   ├── /error/                 # Error page
│   ├── /blueprints/            # Blueprints page
│   └── /...                    # etc.
├── /public/                    # Static files such as favicon.ico etc.
│   ├── /dist/                  # The folder for compiled output
│   ├── favicon.ico             # Application icon to be displayed in bookmarks
│   ├── robots.txt              # Instructions for search engine crawlers
│   └── /...                    # etc.
├── /test/                      # Unit and integration tests
├── /utils/                     # Utility and helper classes
│── main.js                     # React application entry point
│── package.json                # The list of project dependencies and NPM scripts
│── routes.json                 # This list of application routes
│── run.js                      # Build automation script, e.g. `node run build`
└── webpack.config.js           # Bundling and optimization settings for Webpack

Cockpit Package

This project can also be used through cockpit as a cockpit package.

npm install && node run build
mkdir -p ~/.local/share/cockpit
ln -s /path/to/welder-web/public ~/.local/share/cockpit/welder

Then you if you log into cockpit as the user that owns ~, you can use the app from cockpit.

To keep this working all code should follow the following rules.

  • All urls in the html and javascript need to use relative paths.
  • All requests to the API should be made using utils.apiFetch. Any non API fetch requests 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

All npm run targets that start with translate: need zanata-js to be installed. Install it with the usual npm install zanata-js.

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 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 id attributes.

Step 2. The developer runs npm run translations:push. As part of this process, babel-plugin-react-intl-auto will add 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, and the POT file is uploaded to Zanata.

Step 3. Translators provide translations on Zanata.

Step 4. The developer runs npm run translations:pull and npm run translations:po2json. This downloads the translations from Zanata as gettext-style .po files and converts the .po files back to JSON.

Step 5. The user runs welder-web. Based on the user's browser configuration, welder-web determines the user's preferred language, and if translations are available, these translations are provided to react-intl's <IntlProvider>. react-intl then displays translated strings where possible.

Making A New Release Of welder-web

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).

Then push the tag with git push --tags. This will trigger cockpituous to build a new release of welder-web.

Releasing cockpit-composer

Do this after tagging a new release of welder-web as described above. It uses the same source.

  • Build a new .srpm with make cockpit-composer-srpm, this will also download new translations.
  • Import the new .srpm into the appropriate RHEL release

Made with ♥ by the Welder team and its contributors