diff options
author | Mayra Cabrera <mcabrera@gitlab.com> | 2018-04-19 07:20:53 +0000 |
---|---|---|
committer | Grzegorz Bizon <grzegorz@gitlab.com> | 2018-04-19 07:20:53 +0000 |
commit | 93780da67ceebac19033bb0c44483e3af2d38a18 (patch) | |
tree | 7123498ec227f75c6d00e8dbab111a2fa3a2e64f /app/assets/javascripts/jobs | |
parent | 6ef8b497e721fac49a0914802244f98dd5d99078 (diff) | |
download | gitlab-ce-93780da67ceebac19033bb0c44483e3af2d38a18.tar.gz |
Resolve "Show `failure_reason` in jobs view content section"
Diffstat (limited to 'app/assets/javascripts/jobs')
3 files changed, 197 insertions, 143 deletions
diff --git a/app/assets/javascripts/jobs/components/header.vue b/app/assets/javascripts/jobs/components/header.vue index 357bc9aab17..21b545d6cab 100644 --- a/app/assets/javascripts/jobs/components/header.vue +++ b/app/assets/javascripts/jobs/components/header.vue @@ -1,82 +1,94 @@ <script> - import ciHeader from '../../vue_shared/components/header_ci_component.vue'; - import loadingIcon from '../../vue_shared/components/loading_icon.vue'; +import ciHeader from '../../vue_shared/components/header_ci_component.vue'; +import loadingIcon from '../../vue_shared/components/loading_icon.vue'; +import callout from '../../vue_shared/components/callout.vue'; - export default { - name: 'JobHeaderSection', - components: { - ciHeader, - loadingIcon, +export default { + name: 'JobHeaderSection', + components: { + ciHeader, + loadingIcon, + callout, + }, + props: { + job: { + type: Object, + required: true, }, - props: { - job: { - type: Object, - required: true, - }, - isLoading: { - type: Boolean, - required: true, - }, + isLoading: { + type: Boolean, + required: true, }, - data() { - return { - actions: this.getActions(), - }; + }, + data() { + return { + actions: this.getActions(), + }; + }, + computed: { + status() { + return this.job && this.job.status; }, - computed: { - status() { - return this.job && this.job.status; - }, - shouldRenderContent() { - return !this.isLoading && Object.keys(this.job).length; - }, - /** - * When job has not started the key will be `false` - * When job started the key will be a string with a date. - */ - jobStarted() { - return !this.job.started === false; - }, + shouldRenderContent() { + return !this.isLoading && Object.keys(this.job).length; }, - watch: { - job() { - this.actions = this.getActions(); - }, + shouldRenderReason() { + return !!(this.job.status && this.job.callout_message); }, - methods: { - getActions() { - const actions = []; + /** + * When job has not started the key will be `false` + * When job started the key will be a string with a date. + */ + jobStarted() { + return !this.job.started === false; + }, + }, + watch: { + job() { + this.actions = this.getActions(); + }, + }, + methods: { + getActions() { + const actions = []; - if (this.job.new_issue_path) { - actions.push({ - label: 'New issue', - path: this.job.new_issue_path, - cssClass: 'js-new-issue btn btn-new btn-inverted visible-md-block visible-lg-block', - type: 'link', - }); - } - return actions; - }, + if (this.job.new_issue_path) { + actions.push({ + label: 'New issue', + path: this.job.new_issue_path, + cssClass: 'js-new-issue btn btn-new btn-inverted visible-md-block visible-lg-block', + type: 'link', + }); + } + return actions; }, - }; + }, +}; </script> <template> - <div class="js-build-header build-header top-area"> - <ci-header - v-if="shouldRenderContent" - :status="status" - item-name="Job" - :item-id="job.id" - :time="job.created_at" - :user="job.user" - :actions="actions" - :has-sidebar-button="true" - :should-render-triggered-label="jobStarted" - /> - <loading-icon - v-if="isLoading" - size="2" - class="prepend-top-default append-bottom-default" + <header> + <div class="js-build-header build-header top-area"> + <ci-header + v-if="shouldRenderContent" + :status="status" + item-name="Job" + :item-id="job.id" + :time="job.created_at" + :user="job.user" + :actions="actions" + :has-sidebar-button="true" + :should-render-triggered-label="jobStarted" + /> + <loading-icon + v-if="isLoading" + size="2" + class="prepend-top-default append-bottom-default" + /> + </div> + + <callout + v-if="shouldRenderReason" + :message="job.callout_message" /> - </div> + </header> </template> diff --git a/app/assets/javascripts/jobs/components/sidebar_details_block.vue b/app/assets/javascripts/jobs/components/sidebar_details_block.vue index af47056d98f..4cd44bf7a76 100644 --- a/app/assets/javascripts/jobs/components/sidebar_details_block.vue +++ b/app/assets/javascripts/jobs/components/sidebar_details_block.vue @@ -1,80 +1,119 @@ <script> - import detailRow from './sidebar_detail_row.vue'; - import loadingIcon from '../../vue_shared/components/loading_icon.vue'; - import timeagoMixin from '../../vue_shared/mixins/timeago'; - import { timeIntervalInWords } from '../../lib/utils/datetime_utility'; +import detailRow from './sidebar_detail_row.vue'; +import loadingIcon from '../../vue_shared/components/loading_icon.vue'; +import timeagoMixin from '../../vue_shared/mixins/timeago'; +import { timeIntervalInWords } from '../../lib/utils/datetime_utility'; - export default { - name: 'SidebarDetailsBlock', - components: { - detailRow, - loadingIcon, +export default { + name: 'SidebarDetailsBlock', + components: { + detailRow, + loadingIcon, + }, + mixins: [timeagoMixin], + props: { + job: { + type: Object, + required: true, }, - mixins: [ - timeagoMixin, - ], - props: { - job: { - type: Object, - required: true, - }, - isLoading: { - type: Boolean, - required: true, - }, - runnerHelpUrl: { - type: String, - required: false, - default: '', - }, + isLoading: { + type: Boolean, + required: true, }, - computed: { - shouldRenderContent() { - return !this.isLoading && Object.keys(this.job).length > 0; - }, - coverage() { - return `${this.job.coverage}%`; - }, - duration() { - return timeIntervalInWords(this.job.duration); - }, - queued() { - return timeIntervalInWords(this.job.queued); - }, - runnerId() { - return `#${this.job.runner.id}`; - }, - hasTimeout() { - return this.job.metadata != null && this.job.metadata.timeout_human_readable !== null; - }, - timeout() { - if (this.job.metadata == null) { - return ''; - } + canUserRetry: { + type: Boolean, + required: false, + default: false, + }, + runnerHelpUrl: { + type: String, + required: false, + default: '', + }, + }, + computed: { + shouldRenderContent() { + return !this.isLoading && Object.keys(this.job).length > 0; + }, + coverage() { + return `${this.job.coverage}%`; + }, + duration() { + return timeIntervalInWords(this.job.duration); + }, + queued() { + return timeIntervalInWords(this.job.queued); + }, + runnerId() { + return `#${this.job.runner.id}`; + }, + retryButtonClass() { + let className = 'js-retry-button pull-right btn btn-retry visible-md-block visible-lg-block'; + className += + this.job.status && this.job.recoverable + ? ' btn-primary' + : ' btn-inverted-secondary'; + return className; + }, + hasTimeout() { + return this.job.metadata != null && this.job.metadata.timeout_human_readable !== null; + }, + timeout() { + if (this.job.metadata == null) { + return ''; + } - let t = this.job.metadata.timeout_human_readable; - if (this.job.metadata.timeout_source !== '') { - t += ` (from ${this.job.metadata.timeout_source})`; - } + let t = this.job.metadata.timeout_human_readable; + if (this.job.metadata.timeout_source !== '') { + t += ` (from ${this.job.metadata.timeout_source})`; + } - return t; - }, - renderBlock() { - return this.job.merge_request || - this.job.duration || - this.job.finished_data || - this.job.erased_at || - this.job.queued || - this.job.runner || - this.job.coverage || - this.job.tags.length || - this.job.cancel_path; - }, + return t; }, - }; + renderBlock() { + return ( + this.job.merge_request || + this.job.duration || + this.job.finished_data || + this.job.erased_at || + this.job.queued || + this.job.runner || + this.job.coverage || + this.job.tags.length || + this.job.cancel_path + ); + }, + }, +}; </script> <template> <div> + <div class="block"> + <strong class="inline prepend-top-8"> + {{ job.name }} + </strong> + <a + v-if="canUserRetry" + :class="retryButtonClass" + :href="job.retry_path" + data-method="post" + rel="nofollow" + > + {{ __('Retry') }} + </a> + <button + type="button" + :aria-label="__('Toggle Sidebar')" + class="btn btn-blank gutter-toggle pull-right + visible-xs-block visible-sm-block js-sidebar-build-toggle" + > + <i + aria-hidden="true" + data-hidden="true" + class="fa fa-angle-double-right" + ></i> + </button> + </div> <template v-if="shouldRenderContent"> <div class="block retry-link" @@ -85,16 +124,16 @@ class="js-new-issue btn btn-new btn-inverted" :href="job.new_issue_path" > - New issue + {{ __('New issue') }} </a> <a - v-if="job.retry_path" + v-if="canUserRetry" class="js-retry-job btn btn-inverted-secondary" :href="job.retry_path" data-method="post" rel="nofollow" > - Retry + {{ __('Retry') }} </a> </div> <div :class="{block : renderBlock }"> @@ -103,7 +142,7 @@ v-if="job.merge_request" > <span class="build-light-text"> - Merge Request: + {{ __('Merge Request:') }} </span> <a :href="job.merge_request.path"> !{{ job.merge_request.iid }} @@ -158,7 +197,7 @@ v-if="job.tags.length" > <span class="build-light-text"> - Tags: + {{ __('Tags:') }} </span> <span v-for="(tag, i) in job.tags" @@ -178,7 +217,7 @@ data-method="post" rel="nofollow" > - Cancel + {{ __('Cancel') }} </a> </div> </div> diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js index 656676ead91..f2939ad4dbe 100644 --- a/app/assets/javascripts/jobs/job_details_bundle.js +++ b/app/assets/javascripts/jobs/job_details_bundle.js @@ -35,9 +35,11 @@ export default () => { }); // Sidebar information block + const detailsBlockElement = document.getElementById('js-details-block-vue'); + const detailsBlockDataset = detailsBlockElement.dataset; // eslint-disable-next-line new Vue({ - el: '#js-details-block-vue', + el: detailsBlockElement, components: { detailsBlock, }, @@ -50,6 +52,7 @@ export default () => { return createElement('details-block', { props: { isLoading: this.mediator.state.isLoading, + canUserRetry: !!('canUserRetry' in detailsBlockDataset), job: this.mediator.store.state.job, runnerHelpUrl: dataset.runnerHelpUrl, }, |