Badgen.net: Support Now CI badge

[tunnckoCore]

It might sounds crazy, but it's truly beautiful to use it as CI/CD :D

How?

now.json

{
  "version": 2,
  "name": "tunnckocore-template",
  "builds": [{ "src": "package.json", "use": "@now/static-build" }]
}

and define now-build script

"scripts": {
  "lint": "yarn scripts devest lint",
  "test": "yarn scripts devest test",
  "build": "yarn scripts pika-pack build --out dist",
  "status:pass": "badgen --subject build --status passing --color green > dist/badge.svg",
  "status:fail": "badgen --subject build --status failing --color red > dist/badge.svg",
  "pkg": "yarn lint && yarn test && yarn build",
  "now-build": "(yarn pkg && yarn status:pass) || yarn status:fail"
},

The thing is, that when build fails, it actually doesn't publish the contents of dist/ so we can't just get the generated failing badge. For now I can just point the badge to https://<myrepo>.<my-zeit-username>.now.sh/badge.svg

So, the alternatively we can have it here, and query directly the API with https://zeit.co/docs/api#endpoints/deployments/list-deployments and get the first item from the data.deployments[0].state We'll need the deployment "name" and fitler by it and after that get the first item. But, sadly, the API endpoint wants a token, which might be a problem, because we also have some rate limits there. But we have caching here, right? So it won't be a problem?

I can PR, but we'll need to add a token to the secrets.

[tunnckoCore]

Pretty cool and small implementation, that's why I love badgen... :D

const axios = require('axios');

async function nowci(name) {
  const { data } = await axios({
    method: 'GET',
    url: 'https://api.zeit.co/v4/now/deployments',
    headers: {
      authorization: 'Bearer XXXX',
    },
  });

  const builds = data.deployments.filter(
    (x) => x.name === 'tunnckocore-template',
  );

  console.log(builds[0].state);
}

// comes from URL args
nowci('tunnckocore-template');

We may also allow optionally passing a token, if someone want that case.

That's the response of the last build btw

{
  uid: 'dpl_9C42fhkmE2eXzwvnJw62sQ2wyg7b',
  name: 'tunnckocore-template',
  url: 'tunnckocore-template-78rfoosvz.now.sh',
  created: 1560713992650,
  state: 'READY',
  type: 'LAMBDAS',
  creator: { uid: 'mEqvYA8G5VDm6HclzVcnL9l8' },
  instanceCount: 0,
  scale: {},
  meta: {
    githubDeployment: '1',
    githubOrg: 'tunnckoCoreHQ',
    githubRepo: 'template',
    githubCommitOrg: 'tunnckoCoreHQ',
    githubCommitRepo: 'template',
    githubCommitRef: 'master',
    githubCommitSha: 'e53b9b781ffb3ce5a8d30073fdd9fca2d7ce527b',
    githubCommitMessage: 'chore(tests): make passing tests\n\nSigned-off-by: ' +
      'Charlike Mike Reagent <[email protected]>',
    githubCommitAuthorLogin: 'tunnckoCore',
    githubCommitAuthorName: 'Charlike Mike Reagent'
  }
}

Just putting it for a reference later. Because we may need support for branches.

[styfle]

I like the idea of using ZEIT Now as a CI solution but it seems like the API is a better solution then writing a file.

You could probably make a couple API calls like GET /v1/projects/:name and then GET /v9/now/deployments/:id to get the readyState.

[tunnckoCore]

Yea, but still needs a token anyway. Also why to make 2 API calls instead of one?

[tunnckoCore]

Sweet. I'm done. How to name it, what to be the endpoint? Any preferences @styfle, @amio? Just now sounds... Maybe zeit-now or now-ci (with or without the dash).

Also, @styfle, does when it is on GitLab the meta keys are named like gitlabCommitRef: 'master'?

[tunnckoCore]

Unfortunately, there's one more limitation. Just realized that with your token you can't query other than your deployments. So, we'll need to require passing a token for now. Or give up for now.

[tunnckoCore]

Or at least, most easiest way would be to support specific status in the github live badge :D

E.g. the status.context is like "context": "continuous-integration/jenkins"

[amio]

That's brilliant, almost worked 😂

+1 on the github way

[tunnckoCore]

Yea, right? :rofl: I'm a bit sad now, it was super cool, but yea through GitHub makes better sense.

And still, I'll make a live badge using the github api. Because we also need the link error log when failing. Which, btw, is private only... another problem. @styfle can we enable deployment logs somehow?

[amio]

Found this github v3 endpoint (prefer to use more v3 api in github live badge, to save quota on v4):
https://developer.github.com/v3/repos/statuses/#get-the-combined-status-for-a-specific-ref

then the schema:

/github/status/:owner/:repo/:ref?

Looks straight and simple

[tunnckoCore]

Yes, but it's for combined status, not only for the "build". And if we think of Now as CI, then we should get only its status.

[amio]

Despite the name "combined", this api actually provided separated statuses :D
https://api.github.com/repos/zeit/now-cli/status/master

If we support detailed status, the schema could be:

/github/status/:owner/:repo/:ref?
/github/status/:owner/:repo/:ref/:context

[tunnckoCore]

Yup.

[amio]

@tunnckoCore I can work on this now 😉

[amio]

Just realize that we already have the combined status badge 😂
with exactly this schema:

/github/:topic<status>/:owner/:repo/:ref?

• https://badgen.net/github/status/micromatch/micromatch
• https://badgen.net/github/status/micromatch/micromatch/gh-pages
• https://badgen.net/github/status/micromatch/micromatch/f4809eb6df80b

[amio]

It's live now

https://badgen.net/github/status/zeit/now-cli/master/ci/circleci:%20test-unit

https://badgen.net/github/status/zeit/now-cli/master/ci/circleci:%20test-integration

[tunnckoCore]

Cool. But still, how you can get the whole combined status of circle ci for example? :D Cuz, what I'm seeing now is that you need to define test-unit, test-integration and etc. In case of Now it will be now, now/package.json, and even worse in monorepo scenario :D Consider https://github.com/zeit/now-examples.

Maybe adding query param ?combined would fix this, like

https://badgen.net/github/status/zeit/now-cli/master/ci/circleci?combined=true

But anyway, that might be too much. For now it works.

[amio]

We can omit the combined=true, just

/github/status/zeit/now-cli/master/ci/circleci

will combine all statuses starting with ci/circleci.

While the problem is, how do we show mixed status? for statuses success + error + pending , some options:

1. 
2. 
3. 

(1) needs explaining, (2) is ugly, and ambiguous, (3) needs a better wording.

Before we have a nice solution for this, I think the workaround for now is, use a final job as the "combined" status badge, like ci/circleci: coverage for now-cli's case.

[amio]

Overall, I guess the default combined status would be fine to use on most project homepage, the separated status badge could be used on some dashboard/badgeboard like
https://react-component.github.io/badgeboard/

[tunnckoCore]

While the problem is, how do we show mixed status

Just if it is failing show failure, if it is pending it will anyway go to one of the other states, so no need to show. If it's failing, even only one of the jobs, it obviously should show failing status, since it is "combined status".

Sort of like this

const failure = circleci.find(x => x.state === 'failure')
const pending = circleci.find(x => x.state === 'pending')
const state = failure ? 'failure' : (pending ? 'pending' : 'success')

return {
  subject: state
}

[amio]

If it's pending with success, I think it should display pending, so:

• failure/error + anything = failure
• pendings + successs = pending
• successs = success

But no matter how we define the final status, it's opinionated, we need to explain how we generated the final status，which is what I want to avoid.

[tunnckoCore]

If it's pending with success

Yes, of course, in above example circleci is just an array of all circleci statuses.

But no matter how we define the final status, it's opinionated

It's not. It's logical and intuitive. Every human being, or at least developer will think this way, since it's the same as if true && false going the else state.

[amio]

Hmm, I just thought about that, this won't break anything we already have, it's an enhancement, and it's simple enough. Just like the empty icon param, we never promote it, but it's there, and it's handy.

@tunnckoCore would you make a PR for this?

[tunnckoCore]

Okay, I'll try.

[tunnckoCore]

Do you have some example repo in mind that has some circleci failing? I can't remember some of mine.

Nevermind find failing commit in now-cli https://github.com/zeit/now-cli/commit/2777ec3e2cba5035585b2f463ec2b5103b82557f :D

[tunnckoCore]

Doh, I can't get it working with my github tokens? I've seen the GH_TOKENS but seems it not works. I also tried to put my token directly where's the request but it still shows token required?

Dooooh, delays delays... It worked.

[tunnckoCore]

I'll put this comment here, just to not be inside the code, okay? :D

Example repo http://localhost:3000/github/status/zeit/hyper

• commit 1: 34fb41c23b

  • Combined GitHub status - failing, because appveyor pr

  • http://localhost:3000/github/status/zeit/hyper/34fb41c23b

  • Combined CircleCI status - passing

  • http://localhost:3000/github/status/zeit/hyper/34fb41c23b/ci/circleci

  • Single CircleCI status - passing

  • http://localhost:3000/github/status/zeit/hyper/34fb41c23b/ci/circleci:%20build

  • Single Appveyor status - passing

  • http://localhost:3000/github/status/zeit/hyper/34fb41c23b/continuous-integration/appveyor/branch

  • Single Appveyor status - failing

  • http://localhost:3000/github/status/zeit/hyper/34fb41c23b/continuous-integration/appveyor/pr

  • Combine Appveyor status - failing

  • two possibilities (because we check with .startsWith)
  • http://localhost:3000/github/status/zeit/hyper/34fb41c23b/continuous-integration/appveyor
  • http://localhost:3000/github/status/zeit/hyper/34fb41c23b/continuous-integration

• commit 2: efeedd0a9d3

  • Combined GitHub status - failing

  • Single CircleCI status - passing

  • http://localhost:3000/github/status/zeit/hyper/efeedd0a9d3/ci/circleci:%20build

  • Combined Circle status - failing

  • http://localhost:3000/github/status/zeit/hyper/efeedd0a9d3/ci/circleci

  • Combined Travis status - failing

  • http://localhost:3000/github/status/zeit/hyper/efeedd0a9d3/continuous-integration/travis-ci

  • Combined Travis and Appveyor status - failing

  • cool bonus...

  • http://localhost:3000/github/status/zeit/hyper/efeedd0a9d3/continuous-integration

  • Single Appveyor status - passing

  • http://localhost:3000/github/status/zeit/hyper/efeedd0a9d3/continuous-integration/appveyor