diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-09-17 17:16:34 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-09-17 17:16:34 +0300 |
commit | 4ab54c2233e91f60a80e5b6fa2181e6899fdcc3e (patch) | |
tree | 2b256ff8dfe63dafe7f42b0d995f9e74fd1dc48b /app/assets/javascripts/jobs | |
parent | bd860c22f6a4b9473cbddd34a53eead8235a7ea1 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/jobs')
6 files changed, 63 insertions, 23 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; |