drone / drone-wall

Dashboard for the Drone CI server

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

drone-wall's Issues

Alternate UI for "days since the last failed build"

A proposed design spec for an alternate view into the number of days since a last failed build, with the focus being on the sign only, not with the copyright-infringing characters in the foreground.

running behind nginx reverse proxy

if I run this behind nginx I only see the text and not the css etc to make it look pretty.

started with `/usr/local/bin/drone-wall --datasource=/var/lib/drone/drone.sqlite --repos=github.com/xxxx/xxxx --port=:8500'

nginx config is dead simple

       location /wall {
                proxy_pass  http://127.0.0.1:8500;
                proxy_redirect     off;
        }

viewing it on port 8500 looks fine, through the nginx proxy:

    [[ project.projectName ]]
    [[ project.projectOwner ]]
        [[ build.pull ? 'Pull Request #' + build.pull : build.message ]]
        [[ build.buildTime | date:'M/d, h:mm a' ]]

npm install fails with npm 2.x

I tried to build the drone-wall locally, so I needed to npm install. Sadly, I stumble upon this error:

366928 error Linux 4.1.18-boot2docker
366929 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
366930 error node v4.2.2
366931 error npm  v2.14.7
366932 error code EPEERINVALID
366933 error peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
366933 error peerinvalid Peer [email protected] wants grunt-svg-sprite@github:vokal/grunt-svg-sprite.git#8200979a0e

How do you perform a fresh install? Which node/npm version is recommended?

Doesn't work with Drone 0.4 API

This no longer functions with the Drone 0.4 API.

Feature request: change repo name in drone wall

We use drone.io with a gitlab instance. Our repos are divided to a few groups, so the repo name itself is not very meaningful (for example 'core' repo in the group 'client').

I couldn't find a way to configure drone wall to show anything else for that repo other than 'core'. Not a way to add a full path including the groups ('client/core' instead of 'core'), and not a way to configure the name manually in the UI or in the drone.yml file.

It would be nice to have a yml key to set a name for how that repo should appear on the drone wall.

Forks on repo list show as permanently building

Sometime between July 20 and July 25th, a commit landed that caused our forks to display as permanently building on the repo list. The left side's build feed is still correctly going through the building->success/fail transition.

I'm not able to get into git blame'ing this right now, but hopefully this is reproducible beyond our setup.

Drone API needs all recent builds, not grouped

Multiple builds on a single repo can't update their status on the right hand build list in the current API endpoint. Also, 5 is too small of a limit for the recent activity. Drone-wall needs an endpoint for getting all recent activity, and up to 20 recent actions.

feature require - integrate drone.io with Google Chrome extension Buildreactor.

I use Google chrome extension Buildreactor to manage dashboard for most popular CI/CD pipelines.

Can we get the same for drone.io build job as well?

Support white-label branding

Some method of getting your organization's name or logo on the wall.

Repo list CSS layout issues

We're seeing some strange behavior with our repo list and their respective recent build history:

For the first line, I'd expect to be able to see the repo name. If we showed a few less recent builds, we'd be good for this particular repo (though longer named stuff wouldn't).

The second line seems to have wrapped all the way around.

This is being rendered on recent Chrome for Mac on a TV at 1080p. I'm lazy enough to just run this through npm start and point it at localhost:3000, if that matters.

Add dockerfile

There's been some interest in adding a dockerfile to the v3 drone wall release, @athieriot I believe you mentioned you'd be interested in taking a stab at it?

Icons need to be swapped for something more permissive

Based on original feedback.

Persist some information between refreshes

It's always been a bit of a pain that when the wall is reloaded, it reverts to only knowing about the first API hit. Certain data should be stored in localstorage, things like build totals, developer profiles, maybe the master repo list (and then add an expiration time for untouched repos so we don't have ancient stuff in there). Also respect the start-of-the-week limit so on refresh, the "weekly totals" don't include data from the previous week.

Include a "clear cached wall data" command in the advanced settings.

Customize the amount of time before a stall PR is removed

As a bit of a halfway measure regarding #43, make the 48 hour timeout customizable.

Allow MySQL/MariaDB connections

AJAX poll swaps ordering of past builds

When the build lists are refreshed after the first AJAX poll the active status for some builds is reversed and they're displayed out of order.

Drone wall crash, undefined: 0

At 12:01:01 the following error shows up in the log and drone-wall exits

Nov 18 12:01:01 core-01 sh[867]: undefined:0
Nov 18 12:01:01 core-01 sh[867]: ^
Nov 18 12:01:01 core-01 sh[867]: SyntaxError: Unexpected end of input
Nov 18 12:01:01 core-01 sh[867]: at Object.parse (native)
Nov 18 12:01:01 core-01 sh[867]: at IncomingMessage.<anonymous> (/webapp_root/server.js:45:29)
Nov 18 12:01:01 core-01 sh[867]: at IncomingMessage.emit (events.js:117:20)
Nov 18 12:01:01 core-01 sh[867]: at _stream_readable.js:943:16
Nov 18 12:01:01 core-01 sh[867]: at process._tickCallback (node.js:419:13)

No other log entries surrounding the crash and restarting the process made everything happy again.

Update favicons

The realfavicongenerator build currently in drone-wall is a little buggy in Firefox on high PPI Windows machines, update to rfg Package v0.13 when it's finally released.

Update to latest dominatr-grunt at the same time.

Add a README

Basic usage instructions should be here

DroneWall should be able to filter a list of branches

Right wall, drone wall shows the build status of all branches built in Drone CI, it would be interesting if we could filter the branches we want it to show on the wall, we want all of our branches to be tested, but only master and production to be shown on the wall, for instance:

./drone-wall --branches=master,production

It would be awesome if it could display the branch name for that commit somewhere in the wall as well.

Locally install CDN libraries

Just to make things more portable, and able to run in an isolated environment.

Restarted builds don't show in the left side activity feed

The repo build indicator seems to spin, but the entry in the left menu (if it is still visible) doesn't reflect the restarted build. I would expect to see it hilighted like a normal build.

Rice isn't being honored

Rice doesn't appear to be embedding content as expected. Template/static file lookups fail when deploying the binary.

Drone Wall should be able to display individual avatars for paired commits

This is more like a question.
Nowadays git cannot handle pairing the right way, instead what is done today is: we change the email before the commit is made to [email protected]. This way we cannot display a correct image for the pair in the wall.

PS: what people actually do is: hack that into Gravatar and create an association with each pair email. That's not viable while working on a big company and pairing with a lot of different people.

It would be awesome if drone wall could get the author email, split it by "+", and be able to get an image for each person of that particular commit. Of course this could be a option that could be turned on and off. But in theory it seems simple to be implemented.

What do you guys think?

How to start the official docker image against my drone?

This is more a question than anything, but I don't understand how to start/build this thing. I have private drone servers and want to connect this ui. I got the impressions that this project would be a quick setup.

Just running the official image doesn't work for me:

docker run -d -p 9898:80 --name drone-wall drone/drone-wall`

~ ❯❯❯ curl localhost:9898                                                                          ⏎
curl: (7) Failed to connect to localhost port 9898: Connection refused

But checking in the image, everything seems fine:

~ ❯❯❯ docker exec -it drone-wall sh                                                                ⏎
/ # ps ax
PID   USER     COMMAND
    1 root     /usr/sbin/uhttpd -f -p 80 -h /www
    7 root     sh
   11 root     ps ax
/ # ls -l /www
total 1544
-rw-r--r--    1 root     root       1527462 Mar  6 00:22 dist.js
drwxr-xr-x    2 root     root          4096 Mar  6 00:22 favicon
-rw-r--r--    1 root     root          3153 Mar  6 00:19 index.html
-rw-r--r--    1 root     root         29697 Mar  6 00:22 project.css
-rw-r--r--    1 root     root         10202 Mar  6 00:22 templates.js

What am I missing? I for one haven't made any settings or anything to point to my API in this case?

So I then tried to just build myself to run locally after editing env.json but the npm build doesn't work against my local node (4.2-something). peerDeps and stuff:

https://gist.github.com/hedefalk/600c8f157ba432b4df3b6357852e09ed

Remove closed pull requests more intelligently

Right now pull requests are removed from the repo list after two days of inactivity, because we have no way of knowing if a pull request has been closed instead of merged. PR-closing doesn't trigger a build, and our data comes exclusively from a feed of drone builds.

The only conceivable solution is to hit the Github API to check on PR status on regular intervals, but it feels like that'd add so much overhead in network hits and up-front configuration that it's not really worth it.

Keeping this logged since it is indeed an issue, whether we decide to move on it this way, some other way, or no way.

Need a .drone.yml

Because it's silly not to

Needs responsive design for mobile devices

Thinking switching to one column would do here.

Incorrect number of total builds

I've noticed that sometimes the number of builds (29) doesn't match the sum of successes (25) and failures (9). The sum of number builds of builds by individual developers does match (34). Please, see attached screenshot.

Drone 0.5 compatibility?

Hi,

Just wondering if drone-wall would work out of the box with drone 0.5? 😙

Compatibility with Drone 1.0

Hello,

we upgraded our drone server from the 0.8 version to the latest one.

We since get an error on drone-wall

Could not retrieve Drone status.

This is probably due to a 404 Not Found error on the endpoint

GET https://drone.company.io/api/user/feed

Is it something easy to upgrade - or does it means a full revamp of this drone-wall app to be compatible with the latest version of drone ?

config change - results in no connection.

Pretty new to this and drone... Ih had drone working, and drone-wall hooked up. Then I blew away my drone instance and built a new one. I had to change keys and restart node-wall.

I did so, but nodewall just sits at a screen without any builds showing up.

I've tried multiple things and no luck. Even nuking the git repo and just the build directory.

commands run:

drone_api=redacted
drone_token=redacted

grunt --env=dev --apiroot=$drone_api --token=$drone_token

then 

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

As per the docs. But I'm having an issue here. What can I check? I've looked through build/dist.js to look for configs etc.. but the build directory isn't clear on where to find where these configs are, and grep isn't coming up with anything.. so it seems like something is broken here.

Can you offer some help on debugging?

seems to prioritize showing old builds instead of new

We have a deployment that shows the state of ~4-6 repos. For some reason after doing its AJAX update the wall switches to showing seemingly arbitrary builds (perhaps the oldest of the builds instead of the newest).

Attached before and after states.

This makes us look less competent than we feel we actually are.

Could not retrieve Drone status.

I'm getting "Could not retrieve Drone status.". when accessing drone-wall. Before I entered the API root path and the token. If I enter the Drone root path (https://ci.berndsgn.ch/api/) into the browser and append "user/feed", it returns a JSON object so it should be valid and working... I'm using drone-wall as a docker image and Drone from the Rancher catalog in version 0.4-rancher2.

Malformed Drone response

I set up drone-wall from latest docker image.
After settings (path to api and token) got this error in the top of the screen: "Malformed Drone response."
From server side (http://x.x.x.x/api/user/feed) getting result "null",
but http://x.x.x.x/api/user returns proper user information.