Adds badge for duration and CSS

app/assets/javascripts/jobs/components/log/duration_badge.vue

+<script>
+export default {
+  props: {
+    duration: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <div class="duration rounded align-self-start pr-2 pl-2 ml-2 flex-shrink-0">{{duration}}</div>
+</template>
\ No newline at end of file

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>

app/assets/javascripts/jobs/components/log/line_header.vue

 <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,14 @@ 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">{{
+    <span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">
+      {{
       content.text
-    }}</span>
+      }}
+    </span>
+    <duration-badge v-if="duration" :duration="duration" />
   </div>
 </template>

app/assets/javascripts/jobs/components/log/line_number.vue

@@ -46,7 +46,7 @@ export default {
 };
 </script>
 <template>
-  <gl-link :id="lineNumberId" class="line-number" :href="buildLineNumber">{{
+  <gl-link :id="lineNumberId" class="d-inline-block text-right position-absolute line-number" :href="buildLineNumber">{{
     parsedLineNumber
   }}</gl-link>
 </template>

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']),
@@ -26,6 +26,7 @@ export default {
         <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>

app/assets/javascripts/jobs/mock_data/trace.js

@@ -15,11 +15,11 @@ export default {
   lines: [
     {
       offset: 1000,
-      content: [{ text: __('Running with gitlab-runner 12.1.0 (de7731dd)') }],
+      content: [{ text: 'Running with gitlab-runner 12.1.0 (de7731dd)' }],
     },
     {
       offset: 1001,
-      content: [{ text: __(' on docker-auto-scale-com 8a6210b8') }],
+      content: [{ text: ' on docker-auto-scale-com 8a6210b8' }],
     },
     {
       offset: 1002,
@@ -34,12 +34,12 @@ export default {
     },
     {
       offset: 1003,
-      content: [{ text: __('Starting service postgres:9.6.14 ...') }],
+      content: [{ text: 'Starting service postgres:9.6.14 ...' }],
       sections: ['prepare-executor'],
     },
     {
       offset: 1004,
-      content: [{ text: __('Pulling docker image postgres:9.6.14 ...') }],
+      content: [{ text: 'Pulling docker image postgres:9.6.14 ...' }],
       sections: ['prepare-executor'],
     },
     {
@@ -74,7 +74,7 @@ export default {
     },
     {
       offset: 1009,
-      content: [{ text: __('Waiting for services to be up and running...') }],
+      content: [{ text: 'Waiting for services to be up and running...' }],
       sections: ['prepare-executor'],
     },
     {
@@ -110,8 +110,8 @@ export default {
       offset: 1013,
       content: [
         {
-          text: __(`Running on runner-8a6210b8-project-13083-concurrent-0 via
-      runner-8a6210b8-gsrm-1566561403-37c881a0...`),
+          text: `Running on runner-8a6210b8-project-13083-concurrent-0 via
+      runner-8a6210b8-gsrm-1566561403-37c881a0...`,
         },
       ],
       sections: ['prepare-script'],
@@ -121,7 +121,7 @@ export default {
     {
       offset: 1014,
       content: [
-        { text: __('Fetching changes with git depth set to 20..'), style: 'term-fg-l-green term-bold' },
+        { text: 'Fetching changes with git depth set to 20..', style: 'term-fg-l-green term-bold' },
       ],
       sections: ['get-sources'],
       section_header: true,
@@ -130,7 +130,7 @@ export default {
       offset: 1015,
       content: [
         {
-          text: __('Reinitialized existing Git repository in /builds/gitlab-org/gitlab-ce/.git/ '),
+          text: 'Reinitialized existing Git repository in /builds/gitlab-org/gitlab-ce/.git/ ',
         },
       ],
       sections: ['get-sources'],
@@ -157,7 +157,7 @@ export default {
       offset: 1018,
       content: [
         {
-          text: __('Checking out 061606b4 as 66454-create-feature-flag...'),
+          text: 'Checking out 061606b4 as 66454-create-feature-flag...',
           style: 'term-fg-l-green term-bold',
         },
       ],
@@ -212,7 +212,7 @@ export default {
       offset: 1024,
       content: [
         {
-          text: __('Skipping Git submodules setup'),
+          text: 'Skipping Git submodules setup',
           style: 'term-fg-l-green term-bold',
         },
       ],
@@ -234,7 +234,7 @@ export default {
       offset: 1027,
       content: [
         {
-          text: __('Checking cache for debian-stretch-ruby-2.6.3-node-12.x-3...'),
+          text: 'Checking cache for debian-stretch-ruby-2.6.3-node-12.x-3...',
           style: 'term-fg-l-green term-bold',
         },
       ],
@@ -265,7 +265,7 @@ export default {
       offset: 1031,
       content: [
         {
-          text: __('Successfully extracted cache'),
+          text: 'Successfully extracted cache',
           style: 'term-fg-l-green term-bold ',
         },
       ],
@@ -282,7 +282,7 @@ export default {
       offset: 1033,
       content: [
         {
-          text: __('Downloading artifacts for compile-assets pull-cache (278912482)...'),
+          text: 'Downloading artifacts for compile-assets pull-cache (278912482)...',
           style: 'term-fg-l-green term-bold',
         },
       ],
@@ -298,20 +298,20 @@ export default {
       offset: 1035,
       content: [
         {
-          text: __('Downloading artifacts from coordinator... ok '),
+          text: 'Downloading artifacts from coordinator... ok ',
           style: 'term-fg-l-green term-bold',
         },
         {
-          text: __(' id'),
+          text: ' id',
         },
         {
           text: '=278912482 responseStatus',
         },
         {
-          text: __('=200 OK token'),
+          text: '=200 OK token',
         },
         {
-          text: __('=DUNW1asp'),
+          text: '=DUNW1asp',
         },
       ],
       sections: ['download-artifacts'],
@@ -320,7 +320,7 @@ export default {
       offset: 1036,
       content: [
         {
-          text: __('Downloading artifacts for setup-test-env (278912484)...'),
+          text: 'Downloading artifacts for setup-test-env (278912484)...',
           style: 'term-fg-l-green term-bold',
         },
       ],
@@ -351,7 +351,7 @@ export default {
       offset: 1039,
       content: [
         {
-          text: __('Downloading artifacts for retrieve-tests-metadata (278912485)...'),
+          text: 'Downloading artifacts for retrieve-tests-metadata (278912485)...',
           style: 'term-fg-l-green term-bold',
         },
       ],
@@ -377,10 +377,10 @@ export default {
       offset: 1042,
       content: [
         {
-          text: __('Downloading artifacts from coordinator... ok '),
+          text: 'Downloading artifacts from coordinator... ok ',
         },
         {
-          text: __(' id'),
+          text: ' id',
           style: 'term-fg-l-green term-bold',
         },
         {

app/assets/javascripts/jobs/mock_data/trace_incremental.js

@@ -17,10 +17,10 @@ export default {
       offset: 1042,
       content: [
         {
-          text: __('Not downloading anything '),
+          text:'Not downloading anything ',
         },
         {
-          text: __(' id'),
+          text: ' id',
           style: 'term-fg-l-green term-bold',
         },
         {
@@ -34,10 +34,10 @@ export default {
       offset: 1043,
       content: [
         {
-          text: __('A filipa é fixe e o resto que se lixe '),
+          text: 'A filipa é fixe e o resto que se lixe ',
         },
         {
-          text: __(' id'),
+          text: ' id',
           style: 'term-fg-l-green term-bold',
         },
         {

app/assets/javascripts/jobs/store/actions.js

@@ -157,13 +157,13 @@ export const fetchTrace = ({ dispatch, state }) =>
       dispatch('toggleScrollisInBottom', isScrolledToBottom());
       dispatch('receiveTraceSuccess', data);
 
-      if (!data.complete) {
-        traceTimeout = setTimeout(() => {
-          dispatch('fetchTrace');
-        }, 4000);
-      } else {
+      // if (!data.complete) {
+      //   traceTimeout = setTimeout(() => {
+      //     dispatch('fetchTrace');
+      //   }, 4000);
+      // } else {
         dispatch('stopPollingTrace');
-      }
+      // }
     })
     .catch(() => dispatch('receiveTraceError'));
 

app/assets/javascripts/jobs/store/mutations.js

@@ -29,21 +29,21 @@ export default {
     }
 
     if (log.append) {
-      state.originalTrace = state.originalTrace.concat(log.trace);
-      state.trace = updateIncrementalTrace(state.originalTrace, state.trace, log.lines)
+      // state.originalTrace = state.originalTrace.concat(log.trace);
+      // state.trace = updateIncrementalTrace(state.originalTrace, state.trace, log.lines)
       state.traceSize += log.size;
     } else {
       // When the job still does not have a trace
       // the trace response will not have a defined
       // html or size. We keep the old value otherwise these
       // will be set to `undefined`
-      state.originalTrace = log.lines || state.trace;
-      state.trace = logLinesParser(log.lines) || state.trace;
+      // state.originalTrace = log.lines || state.trace;
+      // state.trace = logLinesParser(log.lines) || state.trace;
       state.traceSize = log.size || state.traceSize;
     }
 
     state.originalTrace = oldLog.lines;
-    state.trace = updateIncrementalTrace(state.originalTrace, logLinesParser(oldLog.lines), newLog.lines)
+    state.trace = logLinesParser(oldLog.lines);
 
     if (state.traceSize < log.total) {
       state.isTraceSizeVisible = true;

app/assets/javascripts/jobs/store/utils.js

 import _ from 'underscore';
+
+export const parseLine = (line = {}, lineNumber) => ({
+  ...line,
+  lineNumber,
+});
+
 /**
  * Parses the job log content into a structure usable by the template
  *
@@ -6,10 +12,10 @@ import _ from 'underscore';
  *    - 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
- * For each line:
- *    - adds the index as  lineNumber
+ *    - adds the section_duration
  *
- * TODO: Check if line has content before adding it to the array
+ * For each line:
+ *    - adds the index as lineNumber
  *
  * @param {Array} lines
  * @returns {Array}
@@ -21,22 +27,20 @@ export const logLinesParser = (lines = [], lineNumberStart) =>
       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 &&
+      acc[acc.length - 1].isHeader &&
+      !line.section_duration &&
+      line.content.length
+    ) {
+      acc[acc.length - 1].lines.push(parseLine(line, lineNumber));
+    } else if (acc.length && acc[acc.length - 1].isHeader && line.section_duration) {
+      acc[acc.length - 1].section_duration = line.section_duration;
+    } else if (line.content.length) {
+      acc.push(parseLine(line, lineNumber));
     }
 
     return acc;
@@ -65,6 +69,8 @@ export const updateIncrementalTrace = (originalTrace = [], oldLog = [], newLog =
   const lastIndex = cloneOldLog.length - 1;
   const lastLine = cloneOldLog[lastIndex];
 
+  // TODO: Keep the isClosed state!!!
+
   // The last line may be inside a collpasible section
   // If it is, we use the not parsed saved log, remove the last element
   // and parse the first received part togheter with the incremental log

app/assets/stylesheets/framework/job_log.scss

@@ -6,59 +6,45 @@
   font-size: 13px;
   word-break: break-all;
   word-wrap: break-word;
-  color: $gl-text-color;
-  background-color: $gray-light;
-  border: 1px solid $border-color;
+  color: $gl-text-color-inverted;
   border-radius: $border-radius-small;
-
-  clear: left;
   min-height: 42px;
-  color: #f1f1f1;
-  line-height: 19px;
-  background-color: #222;
+  background-color: $builds-trace-bg;
 }
 
 .line {
-  position: relative;
-  white-space: normal;
-  padding: 0 15px 0 62px;
-  margin: 0;
-}
-
-.line-text {
-  overflow-wrap: break-word;
+  padding: 1px $gl-padding 1px $job-log-line-padding;
 }
 
 .line-number {
-  color: #f1f1f1;
-  padding: 0 10px;
-
-
-  display: inline-block;
-    text-align: right;
-    min-width: 40px;
-    margin-left: -40px;
-    cursor: pointer;
-    text-decoration: none;
-    position: absolute;
-    padding-right: 1em;
-
-  &:hover {
+  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: #f1f1f1;
+    color: $gl-text-color-inverted;
   }
 }
 
 .collapsible-line {
-  position: relative;
-  cursor: pointer;
-
   &:hover {
     background-color: rgba($white-light, 0.2);
   }
 
   .arrow {
-    position: absolute;
-    margin-left: -50px;
+    margin-left: -$job-arrow-margin;
   }
-}
\ No newline at end of file
+}
+
+.duration {
+  background: $gl-gray-400;
+}
+
+.loader-animation {
+  @include build-loader-animation;
+}

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