debian-mirror-gitlab/app/assets/javascripts/jobs/components/sidebar.vue

225 lines
6.8 KiB
Vue
Raw Normal View History

2018-12-05 23:21:45 +05:30
<script>
2020-03-09 13:42:32 +05:30
import { isEmpty } from 'lodash';
2018-12-13 13:39:08 +05:30
import { mapActions, mapState } from 'vuex';
2019-02-15 15:39:39 +05:30
import { GlLink, GlButton } from '@gitlab/ui';
2020-01-01 13:55:28 +05:30
import { __, sprintf } from '~/locale';
2018-12-13 13:39:08 +05:30
import timeagoMixin from '~/vue_shared/mixins/timeago';
import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
import Icon from '~/vue_shared/components/icon.vue';
import DetailRow from './sidebar_detail_row.vue';
import ArtifactsBlock from './artifacts_block.vue';
import TriggerBlock from './trigger_block.vue';
import CommitBlock from './commit_block.vue';
import StagesDropdown from './stages_dropdown.vue';
import JobsContainer from './jobs_container.vue';
2018-12-05 23:21:45 +05:30
2018-12-13 13:39:08 +05:30
export default {
name: 'JobSidebar',
components: {
ArtifactsBlock,
CommitBlock,
DetailRow,
Icon,
TriggerBlock,
StagesDropdown,
JobsContainer,
2019-02-15 15:39:39 +05:30
GlLink,
GlButton,
2018-12-13 13:39:08 +05:30
},
mixins: [timeagoMixin],
props: {
runnerHelpUrl: {
type: String,
required: false,
default: '',
2018-12-05 23:21:45 +05:30
},
2018-12-13 13:39:08 +05:30
},
computed: {
2019-09-04 21:01:54 +05:30
...mapState(['job', 'stages', 'jobs', 'selectedStage']),
2018-12-13 13:39:08 +05:30
coverage() {
return `${this.job.coverage}%`;
2018-12-05 23:21:45 +05:30
},
2018-12-13 13:39:08 +05:30
duration() {
return timeIntervalInWords(this.job.duration);
},
queued() {
return timeIntervalInWords(this.job.queued);
},
runnerId() {
return `${this.job.runner.description} (#${this.job.runner.id})`;
},
retryButtonClass() {
2019-03-02 22:35:43 +05:30
let className = 'js-retry-button btn btn-retry';
2018-12-13 13:39:08 +05:30
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 '';
}
2018-12-05 23:21:45 +05:30
2018-12-13 13:39:08 +05:30
let t = this.job.metadata.timeout_human_readable;
if (this.job.metadata.timeout_source !== '') {
2019-09-30 21:07:59 +05:30
t += sprintf(__(` (from %{timeoutSource})`), {
timeoutSource: this.job.metadata.timeout_source,
});
2018-12-13 13:39:08 +05:30
}
2018-12-05 23:21:45 +05:30
2018-12-13 13:39:08 +05:30
return t;
},
renderBlock() {
return (
this.job.duration ||
2019-10-12 21:52:04 +05:30
this.job.finished_at ||
2018-12-13 13:39:08 +05:30
this.job.erased_at ||
this.job.queued ||
2019-10-12 21:52:04 +05:30
this.hasTimeout ||
2018-12-13 13:39:08 +05:30
this.job.runner ||
this.job.coverage ||
2019-10-12 21:52:04 +05:30
this.job.tags.length
2018-12-13 13:39:08 +05:30
);
},
hasArtifact() {
2020-03-09 13:42:32 +05:30
return !isEmpty(this.job.artifact);
2018-12-05 23:21:45 +05:30
},
2018-12-13 13:39:08 +05:30
hasTriggers() {
2020-03-09 13:42:32 +05:30
return !isEmpty(this.job.trigger);
2018-12-05 23:21:45 +05:30
},
2018-12-13 13:39:08 +05:30
hasStages() {
return (
(this.job &&
this.job.pipeline &&
this.job.pipeline.stages &&
this.job.pipeline.stages.length > 0) ||
false
);
},
commit() {
return this.job.pipeline && this.job.pipeline.commit ? this.job.pipeline.commit : {};
},
},
methods: {
...mapActions(['fetchJobsForStage', 'toggleSidebar']),
},
};
2018-12-05 23:21:45 +05:30
</script>
<template>
2019-02-15 15:39:39 +05:30
<aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
2018-12-05 23:21:45 +05:30
<div class="sidebar-container">
<div class="blocks-container">
2019-03-02 22:35:43 +05:30
<div class="block d-flex flex-nowrap align-items-center">
2019-07-07 11:18:12 +05:30
<h4 class="my-0 mr-2 text-break-word">{{ job.name }}</h4>
2019-03-02 22:35:43 +05:30
<div class="flex-grow-1 flex-shrink-0 text-right">
<gl-link
v-if="job.retry_path"
:class="retryButtonClass"
:href="job.retry_path"
data-method="post"
2020-03-09 13:42:32 +05:30
data-qa-selector="retry_button"
2019-03-02 22:35:43 +05:30
rel="nofollow"
>{{ __('Retry') }}</gl-link
>
<gl-link
v-if="job.cancel_path"
:href="job.cancel_path"
class="js-cancel-job btn btn-default"
data-method="post"
rel="nofollow"
>{{ __('Cancel') }}</gl-link
>
</div>
2019-02-15 15:39:39 +05:30
<gl-button
2018-12-13 13:39:08 +05:30
:aria-label="__('Toggle Sidebar')"
type="button"
2019-02-15 15:39:39 +05:30
class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle"
2018-12-13 13:39:08 +05:30
@click="toggleSidebar"
>
2019-02-15 15:39:39 +05:30
<i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
</gl-button>
2018-12-13 13:39:08 +05:30
</div>
2019-03-02 22:35:43 +05:30
<div v-if="job.terminal_path || job.new_issue_path" class="block retry-link">
2019-02-15 15:39:39 +05:30
<gl-link
2018-12-13 13:39:08 +05:30
v-if="job.new_issue_path"
:href="job.new_issue_path"
2019-03-02 22:35:43 +05:30
class="js-new-issue btn btn-success btn-inverted float-left mr-2"
2019-02-15 15:39:39 +05:30
>{{ __('New issue') }}</gl-link
2018-12-13 13:39:08 +05:30
>
2019-02-15 15:39:39 +05:30
<gl-link
2019-03-02 22:35:43 +05:30
v-if="job.terminal_path"
:href="job.terminal_path"
class="js-terminal-link btn btn-primary btn-inverted visible-md-block visible-lg-block float-left"
target="_blank"
2018-12-13 13:39:08 +05:30
>
2019-03-02 22:35:43 +05:30
{{ __('Debug') }} <icon name="external-link" :size="14" />
</gl-link>
2018-12-13 13:39:08 +05:30
</div>
2019-03-02 22:35:43 +05:30
2019-10-12 21:52:04 +05:30
<div v-if="renderBlock" class="block">
2018-12-13 13:39:08 +05:30
<detail-row
v-if="job.duration"
:value="duration"
class="js-job-duration"
title="Duration"
/>
<detail-row
v-if="job.finished_at"
2020-01-01 13:55:28 +05:30
:value="timeFormatted(job.finished_at)"
2018-12-13 13:39:08 +05:30
class="js-job-finished"
title="Finished"
/>
<detail-row
v-if="job.erased_at"
2020-01-01 13:55:28 +05:30
:value="timeFormatted(job.erased_at)"
2018-12-13 13:39:08 +05:30
class="js-job-erased"
title="Erased"
/>
2019-02-15 15:39:39 +05:30
<detail-row v-if="job.queued" :value="queued" class="js-job-queued" title="Queued" />
2018-12-13 13:39:08 +05:30
<detail-row
v-if="hasTimeout"
:help-url="runnerHelpUrl"
:value="timeout"
class="js-job-timeout"
title="Timeout"
/>
2019-02-15 15:39:39 +05:30
<detail-row v-if="job.runner" :value="runnerId" class="js-job-runner" title="Runner" />
2018-12-13 13:39:08 +05:30
<detail-row
v-if="job.coverage"
:value="coverage"
class="js-job-coverage"
title="Coverage"
/>
2019-02-15 15:39:39 +05:30
<p v-if="job.tags.length" class="build-detail-row js-job-tags">
<span class="font-weight-bold">{{ __('Tags:') }}</span>
<span v-for="(tag, i) in job.tags" :key="i" class="badge badge-primary mr-1">{{
tag
}}</span>
2018-12-13 13:39:08 +05:30
</p>
</div>
2018-12-05 23:21:45 +05:30
2019-02-15 15:39:39 +05:30
<artifacts-block v-if="hasArtifact" :artifact="job.artifact" />
<trigger-block v-if="hasTriggers" :trigger="job.trigger" />
2018-12-13 13:39:08 +05:30
<commit-block
:is-last-block="hasStages"
:commit="commit"
:merge-request="job.merge_request"
/>
2018-12-05 23:21:45 +05:30
2018-12-13 13:39:08 +05:30
<stages-dropdown
:stages="stages"
:pipeline="job.pipeline"
:selected-stage="selectedStage"
@requestSidebarStageDropdown="fetchJobsForStage"
2018-12-05 23:21:45 +05:30
/>
</div>
2019-02-15 15:39:39 +05:30
<jobs-container v-if="jobs.length" :jobs="jobs" :job-id="job.id" />
2018-12-05 23:21:45 +05:30
</div>
</aside>
</template>