At Flow, we empower our non-technical colleagues to conduct their own QA testing without having to deal with command lines and other roadblocks that can occur when using conventional QA tools. One solution was to integrate a Jenkins job to trigger a QA script via a frontend form submission. Jenkins is used in many tech organizations as an automation server which builds and deploys projects. The more conventional way to create a Jenkins job, is to use the /build endpoint to trigger a deployment, but there is also a /buildWithParameters endpoint that allows a user to pass any parameters in the request. The parameters will be added as environment variables available at runtime.
Building Jenkins jobs with parameters remotely has many useful applications and is relatively simple to set up. For our use case, we wanted to trigger a job and send specific parameters via a React form. In order to accomplish this you need two separate calls: one to fetch a Jenkins API token and one to post the token to the buildWithParameters endpoint.
Before fetching the Jenkins token, you need to create an API key in your Jenkins configuration. In order to do this, go to your Jenkins profile settings. Fill in your details in this format: https://your_jenkins_url/user/username@email/configure. Once you’ve done this, click “add a new token”. Once you’ve named the token, add it as an environment variable in your application. Check here for details.
To make the first asynchronous GET call in a Node app using fetch, you can do something like this:
Return and store the jenkins crumb identifier, which you will need to pass in the header of the next call, in order to trigger the parameterized build. The second call you need is a POST call to the buildWithParameters Jenkins endpoint with the parameters in the URL. If everything goes as planned, you should see the build triggered in your Jenkins view.
For our use case in our Node app, we defined a form schema that will have the parameters we need in order to build the parameterized Jenkins job. At the component level, we use dispatch to post the request onform submission with the defined schema, as well as to render the form.
The schema for the form looks like this:
Since we are using Typescript, we have to define actions, reducers, selectors, and types in order to achieve our goal. Our types can be defined as:
Our selectors are setup as:
The actions are set up as:
The reducers are setup as:
Once the above is configured, you can set up your component to dispatch and render the form. Using React we can dispatch like this:
The form can be rendered with a FormRenderer using any template, just make sure you use the correct schema in order to have the correct parameters.
Now that you have your component and data flowing, you should be able to use the Node frontend to trigger a parameterized build in Jenkins. For further information on Jenkins remote access API, please refer to this documentation.
Below is a screenshot of the final product UI, you can see three input fields which will be sent directly to the Jenkins API as parameters once a user clicks on the submit button.
