1 files changed, 137 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue
new file mode 100644
index 00000000000..f39ce545656
--- /dev/null
+++ b/app/assets/javascripts/ide/components/jobs/detail.vue
@@ -0,0 +1,137 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+import _ from 'underscore';
+import { __ } from '../../../locale';
+import tooltip from '../../../vue_shared/directives/tooltip';
+import Icon from '../../../vue_shared/components/icon.vue';
+import ScrollButton from './detail/scroll_button.vue';
+import JobDescription from './detail/description.vue';
+
+const scrollPositions = {
+  top: 0,
+  bottom: 1,
+};
+
+export default {
+  directives: {
+    tooltip,
+  },
+  components: {
+    Icon,
+    ScrollButton,
+    JobDescription,
+  },
+  data() {
+    return {
+      scrollPos: scrollPositions.top,
+    };
+  },
+  computed: {
+    ...mapState('pipelines', ['detailJob']),
+    isScrolledToBottom() {
+      return this.scrollPos === scrollPositions.bottom;
+    },
+    isScrolledToTop() {
+      return this.scrollPos === scrollPositions.top;
+    },
+    jobOutput() {
+      return this.detailJob.output || __('No messages were logged');
+    },
+  },
+  mounted() {
+    this.getTrace();
+  },
+  methods: {
+    ...mapActions('pipelines', ['fetchJobTrace', 'setDetailJob']),
+    scrollDown() {
+      if (this.$refs.buildTrace) {
+        this.$refs.buildTrace.scrollTo(0, this.$refs.buildTrace.scrollHeight);
+      }
+    },
+    scrollUp() {
+      if (this.$refs.buildTrace) {
+        this.$refs.buildTrace.scrollTo(0, 0);
+      }
+    },
+    scrollBuildLog: _.throttle(function buildLogScrollDebounce() {
+      const { scrollTop } = this.$refs.buildTrace;
+      const { offsetHeight, scrollHeight } = this.$refs.buildTrace;
+
+      if (scrollTop + offsetHeight === scrollHeight) {
+        this.scrollPos = scrollPositions.bottom;
+      } else if (scrollTop === 0) {
+        this.scrollPos = scrollPositions.top;
+      } else {
+        this.scrollPos = '';
+      }
+    }),
+    getTrace() {
+      return this.fetchJobTrace().then(() => this.scrollDown());
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="ide-pipeline build-page d-flex flex-column flex-fill">
+    <header class="ide-job-header d-flex align-items-center">
+      <button
+        class="btn btn-default btn-sm d-flex"
+        @click="setDetailJob(null)"
+      >
+        <icon
+          name="chevron-left"
+        />
+        {{ __('View jobs') }}
+      </button>
+    </header>
+    <div class="top-bar d-flex border-left-0">
+      <job-description
+        :job="detailJob"
+      />
+      <div class="controllers ml-auto">
+        <a
+          v-tooltip
+          :title="__('Show complete raw log')"
+          :href="detailJob.rawPath"
+          data-placement="top"
+          data-container="body"
+          class="controllers-buttons"
+          target="_blank"
+        >
+          <i
+            aria-hidden="true"
+            class="fa fa-file-text-o"
+          ></i>
+        </a>
+        <scroll-button
+          :disabled="isScrolledToTop"
+          direction="up"
+          @click="scrollUp"
+        />
+        <scroll-button
+          :disabled="isScrolledToBottom"
+          direction="down"
+          @click="scrollDown"
+        />
+      </div>
+    </div>
+    <pre
+      ref="buildTrace"
+      class="build-trace mb-0 h-100"
+      @scroll="scrollBuildLog"
+    >
+      <code
+        v-show="!detailJob.isLoading"
+        class="bash"
+        v-html="jobOutput"
+      >
+      </code>
+      <div
+        v-show="detailJob.isLoading"
+        class="build-loader-animation"
+      >
+      </div>
+    </pre>
+  </div>
+</template>