Handle empty states for job page

3 files changed, 36 insertions, 21 deletions

diff --git a/app/views/projects/jobs/_empty_state.html.haml b/app/views/projects/jobs/_empty_state.html.haml
index c66313bdbf3..311934d9c33 100644
--- a/app/views/projects/jobs/_empty_state.html.haml
+++ b/app/views/projects/jobs/_empty_state.html.haml
@@ -1,7 +1,7 @@
 - illustration = local_assigns.fetch(:illustration)
 - illustration_size = local_assigns.fetch(:illustration_size)
 - title = local_assigns.fetch(:title)
-- content = local_assigns.fetch(:content)
+- content = local_assigns.fetch(:content, nil)
 - action = local_assigns.fetch(:action, nil)
 
 .row.empty-state
@@ -11,7 +11,8 @@
   .col-xs-12
     .text-content
       %h4.text-center= title
-      %p= content
+      - if content
+        %p= content
       - if action
         .text-center
           = action
diff --git a/app/views/projects/jobs/_empty_status.html.haml b/app/views/projects/jobs/_empty_status.html.haml
new file mode 100644
index 00000000000..707085cddd5
--- /dev/null
+++ b/app/views/projects/jobs/_empty_status.html.haml
@@ -0,0 +1,29 @@
+- if @build.playable?
+  = render 'empty_state',
+    illustration: 'illustrations/manual_action.svg',
+    illustration_size: 'svg-394',
+    title: _('This job requires a manual action'),
+    content: _('This job depends on a user to trigger its process. Often they are used to deploy code to production environments'),
+    action: ( link_to _('Trigger this manual action'), play_project_job_path(@project, @build), method: :post, class: 'btn btn-primary', title: _('Trigger this manual action') )
+- elsif @build.created?
+  = render 'empty_state',
+    illustration: 'illustrations/job_not_triggered.svg',
+    illustration_size: 'svg-306',
+    title: _('This job has not been triggered yet'),
+    content: _('This job depends on upstream jobs that need to succeed in order for this job to be triggered')
+- elsif @build.canceled?
+  = render 'empty_state',
+    illustration: 'illustrations/canceled-job_empty.svg',
+    illustration_size: 'svg-430',
+    title: _('This job has been canceled')
+- elsif @build.skipped?
+  = render 'empty_state',
+    illustration: 'illustrations/canceled-job_empty.svg',
+    illustration_size: 'svg-430',
+    title: _('This job has been skipped')
+- else
+  = render 'empty_state',
+    illustration: 'illustrations/pending_job_empty.svg',
+    illustration_size: 'svg-430',
+    title: _('This job has not started yet'),
+    content: _('This job is in pending state and is waiting to be picked by a runner')
diff --git a/app/views/projects/jobs/show.html.haml b/app/views/projects/jobs/show.html.haml
index 849c273db8c..04c28841511 100644
--- a/app/views/projects/jobs/show.html.haml
+++ b/app/views/projects/jobs/show.html.haml
@@ -54,7 +54,8 @@
             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)}
-    - if @build.started?
+
+    - if @build.has_trace?
       .build-trace-container.prepend-top-default
         .top-bar.js-top-bar
           .js-truncated-info.truncated-info.hidden-xs.pull-left.hidden<
@@ -88,25 +89,9 @@
         %pre.build-trace#build-trace
           %code.bash.js-build-output
           .build-loader-animation.js-build-refresh
-    - elsif @build.playable?
-      = render 'empty_state',
-        illustration: 'illustrations/manual_action.svg',
-        illustration_size: 'svg-394',
-        title: _('This job requires a manual action'),
-        content: _('This job depends on a user to trigger its process. Often they are used to deploy code to production environments'),
-        action: ( link_to _('Trigger this manual action'), play_project_job_path(@project, @build), method: :post, class: 'btn btn-primary', title: _('Trigger this manual action') )
-    - elsif @build.created?
-      = render 'empty_state',
-        illustration: 'illustrations/job_not_triggered.svg',
-        illustration_size: 'svg-306',
-        title: _('This job has not been triggered yet'),
-        content: _('This job depends on upstream jobs that need to succeed in order for this job to be triggered')
     - else
-      = render 'empty_state',
-        illustration: 'illustrations/pending_job_empty.svg',
-        illustration_size: 'svg-430',
-        title: _('This job has not started yet'),
-        content: _('This job is in pending state and is waiting to be picked by a runner')
+      = render "empty_status"
+
   = render "sidebar"
 
 .js-build-options{ data: javascript_build_options }