Improve Job detail view to make it refreshed in real-time instead of reloading

What does this MR do?

Same idea from https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/11797 but for Job details page

• Page does not refresh anymore
• Moves information out of the titlebar into the sidebar
• Structural and small changes to the sidebar to make the sidebar more appropriate for that information
• On mobile viewports, the new issue and retry buttons move to the sidebar
• Update meta-info widget design slightly (remove background and use bigger status icon, similar to mr widget)

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #31397 (closed) Closes #30901 (closed) Closes #29948 (closed) Closes #24339 (closed)

added 2 commits

• 6c872396 - 1 commit from branch zj-job-view-goes-real-time
• 2bfb7783 - Merge branch 'zj-job-view-goes-real-time' into 31397-job-detail-real-time

Compare with previous version

changed the description

changed the description

deleted source branch 31397-job-detail-real-time

restored source branch 31397-job-detail-real-time

added 146 commits

• 4535d520..a167ec31 - 146 commits from branch zj-job-view-goes-real-time

Compare with previous version

changed target branch from zj-job-view-goes-real-time to master

@iamphill pinging you earlier since this will be big and I am not sure how to divide this :)

The plan:

• Make header and a small sidebar part (the one that shows the job information) realtime in job page
• Don't refresh page anymore
• Update UX

added ~19173 Deliverable frontend labels

changed milestone to %9.3

assigned to @filipa

added 127 commits

• 7ef12f25...c3410760 - 125 commits from branch master
• c97b0c06 - [ci skip] Remove interceptor
• 23761f11 - Merge branch 'master' into 31397-job-detail-real-time

Compare with previous version

marked the checklist item Changelog entry added, if necessary as completed

unmarked as a Work In Progress

changed the description

changed the description

@iamphill can you please take another look? Since the last time you reviewed it has

• fixed your comments
• Added Sidebar section in vue.js
• Updated UX in sidebar in haml.

Still missing the tests tho :)

resolved all discussions

@iamphill forgot to mention that sidebar parts you already reviewed the initial commit in this MR: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10987

added 79 commits

• ce39ddf9...4a811fbc - 77 commits from branch master
• 04c7a931 - Merge branch 'master' into 31397-job-detail-real-time
• c7ab812d - Adds JS specs

Compare with previous version

resolved all discussions

@iamphill can you please review this again? :) I believe there are still some broken rspec tests, tho. Working on them :)

@ayufan @zj there is something odd:

I look at status to get job status, Build failed but I get success:

{
	"id": 4701,
	"name": "test",
	"build_path": "/root/ci-mock/-/jobs/4701",
	"retry_path": "/root/ci-mock/-/jobs/4701/retry",
	"playable": false,
	"created_at": "2017-06-01T09:27:25.167Z",
	"updated_at": "2017-06-01T09:27:29.144Z",
	"status": {
		"icon": "icon_status_success",
		"text": "passed",
		"label": "passed",
		"group": "success",
		"has_details": true,
		"details_path": "/root/ci-mock/-/jobs/4701",
		"favicon": "/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico",
		"action": {
			"icon": "icon_action_retry",
			"title": "Retry",
			"path": "/root/ci-mock/-/jobs/4701/retry",
			"method": "post"
		}
	},
	"coverage": null,
	"erased_at": null,
	"duration": 2.086385,
	"tags": [],
	"user": {
		"name": "Root",
		"username": "root",
		"id": 1,
		"state": "active",
		"avatar_url": null,
		"web_url": "http://localhost:3000/root",
		"path": "/root"
	},
	"erase_path": "/root/ci-mock/-/jobs/4701/erase",
	"artifacts": [null],
	"runner": {
		"id": 1,
		"description": "local ci runner",
		"edit_path": "/root/ci-mock/runners/1/edit"
	},
	"pipeline": {
		"id": 139,
		"user": {
			"name": "Root",
			"username": "root",
			"id": 1,
			"state": "active",
			"avatar_url": null,
			"web_url": "http://localhost:3000/root",
			"path": "/root"
		},
		"active": false,
		"coverage": null,
		"source": "unknown",
		"created_at": "2017-05-23T09:19:57.989Z",
		"updated_at": "2017-06-06T18:09:11.267Z",
		"path": "/root/ci-mock/pipelines/139",
		"flags": {
			"latest": true,
			"stuck": false,
			"yaml_errors": false,
			"retryable": true,
			"cancelable": false
		},
		"details": {
			"status": {
				"icon": "icon_status_failed",
				"text": "failed",
				"label": "failed",
				"group": "failed",
				"has_details": true,
				"details_path": "/root/ci-mock/pipelines/139",
				"favicon": "/assets/ci_favicons/dev/favicon_status_failed-5f8edf9ec029ce816326fba3b72e6d48c4699845c6d0a7a40cef401395117931.ico"
			},
			"duration": 3,
			"finished_at": "2017-06-06T18:09:11.256Z"
		},
		"ref": {
			"name": "master",
			"path": "/root/ci-mock/commits/master",
			"tag": false,
			"branch": true
		},
		"commit": {
			"id": "b3b3a7b753e018842cecb68ff3c5ee0934ea0c5c",
			"short_id": "b3b3a7b7",
			"title": "Update .gitlab-ci.yml",
			"created_at": "2017-05-23T10:19:53.000+01:00",
			"parent_ids": ["798e5f902592192afaba73f4668ae30e56eae492"],
			"message": "Update .gitlab-ci.yml",
			"author_name": "Root",
			"author_email": "admin@example.com",
			"authored_date": "2017-05-23T10:19:53.000+01:00",
			"committer_name": "Root",
			"committer_email": "admin@example.com",
			"committed_date": "2017-05-23T10:19:53.000+01:00",
			"author": {
				"name": "Root",
				"username": "root",
				"id": 1,
				"state": "active",
				"avatar_url": null,
				"web_url": "http://localhost:3000/root",
				"path": "/root"
			},
			"author_gravatar_url": null,
			"commit_url": "http://localhost:3000/root/ci-mock/commit/b3b3a7b753e018842cecb68ff3c5ee0934ea0c5c",
			"commit_path": "/root/ci-mock/commit/b3b3a7b753e018842cecb68ff3c5ee0934ea0c5c"
		},
		"retry_path": "/root/ci-mock/pipelines/139/retry"
	},
	"raw_path": "/root/ci-mock/builds/4701/raw"
}

Looking good just 1 little spacing issue that I could see:

Removing UJS actions is causing this to break 😭 because if we do not redirect the user we will be showing always the same job, which is not the same behaviour we have in master.

Going to update that.

@ayufan @zj there are 3 broken tests that I do not know how to fix:

1. new_issue_path does not match: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/11848/diffs#a8746c2349d1de7ab1c1a2b1638bb27c6bf6ffb5_132_166 Test was moved from views to features because it needs JS

2. page.driver.post(retry_namespace_project_job_path(project.namespace, project, build2)) throws an error saying it's undefined, I added :js flag: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/11848/diffs#a8746c2349d1de7ab1c1a2b1638bb27c6bf6ffb5_359_358

3. Spinach test in CI lint is failing because @javascript tag was added: https://gitlab.com/gitlab-org/gitlab-ce/builds/18072779

Those are the only thing keeping this to be merged, can you please help?

resolved all discussions

@iamphill added prepend-top-10 to the loading icon and removed the postAction logic since we need this with UJS and redirecting, can you please review again? Thanks!

Please assign back to me, since there are 3 broken tests that I do not know how to solve 😭

assigned to @iamphill

@filipa Does this fix (3)?

diff --git a/features/steps/project/builds/summary.rb b/features/steps/project/builds/summary.rb
index 229e5d7cdf..af034dd575 100644
--- a/features/steps/project/builds/summary.rb
+++ b/features/steps/project/builds/summary.rb
@@ -13,7 +13,7 @@ class Spinach::Features::ProjectBuildsSummary < Spinach::FeatureSteps
   step 'I see button to CI Lint' do
     page.within('.nav-controls') do
       ci_lint_tool_link = page.find_link('CI lint')
-      expect(ci_lint_tool_link[:href]).to eq ci_lint_path
+      expect(ci_lint_tool_link[:href]).to eq ci_lint_url
     end
   end
 

Change looks good 👍

assigned to @filipa

@godfat thanks for the help but it does not work

✘  Then I see button to CI Lint          # features/steps/project/builds/summary.rb:13


        expected: "http://localhost/ci/lint"
             got: "http://127.0.0.1:58968/ci/lint"

@ayufan F1 😬

@filipa This is silly, but does it work?

diff --git a/features/steps/project/builds/summary.rb b/features/steps/project/builds/summary.rb
index 229e5d7cdf..af034dd575 100644
--- a/features/steps/project/builds/summary.rb
+++ b/features/steps/project/builds/summary.rb
@@ -13,7 +13,7 @@ class Spinach::Features::ProjectBuildsSummary < Spinach::FeatureSteps
   step 'I see button to CI Lint' do
     page.within('.nav-controls') do
       ci_lint_tool_link = page.find_link('CI lint')
-      expect(ci_lint_tool_link[:href]).to eq ci_lint_path
+      expect(ci_lint_tool_link[:href]).to eq ci_lint_url(host: "#{::Capybara.current_session.server.host}:#{::Capybara.current_session.server.port}")
     end
   end

@godfat ♥️ it does work! :) Thank you so much 🙏

@filipa No problems. This should fix the other one which is missing retry_path:

diff --git a/spec/serializers/build_entity_spec.rb b/spec/serializers/build_entity_spec.rb
index 46d43a80ef..93c478b6e0 100644
--- a/spec/serializers/build_entity_spec.rb
+++ b/spec/serializers/build_entity_spec.rb
@@ -8,6 +8,8 @@ describe BuildEntity do
 
   before do
     allow(request).to receive(:current_user).and_return(user)
+
+    project.add_developer(user)
   end
 
   let(:entity) do

I believe that I pushed fixes for rest of the failures

resolved all discussions

@iamphill are you ok with @ayufan merging this when it's green?

mentioned in issue #30721 (closed)

Yes

assigned to @ayufan

Thanks @grzesiek @ayufan and @godfat for your help. ❤️

Assigning to me since we will remove niceScroll and can break something in here and I want to be sure.

changed milestone to %9.4

assigned to @filipa

Oh I am happy to see niceScroll removed. I always prefer native scrolling (not sure if we're doing that though)

@godfat the sidebar is still going to be use it tho :( but I would also like to get rid of it 😁

added 462 commits

• ba6c75a6...7f584edb - 460 commits from branch master
• 55b0df61 - Merge branch 'master' into 31397-job-detail-real-time
• db5feaf7 - Remove not needed margin-right

Compare with previous version

added 462 commits

• ba6c75a6...7f584edb - 460 commits from branch master
• 55b0df61 - Merge branch 'master' into 31397-job-detail-real-time
• db5feaf7 - Remove not needed margin-right

Compare with previous version

added 462 commits

• ba6c75a6...7f584edb - 460 commits from branch master
• 55b0df61 - Merge branch 'master' into 31397-job-detail-real-time
• db5feaf7 - Remove not needed margin-right

Compare with previous version

omg is finally green 💚

@iamphill can you please review this again? Thanks!

(I'll create an ee branch meanwhile)

assigned to @iamphill

approved this merge request

merged

mentioned in commit 194c40df

mentioned in merge request !12302 (merged)