Updates Vue job components to match new API

1 files changed, 43 insertions, 33 deletions

diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 2cbf0f85266..3e62ababea3 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -1,8 +1,9 @@
 <script>
+  import { polyfillSticky } from '~/lib/utils/sticky';
   import Icon from '~/vue_shared/components/icon.vue';
   import tooltip from '~/vue_shared/directives/tooltip';
   import { numberToHumanSize } from '~/lib/utils/number_utils';
-  import { s__, sprintf } from '~/locale';
+  import { sprintf } from '~/locale';
 
   export default {
     components: {
@@ -12,44 +13,48 @@
       tooltip,
     },
     props: {
-      canEraseJob: {
-        type: Boolean,
-        required: true,
+      erasePath: {
+        type: String,
+        required: false,
+        default: null,
       },
       size: {
         type: Number,
         required: true,
       },
-      rawTracePath: {
+      rawPath: {
         type: String,
         required: false,
         default: null,
       },
-      canScrollToTop: {
+      isScrollTopDisabled: {
+        type: Boolean,
+        required: true,
+      },
+      isScrollBottomDisabled: {
+        type: Boolean,
+        required: true,
+      },
+      isScrollingDown: {
         type: Boolean,
         required: true,
       },
-      canScrollToBottom: {
+      isTraceSizeVisible: {
         type: Boolean,
         required: true,
       },
     },
     computed: {
       jobLogSize() {
-        return sprintf('Showing last %{startSpanTag} %{size} %{endSpanTag} of log -', {
-          startSpanTag: '<span class="s-truncated-info-size truncated-info-size">',
-          endSpanTag: '</span>',
+        return sprintf('Showing last %{size} of log -', {
           size: numberToHumanSize(this.size),
         });
       },
     },
+    mounted() {
+      polyfillSticky(this.$el);
+    },
     methods: {
-      handleEraseJobClick() {
-        // eslint-disable-next-line no-alert
-        if (window.confirm(s__('Job|Are you sure you want to erase this job?'))) {
-          this.$emit('eraseJob');
-        }
-      },
       handleScrollToTop() {
         this.$emit('scrollJobLogTop');
       },
@@ -57,48 +62,52 @@
         this.$emit('scrollJobLogBottom');
       },
     },
+
   };
 </script>
 <template>
   <div class="top-bar">
     <!-- truncate information -->
     <div class="js-truncated-info truncated-info d-none d-sm-block float-left">
-      <p v-html="jobLogSize"></p>
+      <template v-if="isTraceSizeVisible">
+        {{ jobLogSize }}
 
-      <a
-        v-if="rawTracePath"
-        :href="rawTracePath"
-        class="js-raw-link raw-link"
-      >
-        {{ s__("Job|Complete Raw") }}
-      </a>
+        <a
+          v-if="rawPath"
+          :href="rawPath"
+          class="js-raw-link raw-link"
+        >
+          {{ s__("Job|Complete Raw") }}
+        </a>
+      </template>
     </div>
     <!-- eo truncate information -->
 
     <div class="controllers float-right">
       <!-- links -->
       <a
-        v-if="rawTracePath"
+        v-if="rawPath"
         v-tooltip
         :title="s__('Job|Show complete raw')"
-        :href="rawTracePath"
+        :href="rawPath"
         class="js-raw-link-controller controllers-buttons"
         data-container="body"
       >
         <icon name="doc-text" />
       </a>
 
-      <button
-        v-if="canEraseJob"
+      <a
+        v-if="erasePath"
         v-tooltip
         :title="s__('Job|Erase job log')"
-        type="button"
+        :href="erasePath"
+        data-confirm="__('Are you sure you want to erase this build?')"
         class="js-erase-link controllers-buttons"
         data-container="body"
-        @click="handleEraseJobClick"
+        data-method="post"
       >
         <icon name="remove" />
-      </button>
+      </a>
       <!-- eo links -->
 
       <!-- scroll buttons -->
@@ -109,7 +118,7 @@
         data-container="body"
       >
         <button
-          :disabled="!canScrollToTop"
+          :disabled="isScrollTopDisabled"
           type="button"
           class="js-scroll-top btn-scroll btn-transparent btn-blank"
           @click="handleScrollToTop"
@@ -125,9 +134,10 @@
         data-container="body"
       >
         <button
-          :disabled="!canScrollToBottom"
+          :disabled="isScrollBottomDisabled"
           type="button"
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
+          :class="{ animate: isScrollingDown }"
           @click="handleScrollToBottom"
         >
           <icon name="scroll_down"/>