add build artifact to CI build

[antoinerg]

Testing the artifacts features of circleCI.

The idea is to store the plotly.js that gets built for each commit/branch. This way, it would be extremely easy to test a particular branch without having to checkout, build and serve over HTTP locally. Moreover, if the artifacts are served by circleCI over HTTPS, it will be easy to test them out in Codepen and quickly swap between versions to check whether it correctly fixes a given issue.

[jonmmease]

This would be awesome from the plotly.py side. I've been wanting to figure out a way to build plotly.py against plotly.js master, and this would help a lot.

Would the plot schema be available as an artifact as well? (plotly.py uses this during the build process for code generation)

[antoinerg]

@jonmmease We should be able to add anything you like! Just let me know exactly what you need.

I can confirm that this is working properly. The plotly.js for the current branch is avaible at a public URL served over HTTPS https://16312-45646037-gh.circle-artifacts.com/0/plotly.js 🎉

Now all we need is a webpage with a dropdown to select any version from any branch for fast easy comparison!

[jonmmease]

In terms of artifacts, all we need is plot-schema.json and plotly.min.js. For automation purposes, do you have any thoughts on how the plotly.py build process could find out what the latest plotly.js build is?

[antoinerg]

It should be possible to automate using CircleCI API!

I think I should store the artifacts as the last build step. This way, we would get the URLs to the artifacts using one API call which lists the artifacts of the latest build:

$ curl https://circleci.com/api/v1.1/project/github/plotly/plotly.js/latest/artifacts?branch=master\&filter=successful
...
[ {
  "path" : "plotly.js",
  "pretty_path" : "plotly.js",
  "node_index" : 0,
  "url" : "https://16312-45646037-gh.circle-artifacts.com/0/plotly.js"
} ]

[antoinerg]

Ok so the following API call returns exactly what we want!

$ BRANCH=circle-build-artifact
$ curl https://circleci.com/api/v1.1/project/github/plotly/plotly.js/latest/artifacts?branch=$BRANCH\&filter=successful
[ {
  "path" : "plot-schema.json",
  "pretty_path" : "plot-schema.json",
  "node_index" : 0,
  "url" : "https://16381-45646037-gh.circle-artifacts.com/0/plot-schema.json"
}, {
  "path" : "plotly.js",
  "pretty_path" : "plotly.js",
  "node_index" : 0,
  "url" : "https://16381-45646037-gh.circle-artifacts.com/0/plotly.js"
}, {
  "path" : "plotly.min.js",
  "pretty_path" : "plotly.min.js",
  "node_index" : 0,
  "url" : "https://16381-45646037-gh.circle-artifacts.com/0/plotly.min.js"
} ]

I was wondering if I should simply add the whole dist/ folder instead? cc @etpinard @alexcjohnson

[alexcjohnson]

@antoinerg cool feature!

I was wondering if I should simply add the whole dist/ folder instead?

I don't see what that would gain us... and there's a lot in there, do we even update all of them during the test run? I'd leave it at just these items for now, as long as the naming matches dist/ (which it does) we can always augment it later.

While you're in this code, does this same feature let us give the image test artifacts a simpler location? I would love it if we could get at these without diving so deep into the directory tree

Can you change it so it just looks like:

(I would also love it if there were a directory like test_images_failed/ of just the images that produced diffs - in addition to the existing two directories. But that's a rather different issue)

[antoinerg]

@alexcjohnson With commit 82b640b, it now looks like this for both test-image and test-image2:

[alexcjohnson]

Looks great to me! 💃

[antoinerg]

I love my new Linux laptop. Having a functional bash shell is awesome!

Here are one-liners printing the URLs to plotly.min.js (whether they exist or not) for all the publish jobs:

curl https://circleci.com/api/v1.1/project/github/plotly/plotly.js?limit=100\&filter=completed | \
    jq '.[] | select(.workflows.job_name=="publish") | .build_num' | \
    xargs -I {} echo https://{}-45646037-gh.circle-artifacts.com/0/plotly.min.js

Same thing but for a given branch:

BRANCH=circle-build-artifact
curl https://circleci.com/api/v1.1/project/github/plotly/plotly.js/tree/$BRANCH?limit=100\&filter=completed | \
    jq '.[] | select(.workflows.job_name=="publish") | .build_num' | \
    xargs -I {} echo https://{}-45646037-gh.circle-artifacts.com/0/plotly.min.js

I can't wait to merge this in master!

[antoinerg]

@jonmmease

In #3136 (comment), I show how to get the list of artifacts of the latest job built (which may or may not be publish if the workflow is still running).

In #3136 (comment), I show how to retrieve the build number of the most recent publish jobs that are completed from which we can guess the URL where the artifact will be served. To be safe, you should probably use that build number to make another API call to get the artifacts associated with that build number. In bash it would look like:

BRANCH=circle-build-artifact
curl https://circleci.com/api/v1.1/project/github/plotly/plotly.js/tree/$BRANCH?limit=100\&filter=completed | \
   jq '.[] | select(.workflows.job_name=="publish") | .build_num' | \
   head -n 1 | \
   xargs -I {} curl https://circleci.com/api/v1.1/project/github/plotly/plotly.js/{}/artifacts

Good night and thank you all for your help :)

[etpinard]

Nice touch here 🎨