preface

At present, our build can only be triggered by a URL with parameters, and the progress and status of the build can not be monitored. So how can we build such a closed loop? Here, I use my machine as a server to build a front-end build closed loop.

start

Build a closed loop, so we need a visual front-end interface to add a back-end service, so we’re going to set up a new admin projects, in a node services, if these functions to do rollback and logging, may require the backend support, because I only do the release of the test environment used here, so don’t need to use these Function, just start a basic Node service.

Foreground visualization project

Build an Admin project to build the publishing interface

It contains three parameters, and then we hit publish, and before we trigger our remote build, we need to get the ID of the triggered task in the queue, so we need to get that ID through the back end. Here’s the front end code

handleOk () {
  this.modalInfo.loading = true
  var id = ''
  const { project, branch, env } = this.form
  Server({
    url: 'post',
    data: {
      project,
      branch,
      env
    },
    method: 'POST',
    needLoading: true
  }).then((res) => {
    id = res.data.id
    this.getJobId(id, project)
  })
}
Copy the code

Back-end code (self-generated Node service)

app.post("/post",async function(req,res){ var resultId = await getId(req.body) var result = {code:200,id: ResultId, MSG :" Post request successful "}; res.send(result); });Copy the code
function getId (par) { var options = { method: 'POST', url: 'http://192.168.0.85:8080/buildByToken/buildWithParameters' headers: {' cache-control:' no - cache ', 'the content-type: 'application/x-www-form-urlencoded' }, form: { job: par.project, token: 'xxxxxxxxxx', branch: par.branch, env: par.env } }; return new Promise(function(resolve,reject){ request(options, function (error, response, body) { if (error) throw new Error(error); var id = response.headers.location.split('/')[response.headers.location.split('/').length - 2] console.log('id'+id) resolve(id) }); })}Copy the code

After getting the ID in the queue, we need to look up the build ID. At this time, it is possible that the task is still waiting in the queue and has not been built, so there is no build ID. At this time, we need to poll to look up the build ID, and only through this build ID can we get the status of the task at the time of execution

The front-end code

GetJobId (id, project) {Server ({url: "http://192.168.0.85:8088/getJobId? resultId=' + id, method: 'get', needLoading: true }).then((res) => { if (res.data.code == 200) { this.getState(res.data.number, project) } else { setTimeout(() => { this.getJobId(id) }, 1000) } }) },Copy the code

If the id in the queue is not found, it will be checked again the next second, until it is found

The back-end code

app.get("/getJobId",async function(req,res){ var number = await getNumber(req.query) var result = {code:200,number: Number, MSG :"jogId request successful "}; res.send(result); })Copy the code
function getNumber (par) { return new Promise(function(resolve,reject){ request({ method: 'GET', url: 'http://192.168.0.85:8080/queue/item/' + par. ResultId + '/ API/json, headers: {' cache-control: 'no-cache', 'Content-Type': 'application/x-www-form-urlencoded' }}, function (error, response, body) { if (error) throw new Error(error); const executable = JSON.parse(response.body).executable if (executable) { resolve(executable.number) } }) }) }Copy the code

The executable field is the number value of the task ID. The value of the executable field is the task ID. Note that this id is not the same thing as the queue ID Instead of queuing, we can check the status of the task, according to this ID check task status

The front-end code

GetState (number, project) {enclosing showProgress = true Server ({url: "http://192.168.0.85:8088/getStauts? id=' + number + '&job=' + project, method: 'get', needLoading: false }).then((res) => { if (res.data.stauts) { this.modalInfo.loading = false this.showProgress = false $message. Success (' build successful ') this.modalinfo. visible = false} else {setTimeout(() => {this.getState(number), project) }, 1000) } }) },Copy the code

As above, poll, one second at a time, until the status of the build is found

The back-end code

app.get("/getStauts",async function(req,res){ var stauts = await getStauts(req.query) var result = {code:200,stauts: Stauts, MSG :"get request successful "}; res.send(result); })Copy the code
function getStauts (query) { return new Promise(function (resolve, Reject) {options1. Url = 'http://192.168.0.85:8080/job/' + query. Job + '/ lastBuild/API/json request (options1, function (error, response, body) { resolve(JSON.parse(response.body).result) }); })}Copy the code

The overall process is to query the ID of the task in the queue, and then query the execution ID of the task, because there may be other tasks in the queue, so we need to query, find the ID of the task execution, and then check the execution status through the execution ID, so that we can get this information in the visual interface.

Pay attention to item

One note here is that in the trigger build article we wrote earlier, the upload task was configured in

There is a problem, when we check the status, it checks the build status, so the build completes and returns success, but at this time, the upload action is not finished, the upload action is not monitored, so we need to change, add the upload task to the build

The configuration is the same as before, this will add the upload action to the build action, can listen to all actions.