Use `stuck` flag from API

Removes isJobStuck check from frontend and uses
the flag being provided by the API

app/assets/javascripts/jobs/components/job_app.vue

@@ -81,7 +81,6 @@
         'shouldRenderCalloutMessage',
         'shouldRenderTriggeredLabel',
         'hasEnvironment',
-        'isJobStuck',
         'shouldRenderSharedRunnerLimitWarning',
         'hasTrace',
         'emptyStateIllustration',
@@ -200,7 +199,7 @@
 
         <!-- Body Section -->
         <stuck-block
-          v-if="isJobStuck"
+          v-if="job.stuck"
           class="js-job-stuck"
           :has-no-runners-for-project="job.runners.available"
           :tags="job.tags"

app/assets/javascripts/jobs/store/getters.js

@@ -41,15 +41,6 @@ export const emptyStateIllustration = state =>
   (state.job && state.job.status && state.job.status.illustration) || {};
 
 export const emptyStateAction = state =>  (state.job && state.job.status && state.job.status.action) || {};
-/**
- * When the job is pending and there are no available runners
- * we need to render the stuck block;
- *
- * @returns {Boolean}
- */
-export const isJobStuck = state =>
-  (!_.isEmpty(state.job.status) && state.job.status.group === 'pending') &&
-  (!_.isEmpty(state.job.runners) && state.job.runners.available === false);
 
 // ee-only start
 /**

spec/features/projects/jobs_spec.rb

@@ -740,6 +740,46 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
         expect(page).not_to have_css('.js-job-sidebar.right-sidebar-collpased')
       end
     end
+
+    context 'stuck', :js do
+      context 'without active runners available' do
+        let(:runner) { create(:ci_runner, :instance, active: false) }
+        let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner) }
+
+        it 'renders message about job being stuck' do
+          visit project_job_path(project, job)
+          wait_for_requests
+
+          expect(page).to have_css('.js-stuck-no-active-runner')
+          expect(page).to have_content("This job is stuck, because you don\'t have any active runners that can run this job.")
+        end
+      end
+
+      context 'without active runners with tags' do
+        let(:runner) { create(:ci_runner, :instance, active: false) }
+        let(:job) { create(:ci_build, :pending, pipeline: pipeline, runner: runner, tag_list: %w(docker linux)) }
+
+        it 'renders message about job being stuck because of no tags' do
+          visit project_job_path(project, job)
+          wait_for_requests
+
+          expect(page).to have_css('.js-stuck-with-tags')
+          expect(page).to have_content("This job is stuck, because you don't have any active runners online with any of these tags assigned to them:")
+        end
+      end
+
+      context 'without active runners assigned to the job' do
+        let(:job) { create(:ci_build, :pending, pipeline: pipeline) }
+
+        it 'renders message about job being stuck' do
+          visit project_job_path(project, job)
+          wait_for_requests
+
+          expect(page).to have_css('.js-stuck-no-active-runner')
+          expect(page).to have_content("This job is stuck, because you don't have any active runners that can run this job.")
+        end
+      end
+    end
   end
 
   describe "POST /:project/jobs/:id/cancel", :js do

spec/javascripts/jobs/components/job_app_spec.js

@@ -144,6 +144,7 @@ describe('Job App ', () => {
               text: 'pending',
               details_path: 'path',
             },
+            stuck: true,
             runners: {
               available: false,
             },
@@ -169,6 +170,7 @@ describe('Job App ', () => {
               text: 'pending',
               details_path: 'path',
             },
+            stuck: true,
             runners: {
               available: false,
             },

spec/javascripts/jobs/store/getters_spec.js

@@ -175,47 +175,6 @@ describe('Job Store Getters', () => {
     });
   });
 
-  describe('isJobStuck', () => {
-    describe('when job is pending and runners are not available', () => {
-      it('returns true', () => {
-        localState.job.status = {
-          group: 'pending',
-        };
-        localState.job.runners = {
-          available: false,
-        };
-
-        expect(getters.isJobStuck(localState)).toEqual(true);
-      });
-    });
-
-    describe('when job is not pending', () => {
-      it('returns false', () => {
-        localState.job.status = {
-          group: 'running',
-        };
-        localState.job.runners = {
-          available: false,
-        };
-
-        expect(getters.isJobStuck(localState)).toEqual(false);
-      });
-    });
-
-    describe('when runners are available', () => {
-      it('returns false', () => {
-        localState.job.status = {
-          group: 'pending',
-        };
-        localState.job.runners = {
-          available: true,
-        };
-
-        expect(getters.isJobStuck(localState)).toEqual(false);
-      });
-    });
-  });
-
   describe('shouldRenderSharedRunnerLimitWarning', () => {
     describe('without runners information', () => {
       it('returns false', () => {