1 files changed, 89 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/job/stuck_block.vue b/app/assets/javascripts/jobs/components/job/stuck_block.vue
new file mode 100644
index 00000000000..d7a26d22406
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/job/stuck_block.vue
@@ -0,0 +1,89 @@
+<script>
+import { GlAlert, GlBadge, GlLink, GlSprintf } from '@gitlab/ui';
+import { s__ } from '~/locale';
+/**
+ * Renders Stuck Runners block for job's view.
+ */
+export default {
+  components: {
+    GlAlert,
+    GlBadge,
+    GlLink,
+    GlSprintf,
+  },
+  props: {
+    hasOfflineRunnersForProject: {
+      type: Boolean,
+      required: true,
+    },
+    tags: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    runnersPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    hasNoRunnersWithCorrespondingTags() {
+      return this.tags.length > 0;
+    },
+    protectedBranchSettingsDocsLink() {
+      return 'https://docs.gitlab.com/runner/security/index.html#reduce-the-security-risk-of-using-privileged-containers';
+    },
+    stuckData() {
+      if (this.hasNoRunnersWithCorrespondingTags) {
+        return {
+          text: s__(
+            `Job|This job is stuck because of one of the following problems. There are no active runners online, no runners for the %{linkStart}protected branch%{linkEnd}, or no runners that match all of the job's tags:`,
+          ),
+          dataTestId: 'job-stuck-with-tags',
+          showTags: true,
+        };
+      } else if (this.hasOfflineRunnersForProject) {
+        return {
+          text: s__(`Job|This job is stuck because the project
+                doesn't have any runners online assigned to it.`),
+          dataTestId: 'job-stuck-no-runners',
+          showTags: false,
+        };
+      }
+
+      return {
+        text: s__(`Job|This job is stuck because you don't
+              have any active runners that can run this job.`),
+        dataTestId: 'job-stuck-no-active-runners',
+        showTags: false,
+      };
+    },
+  },
+};
+</script>
+<template>
+  <gl-alert variant="warning" :dismissible="false">
+    <p class="gl-mb-0" :data-testid="stuckData.dataTestId">
+      <gl-sprintf :message="stuckData.text">
+        <template #link="{ content }">
+          <a
+            class="gl-display-inline-block"
+            :href="protectedBranchSettingsDocsLink"
+            target="_blank"
+          >
+            {{ content }}
+          </a>
+        </template>
+      </gl-sprintf>
+      <template v-if="stuckData.showTags">
+        <gl-badge v-for="tag in tags" :key="tag" variant="info">
+          {{ tag }}
+        </gl-badge>
+      </template>
+    </p>
+    {{ __('Go to project') }}
+    <gl-link v-if="runnersPath" :href="runnersPath">
+      {{ __('CI settings') }}
+    </gl-link>
+  </gl-alert>
+</template>