3 files changed, 45 insertions, 1 deletions
diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue
index 668fcf3d673..04f910b6b80 100644
--- a/app/assets/javascripts/jobs/components/empty_state.vue
+++ b/app/assets/javascripts/jobs/components/empty_state.vue
@@ -49,7 +49,7 @@ export default {
       <div class="text-content">
         <h4 class="js-job-empty-state-title text-center">{{ title }}</h4>
 
-        <p v-if="content" class="js-job-empty-state-content">{{ content }}</p>
+        <p v-if="content" class="js-job-empty-state-content text-center">{{ content }}</p>
 
         <div v-if="action" class="text-center">
           <gl-link
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index dbadd224251..689d1cb97c7 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -15,6 +15,7 @@ import ErasedBlock from './erased_block.vue';
 import Log from './job_log.vue';
 import LogTopBar from './job_log_controllers.vue';
 import StuckBlock from './stuck_block.vue';
+import UnmetPrerequisitesBlock from './unmet_prerequisites_block.vue';
 import Sidebar from './sidebar.vue';
 import { sprintf } from '~/locale';
 import delayedJobMixin from '../mixins/delayed_job_mixin';
@@ -32,6 +33,7 @@ export default {
     Log,
     LogTopBar,
     StuckBlock,
+    UnmetPrerequisitesBlock,
     Sidebar,
     GlLoadingIcon,
     SharedRunner: () => import('ee_component/jobs/components/shared_runner_limit_block.vue'),
@@ -48,6 +50,11 @@ export default {
       required: false,
       default: null,
     },
+    deploymentHelpUrl: {
+      type: String,
+      required: false,
+      default: null,
+    },
     endpoint: {
       type: String,
       required: true,
@@ -82,6 +89,7 @@ export default {
     ]),
     ...mapGetters([
       'headerTime',
+      'hasUnmetPrerequisitesFailure',
       'shouldRenderCalloutMessage',
       'shouldRenderTriggeredLabel',
       'hasEnvironment',
@@ -223,6 +231,12 @@ export default {
           :runners-path="runnerSettingsUrl"
         />
 
+        <unmet-prerequisites-block
+          v-if="hasUnmetPrerequisitesFailure"
+          class="js-job-failed"
+          :help-path="deploymentHelpUrl"
+        />
+
         <shared-runner
           v-if="shouldRenderSharedRunnerLimitWarning"
           class="js-shared-runner-limit"
diff --git a/app/assets/javascripts/jobs/components/unmet_prerequisites_block.vue b/app/assets/javascripts/jobs/components/unmet_prerequisites_block.vue
new file mode 100644
index 00000000000..25a8da84873
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/unmet_prerequisites_block.vue
@@ -0,0 +1,30 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+/**
+ * Renders Unmet Prerequisites block for job's view.
+ */
+export default {
+  components: {
+    GlLink,
+  },
+  props: {
+    helpPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="bs-callout bs-callout-danger">
+    <p class="js-failed-unmet-prerequisites append-bottom-0">
+      {{
+        s__(`Job|This job failed because the necessary resources were not successfully created.`)
+      }}
+
+      <gl-link :href="helpPath" class="js-help-path">
+        <strong> {{ __('More information') }} </strong>
+      </gl-link>
+    </p>
+  </div>
+</template>