removed need for job.js

it was a super hacky implementation that just wasn't working as intended

current sitatuon is still super hacky, but getting better!

app/assets/javascripts/ide/components/jobs/detail.vue

 <script>
 import { mapState } from 'vuex';
+import _ from 'underscore';
+import axios from '../../../lib/utils/axios_utils';
+import CiIcon from '../../../vue_shared/components/ci_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
-import Job from '../../../job';
+
+const scrollPositions = {
+  top: 'top',
+  bottom: 'bottom',
+};
 
 export default {
   directives: {
     tooltip,
   },
   components: {
+    CiIcon,
     Icon,
   },
+  data() {
+    return {
+      scrollPos: scrollPositions.top,
+      loading: true,
+    };
+  },
   computed: {
     ...mapState('pipelines', ['detailJob']),
     rawUrl() {
       return `${this.detailJob.path}/raw`;
     },
+    isScrolledToBottom() {
+      return this.scrollPos === scrollPositions.bottom;
+    },
+    isScrolledToTop() {
+      return this.scrollPos === scrollPositions.top;
+    },
+    jobId() {
+      return `#${this.detailJob.id}`;
+    },
   },
   mounted() {
-    this.job = new Job({
-      buildStage: 'a',
-      buildState: this.detailJob.status.text,
-      pagePath: this.detailJob.path,
-      redirectToJob: false,
-    });
+    this.getTrace();
   },
   beforeDestroy() {
-    this.job.destroy();
+    clearTimeout(this.timeout);
+  },
+  methods: {
+    scrollDown() {
+      this.$refs.buildTrace.scrollTo(0, this.$refs.buildTrace.scrollHeight);
     },
+    scrollUp() {
+      this.$refs.buildTrace.scrollTo(0, 0);
+    },
+    scrollBuildLog: _.throttle(function scrollDebounce() {
+      const scrollTop = this.$refs.buildTrace.scrollTop;
+      const offsetHeight = this.$refs.buildTrace.offsetHeight;
+      const scrollHeight = this.$refs.buildTrace.scrollHeight;
+
+      if (scrollTop + offsetHeight === scrollHeight) {
+        this.scrollPos = scrollPositions.bottom;
+      } else if (scrollTop === 0) {
+        this.scrollPos = scrollPositions.top;
+      } else {
+        this.scrollPos = '';
+      }
+    }),
+    getTrace(state = null) {
+      return axios
+        .get(`${this.detailJob.path}/trace`, {
+          params: {
+            state,
+          },
+        })
+        .then(({ data }) => {
+          this.loading = !data.complete;
+          this.detailJob.output = data.append ? `${this.detailJob.output}${data.html}` : data.html;
+
+          if (!data.complete) {
+            this.timeout = setTimeout(() => this.getTrace(data.state), 4000);
+          }
+        })
+        .then(() => this.$nextTick())
+        .then(() => this.scrollDown());
+    },
+  },
+  scrollPositions,
 };
 </script>
 
@@ -46,19 +104,38 @@ export default {
         {{ __('View jobs') }}
       </button>
     </header>
-    <div class="build-trace-container prepend-top-default">
     <div
-        v-once
-        class="top-bar js-top-bar"
+      class="top-bar"
     >
+      <div class="ide-job-details float-left">
+        <ci-icon
+          class="append-right-4"
+          :status="detailJob.status"
+          :borderless="true"
+          :size="24"
+        />
+        {{ detailJob.name }}
+        <a
+          :href="detailJob.path"
+          target="_blank"
+          class="ide-external-link prepend-left-4"
+        >
+          {{ jobId }}
+          <icon
+            name="external-link"
+            :size="12"
+          />
+        </a>
+      </div>
       <div class="controllers float-right">
         <a
           v-tooltip
           :title="__('Show complete raw')"
           data-placement="top"
           data-container="body"
-            class="js-raw-link-controller controllers-buttons"
+          class="controllers-buttons"
           :href="rawUrl"
+          target="_blank"
         >
           <i
             aria-hidden="true"
@@ -73,9 +150,10 @@ export default {
           :title="__('Scroll to top')"
         >
           <button
-              class="js-scroll-up btn-scroll btn-transparent btn-blank"
-              disabled
+            class="btn-scroll btn-transparent btn-blank"
             type="button"
+            :disabled="isScrolledToTop"
+            @click="scrollUp"
           >
             <icon
               name="scroll_up"
@@ -87,12 +165,13 @@ export default {
           class="controllers-buttons"
           data-container="body"
           data-placement="top"
-            :title="__('Scroll to top')"
+          :title="__('Scroll to bottom')"
         >
           <button
-              class="js-scroll-up btn-scroll btn-transparent btn-blank"
-              disabled
+            class="btn-scroll btn-transparent btn-blank"
             type="button"
+            :disabled="isScrolledToBottom"
+            @click="scrollDown"
           >
             <icon
               name="scroll_down"
@@ -103,12 +182,19 @@ export default {
     </div>
     <pre
       class="build-trace"
-        id="build-trace"
+      ref="buildTrace"
+      @scroll="scrollBuildLog"
+    >
+      <code
+        class="bash"
+        v-html="detailJob.output"
+      ></code>
+      <div
+        v-show="loading"
+        class="build-loader-animation"
       >
-        <code class="bash js-build-output">
-        </code>
-      </pre>
       </div>
+    </pre>
   </div>
 </template>
 
@@ -122,4 +208,16 @@ export default {
 .ide-tree-header .btn {
   display: flex;
 }
+
+.ide-job-details {
+  display: flex;
+}
+
+.ide-job-details .ci-status-icon {
+  height: 0;
+}
+
+.build-trace {
+  margin-bottom: 0;
+}
 </style>

app/assets/javascripts/ide/stores/modules/pipelines/utils.js

@@ -5,4 +5,5 @@ export const normalizeJob = job => ({
   status: job.status,
   path: job.build_path,
   started: job.started,
+  output: '',
 });

app/assets/javascripts/job.js

@@ -22,8 +22,6 @@ export default class Job {
     this.$window = $(window);
     this.logBytes = 0;
     this.updateDropdown = this.updateDropdown.bind(this);
-    this.redirectToJob =
-      this.options.redirectToJob !== undefined ? this.options.redirectToJob : true;
 
     this.$buildTrace = $('#build-trace');
     this.$buildRefreshAnimation = $('.js-build-refresh');
@@ -46,16 +44,24 @@ export default class Job {
       .off('click', '.js-sidebar-build-toggle')
       .on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
 
-    this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
+    this.$document
+      .off('click', '.stage-item')
+      .on('click', '.stage-item', this.updateDropdown);
 
     // add event listeners to the scroll buttons
-    this.$scrollTopBtn.off('click').on('click', this.scrollToTop.bind(this));
+    this.$scrollTopBtn
+      .off('click')
+      .on('click', this.scrollToTop.bind(this));
 
-    this.$scrollBottomBtn.off('click').on('click', this.scrollToBottom.bind(this));
+    this.$scrollBottomBtn
+      .off('click')
+      .on('click', this.scrollToBottom.bind(this));
 
     this.scrollThrottled = _.throttle(this.toggleScroll.bind(this), 100);
 
-    this.$window.off('scroll').on('scroll', () => {
+    this.$window
+      .off('scroll')
+      .on('scroll', () => {
         if (!this.isScrolledToBottom()) {
           this.toggleScrollAnimation(false);
         } else if (this.isScrolledToBottom() && !this.isLogComplete) {
@@ -73,10 +79,6 @@ export default class Job {
     this.getBuildTrace();
   }
 
-  destroy() {
-    clearTimeout(this.timeout);
-  }
-
   initAffixTopArea() {
     /**
       If the browser does not support position sticky, it returns the position as static.
@@ -100,7 +102,8 @@ export default class Job {
 
     const windowHeight = $(window).height();
     if (this.canScroll()) {
-      if (currentPosition > 0 && scrollHeight - currentPosition !== windowHeight) {
+      if (currentPosition > 0 &&
+        (scrollHeight - currentPosition !== windowHeight)) {
       // User is in the middle of the log
 
         this.toggleDisableButton(this.$scrollTopBtn, false);
@@ -166,11 +169,10 @@ export default class Job {
   }
 
   getBuildTrace() {
-    return axios
-      .get(`${this.pagePath}/trace.json`, {
+    return axios.get(`${this.pagePath}/trace.json`, {
       params: { state: this.state },
     })
-      .then(res => {
+      .then((res) => {
         const log = res.data;
 
         if (!this.fetchingStatusFavicon) {
@@ -220,7 +222,7 @@ export default class Job {
           this.toggleScrollAnimation(false);
         }
 
-        if (log.status !== this.buildStatus && this.redirectToJob) {
+        if (log.status !== this.buildStatus) {
           visitUrl(this.pagePath);
         }
       })