Add latest changes from gitlab-org/gitlab@master

7 files changed, 67 insertions, 27 deletions

diff --git a/app/assets/javascripts/jobs/components/log/duration_badge.vue b/app/assets/javascripts/jobs/components/log/duration_badge.vue
new file mode 100644
index 00000000000..83f62703d27
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/log/duration_badge.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+  props: {
+    duration: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="duration rounded align-self-start px-2 ml-2 flex-shrink-0">{{ duration }}</div>
+</template>
diff --git a/app/assets/javascripts/jobs/components/log/line.vue b/app/assets/javascripts/jobs/components/log/line.vue
index 86d0fcc3b74..336ae623f0f 100644
--- a/app/assets/javascripts/jobs/components/log/line.vue
+++ b/app/assets/javascripts/jobs/components/log/line.vue
@@ -21,7 +21,7 @@ export default {
 <template>
   <div class="line">
     <line-number :line-number="line.lineNumber" :path="path" />
-    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
+    <span v-for="(content, i) in line.content" :key="i" :class="content.style">{{
       content.text
     }}</span>
   </div>
diff --git a/app/assets/javascripts/jobs/components/log/line_header.vue b/app/assets/javascripts/jobs/components/log/line_header.vue
index 4ec212d2333..af8de9ec0fa 100644
--- a/app/assets/javascripts/jobs/components/log/line_header.vue
+++ b/app/assets/javascripts/jobs/components/log/line_header.vue
@@ -1,11 +1,13 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import LineNumber from './line_number.vue';
+import DurationBadge from './duration_badge.vue';
 
 export default {
   components: {
     Icon,
     LineNumber,
+    DurationBadge,
   },
   props: {
     line: {
@@ -20,6 +22,11 @@ export default {
       type: String,
       required: true,
     },
+    duration: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     iconName() {
@@ -35,11 +42,16 @@ export default {
 </script>
 
 <template>
-  <div class="line collapsible-line" role="button" @click="handleOnClick">
-    <icon :name="iconName" class="arrow" />
+  <div
+    class="line collapsible-line d-flex justify-content-between"
+    role="button"
+    @click="handleOnClick"
+  >
+    <icon :name="iconName" class="arrow position-absolute" />
     <line-number :line-number="line.lineNumber" :path="path" />
     <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
       content.text
     }}</span>
+    <duration-badge v-if="duration" :duration="duration" />
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/log/line_number.vue b/app/assets/javascripts/jobs/components/log/line_number.vue
index e06836e2e97..6c76bef13d3 100644
--- a/app/assets/javascripts/jobs/components/log/line_number.vue
+++ b/app/assets/javascripts/jobs/components/log/line_number.vue
@@ -46,7 +46,10 @@ export default {
 };
 </script>
 <template>
-  <gl-link :id="lineNumberId" class="line-number" :href="buildLineNumber">{{
-    parsedLineNumber
-  }}</gl-link>
+  <gl-link
+    :id="lineNumberId"
+    class="d-inline-block text-right position-absolute line-number"
+    :href="buildLineNumber"
+    >{{ parsedLineNumber }}</gl-link
+  >
 </template>
diff --git a/app/assets/javascripts/jobs/components/log/log.vue b/app/assets/javascripts/jobs/components/log/log.vue
index 5db866afe5a..429796aeb4e 100644
--- a/app/assets/javascripts/jobs/components/log/log.vue
+++ b/app/assets/javascripts/jobs/components/log/log.vue
@@ -9,7 +9,7 @@ export default {
     LogLineHeader,
   },
   computed: {
-    ...mapState(['traceEndpoint', 'trace']),
+    ...mapState(['traceEndpoint', 'trace', 'isTraceComplete']),
   },
   methods: {
     ...mapActions(['toggleCollapsibleLine']),
@@ -20,12 +20,13 @@ export default {
 };
 </script>
 <template>
-  <code class="job-log">
+  <code class="job-log d-block">
     <template v-for="(section, index) in trace">
       <template v-if="section.isHeader">
         <log-line-header
           :key="`collapsible-${index}`"
           :line="section.line"
+          :duration="section.section_duration"
           :path="traceEndpoint"
           :is-closed="section.isClosed"
           @toggleLine="handleOnClickCollapsibleLine(section)"
@@ -41,5 +42,11 @@ export default {
       </template>
       <log-line v-else :key="section.offset" :line="section" :path="traceEndpoint" />
     </template>
+
+    <div v-if="!isTraceComplete" class="js-log-animation loader-animation pt-3 pl-3">
+      <div class="dot"></div>
+      <div class="dot"></div>
+      <div class="dot"></div>
+    </div>
   </code>
 </template>
diff --git a/app/assets/javascripts/jobs/store/utils.js b/app/assets/javascripts/jobs/store/utils.js
index f6a87b9a212..261ec90cd12 100644
--- a/app/assets/javascripts/jobs/store/utils.js
+++ b/app/assets/javascripts/jobs/store/utils.js
@@ -1,10 +1,21 @@
 /**
+ * Adds the line number property
+ * @param Object line
+ * @param Number lineNumber
+ */
+export const parseLine = (line = {}, lineNumber) => ({
+  ...line,
+  lineNumber,
+});
+
+/**
  * Parses the job log content into a structure usable by the template
  *
  * For collaspible lines (section_header = true):
  *    - creates a new array to hold the lines that are collpasible,
  *    - adds a isClosed property to handle toggle
  *    - adds a isHeader property to handle template logic
+ *    - adds the section_duration
  * For each line:
  *    - adds the index as  lineNumber
  *
@@ -14,27 +25,21 @@
 export const logLinesParser = (lines = [], lineNumberStart) =>
   lines.reduce((acc, line, index) => {
     const lineNumber = lineNumberStart ? lineNumberStart + index : index;
+    const last = acc[acc.length - 1];
+
     if (line.section_header) {
       acc.push({
         isClosed: true,
         isHeader: true,
-        line: {
-          ...line,
-          lineNumber,
-        },
-
+        line: parseLine(line, lineNumber),
         lines: [],
       });
-    } else if (acc.length && acc[acc.length - 1].isHeader) {
-      acc[acc.length - 1].lines.push({
-        ...line,
-        lineNumber,
-      });
-    } else {
-      acc.push({
-        ...line,
-        lineNumber,
-      });
+    } else if (acc.length && last.isHeader && !line.section_duration && line.content.length) {
+      last.lines.push(parseLine(line, lineNumber));
+    } else if (acc.length && last.isHeader && line.section_duration) {
+      last.section_duration = line.section_duration;
+    } else if (line.content.length) {
+      acc.push(parseLine(line, lineNumber));
     }
 
     return acc;
diff --git a/app/assets/javascripts/test_utils/simulate_drag.js b/app/assets/javascripts/test_utils/simulate_drag.js
index c9bf234fcce..f4090de3f1e 100644
--- a/app/assets/javascripts/test_utils/simulate_drag.js
+++ b/app/assets/javascripts/test_utils/simulate_drag.js
@@ -2,8 +2,8 @@ function simulateEvent(el, type, options = {}) {
   let event;
   if (!el) return null;
 
-  if (/^mouse/.test(type)) {
-    event = el.ownerDocument.createEvent('MouseEvents');
+  if (/^(pointer|mouse)/.test(type)) {
+    event = el.ownerDocument.createEvent('MouseEvent');
     event.initMouseEvent(
       type,
       true,
@@ -125,7 +125,7 @@ export default function simulateDrag(options) {
   const startTime = new Date().getTime();
   const duration = options.duration || 1000;
 
-  simulateEvent(fromEl, 'mousedown', {
+  simulateEvent(fromEl, 'pointerdown', {
     button: 0,
     clientX: fromRect.cx,
     clientY: fromRect.cy,
@@ -146,7 +146,7 @@ export default function simulateDrag(options) {
     const y = fromRect.cy + (toRect.cy - fromRect.cy) * progress;
     const overEl = fromEl.ownerDocument.elementFromPoint(x, y);
 
-    simulateEvent(overEl, 'mousemove', {
+    simulateEvent(overEl, 'pointermove', {
       clientX: x,
       clientY: y,
     });