From ef8c0f933c035229ee08afa031b3a36d32da61d4 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 12 Sep 2019 16:49:37 +0100 Subject: Adds badge for duration and CSS --- .../jobs/components/log/duration_badge.vue | 13 +++++ .../javascripts/jobs/components/log/line.vue | 2 +- .../jobs/components/log/line_header.vue | 18 +++++-- .../jobs/components/log/line_number.vue | 2 +- app/assets/javascripts/jobs/components/log/log.vue | 9 +++- app/assets/javascripts/jobs/mock_data/trace.js | 44 ++++++++-------- .../jobs/mock_data/trace_incremental.js | 8 +-- app/assets/javascripts/jobs/store/actions.js | 12 ++--- app/assets/javascripts/jobs/store/mutations.js | 10 ++-- app/assets/javascripts/jobs/store/utils.js | 40 +++++++++------ app/assets/stylesheets/framework/job_log.scss | 60 +++++++++------------- app/assets/stylesheets/framework/variables.scss | 3 ++ 12 files changed, 123 insertions(+), 98 deletions(-) create mode 100644 app/assets/javascripts/jobs/components/log/duration_badge.vue 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..39643f4594f --- /dev/null +++ b/app/assets/javascripts/jobs/components/log/duration_badge.vue @@ -0,0 +1,13 @@ + + \ No newline at end of file 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 { + +
+
+
+
+
diff --git a/app/assets/javascripts/jobs/mock_data/trace.js b/app/assets/javascripts/jobs/mock_data/trace.js index 8bacfded051..b8505e4185a 100644 --- a/app/assets/javascripts/jobs/mock_data/trace.js +++ b/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', }, { diff --git a/app/assets/javascripts/jobs/mock_data/trace_incremental.js b/app/assets/javascripts/jobs/mock_data/trace_incremental.js index 56ff3c14321..a32ddedf956 100644 --- a/app/assets/javascripts/jobs/mock_data/trace_incremental.js +++ b/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', }, { diff --git a/app/assets/javascripts/jobs/store/actions.js b/app/assets/javascripts/jobs/store/actions.js index 41cc5a181dc..5e23eeb08b7 100644 --- a/app/assets/javascripts/jobs/store/actions.js +++ b/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')); diff --git a/app/assets/javascripts/jobs/store/mutations.js b/app/assets/javascripts/jobs/store/mutations.js index 074143acf70..d5d5cebb057 100644 --- a/app/assets/javascripts/jobs/store/mutations.js +++ b/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; diff --git a/app/assets/javascripts/jobs/store/utils.js b/app/assets/javascripts/jobs/store/utils.js index 26ef13cc4fc..bb8cf5b80de 100644 --- a/app/assets/javascripts/jobs/store/utils.js +++ b/app/assets/javascripts/jobs/store/utils.js @@ -1,4 +1,10 @@ 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 diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss index 9ab7ac8f394..fcf185df4a8 100644 --- a/app/assets/stylesheets/framework/job_log.scss +++ b/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; +} 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 -- cgit v1.2.1