drone-wall

The Drone Wall is a wall display component for Drone CI server v0.4.0.

Configuration

Drone Wall uses Grunt to construct an entirely client-side web application in the /build directory. You can pass several optional values to pre-configure the application like so:

grunt --env=<env> --apiroot=<path> --token=<token> ... [full list below]

The default values for most of these options can be found in env.json, and can be modified there directly if you prefer to not have to pass them in via command-line every time. Additionally, with the exception of env and colors, all configuration values can be changed via the Wall interface at any time. Once set, they'll be stored in localstorage so you don't have to reenter them.

env: [local|dev|staging|prod] Defaults to local. Selects which group of configuration variables in env.json are used for further tasks. Implicitly enables mock data when set to local, and minifies/uglifies all scripts when set to staging or prod.
apiroot: [String] The absolute path of where your Drone API lives. Should be something like https://drone.something.com/api/.
token: [String] A user token generated by Drone, accessible via your user profile when logged into the Drone site. The repos and builds that appear on the Wall will be those that the owner of this token has access to in Drone.

Be aware: supplying these values hard-codes them into the deployed JavaScript files, so providing your Drone token here is suitable only when you do not plan to deploy the Drone Wall someplace public. If the apiroot and token values aren't supplied via the command line build process, they will be asked for in the Wall interface itself.

The Drone Wall will display builds from all repos and branches by default, unless filtered using these options:

include: [String] Supply a comma-delimited list of repos (ex. repo-name), branches (ex. repo-name/branch-name), or branch wildcards (ex. */branch-name) to include ONLY these items on the wall, and implicitly exclude all others.
exclude: [String] Supply a comma-delimited list in the same format as the include option to exclude repos or branches. If you set the exclude option and not the include option, all repos and branches will be implicitly included EXCEPT for those excluded. If you set the include AND exclude options, the list will first be filtered to only the inclusion list, and then further filtered by the exclusion list.
mainbranch: [String] Defaults to master. When pushes are made to this branch on any of the repos on the Wall, that repo will reflect the status of the build (color, avatar). Set to * to show build status for all pushes regardless of branch (this is the pre-3.1.0 behavior).

You can further customize the Wall's default appearance with these options:

prtimeout: [Number] Defaults to 48. The number of hours before an un-merged pull request is hidden in the repo list. Useful for removing stale pull requests that have been closed without being merged.
prmax: [Number] Defaults to 3. The maximum number of pull requests to display on a repo in the repo list before hiding extras.
orgname: [String] Defaults to Drone. This is the name that appears on the config page, and can be replaced with your own organization's name.
theme: [light|dark] Defaults to light. Determines whether the Wall is displayed using the light or dark theme.
colors: [Object] The default Wall color scheme is defined in /source/modules/_app/styles/colors.less. You can pass a JSON object with properties that match the LESS variable names (sans the @s) to override some or all of these colors, ala -colors="{\"success\":\"#00FF00\"}". Note the need to use double-quotes, and escape the innermost ones. This option's much easier to set via env.json, where you can just use an un-escaped object literal.

Usage Notes

The Drone Wall reads the ref and message parameters in a build response to determine the pull request that a build belongs to, so your configuration will need to include ref and you'll need to merge PRs without customizing the auto-filled message GitHub provides. See this issue for details. Future updates to drone may make this requirement unnecessary... or may break the wall fundamentally, depending upon whether PR numbers are exposed another way or not.

Local Development

The Drone Wall requires Node.js 4.x and npm 3.x at minimum.

Begin with npm install, and then run npm start to build the application, start a file-watcher, and run a local server accessible at localhost:3000. You can pass Grunt flags through npm (as of 2.0.0) like this:

npm start -- -env=dev -theme=dark

Run npm test to run Angular E2E tests against mock data.

Deployment

The Drone Wall uses dominatr-grunt for its build process, and supports automated deployment to CloudFront/S3 on AWS. Set an S3 bucket name and CloudFront distribution ID in your env.json file, and then run the following task with the appropriate env value:

grunt deploy --env=prod --aws-access-key-id=<id> --aws-secret-access-key=<key>

The AWS access key ID and secret access key should belong to an AWS user created via Identity and Access Management that has been granted the AmazonS3FullAccess and CloudFrontFullAccess policies. You'll be given these values when you first create a user.

Be sure to set apiroot, token, or any other configuration values in the deploy command as appropriate. Deployment should only take a few seconds, but building on AWS's end can take upwards of ten minutes.

You can also just run grunt with the appropriate env value to export the full site to your /build directory, and manually deploy its contents to whatever web hosting solution you prefer.

If you plan to deploy to a non-root directory, update the <base> tag in index.html, found in /source/modules/_app/templates, before running your Grunt tasks. For example, if you want to deploy to something.com/wall, set href to /wall/.

Docker Image

We provide a lightweight (6mb) Docker image for quick setup and installation:

docker run -d -p 80:80 drone/drone-wall