Update individual pipeline view in real-time or at least refresh (rewrite in Vue)

Resources

FE @filipa

After https://gitlab.com/gitlab-org/gitlab-ce/issues/22604 is finished let's rewrite the pipeline graph in Vue and have manual actions have live effect on the graph instead of redirect and refresh.

This is a result of cutting scope to let things be deliverable as spoken of in meeting: https://gitlab.com/gitlab-org/gitlab-ce/issues/22604#note_19297671

cc: @jschatz1 @filipa @ayufan @markpundsack

let's get this scheduled

Mentioned in issue #22604 (closed)

Added ~19173 frontend labels

Changed title: Rewrite pipeline graph in vue → Update individual pipeline VIEW in real-time or at least refresh (rewrite in Vue)

https://gitlab.com/gitlab-org/gitlab-ce/issues/24981 and https://gitlab.com/gitlab-org/gitlab-ce/issues/25075 can be seen as related or be a combined effort with this issue.

Changed title: Update individual pipeline VIEW in real-time or at least refresh (rewrite in Vue) → Update individual pipeline view in real-time or at least refresh (rewrite in Vue)

Would be great to pick this up in 8.16.

Milestone changed to %Backlog

Added ~897282 label

This has to be done in small steps 😸 We can divide this view in several small components to make the transition easier both for frontend and backend (since we'll need all the info to be provided to the API)

One small component is the builds table in the builds tab, issue is here: #25177 (closed)

This will also need backend since we'll need endpoints with the data

added ~901060 label

mentioned in issue #22088 (closed)

mentioned in issue #25419 (closed)

changed milestone to %8.16

added Deliverable and removed ~897282 labels

assigned to @filipa

@ayufan can we have a backend person assigned to this one?

@filipa @grzesiek is your point of contact :)

added Stretch and removed Deliverable labels

mentioned in issue #26259 (closed)

changed milestone to %Backlog

removed Stretch label

removed assignee

mentioned in issue #29131 (moved)

Second part of https://gitlab.com/gitlab-org/gitlab-ce/issues/5983

mentioned in issue #5983 (closed)

mentioned in issue #25177 (closed)

changed milestone to %9.2

added Deliverable label

In %9.2 we should focus on getting Pipeline Graph auto-updated.

In order to make Pipeline Graph realtime we are rewriting it with vuejs, here is how we can move the show view to vuejs

We don't need to make it all at once. In this issue we can start only with the Graph tab component. What do you think of the component division / architecture @iamphill @fatihacet ?

@filipa Makes sense to me.

Maybe the title should be outside of the widget component? I don't know if that widget is used elsewhere, but taking the title out of it would mean it could be.

Don't know if its just the image, but are you including the sub nav in the Vue app as well?

Also, I know you probably will, but that graph tab itself could be split it into a few components 👍

Thank you @iamphill yes, I agree with everything.

Maybe the title should be outside of the widget component? I don't know if that widget is used elsewhere, but taking the title out of it would mean it could be.

Yes, title should be outside.

Don't know if its just the image, but are you including the sub nav in the Vue app as well?

Just the image, will make a better one.

Also, I know you probably will, but that graph tab itself could be split it into a few components

Yes, we have some components there, will update the diagram with them.

@zj @ayufan

The goal is to make only the pipelines graph real time. We can either make an endpoint only for the graph or for the graph and the info on the top of the page.

For the graph we need to know:

1. Each stage (that represents each column in the graph)
2. Each job inside each stage
3. link
4. name
5. status
6. action 1. type: retry || cancel 1. path
7. whether it should render the dropdown with jobs or not. When this dropdown is clicked, we need to show a list of jobs. This is a different endpoint, correct? This list need to have for each job the same info (link, name, status, action)
8. number of grouped jobs to show in the dropdown handler

example (we can improve the names, obviously 😬 )

{
  stages: [
    {
      name: "prepare",
      jobs: [
        {
          status: "success",
          name: "knapsack",
          action: {
            type: retry || cancel,
            path: 'path to action'
          },
          path: 'path to job',
          size: 2 // if it's bigger than 0 we render a dropdown
          endpoint: // need to know to which endpoint need to make the request when dropdown is clicked
        }
      ]
    }
  ]
}

@filipa I'm ok with that, but a couple of things:

You are splitting on stages, while I would say thats a property of single job. Also, what dropdown are you referring to? As action, manual should be one too, however I understand this wasn't a formal spec ;).

My proposal would be more like: This removes some inferred data too.

{
  "id": 1,
  "state": "finished",
  "jobs": [
    {
      "status": "success",
      "name": "knapsack",
      "action": {
            "type": retry || cancel,
            "path": 'path to action'
      },
      "path": 'path to job',
      "endpoint": // need to know to which endpoint need to make the request when dropdown is clicked
    }
  ]    
}

I think that @filipa is correct.

We should return stages > jobs. This is how we show that in ~Frontend, and also in the future this is how the backend representation will look like.

mentioned in issue #29393 (moved)

mentioned in merge request !10777 (merged)

mentioned in issue #31227 (moved)

mentioned in issue #26308 (closed)

assigned to @filipa

mentioned in merge request !10878 (merged)

mentioned in merge request !10972 (merged)

added real-time label

mentioned in issue #31849 (closed)

changed milestone to %9.3

closed via merge request !10777 (merged)

reopened

Thank you for reopening. This implementation is not the best. Often it stays on the same stage even if I refresh. Then I hard-refresh (clear cache), then it changes/finishes.

mentioned in commit 8c911468

@gaui That is because of https://gitlab.com/gitlab-org/gitlab-ce/issues/31127. pipelines#show cached by Etag, but the cache is not properly expired.

/cc @grzesiek

@dosuken123 Ah, thank you. Subscribed to that issue.

mentioned in issue #31198 (moved)

closed via merge request !10878 (merged)

mentioned in merge request !11152

changed milestone to %9.2