1 files changed, 44 insertions, 6 deletions

diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 3cabbfc6e27..35104c80694 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -1,10 +1,13 @@
 <script>
 import _ from 'underscore';
 import { mapGetters, mapState, mapActions } from 'vuex';
+import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
+import { polyfillSticky } from '~/lib/utils/sticky';
 import bp from '~/breakpoints';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import Callout from '~/vue_shared/components/callout.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 import createStore from '../store';
 import EmptyState from './empty_state.vue';
 import EnvironmentsBlock from './environments_block.vue';
@@ -13,6 +16,8 @@ import Log from './job_log.vue';
 import LogTopBar from './job_log_controllers.vue';
 import StuckBlock from './stuck_block.vue';
 import Sidebar from './sidebar.vue';
+import { sprintf } from '~/locale';
+import delayedJobMixin from '../mixins/delayed_job_mixin';
 
 export default {
   name: 'JobPageApp',
@@ -23,11 +28,14 @@ export default {
     EmptyState,
     EnvironmentsBlock,
     ErasedBlock,
+    Icon,
     Log,
     LogTopBar,
     StuckBlock,
     Sidebar,
+    GlLoadingIcon,
   },
+  mixins: [delayedJobMixin],
   props: {
     runnerSettingsUrl: {
       type: String,
@@ -87,6 +95,17 @@ export default {
     shouldRenderContent() {
       return !this.isLoading && !this.hasError;
     },
+
+    emptyStateTitle() {
+      const { emptyStateIllustration, remainingTime } = this;
+      const { title } = emptyStateIllustration;
+
+      if (this.isDelayedJob) {
+        return sprintf(title, { remainingTime });
+      }
+
+      return title;
+    },
   },
   watch: {
     // Once the job log is loaded,
@@ -95,6 +114,14 @@ export default {
       if (_.isEmpty(oldVal) && !_.isEmpty(newVal.pipeline)) {
         this.fetchStages();
       }
+
+      if (newVal.archived) {
+        this.$nextTick(() => {
+          if (this.$refs.sticky) {
+            polyfillSticky(this.$refs.sticky);
+          }
+        });
+      }
     },
   },
   created() {
@@ -112,16 +139,13 @@ export default {
     window.addEventListener('resize', this.onResize);
     window.addEventListener('scroll', this.updateScroll);
   },
-
   mounted() {
     this.updateSidebar();
   },
-
   destroyed() {
     window.removeEventListener('resize', this.onResize);
     window.removeEventListener('scroll', this.updateScroll);
   },
-
   methods: {
     ...mapActions([
       'setJobEndpoint',
@@ -216,14 +240,28 @@ export default {
           :erased-at="job.erased_at"
         />
 
+        <div 
+          v-if="job.archived"
+          ref="sticky"
+          class="js-archived-job prepend-top-default archived-sticky sticky-top"
+        >
+          <icon 
+            name="lock"
+            class="align-text-bottom"
+          />
+                
+          {{ __('This job is archived. Only the complete pipeline can be retried.') }}
+        </div>
         <!--job log -->
         <div
           v-if="hasTrace"
-          class="build-trace-container prepend-top-default">
+          class="build-trace-container"
+        >
           <log-top-bar
             :class="{
               'sidebar-expanded': isSidebarOpen,
-              'sidebar-collapsed': !isSidebarOpen
+              'sidebar-collapsed': !isSidebarOpen,
+              'has-archived-block': job.archived
             }"
             :erase-path="job.erase_path"
             :size="traceSize"
@@ -248,7 +286,7 @@ export default {
           class="js-job-empty-state"
           :illustration-path="emptyStateIllustration.image"
           :illustration-size-class="emptyStateIllustration.size"
-          :title="emptyStateIllustration.title"
+          :title="emptyStateTitle"
           :content="emptyStateIllustration.content"
           :action="emptyStateAction"
         />