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

2 files changed, 64 insertions, 92 deletions

diff --git a/app/views/projects/jobs/_sidebar.html.haml b/app/views/projects/jobs/_sidebar.html.haml
index 09d4ddc243b..8b9e6e57ec4 100644
--- a/app/views/projects/jobs/_sidebar.html.haml
+++ b/app/views/projects/jobs/_sidebar.html.haml
@@ -1,19 +1,15 @@
 - builds = @build.pipeline.builds.to_a
 
 %aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "101", "spy" => "affix" } }
-  .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
-    Job
-    %strong ##{@build.id}
-    %a.gutter-toggle.pull-right.js-sidebar-build-toggle{ href: "#" }
-      = icon('angle-double-right')
-  - if @build.coverage
-    .block.coverage
-      .title
-        Test coverage
-      %p.build-detail-row
-        #{@build.coverage}%
-
   .blocks-container
+    .block
+      %strong
+        = @build.name
+      %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-build-toggle{ href: "#", 'aria-label': 'Toggle Sidebar', role: 'button' }
+        = icon('angle-double-right')
+
+    #js-details-block-vue
+
     - if can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?)
       .block{ class: ("block-first" if !@build.coverage) }
         .title
@@ -40,37 +36,6 @@
               = link_to browse_namespace_project_job_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default' do
                 Browse
 
-    .block{ class: ("block-first" if !@build.coverage && !(can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?))) }
-      .title
-        Job details
-        - if can?(current_user, :update_build, @build) && @build.retryable?
-          = link_to "Retry job", retry_namespace_project_job_path(@project.namespace, @project, @build), class: 'pull-right retry-link', method: :post
-      - if @build.merge_request
-        %p.build-detail-row
-          %span.build-light-text Merge Request:
-          = link_to "#{@build.merge_request.to_reference}", merge_request_path(@build.merge_request), class: 'bold'
-      - if @build.duration
-        %p.build-detail-row
-          %span.build-light-text Duration:
-          = time_interval_in_words(@build.duration)
-      - if @build.finished_at
-        %p.build-detail-row
-          %span.build-light-text Finished:
-          #{time_ago_with_tooltip(@build.finished_at)}
-      - if @build.erased_at
-        %p.build-detail-row
-          %span.build-light-text Erased:
-          #{time_ago_with_tooltip(@build.erased_at)}
-      %p.build-detail-row
-        %span.build-light-text Runner:
-        - if @build.runner && current_user && current_user.admin
-          = link_to "##{@build.runner.id}", admin_runner_path(@build.runner.id)
-        - elsif @build.runner
-          \##{@build.runner.id}
-      .btn-group.btn-group-justified{ role: :group }
-        - if @build.active?
-          = link_to "Cancel", cancel_namespace_project_job_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post
-
     - if @build.trigger_request
       .build-widget
         %h4.title
@@ -87,26 +52,29 @@
 
           - @build.trigger_request.variables.each do |key, value|
             .hide.js-build
-              .js-build-variable= key
-              .js-build-value= value
+              .js-build-variable.trigger-build-variable= key
+              .js-build-value.trigger-build-value= value
 
     .block
-      .title
-        Commit title
+      %p
+        Commit
+        = link_to @build.pipeline.short_sha, namespace_project_commit_path(@project.namespace, @project, @build.pipeline.sha), class: 'commit-sha link-commit'
+        = clipboard_button(text: @build.pipeline.short_sha, title: "Copy commit SHA to clipboard")
+        - if @build.merge_request
+          in
+          = link_to "#{@build.merge_request.to_reference}", merge_request_path(@build.merge_request), class: 'link-commit'
+
       %p.build-light-text.append-bottom-0
         #{@build.pipeline.git_commit_title}
 
-    - if @build.tags.any?
-      .block
-        .title
-          Tags
-        - @build.tag_list.each do |tag|
-          %span.label.label-primary
-            = tag
-
     - if @build.pipeline.stages_count > 1
       .dropdown.build-dropdown
-        .title Stage
+        .title
+          %span{ class: "ci-status-icon-#{@build.pipeline.status}" }
+            = ci_icon_for_status(@build.pipeline.status)
+          = link_to "##{@build.pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, @build.pipeline), class: 'link-commit'
+          from
+          = link_to "#{@build.pipeline.ref}", namespace_project_branch_path(@project.namespace, @project, @build.pipeline.ref), class: 'link-commit'
         %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
           %span.stage-selection More
           = icon('chevron-down')
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index 987068dc18e..c73bae0a2c9 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -3,9 +3,8 @@
 = render "projects/pipelines/head"
 
 %div{ class: container_class }
-  .build-page
-    = render "header"
-
+  .build-page.js-build-page
+    #js-build-header-vue
     - if @build.stuck?
       - unless @build.any_runners_online?
         .bs-callout.bs-callout-warning.js-build-stuck
@@ -47,47 +46,52 @@
             - if environment.try(:last_deployment)
               and will overwrite the #{deployment_link(environment.last_deployment, text: 'latest deployment')}
 
-    .prepend-top-default.js-build-erased
-      - if @build.erased?
+    - if @build.erased?
+      .prepend-top-default.js-build-erased
         .erased.alert.alert-warning
           - if @build.erased_by_user?
             Job has been erased by #{link_to(@build.erased_by_name, user_path(@build.erased_by))} #{time_ago_with_tooltip(@build.erased_at)}
           - else
             Job has been erased #{time_ago_with_tooltip(@build.erased_at)}
 
-    .prepend-top-default
-      .build-trace-container#build-trace
-        .top-bar.sticky
-          .js-truncated-info.truncated-info.hidden<
-            Showing last
-            %span.js-truncated-info-size.truncated-info-size><
-            KiB of log -
-            %a.js-raw-link.raw-link{ href: raw_namespace_project_job_path(@project.namespace, @project, @build) }>< Complete Raw
-          .controllers
-            - if @build.has_trace?
-              = link_to raw_namespace_project_job_path(@project.namespace, @project, @build),
-                      title: 'Show complete raw',
-                      data: { placement: 'top', container: 'body' },
-                      class: 'js-raw-link-controller has-tooltip controllers-buttons' do
-                = icon('file-text-o')
+    .build-trace-container#build-trace
+      .top-bar.sticky
+        .js-truncated-info.truncated-info.hidden<
+          Showing last
+          %span.js-truncated-info-size.truncated-info-size><
+          KiB of log -
+          %a.js-raw-link.raw-link{ href: raw_namespace_project_job_path(@project.namespace, @project, @build) }>< Complete Raw
+        .controllers
+          - if @build.has_trace?
+            = link_to raw_namespace_project_job_path(@project.namespace, @project, @build),
+                    title: 'Show complete raw',
+                    data: { placement: 'top', container: 'body' },
+                    class: 'js-raw-link-controller has-tooltip controllers-buttons' do
+              = icon('file-text-o')
 
-            - if can?(current_user, :update_build, @project) && @build.erasable?
-              = link_to erase_namespace_project_job_path(@project.namespace, @project, @build),
-                        method: :post,
-                        data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
-                        title: 'Erase job log',
-                        class: 'has-tooltip js-erase-link controllers-buttons' do
-                = icon('trash')
-            .has-tooltip.controllers-buttons{ title: 'Scroll to top', data: { placement: 'top', container: 'body'} }
-              %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
-                = custom_icon('scroll_up')
-            .has-tooltip.controllers-buttons{ title: 'Scroll to bottom', data: { placement: 'top', container: 'body'} }
-              %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
-                = custom_icon('scroll_down')
-        .bash.sticky.js-scroll-container
-          %code.js-build-output
-          .build-loader-animation.js-build-refresh
+          - if can?(current_user, :update_build, @project) && @build.erasable?
+            = link_to erase_namespace_project_job_path(@project.namespace, @project, @build),
+                      method: :post,
+                      data: { confirm: 'Are you sure you want to erase this build?', placement: 'top', container: 'body' },
+                      title: 'Erase job log',
+                      class: 'has-tooltip js-erase-link controllers-buttons' do
+              = icon('trash')
+          .has-tooltip.controllers-buttons{ title: 'Scroll to top', data: { placement: 'top', container: 'body'} }
+            %button.js-scroll-up.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
+              = custom_icon('scroll_up')
+          .has-tooltip.controllers-buttons{ title: 'Scroll to bottom', data: { placement: 'top', container: 'body'} }
+            %button.js-scroll-down.btn-scroll.btn-transparent.btn-blank{ type: 'button', disabled: true }
+              = custom_icon('scroll_down')
+      .bash.sticky.js-scroll-container
+        %code.js-build-output
+        .build-loader-animation.js-build-refresh
 
   = render "sidebar"
 
 .js-build-options{ data: javascript_build_options }
+
+#js-job-details-vue{ data: { endpoint: namespace_project_job_path(@project.namespace, @project, @build, format: :json) } }
+
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('job_details')