Handle empty states for job page

app/views/projects/jobs/_empty_state.html.haml

 - 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

app/views/projects/jobs/_empty_status.html.haml

+- 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')

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 }

changelogs/unreleased/42568-pipeline-empty-state.yml

+---
+title: Improve empty state for canceled job
+merge_request: 17646
+author:
+type: fixed

db/fixtures/development/14_pipelines.rb

@@ -30,6 +30,10 @@ class Gitlab::Seeder::Pipelines
       queued_at: 8.hour.ago, started_at: 8.hour.ago, finished_at: 7.hour.ago },
     { name: 'spinach:osx', stage: 'test', status: :failed, allow_failure: true,
       queued_at: 8.hour.ago, started_at: 8.hour.ago, finished_at: 7.hour.ago },
+    { name: 'spinach:osx1', stage: 'test', status: :canceled,
+      queued_at: 8.hour.ago, started_at: 8.hour.ago, finished_at: 7.hour.ago },
+    { name: 'spinach:osx1', stage: 'test', status: :running,
+      queued_at: 8.hour.ago, started_at: 8.hour.ago, finished_at: 7.hour.ago },
 
     # deploy stage
     { name: 'staging', stage: 'deploy', environment: 'staging', status_event: :success,

spec/features/projects/jobs_spec.rb

@@ -419,6 +419,33 @@ feature 'Jobs' do
         expect(page).to have_content('This job is in pending state and is waiting to be picked by a runner')
       end
     end
+
+    context 'Canceled job' do
+      context 'with log' do
+        let(:job) { create(:ci_build, :canceled, :trace_artifact, pipeline: pipeline) }
+
+        before do
+          visit project_job_path(project, job)
+        end
+
+        it 'renders job log' do
+          expect(page).to have_selector('.js-build-output')
+        end
+      end
+
+      context 'without log' do
+        let(:job) { create(:ci_build, :canceled, pipeline: pipeline) }
+
+        before do
+          visit project_job_path(project, job)
+        end
+
+        it 'renders empty state' do
+          expect(page).not_to have_selector('.js-build-output')
+          expect(page).to have_content('This job has been canceled')
+        end
+      end
+    end
   end
 
   describe "POST /:project/jobs/:id/cancel", :js do