From 4ab54c2233e91f60a80e5b6fa2181e6899fdcc3e Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Tue, 17 Sep 2019 14:16:34 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../jobs/components/log/duration_badge.vue         | 13 ++++++
 .../javascripts/jobs/components/log/line.vue       |  2 +-
 .../jobs/components/log/line_header.vue            | 16 ++++++-
 .../jobs/components/log/line_number.vue            |  9 ++--
 app/assets/javascripts/jobs/components/log/log.vue | 11 ++++-
 app/assets/javascripts/jobs/store/utils.js         | 35 +++++++++-------
 app/assets/javascripts/test_utils/simulate_drag.js |  8 ++--
 app/assets/stylesheets/framework/job_log.scss      | 49 ++++++++++++++++++++++
 app/assets/stylesheets/framework/sortable.scss     | 18 ++++++++
 app/assets/stylesheets/framework/variables.scss    |  3 ++
 app/assets/stylesheets/pages/boards.scss           | 14 -------
 app/assets/stylesheets/pages/projects.scss         | 10 ++---
 12 files changed, 140 insertions(+), 48 deletions(-)
 create mode 100644 app/assets/javascripts/jobs/components/log/duration_badge.vue
 create mode 100644 app/assets/stylesheets/framework/job_log.scss

(limited to 'app/assets')

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,3 +1,13 @@
+/**
+ * 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
  *
@@ -5,6 +15,7 @@
  *    - 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,
     });
diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss
new file mode 100644
index 00000000000..5c2491c8233
--- /dev/null
+++ b/app/assets/stylesheets/framework/job_log.scss
@@ -0,0 +1,49 @@
+.job-log {
+  font-family: $monospace-font;
+  padding: $gl-padding-8 $input-horizontal-padding;
+  margin: 0 0 $gl-padding-8;
+  font-size: 13px;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: $gl-text-color-inverted;
+  border-radius: $border-radius-small;
+  min-height: 42px;
+  background-color: $builds-trace-bg;
+}
+
+.line {
+  padding: 1px $gl-padding 1px $job-log-line-padding;
+}
+
+.line-number {
+  color: $gl-text-color-inverted;
+  padding: 0 $gl-padding-8;
+  min-width: $job-line-number-width;
+  margin-left: -$job-line-number-width;
+  padding-right: 1em;
+
+  &:hover,
+  &:active,
+  &:visited {
+    text-decoration: underline;
+    color: $gl-text-color-inverted;
+  }
+}
+
+.collapsible-line {
+  &:hover {
+    background-color: rgba($white-light, 0.2);
+  }
+
+  .arrow {
+    margin-left: -$job-arrow-margin;
+  }
+}
+
+.duration {
+  background: $gl-gray-400;
+}
+
+.loader-animation {
+  @include build-loader-animation;
+}
diff --git a/app/assets/stylesheets/framework/sortable.scss b/app/assets/stylesheets/framework/sortable.scss
index 8c070200135..25868061d04 100644
--- a/app/assets/stylesheets/framework/sortable.scss
+++ b/app/assets/stylesheets/framework/sortable.scss
@@ -90,3 +90,21 @@
     padding: 0;
   }
 }
+
+.is-dragging {
+  // Important because plugin sets inline CSS
+  opacity: 1 !important;
+
+  * {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    // !important to make sure no style can override this when dragging
+    cursor: grabbing !important;
+  }
+
+  &.no-drop * {
+    cursor: no-drop !important;
+  }
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index faa0a9909d5..e77527ac130 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -606,6 +606,9 @@ $blame-blue: #254e77;
 */
 $builds-trace-bg: #111;
 $job-log-highlight-height: 18px;
+$job-log-line-padding: 62px;
+$job-line-number-width: 40px;
+$job-arrow-margin: 50px;
 
 /*
 * Commit Page
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index e77a2d1e333..4bf0abccd00 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -2,20 +2,6 @@
   cursor: grab;
 }
 
-.is-dragging {
-  // Important because plugin sets inline CSS
-  opacity: 1 !important;
-
-  * {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    // !important to make sure no style can override this when dragging
-    cursor: grabbing !important;
-  }
-}
-
 .is-ghost {
   opacity: 0.3;
   pointer-events: none;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c80beceae52..801e9e7204c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -889,11 +889,7 @@ pre.light-well {
     @include basic-list-stats;
     display: flex;
     align-items: center;
-    padding: $gl-padding 0;
-
-    @include media-breakpoint-up(lg) {
-      padding: $gl-padding 0;
-    }
+    padding: $gl-padding-12 0;
 
     &.no-description {
       @include media-breakpoint-up(sm) {
@@ -909,7 +905,7 @@ pre.light-well {
   }
 
   h2 {
-    font-size: $gl-font-size-large;
+    font-size: $gl-font-size;
     font-weight: $gl-font-weight-bold;
     margin-bottom: 0;
 
@@ -951,6 +947,7 @@ pre.light-well {
 
     .description {
       line-height: 1.5;
+      color: $gl-text-color-secondary;
     }
 
     @include media-breakpoint-down(md) {
@@ -1096,7 +1093,6 @@ pre.light-well {
     &:not(.explore) {
       .forks {
         display: none;
-
       }
     }
 
-- 
cgit v1.2.3